mirror of
https://github.com/ForFarmTeam/ForFarm.git
synced 2025-12-19 14:04:08 +01:00
refactor: move auth page directory
This commit is contained in:
parent
05dd69e957
commit
a1f9a8afdc
@ -1,82 +0,0 @@
|
|||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import ForgotPasswordModal from "./forgot-password-modal";
|
|
||||||
import WaterDrop from "./waterdrop";
|
|
||||||
|
|
||||||
import Link from "next/link";
|
|
||||||
import Image from "next/image";
|
|
||||||
|
|
||||||
export default function Signin() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="grid grid-cols-[1.3fr_1.2fr] gap-0 h-screen overflow-hidden">
|
|
||||||
<div className="flex bg-[url('/plant-background.jpeg')] bg-cover bg-center">
|
|
||||||
{/* <div className="flex flex-col gap-y-10 mt-40 ml-40">
|
|
||||||
<h1 className="text-5xl">Welcome back!</h1>
|
|
||||||
<p>Log in to personalize your planting adventure!</p>
|
|
||||||
</div> */}
|
|
||||||
{/* water pot and dripping animation */}
|
|
||||||
{/* <div className="absolute items-center mt-96 ">
|
|
||||||
<Image
|
|
||||||
src="/water-pot.png"
|
|
||||||
alt="Water Pot"
|
|
||||||
width={300}
|
|
||||||
height={300}
|
|
||||||
className=" ml-72"
|
|
||||||
/>
|
|
||||||
<div className="absolute top-[150px] left-[560px] overflow-hidden">
|
|
||||||
<WaterDrop />
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-center items-center ">
|
|
||||||
{/* login box */}
|
|
||||||
<div className="w-[560px] h-[600px]">
|
|
||||||
<div className="flex flex-col gap-5 justify-center items-center">
|
|
||||||
<h1 className="text-4xl mt-5 font-semibold">Log In</h1>
|
|
||||||
<div className="flex whitespace-nowrap gap-x-2">
|
|
||||||
<span>Don't have an account?</span>
|
|
||||||
<span className="text-green-600">
|
|
||||||
<Link href="#">Sign up</Link>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* OAUTH */}
|
|
||||||
<div className="flex flex-col items-center mt-10 gap-x-5">
|
|
||||||
{/* Google */}
|
|
||||||
<div className="flex justify-center rounded-full bg-gray-200 hover:bg-gray-300 duration-300 w-[90] h-[55] cursor-pointer ">
|
|
||||||
<Image src="/google-logo.png" alt="Google Logo" width={35} height={35} className="object-contain" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col mt-10 ">
|
|
||||||
<div>
|
|
||||||
<h1 className="whitespace-nowrap flex items-start ml-24">
|
|
||||||
EMAIL <span className="text-red-500">*</span>
|
|
||||||
</h1>
|
|
||||||
<div className="flex flex-col items-center">
|
|
||||||
<Input type="email" className="w-2/3 mt-3" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-5">
|
|
||||||
<h1 className="whitespace-nowrap flex items-start ml-24">
|
|
||||||
PASSWORD <span className="text-red-500">*</span>
|
|
||||||
</h1>
|
|
||||||
<div className="flex flex-col items-center">
|
|
||||||
<Input type="password" className="w-2/3 mt-3" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ForgotPasswordModal />
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-center mt-5">
|
|
||||||
<Button className="rounded-full w-20 h-12">Submit</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -15,19 +15,18 @@ import { Label } from "@/components/ui/label";
|
|||||||
|
|
||||||
export default function ForgotPasswordModal() {
|
export default function ForgotPasswordModal() {
|
||||||
return (
|
return (
|
||||||
<div className="mt-5">
|
<div>
|
||||||
<Dialog>
|
<Dialog>
|
||||||
<DialogTrigger asChild>
|
<DialogTrigger asChild>
|
||||||
<Button className=" whitespace-nowrap flex ml-20 bg-transparent border-none hover:bg-transparent shadow-none">
|
<Button className=" whitespace-nowrap flex bg-transparent border-none hover:bg-transparent shadow-none">
|
||||||
<h1 className="text-green-600">Forgot password?</h1>
|
<h1 className="text-green-600 underline">Forgot password?</h1>
|
||||||
</Button>
|
</Button>
|
||||||
</DialogTrigger>
|
</DialogTrigger>
|
||||||
<DialogContent className="sm:max-w-md">
|
<DialogContent className="sm:max-w-md">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>What's your email?</DialogTitle>
|
<DialogTitle>What's your email?</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
Please verify your email for us. Once you do, we'll send
|
Please verify your email for us. Once you do, we'll send instructions to reset your password
|
||||||
instructions to reset your password
|
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
@ -35,11 +34,7 @@ export default function ForgotPasswordModal() {
|
|||||||
<Label htmlFor="link" className="sr-only">
|
<Label htmlFor="link" className="sr-only">
|
||||||
Link
|
Link
|
||||||
</Label>
|
</Label>
|
||||||
<Input
|
<Input id="email" type="email" placeholder="your.email@gmail.com" />
|
||||||
id="email"
|
|
||||||
type="email"
|
|
||||||
placeholder="your.email@gmail.com"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DialogFooter className="sm:justify-start">
|
<DialogFooter className="sm:justify-start">
|
||||||
76
frontend/app/auth/signin/page.tsx
Normal file
76
frontend/app/auth/signin/page.tsx
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import ForgotPasswordModal from "./forgot-password-modal";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
export default function SigninPage() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="grid grid-cols-[0.7fr_1.2fr] h-screen overflow-hidden">
|
||||||
|
<div className="flex bg-[url('/plant-background.jpeg')] bg-cover bg-center"></div>
|
||||||
|
|
||||||
|
<div className="flex justify-center items-center">
|
||||||
|
{/* login box */}
|
||||||
|
<div className="container px-[25%]">
|
||||||
|
<div className="flex flex-col justify-center items-center">
|
||||||
|
<span>
|
||||||
|
<Image src={`/forfarm-logo.png`} alt="Forfarm" width={150} height={150}></Image>
|
||||||
|
</span>
|
||||||
|
<h1 className="text-3xl font-semibold">Welcome back.</h1>
|
||||||
|
<div className="flex whitespace-nowrap gap-x-2 mt-2">
|
||||||
|
<span className="text-md">New to Forfarm?</span>
|
||||||
|
<span className="text-green-600">
|
||||||
|
<Link href="signup" className="underline">
|
||||||
|
Sign up
|
||||||
|
</Link>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col mt-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="email">Email</Label>
|
||||||
|
<Input type="email" id="email" placeholder="Email" />
|
||||||
|
</div>
|
||||||
|
<div className="mt-5">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="password">Password</Label>
|
||||||
|
<Input type="empasswordail" id="password" placeholder="Password" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button className="mt-5 rounded-full">Log in</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="signin-footer" className="flex justify-between mt-5">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox id="terms" />
|
||||||
|
<label
|
||||||
|
htmlFor="terms"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<ForgotPasswordModal />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="my-5">
|
||||||
|
<p className="text-sm">Or log in with</p>
|
||||||
|
{/* OAUTH */}
|
||||||
|
<div className="flex flex-col gap-x-5 mt-3">
|
||||||
|
{/* Google */}
|
||||||
|
<div className="flex w-1/3 justify-center rounded-full border-2 border-border bg-gray-100 hover:bg-gray-300 duration-300 cursor-pointer ">
|
||||||
|
<Image src="/google-logo.png" alt="Google Logo" width={35} height={35} className="object-contain" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
69
frontend/app/auth/signup/page.tsx
Normal file
69
frontend/app/auth/signup/page.tsx
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
export default function SignupPage() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="grid grid-cols-[0.7fr_1.2fr] h-screen overflow-hidden">
|
||||||
|
<div className="flex bg-[url('/plant-background.jpeg')] bg-cover bg-center"></div>
|
||||||
|
|
||||||
|
<div className="flex justify-center items-center">
|
||||||
|
{/* login box */}
|
||||||
|
<div className="container px-[25%]">
|
||||||
|
<div className="flex flex-col justify-center items-center">
|
||||||
|
<span>
|
||||||
|
<Image src={`/forfarm-logo.png`} alt="Forfarm" width={150} height={150}></Image>
|
||||||
|
</span>
|
||||||
|
<h1 className="text-3xl font-semibold">Hi! Welcome</h1>
|
||||||
|
<div className="flex whitespace-nowrap gap-x-2 mt-2">
|
||||||
|
<span className="text-md">Already have accounts?</span>
|
||||||
|
<span className="text-green-600">
|
||||||
|
<Link href="signin" className="underline">
|
||||||
|
Sign in
|
||||||
|
</Link>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col mt-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="email">Email</Label>
|
||||||
|
<Input type="email" id="email" placeholder="Email" />
|
||||||
|
</div>
|
||||||
|
<div className="mt-5">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="password">Password</Label>
|
||||||
|
<Input type="empasswordail" id="password" placeholder="Password" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-5">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="password">Confirm Password</Label>
|
||||||
|
<Input type="empasswordail" id="password" placeholder="Password" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button className="mt-5 rounded-full">Sign up</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="my-5">
|
||||||
|
<p className="text-sm">Or log in with</p>
|
||||||
|
{/* OAUTH */}
|
||||||
|
<div className="flex flex-col gap-x-5 mt-3">
|
||||||
|
{/* Google */}
|
||||||
|
<div className="flex w-1/3 justify-center rounded-full border-2 border-border bg-gray-100 hover:bg-gray-300 duration-300 cursor-pointer ">
|
||||||
|
<Image src="/google-logo.png" alt="Google Logo" width={35} height={35} className="object-contain" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user