login flow now works

src/pages/Login.js

@@ -1,7 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
+import { Route, Routes, useNavigate } from "react-router";
 import '../css/pages/Login.css';
 import logoImg from '../img/logo.png';
-import { post } from "../util/Util";
+import { useLoginContext } from "../structures/UserContext";
+import { fetchUser, post } from "../util/Util";
 
 const loginMethods = [
 {
@@ -10,35 +12,52 @@ const loginMethods = [
 }
 ];
 
-const Login = () => {
+
-    document.body.classList.add('bg-triangles');
+const CredentialFields = () => {
+
+    const [, setUser] = useLoginContext();
+    const [fail, setFail] = useState(false);
+    const navigate = useNavigate();
+    console.log(fail);
 
     const loginClick = async () => {
         const username = document.getElementById('username').value;
         const password = document.getElementById('password').value;
         if (!username.length || !password.length) return;
 
-        await post('/api/login', {username, password});
+        const result = await post('/api/login', { username, password });
+        console.log(result);
+        if (!result.success) {
+            setFail(true);
+            return;
+        }
+
+        if (!result.twoFactor) {
+            setUser(await fetchUser());
+            return navigate('/home');
+        }
+        return navigate('/login/verify');
 
     };
 
-    return <div className="row is-center is-full-screen is-marginless">
+    return <div>
-        <div className='col-6 col-6-md col-3-lg'>
+        <div className="is-center">
-            <div className="is-center">
+            <img className="logoImg mb-4" src={logoImg}></img>
-                <img className="logoImg mb-4" src={logoImg}></img>
+        </div>
-            </div>
+        <div className="card mb-3 is-center dir-column">
-            <div className="card mb-3 is-center dir-column">
+            {fail ? 'Invalid credentials' : ''}
-                <h2>Log in</h2>
+            <h2>Log in</h2>
 
-                <input autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
+            <input autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
-                <input autoComplete='off' placeholder='Password' required id='password' type='password' />
+            <input autoComplete='off' placeholder='Password' required id='password' type='password' />
-                <button onClick={loginClick}>Enter</button>
+            <button onClick={loginClick}>Enter</button>
-            </div>
+        </div>
 
-            <div className="card is-center dir-column">
+        <div className="card is-center dir-column">
-                <b>Alternate login methods</b>
+            <b>Alternate login methods</b>
-                <div className="methodsWrapper is-center flex-wrap">
+            <div className="methodsWrapper is-center flex-wrap">
                 {loginMethods.map(method => <img
+                    crossOrigin="anonymous"
                     className='third-party-login'
                     key={method.name}
                     alt={method.name}
@@ -46,9 +65,45 @@ const Login = () => {
                     width={48} height={48}
                     onClick={() => { window.location.pathname = `/api/login/${method.name}`; }}
                 />)}
-                </div>
             </div>
+        </div>
+    </div>;
+};
 
+const TwoFactor = () => {
+
+    const [, setUser] = useLoginContext();
+    const navigate = useNavigate();
+    const twoFactorClick = async () => {
+        const code = document.getElementById('2faCode').value;
+        if (!code) return;
+
+        const result = await post('/api/login/verify', { code });
+        console.log(result);
+        if (result.success) {
+            setUser(await fetchUser());
+            return navigate('/home', { replace: true });
+        }
+        // else throw error?
+    };
+
+    return <div className="card mb-3 is-center dir-column">
+        <h2>Verification code</h2>
+        <input autoComplete='off' placeholder='Code' required id='2faCode' type='password' />
+        <button onClick={twoFactorClick}>Enter</button>
+    </div>;
+};
+
+const Login = () => {
+    document.body.classList.add('bg-triangles');
+
+    return <div className="row is-center is-full-screen is-marginless">
+        <div className='col-6 col-6-md col-3-lg'>
+            
+            <Routes>
+                <Route path='/' element={<CredentialFields />} />
+                <Route path='/verify' element={<TwoFactor />} />
+            </Routes>
             
         </div>
     </div>;