2fa working

src/App.tsx

@@ -5,6 +5,7 @@ import { Home } from "./routes/Home";
 import { Login } from "./routes/Login";
 import { ResumeBook } from "./routes/ResumeBook";
 import { ResumeAllPDF } from "./routes/ResumeAllPDF";
+import TwoFactor from "./routes/TwoFactor";
 
 function App() {
   return (
@@ -13,6 +14,7 @@ function App() {
         <Route path="*" element={<Page showNav={true} pageContent={<Home />} />} />
         <Route path="/resume-book" element={<Page showNav={false} pageContent={<ResumeBook />} />} />
         <Route path="/login" element={<Page showNav={true} pageContent={<Login />} />} />
+        <Route path="/two-factor" element={<Page showNav={true} pageContent={<TwoFactor />} />} />
         <Route path="/resume-book/dev" element={<Page showNav={false} pageContent={<ResumeAllPDF />} />} />
       </Routes>
     </BrowserRouter>

src/routes/Login.tsx

@@ -1,9 +1,45 @@
 import { Box, Button, Flex, HStack, Spacer, Text, Input, Center, useMediaQuery } from "@chakra-ui/react";
+import axios from "axios";
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 export function Login() {
     const [isMedium] = useMediaQuery("(max-width: 850px)");
 	const [isSmall] = useMediaQuery("(max-width: 600px)");
 	const [isXSmall] = useMediaQuery("(max-width: 400px)");
+    const [email, setEmail] = useState(""); // State to store the email input
+    const navigate = useNavigate();
+
+    const sponsorLogin = async (email:any) => {
+        const url = "https://api.reflectionsprojections.org/auth/sponsor/login";
+
+        try {
+          const response = await axios.post(url, { email });
+          console.log("Success:", response.data);
+
+          if (response.data === "Created") {
+            navigate('/two-factor');
+          } else {
+            console.log("Response status:", response.status);
+          }
+        } catch (error) {
+          console.error("Error:", error);
+        }
+      };
+
+
+      const handleSubmit = () => {
+        console.log("Button clicked, email:", email);  // Log button click
+        sponsorLogin(email);  // Call the function with the current email value
+      };
+
+        // Log the input value whenever it's updated
+    const handleEmailChange = (e:any) => {
+        setEmail(e.target.value);
+        console.log("Input value:", e.target.value);  // Log the input value
+    };
+
+
     return (
         <Box>
             <Box
@@ -32,6 +68,9 @@ export function Login() {
                 <Box mt='10vh' zIndex="2">
                     <Text fontSize="24" fontFamily={"Nunito"} fontWeight={"400"}>Enter your Email</Text>
                     <Input
+                        type="email"
+                        value={email}
+                        onChange={handleEmailChange}
                         placeholder="name@example.com"
                         width="300px"
                         mt="20px"
@@ -41,8 +80,10 @@ export function Login() {
                         borderRadius="5px"
                         _placeholder={{ color: "gray.400" }}
                     />
+                <Button onClick={() => handleSubmit()} zIndex="3">
+                    Submit
+                </Button>
                 </Box>
-
             </Flex>
         </Box>
     );

src/routes/TwoFactor.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import { Button, Text } from '@chakra-ui/react';
+
+const TwoFactor = () => {
+  const [code, setCode] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const navigate = useNavigate(); // Hook for navigation
+
+  const handleChange = (e:any) => {
+    // Ensure that the code is always uppercase and only 6 characters
+    const value = e.target.value.toUpperCase().slice(0, 6);
+    setCode(value);
+  };
+
+  const handleSubmit = async (e:any) => {
+    e.preventDefault();
+    if (code.length !== 6) {
+      setError('Please enter a 6-digit code.');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    setSuccess('');
+
+    try {
+      const response = await axios.post('https://api.reflectionsprojections.org/auth/sponsor/verify', {
+        sixDigitCode: code,
+        email: 'devrp3@illinois.edu',
+      });
+      setSuccess('Two-factor authentication successful!');
+      console.log(response.data)
+      navigate('/resume-book');
+    } catch (err) {
+      setError('Authentication failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Text color="white">Enter 6-Digit Code:</Text>
+      <input
+        type="text"
+        id="twoFactorCode"
+        value={code}
+        onChange={handleChange}
+        // maxLength="6"
+        pattern="[A-Z0-9]{6}"
+        required
+        disabled={loading}
+      />
+      {/* <button type="submit" disabled={loading} color="white">
+        {loading ? 'Submitting...' : 'Submit'}
+      </button> */}
+      <Button type="submit" disabled={loading} >
+      {loading ? 'Submitting...' : 'Submit'}
+      </Button>
+
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+      {success && <p style={{ color: 'green' }}>{success}</p>}
+    </form>
+  );
+};
+
+export default TwoFactor;