Implemented Users in Backend

Author: rcosta358

code/client/src/domain/editor/fugue/Fugue.ts

@@ -118,7 +118,7 @@ export class Fugue {
    */
   deleteLocal(selection: Selection): DeleteOperation[] {
     const nodes = Array.from(this.traverseBySelection(selection));
-    const cursor = {...selection.start}
+    const cursor = { ...selection.start };
     return nodes.map(node => {
       if (node.value === '\n') {
         cursor.line++;

code/client/src/domain/editor/slate/operations/input.ts

@@ -1,7 +1,7 @@
 import { Editor } from 'slate';
 import { ReactEditor } from 'slate-react';
 import CustomEditor from '@domain/editor/slate/CustomEditor';
-import {isEqual, min} from 'lodash';
+import { isEqual, min } from 'lodash';
 import { getKeyFromInputEvent } from '@domain/editor/slate/utils/domEvents';
 import { getSelection, isSelected } from '@domain/editor/slate/utils/selection';
 import { Cursor, emptyCursor } from '@domain/editor/cursor';
@@ -20,13 +20,13 @@ export default (editor: Editor, connector: InputConnector, onFormat: (mark: Inli
     if (!key) return;
 
     const selection = getSelection(editor);
-    console.log("Selection: ", selection)
-    const cursor = min([{...selection.start}, {...selection.end}]) as Cursor; // always use the start of the selection
-    console.log("Initial Cursor: ", cursor);
+    console.log('Selection: ', selection);
+    const cursor = min([{ ...selection.start }, { ...selection.end }]) as Cursor; // always use the start of the selection
+    console.log('Initial Cursor: ', cursor);
     // if there is a selection, delete the selected text
     if (isSelected(editor)) connector.deleteSelection(selection);
-    console.log("Selection after deletion: ", getSelection(editor));
-    console.log("Cursor after deletion: ", cursor);
+    console.log('Selection after deletion: ', getSelection(editor));
+    console.log('Cursor after deletion: ', cursor);
     switch (key) {
       case 'Enter':
         onEnter(cursor);
@@ -81,7 +81,7 @@ export default (editor: Editor, connector: InputConnector, onFormat: (mark: Inli
    */
   function onKey(key: string, cursor: Cursor) {
     const styles = CustomEditor.getMarks(editor) as InlineStyle[];
-    console.log("Cursor: ", cursor)
+    console.log('Cursor: ', cursor);
     connector.insertCharacter(key, cursor, styles);
   }
 

code/client/src/services/auth/authService.ts

@@ -0,0 +1,34 @@
+import { UserData } from '@notespace/shared/src/users/types';
+import { HttpCommunication } from '@services/communication/http/httpCommunication';
+
+function authService(http: HttpCommunication) {
+  async function registerUser(id: string, data: UserData) {
+    await http.post('/users', { id, ...data });
+  }
+
+  async function registerUserOAuth(id: string, data: UserData) {
+    await http.post('/users?oauth=true', { id, ...data });
+  }
+
+  async function getUser(id: string) {
+    return await http.get(`/users/${id}`);
+  }
+
+  async function updateUser(id: string, newProps: Partial<UserData>) {
+    await http.put(`/users/${id}`, { id, ...newProps });
+  }
+
+  async function deleteUser(id: string) {
+    await http.delete(`/users/${id}`);
+  }
+
+  return {
+    registerUser,
+    registerUserOAuth,
+    getUser,
+    updateUser,
+    deleteUser,
+  };
+}
+
+export default authService;

code/client/src/services/auth/useAuthService.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+import { useCommunication } from '@ui/contexts/communication/useCommunication';
+import authService from '@services/auth/authService';
+
+function useAuthService() {
+  const { http } = useCommunication();
+  return useMemo(() => authService(http), [http]);
+}
+
+export default useAuthService;

code/client/src/services/communication/http/httpCommunication.ts

@@ -4,7 +4,7 @@ export interface HttpCommunication {
   post: (url: string, data?: any) => Promise<any>;
   get: (url: string) => Promise<any>;
   put: (url: string, data?: any) => Promise<any>;
-  delete: (url: string) => Promise<any>;
+  delete: (url: string, data?: any) => Promise<any>;
 }
 
 async function get(url: string) {
@@ -19,8 +19,8 @@ async function put(url: string, body: any) {
   return request(url, 'PUT', body);
 }
 
-async function _delete(url: string) {
-  return request(url, 'DELETE');
+async function del(url: string, body: any) {
+  return request(url, 'DELETE', body);
 }
 
 const request = async (url: string, method: string, body?: any) => {
@@ -43,5 +43,5 @@ export const httpCommunication: HttpCommunication = {
   post,
   get,
   put,
-  delete: _delete,
+  delete: del,
 };

code/client/src/ui/components/header/Header.tsx

@@ -1,14 +1,21 @@
 import './Header.scss';
 import { useAuth } from '@ui/contexts/auth/useAuth';
+import { Link } from 'react-router-dom';
 
 function Header() {
   const { currentUser, logout } = useAuth();
   return (
     <header className="header">
       <p></p>
       <div>
-        <p>{currentUser?.email}</p>
-        <button onClick={logout}>Logout</button>
+        {currentUser ? (
+          <>
+            <p>{currentUser?.email}</p>
+            <button onClick={logout}>Logout</button>
+          </>
+        ) : (
+          <Link to="/login">Login</Link>
+        )}
       </div>
     </header>
   );

code/client/src/ui/contexts/auth/AuthContext.tsx

@@ -1,31 +1,33 @@
-import { auth, googleAuthProvider, githubAuthProvider } from '@config';
+import { auth, githubAuthProvider, googleAuthProvider } from '@config';
 import { createContext, ReactNode, useEffect, useState } from 'react';
 import {
-  signInWithPopup,
   createUserWithEmailAndPassword,
   signInWithEmailAndPassword,
+  signInWithPopup,
   signOut,
   updateProfile,
   User,
-  UserCredential,
 } from 'firebase/auth';
+import { validateEmail, validatePassword, validateUsername } from '@ui/contexts/auth/utils';
+import useError from '@ui/contexts/error/useError';
+import useAuthService from '@services/auth/useAuthService';
 
 export type AuthContextType = {
   currentUser: User | null;
-  login: (email: string, password: string) => Promise<UserCredential>;
-  loginWithGoogle: () => Promise<UserCredential>;
-  loginWithGithub: () => Promise<UserCredential>;
-  signup: (email: string, password: string) => Promise<UserCredential>;
+  login: (email: string, password: string) => Promise<void>;
+  loginWithGoogle: () => Promise<void>;
+  loginWithGithub: () => Promise<void>;
+  signup: (username: string, email: string, password: string) => Promise<void>;
   logout: () => Promise<void>;
   updateUserProfile: (user: User, profile: UserProfile) => Promise<void>;
 };
 
 export const AuthContext = createContext<AuthContextType>({
   currentUser: null,
-  login: async () => ({}) as UserCredential,
-  loginWithGoogle: async () => ({}) as UserCredential,
-  loginWithGithub: async () => ({}) as UserCredential,
-  signup: async () => ({}) as UserCredential,
+  login: async () => {},
+  loginWithGoogle: async () => {},
+  loginWithGithub: async () => {},
+  signup: async () => {},
   logout: async () => {},
   updateUserProfile: async () => {},
 });
@@ -42,30 +44,51 @@ type UserProfile = {
 export function AuthProvider({ children }: AuthProviderProps) {
   const [currentUser, setCurrentUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
+  const { publishError } = useError();
+  const { registerUser, registerUserOAuth } = useAuthService();
 
-  function signup(email: string, password: string) {
-    return createUserWithEmailAndPassword(auth, email, password);
-  }
+  const handleAsyncAction = async (action: () => Promise<any>) => {
+    try {
+      return await action();
+    } catch (e) {
+      console.log(e);
+      publishError(e as Error);
+    }
+  };
 
-  function login(email: string, password: string) {
-    return signInWithEmailAndPassword(auth, email, password);
-  }
+  const signup = (username: string, email: string, password: string) =>
+    handleAsyncAction(async () => {
+      validateUsername(username);
+      validateEmail(email);
+      validatePassword(password);
+      const { user } = await createUserWithEmailAndPassword(auth, email, password);
+      await registerUser(user.uid, { username, email });
+    });
 
-  function logout() {
-    return signOut(auth);
-  }
+  const login = (email: string, password: string) =>
+    handleAsyncAction(async () => {
+      return signInWithEmailAndPassword(auth, email, password)
+        .catch(() => {
+          throw new Error('Invalid credentials');
+        })
+        .then(console.log);
+    });
 
-  function updateUserProfile(user: User, profile: UserProfile) {
-    return updateProfile(user, profile);
-  }
+  const logout = () => handleAsyncAction(() => signOut(auth));
 
-  function loginWithGoogle() {
-    return signInWithPopup(auth, googleAuthProvider);
-  }
+  const updateUserProfile = (user: User, profile: UserProfile) => updateProfile(user, profile);
 
-  function loginWithGithub() {
-    return signInWithPopup(auth, githubAuthProvider);
-  }
+  const loginWithGoogle = () =>
+    handleAsyncAction(async () => {
+      const { user } = await signInWithPopup(auth, googleAuthProvider);
+      await registerUserOAuth(user.uid, { username: user.displayName!, email: user.email! });
+    });
+
+  const loginWithGithub = () =>
+    handleAsyncAction(async () => {
+      const { user } = await signInWithPopup(auth, githubAuthProvider);
+      await registerUserOAuth(user.uid, { username: user.displayName!, email: user.email! });
+    });
 
   useEffect(() => {
     return auth.onAuthStateChanged(user => {

code/client/src/ui/contexts/auth/utils.ts

@@ -0,0 +1,22 @@
+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.'
+    );
+  }
+}

code/client/src/ui/pages/auth/signup/Signup.tsx

@@ -1,3 +1,4 @@
+import { FormEvent } from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import TextField from '@mui/material/TextField';
 import OAuth from '@ui/pages/auth/components/OAuth';
@@ -7,10 +8,9 @@ import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
-import { FormEvent, useState } from 'react';
-import '../Auth.scss';
 import { useAuth } from '@ui/contexts/auth/useAuth';
 import useError from '@ui/contexts/error/useError';
+import '../Auth.scss';
 
 function Signup() {
   const navigate = useNavigate();

code/server/sql/clean_tables.sql

@@ -1,5 +1,6 @@
 begin;
 
+    delete from "user";
     delete from resource;
     delete from workspace;