1+ //
2+ "use client" ;
3+ import { useState } from "react" ;
4+ import { signInWithGoogle } from "@/lib/firebase/auth" ;
5+ import { useRouter } from "next/navigation" ;
6+ import Image from "next/image" ;
7+ import Link from "next/link" ;
8+
9+ export default function AuthPage ( ) {
10+ const [ error , setError ] = useState < string | null > ( null ) ;
11+ const [ loading , setLoading ] = useState ( false ) ;
12+ const [ agreed , setAgreed ] = useState ( false ) ;
13+ const router = useRouter ( ) ;
14+
15+ const handleLoginWithGoogle = async ( ) => {
16+ if ( ! agreed ) {
17+ setError ( "Please agree to the terms and services." ) ;
18+ return ;
19+ }
20+
21+ setLoading ( true ) ;
22+ setError ( null ) ;
23+ try {
24+ const result = await signInWithGoogle ( ) ;
25+ if ( result ?. isAdmin ) {
26+ router . push ( "/admin" ) ;
27+ } else {
28+ router . push ( "/" ) ;
29+ }
30+ } catch ( err ) {
31+ console . error ( "Failed to log in with Google:" , err ) ;
32+ setError ( err instanceof Error ? err . message : "Failed to log in with Google" ) ;
33+ } finally {
34+ setLoading ( false ) ;
35+ }
36+ } ;
37+
38+ return (
39+ < div className = "flex flex-col items-center justify-center min-h-screen bg-white dark:bg-black px-6 py-8 relative" >
40+ { /* Back Arrow Button */ }
41+ < Link
42+ href = "/"
43+ className = "absolute top-6 left-6 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
44+ aria-label = "Go back"
45+ >
46+ < svg
47+ xmlns = "http://www.w3.org/2000/svg"
48+ className = "w-6 h-6"
49+ viewBox = "0 0 24 24"
50+ fill = "none"
51+ stroke = "currentColor"
52+ strokeWidth = "2"
53+ strokeLinecap = "round"
54+ strokeLinejoin = "round"
55+ >
56+ < line x1 = "19" y1 = "12" x2 = "5" y2 = "12" > </ line >
57+ < polyline points = "12 19 5 12 12 5" > </ polyline >
58+ </ svg >
59+ </ Link >
60+
61+ < div className = "w-full max-w-md text-center space-y-6" >
62+ { /* Title */ }
63+ < h1 className = "text-2xl md:text-3xl font-semibold text-black dark:text-white" >
64+ Create your account
65+ </ h1 >
66+
67+ { /* Illustration */ }
68+ < div className = "flex justify-center" >
69+ < Image
70+ src = { "/images/FingerprintImg.png" }
71+ alt = "Fingerprint illustration"
72+ width = { 240 }
73+ height = { 240 }
74+ className = "rounded-xl w-[180px] h-[180px] md:w-[220px] md:h-[220px]"
75+ priority
76+ />
77+ </ div >
78+
79+ { /* Google Login Button */ }
80+ < button
81+ onClick = { handleLoginWithGoogle }
82+ disabled = { loading }
83+ aria-label = "Continue with Google"
84+ type = "button"
85+ className = "flex items-center justify-center w-full py-3 px-6 rounded-full shadow-md
86+ bg-white border border-gray-300 hover:bg-gray-100
87+ transition-all disabled:opacity-60 disabled:cursor-not-allowed"
88+ >
89+ { loading ? (
90+ < span className = "text-base font-medium text-gray-600" > Logging in...</ span >
91+ ) : (
92+ < >
93+ < Image
94+ src = "https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg"
95+ alt = "Google logo"
96+ width = { 24 }
97+ height = { 24 }
98+ className = "w-5 h-5 md:w-6 md:h-6"
99+ />
100+ < span className = "ml-3 text-base font-medium text-gray-700" >
101+ Continue with Google
102+ </ span >
103+ </ >
104+ ) }
105+ </ button >
106+
107+ { /* Terms and Services */ }
108+ < div className = "flex items-center justify-center space-x-3 text-sm md:text-base" >
109+ < input
110+ type = "checkbox"
111+ id = "terms"
112+ checked = { agreed }
113+ onChange = { ( ) => setAgreed ( ! agreed ) }
114+ className = "form-checkbox text-blue-600 w-4 h-4 md:w-5 md:h-5"
115+ />
116+ < label htmlFor = "terms" className = "text-gray-600 dark:text-gray-400" >
117+ I agree to my < span className = "font-semibold underline" > terms and services</ span >
118+ </ label >
119+ </ div >
120+
121+ { /* Error Message */ }
122+ { error && (
123+ < p className = "text-red-500 text-sm md:text-base" >
124+ { error }
125+ </ p >
126+ ) }
127+ </ div >
128+ </ div >
129+ ) ;
130+ }
0 commit comments