05: OTP page implementation

[kiranharidas187]

Description

Implement the complete OTP page UI and API flows.

Goals

• [ ] Implement the OTP page UI
• [ ] Complete the API implementation

Acceptance Criteria

• [ ] The OTP page should work as expected.
• [ ] Page should be made responsive in all screen sizes

Implementation Details

Angular, HTML, CSS

Mockups / Wireframes

All the Auth flows can be viewed in this portal

Product Name

SL-auth-library

Project Name

SL-auth-library

Organization Name:

Shikshalokam

Domain

Education

Tech Skills Needed:

Angular, HTML, CSS

Mentor(s)

Amoghavarsh

Complexity

Medium

Category

Features

Sub Category

Frontend, Library

[Gmin2]

@kiranharidas187 would love to work in it

[Kodiererin]

@kiranharidas187 @Min2who @Shruti3004 Can you please assign me this task.

[abansal15]

hello @kiranharidas187 @Min2who @Shruti3004 Can you please assign me this task?

[SanjayRam07]

hello @kiranharidas187 , can I work on this issue? Could you please assign and mentor me?

[Y3ABHISHEK]

Hi @Kodiererin @abansal15 @Min2who @SanjayRam07 Can you please share the roadmap of how you will solve this ticket?

[Gmin2]

@Y3ABHISHEK as there is no project initialise in this repowe need to setup an Angular project then generate a new component for the OTP page and then creating a model(classes) to handle request for OTP verification and define methods to send OTP to users email and validate them

[simran142002]

@kiranharidas187

I did work on this as well in my previous pr , need to improve the UI and even the api

Currently they are both in the same repository should I create a separate repository for this

Heres the link to the pr, it contains both the sign up page and otp verification page https://github.com/simran142002/SignUpPage

[SanjayRam07]

@kiranharidas187 @Y3ABHISHEK Here's my workflow: Step 1: Set Up Angular Project

1. Create a new Angular project named SL-auth-library.
2. Set up necessary dependencies and configurations.

Step 2: Design OTP Page UI

1. Refer to the provided mockups or wireframes for designing the OTP page UI.
2. Use HTML and CSS to create the UI components, ensuring responsiveness for all screen sizes.
3. Include input fields for OTP entry, buttons for submission, and any additional UI elements required.

Step 3: Implement API Integration

1. Define API endpoints for OTP verification in your backend (assuming it's already implemented).
2. Use Angular's HttpClient module to make HTTP requests to the API endpoints.
3. Implement methods to handle OTP submission and verification logic.
4. Handle API responses appropriately, considering success and error scenarios.

Step 4: Connect UI with API

1. Bind UI elements such as input fields and buttons with corresponding methods for OTP submission.
2. Handle user interactions and trigger API requests accordingly.
3. Update UI based on API responses to provide feedback to the user.

Step 5: Test and Debug

1. Test the OTP page UI and API flows thoroughly to ensure they work as expected.
2. Debug any issues encountered during testing.
3. Verify responsiveness across various screen sizes using browser developer tools or testing on different devices.

Step 6: Document and Review

1. Document the implementation details, including any configurations, API endpoints used, and logic implemented.
2. Review the code with the mentor to ensure compliance with requirements and standards.

Kindly give me a response

[harsh3107-02]

Hey @kiranharidas187 I want to work on it . Assign this issue to me.

[sid-nc]

@kiranharidas187 Can I get assigned to this

[prakharahkarp]

hello @kiranharidas187 sir! I feels i have skills required for this project and i would love to contributr. Could you please assign this ticket to me?

[Yash-Sajwan24]

@kiranharidas187 I understand the problem, and I believe I have the necessary skills. Could I have the opportunity to work on this?

[aryangandhi05]

Hare Krishna @kiranharidas187 Sir i want to solve this issue, as i understand it, and i will give my 100% for solving this issue So please, can you assign me this?

[Lahu19]

Hello there, Since I think I can meet the project's requirements and because I have already contributed a PR showcasing my abilities, I would like to offer assistance with the implementation of the OTP page.

the landing page of https://github.com/Code4GovTech and pull (3) I'll be waiting to hear back.

[2003sidd]

Hello Sir @kiranharidas187, I want to work on the issues as I have all the necessary skills to solve all the issues listed here. But i have a doubt that all the issues is solved but they are still open.

• Login Page

• Signup Page

• Reset password Page

• Otp Page

and they work well. So why they are still open, to improve UI or not satisfied with the code? please help me out so I can start my open-source journey from here.

[Guptasameer533]

Hi @kiranharidas187, I have read the project description in detail.

Therefore, as an experienced Angular developer, I possess the requisite skills to implement the OTP page and API flows effectively. My expertise lies in crafting responsive designs, seamlessly integrating with APIs, and conducting comprehensive testing. I am committed to delivering high-quality work that adheres to the project's standards.

Furthermore, I am eager to collaborate closely with the team to ensure a successful implementation of this feature.

[Srivastava-Smriti]

Hello, @kiranharidas187, I have designed this otp verification page, and I can make the changes to the layout and the functioning using Angular as per the projects requirements. Can you please assign this ticket to me, here is the image for the reference.

[heyhimansh]

@kiranharidas187 Can I get assigned to this issue.

[amanjaiswal7236]

@kiranharidas187 I have already designed an otp verification page in React, and I can make the changes to the layout and the functioning using Angular as per the projects requirements. Can you please assign this ticket to me.