```
add new student info route and related components, update auth guard implementation and signup success redirect ```
This commit is contained in:
@@ -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 };
|
||||
|
@@ -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">
|
||||
|
@@ -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;
|
@@ -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)}>
|
||||
|
59
002_source/ionic_mobile/src/pages/auth/StudentInfo/index.tsx
Normal file
59
002_source/ionic_mobile/src/pages/auth/StudentInfo/index.tsx
Normal 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;
|
@@ -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;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user