Added Edit user Route

client/src/App.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
@@ -7,6 +7,7 @@ import Header from './components/Header';
 import Form from './components/Form';
 import Login from './components/Login';
 import Register from './components/Register';
+import EditUser from './components/EditUser';
 import Recover from './components/Recover';
 import Reset from './components/Reset';
 
@@ -25,9 +26,10 @@ function App() {
 
                         <Route path='login' element={<Login />} />
                         <Route path='register' element={<Register />} />
+                        <Route path='update' element={<EditUser />} />
                         <Route path='recover' element={<Form />}>
-                            <Route path=':id' element={<Reset />} />
                             <Route index element={<Recover />} />
+                            <Route path=':id' element={<Reset />} />
                         </Route>
 
                         <Route path='org'>

client/src/components/EditUser.jsx

@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import Cookies from 'js-cookie';
+import { Box, Typography, TextField, Button } from '@mui/material';
+
+import Form from './Form';
+
+function EditUser() {
+    const [form, setForm] = useState({
+        firstName: '',
+        lastName: '',
+        email: '',
+        gender: '',
+        pronouns: '',
+        ethnicity: '',
+    });
+    const [error, setError] = useState('');
+    const navigate = useNavigate();
+
+    const linkStyle = { textDecoration: 'none', color: 'inherit' };
+
+    useEffect(() => {
+        async function getInfo() {
+            axios
+                .get(
+                    `${process.env.DOMAIN_ROOT}/auth/${Cookies.get(
+                        'userID'
+                    )}?token=${Cookies.get('token')}`
+                )
+                .then((response) => {
+                    const user = response.data;
+
+                    setForm(() => {
+                        return {
+                            firstName: user.firstName,
+                            lastName: user.lastName,
+                            email: user.email,
+                            gender: user.gender,
+                            pronouns: user.pronouns,
+                            ethnicity: user.ethnicity,
+                        };
+                    });
+                });
+        }
+        getInfo();
+    });
+
+    function handleChange(e) {
+        const name = e.target.name;
+        const value = e.target.value;
+
+        setForm((form) => {
+            return { ...form, [name]: value };
+        });
+    }
+
+    async function handleSubmit(e) {
+        e.preventDefault();
+
+        const { confirmPassword, ...filteredForm } = form;
+        await axios
+            .post(`${process.env.DOMAIN_ROOT}/auth/register`, filteredForm)
+            .then(() => {
+                navigate('/login');
+            })
+            .catch((e) => setError(() => e.response.data));
+    }
+
+    return (
+        <Form>
+            <form onSubmit={handleSubmit}>
+                <Typography variant='h4' sx={{ marginTop: '1vh 0vh' }}>
+                    Update Account Details
+                </Typography>
+                <TextField
+                    required
+                    fullWidth
+                    id='outline-required'
+                    label='First Name'
+                    name='firstName'
+                    variant='outlined'
+                    onChange={handleChange}
+                    value={form.firstName}
+                    sx={{ margin: '1vh 0vh' }}
+                />
+                <TextField
+                    required
+                    fullWidth
+                    id='outline-required'
+                    label='Last Name'
+                    name='lastName'
+                    variant='outlined'
+                    onChange={handleChange}
+                    value={form.lastName}
+                    sx={{ margin: '1vh 0vh' }}
+                />
+                <TextField
+                    required
+                    fullWidth
+                    id='outline-required'
+                    label='Email'
+                    name='email'
+                    variant='outlined'
+                    onChange={handleChange}
+                    value={form.email}
+                    sx={{ margin: '1vh 0vh' }}
+                />
+                <TextField
+                    fullWidth
+                    id='outline-required'
+                    label='Ethnicity'
+                    name='ethnicity'
+                    variant='outlined'
+                    onChange={handleChange}
+                    value={form.ethnicity}
+                    sx={{ margin: '1vh 0vh' }}
+                />
+                <TextField
+                    fullWidth
+                    id='outline-required'
+                    label='Gender'
+                    name='gender'
+                    variant='outlined'
+                    onChange={handleChange}
+                    value={form.gender}
+                    sx={{ margin: '1vh 0vh' }}
+                />
+                <TextField
+                    fullWidth
+                    id='outline-required'
+                    label='Pronouns'
+                    name='pronouns'
+                    variant='outlined'
+                    onChange={handleChange}
+                    value={form.pronouns}
+                    sx={{ margin: '1vh 0vh' }}
+                />
+                {error && (
+                    <Box textAlign='right'>
+                        <Typography variant='body2' color='secondary'>
+                            {error}
+                        </Typography>
+                    </Box>
+                )}
+                <Button
+                    variant='contained'
+                    color='primary'
+                    sx={{ margin: '1vh 0vh' }}
+                    type='submit'
+                    fullWidth
+                >
+                    Update Details
+                </Button>
+                <Button
+                    variant='contained'
+                    color='error'
+                    sx={{ margin: '1vh 0vh' }}
+                    fullWidth
+                >
+                    <Link to='/recover' style={linkStyle}>
+                        Reset Your Password
+                    </Link>
+                </Button>
+            </form>
+        </Form>
+    );
+}
+
+export default EditUser;

client/src/components/Header.jsx

@@ -29,6 +29,7 @@ function Header() {
             token: Cookies.get('token'),
         });
         Cookies.remove('token');
+        Cookies.remove('userID');
     }
 
     useEffect(() => {

client/src/components/JoinedOrgs.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Paper, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 

client/src/components/Login.jsx

@@ -33,6 +33,7 @@ function Login() {
             }
             logout();
             Cookies.remove('token');
+            Cookies.remove('userID');
         }
     });
 
@@ -59,7 +60,10 @@ function Login() {
         await axios
             .post(`${process.env.DOMAIN_ROOT}/auth/login`, form)
             .then((response) => {
-                Cookies.set('token', response.data, {
+                Cookies.set('token', response.data.token, {
+                    expires: form.remember ? 3650 : 1,
+                });
+                Cookies.set('userID', response.data.userID, {
                     expires: form.remember ? 3650 : 1,
                 });
                 navigate('/');

package.json

@@ -18,5 +18,8 @@
         "express-generator": "^4.2.0",
         "js-cookie": "^3.0.1",
         "sqlite3": "^4.2.0"
+    },
+    "devDependencies": {
+        "sequelize-cli": "^6.4.1"
     }
 }

server/package.json

@@ -18,6 +18,7 @@
         "node-forge": "^1.2.1",
         "nodemon": "^2.0.15",
         "sequelize": "^6.17.0",
+        "sequelize-cli": "^6.4.1",
         "sqlite3": "^5.0.2",
         "uuid": "^8.3.2"
     }