From 58182e1a46d7113e2dfa54e056b9d78af0c375f3 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sat, 20 Jul 2024 13:00:52 +0200
Subject: [PATCH] Create Verify state

---
 dashboard/src/states/Verify/Verify.jsx | 74 ++++++++++++++++++++++++++
 dashboard/src/states/Verify/index.js   |  1 +
 2 files changed, 75 insertions(+)
 create mode 100644 dashboard/src/states/Verify/Verify.jsx
 create mode 100644 dashboard/src/states/Verify/index.js

diff --git a/dashboard/src/states/Verify/Verify.jsx b/dashboard/src/states/Verify/Verify.jsx
new file mode 100644
index 0000000..4c06364
--- /dev/null
+++ b/dashboard/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 verified successfully</Typography>
+                <Typography variant="h5">You can now login to your account.</Typography>
+
+                <Stack direction="row">
+                    <Button variant="contained" color="primary" href="/" size="large">
+                        Back to Homepage
+                    </Button>
+                </Stack>
+            </Stack>}
+            {!success && (userId && code) && <Stack justifyContent="center" gap={2} maxWidth="43rem">
+                <Typography variant="h3" fontWeight="bold">Account verification</Typography>
+
+                {!error && <Typography variant="h5">Please click the button below to verify your account.</Typography>}
+                {error && <Typography variant="h5">Either the verification link is invalid or your account has already been verified.</Typography>}
+
+                {!error && <Stack direction="row">
+                    <Button variant="contained" color="primary" onClick={verify} size="large" disabled={loading}>
+                        {loading ? <CircularProgress size={24} color="inherit"/> : "Verify account"}
+                    </Button>
+                </Stack>}
+                {error && <Stack direction="row">
+                    <Button variant="contained" color="primary" href="/" size="large">
+                        Back to Homepage
+                    </Button>
+                </Stack>}
+
+            </Stack>}
+            {!success && (!userId || !code) && <Stack justifyContent="center" gap={2} maxWidth="45rem">
+                <Typography variant="h3" fontWeight="bold">Invalid verification link</Typography>
+                <Typography variant="h5">Please make sure you have clicked the correct link.</Typography>
+
+                <Stack direction="row">
+                    <Button variant="contained" color="primary" href="/" size="large">
+                        Back to Homepage
+                    </Button>
+                </Stack>
+            </Stack>}
+            {!isMobile && <img src={ConfirmImage} alt="Confirm" height="350px"/>}
+        </Stack>
+    );
+}
\ No newline at end of file
diff --git a/dashboard/src/states/Verify/index.js b/dashboard/src/states/Verify/index.js
new file mode 100644
index 0000000..794fd48
--- /dev/null
+++ b/dashboard/src/states/Verify/index.js
@@ -0,0 +1 @@
+export {Verify as default} from "./Verify.jsx";
\ No newline at end of file