From d9a085ae26c8d7e7fc8163f2584727f4d62cb4d8 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sat, 9 Sep 2023 18:44:15 +0200
Subject: [PATCH] Created the Verify.jsx

---
 src/states/Verify/Verify.jsx | 74 ++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/states/Verify/Verify.jsx

diff --git a/src/states/Verify/Verify.jsx b/src/states/Verify/Verify.jsx
new file mode 100644
index 0000000..16b4301
--- /dev/null
+++ b/src/states/Verify/Verify.jsx
@@ -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>
+    );
+}
\ No newline at end of file