profile settings WIP

src/components/Sidebar.js

@@ -22,8 +22,9 @@ const SidebarMenu = ({menuItems = [], children}) => {
     const elements = [];
     for (const menuItem of menuItems) {
         const { label, items: subItems = [], ...rest } = menuItem;
+
         let subElements = null;
-        if (subItems.length) subElements = subItems.map(({ label, to, relative }) => {
+        if (subItems.length) subElements = subItems.map(({ label, to, relative = true }) => {
             if(relative) to = `${menuItem.to}${to}`;
             return <NavLink className='sidebar-menu-item sidebar-menu-child-item' activeClassName='active' to={to} key={label}>{label}</NavLink>;
         });

src/pages/Home.js

@@ -1,16 +1,81 @@
-import React from "react";
+import React, { useRef, useState } from "react";
+import { Route, Routes } from "react-router";
 import '../css/pages/Home.css';
-import { get } from "../util/Util";
+import { useLoginContext } from "../structures/UserContext";
+import { get, post } from "../util/Util";
 
-const Home = () => {
+const Profile = () => {
 
-    return <div className="user-page">
-        <button onClick={async () => {
-            console.log(await get('/api/test'));
-        }}>
-            Test
-        </button>
+    const [user] = useLoginContext();
+    const [twoFactorError, set2FAError] = useState(null);
+
+    const [qr, setQr] = useState(null);
+    const enable2FA = async () => {
+        const response = await get('/api/user/2fa');
+        if (response.status !== 200) return set2FAError(response.message);
+        setQr(response.data);
+        console.log(qr);
+    };
+
+    const authCodeRef = useRef();
+    const disable2FA = async () => {
+        const code = authCodeRef.current.value;
+        const response = await post('/api/user/2fa/disable', {code});
+        if(response.status !== 200) return set2FAError(response.message);
+    };
+
+    return <div className="row">
+        <div className="col-6">
+
+        </div>
+        <div className="col-6">
+            <h3>Settings</h3>
+
+            <p><b>ID:</b> {user.id}</p>
+
+            <form>
+                <label>Username</label>
+                <input id='username' defaultValue={user.username} type='text' autoComplete="off" />
+
+                <label>Display Name</label>
+                <input id='displayName' defaultValue={user.displayName} type='text' autoComplete="off" />
+
+                <label>Change password</label>
+                <input id='currentPassword' placeholder="Current password" type='password' autoComplete="off" />
+                <input id='newPassword' placeholder="New password" type='password' autoComplete="off" />
+                <input id='newPasswordRepeat' placeholder="Repeat new password" type='password' autoComplete="off" />
+
+                <button className="button primary">Save</button>
+            </form>
+
+            <p><b>Two Factor</b></p>
+            {!user.twoFactor ?
+                <div>
+                    <button onClick={enable2FA} className="button success">Enable 2FA</button>
+                </div> :
+                <div>
+                    <button onClick={disable2FA} className="button error">Disable 2FA</button>
+                </div>
+            }
+
+            {qr && <img src={qr} />}
+
+        </div>
     </div>;
 };
 
+const Main = () => {
+
+    return <div>
+        
+    </div>;
+};
+
+const Home = () => {
+
+    return <Routes>
+        <Route path="/" element={<Main />} />
+        <Route path="/profile" element={<Profile />} />
+    </Routes>;
+};
 export default Home;