From bd3396d7bf0f11b7bb9303510c319de431754cb2 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sat, 20 Jul 2024 13:01:48 +0200
Subject: [PATCH] Create TotpForm component

---
 .../LoginTab/components/TotpForm/TotpForm.jsx | 46 +++++++++++++++++++
 .../LoginTab/components/TotpForm/index.js     |  1 +
 2 files changed, 47 insertions(+)
 create mode 100644 dashboard/src/states/Login/tabs/LoginTab/components/TotpForm/TotpForm.jsx
 create mode 100644 dashboard/src/states/Login/tabs/LoginTab/components/TotpForm/index.js

diff --git a/dashboard/src/states/Login/tabs/LoginTab/components/TotpForm/TotpForm.jsx b/dashboard/src/states/Login/tabs/LoginTab/components/TotpForm/TotpForm.jsx
new file mode 100644
index 0000000..a660b35
--- /dev/null
+++ b/dashboard/src/states/Login/tabs/LoginTab/components/TotpForm/TotpForm.jsx
@@ -0,0 +1,46 @@
+import {Alert, Button, CircularProgress, Stack, TextField} from "@mui/material";
+import {useContext, useState} from "react";
+import {request} from "@/common/utils/RequestUtil.js";
+import {UserContext} from "@contexts/User";
+
+export const TotpForm = ({token}) => {
+
+    const [code, setCode] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+
+    const {updateSessionToken} = useContext(UserContext);
+
+    const login = (event) => {
+        event.preventDefault();
+
+        setError(false);
+        setLoading(true);
+
+        setTimeout(async () => {
+            try {
+                const data = await request("/auth/verify", "POST", {token, code: parseInt(code)});
+                if (data.code) throw new Error("Invalid code");
+
+                updateSessionToken(token);
+            } catch (e) {
+                setLoading(false);
+                setError(true);
+            }
+        }, 500);
+    }
+
+    return (
+        <Stack gap={1.5} component="form" onSubmit={login} sx={{width: "20rem"}}>
+            <Alert severity="info">Please enter the 2FA code from your authenticator app</Alert>
+            {error && <Alert severity="error">Wrong 2FA code!</Alert>}
+
+            <TextField label="Code" variant="outlined" type="number"
+                          placeholder="Code" autoComplete="one-time-code" value={code}
+                            onChange={(e) => setCode(e.target.value)}/>
+            <Button variant="contained" type="submit" disabled={loading}>
+                {loading ? <CircularProgress size={24} color="inherit"/> : "Login"}
+            </Button>
+        </Stack>
+    )
+}
\ No newline at end of file
diff --git a/dashboard/src/states/Login/tabs/LoginTab/components/TotpForm/index.js b/dashboard/src/states/Login/tabs/LoginTab/components/TotpForm/index.js
new file mode 100644
index 0000000..65e9390
--- /dev/null
+++ b/dashboard/src/states/Login/tabs/LoginTab/components/TotpForm/index.js
@@ -0,0 +1 @@
+export {TotpForm as default} from "./TotpForm.jsx";
\ No newline at end of file