add improvements from change pw pr to here

canonical · Jul 29, 2024 · 1ba17d5 · 1ba17d5
1 parent 09af802
commit 1ba17d5
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/ui/src/app/change_password/page.tsx b/ui/src/app/change_password/page.tsx
@@ -46,7 +46,7 @@ export default function ChangePasswordPage() {
             }}>
                 <div className="p-panel__content">
                     <div className="u-fixed-width">
-                        <form className={"p-form-validation " + ( (!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
+                        <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
                             <fieldset>
                                 <h4 className="p-panel__title">Change Password</h4>
                                 <label className="p-form__label">New Password</label>
@@ -73,7 +73,7 @@ export default function ChangePasswordPage() {
                                 </p>
                                 <label htmlFor="p-form__label">Confirm New Password</label>
                                 <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
-                                {!passwordIsValid(password1) && <p className="p-form-validation__message">Password is not valid</p>}
+                                {!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">

diff --git a/ui/src/app/users/asideForm.tsx b/ui/src/app/users/asideForm.tsx
@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from "react-query";
-import { extractCSR } from "../utils";
+import { extractCSR, passwordIsValid } from "../utils";
 import { useCookies } from "react-cookie";
 import { postUser } from "../queries";
 import { ChangeEvent, useContext, useState } from "react";
@@ -19,6 +19,7 @@ export default function UploadUserAsidePanel() {
             setErrorText(e.message)
         }
     })
+    const [showPassword1, setShowPassword1] = useState<boolean>(false)
     const [username, setUsername] = useState<string>("")
     const [password1, setPassword1] = useState<string>("")
     const [password2, setPassword2] = useState<string>("")
@@ -36,18 +37,39 @@ export default function UploadUserAsidePanel() {
                 </div>
             </div>
             <div className="p-panel__content">
-                <form className={"p-form-validation " + (!passwordsMatch ? "is-error" : "")}>
+                <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "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} />
+                        <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">Password Again</label>
+                        <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} />
-                        {!passwordsMatch && <p className="p-form-validation__message">Passwords do not match</p>}
+                        {!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">
@@ -56,7 +78,7 @@ export default function UploadUserAsidePanel() {
                                 </div>
                             </div>
                         }
-                        {!passwordsMatch ? (
+                        {!passwordsMatch || !passwordIsValid(password1) ? (
                             <>
                                 <button type="submit" name="submit" disabled={true}>Submit</button>
                             </>