Skip to content

Commit

Permalink
onboarding page cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@kayra1
kayra1 committed Jul 29, 2024
1 parent a494a48 commit 7a7d3b6
Showing 1 changed file with 50 additions and 38 deletions.
88 changes: 50 additions & 38 deletions ui/src/app/onboarding/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { useState, ChangeEvent } from "react"
import { postFirstUser } from "../queries"
import { useMutation } from "react-query"
import { useRouter } from "next/router"
import { useRouter } from "next/navigation"


export default function Onboarding() {
Expand All @@ -26,43 +26,55 @@ export default function Onboarding() {
const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
const handlePassword2Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword2(event.target.value) }
return (
<div className="p-panel" >
<div className="p-panel__header">
<h4 className="p-panel__title">Welcome to GoCert</h4>
<p>Please create an admin user to get started</p>
</div>
<div className="p-panel__content">
<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 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 className="p-panel__header">
<h1 className="p-panel__title">Welcome to GoCert</h1>
</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>
</div>
</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>
</form>
</div>
</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>
</form>
</div>
</div >
</div>
)
}

0 comments on commit 7a7d3b6

Please sign in to comment.