feat: registration & login error handling

src/pages/Login/index.tsx

@@ -3,7 +3,7 @@
 import PageContainer from 'components/PageContainer'
 import { useAuth } from 'hooks/useAuth'
 import { useState } from 'react'
-import { Col, Row, Alert } from 'react-bootstrap'
+import { Alert, Col, Row } from 'react-bootstrap'
 import Button from 'react-bootstrap/Button'
 import Form from 'react-bootstrap/Form'
 import { Navigate, useSearchParams } from 'react-router-dom'
@@ -12,8 +12,9 @@
 
 const LoginForm: React.FC = () => {
   const { user } = useAuth()
+  const [error, setError] = useState('')
   const [searchParams] = useSearchParams()
   const [error, setError] = useState('')
   const [username, setUsername] = useState('demo')
   const [password, setPassword] = useState('123456')
   const [remember, setRemember] = useState(false)
@@ -60,6 +61,7 @@
         <h1>Login</h1>
       </div>
       <Col xs={12} md={8} lg={6} className='mx-auto mt-3'>
+        {error ? <Alert variant='danger'>{error}</Alert> : null}
         <Form onSubmit={handleSubmit} validated>
           <Form.Group as={Row} className='mb-3' controlId='formBasicEmail'>
             <Form.Label className='text-sm-end' column sm={2}>

src/pages/Register/index.tsx

@@ -1,5 +1,6 @@
 import './style.module.css'
 import { useRequest } from 'ahooks'
+import type { ErrorResponse } from 'client/error'
 import PageContainer from 'components/PageContainer'
 import type React from 'react'
 import { useState } from 'react'
@@ -107,16 +108,21 @@ const RegistrationForm = () => {
         navigate('/register/confirm')
       },
       onError: err => {
-        // TODO: if status is 409, tell user that email/username is already registered
-        // FIX: error.message does not work?
-        setError(err.message || 'Registration failed. Please try again.')
+        setError('Registration failed. Please try again.')
+        if ((err as ErrorResponse).status === 409) {
+          setError(
+            'This email or username is already registered. Please try again.'
+          )
+        } else if ((err as ErrorResponse).status === 400) {
+          setError('Invalid input. Please try again.')
+        }
       }
     }
   )
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    registerUser()
     e.preventDefault()
+    registerUser()
   }
 
   return (