Skip to content

Commit

Permalink
top bar in initialize page
Browse files Browse the repository at this point in the history
  • Loading branch information
@kayra1
kayra1 committed Aug 2, 2024
1 parent 00a7b98 commit b54741b
Showing 1 changed file with 76 additions and 69 deletions.
145 changes: 76 additions & 69 deletions ui/src/app/initialize/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
)
}

0 comments on commit b54741b

Please sign in to comment.