From efc2d31f7c75b632213e31204d418efbd46ca26d Mon Sep 17 00:00:00 2001
From: louiscklaw <louiscklaw@users.noreply.github.com>
Date: Wed, 14 May 2025 15:40:59 +0800
Subject: [PATCH] ``` add new student info route and related components, update
 auth guard implementation and signup success redirect ```

---
 002_source/ionic_mobile/src/Paths.tsx         |  6 +-
 002_source/ionic_mobile/src/RouteConfig.tsx   | 16 +++--
 .../auth}/auth-guard.tsx                      |  4 +-
 .../src/pages/auth/SignUp/index.tsx           | 17 ++----
 .../src/pages/auth/StudentInfo/index.tsx      | 59 +++++++++++++++++++
 .../pages/auth/StudentInfo/style.module.scss  | 17 ++++++
 6 files changed, 98 insertions(+), 21 deletions(-)
 rename 002_source/ionic_mobile/src/{pages/auth/AuthorizedTest => components/auth}/auth-guard.tsx (93%)
 create mode 100644 002_source/ionic_mobile/src/pages/auth/StudentInfo/index.tsx
 create mode 100644 002_source/ionic_mobile/src/pages/auth/StudentInfo/style.module.scss

diff --git a/002_source/ionic_mobile/src/Paths.tsx b/002_source/ionic_mobile/src/Paths.tsx
index a50a8c0..e11d0fa 100644
--- a/002_source/ionic_mobile/src/Paths.tsx
+++ b/002_source/ionic_mobile/src/Paths.tsx
@@ -1,9 +1,13 @@
 const Paths = {
-  AuthHome: `/auth/Home`,
+  AuthHome: `/auth/home`,
   AuthLogin: `/auth/login`,
   AuthSignUp: `/auth/signup`,
   SignUpSuccess: `/auth/sign_up_success`,
   AuthorizedTest: `/auth/authorized_test`,
+  //
+  StudentInfo: `/auth/student_info/:id`,
+  GetStudentInfoLink: (id: string) => `/auth/student_info/${id}`,
+  //
 };
 
 export { Paths };
diff --git a/002_source/ionic_mobile/src/RouteConfig.tsx b/002_source/ionic_mobile/src/RouteConfig.tsx
index 2438661..c119655 100644
--- a/002_source/ionic_mobile/src/RouteConfig.tsx
+++ b/002_source/ionic_mobile/src/RouteConfig.tsx
@@ -52,7 +52,9 @@ import Tab3 from './pages/Tab3';
 import { Paths } from './Paths';
 import SignUpSuccess from './pages/auth/SignUpSuccess';
 import AuthorizedTest from './pages/auth/AuthorizedTest';
