Task11/user boilerplate (#12)

* update user schema to contain city, state, and isAcceptingRequests

* update chapter and user routes

* update user schema with isActive field

* fix register function for admin to add new chapter

* fixing register function

client/src/AdminDashboard/TempAdminDashboardPage.tsx

@@ -243,4 +243,4 @@ function TempAdminDashboardPage() {
   );
 }
 
-export default TempAdminDashboardPage;
+export default TempAdminDashboardPage;

client/src/AdminDashboard/UserTable.tsx

@@ -4,6 +4,7 @@
  */
 import React, { useEffect, useState } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
+import { LocationCity } from '@material-ui/icons';
 import { PaginationTable, TColumn } from '../components/PaginationTable.tsx';
 import DeleteUserButton from './DeleteUserButton.tsx';
 import PromoteUserButton from './PromoteUserButton.tsx';
@@ -14,8 +15,8 @@ import IUser from '../util/types/user.ts';
 
 interface AdminDashboardRow {
   key: string;
-  first: string;
-  last: string;
+  city: string;
+  state: string;
   email: string;
   promote: React.ReactElement;
   remove: React.ReactElement;
@@ -28,8 +29,8 @@ interface AdminDashboardRow {
 function UserTable() {
   // define columns for the table
   const columns: TColumn[] = [
-    { id: 'first', label: 'First Name' },
-    { id: 'last', label: 'Last Name' },
+    { id: 'city', label: 'City' },
+    { id: 'state', label: 'State' },
     { id: 'email', label: 'Email' },
     { id: 'promote', label: 'Promote to Admin' },
     { id: 'remove', label: 'Remove User' },
@@ -41,11 +42,11 @@ function UserTable() {
     promote: React.ReactElement,
     remove: React.ReactElement,
   ): AdminDashboardRow {
-    const { _id, firstName, lastName, email } = user;
+    const { _id, city, state, email } = user;
     return {
       key: _id,
-      first: firstName,
-      last: lastName,
+      city,
+      state,
       email,
       promote,
       remove,

client/src/App.tsx

@@ -38,7 +38,6 @@ function App() {
                   <Route element={<UnauthenticatedRoutesWrapper />}>
                     <Route path="/login" element={<LoginPage />} />
                     <Route path="/admin" element={<TempAdminDashboardPage />} />
-                    <Route path="/register" element={<RegisterPage />} />
                     <Route
                       path="/verify-account/:token"
                       element={<VerifyAccountPage />}
@@ -58,6 +57,7 @@ function App() {
                   />
                   {/* Routes accessed only if user is authenticated */}
                   <Route element={<ProtectedRoutesWrapper />}>
+                    <Route path="/register" element={<RegisterPage />} />
                     <Route path="/home" element={<HomePage />} />
                   </Route>
                   <Route element={<AdminRoutesWrapper />}>

client/src/Authentication/LoginPage.tsx

@@ -153,11 +153,11 @@ function LoginPage() {
   const dispatch = useAppDispatch();
   function dispatchUser(
     userEmail: string,
-    firstName: string,
-    lastName: string,
+    city: string,
+    state: string,
     admin: boolean,
   ) {
-    dispatch(loginRedux({ email: userEmail, firstName, lastName, admin }));
+    dispatch(loginRedux({ email: userEmail, city, state, admin }));
   }
 
   const clearErrorMessages = () => {
@@ -197,12 +197,7 @@ function LoginPage() {
       loginUser(values.email, values.password)
         .then((user) => {
           console.log('navigating to home!');
-          dispatchUser(
-            user.email!,
-            user.firstName!,
-            user.lastName!,
-            user.admin!,
-          );
+          dispatchUser(user.email!, user.city!, user.state!, user.admin!);
           navigate('/home');
         })
         .catch((e) => {
@@ -270,11 +265,6 @@ function LoginPage() {
                   Forgot password?
                 </Link>
               </Grid>
-              <Grid item>
-                <Link component={RouterLink} to="/register" color="secondary">
-                  Sign up
-                </Link>
-              </Grid>
             </FormRow>
             <SupportingElements>
               <SupportingIcon

client/src/Authentication/RegisterPage.tsx

@@ -24,23 +24,23 @@ function RegisterPage() {
 
   // Default values for state
   const defaultValues = {
-    firstName: '',
-    lastName: '',
+    city: '',
+    state: '',
     email: '',
     password: '',
     confirmPassword: '',
   };
   const defaultShowErrors = {
-    firstName: false,
-    lastName: false,
+    city: false,
+    state: false,
     email: false,
     password: false,
     confirmPassword: false,
     alert: false,
   };
   const defaultErrorMessages = {
-    firstName: '',
-    lastName: '',
+    city: '',
+    state: '',
     email: '',
     password: '',
     confirmPassword: '',
@@ -101,14 +101,14 @@ function RegisterPage() {
       }
     }
 
-    if (!values.firstName.match(nameRegex)) {
-      setErrorMessage('firstName', InputErrorMessage.INVALID_NAME);
-      setShowError('firstName', true);
+    if (!values.city.match(nameRegex)) {
+      setErrorMessage('city', InputErrorMessage.INVALID_NAME);
+      setShowError('city', true);
       isValid = false;
     }
-    if (!values.lastName.match(nameRegex)) {
-      setErrorMessage('lastName', InputErrorMessage.INVALID_NAME);
-      setShowError('lastName', true);
+    if (!values.state.match(nameRegex)) {
+      setErrorMessage('state', InputErrorMessage.INVALID_NAME);
+      setShowError('state', true);
       isValid = false;
     }
     if (!values.email.match(emailRegex)) {
@@ -132,7 +132,7 @@ function RegisterPage() {
 
   async function handleSubmit() {
     if (validateInputs()) {
-      register(values.firstName, values.lastName, values.email, values.password)
+      register(values.city, values.state, values.email, values.password)
         .then(() => {
           setShowError('alert', true);
           setAlertTitle('');
@@ -158,27 +158,27 @@ function RegisterPage() {
             <Grid item width=".5">
               <TextField
                 fullWidth
-                error={showError.firstName}
-                helperText={errorMessage.firstName}
+                error={showError.city}
+                helperText={errorMessage.city}
                 size="small"
                 type="text"
                 required
-                label="First Name"
-                value={values.firstName}
-                onChange={(e) => setValue('firstName', e.target.value)}
+                label="City"
+                value={values.city}
+                onChange={(e) => setValue('city', e.target.value)}
               />
             </Grid>
             <Grid item width=".5">
               <TextField
                 fullWidth
-                error={showError.lastName}
-                helperText={errorMessage.lastName}
+                error={showError.state}
+                helperText={errorMessage.state}
                 size="small"
                 type="text"
                 required
-                label="Last Name"
-                value={values.lastName}
-                onChange={(e) => setValue('lastName', e.target.value)}
+                label="State"
+                value={values.state}
+                onChange={(e) => setValue('state', e.target.value)}
               />
             </Grid>
           </FormRow>

client/src/Authentication/api.ts

@@ -38,22 +38,22 @@ async function verifyAccount(verificationToken: string) {
 
 /**
  * Sends a request to the server to register a user for an account
- * @param firstName
- * @param lastName
+ * @param city
+ * @param state
  * @param email
  * @param password
  * @throws An {@link Error} with a `messsage` field describing the issue in verifying
  */
 async function register(
-  firstName: string,
-  lastName: string,
+  city: string,
+  state: string,
   email: string,
   password: string,
 ) {
   const lowercaseEmail = email.toLowerCase();
-  const res = await postData('auth/register', {
-    firstName,
-    lastName,
+  const res = await postData('admin/register', {
+    city,
+    state,
     email: lowercaseEmail,
     password,
   });
@@ -94,25 +94,25 @@ async function resetPassword(password: string, token: string) {
 
 /**
  * Sends a request to the server to register a new user via an invite
- * @param firstName
- * @param lastName
+ * @param city
+ * @param state
  * @param email
  * @param password
  * @param inviteToken
  * @throws An {@link Error} with a `messsage` field describing the issue in
  * resetting the password
  */
 async function registerInvite(
-  firstName: string,
-  lastName: string,
+  city: string,
+  state: string,
   email: string,
   password: string,
   inviteToken: string,
 ) {
   const lowercaseEmail = email.toLowerCase();
   const res = await postData('auth/register-invite', {
-    firstName,
-    lastName,
+    city,
+    state,
     email: lowercaseEmail,
     password,
     inviteToken,

client/src/Home/HomePage.tsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
 import Button from '@mui/material/Button';
-import { NavigateFunction, useNavigate } from 'react-router-dom';
-import { Typography, Grid } from '@mui/material';
+import {
+  NavigateFunction,
+  useNavigate,
+  Link as RouterLink,
+} from 'react-router-dom';
+import { Link, Typography, Grid } from '@mui/material';
 import { useAppDispatch, useAppSelector } from '../util/redux/hooks.ts';
 import {
   logout as logoutAction,
@@ -37,12 +41,17 @@ function PromoteButton({
       Promote self to admin
     </PrimaryButton>
   ) : (
-    <PrimaryButton
-      variant="contained"
-      onClick={() => navigator('/users', { replace: true })}
-    >
-      View all users
-    </PrimaryButton>
+    <div>
+      <PrimaryButton
+        variant="contained"
+        onClick={() => navigator('/users', { replace: true })}
+      >
+        View all users
+      </PrimaryButton>
+      <Link component={RouterLink} to="/register" color="secondary">
+        Register a New Chapter
+      </Link>
+    </div>
   );
 }
 /**
@@ -69,7 +78,8 @@ function HomePage() {
     }
   };
 
-  const message = `Welcome to the Boilerplate, ${user.firstName} ${user.lastName}!`;
+  const message = `Welcome to the Boilerplate, ${user.city}, ${user.state}!`;
+  console.log(user);
   return (
     <ScreenGrid>
       <Typography variant="h2">{message}</Typography>

client/src/util/redux/userSlice.ts

@@ -4,22 +4,22 @@ import type { RootState } from './store.ts';
 
 export interface UserState {
   email: string | null;
-  firstName: string | null;
-  lastName: string | null;
+  city: string | null;
+  state: string | null;
   admin: boolean | null;
 }
 
 interface Payload {
   email: string;
-  firstName: string;
-  lastName: string;
+  city: string;
+  state: string;
   admin: boolean;
 }
 
 const initialState = {
   email: null,
-  firstName: null,
-  lastName: null,
+  city: null,
+  state: null,
 } as UserState;
 
 /**
@@ -31,17 +31,17 @@ const userSlice = createSlice({
   reducers: {
     login: (state, action: PayloadAction<Payload>) => {
       state.email = action.payload.email;
-      state.firstName = action.payload.firstName;
-      state.lastName = action.payload.lastName;
+      state.city = action.payload.city;
+      state.state = action.payload.state;
       state.admin = action.payload.admin;
     },
     toggleAdmin: (state) => {
       state.admin = !state.admin;
     },
     logout: (state) => {
       state.email = null;
-      state.firstName = null;
-      state.lastName = null;
+      state.city = null;
+      state.state = null;
       state.admin = null;
     },
   },

server/src/config/configPassport.ts

@@ -8,8 +8,10 @@ import {
 
 interface IUserWithPassword {
   _id: string;
-  firstName: string;
-  lastName: string;
+  city: string;
+  state: string;
+  isAcceptingRequests: boolean;
+  isActive: boolean;
   email: string;
   password?: string;
   verified: boolean;