[UI]: Implementing a Role Based Login Page for Admin and Users

[balaji-sivasakthi]

Description:

The objective of this issue is to design and develop a login page that caters to both administrators and regular users within the existing open-source project. Currently, the project lacks a proper authentication system, making it difficult to differentiate between various user roles and provide appropriate access control.

Sub issue of #29

Tasks:

1. Design the login page UI:

• Create a user-friendly interface that accommodates both administrators and regular users.
• Consider incorporating intuitive elements like input fields for username and password, "Remember Me" option, and "Forgot Password" functionality.

2. Implement user authentication:

• Develop the back-end functionality to handle user authentication.
• Design a secure authentication mechanism, such as using salted and hashed passwords, to protect user credentials.
• Validate user inputs to prevent common security vulnerabilities.

3. Manage user roles:

• Establish a role-based access control system to differentiate between administrators and regular users.
• Implement an authorization layer that restricts access to specific features or sections based on user roles.
• Ensure that administrators have access to administrative functions, while regular users are restricted to their respective functionalities.

4. Enhance security measures:

• Implement measures to prevent brute-force attacks, such as account lockouts or CAPTCHA verification.
• Consider adding two-factor authentication (2FA) as an optional security feature for users.

5. Testing and bug fixing:

• Thoroughly test the login page to ensure proper functionality and a seamless user experience.
• Identify and fix any bugs, vulnerabilities, or usability issues that may arise during testing.

Additional Considerations:

• Maintain a consistent design and user experience with the rest of the project.
• Ensure compatibility with different browsers and devices.
• Document the implementation process, including any new dependencies or modifications made to the existing codebase.
• Adhere to established coding conventions and standards within the project.
• Consider incorporating user feedback and suggestions during the development process.

Simple Login Flow

Google Auth flow

Note: It is advisable to consult with the project maintainers or the development community to gather their input and guidance throughout the implementation of this issue.

[amanjaiman1]

@SurajPratap10 @tarunsinghofficial What are your thoughts on this Idea.

[balaji-sivasakthi]

I would like to provide some additional input regarding the UI wireframe. My thoughts on the admin login are that we should not expose it to regular users. Instead, we can implement a login functionality accessible through a specific URL, such as https://example.com/admin/login.

[amanjaiman1]

I really loved your demographic view of the upcoming implementation. You may start working and if you need any help just message me through Discord or Whatsapp