feat: implement party user authentication system with signin/signup routes, JWT token validation, and frontend integration including mobile route configuration and API service updates

2025-06-18 01:14:05 +08:00
parent 4cf93f431e
commit c93b31b2f6
30 changed files with 1008 additions and 67 deletions
--- a/03_source/mobile/src/pages/PartyUserLogin/index.tsx
+++ b/03_source/mobile/src/pages/PartyUserLogin/index.tsx
@@ -0,0 +1,200 @@
+import React, { useState } from 'react';
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonPage,
+  IonButtons,
+  IonMenuButton,
+  IonRow,
+  IonCol,
+  IonButton,
+  IonList,
+  IonItem,
+  IonInput,
+  IonText,
+  IonIcon,
+  useIonRouter,
+  IonToast,
+} from '@ionic/react';
+import './Login.scss';
+import { setIsLoggedIn, setUsername, setData } from '../../data/user/user.actions';
+import { connect } from '../../data/connect';
+import { RouteComponentProps } from 'react-router';
+import { chevronBackOutline } from 'ionicons/icons';
+import PATHS from '../../PATHS';
+import axios from 'axios';
+import * as selectors from '../../data/selectors';
+import { UserState } from '../../data/user/user.state';
+import constants from '../../constants';
+
+interface OwnProps extends RouteComponentProps {}
+
+interface StateProps {
+  partyUserState: UserState;
+}
+
+interface DispatchProps {
+  setIsLoggedIn: typeof setIsLoggedIn;
+  setUsername: typeof setUsername;
+  setData: typeof setData;
+}
+
+interface LoginProps extends OwnProps, DispatchProps {}
+
+const Login: React.FC<LoginProps> = ({
+  setIsLoggedIn,
+  history,
+  setUsername: setUsernameAction,
+  setData,
+}) => {
+  const [username, setUsername] = useState('demo@minimals.cc');
+  const [email, setEmail] = useState('demo@minimals.cc');
+  const [password, setPassword] = useState('@2Minimal');
+  const [formSubmitted, setFormSubmitted] = useState(false);
+  //
+  const [usernameError, setUsernameError] = useState(false);
+  const [passwordError, setPasswordError] = useState(false);
+  const [emailError, setEmailError] = useState(false);
+
+  const login = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setFormSubmitted(true);
+
+    // if (!username) {
+    //   setUsernameError(true);
+    // }
+    // if (!password) {
+    //   setPasswordError(true);
+    // }
+
+    const emailAndPassword = { email, password };
+    const result = await axios.post(constants.SIGN_IN, emailAndPassword);
+    const { data, status } = result;
+    const { accessToken, user } = data;
+
+    if (status == 200) {
+      // if username and password ok
+      setData({ isLoggedin: true, accessToken, ...user });
+
+      await setIsLoggedIn(true);
+      await setUsernameAction(username);
+
+      setShowLoginOkToast(true);
+
+      router.push(PATHS.PROFILE);
+    } else {
+      // if username or password failed
+      console.log({ result });
+    }
+  };
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  const [showLoginOkToast, setShowLoginOkToast] = useState(false);
+
+  return (
+    <IonPage id="login-page">
+      <IonHeader className="ion-no-border">
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonButton onClick={handleBackClick}>
+              <IonIcon icon={chevronBackOutline}></IonIcon>
+            </IonButton>
+          </IonButtons>
+          <IonTitle>PartyUser Login Page</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <div className="login-logo">
+          <img src="/assets/img/appicon.svg" alt="Ionic logo" />
+        </div>
+
+        <form noValidate onSubmit={login}>
+          <IonList>
+            <IonItem>
+              <IonInput
+                label="Email"
+                labelPlacement="stacked"
+                color="primary"
+                name="email"
+                type="text"
+                value={email}
+                spellCheck={false}
+                autocapitalize="off"
+                onIonInput={(e) => setEmail(e.detail.value as string)}
+                required
+              >
+                {formSubmitted && emailError && (
+                  <IonText color="danger" slot="error">
+                    <p>Email is required</p>
+                  </IonText>
+                )}
+              </IonInput>
+            </IonItem>
+
+            <IonItem>
+              <IonInput
+                label="Password"
+                labelPlacement="stacked"
+                color="primary"
+                name="password"
+                type="password"
+                value={password}
+                onIonInput={(e) => setPassword(e.detail.value as string)}
+              >
+                {formSubmitted && passwordError && (
+                  <IonText color="danger" slot="error">
+                    <p>Password is required</p>
+                  </IonText>
+                )}
+              </IonInput>
+            </IonItem>
+          </IonList>
+
+          <IonList>
+            <IonItem>
+              <div>email and password prefilled for demo</div>
+            </IonItem>
+          </IonList>
+
+          <IonRow>
+            <IonCol>
+              <IonButton type="submit" expand="block">
+                Login
+              </IonButton>
+            </IonCol>
+            <IonCol>
+              <IonButton routerLink={PATHS.PARTY_USER_SIGN_UP} color="light" expand="block">
+                Signup
+              </IonButton>
+            </IonCol>
+          </IonRow>
+        </form>
+
+        <IonToast
+          isOpen={showLoginOkToast}
+          message="login ok"
+          duration={2000}
+          onDidDismiss={() => setShowLoginOkToast(false)}
+        />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default connect<OwnProps, StateProps, DispatchProps>({
+  mapDispatchToProps: {
+    setIsLoggedIn,
+    setUsername,
+    setData,
+  },
+  mapStateToProps: (state) => ({
+    partyUserState: selectors.getPartyUserState(state),
+  }),
+  component: Login,
+});