128 lines
5.4 KiB
TypeScript
128 lines
5.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Button } from "~/components/ui/button"
|
|
import { Input } from "~/components/ui/input"
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs"
|
|
import { Label } from "~/components/ui/label"
|
|
import { Eye, EyeOff } from 'lucide-react'
|
|
import Sign_In from "~/components/auth/client/SignInAppleButton"
|
|
|
|
export default function AuthPage() {
|
|
const [showPassword, setShowPassword] = useState(false)
|
|
|
|
const togglePasswordVisibility = () => setShowPassword(!showPassword)
|
|
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen bg-background">
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl font-bold text-center text-primary">
|
|
Welcome to Magnolia Coast Property Management
|
|
</CardTitle>
|
|
<CardDescription className="text-center text-muted-foreground">
|
|
Login or create an account to get started
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Tabs defaultValue="login" className="w-full">
|
|
<TabsList className="grid w-full grid-cols-2">
|
|
<TabsTrigger value="login">Login</TabsTrigger>
|
|
<TabsTrigger value="register">Register</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="login">
|
|
<form>
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input id="email" placeholder="Enter your email" type="email" required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">Password</Label>
|
|
<div className="relative">
|
|
<Input
|
|
id="password"
|
|
placeholder="Enter your password"
|
|
type={showPassword ? "text" : "password"}
|
|
required
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
|
|
onClick={togglePasswordVisibility}
|
|
>
|
|
{showPassword ? (
|
|
<EyeOff className="h-4 w-4 text-muted-foreground" />
|
|
) : (
|
|
<Eye className="h-4 w-4 text-muted-foreground" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col justify-center">
|
|
<Button className="w-full mt-6 mb-4 text-md" type="submit">Login</Button>
|
|
<Sign_In/>
|
|
</div>
|
|
</form>
|
|
</TabsContent>
|
|
<TabsContent value="register">
|
|
<form>
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="register-name">Full Name</Label>
|
|
<Input id="register-name" placeholder="Enter your full name" required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="register-email">Email</Label>
|
|
<Input id="register-email" placeholder="Enter your email" type="email" required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="register-password">Password</Label>
|
|
<div className="relative">
|
|
<Input
|
|
id="register-password"
|
|
placeholder="Create a password"
|
|
type={showPassword ? "text" : "password"}
|
|
required
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
|
|
onClick={togglePasswordVisibility}
|
|
>
|
|
{showPassword ? (
|
|
<EyeOff className="h-4 w-4 text-muted-foreground" />
|
|
) : (
|
|
<Eye className="h-4 w-4 text-muted-foreground" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col justify-center">
|
|
<Button className="w-full mt-6 mb-4 text-md" type="submit">Register</Button>
|
|
<Sign_In/>
|
|
</div>
|
|
</form>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-center">
|
|
<p className="text-sm text-muted-foreground">
|
|
By continuing, you agree to our{' '}
|
|
<a href="#" className="underline text-primary">Terms of Service</a> and{' '}
|
|
<a href="#" className="underline text-primary">Privacy Policy</a>
|
|
</p>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|