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

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

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,6 +51,7 @@ const ForgotPasswordForm = ({ doRequest }: ForgotPasswordFormProps) => {
const RequestSubmittedMessage = () => { const RequestSubmittedMessage = () => {
return ( return (
<Paper sx={{ p: 5 }}>
<Box component="div"> <Box component="div">
<Typography component="div" align="center"><h2>Request Submitted...</h2></Typography> <Typography component="div" align="center"><h2>Request Submitted...</h2></Typography>
<Typography component="div"> <Typography component="div">
@ -67,6 +68,7 @@ const RequestSubmittedMessage = () => {
<Link to="/">Return to Login</Link> <Link to="/">Return to Login</Link>
</Box> </Box>
</Box> </Box>
</Paper>
); );
} }

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,6 +95,7 @@ interface RegistrationCompleteProps {
const RegistrationComplete = ({ token }: RegistrationCompleteProps) => { const RegistrationComplete = ({ token }: RegistrationCompleteProps) => {
return ( return (
<Paper sx={{ p: 5 }}>
<Box component="div"> <Box component="div">
<Container> <Container>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
@ -147,11 +148,13 @@ const RegistrationComplete = ({ token }: RegistrationCompleteProps) => {
</Box> </Box>
</Container> </Container>
</Box> </Box>
</Paper>
); );
} }
const InvalidToken = () => { const InvalidToken = () => {
return ( return (
<Paper sx={{ p: 5 }}>
<Box component="div"> <Box component="div">
<Container> <Container>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
@ -172,6 +175,7 @@ const InvalidToken = () => {
</Box> </Box>
</Container> </Container>
</Box> </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);