Merge pull request NCUAppTeam#144 from 1989ONCE/main

feat: integrate the data access from oauth to sign up process page

Author: 1989ONCE

src/main.tsx

@@ -1,6 +1,6 @@
+import { RouterProvider, createRouter } from '@tanstack/react-router'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { RouterProvider, createRouter } from '@tanstack/react-router'
 import './index.css'
 
 // Import the generated route tree
@@ -18,6 +18,9 @@ declare module '@tanstack/react-router' {
   interface Register {
     router: typeof router
   }
+  interface HistoryState {
+    post?: { userData: string };
+  }
 }
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

src/routeTree.gen.ts

@@ -11,19 +11,18 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
-import { Route as SignupImport } from './routes/signup'
-import { Route as SignImport } from './routes/sign'
-import { Route as LoginImport } from './routes/login'
+import { Route as CalendarIndexImport } from './routes/calendar/index'
 import { Route as CallbackImport } from './routes/callback'
-import { Route as IndexImport } from './routes/index'
-import { Route as SalesIndexImport } from './routes/sales/index'
-import { Route as MapIndexImport } from './routes/map/index'
+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 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'
+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'
 
 // Create/Update Routes
 
@@ -32,11 +31,6 @@ const SignupRoute = SignupImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-const SignRoute = SignImport.update({
-  path: '/sign',
-  getParentRoute: () => rootRoute,
-} as any)
-
 const LoginRoute = LoginImport.update({
   path: '/login',
   getParentRoute: () => rootRoute,
@@ -117,13 +111,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginImport
       parentRoute: typeof rootRoute
     }
-    '/sign': {
-      id: '/sign'
-      path: '/sign'
-      fullPath: '/sign'
-      preLoaderRoute: typeof SignImport
-      parentRoute: typeof rootRoute
-    }
     '/signup': {
       id: '/signup'
       path: '/signup'
@@ -196,7 +183,6 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/callback': typeof CallbackRoute
   '/login': typeof LoginRoute
-  '/sign': typeof SignRoute
   '/signup': typeof SignupRoute
   '/events/$eventId': typeof EventsEventIdRoute
   '/events/create': typeof EventsCreateRoute
@@ -212,7 +198,6 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/callback': typeof CallbackRoute
   '/login': typeof LoginRoute
-  '/sign': typeof SignRoute
   '/signup': typeof SignupRoute
   '/events/$eventId': typeof EventsEventIdRoute
   '/events/create': typeof EventsCreateRoute
@@ -229,7 +214,6 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/callback': typeof CallbackRoute
   '/login': typeof LoginRoute
-  '/sign': typeof SignRoute
   '/signup': typeof SignupRoute
   '/events/$eventId': typeof EventsEventIdRoute
   '/events/create': typeof EventsCreateRoute
@@ -247,7 +231,6 @@ export interface FileRouteTypes {
     | '/'
     | '/callback'
     | '/login'
-    | '/sign'
     | '/signup'
     | '/events/$eventId'
     | '/events/create'
@@ -262,7 +245,6 @@ export interface FileRouteTypes {
     | '/'
     | '/callback'
     | '/login'
-    | '/sign'
     | '/signup'
     | '/events/$eventId'
     | '/events/create'
@@ -277,7 +259,6 @@ export interface FileRouteTypes {
     | '/'
     | '/callback'
     | '/login'
-    | '/sign'
     | '/signup'
     | '/events/$eventId'
     | '/events/create'
@@ -294,7 +275,6 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   CallbackRoute: typeof CallbackRoute
   LoginRoute: typeof LoginRoute
-  SignRoute: typeof SignRoute
   SignupRoute: typeof SignupRoute
   EventsEventIdRoute: typeof EventsEventIdRoute
   EventsCreateRoute: typeof EventsCreateRoute
@@ -310,7 +290,6 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   CallbackRoute: CallbackRoute,
   LoginRoute: LoginRoute,
-  SignRoute: SignRoute,
   SignupRoute: SignupRoute,
   EventsEventIdRoute: EventsEventIdRoute,
   EventsCreateRoute: EventsCreateRoute,
@@ -337,7 +316,6 @@ export const routeTree = rootRoute
         "/",
         "/callback",
         "/login",
-        "/sign",
         "/signup",
         "/events/$eventId",
         "/events/create",
@@ -358,9 +336,6 @@ export const routeTree = rootRoute
     "/login": {
       "filePath": "login.tsx"
     },
-    "/sign": {
-      "filePath": "sign.tsx"
-    },
     "/signup": {
       "filePath": "signup.tsx"
     },

src/routes/callback.tsx

@@ -1,13 +1,12 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 export const Route = createFileRoute('/callback')({
   component: Callback,
 })
 
 function Callback() {
   const navigate = useNavigate();
-  const [userInfo, setUserInfo] = useState(null);
 
   useEffect(() => {
     async function handleOAuthCallback() {
@@ -43,7 +42,7 @@ function Callback() {
           console.error('取得 access_token 失敗', tokenData);
           return;
         }
-        
+
         // 取得使用者資訊
         const userResponse = await fetch('http://localhost:3000/oauth2/userinfo', {
           method: 'GET',
@@ -55,9 +54,8 @@ function Callback() {
 
         const userData = await userResponse.json();
         console.log('使用者資訊:', userData);
-        setUserInfo(userData);
-        
-        navigate({ to: '/signup', search: {userData: JSON.stringify(userData)}});
+        const stringifyData: string = JSON.stringify(userData);
+        navigate({ to: '/signup', state: { post: { userData: stringifyData } } }) // 導向註冊頁面，並傳遞使用者資訊
       } catch (error) {
         console.error('OAuth 登入失敗:', error);
         navigate({ to: '/' });
@@ -70,12 +68,6 @@ function Callback() {
   return (
     <div>
       <h2>正在處理登入...</h2>
-      {userInfo && (
-        <div>
-          <h3>使用者資訊：</h3>
-          <pre>{JSON.stringify(userInfo, null, 2)}</pre>
-        </div>
-      )}
     </div>
   );
 }