Merge pull request #57 from CS3219-AY2324S1/53-create-delete-button-for-user-to-delete-account

add delete function for userservice, remove account for authservice

Author: KJunWei

AuthService/src/auth/auth.controller.ts

@@ -1,5 +1,5 @@
 import { Request, Response } from "express";
-import { signUp, login, logout } from "./auth.service";
+import { signUp, login, logout, removeUser } from "./auth.service";
 
 export async function handleSignUp(req: Request, res: Response) {
   try {
@@ -35,3 +35,14 @@ export async function handleLogout(req: Request, res: Response) {
     res.status(500).send(error);
   }
 }
+
+export async function handleDelete(req: Request, res: Response) {
+  try {
+    console.log(`deleting user`);
+    await removeUser();
+    res.status(200).send();
+  } catch (error) {
+    console.error(error);
+    res.status(500).send(error);
+  }
+}

AuthService/src/auth/auth.service.ts

@@ -5,6 +5,7 @@ import {
   signInWithEmailAndPassword,
   signOut,
   UserCredential,
+  deleteUser,
 } from "firebase/auth";
 import { firebaseConfig } from "../firebase/firebase.config";
 
@@ -51,3 +52,14 @@ export async function logout(): Promise<void> {
     return Promise.reject(error);
   }
 }
