From fde24aa8316fc422673d067c736d61964e97e17b Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sun, 30 Jul 2023 19:06:21 +0200
Subject: [PATCH] Created the TotpForm.jsx

---
 .../LoginTab/components/TotpForm/TotpForm.jsx | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/states/Login/tabs/LoginTab/components/TotpForm/TotpForm.jsx

diff --git a/src/states/Login/tabs/LoginTab/components/TotpForm/TotpForm.jsx b/src/states/Login/tabs/LoginTab/components/TotpForm/TotpForm.jsx
new file mode 100644
index 0000000..58e4c4e
--- /dev/null
+++ b/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">Bitte geben Sie den Code aus Ihrer Authenticator App ein.</Alert>
+            {error && <Alert severity="error">Falscher 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"/> : "Anmelden"}
+            </Button>
+        </Stack>
+    )
+}
\ No newline at end of file