Abeer/account designs

backend/middlewares/validators/userValidators.ts

@@ -72,9 +72,6 @@ export const updateUserDtoValidator = async (
   if (!validatePrimitive(req.body.lastName, "string")) {
     return res.status(400).send(getApiValidationError("lastName", "string"));
   }
-  if (!validatePrimitive(req.body.email, "string")) {
-    return res.status(400).send(getApiValidationError("email", "string"));
-  }
   if (!validatePrimitive(req.body.role, "string")) {
     return res.status(400).send(getApiValidationError("role", "string"));
   }

backend/rest/authRoutes.ts

@@ -267,6 +267,25 @@ authRouter.post(
   },
 );
 
+authRouter.put(
+  "/changePassword",
+  updateTemporaryPasswordRequestValidator,
+  async (req, res) => {
+    try {
+      const accessToken = getAccessToken(req)!;
+      const newAccessToken = await authService.changeUserPassword(
+        accessToken,
+        req.body.newPassword,
+      );
+      res.status(200).json({
+        accessToken: newAccessToken,
+      });
+    } catch (error: unknown) {
+      res.status(500).json({ error: getErrorMessage(error) });
+    }
+  },
+);
+
 authRouter.post(
   "/updateUserStatus",
   updateUserStatusRequestValidator,

backend/rest/userRoutes.ts

@@ -256,7 +256,6 @@ userRouter.put(
       const updatedUser = await userService.updateUserById(req.params.userId, {
         firstName: req.body.firstName,
         lastName: req.body.lastName,
-        email: req.body.email,
         role: req.body.role,
         status: "Active",
       });
@@ -413,7 +412,6 @@ userRouter.put(
       const updateLearnerPayload: UpdateUserDTO = {
         firstName: req.body.firstName,
         lastName: req.body.lastName,
-        email: req.body.email,
         role: req.body.role,
         status: "Active",
       };
@@ -430,4 +428,23 @@ userRouter.put(
   },
 );
 
+userRouter.put(
+  "/updateMyAccount/:userId",
+  isAuthorizedByRole(new Set(["Administrator", "Facilitator", "Learner"])),
+  updateUserDtoValidator,
+  async (req, res) => {
+    try {
+      const updatedUser = await userService.updateUserById(req.params.userId, {
+        firstName: req.body.firstName,
+        lastName: req.body.lastName,
+        role: req.body.role,
+        status: "Active",
+      });
+      res.status(200).json(updatedUser);
+    } catch (error: unknown) {
+      res.status(500).send(getErrorMessage(error));
+    }
+  },
+);
+
 export default userRouter;

backend/services/implementations/userService.ts

@@ -221,43 +221,20 @@ class UserService implements IUserService {
 
     try {
       // must explicitly specify runValidators when updating through findByIdAndUpdate
-      oldUser = await MgUser.findByIdAndUpdate(userId, user, {
-        runValidators: true,
-      });
+      oldUser = await MgUser.findByIdAndUpdate(
+        userId,
+        {
+          firstName: user.firstName,
+          lastName: user.lastName,
+          role: user.role,
+          status: user.status,
+        },
+        { runValidators: true },
+      );
 
       if (!oldUser) {
         throw new Error(`userId ${userId} not found.`);
       }
-
-      try {
-        await firebaseAdmin
-          .auth()
-          .updateUser(oldUser.authId, { email: user.email });
-      } catch (error) {
-        // rollback MongoDB user updates
-        try {
-          await MgUser.findByIdAndUpdate(
-            userId,
-            {
-              firstName: oldUser.firstName,
-              lastName: oldUser.lastName,
-              role: oldUser.role,
-              status: oldUser.status,
-            },
-            { runValidators: true },
-          );
-        } catch (mongoDbError: unknown) {
-          const errorMessage = [
-            "Failed to rollback MongoDB user update after Firebase user update failure. Reason =",
-            getErrorMessage(mongoDbError),
-            "MongoDB user id with possibly inconsistent data =",
-            oldUser.id,
-          ];
-          Logger.error(errorMessage.join(" "));
-        }
-
-        throw error;
-      }
     } catch (error: unknown) {
       Logger.error(`Failed to update user. Reason = ${getErrorMessage(error)}`);
       throw error;
@@ -267,7 +244,6 @@ class UserService implements IUserService {
       ...oldUser.toObject(),
       firstName: user.firstName,
       lastName: user.lastName,
-      email: user.email,
       role: user.role,
       status: user.status,
     };

backend/types/userTypes.ts

@@ -31,7 +31,7 @@ export type CreateUserDTO = Omit<UserDTO, "id" | "bookmarks"> & {
   password: string;
 };
 
-export type UpdateUserDTO = Omit<UserDTO, "id" | "bookmarks">;
+export type UpdateUserDTO = Omit<UserDTO, "id" | "email" | "bookmarks">;
 
 export type SignupUserDTO = Omit<CreateUserDTO, "role">;
 

frontend/src/APIClients/AuthAPIClient.ts

@@ -108,6 +108,36 @@ const updateTemporaryPassword = async (
   }
 };
 
+const changePassword = async (
+  email: string,
+  newPassword: string,
+  role: Role,
+): Promise<boolean> => {
+  const bearerToken = `Bearer ${getLocalStorageObjProperty(
+    AUTHENTICATED_USER_KEY,
+    "accessToken",
+  )}`;
+  try {
+    await baseAPIClient.put(
+      `/auth/changePassword`,
+      { newPassword },
+      { headers: { Authorization: bearerToken } },
+    );
+    const newAuthenticatedUser = await login(email, newPassword, role);
+    if (!newAuthenticatedUser) {
+      throw new Error("Unable to authenticate user after logging in.");
+    }
+    setLocalStorageObjProperty(
+      AUTHENTICATED_USER_KEY,
+      "accessToken",
+      newAuthenticatedUser.accessToken,
+    );
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
+
 const updateUserStatus = async (newStatus: Status): Promise<boolean> => {
   const bearerToken = `Bearer ${getLocalStorageObjProperty(
     AUTHENTICATED_USER_KEY,
@@ -168,6 +198,7 @@ export default {
   signup,
   resetPassword,
   updateTemporaryPassword,
+  changePassword,
   updateUserStatus,
   refresh,
   isUserVerified,

frontend/src/APIClients/UserAPIClient.ts

@@ -1,7 +1,10 @@
 import AUTHENTICATED_USER_KEY from "../constants/AuthConstants";
 import { Role } from "../types/AuthTypes";
 import { User } from "../types/UserTypes";
-import { getLocalStorageObjProperty } from "../utils/LocalStorageUtils";
+import {
+  getLocalStorageObjProperty,
+  setLocalStorageObjProperty,
+} from "../utils/LocalStorageUtils";
 import baseAPIClient from "./BaseAPIClient";
 
 const getUsersByRole = async (role: Role): Promise<User[]> => {
@@ -34,7 +37,40 @@ const getUsers = async (): Promise<User[]> => {
   }
 };
 
+const updateUserDetails = async (
+  userId: string,
+  firstName: string,
+  lastName: string,
+  role: string,
+  status: string,
+): Promise<User> => {
+  const bearerToken = `Bearer ${getLocalStorageObjProperty(
+    AUTHENTICATED_USER_KEY,
+    "accessToken",
+  )}`;
+  try {
+    const response = await baseAPIClient.put(
+      `/users/updateMyAccount/${userId}`,
+      {
+        firstName,
+        lastName,
+        role,
+        status,
+      },
+      {
+        headers: { Authorization: bearerToken },
+      },
+    );
+    setLocalStorageObjProperty(AUTHENTICATED_USER_KEY, "firstName", firstName);
+    setLocalStorageObjProperty(AUTHENTICATED_USER_KEY, "lastName", lastName);
+    return response.data;
+  } catch (error) {
+    throw new Error("Failed to update user details");
+  }
+};
+
 export default {
   getUsersByRole,
   getUsers,
+  updateUserDetails,
 };

frontend/src/components/common/MainPageButton.tsx

@@ -1,21 +1,48 @@
 import React from "react";
+import { Typography, Button, useTheme } from "@mui/material";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import { useHistory } from "react-router-dom";
 import { HOME_PAGE } from "../../constants/Routes";
+import { useUser } from "../../hooks/useUser";
 
 const MainPageButton = (): React.ReactElement => {
   const history = useHistory();
+  const theme = useTheme();
+  const user = useUser();
+
   const navigateTo = () => history.push(HOME_PAGE);
   return (
-    <div>
-      <button
+    <>
+      <Button
+        variant="text"
         onClick={navigateTo}
-        className="btn btn-primary"
-        type="button"
-        style={{ textAlign: "center" }}
+        startIcon={
+          <ChevronLeftIcon sx={{ color: theme.palette[user.role].Default }} />
+        }
+        sx={{
+          display: "flex",
+          padding: "10px 16px 10px 12px",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "8px",
+          flex: "1 0 0",
+          alignSelf: "stretch",
+          position: "absolute",
+          left: "12px",
+          top: "80px",
+          borderRadius: "4px",
+        }}
       >
-        Go Back
-      </button>
-    </div>
+        <Typography
+          variant="labelLarge"
+          sx={{
+            color: theme.palette[user.role].Default,
+          }}
+        >
+          Back
+        </Typography>
+      </Button>
+    </>
   );
 };
 

frontend/src/components/common/navbar/UserButton.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { AccountCircle } from "@mui/icons-material";
 import { Box, IconButton, Popover, useTheme } from "@mui/material";
 import RefreshCredentials from "../../auth/RefreshCredentials";
 import ResetPassword from "../../auth/ResetPassword";
 import Logout from "../../auth/Logout";
 import MyAccountButton from "../../auth/MyAccountButton";
+import ProfilePicture from "../../profile/ProfilePicture";
 
 const UserButton = () => {
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
@@ -31,7 +31,7 @@ const UserButton = () => {
         onClick={handleClick}
         sx={{ color: theme.palette.Neutral[400] }}
       >
-        <AccountCircle />
+        <ProfilePicture size={24} />
       </IconButton>
       <Popover
         id={id}

frontend/src/components/learners/LearnersList.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Typography } from "@mui/material";
+import {
+  isAuthenticatedFacilitator,
+  isAuthenticatedLearner,
+} from "../../types/AuthTypes";
+import { useUser } from "../../hooks/useUser";
+
+const LearnerList = (): React.ReactElement => {
+  const user = useUser();
+
+  return (
+    <>
+      {isAuthenticatedFacilitator(user) && (
+        <Typography variant="body1">Learners: {user.learners}</Typography>
+      )}
+      {isAuthenticatedLearner(user) && (
+        <Typography variant="body1">Facilitator: {user.facilitator}</Typography>
+      )}
+    </>
+  );
+};
+
+export default LearnerList;