🐛 Issue: Username Validation in Account Creation

[mdazfar2]

Description

We have identified an issue in the account creation process on HelpOps-Hub. Currently, when users create an account on our website, the username field appears at the end. If the user enters a username with spaces, it is accepted, which is not ideal for a username.

• Suppose I create an account on the website and reach the username field at the end; if I enter a name with spaces (e.g., azfar alam), it is currently accepted.

• I want a validation or alert message to appear when the user enters a name with spaces, prompting them not to include spaces, similar to Instagram, GitHub, and other websites.

which username will be accepted --> (e.g., mdazfar2, rahul_saini, anyname_without-space02)

[!NOTE] If you are entering the same username which has created by someone else then it should not acceptable.

Screenshot 1 - Create account with gmail and OTP

Screenshot 2 - Create account with Google or GitHub (providers)

💡 Expected Behavior

1. No Spaces in Username: Display an alert message if a user attempts to add spaces in their username. The message should clearly indicate:

   "Usernames cannot contain spaces. Please enter a valid username without spaces."

2. Check for Existing Usernames: If the entered username is already taken, prompt a message:

   "This username is already taken. Please choose a different username."

🤔 Additional Context

This issue will enhance the user experience by preventing invalid usernames from being submitted and ensuring each username is unique. We encourage contributors to follow best practices for validation, alerts, and UI consistency.

[!NOTE] You will receive a level 3 label for the GSSoC-Ext leaderboard points after the pull request for this issue is merged.

Checklist

• [X] Yes, this is Under GSSoC'24-Ext

[Harsh1t-coder]

Please assign this issue to me

[mdazfar2]

Please assign this issue to me

@Harsh1t-coder you are assigned.

Try to understand the whole codebase and work accordingly.

• Hope you read the CONTRIBUTING Guidelines.

Create PR as soon as possible otherwise I have to give anyone else opportunity.

• Please try to add comments about where and what type of changes you made.
• Please don't add unnecessary code if there is no need! Thanks! :)

[mdazfar2]

Hey @Harsh1t-coder Confirm me whether you are working or not?

[Harsh1t-coder]

Hello @mdazfar2 , i have started working, will raise the PR soon :)

[Harsh1t-coder]

Hey @mdazfar2 , i have made the required changes but i couldn't test locally as it gives error after entering email id in signup, can you please help me how can i proceed with testing? or should i directly create pull request?

[mdazfar2]

@Harsh1t-coder Did you fill in the environment variables? Set the environment variables, then run and check the sign-in.

[Harsh1t-coder]

@mdazfar2 , do i have to fill all this information?

MONGO_URI=Your_Mongo_Uri EMAIL_ID="Your_Email_Id" EMAIL_APP_PASS="Your_Google_App_Password" CLIENT_ID="Your google client id" CLIENT_SECRET=" your google client secret"

[mdazfar2]

@mdazfar2 , do i have to fill all this information?

MONGO_URI=Your_Mongo_Uri EMAIL_ID="Your_Email_Id" EMAIL_APP_PASS="Your_Google_App_Password" CLIENT_ID="Your google client id" CLIENT_SECRET=" your google client secret"

Yes @Harsh1t-coder you have to fill all these for running the backend part.

[Harsh1t-coder]

yes @mdazfar2 , i am working first time on this, thanks for the help. i can access now. currently in testing phase

[mdazfar2]

Great @Harsh1t-coder good to hear.

[mdazfar2]

@Harsh1t-coder If you create an account on the deployed website, please use your existing email to receive the OTP for the next step.

[Harsh1t-coder]

@mdazfar2 , Looks good?

[Harsh1t-coder]

@mdazfar2 if user will try to enter spaces it will show the 1 screenshot error.

[mdazfar2]

@Harsh1t-coder send me the demo video

[mdazfar2]

@Harsh1t-coder If you can’t do it, let me know, and I’ll assign this issue to someone else. Please don’t be discouraged; I really appreciate your enthusiasm and hard work on this project. What you’ve done so far wouldn’t have been possible for others.

[Harsh1t-coder]

@mdazfar2 , thanks for your concern but testing has been completed , its working fine. Uploading the video

[Harsh1t-coder]

@mdazfar2 , Sign In with Google https://github.com/user-attachments/assets/2bf43df0-c085-4d70-bbd2-848ab707e23b

[Harsh1t-coder]

@mdazfar2 , sign up with email:

https://github.com/user-attachments/assets/937f90b1-4354-4866-a0a0-74dffc10f1ad

[mdazfar2]

@Harsh1t-coder You are not understanding what exactly we want to update. Please read the issue first. What you have done is good, but it addresses the second part of the issue, for existing users. The main issue is that an account can be created with spaces in the username. You still don't seem to understand what the issue is exactly about.

[Harsh1t-coder]

@mdazfar2 , No one can create username with space now, this has been fixed as well.

[Harsh1t-coder]

@mdazfar2 , both the issues has been fixed. Please check the given video and screenshots

[mdazfar2]

Try to put anything put in username field with spaces and click on create account, and then give me a screenshot

[Harsh1t-coder]

@mdazfar2 , user can't insert spaces it will give an error after presing space or tab. so there is no need to click on create account for getting an error.

[mdazfar2]

Alright create PR I'll look into it

[Harsh1t-coder]

Okay, thanks

[Harsh1t-coder]

@mdazfar2 , i have created a pull request. please let me know if there are any feedbacks or improvements that i should keep in mind for my journey ahead. thanks a lot :)

[github-actions[bot]]

Hello @mdazfar2! Your issue #1446 has been closed. Thank you for your contribution!