+
+export async function removeUser(): Promise<void> {
+  try {
+    if (auth.currentUser) {
+      await deleteUser(auth.currentUser);
+    }
+    return Promise.resolve();
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}

AuthService/src/index.ts

@@ -4,6 +4,7 @@ import {
   handleLogin,
   handleLogout,
   handleSignUp,
+  handleDelete
 } from "./auth/auth.controller";
 // import { Socket, Server } from 'socket.io';
 // import { initializeApp } from 'firebase/app';
@@ -24,6 +25,7 @@ app.get("/", (req, res) => {
 app.post("/signup", handleSignUp);
 app.post("/login", handleLogin);
 app.delete("/logout", handleLogout);
+app.delete("/delete", handleDelete);
 
 
 

UserService/src/index.ts

@@ -6,7 +6,7 @@ import cors from "cors";
 // import { firebaseConfig } from "./firebase/firebase.config";
 // import { Socket, Server } from 'socket.io';
 // import { Server as ServerHttp } from 'http';
-import { handleCreateUser, handleGetUser, handleUpdateUser } from "./user/user.controller";
+import { handleCreateUser, handleDeleteUser, handleGetUser, handleUpdateUser } from "./user/user.controller";
 const app = express();
 const port = 3004;
 app.use(cors());
@@ -25,7 +25,7 @@ app.get("/", (req, res) => {
 app.post("/user", handleCreateUser);
 app.get("/user", handleGetUser);
 app.put("/user", handleUpdateUser);
-
+app.delete("/user", handleDeleteUser);
 
 
 

UserService/src/user/user.controller.ts

@@ -1,5 +1,5 @@
 import { Request, Response } from "express";
-import { createUser, getUser, updateUser } from "./user.service";
+import { createUser, delUser, getUser, updateUser } from "./user.service";
 
 export async function handleCreateUser(req: Request, res: Response) {
   try {
@@ -45,3 +45,19 @@ export async function handleUpdateUser(req: Request, res: Response) {
     res.status(500).send(error);
   }
 }
+
+export async function handleDeleteUser(req: Request, res: Response) {
+  try {
+    const user = req.query;
+    if (user && typeof(user.email) === "string") {
+      console.log(`deleting user`);
+      await delUser(user.email)
+      res.status(200).send("no params");
+    } else {
+      res.status(500).send("no params");
+    }
+  } catch (error) {
+    console.error(error);
+    res.status(500).send(error);
+  }
+}

UserService/src/user/user.service.ts

@@ -1,17 +1,18 @@
 import { initializeApp } from "firebase/app";
-import { doc, getDoc, getFirestore, setDoc, updateDoc } from "firebase/firestore";
+import { doc, getDoc, getFirestore, setDoc, updateDoc, deleteDoc } from "firebase/firestore";
 import { firebaseConfig } from "../firebase/firebase.config";
-
-initializeApp(firebaseConfig);
-const db = getFirestore();
+import { getAuth } from "firebase/auth";
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+const db = getFirestore(app);
 
 interface User {
-  email: string;
+  email?: string;
   name?: string;
   year?: string;
   major?: string;
-  role: string;
-  completed: number;
+  role?: string;
+  completed?: number;
 }
 
 export async function createUser(email: string): Promise<User> {
@@ -81,4 +82,13 @@ export async function updateUser(email: string, params: any): Promise<User> {
   } catch (error) {
     return Promise.reject(error);
   }
+}
+
+export async function delUser(user: string): Promise<null> {
+  try {
+    await deleteDoc(doc(db, "users", user));
+    return null;
+  } catch (error) {
+    return Promise.reject(error);
+  }
 }

frontend/src/api/auth/data.ts

@@ -9,3 +9,5 @@ export const signIn = (params: AuthDTO) =>
   AuthHttpClient.post<UserCredential>("/login", params);
 
 export const signOut = () => AuthHttpClient.delete("/logout");
+
+export const deleteUser = () => AuthHttpClient.delete("/delete");

frontend/src/api/user/data.ts

@@ -1,12 +1,14 @@
 import {UserHttpClient} from "../axios/config";
 import { UserModel, Values } from "./model";
 
-
 export const createUser = (email: string) =>
   UserHttpClient.post<UserModel>("/user", { email: email });
 
 export const getUser = (email: string) =>
   UserHttpClient.get<UserModel>("/user", { params: { email: email } });
 
-  export const updateUser = (params: Values) =>
-  UserHttpClient.put<UserModel>("/user", { params });
+export const updateUser = (params: Values) =>
+UserHttpClient.put<UserModel>("/user", { params });
+
+export const deleteActiveUser = (email: string) =>
+UserHttpClient.delete<UserModel>("/user", { params: {email: email } });

frontend/src/auth/auth.context.tsx

@@ -7,7 +7,7 @@ import {
   useState,
 } from "react";
 import { User } from "firebase/auth";
-import { registerUser, signIn, signOut } from "../api/auth";
+import { deleteUser, registerUser, signIn, signOut } from "../api/auth";
 import { useLocalStorage } from "./useLocalStorage";
 import { useNavigate } from "react-router-dom";
 import { AxiosError } from "axios";
@@ -16,10 +16,12 @@ import { createUser, getUser, UserModel } from "../api/user";
 interface AuthContextData {
   user: UserModel | undefined;
   setUser: any | undefined,
+  activeUser: User | undefined;
   error: string;
   signUp: (email: string, password: string) => void;
   login: (email: string, password: string) => void;
   logout: () => void;
+  removeAccount: () => void;
 }
 
 interface AuthContextProviderProps {
@@ -29,15 +31,18 @@ interface AuthContextProviderProps {
 const AuthContext = createContext<AuthContextData>({
   user: undefined,
   setUser: undefined,
+  activeUser: undefined,
   error: "",
   signUp: (email: string, password: string) => undefined,
   login: (email: string, password: string) => undefined,
   logout: () => undefined,
+  removeAccount: () => undefined
 });
 
 export function AuthContextProvider({ children }: AuthContextProviderProps) {
   const navigate = useNavigate();
   const [user, setUser] = useLocalStorage("user", undefined);
+  const [activeUser, setActiveUser] = useState<User>();
   const [error, setError] = useState<string>("");
 
   const signUp = useCallback(
@@ -52,6 +57,7 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
           throw new Error("user returned without email");
         }
         const fetchedUser = await createUser(u.email);
+        setActiveUser(u)
         setUser(fetchedUser.data);
       } catch (e) {
         if (e instanceof AxiosError && e.response) {
@@ -72,9 +78,8 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
         if (!u.email) {
           throw new Error("user returned without email");
         }
-        console.log(u.email);
+        setActiveUser(u)
         const fetchedUser = await getUser(u.email);
-        console.log(fetchedUser.data);
         setUser(fetchedUser.data);
         navigate("/home", { replace: true });
       } catch (e) {
@@ -92,6 +97,24 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
     try {
       await signOut();
       setUser(undefined);
+      setActiveUser(undefined)
+      navigate("/", { replace: true });
+    } catch (e) {
+      if (e instanceof AxiosError && e.response) {
+        setError(e.response.data.code);
+      } else if (e instanceof Error) {
+        setError(e.message);
+      }
+    }
+  }, [setUser, navigate]);
+
+  const removeAccount = useCallback(async () => {
+    try {
+      if (activeUser) {
+        await deleteUser();
+      }
+      setUser(undefined);
+      setActiveUser(undefined)
       navigate("/", { replace: true });
     } catch (e) {
       if (e instanceof AxiosError && e.response) {
@@ -103,8 +126,8 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
   }, [setUser, navigate]);
 
   const authContextProviderValue = useMemo(
-    () => ({ user, setUser, error, signUp, login, logout }),
-    [user, setUser, error, signUp, login, logout]
+    () => ({ user, setUser, activeUser, error, signUp, login, logout, removeAccount }),
+    [user, setUser, activeUser, error, signUp, login, logout, removeAccount]
   );
 
   return (

frontend/src/components/UserService/AccountDeletionForm.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Box } from "@mui/material";
+import Button from '@mui/material/Button';
+import { useNavigate } from 'react-router-dom'; // Import useNavigate for redirection
+import { useAuth } from '../../auth/auth.context';
+import { deleteActiveUser } from '../../api/user';
+// import socket from './socket';
+
+const style = {
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '50%',
+    display: 'flex-wrap',
+    maxHeight: '60%',
+    justifyContent: "center",
+    textAlign: "center",
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    overflow: 'auto',
+    p: 4,
+};
+
+const AccountDeletionForm = React.forwardRef(function AccountDeletionForm() {
+    const { activeUser, removeAccount } = useAuth();
+
+    const handleDelete = async () => {
+        try {
+            if (activeUser?.email) {
+                const res = await deleteActiveUser(activeUser.email);
+                const res2 = await removeAccount();
+            }
+          } catch (e) {
+            console.log(e)
+          }
+    };
+
+    return (
+        <Box sx={style}>
+            <h2><center>Are you sure you want to delete your account?</center></h2>
+            <h4><center>This action cannot be reversed.</center></h4>
+                <Button sx={{ mt: '5%' }} variant="contained" onClick={handleDelete}>
+                    Confirm
+                </Button>
+        </Box>
+    );
+});
+
+export default AccountDeletionForm;