extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-26 04:31:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

full registration; roughed in (#50)

Browse Source
This commit is contained in:
Michael Quigley 2022-09-21 11:29:07 -04:00
parent 4b77fa785b
commit 5b9119f782
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
1 changed files with 49 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
ui/src/Register.js
View File

@ -2,10 +2,12 @@ import { useParams } from 'react-router-dom';
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import * as identity from "./api/identity"; import * as identity from "./api/identity";
const Proceed = (props) => { const RegistrationForm = (props) => {
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [confirm, setConfirm] = useState(''); const [confirm, setConfirm] = useState('');
const [message, setMessage] = useState(); const [message, setMessage] = useState();
const [authToken, setAuthToken] = useState('');
const [complete, setComplete] = useState(false);
const passwordMismatchMessage = <h2 className={"errorMessage"}>Entered passwords do not match!</h2> const passwordMismatchMessage = <h2 className={"errorMessage"}>Entered passwords do not match!</h2>
const registerFailed = <h2 className={"errorMessage"}>Account creation failed!</h2> const registerFailed = <h2 className={"errorMessage"}>Account creation failed!</h2>
@ -21,6 +23,8 @@ const Proceed = (props) => {
if(!resp.error) { if(!resp.error) {
console.log("resp", resp) console.log("resp", resp)
setMessage(undefined); setMessage(undefined);
setAuthToken(resp.data.token);
setComplete(true);
} else { } else {
setMessage(registerFailed); setMessage(registerFailed);
} }
@ -32,27 +36,31 @@ const Proceed = (props) => {
} }
}; };
return ( if(!complete) {
<div className={"fullscreen"}> return (
<img src={"/ziggy.svg"} width={200}/> <div className={"fullscreen"}>
<h1>A new zrok user!</h1> <img src={"/ziggy.svg"} width={200}/>
<h2>{props.email}</h2> <h1>A new zrok user!</h1>
<form onSubmit={handleSubmit}> <h2>{props.email}</h2>
<fieldset> <form onSubmit={handleSubmit}>
<legend>Set A Password</legend> <fieldset>
<p><label htmlFor={"password"}>password: </label><input type={"password"} value={password} placeholder={"Password"} onChange={({target}) => setPassword(target.value)}/></p> <legend>Set A Password</legend>
<p> <p><label htmlFor={"password"}>password: </label><input type={"password"} value={password} placeholder={"Password"} onChange={({target}) => setPassword(target.value)}/></p>
<label htmlFor={"confirm"}>confirm: </label><input type={"password"} value={confirm} placeholder={"Confirm Password"} onChange={({target}) => setConfirm(target.value)}/> <p>
<button type={"submit"}>Register</button> <label htmlFor={"confirm"}>confirm: </label><input type={"password"} value={confirm} placeholder={"Confirm Password"} onChange={({target}) => setConfirm(target.value)}/>
</p> <button type={"submit"}>Register</button>
</fieldset> </p>
</form> </fieldset>
{message} </form>
</div> {message}
) </div>
)
} else {
return <Success email={props.email} token={authToken}/>
}
} }
const Failed = () => { const NoAccountRequest = () => {
return ( return (
<div className={"fullscreen"}> <div className={"fullscreen"}>
<img src={"/ziggy.svg"} width={200}/> <img src={"/ziggy.svg"} width={200}/>
@ -61,17 +69,29 @@ const Failed = () => {
) )
} }
const Success = (props) => {
return (
<div className={"fullscreen"}>
<img src={"/ziggy.svg"} width={200}/>
<h1>Welcome to zrok, {props.email}!</h1>
<pre>{props.token}</pre>
</div>
)
}
let step;
const Register = () => { const Register = () => {
const { token } = useParams(); const { token } = useParams();
const [email, setEmail] = useState(); const [email, setEmail] = useState();
const [failed, setFailed] = useState(false); const [activeRequest, setActiveRequest] = useState(true);
useEffect(() => { useEffect(() => {
let mounted = true let mounted = true
identity.verify({body: {token: token}}).then(resp => { identity.verify({body: {token: token}}).then(resp => {
if(mounted) { if(mounted) {
if(resp.error) { if(resp.error) {
setFailed(true); setActiveRequest(false);
} else { } else {
setEmail(resp.data.email); setEmail(resp.data.email);
} }
@ -79,7 +99,7 @@ const Register = () => {
}).catch(err => { }).catch(err => {
console.log("err", err); console.log("err", err);
if(mounted) { if(mounted) {
setFailed(true); setActiveRequest(false);
} }
}); });
return () => { return () => {
@ -87,11 +107,13 @@ const Register = () => {
} }
}, []); }, []);
let step; if(activeRequest) {
if(!failed) { step = <RegistrationForm
step = <Proceed email={email} token={token}/> email={email}
token={token}
/>
} else { } else {
step = <Failed /> step = <NoAccountRequest />
} }
return ( return (