feat: implement login and signup pages with shared authentication styles, including form validation and Redux integration for authentication state management

03_source/mobile/src/pages/Login/index.tsx

@@ -0,0 +1,154 @@
+/**
+ * Login Page Component
+ *
+ * Handles user authentication with:
+ * - Username/password input
+ * - Form validation
+ * - Login state management
+ * - Navigation to signup page
+ *
+ * Connects to Redux store for:
+ * - Setting authentication state
+ * - Storing username
+ */
+import React, { useState } from 'react';
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonPage,
+  IonButtons,
+  IonMenuButton,
+  IonRow,
+  IonCol,
+  IonButton,
+  IonList,
+  IonItem,
+  IonInput,
+  IonText,
+} from '@ionic/react';
+import './Login.scss';
+import { setIsLoggedIn, setUsername } from '../../data/user/user.actions';
+import { connect } from '../../data/connect';
+import { RouteComponentProps } from 'react-router';
+
+interface OwnProps extends RouteComponentProps {}
+
+interface DispatchProps {
+  setIsLoggedIn: typeof setIsLoggedIn;
+  setUsername: typeof setUsername;
+}
+
+interface LoginProps extends OwnProps, DispatchProps {}
+
+const Login: React.FC<LoginProps> = ({
+  setIsLoggedIn,
+  history,
+  setUsername: setUsernameAction,
+}) => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [formSubmitted, setFormSubmitted] = useState(false);
+  const [usernameError, setUsernameError] = useState(false);
+  const [passwordError, setPasswordError] = useState(false);
+
+  const login = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setFormSubmitted(true);
+    if (!username) {
+      setUsernameError(true);
+    }
+    if (!password) {
+      setPasswordError(true);
+    }
+
+    if (username && password) {
+      await setIsLoggedIn(true);
+      await setUsernameAction(username);
+      history.push('/tabs/schedule', { direction: 'none' });
+    }
+  };
+
+  return (
+    <IonPage id="login-page">
+      <IonHeader className="ion-no-border">
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonMenuButton></IonMenuButton>
+          </IonButtons>
+          <IonTitle>Example 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="Username"
+                labelPlacement="stacked"
+                color="primary"
+                name="username"
+                type="text"
+                value={username}
+                spellCheck={false}
+                autocapitalize="off"
+                onIonInput={(e) => setUsername(e.detail.value as string)}
+                required
+              >
+                {formSubmitted && usernameError && (
+                  <IonText color="danger" slot="error">
+                    <p>Username 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>
+
+          <IonRow>
+            <IonCol>
+              <IonButton type="submit" expand="block">
+                Login
+              </IonButton>
+            </IonCol>
+            <IonCol>
+              <IonButton routerLink="/signup" color="light" expand="block">
+                Signup
+              </IonButton>
+            </IonCol>
+          </IonRow>
+        </form>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default connect<OwnProps, {}, DispatchProps>({
+  mapDispatchToProps: {
+    setIsLoggedIn,
+    setUsername,
+  },
+  component: Login,
+});