LicenseAPI/Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created the Verify.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-09-09 18:44:15 +02:00
parent 3d1d23605f
commit d9a085ae26
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 74 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/states/Verify/Verify.jsx Normal file
View File

@ -0,0 +1,74 @@
import {Button, CircularProgress, Stack, Typography, useMediaQuery, useTheme} from "@mui/material";
import ConfirmImage from "@/common/assets/images/confirm.svg";
import {useState} from "react";
import {postRequest} from "@/common/utils/RequestUtil.js";
export const Verify = () => {
const userId = location.pathname.split("/")[2];
const code = location.pathname.split("/")[3];
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("lg"));
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false);
const verify = () => {
setLoading(true);
setTimeout(async () => {
try {
await postRequest("/user/verify", {id: userId, code});
setSuccess(true);
} catch (e) {
setError(true);
setLoading(false);
}
}, 1000);
}
return (
<Stack justifyContent="space-evenly" alignItems="center" sx={{height: "100vh"}} direction={{xs: "column", lg: "row"}}>
{success && <Stack justifyContent="center" gap={2} maxWidth="45rem">
<Typography variant="h3" fontWeight="bold">Account erfolgreich verifiziert</Typography>
<Typography variant="h5">Du kannst dich nun mit deinem Account anmelden.</Typography>
<Stack direction="row">
<Button variant="contained" color="primary" href="/" size="large">
Zurück zur Startseite
</Button>
</Stack>
</Stack>}
{!success && (userId && code) && <Stack justifyContent="center" gap={2} maxWidth="43rem">
<Typography variant="h3" fontWeight="bold">Verifikation deines Accounts</Typography>
{!error && <Typography variant="h5">Bitte bestätige deinen Account, indem du auf "Bestätigen" klickst.</Typography>}
{error && <Typography variant="h5">Entweder ist der Verifikationslink ungültig oder dein Account wurde bereits verifiziert.</Typography>}
{!error && <Stack direction="row">
<Button variant="contained" color="primary" onClick={verify} size="large" disabled={loading}>
{loading ? <CircularProgress size={24} color="inherit"/> : "Bestätigen"}
</Button>
</Stack>}
{error && <Stack direction="row">
<Button variant="contained" color="primary" href="/" size="large">
Zurück zur Startseite
</Button>
</Stack>}
</Stack>}
{!success && (!userId || !code) && <Stack justifyContent="center" gap={2} maxWidth="45rem">
<Typography variant="h3" fontWeight="bold">Verifikationslink ungültig</Typography>
<Typography variant="h5">Bitte verwende den Link, den wir dir per E-Mail zugesendet haben.</Typography>
<Stack direction="row">
<Button variant="contained" color="primary" href="/" size="large">
Zurück zur Startseite
</Button>
</Stack>
</Stack>}
{!isMobile && <img src={ConfirmImage} alt="Confirm" height="350px"/>}
</Stack>
);
}