From 5449bedf119baa3e31ecac79944efb2afde5bbc6 Mon Sep 17 00:00:00 2001
From: Ricardo Costa <rcosta.ms358@gmail.com>
Date: Wed, 19 Jun 2024 16:31:37 +0100
Subject: [PATCH] Progress on Workspace Member Management

---
 code/client/src/App.tsx                       |  8 ++--
 .../src/domain/workspaces/useWorkspaces.ts    | 15 +++++++
 code/client/src/services/auth/authService.ts  |  6 ++-
 .../services/workspace/workspaceService.ts    | 17 +++++++
 .../src/ui/components/dialog/Dialog.tsx       |  4 +-
 .../src/ui/components/header/Header.scss      |  4 ++
 .../src/ui/components/header/Header.tsx       | 18 ++++----
 .../src/ui/components/sidebar/Sidebar.tsx     |  1 -
 .../src/ui/contexts/auth/AuthContext.tsx      |  9 +++-
 code/client/src/ui/contexts/auth/utils.ts     | 22 ----------
 .../Login.scss => landing/Landing.scss}       |  4 +-
 .../{login/Login.tsx => landing/Landing.tsx}  | 19 ++++----
 code/client/src/ui/pages/profile/Profile.scss |  7 +++
 code/client/src/ui/pages/profile/Profile.tsx  | 44 +++++++++++++++++++
 .../components/ManageMembersDialog.tsx        | 44 +++++++++++++++++++
 .../src/ui/pages/workspaces/Workspaces.tsx    |  5 ++-
 .../components/WorkspaceContextMenu.tsx       | 29 ++++++++----
 .../workspaces/components/WorkspaceView.tsx   | 24 ++++++++--
 code/server/sql/create_tables.sql             |  9 ++--
 .../http/handlers/usersHandlers.ts            |  6 +++
 .../http/handlers/workspacesHandlers.ts       | 27 +++++++++++-
 .../http/middlewares/authMiddleware.ts        |  7 ++-
 code/server/src/controllers/http/router.ts    |  5 +--
 code/server/src/databases/memory/Memory.ts    |  4 +-
 .../src/databases/memory/MemoryUsersDB.ts     | 14 ++++--
 .../databases/postgres/PostgresResourcesDB.ts |  3 --
 .../src/databases/postgres/PostgresUsersDB.ts | 10 +++--
 code/server/src/databases/types.ts            | 20 ++++++++-
 code/server/src/services/Services.ts          | 11 ++---
 code/server/src/services/UsersService.ts      |  8 +++-
 code/server/src/services/WorkspacesService.ts |  8 ++++
 code/shared/src/users/types.ts                | 11 ++++-
 code/shared/src/workspace/types/workspace.ts  |  3 +-
 33 files changed, 330 insertions(+), 96 deletions(-)
 delete mode 100644 code/client/src/ui/contexts/auth/utils.ts
 rename code/client/src/ui/pages/{login/Login.scss => landing/Landing.scss} (93%)
 rename code/client/src/ui/pages/{login/Login.tsx => landing/Landing.tsx} (82%)
 create mode 100644 code/client/src/ui/pages/profile/Profile.scss
 create mode 100644 code/client/src/ui/pages/profile/Profile.tsx
 create mode 100644 code/client/src/ui/pages/workspace/components/ManageMembersDialog.tsx

diff --git a/code/client/src/App.tsx b/code/client/src/App.tsx
index aed182f4..d786e65e 100644
--- a/code/client/src/App.tsx
+++ b/code/client/src/App.tsx
@@ -10,8 +10,9 @@ import { WorkspaceProvider } from '@ui/contexts/workspace/WorkspaceContext';
 import Workspaces from '@ui/pages/workspaces/Workspaces';
 import { CommunicationProvider } from '@ui/contexts/communication/CommunicationContext';
 import Home from '@ui/pages/home/Home';
-import Login from '@ui/pages/login/Login';
 import AuthProvider from '@ui/contexts/auth/AuthContext';
