Skip to content

feature: verification page with entering verification code and resend otp option (TCS-12) #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 8 commits into
base: development
Choose a base branch
from

Conversation

erandi-perera
Copy link
Member

@erandi-perera erandi-perera commented Jan 26, 2025

This PR introduces Verification Page with entering Verification Code and resend OTP option

📌 Description

The Verification Page is designed to allow users to input a verification code sent to their email or phone during the authentication process. It serves as the second step in a multi-factor authentication workflow.

📒 Summary of Changes

  • Consistent Layout
  • Verification Input Fields
  • Shows the email where the OTP has been sent
  • Resend Code Text
  • Verify Button
  • Input Limit: Ensure only one character is allowed per box
  • Unfocus Logic: If the last field is filled, the keyboard is dismissed
  • Complete Reset Option
  • Automatic Forward Navigation
  • Clear All Boxes After Verification

📱 View Screenshots
This is the design for Verification Page Changing the border color of the boxes
Screenshot 2025-01-26 135902 Screenshot 2025-01-26 135922
When a number is entered, the focus automatically moves to the next field. If the last field is filled, the keyboard will automatically be dismissed
Screenshot 2025-01-26 135945 Screenshot 2025-01-26 144250

@lithika-damnod lithika-damnod changed the base branch from master to development January 26, 2025 10:38
@lithika-damnod lithika-damnod added this to the v1.0.0-alpha milestone Jan 26, 2025
@lithika-damnod
Copy link
Member

There's an issue with code formatting, you can reformat the code by running the command dart format lib/pages/authentication/views/verification_page.dart lib/shared/widgets/styled_text_field.dart on the terminal...

const Padding(
padding: EdgeInsets.only(left: 5.0),
child: Text(
"We've sent a verification code to your email address",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The email address containing text is missing...
the design provided:

image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Increase the font weight of the email text to match with the rest of the title

image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed the font weight of the email text

),
Padding(
padding: const EdgeInsets.only(top: 60.0),
child: TextButton(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TextButton is missing its fill color and the timer...
It should look something like this:

image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done this as well!

Copy link
Member

@lithika-damnod lithika-damnod Jan 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Check if the fill color matches the background color in UI design.
  • Implement a working timer (you may create your own custom widget for this).
  • Look into matching font weights with the design provided.
  • Implement the 'resend' button when the timer has finished.
  • Add a property to the StyledTextField widget that allows disabling the '❌' icon when a specific parameter is passed.
  • Implement automatic cursor jumping to next TextField widget, when a value is entered in a specific TextField.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed all the issues mentioned above!

Final result

Screenshot 2025-02-01 181616

Screenshot 2025-02-01 181554

@lithika-damnod lithika-damnod marked this pull request as draft January 26, 2025 15:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants