add totp field to login page

3 files changed, 43 insertions, 11 deletions

diff --git a/package.json b/package.json
index 59e4914..a9fa0f7 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "lodash": "^4.17.21",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-jwt": "^1.1.6",
@@ -43,5 +44,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.6.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c307ddf..e63b2ea 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,6 +9,8 @@ specifiers:
   '@testing-library/jest-dom': ^5.16.4
   '@testing-library/react': ^13.3.0
   '@testing-library/user-event': ^13.5.0
+  lodash: ^4.17.21
+  prettier: ^2.6.2
   react: ^18.1.0
   react-dom: ^18.1.0
   react-jwt: ^1.1.6
@@ -26,6 +28,7 @@ dependencies:
   '@testing-library/jest-dom': 5.16.4
   '@testing-library/react': 13.3.0_ef5jwxihqo6n7gxfmzogljlgcm
   '@testing-library/user-event': 13.5.0_tlwynutqiyp5mns3woioasuxnq
+  lodash: 4.17.21
   react: 18.1.0
   react-dom: 18.1.0_react@18.1.0
   react-jwt: 1.1.6_react@18.1.0
@@ -34,6 +37,9 @@ dependencies:
   typescript: 4.7.2
   web-vitals: 2.1.4
 
+devDependencies:
+  prettier: 2.6.2
+
 packages:
 
   /@ampproject/remapping/2.2.0:
@@ -7816,6 +7822,12 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: false
 
+  /prettier/2.6.2:
+    resolution: {integrity: sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
   /pretty-bytes/5.6.0:
     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
     engines: {node: '>=6'}
diff --git a/src/routes/Login.js b/src/routes/Login.js
index 8dfccb0..49ec5ed 100644
--- a/src/routes/Login.js
+++ b/src/routes/Login.js
@@ -10,10 +10,12 @@ import {
   Outlet,
 } from "react-router-dom";
 import Button from "../uikit/Button.js";
-import Input from "../uikit/Input.js"
+import Input from "../uikit/Input.js";
 import { useAuth } from "../hooks/useAuth";
 import { isExpired } from "react-jwt";
 import { styled } from "@stitches/react";
+import { debounce } from "lodash";
+import { keyframes } from "@stitches/react";
 
 const Flex = styled("div", {
   display: "flex",
@@ -41,7 +43,7 @@ const Subtitle = styled("h1", {
   textAlign: "center",
   fontSize: "2.5em",
   margin: "1rem 0",
-  fontWeight: 300
+  fontWeight: 300,
 });
 
 const StyledLabel = styled("label", {
@@ -50,17 +52,17 @@ const StyledLabel = styled("label", {
   fontSize: "0.9em",
 });
 
-
 const AlignRight = styled("div", {
-  "display": "flex",
-  "alignItems": "right",
-  "justifyContent": "right"
-})
+  display: "flex",
+  alignItems: "right",
+  justifyContent: "right",
+});
 
 function Login(props) {
   let auth = useAuth();
   let navigate = useNavigate();
   let location = useLocation();
+  const [totpRequired, setTotpRequired] = useState(false);
 
   let from = location.state?.from?.pathname || "/";
 
@@ -93,7 +95,17 @@ function Login(props) {
     });
   };
 
-  
+  const checkTotpRequired = debounce((e) => {
+    fetch("/api/v1/users/totp?email=" + e.target.value).then((res) => {
+      if (res.status === 200) {
+        res.json().then((data) => {
+          console.debug(data.totp);
+          setTotpRequired(data.totp);
+        });
+      }
+    });
+  }, 500);
+
   function onKeyPress(e) {
     if (e.key == "Enter") {
       e.preventDefault();
@@ -107,12 +119,16 @@ function Login(props) {
         <Title>FDNS</Title>
         <Subtitle>Log In</Subtitle>
         <StyledLabel for="email">Email</StyledLabel>
-        <Input id="email" type="email"></Input>
+        <Input id="email" type="email" onChange={checkTotpRequired}></Input>
         <StyledLabel for="password">Password</StyledLabel>
         <Input id="password" type="password" onKeyUp={onKeyPress}></Input>
+        <StyledLabel for="totp">TOTP Code</StyledLabel>
+        <Input id="totp" disabled={!totpRequired} placeholder={totpRequired?"":"Not Required"}></Input>
         <AlignRight>
-          { /* <Button secondary>Cancel</Button> */}
-          <Button onClick={handleSubmit} primary>Log In {'\u2794'}</Button>
+          {/* <Button secondary>Cancel</Button> */}
+          <Button onClick={handleSubmit} primary>
+            Log In {"\u2794"}
+          </Button>
         </AlignRight>
       </LoginCard>
     </Flex>