register flow: add back button to UI where relevant

This commit is contained in:
dr-frmr 2024-09-16 15:12:35 -04:00
parent 073d657201
commit 292c48c866
No known key found for this signature in database
5 changed files with 55 additions and 42 deletions

View File

@ -244,3 +244,10 @@
button.secondary { button.secondary {
width: 100%; width: 100%;
} }
button.back {
float: left;
width: auto !important;
padding: 5px !important;
border: none !important;
}

View File

@ -95,6 +95,7 @@ function CommitDotOsName({
return ( return (
<div className="container fade-in"> <div className="container fade-in">
<button onClick={() => history.back()} className="button secondary">🔙</button>
<div className="section"> <div className="section">
{ {
<form className="form" onSubmit={handleCommit}> <form className="form" onSubmit={handleCommit}>

View File

@ -92,55 +92,58 @@ function ImportKeyfile({
return ( return (
<div className="container fade-in"> <div className="container fade-in">
<button onClick={() => history.back()} className="button secondary">🔙</button>
<div className="section"> <div className="section">
{loading ? ( {loading ? (
<Loader msg="Setting up node..." /> <Loader msg="Setting up node..." />
) : ( ) : (
<form className="form" onSubmit={handleImportKeyfile}> <>
<div className="form-group"> <form className="form" onSubmit={handleImportKeyfile}>
<h4 className="form-label">1. Upload Keyfile</h4> <div className="form-group">
<label className="file-input-label"> <h4 className="form-label">1. Upload Keyfile</h4>
<label className="file-input-label">
<input
type="file"
className="file-input"
onChange={handleKeyfile}
/>
<span className="button secondary">
{localKeyFileName ? "Change Keyfile" : "Select Keyfile"}
</span>
</label>
{localKeyFileName && <p className="mt-2">{localKeyFileName}</p>}
</div> <div className="form-group">
<h4 className="form-label">2. Enter Password</h4>
<input <input
type="file" type="password"
className="file-input" id="password"
onChange={handleKeyfile} required
minLength={6}
name="password"
placeholder=""
value={pw}
onChange={(e) => setPw(e.target.value)}
/> />
<span className="button secondary"> {pwErr && <p className="error-message">{pwErr}</p>}
{localKeyFileName ? "Change Keyfile" : "Select Keyfile"} {pwDebounced && !pwVet && 6 <= pw.length && (
</span> <p className="error-message">Password is incorrect!</p>
</label> )}
{localKeyFileName && <p className="mt-2">{localKeyFileName}</p>} </div>
</div> <div className="form-group">
<h4 className="form-label">2. Enter Password</h4>
<input
type="password"
id="password"
required
minLength={6}
name="password"
placeholder=""
value={pw}
onChange={(e) => setPw(e.target.value)}
/>
{pwErr && <p className="error-message">{pwErr}</p>}
{pwDebounced && !pwVet && 6 <= pw.length && (
<p className="error-message">Password is incorrect!</p>
)}
</div>
<div className="form-group"> <div className="form-group">
{keyErrs.map((x, i) => ( {keyErrs.map((x, i) => (
<p key={i} className="error-message">{x}</p> <p key={i} className="error-message">{x}</p>
))} ))}
<button type="submit" className="button">Boot Node</button> <button type="submit" className="button">Boot Node</button>
</div> </div>
<p className="text-sm mt-2"> <p className="text-sm mt-2">
Please note: if the original node was booted as a direct node Please note: if the original node was booted as a direct node
(static IP), then you must run this node from the same IP. If not, (static IP), then you must run this node from the same IP. If not,
you will have networking issues. If you need to change the network you will have networking issues. If you need to change the network
options, please go back and select "Reset OsName". options, please go back and select "Reset OsName".
</p> </p>
</form> </form>
</>
)} )}
</div> </div>
</div> </div>

View File

@ -118,6 +118,7 @@ function MintCustom({
return ( return (
<div className="container fade-in"> <div className="container fade-in">
<button onClick={() => history.back()} className="button secondary">🔙</button>
<div className="section"> <div className="section">
{ {
<form className="form" onSubmit={handleMint}> <form className="form" onSubmit={handleMint}>

View File

@ -119,6 +119,7 @@ function ResetKnsName({
return ( return (
<div className="container fade-in"> <div className="container fade-in">
<button onClick={() => history.back()} className="button secondary back">🔙</button>
<div className="section"> <div className="section">
{ {
<form className="form" onSubmit={handleResetRecords}> <form className="form" onSubmit={handleResetRecords}>