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] 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>
     )