119 lines
5.0 KiB
TypeScript
119 lines
5.0 KiB
TypeScript
import React, { useState } from "react";
|
|
import RadialGradientBackground from "@/components/ui/RadialGradientBackground";
|
|
import Card from "@/components/ui/Card";
|
|
import Input from "@/components/ui/Input";
|
|
import Button from "@/components/ui/Button";
|
|
import Separator from "@/components/ui/Separator";
|
|
import SelectorButton from "@/components/ui/SelectorButton";
|
|
import TextLink from "@/components/ui/TextLink";
|
|
|
|
export default function AuthPage() {
|
|
const [step, setStep] = useState<"initial" | "verify">("initial");
|
|
const [role, setRole] = useState<string>("buyer");
|
|
const [authMode, setAuthMode] = useState<"login" | "signup">("signup");
|
|
|
|
return (
|
|
<div className="min-h-svh bg-background flex flex-col relative overflow-hidden">
|
|
<RadialGradientBackground position="fixed" />
|
|
|
|
<div className="flex-1 flex items-center justify-center p-4 relative z-10">
|
|
<Card className="w-full max-w-content-width p-8 flex flex-col gap-6 bg-card/80 backdrop-blur-xl border-border shadow-2xl">
|
|
{step === "initial" ? (
|
|
<>
|
|
<div className="text-center space-y-2">
|
|
<h1 className="text-2xl font-bold text-foreground">
|
|
{authMode === "signup" ? "Create an account" : "Welcome back"}
|
|
</h1>
|
|
<p className="text-muted-foreground text-sm">
|
|
{authMode === "signup"
|
|
? "Join Future Frame to start building or buying."
|
|
: "Enter your details to access your account."}
|
|
</p>
|
|
</div>
|
|
|
|
{authMode === "signup" && (
|
|
<div className="space-y-3">
|
|
<label className="text-sm font-medium text-foreground">I am a:</label>
|
|
<SelectorButton
|
|
options={[
|
|
{ value: "buyer", label: "Buyer" },
|
|
{ value: "developer", label: "Developer" }
|
|
]}
|
|
activeValue={role}
|
|
onValueChange={setRole}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-4">
|
|
<Input
|
|
type="text"
|
|
placeholder="Email or Phone Number"
|
|
className="w-full bg-background border-border text-foreground"
|
|
/>
|
|
<Button
|
|
text="Continue"
|
|
variant="primary"
|
|
className="w-full justify-center"
|
|
onClick={() => setStep("verify")}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Separator className="flex-1" />
|
|
<span className="text-xs text-muted-foreground uppercase tracking-wider">Or continue with</span>
|
|
<Separator className="flex-1" />
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<Button text="Google" variant="secondary" className="w-full justify-center" />
|
|
<Button text="GitHub" variant="secondary" className="w-full justify-center" />
|
|
</div>
|
|
|
|
<div className="text-center text-sm text-muted-foreground mt-4">
|
|
{authMode === "signup" ? "Already have an account?" : "Don't have an account? "} <TextLink text={authMode ==="signup" ? "Log in" : "Sign up"}
|
|
onClick={() => setAuthMode(authMode === "signup" ? "login" : "signup")}
|
|
className="text-foreground font-medium cursor-pointer"
|
|
/>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="text-center space-y-2">
|
|
<h1 className="text-2xl font-bold text-foreground">Check your device</h1>
|
|
<p className="text-muted-foreground text-sm">
|
|
We sent a 6-digit verification code to your contact method.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4 mt-4">
|
|
<Input
|
|
type="text"
|
|
placeholder="000000"
|
|
className="w-full text-center text-2xl tracking-widest bg-background border-border text-foreground"
|
|
maxLength={6}
|
|
/>
|
|
<Button
|
|
text="Verify & Proceed"
|
|
variant="primary"
|
|
className="w-full justify-center"
|
|
onClick={() => alert("Verified!")}
|
|
/>
|
|
</div>
|
|
|
|
<div className="text-center mt-6 space-y-2">
|
|
<p className="text-sm text-muted-foreground">Code expires in <span className="text-foreground font-mono">04:59</span></p>
|
|
<TextLink
|
|
text="Back to login"
|
|
onClick={() => setStep("initial")}
|
|
className="text-sm text-muted-foreground hover:text-foreground cursor-pointer"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |