1- 'use client'
2- import loginFunc from '@/database/login' ;
3- import signUpFunc from '@/database/signUp' ;
4- import {
5- Flex ,
6- Text ,
7- Input ,
8- Button
9- } from '@chakra-ui/react'
10- import { AuthResponse , AuthTokenResponsePassword } from '@supabase/supabase-js' ;
11- import { useSearchParams } from 'next/navigation' ;
12- import { useState } from 'react' ;
13- import { toast } from 'react-toastify' ;
1+ "use client" ;
2+ import loginFunc from "@/database/login" ;
3+ import signUpFunc from "@/database/signUp" ;
4+ import { Flex , Text , Input , Button } from "@chakra-ui/react" ;
5+ import { AuthResponse , AuthTokenResponsePassword } from "@supabase/supabase-js" ;
6+ import { useSearchParams } from "next/navigation" ;
7+ import { useState } from "react" ;
8+ import { toast } from "react-toastify" ;
149
1510function SignUpPage ( ) {
16-
17- const [ email , setEmail ] = useState < string > ( "" )
18- const [ password , setPassword ] = useState < string > ( "" )
19- const [ username , setUsername ] = useState < string > ( "" )
20- const [ loading , setLoading ] = useState ( false )
21- const [ isLogin , setIsLogin ] = useState ( false )
22- const id = useSearchParams ( ) . get ( 'id' )
11+ const [ email , setEmail ] = useState < string > ( "" ) ;
12+ const [ password , setPassword ] = useState < string > ( "" ) ;
13+ const [ username , setUsername ] = useState < string > ( "" ) ;
14+ const [ loading , setLoading ] = useState ( false ) ;
15+ const [ isLogin , setIsLogin ] = useState ( false ) ;
16+ const id = useSearchParams ( ) . get ( "id" ) ;
2317
2418 return (
25- < Flex position = { 'relative' } top = { 0 } left = { 0 } width = { '100%' } maxW = { '100%' } background = { 'background' } height = { [ 'calc(100vh - 3.875rem - 8.2rem - 3.2rem)' , 'calc(100vh - 6.25rem)' ] } flexDir = { 'column' } overflowY = { 'auto' } pb = { 2 } >
26-
27- < Flex w = { '100%' } height = { '100%' } flexDir = { 'column' } >
28- < Text color = { 'primaryText' } fontWeight = { '500' } fontSize = { "1.2rem" } >
19+ < Flex
20+ position = { "relative" }
21+ top = { 0 }
22+ left = { 0 }
23+ width = { "100%" }
24+ maxW = { "100%" }
25+ background = { "background" }
26+ height = { [
27+ "calc(100vh - 3.875rem - 8.2rem - 3.2rem)" ,
28+ "calc(100vh - 6.25rem)" ,
29+ ] }
30+ flexDir = { "column" }
31+ overflowY = { "auto" }
32+ pb = { 2 } >
33+ < Flex w = { "100%" } height = { "100%" } flexDir = { "column" } >
34+ < Text
35+ color = { "primaryText" }
36+ fontWeight = { "500" }
37+ fontSize = { "1.2rem" } >
2938 Sign Up / Log in
3039 </ Text >
31- < Flex flex = { 1 } justifyContent = { 'center' } alignItems = { 'center' } flexDir = { 'column' } >
32- < form style = { { display : 'flex' , flexDirection : 'column' , gap : '1rem' , maxWidth : '25rem' , width : '100%' } } >
33- {
34- isLogin ? "" :
35- < Input placeholder = 'Enter username' onChange = { ( e ) => setUsername ( e . currentTarget . value ) } />
36- }
37- < Input placeholder = 'Enter Email' onChange = { ( e ) => setEmail ( e . currentTarget . value ) } type = 'email' />
38- < Input placeholder = 'Enter Password' type = 'password' onChange = { ( e ) => setPassword ( e . currentTarget . value ) } />
39- < Button variant = { 'sidebar' } type = 'submit' className = { 'sidebar-active-tab' } justifyContent = { 'center' } isLoading = { loading } w = { '100%' }
40- onSubmit = { ( ) => { return false } }
40+ < Flex
41+ flex = { 1 }
42+ justifyContent = { "center" }
43+ alignItems = { "center" }
44+ flexDir = { "column" } >
45+ < form
46+ style = { {
47+ display : "flex" ,
48+ flexDirection : "column" ,
49+ gap : "1rem" ,
50+ maxWidth : "25rem" ,
51+ width : "100%" ,
52+ } } >
53+ { isLogin ? (
54+ ""
55+ ) : (
56+ < Input
57+ placeholder = "Enter username"
58+ onChange = { ( e ) =>
59+ setUsername ( e . currentTarget . value )
60+ }
61+ />
62+ ) }
63+ < Input
64+ placeholder = "Enter Email"
65+ onChange = { ( e ) => setEmail ( e . currentTarget . value ) }
66+ type = "email"
67+ />
68+ < Input
69+ placeholder = "Enter Password"
70+ type = "password"
71+ onChange = { ( e ) => setPassword ( e . currentTarget . value ) }
72+ />
73+ < Button
74+ variant = { "sidebar" }
75+ type = "submit"
76+ className = { "sidebar-active-tab" }
77+ justifyContent = { "center" }
78+ isLoading = { loading }
79+ w = { "100%" }
80+ onSubmit = { ( ) => {
81+ return false ;
82+ } }
4183 onClick = { async ( ) => {
42- setLoading ( true )
84+ setLoading ( true ) ;
4385 if ( isLogin === false ) {
44- toast . info ( 'Creating account...' )
45- signUpFunc ( email , password , username , id || '' )
46- . then ( ( AUTH : string ) => {
47- const data : AuthResponse = JSON . parse ( AUTH || '{}' )
48- if ( data . error != null ) {
49- toast . error ( data . error . code )
50- }
51- else {
52- toast . success ( "Account created successfully." )
53- }
54- setLoading ( false )
55- } )
56- }
57-
58- else {
59- toast . info ( "Logging in..." )
60- const loginStat = await loginFunc ( email , password , username , id || '' )
61- const loginStatJSON = JSON . parse ( loginStat ) as AuthTokenResponsePassword ;
86+ toast . info ( "Creating account..." ) ;
87+ signUpFunc (
88+ email ,
89+ password ,
90+ username ,
91+ id || ""
92+ ) . then ( ( AUTH : string ) => {
93+ const data : AuthResponse = JSON . parse (
94+ AUTH || "{}"
95+ ) ;
96+ if ( data . error != null ) {
97+ toast . error ( data . error . code ) ;
98+ } else {
99+ toast . success (
100+ "Account created successfully."
101+ ) ;
102+ }
103+ setLoading ( false ) ;
104+ } ) ;
105+ } else {
106+ toast . info ( "Logging in..." ) ;
107+ const loginStat = await loginFunc (
108+ email ,
109+ password ,
110+ username ,
111+ id || ""
112+ ) ;
113+ const loginStatJSON = JSON . parse (
114+ loginStat
115+ ) as AuthTokenResponsePassword ;
62116 if ( loginStatJSON . error ) {
63- toast . error ( "Either the password or email is incorrect." )
64- }
65- else if ( loginStatJSON . data . user )
66- toast . success ( "Logged in successfully" )
67- setLoading ( false )
117+ toast . error (
118+ "Either the password or email is incorrect."
119+ ) ;
120+ } else if ( loginStatJSON . data . user )
121+ toast . success ( "Logged in successfully" ) ;
122+ setLoading ( false ) ;
68123 }
69124 } } >
70125 Submit
71126 </ Button >
72127 </ form >
73- < Button onClick = { ( ) => { setIsLogin ( ! isLogin ) } } variant = { 'unstyled' } fontSize = { '0.8rem' } fontWeight = { "400" } className = 'gradient-text' textAlign = { 'end' } w = { '100%' } maxW = { '25rem' } >
74- { isLogin ? 'Sign Up' : 'Login' }
128+ < Button
129+ onClick = { ( ) => {
130+ setIsLogin ( ! isLogin ) ;
131+ } }
132+ variant = { "unstyled" }
133+ fontSize = { "0.8rem" }
134+ fontWeight = { "400" }
135+ className = "gradient-text"
136+ textAlign = { "end" }
137+ w = { "100%" }
138+ maxW = { "25rem" } >
139+ { isLogin ? "Sign Up" : "Login" }
75140 </ Button >
76141 </ Flex >
77142 </ Flex >
78143 </ Flex >
79- )
144+ ) ;
80145}
81146
82- export default SignUpPage ;
147+ export default SignUpPage ;
0 commit comments