Merge pull request NCUAppTeam#158 from boyiliu1007/signup

1989ONCE · web-flow · commit 7da0395f549b · 2025-05-02T21:39:41.000+08:00
feat: signup procedure
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/backend/user/Controllers/UserController.ts b/src/backend/user/Controllers/UserController.ts
@@ -3,7 +3,7 @@ import { supabase } from "../../../utils/supabase";
 
 import User, { DBUser } from '../Entities/User';
 import UserService from '../Services/UserService';
-
+import UserSignupData from "../Entities/UserSignupData";
 
 const USER_TABLE_NAME = "members"
 
@@ -111,6 +111,87 @@ export default class UserController {
 
         return user
     }
+    
+    /**
+     * Create a new user 
+     * (it will create a new row in supabase users table and a new row in members table
+     * the supabse user table is used for authentication, and the members table is used for user information
+     * )
+     * 
+     * @usage userController.createUser(<PARAMS>).then(
+     *          (user: User) => { ... }
+     *        )
+     * 
+     * @param   {UserSignupData} userSignupData - The user data to create
+     * 
+     * @returns {User} - The created user entity
+     * 
+     * @author Boyiliu (@boyiliu1007)
+     */
 
+    public async createUser(userSignupData: UserSignupData): Promise<User | null> {
+        
+        // should signup in users table at auth schema
+        const { data, error } = await supabase.auth.signUp({
+            email: userSignupData.email,
+            password: userSignupData.password,
+        }) 
+        if (error) {
+            // handle auth error cannot use handleSupabaseError
+            console.log(error.name);
+            return null
+        }
+        if (!data)
+            return null
 
+        // get user id from users table at auth schema
+        const userID = data.user?.id
+
+        // insert into members table at public schema
+        const { error: insertMemberError } = await supabase
+            .from(USER_TABLE_NAME)
+            .insert(
+                {   
+                    uuid: userID,
+                    name: userSignupData.name,
+                    email: userSignupData.email,
+                    username: userSignupData.username,
+                    studentId: userSignupData.studentId,
+                    identity: 2,
+                    created_at: new Date().toISOString(),
+                }
+            )
+            .single();
+        if (insertMemberError) {
+            console.log("Error inserting member:", insertMemberError);
+            ErrorHandler.handleSupabaseError(insertMemberError);
+            return null;
+        }
+        
+        // get the inserted member data
+        // fetch the newly created user
+        const { data: memberData, error: getMemberError } = await supabase
+            .from(USER_TABLE_NAME)
+            .select("*")
+            .eq("uuid", userID)
+            .single();
+
+        if (getMemberError) {
+            console.error("Error retrieving member data:", getMemberError);
+            ErrorHandler.handleSupabaseError(getMemberError);
+            return null;
+        }
+
+        console.log("User created successfully:", memberData);
+
+        // NOTE: Signing out immediately after signup may be unexpected—
+        // please confirm if automatic sign-in is not desired.
+        const { error: signoutError } = await supabase.auth.signOut();
+        if (signoutError) {
+            console.error("Sign-out error:", signoutError);
+            // proceed even if sign-out fails
+        }
+
+        return UserService.parseUser(memberData);
+    }
 }
