@jhustle44 / jcr-guide-pro
Code Commits Issues Pulls Cloud Agent CI/CD
master
copilot/add-firebase copilot/change-app-name-to-jcrguru copilot/create-zip-file copilot/create-zip-file-again copilot/merge-any-updates main master
tsx 177 lines 8.82 KB
Raw
1 import { useState } from "react";
2 import { useAuth } from "@/hooks/useAuth";
3 import { useLocation } from "wouter";
4 import { Button } from "@/components/ui/button";
5 import { Input } from "@/components/ui/input";
6 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
7 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
8 import { Wrench, Mail, Lock, User, ArrowRight } from "lucide-react";
9 import { motion } from "framer-motion";
10
11 export default function AuthPage() {
12 const { user, loginMutation, registerMutation } = useAuth();
13 const [, setLocation] = useLocation();
14 const [email, setEmail] = useState("");
15 const [password, setPassword] = useState("");
16 const [firstName, setFirstName] = useState("");
17 const [lastName, setLastName] = useState("");
18
19 if (user) {
20 setLocation("/");
21 return null;
22 }
23
24 const handleLogin = (e: React.FormEvent) => {
25 e.preventDefault();
26 loginMutation.mutate({ email, password });
27 };
28
29 const handleRegister = (e: React.FormEvent) => {
30 e.preventDefault();
31 registerMutation.mutate({ email, password, firstName, lastName });
32 };
33
34 return (
35 <div className="min-h-screen bg-background flex items-center justify-center p-4 relative overflow-hidden">
36 {/* Background blobs */}
37 <div className="absolute top-0 left-0 w-full h-full -z-10">
38 <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-[100px] animate-pulse" />
39 <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-indigo-500/10 rounded-full blur-[100px] animate-pulse delay-700" />
40 </div>
41
42 <motion.div
43 initial={{ opacity: 0, scale: 0.95 }}
44 animate={{ opacity: 1, scale: 1 }}
45 transition={{ duration: 0.5 }}
46 className="w-full max-w-md"
47 >
48 <div className="flex flex-col items-center mb-8">
49 <div className="h-16 w-16 rounded-2xl bg-primary flex items-center justify-center mb-4 shadow-glass">
50 <Wrench className="h-8 w-8 text-white" />
51 </div>
52 <h1 className="text-3xl font-black tracking-tight">JCRguru</h1>
53 <p className="text-muted-foreground font-medium">Professional Repair Hub</p>
54 </div>
55
56 <Card className="border-border/40 shadow-glass rounded-[2.5rem] overflow-hidden bg-card/40 backdrop-blur-2xl">
57 <Tabs defaultValue="login" className="w-full">
58 <TabsList className="grid grid-cols-2 bg-muted/20 p-1 rounded-none border-b border-border/40">
59 <TabsTrigger value="login" className="rounded-none py-3 data-[state=active]:bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-primary transition-all">Login</TabsTrigger>
60 <TabsTrigger value="register" className="rounded-none py-3 data-[state=active]:bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-primary transition-all">Join Us</TabsTrigger>
61 </TabsList>
62
63 <CardContent className="p-8">
64 <TabsContent value="login" className="mt-0">
65 <form onSubmit={handleLogin} className="space-y-4">
66 <div className="space-y-2">
67 <label className="text-xs font-black uppercase tracking-widest text-muted-foreground ml-1">Email Address</label>
68 <div className="relative">
69 <Mail className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
70 <Input
71 type="email"
72 placeholder="tech@example.com"
73 value={email}
74 onChange={(e) => setEmail(e.target.value)}
75 className="pl-12 h-12 rounded-2xl bg-muted/30 border-none focus-visible:ring-primary/20"
76 required
77 />
78 </div>
79 </div>
80 <div className="space-y-2">
81 <label className="text-xs font-black uppercase tracking-widest text-muted-foreground ml-1">Password</label>
82 <div className="relative">
83 <Lock className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
84 <Input
85 type="password"
86 placeholder="••••••••"
87 value={password}
88 onChange={(e) => setPassword(e.target.value)}
89 className="pl-12 h-12 rounded-2xl bg-muted/30 border-none focus-visible:ring-primary/20"
90 required
91 />
92 </div>
93 </div>
94 <Button
95 type="submit"
96 className="w-full h-12 rounded-2xl bg-primary hover:bg-primary/90 text-white font-bold shadow-lg shadow-primary/20 transition-all mt-4"
97 disabled={loginMutation.isPending}
98 >
99 {loginMutation.isPending ? "Connecting..." : "Sign In"}
100 {!loginMutation.isPending && <ArrowRight className="ml-2 h-4 w-4" />}
101 </Button>
102 </form>
103 </TabsContent>
104
105 <TabsContent value="register" className="mt-0">
106 <form onSubmit={handleRegister} className="space-y-4">
107 <div className="grid grid-cols-2 gap-4">
108 <div className="space-y-2">
109 <label className="text-xs font-black uppercase tracking-widest text-muted-foreground ml-1">First Name</label>
110 <Input
111 placeholder="John"
112 value={firstName}
113 onChange={(e) => setFirstName(e.target.value)}
114 className="h-12 rounded-2xl bg-muted/30 border-none focus-visible:ring-primary/20"
115 required
116 />
117 </div>
118 <div className="space-y-2">
119 <label className="text-xs font-black uppercase tracking-widest text-muted-foreground ml-1">Last Name</label>
120 <Input
121 placeholder="Doe"
122 value={lastName}
123 onChange={(e) => setLastName(e.target.value)}
124 className="h-12 rounded-2xl bg-muted/30 border-none focus-visible:ring-primary/20"
125 required
126 />
127 </div>
128 </div>
129 <div className="space-y-2">
130 <label className="text-xs font-black uppercase tracking-widest text-muted-foreground ml-1">Email</label>
131 <div className="relative">
132 <Mail className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
133 <Input
134 type="email"
135 placeholder="tech@example.com"
136 value={email}
137 onChange={(e) => setEmail(e.target.value)}
138 className="pl-12 h-12 rounded-2xl bg-muted/30 border-none focus-visible:ring-primary/20"
139 required
140 />
141 </div>
142 </div>
143 <div className="space-y-2">
144 <label className="text-xs font-black uppercase tracking-widest text-muted-foreground ml-1">Password</label>
145 <div className="relative">
146 <Lock className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
147 <Input
148 type="password"
149 placeholder="••••••••"
150 value={password}
151 onChange={(e) => setPassword(e.target.value)}
152 className="pl-12 h-12 rounded-2xl bg-muted/30 border-none focus-visible:ring-primary/20"
153 required
154 />
155 </div>
156 </div>
157 <Button
158 type="submit"
159 className="w-full h-12 rounded-2xl bg-primary hover:bg-primary/90 text-white font-bold shadow-lg shadow-primary/20 transition-all mt-4"
160 disabled={registerMutation.isPending}
161 >
162 {registerMutation.isPending ? "Creating..." : "Create Account"}
163 {!registerMutation.isPending && <User className="ml-2 h-4 w-4" />}
164 </Button>
165 </form>
166 </TabsContent>
167 </CardContent>
168 </Tabs>
169 </Card>
170
171 <p className="text-center text-xs text-muted-foreground mt-8 px-8">
172 By signing in, you agree to JCRguru's Technical Service Guidelines and Community Standards.
173 </p>
174 </motion.div>
175 </div>
176 );
177 }