extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-24 11:41:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

add <Paper/> around floating text in forgot password and registration; fixed bad API calls in registration

Browse Source
This commit is contained in:
Michael Quigley 2025-02-21 11:58:51 -05:00
parent 66dbecc6b4
commit 9d054e4540
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 97 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ui/src/ForgotPassword.tsx
View File

@ -1,4 +1,4 @@
import {Box, Button, Container, TextField, Typography} from "@mui/material"; import {Box, Button, Container, Paper, TextField, Typography} from "@mui/material";
import zrokLogo from "./assets/zrok-1.0.0-rocket-purple.svg"; import zrokLogo from "./assets/zrok-1.0.0-rocket-purple.svg";
import {Link} from "react-router"; import {Link} from "react-router";
import {AccountApi} from "./api"; import {AccountApi} from "./api";
@ -51,22 +51,24 @@ const ForgotPasswordForm = ({ doRequest }: ForgotPasswordFormProps) => {
const RequestSubmittedMessage = () => { const RequestSubmittedMessage = () => {
return ( return (
<Box component="div"> <Paper sx={{ p: 5 }}>
<Typography component="div" align="center"><h2>Request Submitted...</h2></Typography> <Box component="div">
<Typography component="div"> <Typography component="div" align="center"><h2>Request Submitted...</h2></Typography>
<p> <Typography component="div">
If your email address is found, you will be sent an email with a link to reset your password. <p>
</p> If your email address is found, you will be sent an email with a link to reset your password.
</Typography> </p>
<Typography component="div"> </Typography>
<p> <Typography component="div">
<strong>Please check your "spam" folder for this email if you do not receive it after a few minutes!</strong> <p>
</p> <strong>Please check your "spam" folder for this email if you do not receive it after a few minutes!</strong>
</Typography> </p>
<Box component="div" style={{ textAlign: "center" }}> </Typography>
<Link to="/">Return to Login</Link> <Box component="div" style={{ textAlign: "center" }}>
<Link to="/">Return to Login</Link>
</Box>
</Box> </Box>
</Box> </Paper>
); );
} }

154
ui/src/Register.tsx
View File

@ -1,4 +1,4 @@
import {Box, Button, Checkbox, Container, FormControlLabel, Grid2, TextField, Typography} from "@mui/material"; import {Box, Button, Checkbox, Container, FormControlLabel, Grid2, Paper, TextField, Typography} from "@mui/material";
import zrokLogo from "./assets/zrok-1.0.0-rocket-purple.svg"; import zrokLogo from "./assets/zrok-1.0.0-rocket-purple.svg";
import {useParams} from "react-router"; import {useParams} from "react-router";
import {useFormik} from "formik"; import {useFormik} from "formik";
@ -95,83 +95,87 @@ interface RegistrationCompleteProps {
const RegistrationComplete = ({ token }: RegistrationCompleteProps) => { const RegistrationComplete = ({ token }: RegistrationCompleteProps) => {
return ( return (
<Box component="div"> <Paper sx={{ p: 5 }}>
<Container> <Box component="div">
<Box sx={{ display: "flex", alignItems: "center" }}> <Container>
<Typography component="div"> <Box sx={{ display: "flex", alignItems: "center" }}>
<h2>Registration completed!</h2> <Typography component="div">
</Typography> <h2>Registration completed!</h2>
</Box> </Typography>
</Container> </Box>
<Container> </Container>
<Box> <Container>
<Typography component="p"> <Box>
Your account was created successfully! <Typography component="p">
</Typography> Your account was created successfully!
</Box> </Typography>
<Box sx={{ mt: 3 }}> </Box>
<Typography component="p"> <Box sx={{ mt: 3 }}>
Your new account token is: <code>{token}</code> <ClipboardText text={token} /> <Typography component="p">
</Typography> Your new account token is: <code>{token}</code> <ClipboardText text={token} />
</Box> </Typography>
<Box sx={{ mt: 3 }}> </Box>
<Typography component="p"> <Box sx={{ mt: 3 }}>
You can create an environment using your account token, like this: <Typography component="p">
</Typography> You can create an environment using your account token, like this:
</Box> </Typography>
<Box sx={{ mt: 3 }}> </Box>
<Typography component="p"> <Box sx={{ mt: 3 }}>
<code>$ zrok enable {token}</code> <ClipboardText text={"zrok enable " + token} /> <Typography component="p">
</Typography> <code>$ zrok enable {token}</code> <ClipboardText text={"zrok enable " + token} />
</Box> </Typography>
<Box sx={{ mt: 3 }}> </Box>
<Typography component="p"> <Box sx={{ mt: 3 }}>
<strong>Your account token is a secret (like a password). <Typography component="p">
Please do not share it with anyone!</strong> <strong>Your account token is a secret (like a password).
</Typography> Please do not share it with anyone!</strong>
</Box> </Typography>
<Box sx={{ mt: 3 }}> </Box>
<Typography component="p"> <Box sx={{ mt: 3 }}>
You can use your new password to log into the console here: <Typography component="p">
</Typography> You can use your new password to log into the console here:
</Box> </Typography>
<Box sx={{ mt: 3 }}> </Box>
<Typography component="p"> <Box sx={{ mt: 3 }}>
<a href={window.location.origin}>{window.location.origin}</a> <Typography component="p">
</Typography> <a href={window.location.origin}>{window.location.origin}</a>
</Box> </Typography>
<Box sx={{ mt: 3 }}> </Box>
<Typography component="p"> <Box sx={{ mt: 3 }}>
<h3>Enjoy zrok!</h3> <Typography component="p">
</Typography> <h3>Enjoy zrok!</h3>
</Box> </Typography>
</Container> </Box>
</Box> </Container>
</Box>
</Paper>
); );
} }
const InvalidToken = () => { const InvalidToken = () => {
return ( return (
<Box component="div"> <Paper sx={{ p: 5 }}>
<Container> <Box component="div">
<Box sx={{ display: "flex", alignItems: "center" }}> <Container>
<Typography component="div"><h2 style={{ color: "red" }} align="center">Invalid registration token?!</h2></Typography> <Box sx={{ display: "flex", alignItems: "center" }}>
</Box> <Typography component="div"><h2 style={{ color: "red" }} align="center">Invalid registration token?!</h2></Typography>
</Container> </Box>
<Container> </Container>
<Box> <Container>
<Typography component="p"> <Box>
Your registration token may have expired! <Typography component="p">
</Typography> Your registration token may have expired!
</Box> </Typography>
<Box sx={{ mt: 3 }}> </Box>
<Typography component="p"> <Box sx={{ mt: 3 }}>
Please use the <code>zrok invite</code> command to <Typography component="p">
generate a new registration request and try again. Please use the <code>zrok invite</code> command to
</Typography> generate a new registration request and try again.
</Box> </Typography>
</Container> </Box>
</Box> </Container>
</Box>
</Paper>
); );
} }
@ -183,7 +187,7 @@ const Register = () => {
const [touLink, setTouLink] = useState<string>(); const [touLink, setTouLink] = useState<string>();
const doRegistration = (v) => { const doRegistration = (v) => {
new AccountApi().register({body: {token: regToken, password: v.password}}) new AccountApi().register({body: {registerToken: regToken, password: v.password}})
.then(d => { .then(d => {
console.log(d); console.log(d);
setComponent(<RegistrationComplete token={d.accountToken!} />); setComponent(<RegistrationComplete token={d.accountToken!} />);
@ -195,7 +199,7 @@ const Register = () => {
useEffect(() => { useEffect(() => {
if(regToken) { if(regToken) {
new AccountApi().verify({body: {registrationToken: regToken}}) new AccountApi().verify({body: {registerToken: regToken}})
.then((d) => { .then((d) => {
console.log(d); console.log(d);
setEmail(d.email); setEmail(d.email);