diff --git a/src/backend/user/Entities/User.ts b/src/backend/user/Entities/User.ts
@@ -14,6 +14,7 @@ export type DBUser = Database['public']['Tables']['members']['Row'];
 export default class User {
     public id:                  string  = ""
     public username:            string  = ""
+    public name:                string  = ""
     public email:               string  = ""
     public phone:               string  = ""
     public avatar:              string  = ""
diff --git a/src/backend/user/Entities/UserSignupData.ts b/src/backend/user/Entities/UserSignupData.ts
@@ -0,0 +1,16 @@
+
+export default class UserSignupData {
+    public name: string = ''
+    public email: string = ''
+    public password: string = ''
+    public studentId: string = ''
+    public username: string = ''
+
+    constructor(userSignupData: { name: string, email: string, password: string, studentId: string, username: string }) {
+        this.name = userSignupData.name;
+        this.email = userSignupData.email;
+        this.password = userSignupData.password;
+        this.studentId = userSignupData.studentId;
+        this.username = userSignupData.username;
+    }
+}
diff --git a/src/backend/user/Services/UserService.ts b/src/backend/user/Services/UserService.ts
@@ -1,5 +1,6 @@
 import User, { DBUser } from "../Entities/User";
 
+
 const UserService = {
 
     /**
@@ -20,14 +21,39 @@ const UserService = {
         const user          = new User()
 
         user.id             = record.uuid
-        user.username       = record.name
-        user.email          = record.fk_email
-        user.identity       = record.fk_identity
+        if(record.username)
+            user.username     = record.username
+        
+        user.name           = record.name 
+        if(record.phone){
+            user.phone         = record.phone
+        }else{
+            user.phone         = ""
+        }
+        user.joinedAt       = new Date(record.created_at)
+        if(record.profileBackground) {
+            user.profileBackground = record.profileBackground
+        } else {
+            user.profileBackground = ""
+        }
+        if(record.department) {
+            user.department     = record.department
+        }else{
+            user.department     = ""
+        }
+        if(record.grade){
+            user.grade          = record.grade.toString()
+        }else{
+            user.grade          = ""
+        }
+        if(record.bio) user.bio = record.bio
+        else user.bio = ""
+        user.email          = record.email
+        user.identity       = record.identity
         user.avatar         = record.avatar
 
         return user
     }
-    
 }
 
 export default UserService
diff --git a/src/routes/signup.tsx b/src/routes/signup.tsx
@@ -1,8 +1,10 @@
 import { createFileRoute, useNavigate, useRouterState } from '@tanstack/react-router';
 import { useEffect, useRef, useState } from 'react';
 import zxcvbn from 'zxcvbn'; //記得要先安裝zxcvbn，輸入 npm install zxcvbn
+import  UserController  from '../backend/user/Controllers/UserController';
+import UserSignupData from '../backend/user/Entities/UserSignupData';
 export const Route = createFileRoute('/signup')({
-  component: SignUpPage,
+  component: SignUpPage, 
 })
 
 function SignUpPage() {
@@ -22,7 +24,7 @@ function SignUpPage() {
   return (
     <div className="max-w-xl mx-auto mt-10 p-6 bg-white shadow-md rounded-lg">
       {userData ?
-        (<SignUpForm userInfo={userData} />) :
+        (<SignUpForm userInfo={userData} navigate={navigate} />) :
         // TODO：之後可以引入404頁面
         <div className="text-center">
           <h1 className="text-2xl font-bold text-gray-900">Something Went Wrong! Please Contact ncuappteam@gmail.com</h1>
@@ -40,7 +42,7 @@ interface UserInfo {
   studentId: string
 }
 
-function SignUpForm({ userInfo }: { userInfo: UserInfo }) {
+function SignUpForm({ userInfo, navigate }: { userInfo: UserInfo; navigate: ReturnType<typeof useNavigate> }) {
   const [formData, setFormData] = useState({
     nickname: '',
     password: '',
@@ -104,19 +106,49 @@ function SignUpForm({ userInfo }: { userInfo: UserInfo }) {
       nickname: trimmedNickname,
       password: formData.password,
     })
-    // 加上 API 請求來提交「nickname」和「password」
+    
+    setIsLoading(true)
     try {
-      await new Promise((resolve) => setTimeout(resolve, 2000)) // 🔥 假裝等待伺服器回應
-      console.log('Submitted Data:', {
-        nickname: trimmedNickname,
+      const signupData: UserSignupData = {
+        name: userInfo.chineseName,  
+        email: userInfo.email,
         password: formData.password,
-      })
-      alert('註冊成功！')
+        username: trimmedNickname,
+        studentId: userInfo.studentId,
+      }
+      const user = await addUser(signupData)
+      if (!user) {
+        alert('註冊失敗，請檢查您的資料並重試。')
+        return
+      }
+      console.log('User created successfully:')
+      console.log(window.location.href)
+      
+      navigate({ to: "/login", search:{redirect: "/"}})
     } catch (error) {
+      console.log(error)
       console.error('註冊失敗:', error)
       alert('伺服器錯誤，請稍後再試')
     } finally {
-      setIsLoading(false) // 🔥 關閉 Loading
+      setIsLoading(false)
+    }
+  }
+
+  // send formData + userInfo to supabase
+  async function addUser(userSignupData: UserSignupData) {
+    
+    const signupInstance = new UserSignupData(userSignupData)
+    const userController = new UserController()
+    const user = await userController.createUser(signupInstance);
+    if (!user) {
+      // Handle error case
+      console.error("Failed to create user");
+      alert('註冊失敗，請檢查您的資料並重試。')
+      return null
+    } else {
+      // Success case - use the user object
+      console.log("User created:", user);
+      return user
     }
   }
 
diff --git a/src/utils/database.types.ts b/src/utils/database.types.ts
