From 7a490305c3191c23687be6eb0aa0fb2cd2bd17c9 Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Fri, 26 Jul 2024 15:06:07 +0300
Subject: [PATCH 01/11] onboarding flow first pass

---
 ui/src/app/login/page.tsx      | 14 ++++++-
 ui/src/app/nav.tsx             |  2 +-
 ui/src/app/onboarding/page.tsx | 68 ++++++++++++++++++++++++++++++++++
 ui/src/app/queries.ts          | 27 +++++++++++++-
 4 files changed, 107 insertions(+), 4 deletions(-)
 create mode 100644 ui/src/app/onboarding/page.tsx

diff --git a/ui/src/app/login/page.tsx b/ui/src/app/login/page.tsx
index f0de8e1..dd2d67d 100644
--- a/ui/src/app/login/page.tsx
+++ b/ui/src/app/login/page.tsx
@@ -1,14 +1,24 @@
 "use client"
 
-import { login } from "../queries"
-import { useMutation } from "react-query"
+import { getStatus, login } from "../queries"
+import { useMutation, useQuery } from "react-query"
 import { useState, ChangeEvent } from "react"
 import { useCookies } from "react-cookie"
 import { useRouter } from "next/navigation"
 
+type statusResponse = {
+    initialized: boolean
+}
+
 export default function LoginPage() {
     const router = useRouter()
     const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
+    const statusQuery = useQuery<statusResponse, Error>({
+        queryFn: () => getStatus()
+    })
+    if (statusQuery.data && !statusQuery.data.initialized) {
+        router.push("/onboarding")
+    }
     const mutation = useMutation(login, {
         onSuccess: (e) => {
             setErrorText("")
diff --git a/ui/src/app/nav.tsx b/ui/src/app/nav.tsx
index dccc630..9dafc26 100644
--- a/ui/src/app/nav.tsx
+++ b/ui/src/app/nav.tsx
@@ -100,7 +100,7 @@ export default function Navigation({
     children: React.ReactNode;
 }>) {
     const activePath = usePathname()
-    const noNavRoutes = ['/login'];
+    const noNavRoutes = ['/login', '/onboarding'];
 
     const shouldRenderNavigation = !noNavRoutes.includes(activePath);
     const [sidebarVisible, setSidebarVisible] = useState<boolean>(true)
diff --git a/ui/src/app/onboarding/page.tsx b/ui/src/app/onboarding/page.tsx
new file mode 100644
index 0000000..1f4e287
--- /dev/null
+++ b/ui/src/app/onboarding/page.tsx
@@ -0,0 +1,68 @@
+"use client"
+
+import { useState, ChangeEvent } from "react"
+import { postFirstUser } from "../queries"
+import { useMutation } from "react-query"
+import { useRouter } from "next/router"
+
+
+export default function Onboarding() {
+    const router = useRouter()
+    const mutation = useMutation(postFirstUser, {
+        onSuccess: () => {
+            setErrorText("")
+            router.push("/login")
+        },
+        onError: (e: Error) => {
+            setErrorText(e.message)
+        }
+    })
+    const [username, setUsername] = useState<string>("")
+    const [password1, setPassword1] = useState<string>("")
+    const [password2, setPassword2] = useState<string>("")
+    const passwordsMatch = password1 === password2
+    const [errorText, setErrorText] = useState<string>("")
+    const handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => { setUsername(event.target.value) }
+    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>
+                            </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 >
+    )
+}
\ No newline at end of file
diff --git a/ui/src/app/queries.ts b/ui/src/app/queries.ts
index a78c110..7c6ee6e 100644
--- a/ui/src/app/queries.ts
+++ b/ui/src/app/queries.ts
@@ -8,6 +8,14 @@ export type RequiredCSRParams = {
     cert?: string
 }
 
+export async function getStatus() {
+    const response = await fetch("/status")
+    if (!response.ok) {
+        throw new Error(`${response.status}: ${HTTPStatus(response.status)}`)
+    }
+    return response.json()
+}
+
 export async function getCertificateRequests(params: { authToken: string }): Promise<CSREntry[]> {
     const response = await fetch("/api/v1/certificate_requests", {
         headers: { "Authorization": "Bearer " + params.authToken }
@@ -159,7 +167,7 @@ export async function deleteUser(params: { authToken: string, id: string }) {
     return response.json()
 }
 
-export async function postUser(userForm: { authToken: string, username: string, password: string }) {
+export async function postFirstUser(userForm: { username: string, password: string }) {
     const response = await fetch("/api/v1/accounts", {
         method: "POST",
         headers: {
@@ -172,4 +180,21 @@ export async function postUser(userForm: { authToken: string, username: string,
         throw new Error(`${response.status}: ${HTTPStatus(response.status)}. ${responseText}`)
     }
     return responseText
+}
+
+export async function postUser(userForm: { authToken: string, username: string, password: string }) {
+    const response = await fetch("/api/v1/accounts", {
+        method: "POST",
+        body: JSON.stringify({
+            "username": userForm.username, "password": userForm.password
+        }),
+        headers: {
+            'Authorization': "Bearer " + userForm.authToken
+        }
+    })
+    const responseText = await response.text()
+    if (!response.ok) {
+        throw new Error(`${response.status}: ${HTTPStatus(response.status)}. ${responseText}`)
+    }
+    return responseText
 }
\ No newline at end of file

From 9083fe29222e335dbf3167222774f883acaa1a63 Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Fri, 26 Jul 2024 15:20:26 +0300
Subject: [PATCH 02/11] 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

From 8ab2e158961adeafa84aee1337caff0559ca754f Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Thu, 1 Aug 2024 21:10:31 +0300
Subject: [PATCH 03/11] rebase cleanup

---
 ui/src/app/queries.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/ui/src/app/queries.ts b/ui/src/app/queries.ts
index 7c6ee6e..7940ae1 100644
--- a/ui/src/app/queries.ts
+++ b/ui/src/app/queries.ts
@@ -170,9 +170,6 @@ export async function deleteUser(params: { authToken: string, id: string }) {
 export async function postFirstUser(userForm: { username: string, password: string }) {
     const response = await fetch("/api/v1/accounts", {
         method: "POST",
-        headers: {
-            'Authorization': "Bearer " + userForm.authToken
-        },
         body: JSON.stringify({ "username": userForm.username, "password": userForm.password })
     })
     const responseText = await response.text()

From bc93b9b65a5ec59306062dbdfd7fc6f1f68dcddc Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Thu, 1 Aug 2024 21:36:57 +0300
Subject: [PATCH 04/11] add stylings from other form components

---
 ui/src/app/onboarding/page.tsx | 79 ++++++++++++++++++++++------------
 ui/src/app/users/asideForm.tsx |  3 +-
 2 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/ui/src/app/onboarding/page.tsx b/ui/src/app/onboarding/page.tsx
index 522726d..74bcc49 100644
--- a/ui/src/app/onboarding/page.tsx
+++ b/ui/src/app/onboarding/page.tsx
@@ -4,6 +4,7 @@ import { useState, ChangeEvent } from "react"
 import { postFirstUser } from "../queries"
 import { useMutation } from "react-query"
 import { useRouter } from "next/navigation"
+import { passwordIsValid } from "../utils"
 
 
 export default function Onboarding() {
@@ -22,6 +23,7 @@ export default function Onboarding() {
     const [password2, setPassword2] = useState<string>("")
     const passwordsMatch = password1 === password2
     const [errorText, setErrorText] = useState<string>("")
+    const [showPassword1, setShowPassword1] = useState<boolean>(false)
     const handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => { setUsername(event.target.value) }
     const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
     const handlePassword2Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword2(event.target.value) }
@@ -43,35 +45,56 @@ export default function Onboarding() {
                 </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>
+                    <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
+                        <fieldset>
+                            <div className="p-form__group row">
+                                <label className="p-form__label">Username</label>
+                                <input type="text" id="InputUsername" name="InputUsername" onChange={handleUsernameChange} />
+                                <div>
+                                    <label className="p-form__label">Password</label>
+                                    <button className="p-button--base u-no-margin--bottom has-icon" style={{ float: "right" }} aria-live="polite" aria-controls="password" onClick={(e) => { e.preventDefault(); setShowPassword1(!showPassword1) }}>
+                                        {showPassword1 ? (
+                                            <>
+                                                <span className="p-form-password-toggle__label">
+                                                    Hide
+                                                </span>
+                                                <i className="p-icon--hide"></i>
+                                            </>
+                                        ) : (
+                                            <>
+                                                <span className="p-form-password-toggle__label">
+                                                    Show
+                                                </span>
+                                                <i className="p-icon--show"></i>
+                                            </>
+                                        )}
+                                    </button>
                                 </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>
+                                <input className="p-form-validation__input" type={showPassword1 ? "text" : "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">Confirm Password</label>
+                                <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
+                                {!passwordIsValid(password1) && password1 != "" && <p className="p-form-validation__message">Password is not valid</p>}
+                                {passwordIsValid(password1) && !passwordsMatch && password2 != "" && <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>
+                                }
+                                {!passwordsMatch || !passwordIsValid(password1) ? (
+                                    <>
+                                        <button className="p-button--positive" type="submit" name="submit" disabled={true}>Submit</button>
+                                    </>
+                                ) : (
+                                    <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ username: username, password: password1 }) }}>Submit</button>
+                                )}
+                            </div>
+                        </fieldset>
                     </form>
                 </div>
             </div >
diff --git a/ui/src/app/users/asideForm.tsx b/ui/src/app/users/asideForm.tsx
index 1ba11f2..c3cd905 100644
--- a/ui/src/app/users/asideForm.tsx
+++ b/ui/src/app/users/asideForm.tsx
@@ -101,8 +101,7 @@ function AddNewUserForm() {
                     </>
                 ) : (
                     <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ authToken: (auth.user ? auth.user.authToken : ""), username: username, password: password1 }) }}>Submit</button>
-                )
-                }
+                )}
             </div>
         </form>
     )

From 9cb52718a520b0cfc56e4141b495c89adb8b9a7f Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Thu, 1 Aug 2024 21:49:01 +0300
Subject: [PATCH 05/11] fix dependency bug

---
 ui/src/app/auth/authContext.tsx | 10 +++++++---
 ui/src/app/login/page.tsx       |  4 +++-
 ui/src/app/onboarding/page.tsx  |  3 +++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/auth/authContext.tsx b/ui/src/app/auth/authContext.tsx
index 82d4e80..c986565 100644
--- a/ui/src/app/auth/authContext.tsx
+++ b/ui/src/app/auth/authContext.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { createContext, useContext, useState, useEffect } from 'react';
+import { createContext, useContext, useState, useEffect, Dispatch, SetStateAction } from 'react';
 import { User } from '../types';
 import { useCookies } from 'react-cookie';
 import { jwtDecode } from 'jwt-decode';
@@ -8,13 +8,16 @@ import { useRouter } from 'next/navigation';
 
 type AuthContextType = {
     user: User | null
+    firstUserCreated: boolean
+    setFirstUserCreated: Dispatch<SetStateAction<boolean>>
 }
 
-const AuthContext = createContext<AuthContextType>({ user: null });
+const AuthContext = createContext<AuthContextType>({ user: null, firstUserCreated: false, setFirstUserCreated: () => { } });
 
 export const AuthProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
     const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
     const [user, setUser] = useState<User | null>(null);
+    const [firstUserCreated, setFirstUserCreated] = useState<boolean>(false)
     const router = useRouter();
 
     useEffect(() => {
@@ -23,6 +26,7 @@ export const AuthProvider = ({ children }: Readonly<{ children: React.ReactNode
             let userObject = jwtDecode(cookies.user_token) as User
             userObject.authToken = cookies.user_token
             setUser(userObject);
+            setFirstUserCreated(true)
         } else {
             setUser(null)
             router.push('/login');
@@ -30,7 +34,7 @@ export const AuthProvider = ({ children }: Readonly<{ children: React.ReactNode
     }, [cookies.user_token, router]);
 
     return (
-        <AuthContext.Provider value={{ user }}>
+        <AuthContext.Provider value={{ user, firstUserCreated, setFirstUserCreated }}>
             {children}
         </AuthContext.Provider>
     );
diff --git a/ui/src/app/login/page.tsx b/ui/src/app/login/page.tsx
index dd2d67d..76932fa 100644
--- a/ui/src/app/login/page.tsx
+++ b/ui/src/app/login/page.tsx
@@ -5,6 +5,7 @@ import { useMutation, useQuery } from "react-query"
 import { useState, ChangeEvent } from "react"
 import { useCookies } from "react-cookie"
 import { useRouter } from "next/navigation"
+import { useAuth } from "../auth/authContext"
 
 type statusResponse = {
     initialized: boolean
@@ -12,11 +13,12 @@ type statusResponse = {
 
 export default function LoginPage() {
     const router = useRouter()
+    const auth = useAuth()
     const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
     const statusQuery = useQuery<statusResponse, Error>({
         queryFn: () => getStatus()
     })
-    if (statusQuery.data && !statusQuery.data.initialized) {
+    if (!auth.firstUserCreated && (statusQuery.data && !statusQuery.data.initialized)) {
         router.push("/onboarding")
     }
     const mutation = useMutation(login, {
diff --git a/ui/src/app/onboarding/page.tsx b/ui/src/app/onboarding/page.tsx
index 74bcc49..cce1f97 100644
--- a/ui/src/app/onboarding/page.tsx
+++ b/ui/src/app/onboarding/page.tsx
@@ -5,13 +5,16 @@ import { postFirstUser } from "../queries"
 import { useMutation } from "react-query"
 import { useRouter } from "next/navigation"
 import { passwordIsValid } from "../utils"
+import { useAuth } from "../auth/authContext"
 
 
 export default function Onboarding() {
     const router = useRouter()
+    const auth = useAuth()
     const mutation = useMutation(postFirstUser, {
         onSuccess: () => {
             setErrorText("")
+            auth.setFirstUserCreated(true)
             router.push("/login")
         },
         onError: (e: Error) => {

From b027abdb9f9c36c5a90e706d3a8b40fbf0b35829 Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Fri, 2 Aug 2024 11:04:54 +0300
Subject: [PATCH 06/11] rename endpoint

---
 ui/src/app/{onboarding => initialize}/page.tsx | 1 +
 ui/src/app/login/page.tsx                      | 2 +-
 ui/src/app/nav.tsx                             | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)
 rename ui/src/app/{onboarding => initialize}/page.tsx (99%)

diff --git a/ui/src/app/onboarding/page.tsx b/ui/src/app/initialize/page.tsx
similarity index 99%
rename from ui/src/app/onboarding/page.tsx
rename to ui/src/app/initialize/page.tsx
index cce1f97..cc252f5 100644
--- a/ui/src/app/onboarding/page.tsx
+++ b/ui/src/app/initialize/page.tsx
@@ -6,6 +6,7 @@ import { useMutation } from "react-query"
 import { useRouter } from "next/navigation"
 import { passwordIsValid } from "../utils"
 import { useAuth } from "../auth/authContext"
+import { Logo } from "../nav"
 
 
 export default function Onboarding() {
diff --git a/ui/src/app/login/page.tsx b/ui/src/app/login/page.tsx
index 76932fa..4da2aef 100644
--- a/ui/src/app/login/page.tsx
+++ b/ui/src/app/login/page.tsx
@@ -19,7 +19,7 @@ export default function LoginPage() {
         queryFn: () => getStatus()
     })
     if (!auth.firstUserCreated && (statusQuery.data && !statusQuery.data.initialized)) {
-        router.push("/onboarding")
+        router.push("/initialize")
     }
     const mutation = useMutation(login, {
         onSuccess: (e) => {
diff --git a/ui/src/app/nav.tsx b/ui/src/app/nav.tsx
index 9dafc26..214a309 100644
--- a/ui/src/app/nav.tsx
+++ b/ui/src/app/nav.tsx
@@ -100,7 +100,7 @@ export default function Navigation({
     children: React.ReactNode;
 }>) {
     const activePath = usePathname()
-    const noNavRoutes = ['/login', '/onboarding'];
+    const noNavRoutes = ['/login', '/initialize'];
 
     const shouldRenderNavigation = !noNavRoutes.includes(activePath);
     const [sidebarVisible, setSidebarVisible] = useState<boolean>(true)

From 00a7b98f66384af4a331800c7c8f62771e3053a9 Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Fri, 2 Aug 2024 11:13:31 +0300
Subject: [PATCH 07/11] form style changes

---
 ui/src/app/initialize/page.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/src/app/initialize/page.tsx b/ui/src/app/initialize/page.tsx
index cc252f5..6a720dc 100644
--- a/ui/src/app/initialize/page.tsx
+++ b/ui/src/app/initialize/page.tsx
@@ -44,13 +44,13 @@ export default function Onboarding() {
                 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 " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
-                        <fieldset>
+                <fieldset>
+                    <div className="p-panel__header">
+                        <h2>Initialize GoCert</h2>
+                    </div>
+                    <div className="p-panel__content">
+                        <h4>Create the initial admin user</h4>
+                        <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
                             <div className="p-form__group row">
                                 <label className="p-form__label">Username</label>
                                 <input type="text" id="InputUsername" name="InputUsername" onChange={handleUsernameChange} />
@@ -98,9 +98,9 @@ export default function Onboarding() {
                                     <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ username: username, password: password1 }) }}>Submit</button>
                                 )}
                             </div>
-                        </fieldset>
-                    </form>
-                </div>
+                        </form>
+                    </div>
+                </fieldset>
             </div >
         </div>
     )

From b54741b540106d4c5963418d3fd5a4e62f500520 Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Fri, 2 Aug 2024 11:19:38 +0300
Subject: [PATCH 08/11] top bar in initialize page

---
 ui/src/app/initialize/page.tsx | 145 +++++++++++++++++----------------
 1 file changed, 76 insertions(+), 69 deletions(-)

diff --git a/ui/src/app/initialize/page.tsx b/ui/src/app/initialize/page.tsx
index 6a720dc..f0426a8 100644
--- a/ui/src/app/initialize/page.tsx
+++ b/ui/src/app/initialize/page.tsx
@@ -32,76 +32,83 @@ export default function Onboarding() {
     const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
     const handlePassword2Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword2(event.target.value) }
     return (
-        <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 style={{ backgroundColor: "#262626", height: "6.5vh" }}>
+                <div style={{ marginLeft: "30px" }}>
+                    <Logo />
+                </div>
+            </div>
+            <div style={{
+                display: "flex",
+                alignContent: "center",
+                justifyContent: "center",
+                flexWrap: "wrap",
+                height: "93.5vh",
             }}>
-                <fieldset>
-                    <div className="p-panel__header">
-                        <h2>Initialize GoCert</h2>
-                    </div>
-                    <div className="p-panel__content">
-                        <h4>Create the initial admin user</h4>
-                        <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
-                            <div className="p-form__group row">
-                                <label className="p-form__label">Username</label>
-                                <input type="text" id="InputUsername" name="InputUsername" onChange={handleUsernameChange} />
-                                <div>
-                                    <label className="p-form__label">Password</label>
-                                    <button className="p-button--base u-no-margin--bottom has-icon" style={{ float: "right" }} aria-live="polite" aria-controls="password" onClick={(e) => { e.preventDefault(); setShowPassword1(!showPassword1) }}>
-                                        {showPassword1 ? (
-                                            <>
-                                                <span className="p-form-password-toggle__label">
-                                                    Hide
-                                                </span>
-                                                <i className="p-icon--hide"></i>
-                                            </>
-                                        ) : (
-                                            <>
-                                                <span className="p-form-password-toggle__label">
-                                                    Show
-                                                </span>
-                                                <i className="p-icon--show"></i>
-                                            </>
-                                        )}
-                                    </button>
-                                </div>
-                                <input className="p-form-validation__input" type={showPassword1 ? "text" : "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">Confirm Password</label>
-                                <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
-                                {!passwordIsValid(password1) && password1 != "" && <p className="p-form-validation__message">Password is not valid</p>}
-                                {passwordIsValid(password1) && !passwordsMatch && password2 != "" && <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 className="p-panel" style={{
+                    width: "45rem",
+                    minWidth: "min-content",
+                    minHeight: "min-content",
+                }}>
+                    <fieldset>
+                        <div className="p-panel__header">
+                            <h2>Initialize GoCert</h2>
+                        </div>
+                        <div className="p-panel__content">
+                            <h4>Create the initial admin user</h4>
+                            <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
+                                <div className="p-form__group row">
+                                    <label className="p-form__label">Username</label>
+                                    <input type="text" id="InputUsername" name="InputUsername" onChange={handleUsernameChange} />
+                                    <div>
+                                        <label className="p-form__label">Password</label>
+                                        <button className="p-button--base u-no-margin--bottom has-icon" style={{ float: "right" }} aria-live="polite" aria-controls="password" onClick={(e) => { e.preventDefault(); setShowPassword1(!showPassword1) }}>
+                                            {showPassword1 ? (
+                                                <>
+                                                    <span className="p-form-password-toggle__label">
+                                                        Hide
+                                                    </span>
+                                                    <i className="p-icon--hide"></i>
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <span className="p-form-password-toggle__label">
+                                                        Show
+                                                    </span>
+                                                    <i className="p-icon--show"></i>
+                                                </>
+                                            )}
+                                        </button>
                                     </div>
-                                }
-                                {!passwordsMatch || !passwordIsValid(password1) ? (
-                                    <>
-                                        <button className="p-button--positive" type="submit" name="submit" disabled={true}>Submit</button>
-                                    </>
-                                ) : (
-                                    <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ username: username, password: password1 }) }}>Submit</button>
-                                )}
-                            </div>
-                        </form>
-                    </div>
-                </fieldset>
-            </div >
-        </div>
+                                    <input className="p-form-validation__input" type={showPassword1 ? "text" : "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">Confirm Password</label>
+                                    <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
+                                    {!passwordIsValid(password1) && password1 != "" && <p className="p-form-validation__message">Password is not valid</p>}
+                                    {passwordIsValid(password1) && !passwordsMatch && password2 != "" && <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>
+                                    }
+                                    {!passwordsMatch || !passwordIsValid(password1) ? (
+                                        <>
+                                            <button className="p-button--positive" type="submit" name="submit" disabled={true}>Submit</button>
+                                        </>
+                                    ) : (
+                                        <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ username: username, password: password1 }) }}>Submit</button>
+                                    )}
+                                </div>
+                            </form>
+                        </div>
+                    </fieldset>
+                </div >
+            </div>
+        </>
     )
 }
\ No newline at end of file

From 281cd793951a6ca5a3d6f764f123480ee86ae568 Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Fri, 2 Aug 2024 11:31:40 +0300
Subject: [PATCH 09/11] login immediately after initialize

---
 ui/src/app/initialize/page.tsx | 35 +++++++++++++++++++++++++++++-----
 ui/src/app/login/page.tsx      |  4 +---
 ui/src/app/types.ts            |  4 ++++
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/ui/src/app/initialize/page.tsx b/ui/src/app/initialize/page.tsx
index f0426a8..f386692 100644
--- a/ui/src/app/initialize/page.tsx
+++ b/ui/src/app/initialize/page.tsx
@@ -1,22 +1,47 @@
 "use client"
 
 import { useState, ChangeEvent } from "react"
-import { postFirstUser } from "../queries"
-import { useMutation } from "react-query"
+import { getStatus, login, postFirstUser } from "../queries"
+import { useMutation, useQuery } from "react-query"
 import { useRouter } from "next/navigation"
 import { passwordIsValid } from "../utils"
 import { useAuth } from "../auth/authContext"
 import { Logo } from "../nav"
+import { useCookies } from "react-cookie"
+import { statusResponse } from "../types"
 
 
 export default function Onboarding() {
     const router = useRouter()
     const auth = useAuth()
-    const mutation = useMutation(postFirstUser, {
+    const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
+    const statusQuery = useQuery<statusResponse, Error>({
+        queryFn: () => getStatus()
+    })
+    console.log(statusQuery.data)
+    if (statusQuery.data && statusQuery.data.initialized) {
+        auth.setFirstUserCreated(true)
+        router.push("/login")
+    }
+    const loginMutation = useMutation(login, {
+        onSuccess: (e) => {
+            setErrorText("")
+            setCookie('user_token', e, {
+                sameSite: true,
+                secure: true,
+                expires: new Date(new Date().getTime() + 60 * 60 * 1000),
+            })
+            router.push('/certificate_requests')
+        },
+        onError: (e: Error) => {
+            setErrorText(e.message)
+        }
+    })
+    const postUserMutation = useMutation(postFirstUser, {
         onSuccess: () => {
             setErrorText("")
             auth.setFirstUserCreated(true)
-            router.push("/login")
+            loginMutation.mutate({ username: username, password: password1 })
         },
         onError: (e: Error) => {
             setErrorText(e.message)
@@ -101,7 +126,7 @@ export default function Onboarding() {
                                             <button className="p-button--positive" type="submit" name="submit" disabled={true}>Submit</button>
                                         </>
                                     ) : (
-                                        <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ username: username, password: password1 }) }}>Submit</button>
+                                        <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); postUserMutation.mutate({ username: username, password: password1 }) }}>Submit</button>
                                     )}
                                 </div>
                             </form>
diff --git a/ui/src/app/login/page.tsx b/ui/src/app/login/page.tsx
index 4da2aef..8820e2b 100644
--- a/ui/src/app/login/page.tsx
+++ b/ui/src/app/login/page.tsx
@@ -6,10 +6,8 @@ import { useState, ChangeEvent } from "react"
 import { useCookies } from "react-cookie"
 import { useRouter } from "next/navigation"
 import { useAuth } from "../auth/authContext"
+import { statusResponse } from "../types"
 
-type statusResponse = {
-    initialized: boolean
-}
 
 export default function LoginPage() {
     const router = useRouter()
diff --git a/ui/src/app/types.ts b/ui/src/app/types.ts
index 3551625..33ef736 100644
--- a/ui/src/app/types.ts
+++ b/ui/src/app/types.ts
@@ -15,4 +15,8 @@ export type User = {
 export type UserEntry = {
     id: number
     username: string
+}
+
+export type statusResponse = {
+    initialized: boolean
 }
\ No newline at end of file

From 3a6c45628bfbf1b291709270bc8f513767065de4 Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Fri, 2 Aug 2024 17:53:28 +0300
Subject: [PATCH 10/11] centre title

---
 ui/src/app/initialize/page.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/src/app/initialize/page.tsx b/ui/src/app/initialize/page.tsx
index f386692..556f3cb 100644
--- a/ui/src/app/initialize/page.tsx
+++ b/ui/src/app/initialize/page.tsx
@@ -18,7 +18,6 @@ export default function Onboarding() {
     const statusQuery = useQuery<statusResponse, Error>({
         queryFn: () => getStatus()
     })
-    console.log(statusQuery.data)
     if (statusQuery.data && statusQuery.data.initialized) {
         auth.setFirstUserCreated(true)
         router.push("/login")
@@ -80,9 +79,9 @@ export default function Onboarding() {
                             <h2>Initialize GoCert</h2>
                         </div>
                         <div className="p-panel__content">
-                            <h4>Create the initial admin user</h4>
                             <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
                                 <div className="p-form__group row">
+                                    <h4>Create the initial admin user</h4>
                                     <label className="p-form__label">Username</label>
                                     <input type="text" id="InputUsername" name="InputUsername" onChange={handleUsernameChange} />
                                     <div>

From c2a9d7af42a19373bd414068c0ad450991ac2581 Mon Sep 17 00:00:00 2001
From: kayra1 <gemalmazkayra@gmail.com>
Date: Fri, 2 Aug 2024 17:54:04 +0300
Subject: [PATCH 11/11] rename component

---
 ui/src/app/initialize/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/app/initialize/page.tsx b/ui/src/app/initialize/page.tsx
index 556f3cb..c1156d3 100644
--- a/ui/src/app/initialize/page.tsx
+++ b/ui/src/app/initialize/page.tsx
@@ -11,7 +11,7 @@ import { useCookies } from "react-cookie"
 import { statusResponse } from "../types"
 
 
-export default function Onboarding() {
+export default function Initialize() {
     const router = useRouter()
     const auth = useAuth()
     const [cookies, setCookie, removeCookie] = useCookies(['user_token']);