Skip to content

Commit

Permalink
add stylings from other form components
Browse files Browse the repository at this point in the history
  • Loading branch information
@kayra1
kayra1 committed Aug 1, 2024
1 parent 8ab2e15 commit bc93b9b
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 30 deletions.
79 changes: 51 additions & 28 deletions ui/src/app/onboarding/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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) }
Expand All @@ -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 >
Expand Down
3 changes: 1 addition & 2 deletions ui/src/app/users/asideForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down

0 comments on commit bc93b9b

Please sign in to comment.