2fa frontend functionality WIP

src/pages/Home.js

@@ -10,11 +10,10 @@ const Profile = () => {
     const [twoFactorError, set2FAError] = useState(null);
 
     const [qr, setQr] = useState(null);
-    const enable2FA = async () => {
+    const displayQr = async () => {
         const response = await get('/api/user/2fa');
         if (response.status !== 200) return set2FAError(response.message);
-        setQr(response.data);
+        setQr(response.message);
-        console.log(qr);
     };
 
     const authCodeRef = useRef();
@@ -24,10 +23,31 @@ const Profile = () => {
         if(response.status !== 200) return set2FAError(response.message);
     };
 
+    const codeRef = useRef();
+    const submitCode = async () => {
+
+        const code = codeRef.current.value;
+        if (!code) return;
+        const response = await post('/api/user/2fa/verify', { code });
+        if (response.status !== 200) return set2FAError(response.message);
+
+    };
+
     return <div className="row">
+        
         <div className="col-6">
 
+            <h3>Profile</h3>
+
+            <p><b>Profile Picture</b></p>
+            <img width={256} height={256} src={`/api/users/${user.id}/avatar`} />
+            <form>
+                <input type='file' accept='image/*' />
+                <button>Submit</button>
+            </form>
+
         </div>
+
         <div className="col-6">
             <h3>Settings</h3>
 
@@ -49,17 +69,24 @@ const Profile = () => {
             </form>
 
             <p><b>Two Factor</b></p>
+            {twoFactorError && <p>{twoFactorError}</p>}
             {!user.twoFactor ?
                 <div>
-                    <button onClick={enable2FA} className="button success">Enable 2FA</button>
+                    {qr ?
+                        <div>
+                            <img src={qr} />
+                            <form>
+                                <input ref={codeRef} autoComplete="off" type='password' />
+                                <button onClick={submitCode} className="button success">Submit</button>
+                            </form>
+                        </div> :
+                        <button onClick={displayQr} className="button primary">Enable 2FA</button>}
                 </div> :
                 <div>
                     <button onClick={disable2FA} className="button error">Disable 2FA</button>
                 </div>
             }
 
-            {qr && <img src={qr} />}
-
         </div>
     </div>;
 };