From 7a7d3b627b9266647e450c807abc273de4221021 Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Fri, 26 Jul 2024 15:20:26 +0300
Subject: [PATCH] onboarding page cleanup

---
 ui/src/app/onboarding/page.tsx | 88 +++++++++++++++++++---------------
 1 file changed, 50 insertions(+), 38 deletions(-)

diff --git a/ui/src/app/onboarding/page.tsx b/ui/src/app/onboarding/page.tsx
index 1f4e287..522726d 100644
--- a/ui/src/app/onboarding/page.tsx
+++ b/ui/src/app/onboarding/page.tsx
@@ -3,7 +3,7 @@
 import { useState, ChangeEvent } from "react"
 import { postFirstUser } from "../queries"
 import { useMutation } from "react-query"
-import { useRouter } from "next/router"
+import { useRouter } from "next/navigation"
 
 
 export default function Onboarding() {
@@ -26,43 +26,55 @@ export default function Onboarding() {
     const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
     const handlePassword2Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword2(event.target.value) }
     return (
-        <div className="p-panel" >
-            <div className="p-panel__header">
-                <h4 className="p-panel__title">Welcome to GoCert</h4>
-                <p>Please create an admin user to get started</p>
-            </div>
-            <div className="p-panel__content">
-                <form className={"p-form-validation " + (!passwordsMatch ? "is-error" : "")}>
-                    <div className="p-form__group row">
-                        <label className="p-form__label">User Name</label>
-                        <input type="text" id="InputUsername" name="InputUsername" onChange={handleUsernameChange} />
-                        <label className="p-form__label">Password</label>
-                        <input className="p-form-validation__input" type="password" id="password1" name="password" placeholder="******" autoComplete="current-password" required={true} onChange={handlePassword1Change} />
-                        <p className="p-form-help-text">
-                            Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol.
-                        </p>
-                        <label htmlFor="p-form__label">Password Again</label>
-                        <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
-                        {!passwordsMatch && <p className="p-form-validation__message">Passwords do not match</p>}
-                        {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 style={{
+            display: "flex",
+            alignContent: "center",
+            justifyContent: "center",
+            flexWrap: "wrap",
+            height: "100vh",
+        }}>
+            <div className="p-panel" style={{
+                width: "45rem",
+                minWidth: "min-content",
+                minHeight: "min-content",
+            }}>
+                <div className="p-panel__header">
+                    <h1 className="p-panel__title">Welcome to GoCert</h1>
+                </div>
+                <div className="p-panel__content">
+                    <h5>Please create an admin user to get started</h5>
+                    <form className={"p-form-validation " + (!passwordsMatch ? "is-error" : "")}>
+                        <div className="p-form__group row">
+                            <label className="p-form__label">User Name</label>
+                            <input type="text" id="InputUsername" name="InputUsername" onChange={handleUsernameChange} />
+                            <label className="p-form__label">Password</label>
+                            <input className="p-form-validation__input" type="password" id="password1" name="password" placeholder="******" autoComplete="current-password" required={true} onChange={handlePassword1Change} />
+                            <p className="p-form-help-text">
+                                Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol.
+                            </p>
+                            <label htmlFor="p-form__label">Password Again</label>
+                            <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
+                            {!passwordsMatch && <p className="p-form-validation__message">Passwords do not match</p>}
+                            {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>
-                            </div>
-                        }
-                        {!passwordsMatch ? (
-                            <>
-                                <button type="submit" name="submit" disabled={true}>Submit</button>
-                            </>
-                        ) : (
-                            <button type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ username: username, password: password1 }) }}>Submit</button>
-                        )
-                        }
-                    </div>
-                </form>
-            </div>
-        </div >
+                            }
+                            {!passwordsMatch ? (
+                                <>
+                                    <button type="submit" name="submit" disabled={true}>Submit</button>
+                                </>
+                            ) : (
+                                <button type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ username: username, password: password1 }) }}>Submit</button>
+                            )
+                            }
+                        </div>
+                    </form>
+                </div>
+            </div >
+        </div>
     )
 }
\ No newline at end of file