Metriche repository
- Star
- (17 stelle)
- Metriche merge PR
- (Metriche PR in attesa)
Descrizione
Important Note
- Please read the guidelines first
- Include the open-source program name(s) you are part of in your comment
Issue Description
Design and implement the Sign In Page UI for the WallGodds app, allowing users to sign into an existing account using social providers or email credentials.
Design Requirements
-
Strictly UI Only: This task focuses purely on the UI layout and basic input behavior. No authentication logic, API calls, or account creation functionality is required.
-
Header Section: i. Display the “Sign In” title prominently at the top. ii. Below it, include the subtitle: “Welcome back! Sign in to explore and manage your favorite wallpapers"
-
Social Sign-In Options: i. Provide three rounded buttons for signing up using external providers: Google, Microsoft and Github ii. Each button should include the respective logo and label, styled consistently with the design.
-
Divider Text: Display a small “or” text separating the social login options and the email form.
-
Input Fields: i. Create four rounded text input fields: Email *, Password * ii. The Password and Confirm password fields must hide the entered text and display "*" characters instead.
-
Forgot Password: i. Add a right aligned clickable text "Forgot Password?" ii. Just make the button clickable and that's it. No need to assign navigation or any other logic to it.
-
Primary Action Button: i. Add a prominent “Sign In” button below the form fields. ii. No submission logic is required.
-
Sign-In Redirect Text: Display the text: i. "Don’t have an account ? Sign up here" ii. The “Sign up here” portion should be a button and appear visually highlighted.
-
Scope Limitation: i. This issue focuses only on rendering the UI. ii. Authentication, validation, and navigation logic are not part of this task.
Reference: Check the design.md file in the repository to get your hands on the Figma design file. Ensure the layout, spacing, icons and typography strictly follow the provided design.
If you face any issues while working on this page or have questions, feel free to reach out to us on Discord — we’re always happy to help!