Merge pull request #29 from igh9410/dev

Implemented custom sign up including frontend

Author: igh9410

backend/internal/common/validation.go

@@ -9,18 +9,6 @@ import (
 	"github.com/google/uuid"
 )
 
-/*
-func EmailValidator(c *gin.Context) (string, error) {
-	// Extract the email parameter from the request context
-	email, exists := c.Get("email")
-	if !exists {
-		c.JSON(http.StatusBadRequest, gin.H{"error": "Email does not exist in the context"})
-		return "", nil
-	}
-	log.Println("Email: ", email)
-	return email.(string), nil
-}*/
-
 func ChatRoomIDValidator(c *gin.Context) (uuid.UUID, error) {
 	// Extract the id parameter from the request context
 	chatRoomIDStr := c.Param("id")
@@ -35,25 +23,6 @@ func ChatRoomIDValidator(c *gin.Context) (uuid.UUID, error) {
 	return chatRoomID, nil
 }
 
-/*
-func UserIDValidator(c *gin.Context) (uuid.UUID, error) {
-
-	userIDStr, exists := c.Get("user_id")
-	if !exists {
-		c.JSON(http.StatusBadRequest, gin.H{"error": "User ID does not exist in the context"})
-		return uuid.Nil, nil
-	}
-
-	// Validate the UUID format
-	userID, err := uuid.Parse(userIDStr.(string))
-	if err != nil {
-		c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid UUID format"})
-		return uuid.Nil, err
-	}
-	log.Println("User ID: ", userID)
-	return userID, nil
-} */
-
 func EmailValidator(email interface{}) (string, error) {
 	emailStr, ok := email.(string)
 	if !ok {

backend/internal/user/handler.go

@@ -45,13 +45,14 @@ func (h *Handler) CreateUser(c *gin.Context) {
 		return
 	}
 
-	userID, err := common.UserIDValidator(c)
+	userID, err := common.UserIDValidator(c.MustGet("user_id"))
+	log.Println("User ID: ", userID)
 	if err != nil {
 		log.Printf("Error occured with user ID %v: %v", userID, err.Error())
 		return
 	}
 
-	userEmail, err := common.EmailValidator(c)
+	userEmail, err := common.EmailValidator(c.MustGet("email"))
 	if err != nil {
 		log.Printf("Error occured with user email %v: %v", userEmail, err.Error())
 		return

frontend/src/features/user/api/userApi.ts

@@ -4,6 +4,7 @@ import { User } from '../types';
 import { getAccessToken } from '@utils';
 
 const userCheckURL = '/api/users/check';
+const signUpURL = '/api/users/register';
 
 export async function fetchUserFn(): Promise<User | null> {
   let accessToken = '';
@@ -38,3 +39,33 @@ export async function fetchUserFn(): Promise<User | null> {
     throw error;
   }
 }
+
+export async function signUpFn({ username }: { username: string }) {
+  try {
+    // Retrieve the access token
+    const accessToken = await getAccessToken();
+    console.log('Access token:', accessToken);
+
+    const userData: { username: string } = {
+      username,
+    };
+
+    const headers = {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${accessToken}`, // Include the access token in the Authorization header
+    };
+
+    const response = await axiosInstance.post(
+      signUpURL,
+      JSON.stringify(userData),
+      { headers }
+    );
+
+    console.log('User created');
+
+    return response.data;
+  } catch (error) {
+    console.error('Error:', error);
+    // Handle any errors that occur during the token retrieval or the POST request
+  }
+}

frontend/src/features/user/components/SignUpForm.module.scss

@@ -53,3 +53,9 @@
 #signupForm button:hover {
   background-color: #4752c4;
 }
+
+.error {
+  color: #dc3545;
+  font-size: 1rem;
+  margin-top: 0.25rem; /* 4px */
+}

frontend/src/features/user/components/SignUpForm.tsx

@@ -1,8 +1,29 @@
-import React, { ChangeEvent, useState } from 'react';
+import React, { ChangeEvent, useRef, useState } from 'react';
 import styles from './SignUpForm.module.scss';
+import { Form } from 'react-router-dom';
+import { useSignUp } from '@hooks';
 
 export function SignUpForm() {
+  const { signUp } = useSignUp();
   const [imagePreviewUrl, setImagePreviewUrl] = useState('');
+  const [usernameError, setUsernameError] = useState(''); // State for username error message
+  const usernameRef = useRef<HTMLInputElement | null>(null);
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // You can now use the username state directly
+    // Accessing the username value
+    const username = usernameRef.current?.value;
+
+    if (!username) {
+      setUsernameError('Username is required'); // Set error message
+      return;
+    }
+
+    // Reset error message if username is provided
+    setUsernameError('');
+    signUp({ username });
+  };
 
   const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
@@ -15,11 +36,15 @@ export function SignUpForm() {
   };
   return (
     <div className={styles.signupFormContainer}>
-      <form id={styles.signupForm}>
+      <Form method="POST" id={styles.signupForm} onSubmit={handleFormSubmit}>
         <h2>Sign Up</h2>
         <div className={styles.formGroup}>
           <label htmlFor="username">Username (required)</label>
-          <input type="text" id="username" name="username" />
+          <input type="text" id="username" name="username" ref={usernameRef} />
+          {usernameError && (
+            <div className={styles.error}>{usernameError}</div>
+          )}{' '}
+          {/* Display error message */}
         </div>
         <div className={styles.formGroup}>
           <label htmlFor="profileImage">Profile Image (optional)</label>
@@ -42,7 +67,7 @@ export function SignUpForm() {
           )}
         </div>
         <button type="submit">Sign Up</button>
-      </form>
+      </Form>
     </div>
   );
 }

frontend/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useWebSocketConnection';
 export * from './useChatMessages';
 export * from './useUsers';
+export * from './useSignUp';

frontend/src/hooks/useSignUp.tsx

@@ -0,0 +1,28 @@
+import { signUpFn } from '@features/user';
+import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+
+export const useSignUp = () => {
+  const navigate = useNavigate();
+  const {
+    mutate: signUp,
+    isLoading,
+    error,
+  } = useMutation(signUpFn, {
+    onSuccess: () => {
+      // Success actions
+      navigate('/');
+    },
+    onError: (error) => {
+      // Error actions
+      console.log('Sign Up Failed');
+      console.error('Error: ', error);
+    },
+  });
+
+  return {
+    signUp,
+    isLoading,
+    error,
+  };
+};