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() {
|
||||
return (
|
||||
<div className="mt-5">
|
||||
<div>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button className=" whitespace-nowrap flex ml-20 bg-transparent border-none hover:bg-transparent shadow-none">
|
||||
<h1 className="text-green-600">Forgot password?</h1>
|
||||
<Button className=" whitespace-nowrap flex bg-transparent border-none hover:bg-transparent shadow-none">
|
||||
<h1 className="text-green-600 underline">Forgot password?</h1>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>What's your email?</DialogTitle>
|
||||
<DialogDescription>
|
||||
Please verify your email for us. Once you do, we'll send
|
||||
instructions to reset your password
|
||||
Please verify your email for us. Once you do, we'll send instructions to reset your password
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex items-center space-x-2">
|
||||
@ -35,11 +34,7 @@ export default function ForgotPasswordModal() {
|
||||
<Label htmlFor="link" className="sr-only">
|
||||
Link
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="your.email@gmail.com"
|
||||
/>
|
||||
<Input id="email" type="email" placeholder="your.email@gmail.com" />
|
||||
</div>
|
||||
</div>
|
||||
<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