Mobile: Implementing Verification Screen

[egemenatikk]

Issue Description

As we decided on our first mobile team meeting, I have to implement Verification screen of our mobile application.

Step Details

Steps that will be performed:

• Initialize verification screen
• Add necessary widgets: confirm button, verification code insert fields, etc.
• Add logo, title, etc. miscellaneous components
• Set up proper navigation routes

Final Actions

After I complete all steps mentioned above, I will test my code on an emulator. If it works as we wish, I will open a pull request to merge my code with the existing code for mobile part of our application.

Deadline of the Issue

27.10.2022 - Thursday - 23:59

Reviewer

Ezgi Aysel Batı

Deadline for the Review

28.10.2022 - Friday - 23:59

[egemenatikk]

I completed implementation of verification screen. Here is a general look to the screen.

In the final form, the screen has our application's logo at the top, then it has the name of the page, in my case I wrote "Verify your email" as the title.

Just below the title, a short description takes place to inform user about what they should do.

Below that, 4 digit fields are available for users to enter their verification codes. As digits are entered, focus moves to next field automatically and as digits are deleted, focus moves to previous field. After all 4 digits are entered, verify button activates.

This screen also has a request another code button, if it is pressed, remaining time resets. I did not set up the backend connection yet but when I do, the application will also send a new verification code when this button is pressed.

Next, there is also another text informing user about the remaining time for entering the verification code.

Lastly, there are verify button which is activated when all 4 code fields are filled and change email button that navigates user to email entering screen.

[egemenatikk]

Here is another screenshot when all 4 verification code fields are entered and verify button is activated:

[egemenatikk]

Here is another screenshot when "Request another code" button is pressed and remaining time is resetted:

[egemenatikk]

Here is the final screenshot of verification screen:

Verify button activates when all input fields are filled and remaining time is not zero.

[egemenatikk]

Pull request is merged, so I am closing this issue.