chore: better login page (#51)

canonical · Aug 5, 2024 · 1c4afd7 · 1c4afd7
1 parent f77697b
commit 1c4afd7
Showing 1 changed file with 45 additions and 33 deletions.
diff --git a/ui/src/app/login/page.tsx b/ui/src/app/login/page.tsx
@@ -7,6 +7,7 @@ import { useCookies } from "react-cookie"
 import { useRouter } from "next/navigation"
 import { useAuth } from "../auth/authContext"
 import { statusResponse } from "../types"
+import { Logo } from "../nav"
 
 
 export default function LoginPage() {
@@ -40,41 +41,52 @@ export default function LoginPage() {
     const handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => { setUsername(event.target.value) }
     const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => { setPassword(event.target.value) }
     return (
-        <div style={{
-            display: "flex",
-            alignContent: "center",
-            justifyContent: "center",
-            flexWrap: "wrap",
-            height: "100vh",
-        }}>
-            <div className="p-panel" style={{
-                width: "25rem",
-                minWidth: "min-content",
-                minHeight: "min-content",
-            }}>
-                <div className="p-panel__header is-sticky">
-                    <h4 className="p-panel__title">Login</h4>
+        <>
+            <div style={{ backgroundColor: "#262626", height: "6.5vh" }}>
+                <div style={{ marginLeft: "30px" }}>
+                    <Logo />
                 </div>
-                <div className="p-panel__content">
-                    <div className="u-fixed-width">
-                        <form>
-                            <label htmlFor="InputUsername">Username</label>
-                            <input type="text" id="InputUsername" name="InputUsername" onChange={handleUsernameChange} />
-                            <label htmlFor="InputPassword">Password</label>
-                            <input type="password" id="InputPassword" name="InputPassword" placeholder="******" autoComplete="current-password" onChange={handlePasswordChange} />
-                            {errorText &&
-                                <div className="p-notification--negative">
-                                    <div className="p-notification__content">
-                                        <h5 className="p-notification__title">Error</h5>
-                                        <p className="p-notification__message">{errorText.split("error: ")}</p>
-                                    </div>
-                                </div>
-                            }
-                            <button type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ username: username, password: password }) }}>Submit</button>
-                        </form>
+            </div>
+            <div style={{
+                display: "flex",
+                alignContent: "center",
+                justifyContent: "center",
+                flexWrap: "wrap",
+                height: "93.5vh",
+            }}>
+                <div className="p-panel" style={{
+                    width: "35rem",
+                    minWidth: "min-content",
+                    minHeight: "min-content",
+                }}>
+                    <div className="p-panel__content">
+                        <div className="u-fixed-width">
+                            <form className="p-form">
+                                <fieldset>
+                                    <h2 className="p-panel__title">Login</h2>
+                                    <label htmlFor="InputUsername">Username</label>
+                                    <input type="text" id="InputUsername" name="InputUsername" onChange={handleUsernameChange} />
+                                    <label htmlFor="InputPassword">Password</label>
+                                    <input type="password" id="InputPassword" name="InputPassword" placeholder="******" autoComplete="current-password" onChange={handlePasswordChange} />
+                                    {errorText &&
+                                        <div className="p-notification--negative">
+                                            <div className="p-notification__content">
+                                                <h5 className="p-notification__title">Error</h5>
+                                                <p className="p-notification__message">{errorText.split("error: ")}</p>
+                                            </div>
+                                        </div>
+                                    }
+                                    {password.length != 0 && username.length != 0 ? (
+                                        <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ username: username, password: password }) }}>Log In</button>
+                                    ) : (
+                                        <button disabled={true} className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ username: username, password: password }) }}>Log In</button>
+                                    )}
+                                </fieldset>
+                            </form>
+                        </div>
                     </div>
-                </div>
+                </div >
             </div >
-        </div >
+        </>
     )
 }