refactor: improve the auth component

client/components/auth/auth.module.css

@@ -5,17 +5,17 @@
 }
 
 .form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
+  display: grid;
+  place-items: center;
 }
 
 .formGroup {
-  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  place-items: center;
+  gap: 10px;
 }
 
-.formHeader {
+.formContentSpace {
   margin-bottom: 1rem;
 }

client/components/auth/index.tsx

@@ -1,5 +1,5 @@
 import { FormEvent, useState } from 'react'
-import { Button, Card, Input, Text } from '@geist-ui/core'
+import { Button, Input, Text, useToasts } from '@geist-ui/core'
 import styles from './auth.module.css'
 import { useRouter } from 'next/router'
 import Link from '../Link'
@@ -9,15 +9,11 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
 
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
-    const [error, setError] = useState('');
+    const { setToast } = useToasts();
 
     const signingIn = page === 'signin'
 
-    const NO_EMPTY_SPACE_REGEX = /^\S*$/;
-
     const handleJson = (json: any) => {
-        if (json.error) return setError(json.error.message)
-
         localStorage.setItem('drift-token', json.token)
         localStorage.setItem('drift-userid', json.userId)
         router.push('/')
@@ -27,12 +23,6 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
     const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault()
 
-        if (!username.match(NO_EMPTY_SPACE_REGEX))
-            return setError("Username can't be empty")
-
-        if (!password.match(NO_EMPTY_SPACE_REGEX))
-            return setError("Password can't be empty")
-
         const reqOpts = {
             method: 'POST',
             headers: {
@@ -50,58 +40,51 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
 
             handleJson(json)
         } catch (err: any) {
-            setError(err.message || "Something went wrong")
+            setToast({ text: "Something went wrong", type: 'error' })
         }
     }
 
     return (
         <div className={styles.container}>
             <div className={styles.form}>
-                <div className={styles.formHeader}>
+                <div className={styles.formContentSpace}>
                     <h1>{signingIn ? 'Sign In' : 'Sign Up'}</h1>
                 </div>
                 <form onSubmit={handleSubmit}>
-                    <Card>
-                        <div className={styles.formGroup}>
-                            <Input
-                                htmlType="text"
-                                id="username"
-                                value={username}
-                                onChange={(event) => setUsername(event.target.value)}
-                                placeholder="Username"
-                                required
-                                label='Username'
-                            />
-                        </div>
-                        <div className={styles.formGroup}>
-                            <Input
-                                htmlType='password'
-                                id="password"
-                                value={password}
-                                onChange={(event) => setPassword(event.target.value)}
-                                placeholder="Password"
-                                required
-                                label='Password'
-                            />
-                        </div>
-                        <div style={{ display: 'flex', justifyContent: 'center' }}>
-                            <Button type="success" ghost htmlType="submit">{signingIn ? 'Sign In' : 'Sign Up'}</Button>
-                        </div>
-                        <div className={styles.formGroup}>
-                            {signingIn ? (
-                                <Text>
-                                    Don&apos;t have an account?{" "}
-                                    <Link color href="/signup">Sign up</Link>
-                                </Text>
-                            ) : (
-                                <Text>
-                                    Already have an account?{" "}
-                                    <Link color href="/signin">Sign in</Link>
-                                </Text>
-                            )}
-                        </div>
-                        {error && <Text type='error'>{error}</Text>}
-                    </Card>
+                    <div className={styles.formGroup}>
+                        <Input
+                            htmlType="text"
+                            id="username"
+                            value={username}
+                            onChange={(event) => setUsername(event.target.value)}
+                            placeholder="Username"
+                            required
+                            scale={4 / 3}
+                        />
+                        <Input
+                            htmlType='password'
+                            id="password"
+                            value={password}
+                            onChange={(event) => setPassword(event.target.value)}
+                            placeholder="Password"
+                            required
+                            scale={4 / 3}
+                        />
+                        <Button type="success" htmlType="submit">{signingIn ? 'Sign In' : 'Sign Up'}</Button>
+                    </div>
+                    <div className={styles.formContentSpace}>
+                        {signingIn ? (
+                            <Text>
+                                Don&apos;t have an account?{" "}
+                                <Link color href="/signup">Sign up</Link>
+                            </Text>
+                        ) : (
+                            <Text>
+                                Already have an account?{" "}
+                                <Link color href="/signin">Sign in</Link>
+                            </Text>
+                        )}
+                    </div>
                 </form>
             </div>
         </div >