Skip to content

Implement new TeacherSignInCard component #658

@Rutjake

Description

@Rutjake

Feature Description

The goal of this issue is to replace the current content of the existing /teachers page with the new TeacherSignInCard component based on the provided design. Since the authentication backend is not yet ready, this will be a "dumb" presentational component for now. Clicking the submit button should simply navigate the user to /teachers/instructions.

The design features a login card centered on a brick wall background, decorated with the ALT logo and an illustrated teacher character. All UI texts must support localization (i18n) for both Finnish and English, matching the current localization setup of the page.


🌟 Benefits of the Enhancement

  • User Experience: Provides teachers with a polished, thematic, and brand-aligned entry point.
  • Responsiveness: Ensures the login card and decorative assets scale nicely across all screen sizes, even though the page is primarily intended for desktop use.
  • Simplified Workflow: Acts as a straightforward, temporary gateway that unblocks the next steps in the user journey (/teachers/instructions).

🛠️ Proposed Implementation

  • Component Name: TeacherSignInCard
  • Target Page: /teachers (TeachersPage.tsx)

Implementation Plan:

  • Clean Up: Remove the existing content from the /teachers page to make room for the new card.
  • Localization (i18n):
    • Implement all UI strings (headers, placeholders, button text) using the existing i18n setup.
    • Provide translations for both Finnish and English.
  • Card Design & Styling:
    • Implement the card container with its distinct yellow/orange border.
    • Position the ALT logo overlapping the top-left corner of the card.
    • Position the Teacher character asset breaking out of the bottom-right corner of the card.
  • Form Elements:
    • Add the "Opettajan kirjautuminen" header with the correct serif/display font styling.
    • Create styled inputs for Käyttäjätunnus (Username) and Salasana (Password), including the eye/visibility icons inside the inputs.
    • Create the yellow/orange pill-shaped Kirjaudu sisään button (reuse the existing button component if it fits the purpose).
  • Interactions & Navigation:
    • Make the component "dumb": no form submission logic or API validation is needed yet.
    • Clicking the "Kirjaudu sisään" button must simply route/redirect the user to /teachers/instructions.
  • Responsiveness: Ensure the card, form inputs, and overlapping absolute assets (logo and character) adapt cleanly to mobile, tablet, and desktop screens, keeping in mind that the page is primarily designed for desktop use.

📎 Additional Information

  • Note: The fields are placeholders for now, and no real login state is managed in this phase.
  • Links & References:
    🔗Figma Designs
    📷 Preview:
Image

Metadata

Metadata

Assignees

Labels

featureFor new featureshighly wantedWe’d appreciate getting this done—it’s highly wanted

Type

No type
No fields configured for issues without a type.

Projects

Status
In progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions