diff --git a/03_source/mobile/src/pages/Login.scss b/03_source/mobile/src/pages/Login.scss deleted file mode 100644 index 4e58500..0000000 --- a/03_source/mobile/src/pages/Login.scss +++ /dev/null @@ -1,16 +0,0 @@ -#login-page, #signup-page, #support-page { - .login-logo { - padding: 20px 0; - min-height: 200px; - text-align: center; - } - - .login-logo img { - max-width: 150px; - } - - .list { - margin-bottom: 0; - } - -} \ No newline at end of file diff --git a/03_source/mobile/src/pages/Login/Login.scss b/03_source/mobile/src/pages/Login/Login.scss new file mode 100644 index 0000000..7a467e9 --- /dev/null +++ b/03_source/mobile/src/pages/Login/Login.scss @@ -0,0 +1,30 @@ +/** + * Shared Authentication Styles + * + * Contains common styling for: + * - Login page + * - Signup page + * - Support page + * + * Key features: + * - Logo positioning and sizing + * - Form list styling + * - Responsive design for all screen sizes + */ +#login-page, +#signup-page, +#support-page { + .login-logo { + padding: 20px 0; + min-height: 200px; + text-align: center; + } + + .login-logo img { + max-width: 150px; + } + + .list { + margin-bottom: 0; + } +} diff --git a/03_source/mobile/src/pages/Login.tsx b/03_source/mobile/src/pages/Login/index.tsx similarity index 88% rename from 03_source/mobile/src/pages/Login.tsx rename to 03_source/mobile/src/pages/Login/index.tsx index 402c952..7128e7a 100644 --- a/03_source/mobile/src/pages/Login.tsx +++ b/03_source/mobile/src/pages/Login/index.tsx @@ -1,3 +1,16 @@ +/** + * 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, @@ -16,8 +29,8 @@ import { IonText, } from '@ionic/react'; import './Login.scss'; -import { setIsLoggedIn, setUsername } from '../data/user/user.actions'; -import { connect } from '../data/connect'; +import { setIsLoggedIn, setUsername } from '../../data/user/user.actions'; +import { connect } from '../../data/connect'; import { RouteComponentProps } from 'react-router'; interface OwnProps extends RouteComponentProps {} @@ -59,12 +72,12 @@ const Login: React.FC = ({ return ( - + - Login + Example Login Page diff --git a/03_source/mobile/src/pages/MyProfile/NotLoggedIn/index.tsx b/03_source/mobile/src/pages/MyProfile/NotLoggedIn/index.tsx index 43cd38f..f595dc7 100644 --- a/03_source/mobile/src/pages/MyProfile/NotLoggedIn/index.tsx +++ b/03_source/mobile/src/pages/MyProfile/NotLoggedIn/index.tsx @@ -1,11 +1,21 @@ -// REQ0053/profile-page -// -// PURPOSE: -// - Provides functionality view user profile -// -// RULES: -// - T.B.A. -// +/** + * Not Logged In Profile View Component + * + * Displays when user is not authenticated, with: + * - Visual placeholder for profile + * - Login button (regular user) + * - Party member login button + * - Signup encouragement + * + * Features: + * - Pull-to-refresh functionality + * - Responsive design for all screen sizes + * - Clear call-to-action buttons + * + * Connected to: + * - Redux store for speaker data + * - Router for navigation + */ import React, { useEffect, useRef, useState } from 'react'; import { IonHeader, @@ -104,6 +114,18 @@ const MyProfile: React.FC = ({ speakers, speakerSessions }) => } } + const [disableForwardPartyUserLoginButton, setDisableForwardPartyUserLoginButton] = + useState(false); + function handleForwardPartyUserLoginPage() { + try { + setDisableForwardPartyUserLoginButton(true); + router.push(PATHS.PARTY_USER_SIGN_IN); + setDisableForwardPartyUserLoginButton(false); + } catch (error) { + console.error(error); + } + } + useEffect(() => { getProfileById('2').then(({ data }) => { console.log({ data }); @@ -180,6 +202,7 @@ const MyProfile: React.FC = ({ speakers, speakerSessions }) => not login yet,
please login or sign up + {/* */}
= ({ speakers, speakerSessions }) => Login
+ + {/* */} + +
+ + Party Member Login + +
diff --git a/03_source/mobile/src/pages/Signup/Login.scss b/03_source/mobile/src/pages/Signup/Login.scss new file mode 100644 index 0000000..7de7b89 --- /dev/null +++ b/03_source/mobile/src/pages/Signup/Login.scss @@ -0,0 +1,32 @@ +/** + * Shared Authentication Styles (Duplicate) + * + * Note: This file is identical to ../Login/Login.scss + * + * Contains common styling for: + * - Login page + * - Signup page + * - Support page + * + * Key features: + * - Logo positioning and sizing + * - Form list styling + * - Responsive design for all screen sizes + */ +#login-page, +#signup-page, +#support-page { + .login-logo { + padding: 20px 0; + min-height: 200px; + text-align: center; + } + + .login-logo img { + max-width: 150px; + } + + .list { + margin-bottom: 0; + } +} diff --git a/03_source/mobile/src/pages/Signup.tsx b/03_source/mobile/src/pages/Signup/index.tsx similarity index 87% rename from 03_source/mobile/src/pages/Signup.tsx rename to 03_source/mobile/src/pages/Signup/index.tsx index 9096c68..6dafb68 100644 --- a/03_source/mobile/src/pages/Signup.tsx +++ b/03_source/mobile/src/pages/Signup/index.tsx @@ -1,3 +1,18 @@ +/** + * Signup Page Component + * + * Handles new user registration with: + * - Username/password input fields + * - Form validation + * - Registration state management + * + * Note: Currently shares styling and some logic with Login page + * (imports Login.scss and similar state management) + * + * Connects to Redux store for: + * - Setting authentication state + * - Storing username + */ import React, { useState } from 'react'; import { IonHeader, @@ -16,8 +31,8 @@ import { IonText, } from '@ionic/react'; import './Login.scss'; -import { setIsLoggedIn, setUsername } from '../data/user/user.actions'; -import { connect } from '../data/connect'; +import { setIsLoggedIn, setUsername } from '../../data/user/user.actions'; +import { connect } from '../../data/connect'; import { RouteComponentProps } from 'react-router'; interface OwnProps extends RouteComponentProps {}