```
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 = {
|
const Paths = {
|
||||||
AuthHome: `/auth/Home`,
|
AuthHome: `/auth/home`,
|
||||||
AuthLogin: `/auth/login`,
|
AuthLogin: `/auth/login`,
|
||||||
AuthSignUp: `/auth/signup`,
|
AuthSignUp: `/auth/signup`,
|
||||||
SignUpSuccess: `/auth/sign_up_success`,
|
SignUpSuccess: `/auth/sign_up_success`,
|
||||||
AuthorizedTest: `/auth/authorized_test`,
|
AuthorizedTest: `/auth/authorized_test`,
|
||||||
|
//
|
||||||
|
StudentInfo: `/auth/student_info/:id`,
|
||||||
|
GetStudentInfoLink: (id: string) => `/auth/student_info/${id}`,
|
||||||
|
//
|
||||||
};
|
};
|
||||||
|
|
||||||
export { Paths };
|
export { Paths };
|
||||||
|
@@ -52,7 +52,9 @@ import Tab3 from './pages/Tab3';
|
|||||||
import { Paths } from './Paths';
|
import { Paths } from './Paths';
|
||||||
import SignUpSuccess from './pages/auth/SignUpSuccess';
|
import SignUpSuccess from './pages/auth/SignUpSuccess';
|
||||||
import AuthorizedTest from './pages/auth/AuthorizedTest';
|
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';
|
// import WordPageWithLayout from './pages/Lesson/WordPageWithLayout.del';
|
||||||
|
|
||||||
function RouteConfig() {
|
function RouteConfig() {
|
||||||
@@ -180,11 +182,15 @@ function RouteConfig() {
|
|||||||
<SignUpSuccess />
|
<SignUpSuccess />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
<Route exact path={Paths.AuthorizedTest}>
|
{/* protected page */}
|
||||||
<AuthGuard>
|
<AuthGuard>
|
||||||
|
<Route exact path={Paths.AuthorizedTest}>
|
||||||
<AuthorizedTest />
|
<AuthorizedTest />
|
||||||
</AuthGuard>
|
|
||||||
</Route>
|
</Route>
|
||||||
|
<Route exact path={Paths.StudentInfo}>
|
||||||
|
<StudentInfo />
|
||||||
|
</Route>
|
||||||
|
</AuthGuard>
|
||||||
|
|
||||||
{/* TODO: remove below */}
|
{/* TODO: remove below */}
|
||||||
<Route exact path="/tab1">
|
<Route exact path="/tab1">
|
||||||
|
@@ -1,8 +1,8 @@
|
|||||||
import { useIonRouter } from '@ionic/react';
|
import { useIonRouter } from '@ionic/react';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { IonAlert, IonButton } from '@ionic/react';
|
import { IonAlert, IonButton } from '@ionic/react';
|
||||||
import { useUser } from '../../../hooks/use-user';
|
import { useUser } from '../../hooks/use-user';
|
||||||
import { Paths } from '../../../Paths';
|
import { Paths } from '../../Paths';
|
||||||
|
|
||||||
export interface AuthGuardProps {
|
export interface AuthGuardProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
@@ -38,6 +38,7 @@ import { z as zod } from 'zod';
|
|||||||
import { pb } from '../../../lib/pb';
|
import { pb } from '../../../lib/pb';
|
||||||
import { ClientResponseError } from 'pocketbase';
|
import { ClientResponseError } from 'pocketbase';
|
||||||
import { COL_USER_METAS, COL_USERS } from '../../../constants';
|
import { COL_USER_METAS, COL_USERS } from '../../../constants';
|
||||||
|
import { Paths } from '../../../Paths';
|
||||||
|
|
||||||
function AuthSignUp(): React.JSX.Element {
|
function AuthSignUp(): React.JSX.Element {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
@@ -109,6 +110,8 @@ function AuthSignUp(): React.JSX.Element {
|
|||||||
};
|
};
|
||||||
const userMetaRecord = await pb.collection(COL_USER_METAS).create(userMeta);
|
const userMetaRecord = await pb.collection(COL_USER_METAS).create(userMeta);
|
||||||
await pb.collection('users').requestVerification(user.email);
|
await pb.collection('users').requestVerification(user.email);
|
||||||
|
|
||||||
|
router.push(Paths.SignUpSuccess);
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
const res_err = err as unknown as ClientResponseError;
|
const res_err = err as unknown as ClientResponseError;
|
||||||
const {
|
const {
|
||||||
@@ -133,19 +136,7 @@ function AuthSignUp(): React.JSX.Element {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<IonPage className={styles.loginPage}>
|
<IonPage className={styles.loginPage}>
|
||||||
<IonHeader>
|
<IonHeader></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>
|
|
||||||
{/* */}
|
{/* */}
|
||||||
<IonContent fullscreen>
|
<IonContent fullscreen>
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<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