mirror of
https://github.com/openziti/zrok.git
synced 2024-12-23 07:09:12 +01:00
full registration; roughed in (#50)
This commit is contained in:
parent
4b77fa785b
commit
5b9119f782
@ -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,6 +36,7 @@ const Proceed = (props) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if(!complete) {
|
||||||
return (
|
return (
|
||||||
<div className={"fullscreen"}>
|
<div className={"fullscreen"}>
|
||||||
<img src={"/ziggy.svg"} width={200}/>
|
<img src={"/ziggy.svg"} width={200}/>
|
||||||
@ -50,9 +55,12 @@ const Proceed = (props) => {
|
|||||||
{message}
|
{message}
|
||||||
</div>
|
</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 (
|
||||||
|
Loading…
Reference in New Issue
Block a user