```

add new student menu route and component, update login default values and redirect logic
```

002_source/ionic_mobile/src/Paths.tsx

@@ -3,11 +3,13 @@ const Paths = {
   AuthLogin: `/auth/login`,
   AuthSignUp: `/auth/signup`,
   SignUpSuccess: `/auth/sign_up_success`,
-  AuthorizedTest: `/auth/authorized_test`,
   //
+  StudentMenu: `/auth/student_menu`,
   StudentInfo: `/auth/student_info/:id`,
   GetStudentInfoLink: (id: string) => `/auth/student_info/${id}`,
   //
+  AuthorizedTest: `/auth/authorized_test`,
+  //
   Setting: `/setting`,
 };
 

002_source/ionic_mobile/src/RouteConfig.tsx

@@ -54,6 +54,7 @@ import SignUpSuccess from './pages/auth/SignUpSuccess';
 import AuthorizedTest from './pages/auth/AuthorizedTest';
 import { AuthGuard } from './components/auth/auth-guard';
 import StudentInfo from './pages/auth/StudentInfo';
+import StudentMenu from './pages/auth/StudentMenu';
 // import { AuthGuard } from './pages/auth/AuthorizedTest/auth-guard';
 // import WordPageWithLayout from './pages/Lesson/WordPageWithLayout.del';
 
@@ -184,12 +185,15 @@ function RouteConfig() {
 
       {/* protected page */}
       <AuthGuard>
-        <Route exact path={Paths.AuthorizedTest}>
-          <AuthorizedTest />
-        </Route>
         <Route exact path={Paths.StudentInfo}>
           <StudentInfo />
         </Route>
+        <Route exact path={Paths.StudentMenu}>
+          <StudentMenu />
+        </Route>
+        <Route exact path={Paths.AuthorizedTest}>
+          <AuthorizedTest />
+        </Route>
       </AuthGuard>
 
       {/* TODO: remove below */}

002_source/ionic_mobile/src/pages/auth/Login/index.tsx

@@ -63,8 +63,8 @@ function AuthLogin(): React.JSX.Element {
 
   type Values = zod.infer<typeof schema>;
   const defaultValues = {
-    email: 'user5@123.com',
+    email: '',
-    password: 'user5@123.com',
+    password: '',
     //
   } satisfies Values;
 
@@ -81,10 +81,13 @@ function AuthLogin(): React.JSX.Element {
 
   const onSubmit = React.useCallback(
     async (values: Values): Promise<void> => {
-      //
+      console.log({ values });
       try {
-        // const authData = await pb.collection(COL_USERS).authWithPassword(values.email, values.password);
+        await authClient.signInWithPassword({
-        await authClient.signInWithPassword({ email: values.email, password: values.password });
+          email: values.email,
+          password: values.password,
+          //
+        });
 
         // Refresh the auth state
         await checkSession?.();
@@ -93,7 +96,7 @@ function AuthLogin(): React.JSX.Element {
 
         // UserProvider, for this case, will not refresh the router
         // After refresh, GuestGuard will handle the redirect
-        router.push(Paths.AuthorizedTest);
+        router.push(Paths.StudentMenu);
       } catch (err: any) {
         const res_err = err as unknown as ClientResponseError;
         const {
@@ -133,7 +136,12 @@ function AuthLogin(): React.JSX.Element {
                     render={({ field }) => (
                       <>
                         <IonLabel className={styles.fieldLabel}>{'email'}</IonLabel>
-                        <IonInput {...field} type="email" />
+                        <IonInput
+                          type="email"
+                          placeholder="e.g. user5@123.com / user5@123.com"
+                          onIonInput={(e) => field.onChange(e.detail.value)}
+                          onIonBlur={() => field.onBlur()}
+                        />
                         {errors.email ? (
                           <IonText style={{ fontSize: '0.8rem', color: 'tomato', fontWeight: 'bold' }}>
                             <IonText>{errors.email.message}</IonText>
@@ -151,10 +159,14 @@ function AuthLogin(): React.JSX.Element {
                     render={({ field }) => (
                       <>
                         <IonLabel className={styles.fieldLabel}>{'password'}</IonLabel>
-                        <IonInput {...field} type="password" />
+                        <IonInput
+                          type="password"
+                          onIonInput={(e) => field.onChange(e.detail.value)}
+                          onIonBlur={() => field.onBlur()}
+                        />
                         {errors.password ? (
                           <IonText style={{ fontSize: '0.8rem', color: 'tomato', fontWeight: 'bold' }}>
-                            <IonText>{'errors.password.message'}</IonText>
+                            <IonText>{errors.password.message}</IonText>
                           </IonText>
                         ) : null}
                       </>

002_source/ionic_mobile/src/pages/auth/StudentMenu/index.tsx

@@ -0,0 +1,71 @@
+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';
+import { useTransition } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useUser } from '../../../hooks/use-user';
+
+function StudentMenu(): React.JSX.Element {
+  const router = useIonRouter();
+  const { t } = useTranslation();
+  const { user } = useUser();
+
+  function handleBackToLogin() {
+    router.push(Paths.AuthLogin);
+  }
+
+  function handleViewStudentInfoOnClick() {
+    if (user?.id) {
+      router.push(Paths.GetStudentInfoLink(user.id));
+    }
+  }
+
+  return (
+    <IonPage className={styles.loginPage}>
+      <IonHeader>{/*  */}</IonHeader>
+      {/*  */}
+      <IonContent fullscreen>
+        <IonGrid className="ion-padding">
+          <IonRow>Student Menu</IonRow>
+          {/*  */}
+          <IonRow>
+            <IonButton onClick={handleViewStudentInfoOnClick}>{t('view-student-info')}</IonButton>
+          </IonRow>
+          {/*  */}
+          <IonRow>
+            <IonButton onClick={handleBackToLogin}>Back to login</IonButton>
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+      {/*  */}
+      <IonFooter>
+        <IonGrid className="ion-no-margin ion-no-padding">
+          <Wave />
+        </IonGrid>
+      </IonFooter>
+    </IonPage>
+  );
+}
+
+export default StudentMenu;

002_source/ionic_mobile/src/pages/auth/StudentMenu/style.module.scss

@@ -0,0 +1,17 @@
+.loginPage {
+  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;
+  }
+}