[O] Optimize login and signup

frontend/src/index.sass

@@ -17,6 +17,9 @@ $shadow-width: 0 4px 0
 .c-green
   color: $c-green
 
+html
+  height: 100%
+
 body
   margin: 0
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
@@ -24,6 +27,10 @@ body
   -moz-osx-font-smoothing: grayscale
 
   color: $c-default-text
+  height: 100%
+
+#root
+  height: 100%
 
 code
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace
@@ -51,6 +58,36 @@ button.white
   border-width: 2px 2px 4px
   box-shadow: none
 
+input
+  border: solid $c-white-shadow
+  border-width: 2px 2px 4px
+  border-radius: $border-radius
+  padding: 10px 16px
+  width: 100%
+  transition: all 0.2s ease-in-out
+
+  &:focus
+    outline: none
+    border-color: $c-green
+
+label
+  display: block
+  font-size: 0.9em
+  font-weight: 600
+  margin-bottom: 0.5em
+
 h1
   font-size: 2em
   margin-bottom: 0.5em
+
+.v-layout
+  display: flex
+  flex-direction: column
+  justify-content: center
+
+  gap: 1em
+  width: 100%
+  height: 100%
+
+.page-pad
+  padding: 1em

frontend/src/logic/sdk.ts

@@ -9,8 +9,6 @@ export function signup(username: string, password: string)
     db.users = JSON.stringify({})
 
   const users = JSON.parse(db.users)
-  if (users[username])
-    throw new Error('User already exists')
 
   users[username] = password
   db.users = JSON.stringify(users)

frontend/src/pages/Login.tsx

@@ -20,34 +20,22 @@ export default function Login() {
         }
     }
 
-    return (
-        <div className='flex flex-col h-screen items-center p-5 gap-5 justify-evenly'>
-            <h1>Login</h1>
-            <form className='flex flex-col gap-5 w-screen p-5'>
-                <div className='flex flex-col justify-evenly'>
-                <label className="block text-gray-700 text-sm font-bold mb-2">
-                    Username
-                </label>
-                    <input className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline' type='text' placeholder='Username' value={username} onChange={(e) => setUsername(e.target.value)}></input>
-                </div>  
-                <div className='flex flex-col justify-evenly'>
-                    <label className="block text-gray-700 text-sm font-bold mb-2">
-                        Password
-                    </label>
-                    <input className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline' type='password' placeholder='Password' value={password} onChange={(e) => setPassword(e.target.value)}></input>
-                </div>
-                {/* error message */}
-                <div className='flex flex-col justify-evenly'>
-                    <label className="block text-red-600 text-sm font-bold mb-2">
-                        {err}
-                    </label>
-                </div>
-            </form>
-            <div className='flex flex-col w-screen p-5 gap-2'>
-                <button className='green' onClick={submitLogin}>Login</button>
-                <button className='white' onClick={() => navigate(-1)}>Back</button>
-            </div>
-        </div>
-    )
+    return <div className='v-layout page-pad'>
+        <h1>Login</h1>
 
-}
+        {err && <label className="text-red-600">{err}</label>}
+
+        <div>
+            <label>Username</label>
+            <input type='text' placeholder='Username' value={username} onChange={(e) => setUsername(e.target.value)}></input>
+        </div>
+        <div>
+            <label>Password</label>
+            <input type='password' placeholder='Password' value={password} onChange={(e) => setPassword(e.target.value)}></input>
+        </div>
+
+        <button className='green' onClick={submitLogin}>Login</button>
+        <button className='white' onClick={() => navigate(-1)}>Back</button>
+    </div>
+
+}

frontend/src/pages/Signup.tsx

@@ -31,40 +31,24 @@ export default function Signup() {
         }
     }
 
-    return (
-        <div className='flex flex-col h-screen items-center p-5 gap-5 justify-evenly'>
-            <h1>Login</h1>
-            <form className='flex flex-col gap-5 w-screen p-5'>
-                <div className='flex flex-col justify-evenly'>
-                <label className="block text-gray-700 text-sm font-bold mb-2">
-                    Username
-                </label>
-                    <input className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline' type='text' placeholder='Username' value={username} onChange={(e) => setUsername(e.target.value)}></input>
-                </div>  
-                <div className='flex flex-col justify-evenly'>
-                    <label className="block text-gray-700 text-sm font-bold mb-2">
-                        Password
-                    </label>
-                    <input className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline' type='password' placeholder='Password' value={password} onChange={(e) => setPassword(e.target.value)}></input>
-                </div>
-                <div className='flex flex-col justify-evenly'>
-                    <label className="block text-gray-700 text-sm font-bold mb-2">
-                        Confirm Password
-                    </label>
-                    <input className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline' type='password' placeholder='Confirm Password' value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)}></input>
-                </div>
-                {/* error message */}
-                <div className='flex flex-col justify-evenly'>
-                    <label className="block text-red-600 text-sm font-bold mb-2">
-                        {err}
-                    </label>
-                </div>
-            </form>
-            <div className='flex flex-col w-screen p-5 gap-2'>
-                <button className='green' onClick={submitSignup}>Signup</button>
-                <button className='white' onClick={() => navigate(-1)}>Back</button>
-            </div>
-        </div>
-    )
+    return <div className='v-layout page-pad'>
+        <h1>Login</h1>
+        {err && <label className="text-red-600">{err}</label>}
 
-}
+        <div>
+            <label>Username</label>
+            <input type='text' placeholder='Username' value={username} onChange={(e) => setUsername(e.target.value)}></input>
+        </div>
+        <div>
+            <label>Password</label>
+            <input type='password' placeholder='Password' value={password} onChange={(e) => setPassword(e.target.value)}></input>
+        </div>
+        <div>
+            <label>Confirm Password</label>
+            <input type='password' placeholder='Confirm Password' value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)}></input>
+        </div>
+
+        <button className='green mt-5' onClick={submitSignup}>Signup</button>
+        <button className='white' onClick={() => navigate(-1)}>Back</button>
+    </div>
+}