Merge pull request NCUAppTeam#145 from 1989ONCE/main

Signup Process Redirection Setup

Author: 1989ONCE

src/routeTree.gen.ts

@@ -11,18 +11,18 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
-import { Route as CalendarIndexImport } from './routes/calendar/index'
+import { Route as SignupImport } from './routes/signup'
+import { Route as LoginImport } from './routes/login'
 import { Route as CallbackImport } from './routes/callback'
-import { Route as EventsEventIdImport } from './routes/events/$eventId'
-import { Route as EventsCreateImport } from './routes/events/create'
-import { Route as EventsIndexImport } from './routes/events/index'
-import { Route as EventsSelectImport } from './routes/events/select'
-import { Route as HomeInfoCardImport } from './routes/home/infoCard'
 import { Route as IndexImport } from './routes/index'
-import { Route as LoginImport } from './routes/login'
-import { Route as MapIndexImport } from './routes/map/index'
 import { Route as SalesIndexImport } from './routes/sales/index'
-import { Route as SignupImport } from './routes/signup'
+import { Route as MapIndexImport } from './routes/map/index'
+import { Route as EventsIndexImport } from './routes/events/index'
+import { Route as CalendarIndexImport } from './routes/calendar/index'
+import { Route as HomeInfoCardImport } from './routes/home/infoCard'
+import { Route as EventsSelectImport } from './routes/events/select'
+import { Route as EventsCreateImport } from './routes/events/create'
+import { Route as EventsEventIdImport } from './routes/events/$eventId'
 
 // Create/Update Routes
 

src/routes/signup.tsx

@@ -1,24 +1,34 @@
-import { createFileRoute, useRouterState } from '@tanstack/react-router'
-import { useState } from 'react'
+import { createFileRoute, useNavigate, useRouterState } from '@tanstack/react-router';
+import { useState } from 'react';
 import zxcvbn from 'zxcvbn'; //記得要先安裝zxcvbn，輸入 npm install zxcvbn
 export const Route = createFileRoute('/signup')({
   component: SignUpPage,
 })
 
 function SignUpPage() {
-  // 模擬從 OAuth 獲取的使用者資訊
+  const navigate = useNavigate();
   const state = useRouterState({ select: (s) => s.location.state })
-  const userInfo = state.post?.userData
-    ? JSON.parse(state.post.userData)
-    : {
-      chineseName: 'NCU APP Developer',
-      email: '111@gmail.com',
-      studentId: '110110110',
-    }
+  const [userData, setUserData] = useState<UserInfo>()
+  if (!state.post?.userData) {
+    navigate({ to: '/' })
+  }
+  else {
+    setUserData(JSON.parse(state.post.userData))
+  }
+
 
   return (
     <div className="max-w-xl mx-auto mt-10 p-6 bg-white shadow-md rounded-lg">
-      <SignUpForm userInfo={userInfo} />
+      {userData ?
+        (<SignUpForm userInfo={userData} />) :
+        // TODO：之後可以引入404頁面
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-gray-900">Something Went Wrong! Please Contact ncuappteam@gmail.com</h1>
+          <p className="mt-2 text-sm text-gray-600">
+            無法取得使用者資訊，請重新登入
+          </p>
+        </div>
+      }
     </div>
   )
 }