feat: V2 with TypeScript

client/src/components/AuthModal.tsx

@@ -0,0 +1,92 @@
+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