93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
import React, { type ChangeEventHandler, Fragment, useState } from 'react'
|
|
import { useModalStore } from '../store/useModalStore'
|
|
import { useAuth } from '../contexts/AuthContext'
|
|
import { Dialog, DialogTitle, TextField, Button, CircularProgress } from '@mui/material'
|
|
import { type FormData } from '../@types'
|
|
|
|
interface Props {}
|
|
|
|
const AuthModal: React.FC<Props> = () => {
|
|
const { login, register } = useAuth()
|
|
const { currentModal, setCurrentModal } = useModalStore()
|
|
|
|
const isRegisterMode = currentModal === 'REGISTER'
|
|
const isOpen = ['AUTH', 'LOGIN', 'REGISTER'].includes(currentModal)
|
|
const onClose = () => setCurrentModal('')
|
|
|
|
const [formData, setFormData] = useState<FormData>({ username: '', password: '' })
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
|
|
const { name, value } = e.target
|
|
setFormData((prev) => ({ ...prev, [name]: value }))
|
|
}
|
|
|
|
const clickSubmit = async () => {
|
|
setLoading(true)
|
|
setError('')
|
|
|
|
try {
|
|
isRegisterMode ? await register(formData) : await login(formData)
|
|
onClose()
|
|
} catch (error: any) {
|
|
setError(typeof error === 'string' ? error : JSON.stringify(error))
|
|
}
|
|
|
|
setLoading(false)
|
|
}
|
|
|
|
const isSubmitButtonDisabled = !formData['username'] || !formData['password']
|
|
|
|
return (
|
|
<Dialog open={isOpen} onClose={onClose}>
|
|
{isRegisterMode ? <DialogTitle>Create a new account</DialogTitle> : <DialogTitle>Login to your account</DialogTitle>}
|
|
|
|
<TextField
|
|
label='Username'
|
|
name='username'
|
|
type='text'
|
|
value={formData['username']}
|
|
onChange={handleChange}
|
|
variant='filled'
|
|
sx={{ mx: 2, my: 0.5 }}
|
|
required
|
|
/>
|
|
<TextField
|
|
label='Password'
|
|
name='password'
|
|
type='password'
|
|
value={formData['password']}
|
|
onChange={handleChange}
|
|
variant='filled'
|
|
sx={{ mx: 2, my: 0.5 }}
|
|
required
|
|
/>
|
|
|
|
{error && <span className='error'>{error}</span>}
|
|
|
|
{loading ? (
|
|
<center>
|
|
<CircularProgress color='inherit' />
|
|
</center>
|
|
) : isRegisterMode ? (
|
|
<Fragment>
|
|
<Button onClick={clickSubmit} disabled={isSubmitButtonDisabled}>
|
|
Register
|
|
</Button>
|
|
<Button onClick={() => setCurrentModal('LOGIN')}>I already have an account</Button>
|
|
</Fragment>
|
|
) : (
|
|
<Fragment>
|
|
<Button onClick={clickSubmit} disabled={isSubmitButtonDisabled}>
|
|
Login
|
|
</Button>
|
|
<Button onClick={() => setCurrentModal('REGISTER')}>I don't have an account</Button>
|
|
</Fragment>
|
|
)}
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
export default AuthModal
|