Create SignIn Page

[fabiorodriguesdev]

Description

Create the LoginPage using PublicLayout. The page displays a sign-in form with email, password fields, and a sign-in button.

Page Structure

PublicLayout (navText="Don't have account?", navLinkLabel="SIGN UP", navLinkHref="/signup")
└── Form Container (max-width constrained, centered)
    ├── Heading: "Sign in to ReDi Events"
    ├── Subheading: "Enter your details below."
    ├── InputField (label="E-mail", type="email", placeholder="Enter your e-mail")
    ├── InputField (label="Password", type="password", placeholder="********", showPasswordToggle=true)
    └── Button (intent="signIn", label="SIGN IN", fullWidth or fixed width)

Props / State

interface LoginPageProps {
  onSubmit: (email: string, password: string) => void;
  isLoading?: boolean;
  error?: string; // server error message
}

Acceptance Criteria

• Uses PublicLayout with "Don't have account? SIGN UP" nav link in top-right
• Heading "Sign in to ReDi Events" + subheading "Enter your details below."
• E-mail field: label, placeholder, required validation
• Password field: label, placeholder masked, eye icon toggle to reveal password
• "SIGN IN" button in teal, triggers onSubmit with email & password
• Validation states:
  • Empty email → show error on field
  • Invalid email format → show error on field
  • Empty password → show error on field
  • Server error → show InfoText (variant="error") above form or below fields
• Loading state: Button shows loading indicator, fields disabled
• Form submits on Enter key press
• Storybook stories:
  • Default (empty form)
  • Filled form
  • With field validation errors
  • With server error message
  • Loading state
• Accessible: proper form labels, focus management, error announcements