+import Profile from '@ui/pages/profile/Profile';
+import Landing from '@ui/pages/landing/Landing';
 
 function App() {
   return (
@@ -23,8 +24,9 @@ function App() {
               <Header />
               <div className="content">
                 <Routes>
+                  <Route path="/" element={<Landing />} />
                   <Route
-                    path="/"
+                    path="/home"
                     element={
                       <>
                         <Sidebar />
@@ -32,7 +34,7 @@ function App() {
                       </>
                     }
                   />
-                  <Route path="/login" element={<Login />} />
+                  <Route path="/profile/:id" element={<Profile />} />
                   <Route
                     path="/workspaces/*"
                     element={
diff --git a/code/client/src/domain/workspaces/useWorkspaces.ts b/code/client/src/domain/workspaces/useWorkspaces.ts
index 234731e0..d33585c8 100644
--- a/code/client/src/domain/workspaces/useWorkspaces.ts
+++ b/code/client/src/domain/workspaces/useWorkspaces.ts
@@ -42,6 +42,18 @@ function useWorkspaces() {
     return await service.updateWorkspace(id, newProps);
   }
 
+  async function getWorkspaceMembers(id: string) {
+    return await service.getWorkspaceMembers(id);
+  }
+
+  async function addWorkspaceMember(id: string, email: string) {
+    return await service.addWorkspaceMember(id, email);
+  }
+
+  async function removeWorkspaceMember(id: string, email: string) {
+    return await service.removeWorkspaceMember(id, email);
+  }
+
   useSocketListeners(socket, {
     createdWorkspace: onCreateWorkspace,
     deletedWorkspace: onDeleteWorkspace,
@@ -62,6 +74,9 @@ function useWorkspaces() {
       createWorkspace,
       deleteWorkspace,
       updateWorkspace,
+      getWorkspaceMembers,
+      addWorkspaceMember,
+      removeWorkspaceMember,
     },
   };
 }
diff --git a/code/client/src/services/auth/authService.ts b/code/client/src/services/auth/authService.ts
index 69ff5d1b..b3800e64 100644
--- a/code/client/src/services/auth/authService.ts
+++ b/code/client/src/services/auth/authService.ts
@@ -1,12 +1,13 @@
-import { UserData } from '@notespace/shared/src/users/types';
+import { User, UserData } from '@notespace/shared/src/users/types';
 import { HttpCommunication } from '@services/communication/http/httpCommunication';
+import Cookies from 'js-cookie';
 
 function authService(http: HttpCommunication) {
   async function registerUser(id: string, data: UserData) {
     await http.post('/users', { id, ...data });
   }
 
-  async function getUser(id: string) {
+  async function getUser(id: string): Promise<User> {
     return await http.get(`/users/${id}`);
   }
 
@@ -16,6 +17,7 @@ function authService(http: HttpCommunication) {
 
   async function deleteUser(id: string) {
     await http.delete(`/users/${id}`);
+    Cookies.remove('token');
   }
 
   return {
diff --git a/code/client/src/services/workspace/workspaceService.ts b/code/client/src/services/workspace/workspaceService.ts
index 24fb9f72..3350fbd3 100644
--- a/code/client/src/services/workspace/workspaceService.ts
+++ b/code/client/src/services/workspace/workspaceService.ts
@@ -1,6 +1,7 @@
 import { HttpCommunication } from '@services/communication/http/httpCommunication';
 import { WorkspaceInputModel, WorkspaceMeta } from '@notespace/shared/src/workspace/types/workspace';
 import { Workspace } from '@notespace/shared/src/workspace/types/workspace';
+import { UserData } from '@notespace/shared/src/users/types';
 
 function workspaceService(http: HttpCommunication) {
   async function getWorkspace(id: string): Promise<Workspace> {
@@ -23,12 +24,28 @@ function workspaceService(http: HttpCommunication) {
     await http.put(`/workspaces/${id}`, newProps);
   }
 
+  async function getWorkspaceMembers(id: string): Promise<UserData[]> {
+    const workspace: WorkspaceMeta = await http.get(`/workspaces/${id}`);
+    return workspace.members;
+  }
+
+  async function addWorkspaceMember(id: string, email: string): Promise<void> {
+    await http.post(`/workspaces/${id}/members`, { email });
+  }
+
+  async function removeWorkspaceMember(id: string, email: string): Promise<void> {
+    await http.delete(`/workspaces/${id}/members`, { email });
+  }
+
   return {
     getWorkspace,
     getWorkspaces,
     createWorkspace,
     deleteWorkspace,
     updateWorkspace,
+    getWorkspaceMembers,
+    addWorkspaceMember,
+    removeWorkspaceMember,
   };
 }
 
diff --git a/code/client/src/ui/components/dialog/Dialog.tsx b/code/client/src/ui/components/dialog/Dialog.tsx
index 840684c1..7802b94b 100644
--- a/code/client/src/ui/components/dialog/Dialog.tsx
+++ b/code/client/src/ui/components/dialog/Dialog.tsx
@@ -21,10 +21,11 @@ interface DialogProps {
   fields: Field[];
   onSubmit: (values: { [key: string]: any }) => void;
   submitText?: string;
+  extraContent?: React.ReactNode;
   children: React.ReactNode;
 }
 
-function Dialog({ title, fields, onSubmit, submitText, children }: DialogProps) {
+function Dialog({ title, fields, onSubmit, submitText, extraContent, children }: DialogProps) {
   const [open, setOpen] = useState(false);
   const [values, setValues] = useState<{ [key: string]: any }>(
     fields.reduce((obj, item) => ({ ...obj, [item.name]: item.type === 'checkbox' ? false : '' }), {})
@@ -82,6 +83,7 @@ function Dialog({ title, fields, onSubmit, submitText, children }: DialogProps)
               />
             )
           )}
+          {extraContent}
         </DialogContent>
         <DialogActions>
           <button onClick={handleClose}>Cancel</button>
diff --git a/code/client/src/ui/components/header/Header.scss b/code/client/src/ui/components/header/Header.scss
index bb5a4291..94103245 100644
--- a/code/client/src/ui/components/header/Header.scss
+++ b/code/client/src/ui/components/header/Header.scss
@@ -11,6 +11,10 @@
   justify-content: space-between;
   align-items: center;
 
+  a {
+    padding-left: 10vh;
+  }
+
   div {
     display: flex;
     align-items: center;
diff --git a/code/client/src/ui/components/header/Header.tsx b/code/client/src/ui/components/header/Header.tsx
index d837db09..8bac00ee 100644
--- a/code/client/src/ui/components/header/Header.tsx
+++ b/code/client/src/ui/components/header/Header.tsx
@@ -6,16 +6,16 @@ function Header() {
   const { currentUser, logout } = useAuth();
   return (
     <header className="header">
-      <p></p>
+      <Link to={currentUser ? '/home' : '/'}>NoteSpace</Link>
       <div>
-        {currentUser ? (
-          <div className="account">
-            <p>{currentUser?.displayName}</p>
-            <button onClick={logout}>Logout</button>
-          </div>
-        ) : (
-          <Link to="/login">Login</Link>
-        )}
+        <div className="account">
+          {currentUser && (
+            <>
+              <Link to={`/profile/${currentUser.uid}`}>{currentUser?.displayName}</Link>
+              <button onClick={logout}>Logout</button>
+            </>
+          )}
+        </div>
       </div>
     </header>
   );
diff --git a/code/client/src/ui/components/sidebar/Sidebar.tsx b/code/client/src/ui/components/sidebar/Sidebar.tsx
index bfa26a0b..15d089ce 100644
--- a/code/client/src/ui/components/sidebar/Sidebar.tsx
+++ b/code/client/src/ui/components/sidebar/Sidebar.tsx
@@ -29,7 +29,6 @@ function Sidebar() {
             <IoMenu className="icon-menu" />
           )}
         </button>
-        <Link to="/">NoteSpace</Link>
       </div>
       <ul>
         <li>
diff --git a/code/client/src/ui/contexts/auth/AuthContext.tsx b/code/client/src/ui/contexts/auth/AuthContext.tsx
index 9d0a3863..ecf38f28 100644
--- a/code/client/src/ui/contexts/auth/AuthContext.tsx
+++ b/code/client/src/ui/contexts/auth/AuthContext.tsx
@@ -32,7 +32,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
   const loginWithProvider = async (provider: Provider) => {
     try {
       const { user } = await signInWithPopup(auth, provider);
-      await registerUser(user.uid, { username: user.displayName!, email: user.email! });
+      await registerUser(user.uid, { name: user.displayName!, email: user.email! });
       const token = await user.getIdToken();
       Cookies.set('token', token, { expires: 1, secure: true, sameSite: 'Strict' });
     } catch (e) {
@@ -56,6 +56,13 @@ export function AuthProvider({ children }: AuthProviderProps) {
     });
   }, []);
 
+  useEffect(() => {
+    console.log(currentUser);
+    if (!currentUser && window.location.pathname !== '/') {
+      window.location.href = '/';
+    }
+  }, [currentUser]);
+
   return (
     <AuthContext.Provider
       value={{
diff --git a/code/client/src/ui/contexts/auth/utils.ts b/code/client/src/ui/contexts/auth/utils.ts
deleted file mode 100644
index a8528bc5..00000000
--- a/code/client/src/ui/contexts/auth/utils.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export function validateUsername(username: string) {
-  const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
-  if (!usernameRegex.test(username)) {
-    throw new Error('Invalid username');
-  }
-}
-
-export function validateEmail(email: string) {
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  if (!emailRegex.test(email)) {
-    throw new Error('Invalid email');
-  }
-}
-
-export function validatePassword(password: string) {
-  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
-  if (!passwordRegex.test(password)) {
-    throw new Error(
-      'Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character.'
-    );
-  }
-}
diff --git a/code/client/src/ui/pages/login/Login.scss b/code/client/src/ui/pages/landing/Landing.scss
similarity index 93%
rename from code/client/src/ui/pages/login/Login.scss
rename to code/client/src/ui/pages/landing/Landing.scss
index 5bd44922..89555b4f 100644
--- a/code/client/src/ui/pages/login/Login.scss
+++ b/code/client/src/ui/pages/landing/Landing.scss
@@ -1,4 +1,4 @@
-.login {
+.landing {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -15,7 +15,7 @@
     button {
       background-color: white;
       color: black;
-      padding: 1.5vh;
+      padding: 1.5vh 3vh 1.5vh 3vh;
       font-size: larger;
       border-radius: 50px;
       border: 1px solid gray;
diff --git a/code/client/src/ui/pages/login/Login.tsx b/code/client/src/ui/pages/landing/Landing.tsx
similarity index 82%
rename from code/client/src/ui/pages/login/Login.tsx
rename to code/client/src/ui/pages/landing/Landing.tsx
index 4f7f1b6e..a3ba4268 100644
--- a/code/client/src/ui/pages/login/Login.tsx
+++ b/code/client/src/ui/pages/landing/Landing.tsx
@@ -1,22 +1,23 @@
 import { useAuth } from '@ui/contexts/auth/useAuth';
-import { FaGithub } from 'react-icons/fa6';
-import googleIcon from '@assets/images/google-icon.png';
-import './Login.scss';
-import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+import googleIcon from '@assets/images/google-icon.png';
+import { FaGithub } from 'react-icons/fa6';
+import './Landing.scss';
 
-function Login() {
+function Landing() {
   const { currentUser, loginWithGoogle, loginWithGithub } = useAuth();
   const navigate = useNavigate();
+
   useEffect(() => {
     if (currentUser) {
-      navigate('/');
+      navigate('/home');
     }
   }, [currentUser, navigate]);
 
   return (
-    <div className="login">
-      <h1>Login</h1>
+    <div className="landing">
+      <h1>Welcome to NoteSpace</h1>
       <div>
         <button onClick={loginWithGoogle}>
           Login With Google
@@ -32,4 +33,4 @@ function Login() {
   );
 }
 
-export default Login;
+export default Landing;
diff --git a/code/client/src/ui/pages/profile/Profile.scss b/code/client/src/ui/pages/profile/Profile.scss
new file mode 100644
index 00000000..dda50200
--- /dev/null
+++ b/code/client/src/ui/pages/profile/Profile.scss
@@ -0,0 +1,7 @@
+.profile {
+  button {
+    background: indianred;
+    color: white;
+    margin-top: 8vh;
+  }
+}
diff --git a/code/client/src/ui/pages/profile/Profile.tsx b/code/client/src/ui/pages/profile/Profile.tsx
new file mode 100644
index 00000000..e5e2446d
--- /dev/null
+++ b/code/client/src/ui/pages/profile/Profile.tsx
@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import useAuthService from '@services/auth/useAuthService';
+import { User } from '@notespace/shared/src/users/types';
+import { formatDate } from '@/utils/utils';
+import { useAuth } from '@ui/contexts/auth/useAuth';
+import './Profile.scss';
+
+function Profile() {
+  const { id } = useParams();
+  const { getUser, deleteUser } = useAuthService();
+  const [user, setUser] = useState<User | null>(null);
+  const { currentUser } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!id) return;
+    async function fetchUser() {
+      const user = await getUser(id!);
+      setUser(user);
+    }
+    fetchUser();
+  }, [id, getUser]);
+
+  async function onDeleteAccount() {
+    if (!currentUser || currentUser.uid !== user?.id) return;
+    await currentUser.delete();
+    await deleteUser(user.id);
+    navigate('/');
+  }
+
+  return (
+    user && (
+      <div className="profile">
+        <h2>{user.name}</h2>
+        <p>{user.email}</p>
+        <p>Joined {formatDate(user.createdAt)}</p>
+        {currentUser?.uid === user.id && <button onClick={onDeleteAccount}>Delete Account</button>}
+      </div>
+    )
+  );
+}
+
+export default Profile;
diff --git a/code/client/src/ui/pages/workspace/components/ManageMembersDialog.tsx b/code/client/src/ui/pages/workspace/components/ManageMembersDialog.tsx
new file mode 100644
index 00000000..7f92ed1c
--- /dev/null
+++ b/code/client/src/ui/pages/workspace/components/ManageMembersDialog.tsx
@@ -0,0 +1,44 @@
+import Dialog from '@ui/components/dialog/Dialog';
+import { FaCross, FaUsers } from 'react-icons/fa6';
+import { UserData } from '@notespace/shared/src/users/types';
+
+type ManageMembersDialog = {
+  members: UserData[];
+  onAddMember: (email: string) => void;
+  onRemoveMember: (email: string) => void;
+};
+
+function ManageMembersDialog({ members, onAddMember, onRemoveMember }: ManageMembersDialog) {
+  return (
+    <Dialog
+      title="Manage members in workspace"
+      fields={[{ name: 'Add new member', label: 'User email' }]}
+      onSubmit={values => {
+        onAddMember(values['Add new member']);
+      }}
+      submitText="Add Member"
+      extraContent={
+        <div>
+          <h3>Members</h3>
+          <ul>
+            {members?.map(member => (
+              <li key={member.email}>
+                <p>{member.email}</p>
+                <button onClick={() => onRemoveMember(member.email)}>
+                  <FaCross />
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      }
+    >
+      <div>
+        <FaUsers />
+        Members
+      </div>
+    </Dialog>
+  );
+}
+
+export default ManageMembersDialog;
diff --git a/code/client/src/ui/pages/workspaces/Workspaces.tsx b/code/client/src/ui/pages/workspaces/Workspaces.tsx
index 5208ffa9..27dedf33 100644
--- a/code/client/src/ui/pages/workspaces/Workspaces.tsx
+++ b/code/client/src/ui/pages/workspaces/Workspaces.tsx
@@ -8,6 +8,7 @@ import { useEffect, useState } from 'react';
 import { sortWorkspaces } from '@domain/workspaces/utils';
 import './Workspaces.scss';
 import { useCommunication } from '@ui/contexts/communication/useCommunication';
+import { UserData } from '@notespace/shared/src/users/types';
 
 function Workspaces() {
   const { workspaces, operations } = useWorkspaces();
@@ -60,7 +61,9 @@ function Workspaces() {
             }
             onDelete={() => operations.deleteWorkspace(workspace.id).catch(publishError)}
             onRename={name => operations.updateWorkspace(workspace.id, { ...workspace, name }).catch(publishError)}
-            onInvite={() => {}}
+            onGetMembers={() => operations.getWorkspaceMembers(workspace.id).catch(publishError) as Promise<UserData[]>}
+            onAddMember={email => operations.addWorkspaceMember(workspace.id, email).catch(publishError)}
+            onRemoveMember={email => operations.removeWorkspaceMember(workspace.id, email).catch(publishError)}
           />
         ))}
       </DataTable>
diff --git a/code/client/src/ui/pages/workspaces/components/WorkspaceContextMenu.tsx b/code/client/src/ui/pages/workspaces/components/WorkspaceContextMenu.tsx
index 91028a6c..67d9a7ce 100644
--- a/code/client/src/ui/pages/workspaces/components/WorkspaceContextMenu.tsx
+++ b/code/client/src/ui/pages/workspaces/components/WorkspaceContextMenu.tsx
@@ -1,26 +1,39 @@
 import PopupMenu from '@ui/components/popup-menu/PopupMenu';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { MdDelete, MdEdit } from 'react-icons/md';
-import { RiShareBoxLine } from 'react-icons/ri';
+import ManageMembersDialog from '@ui/pages/workspace/components/ManageMembersDialog';
+import { UserData } from '@notespace/shared/src/users/types';
 
 type WorkspaceContextMenuProps = {
   children: ReactNode;
-  onInvite: () => void;
   onRename: () => void;
   onDelete: () => void;
+  onGetMembers: () => Promise<UserData[]>;
+  onAddMember: (email: string) => Promise<void>;
+  onRemoveMember: (email: string) => Promise<void>;
 };
 
-function WorkspaceContextMenu({ children, onInvite, onRename, onDelete }: WorkspaceContextMenuProps) {
+function WorkspaceContextMenu({
+  children,
+  onRename,
+  onDelete,
+  onGetMembers,
+  onAddMember,
+  onRemoveMember,
+}: WorkspaceContextMenuProps) {
+  const [members, setMembers] = useState<UserData[]>([]);
+
+  useEffect(() => {
+    onGetMembers().then(setMembers);
+  }, [onGetMembers]);
+
   return (
     <PopupMenu item={children}>
       <button onClick={onRename}>
         <MdEdit />
         Rename
       </button>
-      <button onClick={onInvite}>
-        <RiShareBoxLine />
-        Invite
-      </button>
+      <ManageMembersDialog members={members} onAddMember={onAddMember} onRemoveMember={onRemoveMember} />
       <button onClick={onDelete}>
         <MdDelete />
         Delete
diff --git a/code/client/src/ui/pages/workspaces/components/WorkspaceView.tsx b/code/client/src/ui/pages/workspaces/components/WorkspaceView.tsx
index e697e852..4829d9e9 100644
--- a/code/client/src/ui/pages/workspaces/components/WorkspaceView.tsx
+++ b/code/client/src/ui/pages/workspaces/components/WorkspaceView.tsx
@@ -5,6 +5,7 @@ import WorkspaceContextMenu from '@ui/pages/workspaces/components/WorkspaceConte
 import { Checkbox } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { formatDate } from '@/utils/utils';
+import { UserData } from '@notespace/shared/src/users/types';
 
 type WorkspacePreviewProps = {
   workspace: WorkspaceMeta;
@@ -12,10 +13,21 @@ type WorkspacePreviewProps = {
   onSelect: (value: boolean) => void;
   onDelete: () => void;
   onRename: (title: string) => void;
-  onInvite: () => void;
+  onGetMembers: () => Promise<UserData[]>;
+  onAddMember: (email: string) => Promise<void>;
+  onRemoveMember: (email: string) => Promise<void>;
 };
 
-function WorkspaceView({ workspace, selected, onSelect, onDelete, onRename, onInvite }: WorkspacePreviewProps) {
+function WorkspaceView({
+  workspace,
+  selected,
+  onSelect,
+  onDelete,
+  onRename,
+  onGetMembers,
+  onAddMember,
+  onRemoveMember,
+}: WorkspacePreviewProps) {
   const { component, isEditing, setIsEditing } = useEditing(workspace.name, onRename);
   const [isSelected, setSelected] = useState(selected);
 
@@ -40,7 +52,13 @@ function WorkspaceView({ workspace, selected, onSelect, onDelete, onRename, onIn
   return isEditing ? (
     WorkspaceComponent
   ) : (
-    <WorkspaceContextMenu onInvite={onInvite} onRename={() => setIsEditing(true)} onDelete={onDelete}>
+    <WorkspaceContextMenu
+      onRename={() => setIsEditing(true)}
+      onDelete={onDelete}
+      onGetMembers={onGetMembers}
+      onAddMember={onAddMember}
+      onRemoveMember={onRemoveMember}
+    >
       <Link to={`/workspaces/${workspace.id}`}>{WorkspaceComponent}</Link>
     </WorkspaceContextMenu>
   );
diff --git a/code/server/sql/create_tables.sql b/code/server/sql/create_tables.sql
index dec1a6f7..772e9dfd 100644
--- a/code/server/sql/create_tables.sql
+++ b/code/server/sql/create_tables.sql
@@ -9,7 +9,7 @@ begin;
         name text not null,
         private boolean not null default false,
         created_at timestamp not null default now(),
-        members char(16)[] not null default '{}'::char(16)[] -- array of user ids
+        members char(16)[] not null default '{}'::char(16)[] references "user"(id)
     );
 
     create table if not exists resource (
@@ -20,13 +20,14 @@ begin;
         created_at timestamp not null default now(),
         updated_at timestamp not null default now(),
         parent char(16) default null references resource(id) on delete cascade,
-        children char(16)[] not null default '{}'::char(16)[] -- array of resource ids
+        children char(16)[] not null default '{}'::char(16)[] references resource(id)
     );
 
     create table if not exists "user" (
         id char(28) primary key,
-        username text not null,
-        email text not null unique
+        name text not null,
+        email text not null unique,
+        created_at timestamp not null default now()
     );
 
 commit;
\ No newline at end of file
diff --git a/code/server/src/controllers/http/handlers/usersHandlers.ts b/code/server/src/controllers/http/handlers/usersHandlers.ts
index 10ababf9..19854b21 100644
--- a/code/server/src/controllers/http/handlers/usersHandlers.ts
+++ b/code/server/src/controllers/http/handlers/usersHandlers.ts
@@ -40,11 +40,17 @@ function usersHandlers(service: UsersService) {
     httpResponse.noContent(res).send();
   };
 
+  const getUsers = async (req: Request, res: Response) => {
+    const users = await service.getUsers();
+    httpResponse.ok(res).json(users);
+  };
+
   const router = PromiseRouter({ mergeParams: true });
   router.post('/', registerUser);
   router.get('/:id', getUser);
   router.put('/:id', updateUser);
   router.delete('/:id', deleteUser);
+  router.get('/', getUsers);
 
   return router;
 }
diff --git a/code/server/src/controllers/http/handlers/workspacesHandlers.ts b/code/server/src/controllers/http/handlers/workspacesHandlers.ts
index 43cb2e05..8f589473 100644
--- a/code/server/src/controllers/http/handlers/workspacesHandlers.ts
+++ b/code/server/src/controllers/http/handlers/workspacesHandlers.ts
@@ -14,11 +14,12 @@ function workspacesHandlers(services: Services, io: Server) {
     if (isPrivate === undefined) throw new InvalidParameterError('Workspace visibility is required');
 
     const id = await services.workspaces.createWorkspace(name, isPrivate);
+    const member = { email: req.user!.email, name: req.user!.name };
     const workspace: WorkspaceMeta = {
       id,
       name,
       createdAt: new Date().toISOString(),
-      members: [''],
+      members: [member],
       isPrivate,
     };
     io.emit('createdWorkspace', workspace);
@@ -60,12 +61,36 @@ function workspacesHandlers(services: Services, io: Server) {
     httpResponse.noContent(res).send();
   };
 
+  const addMemberToWorkspace = async (req: Request, res: Response) => {
+    const { wid } = req.params;
+    if (!wid) throw new InvalidParameterError('Workspace id is required');
+
+    const { email } = req.body;
+    if (!email) throw new InvalidParameterError('Email is required');
+
+    await services.workspaces.addWorkspaceMember(wid, email);
+    httpResponse.noContent(res).send();
+  };
+
+  const removeMemberFromWorkspace = async (req: Request, res: Response) => {
+    const { wid } = req.params;
+    if (!wid) throw new InvalidParameterError('Workspace id is required');
+
+    const { email } = req.body;
+    if (!email) throw new InvalidParameterError('Email is required');
+
+    await services.workspaces.removeWorkspaceMember(wid, email);
+    httpResponse.noContent(res).send();
+  };
+
   const router = PromiseRouter();
   router.post('/', createWorkspace);
   router.get('/', getWorkspaces);
   router.get('/:wid', getWorkspace);
   router.put('/:wid', updateWorkspace);
   router.delete('/:wid', deleteWorkspace);
+  router.post('/:wid/members', addMemberToWorkspace);
+  router.delete('/:wid/members', removeMemberFromWorkspace);
 
   // sub-routes for resources (documents and folders)
   router.use('/:wid', resourcesHandlers(services.resources, io));
diff --git a/code/server/src/controllers/http/middlewares/authMiddleware.ts b/code/server/src/controllers/http/middlewares/authMiddleware.ts
index 91c9ea9e..ae477f3c 100644
--- a/code/server/src/controllers/http/middlewares/authMiddleware.ts
+++ b/code/server/src/controllers/http/middlewares/authMiddleware.ts
@@ -1,12 +1,13 @@
 import admin from 'firebase-admin';
 import { NextFunction, Request, Response } from 'express';
 import { httpResponse } from '@controllers/http/utils/httpResponse';
+import { LoggedUser } from '@notespace/shared/src/users/types';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Express {
     interface Request {
-      user?: admin.auth.DecodedIdToken;
+      user?: LoggedUser;
     }
   }
 }
@@ -17,7 +18,9 @@ export async function verifyToken(req: Request, res: Response, next: NextFunctio
     return httpResponse.unauthorized(res).send();
   }
   try {
-    req.user = await admin.auth().verifyIdToken(token);
+    const idToken = await admin.auth().verifyIdToken(token);
+    const { uid, displayName, email } = await admin.auth().getUser(idToken.uid);
+    req.user = { id: uid, email: email!, name: displayName! };
     next();
   } catch (error) {
     console.error('Error verifying token:', error);
diff --git a/code/server/src/controllers/http/router.ts b/code/server/src/controllers/http/router.ts
index 06766b90..9ee827f2 100644
--- a/code/server/src/controllers/http/router.ts
+++ b/code/server/src/controllers/http/router.ts
@@ -14,9 +14,8 @@ export default function (services: Services, io: Server) {
   const router = PromiseRouter();
   router.use(express.urlencoded({ extended: true }));
 
-  router.use('/users', usersHandlers(services.users));
-  router.use('/workspaces', workspacesHandlers(services, io));
-  router.get('/protected', verifyToken, (req, res) => res.send({ message: 'Protected route' }));
+  router.use('/users', verifyToken, usersHandlers(services.users));
+  router.use('/workspaces', verifyToken, workspacesHandlers(services, io));
   router.use(errorMiddleware);
   return router;
 }
diff --git a/code/server/src/databases/memory/Memory.ts b/code/server/src/databases/memory/Memory.ts
index 0ff2f668..f8bf5501 100644
--- a/code/server/src/databases/memory/Memory.ts
+++ b/code/server/src/databases/memory/Memory.ts
@@ -1,5 +1,5 @@
 import { Resource } from '@notespace/shared/src/workspace/types/resource';
-import { UserData } from '@notespace/shared/src/users/types';
+import { User } from '@notespace/shared/src/users/types';
 
 export interface WorkspaceStorage {
   id: string;
@@ -11,7 +11,7 @@ export interface WorkspaceStorage {
 }
 
 export class Memory {
-  static users: Record<string, UserData> = {};
+  static users: Record<string, User> = {};
   static workspaces: Record<string, WorkspaceStorage> = {};
 
   static reset() {
diff --git a/code/server/src/databases/memory/MemoryUsersDB.ts b/code/server/src/databases/memory/MemoryUsersDB.ts
index 0842867f..18d881de 100644
--- a/code/server/src/databases/memory/MemoryUsersDB.ts
+++ b/code/server/src/databases/memory/MemoryUsersDB.ts
@@ -1,14 +1,18 @@
 import { UsersRepository } from '@databases/types';
-import { UserData } from '@notespace/shared/src/users/types';
+import { User, UserData } from '@notespace/shared/src/users/types';
 import { Memory } from '@databases/memory/Memory';
 import { NotFoundError } from '@domain/errors/errors';
 
 export class MemoryUsersDB implements UsersRepository {
   async createUser(id: string, data: UserData): Promise<void> {
-    Memory.users[id] = data;
+    Memory.users[id] = {
+      id,
+      createdAt: new Date().toISOString(),
+      ...data,
+    };
   }
 
-  async getUser(id: string): Promise<UserData> {
+  async getUser(id: string): Promise<User> {
     const user = Memory.users[id];
     if (!user) throw new NotFoundError(`User not found`);
     return user;
@@ -23,4 +27,8 @@ export class MemoryUsersDB implements UsersRepository {
     if (!Memory.users[id]) throw new NotFoundError(`User not found`);
     delete Memory.users[id];
   }
+
+  async getUsers(): Promise<User[]> {
+    return Object.values(Memory.users);
+  }
 }
diff --git a/code/server/src/databases/postgres/PostgresResourcesDB.ts b/code/server/src/databases/postgres/PostgresResourcesDB.ts
index 1d1082fc..48ade961 100644
--- a/code/server/src/databases/postgres/PostgresResourcesDB.ts
+++ b/code/server/src/databases/postgres/PostgresResourcesDB.ts
@@ -12,19 +12,16 @@ export class PostgresResourcesDB implements ResourcesRepository {
       name,
       type,
     };
-
     const results = await sql`
         insert into resource ${sql(resource)} 
         returning id
     `;
-
     if (isEmpty(results)) throw new Error('Resource not created');
     return results[0].id;
   }
 
   async getResource(id: string): Promise<Resource> {
     const results: Resource[] = await sql`select *from resource where id = ${id}`;
-
     if (isEmpty(results)) throw new NotFoundError('Resource not found');
     return results[0];
   }
diff --git a/code/server/src/databases/postgres/PostgresUsersDB.ts b/code/server/src/databases/postgres/PostgresUsersDB.ts
index 3665443a..fea77c59 100644
--- a/code/server/src/databases/postgres/PostgresUsersDB.ts
+++ b/code/server/src/databases/postgres/PostgresUsersDB.ts
@@ -1,5 +1,5 @@
 import { UsersRepository } from '@databases/types';
-import { UserData } from '@notespace/shared/src/users/types';
+import { User, UserData } from '@notespace/shared/src/users/types';
 import sql from '@databases/postgres/config';
 import { isEmpty } from 'lodash';
 import { NotFoundError } from '@domain/errors/errors';
@@ -9,8 +9,8 @@ export class PostgresUsersDB implements UsersRepository {
     await sql`insert into "user" ${sql({ id, ...data })}`;
   }
 
-  async getUser(id: string): Promise<UserData> {
-    const results: UserData[] = await sql`select * from "user" where id = ${id}`;
+  async getUser(id: string): Promise<User> {
+    const results: User[] = await sql`select * from "user" where id = ${id}`;
     if (isEmpty(results)) throw new NotFoundError('User not found');
     return results[0];
   }
@@ -33,4 +33,8 @@ export class PostgresUsersDB implements UsersRepository {
     `;
     if (isEmpty(results)) throw new NotFoundError('User not found');
   }
+
+  async getUsers(): Promise<User[]> {
+    return await sql`select * from "user"`;
+  }
 }
diff --git a/code/server/src/databases/types.ts b/code/server/src/databases/types.ts
index 4573c00c..e232556c 100644
--- a/code/server/src/databases/types.ts
+++ b/code/server/src/databases/types.ts
@@ -2,7 +2,7 @@ import { DocumentContent } from '@notespace/shared/src/workspace/types/document'
 import { Operation } from '@notespace/shared/src/document/types/operations';
 import { ResourceType, Resource } from '@notespace/shared/src/workspace/types/resource';
 import { WorkspaceMeta } from '@notespace/shared/src/workspace/types/workspace';
-import { UserData } from '@notespace/shared/src/users/types';
+import { User, UserData } from '@notespace/shared/src/users/types';
 
 export interface DocumentsRepository {
   /**
@@ -101,6 +101,18 @@ export interface WorkspacesRepository {
    * @param id
    */
   deleteWorkspace: (id: string) => Promise<void>;
+  /**
+   * Add a member to a workspace
+   * @param wid
+   * @param email
+   */
+  addWorkspaceMember: (wid: string, email: string) => Promise<void>;
+  /**
+   * Remove a member from a workspace
+   * @param wid
+   * @param email
+   */
+  removeWorkspaceMember: (wid: string, email: string) => Promise<void>;
 }
 
 export interface UsersRepository {
@@ -114,7 +126,7 @@ export interface UsersRepository {
    * Get a user from the database
    * @param id
    */
-  getUser: (id: string) => Promise<UserData>;
+  getUser: (id: string) => Promise<User>;
   /**
    * Update a user in the database
    * @param id
@@ -126,6 +138,10 @@ export interface UsersRepository {
    * @param id
    */
   deleteUser: (id: string) => Promise<void>;
+  /**
+   * Get all users from the database
+   */
+  getUsers: () => Promise<User[]>;
 }
 
 export interface Databases {
diff --git a/code/server/src/services/Services.ts b/code/server/src/services/Services.ts
index 5407082c..ba2587bf 100644
--- a/code/server/src/services/Services.ts
+++ b/code/server/src/services/Services.ts
@@ -5,18 +5,15 @@ import { DocumentsService } from '@services/DocumentsService';
 import { UsersService } from '@services/UsersService';
 
 export class Services {
-  private readonly databases: Databases;
-
   readonly resources: ResourcesService;
   readonly workspaces: WorkspacesService;
   readonly documents: DocumentsService;
   readonly users: UsersService;
 
   constructor(databases: Databases) {
-    this.databases = databases;
-    this.resources = new ResourcesService(this.databases.resources, this.databases.documents);
-    this.workspaces = new WorkspacesService(this.databases.workspaces, this.databases.documents);
-    this.documents = new DocumentsService(this.databases.documents, this.databases.resources);
-    this.users = new UsersService(this.databases.users);
+    this.resources = new ResourcesService(databases.resources, databases.documents);
+    this.workspaces = new WorkspacesService(databases.workspaces, databases.documents);
+    this.documents = new DocumentsService(databases.documents, databases.resources);
+    this.users = new UsersService(databases.users);
   }
 }
diff --git a/code/server/src/services/UsersService.ts b/code/server/src/services/UsersService.ts
index 7e62cdb5..e8fc6243 100644
--- a/code/server/src/services/UsersService.ts
+++ b/code/server/src/services/UsersService.ts
@@ -1,5 +1,5 @@
 import { UsersRepository } from '@databases/types';
-import { UserData } from '@notespace/shared/src/users/types';
+import { User, UserData } from '@notespace/shared/src/users/types';
 
 export class UsersService {
   private readonly users: UsersRepository;
@@ -12,7 +12,7 @@ export class UsersService {
     await this.users.createUser(id, data);
   }
 
-  async getUser(id: string): Promise<UserData> {
+  async getUser(id: string): Promise<User> {
     return await this.users.getUser(id);
   }
 
@@ -23,4 +23,8 @@ export class UsersService {
   async deleteUser(id: string): Promise<void> {
     await this.users.deleteUser(id);
   }
+
+  async getUsers(): Promise<User[]> {
+    return await this.users.getUsers();
+  }
 }
diff --git a/code/server/src/services/WorkspacesService.ts b/code/server/src/services/WorkspacesService.ts
index a54bd88a..be809246 100644
--- a/code/server/src/services/WorkspacesService.ts
+++ b/code/server/src/services/WorkspacesService.ts
@@ -36,4 +36,12 @@ export class WorkspacesService {
   async getResources(wid: string) {
     return await this.workspaces.getResources(wid);
   }
+
+  async addWorkspaceMember(wid: string, email: string) {
+    await this.workspaces.addWorkspaceMember(wid, email);
+  }
+
+  async removeWorkspaceMember(wid: string, email: string) {
+    await this.workspaces.removeWorkspaceMember(wid, email);
+  }
 }
diff --git a/code/shared/src/users/types.ts b/code/shared/src/users/types.ts
index e009ca84..207dfaba 100644
--- a/code/shared/src/users/types.ts
+++ b/code/shared/src/users/types.ts
@@ -1,4 +1,13 @@
 export type UserData = {
-  username: string;
+  name: string;
   email: string;
 };
+
+export type User = UserData & {
+  id: string;
+  createdAt: string;
+};
+
+export type LoggedUser = UserData & {
+  id: string;
+};
diff --git a/code/shared/src/workspace/types/workspace.ts b/code/shared/src/workspace/types/workspace.ts
index 8296c16b..66cd7396 100644
--- a/code/shared/src/workspace/types/workspace.ts
+++ b/code/shared/src/workspace/types/workspace.ts
@@ -1,10 +1,11 @@
 import { Resource } from "./resource";
+import { UserData } from "../../users/types";
 
 export type WorkspaceMeta = {
   name: string;
   id: string;
   createdAt: string;
-  members: string[];
+  members: UserData[];
   isPrivate: boolean;
 };