add new student info route and related components, update auth guard implementation and signup success redirect
```
This commit is contained in:
louiscklaw
2025-05-14 15:40:59 +08:00
parent 1938e95948
commit efc2d31f7c
6 changed files with 98 additions and 21 deletions

View File

@@ -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 };

View File

@@ -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">

View File

@@ -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;

View File

@@ -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)}>

View File

@@ -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;

View File

@@ -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;
}
}