1- import { useState } from 'react' ;
1+ import { useState } from 'react' ;
22import { useAuth } from '../context/AuthContext' ;
33import { IS_OFFLINE } from '../config' ;
44import { api } from '../api' ;
@@ -10,27 +10,41 @@ export default function Auth() {
1010 const [ password , setPassword ] = useState ( '' ) ;
1111 const [ userType , setUserType ] = useState ( 'high_school' ) ;
1212 const [ error , setError ] = useState ( '' ) ;
13+ const [ submitting , setSubmitting ] = useState ( false ) ;
1314
1415 async function handleSubmit ( e ) {
1516 e . preventDefault ( ) ;
17+ if ( submitting ) return ;
18+
1619 setError ( '' ) ;
17- const body = mode === 'login'
18- ? { email, password }
19- : { email, password, user_type : userType } ;
20- const json = mode === 'login'
21- ? await api . login ( body )
22- : await api . register ( body ) ;
23- if ( ! json ?. success ) {
24- setError ( json ?. error || 'Đăng nhập thất bại' ) ;
25- return ;
20+ setSubmitting ( true ) ;
21+
22+ try {
23+ const body = mode === 'login'
24+ ? { email, password }
25+ : { email, password, user_type : userType } ;
26+
27+ const json = mode === 'login'
28+ ? await api . login ( body )
29+ : await api . register ( body ) ;
30+
31+ if ( ! json ?. success ) {
32+ setError ( json ?. error || 'Dang nhap that bai' ) ;
33+ return ;
34+ }
35+
36+ login ( json . data ) ;
37+ } catch {
38+ setError ( 'Dang nhap that bai. Vui long thu lai.' ) ;
39+ } finally {
40+ setSubmitting ( false ) ;
2641 }
27- login ( json . data ) ;
2842 }
2943
3044 if ( user ) {
3145 return (
3246 < div className = "max-w-md mx-auto rounded-2xl border border-[#E8E2D8] bg-white p-6 shadow-sm" >
33- < div className = "text-lg font-semibold" > Bạn đã đăng nhập </ div >
47+ < div className = "text-lg font-semibold" > Ban da dang nhap </ div >
3448 < div className = "text-sm text-[#5B5B57] mt-2" > { user . email } </ div >
3549 </ div >
3650 ) ;
@@ -39,12 +53,12 @@ export default function Auth() {
3953 return (
4054 < div className = "max-w-md mx-auto rounded-2xl border border-[#E8E2D8] bg-white p-6 shadow-sm" >
4155 < div className = "flex gap-2 mb-4" >
42- < button className = { `px-3 py-2 rounded-lg text-sm ${ mode === 'login' ? 'bg-[var(--c-primary)] text-white' : 'border' } ` } onClick = { ( ) => setMode ( 'login' ) } > Đăng nhập </ button >
43- < button className = { `px-3 py-2 rounded-lg text-sm ${ mode === 'register' ? 'bg-[var(--c-primary)] text-white' : 'border' } ` } onClick = { ( ) => setMode ( 'register' ) } > Tạo tài khoản </ button >
56+ < button className = { `px-3 py-2 rounded-lg text-sm ${ mode === 'login' ? 'bg-[var(--c-primary)] text-white' : 'border' } ` } onClick = { ( ) => setMode ( 'login' ) } > Dang nhap </ button >
57+ < button className = { `px-3 py-2 rounded-lg text-sm ${ mode === 'register' ? 'bg-[var(--c-primary)] text-white' : 'border' } ` } onClick = { ( ) => setMode ( 'register' ) } > Tao tai khoan </ button >
4458 </ div >
4559 { IS_OFFLINE && (
4660 < div className = "mb-3 text-xs text-[#B91C1C]" >
47- Đang chạy chế độ demo offline. Tài khoản được lưu cục bộ trên trình duyệt .
61+ Dang chay che do demo offline. Tai khoan duoc luu cuc bo tren trinh duyet .
4862 </ div >
4963 ) }
5064 < form onSubmit = { handleSubmit } className = "space-y-3" >
@@ -53,22 +67,26 @@ export default function Auth() {
5367 < input id = "email" className = "mt-1 w-full rounded-lg border border-[#E2D8C8] px-3 py-2 text-sm" value = { email } onChange = { ( e ) => setEmail ( e . target . value ) } />
5468 </ div >
5569 < div >
56- < label className = "text-xs text-[#5B5B57]" htmlFor = "password" > Mật khẩu </ label >
70+ < label className = "text-xs text-[#5B5B57]" htmlFor = "password" > Mat khau </ label >
5771 < input id = "password" type = "password" className = "mt-1 w-full rounded-lg border border-[#E2D8C8] px-3 py-2 text-sm" value = { password } onChange = { ( e ) => setPassword ( e . target . value ) } />
5872 </ div >
5973 { mode === 'register' && (
6074 < div >
61- < label className = "text-xs text-[#5B5B57]" htmlFor = "userType" > Loại tài khoản </ label >
75+ < label className = "text-xs text-[#5B5B57]" htmlFor = "userType" > Loai tai khoan </ label >
6276 < select id = "userType" className = "mt-1 w-full rounded-lg border border-[#E2D8C8] px-3 py-2 text-sm" value = { userType } onChange = { ( e ) => setUserType ( e . target . value ) } >
63- < option value = "high_school" > Học sinh</ option >
64- < option value = "university" > Sinh viên </ option >
65- < option value = "professional" > Người đi làm </ option >
77+ < option value = "high_school" > Hoc sinh</ option >
78+ < option value = "university" > Sinh vien </ option >
79+ < option value = "professional" > Nguoi di lam </ option >
6680 </ select >
67- < div className = "mt-2 text-[11px] text-[#5B5B57]" > Tài khoản admin là cố định .</ div >
81+ < div className = "mt-2 text-[11px] text-[#5B5B57]" > Tai khoan admin la co dinh .</ div >
6882 </ div >
6983 ) }
70- < button className = "w-full rounded-lg bg-[var(--c-primary)] py-2 text-white hover:opacity-90 transition" type = "submit" >
71- { mode === 'login' ? 'Đăng nhập' : 'Tạo tài khoản' }
84+ < button
85+ className = "w-full rounded-lg bg-[var(--c-primary)] py-2 text-white hover:opacity-90 transition disabled:cursor-not-allowed disabled:opacity-60"
86+ type = "submit"
87+ disabled = { submitting }
88+ >
89+ { mode === 'login' ? 'Dang nhap' : 'Tao tai khoan' }
7290 </ button >
7391 </ form >
7492 { error && < div className = "mt-3 text-xs text-[#D64545]" > { error } </ div > }
0 commit comments