Skip to content

Commit

Permalink
validate pw and update styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@kayra1
kayra1 committed Jul 26, 2024
1 parent 38cb99a commit 5a48798
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 26 deletions.
71 changes: 45 additions & 26 deletions ui/src/app/change_password/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useMutation } from "react-query"
import { useState, ChangeEvent } from "react"
import { useRouter } from "next/navigation"
import { useAuth } from "../auth/authContext"
import { passwordIsValid } from "../utils"

export default function ChangePasswordPage() {
const router = useRouter()
Expand All @@ -25,6 +26,7 @@ export default function ChangePasswordPage() {

const [password1, setPassword1] = useState<string>("")
const [password2, setPassword2] = useState<string>("")
const [showPassword1, setShowPassword1] = useState<boolean>(false)
const passwordsMatch = password1 === password2
const [errorText, setErrorText] = useState<string>("")
const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
Expand All @@ -42,36 +44,53 @@ export default function ChangePasswordPage() {
minWidth: "min-content",
minHeight: "min-content",
}}>
<div className="p-panel__header is-sticky">
<h4 className="p-panel__title">Change Password</h4>
</div>
<div className="p-panel__content">
<div className="u-fixed-width">
<form className={"p-form-validation " + (!passwordsMatch ? "is-error" : "")}>
<label className="p-form__label">New 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">Confirm New 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>}
{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>
<fieldset>
<h4 className="p-panel__title">Change Password</h4>
<label className="p-form__label">New 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>
<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 New 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>}
{/* {passwordsMatch && !passwordIsValid(password1) && <p className="p-form-validation__message">Password is not valid</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({ authToken: (auth.user ? auth.user.authToken : ""), username: (auth.user ? auth.user.username : ""), password: password1 }) }}>Submit</button>
)
}
}
{!passwordsMatch || !passwordIsValid(password1) ? (
<>
<button className="p-button--positive" type="submit" name="submit" disabled={true}>Change Password</button>
</>
) : (
<button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ authToken: (auth.user ? auth.user.authToken : ""), username: (auth.user ? auth.user.username : ""), password: password1 }) }}>Change Password</button>
)}
</fieldset>
</form>
</div>
</div>
Expand Down
30 changes: 30 additions & 0 deletions ui/src/app/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,4 +246,34 @@ export const HTTPStatus = (code: number): string => {
throw new Error("code not recognized: " + code)
}
return map[code]
}

export const passwordIsValid = (pw: string) => {
if (pw.length < 8) return false

const result = {
hasCapital: false,
hasLowercase: false,
hasSymbol: false,
hasNumber: false
};

if (/[A-Z]/.test(pw)) {
result.hasCapital = true;
}
if (/[a-z]/.test(pw)) {
result.hasLowercase = true;
}
if (/[0-9]/.test(pw)) {
result.hasNumber = true;
}
if (/[^A-Za-z0-9]/.test(pw)) {
result.hasSymbol = true;
}
console.log(result)

if (result.hasCapital && result.hasLowercase && (result.hasSymbol || result.hasNumber)) {
return true
}
return false
}

0 comments on commit 5a48798

Please sign in to comment.