-import { AuthGuard } from './pages/auth/AuthorizedTest/auth-guard';
+import { AuthGuard } from './components/auth/auth-guard';
+import StudentInfo from './pages/auth/StudentInfo';
+// import { AuthGuard } from './pages/auth/AuthorizedTest/auth-guard';
 // import WordPageWithLayout from './pages/Lesson/WordPageWithLayout.del';
 
 function RouteConfig() {
@@ -180,11 +182,15 @@ function RouteConfig() {
         <SignUpSuccess />
       </Route>
 
-      <Route exact path={Paths.AuthorizedTest}>
-        <AuthGuard>
+      {/* protected page */}
+      <AuthGuard>
+        <Route exact path={Paths.AuthorizedTest}>
           <AuthorizedTest />
-        </AuthGuard>
-      </Route>
+        </Route>
+        <Route exact path={Paths.StudentInfo}>
+          <StudentInfo />
+        </Route>
+      </AuthGuard>
 
       {/* TODO: remove below */}
       <Route exact path="/tab1">
diff --git a/002_source/ionic_mobile/src/pages/auth/AuthorizedTest/auth-guard.tsx b/002_source/ionic_mobile/src/components/auth/auth-guard.tsx
similarity index 93%
rename from 002_source/ionic_mobile/src/pages/auth/AuthorizedTest/auth-guard.tsx
rename to 002_source/ionic_mobile/src/components/auth/auth-guard.tsx
index 3b3beec..385e0a2 100644
--- a/002_source/ionic_mobile/src/pages/auth/AuthorizedTest/auth-guard.tsx
+++ b/002_source/ionic_mobile/src/components/auth/auth-guard.tsx
@@ -1,8 +1,8 @@
 import { useIonRouter } from '@ionic/react';
 import * as React from 'react';
 import { IonAlert, IonButton } from '@ionic/react';
-import { useUser } from '../../../hooks/use-user';
-import { Paths } from '../../../Paths';
+import { useUser } from '../../hooks/use-user';
+import { Paths } from '../../Paths';
 
 export interface AuthGuardProps {
   children: React.ReactNode;
diff --git a/002_source/ionic_mobile/src/pages/auth/SignUp/index.tsx b/002_source/ionic_mobile/src/pages/auth/SignUp/index.tsx
index 91225cb..b2bde25 100644
--- a/002_source/ionic_mobile/src/pages/auth/SignUp/index.tsx
+++ b/002_source/ionic_mobile/src/pages/auth/SignUp/index.tsx
@@ -38,6 +38,7 @@ import { z as zod } from 'zod';
 import { pb } from '../../../lib/pb';
 import { ClientResponseError } from 'pocketbase';
 import { COL_USER_METAS, COL_USERS } from '../../../constants';
+import { Paths } from '../../../Paths';
 
 function AuthSignUp(): React.JSX.Element {
   const params = useParams();
@@ -109,6 +110,8 @@ function AuthSignUp(): React.JSX.Element {
         };
         const userMetaRecord = await pb.collection(COL_USER_METAS).create(userMeta);
         await pb.collection('users').requestVerification(user.email);
+
+        router.push(Paths.SignUpSuccess);
       } catch (err: any) {
         const res_err = err as unknown as ClientResponseError;
         const {
@@ -133,19 +136,7 @@ function AuthSignUp(): React.JSX.Element {
 
   return (
     <IonPage className={styles.loginPage}>
-      <IonHeader>
-        <IonToolbar>
-          <IonButtons slot="start">
-            <IonBackButton icon={arrowBack} text="" className="custom-back" />
-          </IonButtons>
-
-          <IonButtons slot="end">
-            <IonButton className="custom-button">
-              <IonIcon icon={shapesOutline} />
-            </IonButton>
-          </IonButtons>
-        </IonToolbar>
-      </IonHeader>
+      <IonHeader></IonHeader>
       {/*  */}
       <IonContent fullscreen>
         <form onSubmit={handleSubmit(onSubmit)}>
diff --git a/002_source/ionic_mobile/src/pages/auth/StudentInfo/index.tsx b/002_source/ionic_mobile/src/pages/auth/StudentInfo/index.tsx
new file mode 100644
index 0000000..c44edc8
--- /dev/null
+++ b/002_source/ionic_mobile/src/pages/auth/StudentInfo/index.tsx
@@ -0,0 +1,59 @@
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonCardTitle,
+  IonCol,
+  IonContent,
+  IonFooter,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonLabel,
+  IonPage,
+  IonRow,
+  IonText,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import styles from './style.module.scss';
+import _ from 'lodash';
+import { Router, useParams } from 'react-router';
+import { Wave } from '../../../components/Wave';
+import { Paths } from '../../../Paths';
+
+function StudentInfo(): React.JSX.Element {
+  const router = useIonRouter();
+  const { id } = useParams();
+  function handleBackToLogin() {
+    router.push(Paths.AuthLogin);
+  }
+  return (
+    <IonPage className={styles.loginPage}>
+      <IonHeader>{/*  */}</IonHeader>
+      {/*  */}
+      <IonContent fullscreen>
+        <IonGrid className="ion-padding">
+          <IonCol>
+            <IonRow>
+              <IonText>Student Info test</IonText>
+              <IonText>{JSON.stringify({ id })}</IonText>
+            </IonRow>
+            <IonRow>
+              <IonButton onClick={handleBackToLogin}>Back to login</IonButton>
+            </IonRow>
+          </IonCol>
+        </IonGrid>
+      </IonContent>
+      {/*  */}
+      <IonFooter>
+        <IonGrid className="ion-no-margin ion-no-padding">
+          <Wave />
+        </IonGrid>
+      </IonFooter>
+    </IonPage>
+  );
+}
+
+export default StudentInfo;
diff --git a/002_source/ionic_mobile/src/pages/auth/StudentInfo/style.module.scss b/002_source/ionic_mobile/src/pages/auth/StudentInfo/style.module.scss
new file mode 100644
index 0000000..14ee87f
--- /dev/null
+++ b/002_source/ionic_mobile/src/pages/auth/StudentInfo/style.module.scss
@@ -0,0 +1,17 @@
+.signupPage {
+  ion-toolbar {
+    --border-style: none;
+    --border-color: transparent;
+    --padding-top: 1rem;
+    --padding-bottom: 1rem;
+    --padding-start: 1rem;
+    --padding-end: 1rem;
+  }
+}
+
+.headingText {
+  h5 {
+    margin-top: 0.2rem;
+    // color: #d3a6c7;
+  }
+}