Add username unavailability indicator and validation to Edit Profile … #580
Conversation
|
🎉 Welcome @4555jan!
We appreciate your contribution! 🚀 |
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughThis PR implements a username availability checking feature in the EditProfileScreen by adding reactive state tracking in the controller and integrating debounced validation logic with real-time UI feedback in the screen, including availability indicators and error messaging. Changes
Sequence DiagramsequenceDiagram
actor User
participant Screen as EditProfileScreen
participant Debouncer
participant Validator
participant API as Availability<br/>Check
participant Controller
User->>Screen: Types username
Screen->>Debouncer: Queue availability check
Debouncer-->>Debouncer: Wait for input pause
Debouncer->>Validator: Validate format & length
alt Invalid Format/Length
Validator-->>Screen: Show error snackbar
Screen->>Screen: Hide verification icon
else Valid Format
Validator-->>Screen: Format OK
Screen->>Controller: Set usernameAvailableChecking = true
Controller-->>Screen: Update UI (show "checking")
Screen->>API: Check username availability
API-->>Screen: Available/Unavailable
alt Username Available
Screen->>Screen: Show green icon
Screen->>Controller: Set usernameAvailableChecking = false
else Username Taken
Screen->>Screen: Show error snackbar
Screen->>Controller: Set usernameAvailableChecking = false
end
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@M4dhav i added a debouncer of 800ms delay because During testing, I noticed that the username validation was triggering api calls with every letter ig and i saw a debouncer being used in basically in the onboarding too please review/check if i made any major mistakes i will fix it asap |
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
|
Hey @4555jan , for future reference, user with username CodeRabbit is someone else, and not the CodeRabbit ai Bot. Please tag coderabbitai to request future reviews. Although CodeRabbitAI still detects the command, it is probably annoying for the actual user with the CodeRabbit username. |
|
sorry i will make sure of that @M4dhav in the future i think i made a minor/major mistake with my commit in the files i will fix it soon are these changes that i made is mergeable or did made major mistakes ? |
|
Currently reviewing, will let you know |
M4dhav
left a comment
M4dhav
left a comment
There was a problem hiding this comment.
Please share a video of the functionality
|
@M4dhav sure I will upload it tmrw |
…ler the variable was 'username Available'
|
Could you please include the part in the video where the username is valid? Also, I think the representation of valid/invalid usernames as done in the sign up flow is better than this |
|
@M4dhav ok i uploaded another video and by representation do you mean the way it shows the invalid message is the problem ?like the design is the problem ? Or my entire change is wrong ? |
|
Okay, design looks fine. One small change though, we have a minimum length of username, it is 6 or 7, you need to check for the exact value. Below that length the check should not trigger. Also, how does the UI react when a username is taken? |
|
@M4dhav i uploaded another video regarding how the ui will change if the username is taken |
|
UI Looks fine, can you make the change for minimum length please? |
|
@M4dhav i changed the minimum length to 7 as you mentioned |
M4dhav
left a comment
M4dhav
left a comment
There was a problem hiding this comment.
Please run flutter gen-l10n with each PR to check untranslated.txt into source
| AppLocalizations.of( | ||
| context, | ||
| )!.usernameUnavailable, | ||
| "Username can only contain letters, numbers, dots, hyphens, and underscores (max 36 characters)", |
| } | ||
|
|
||
| // Temporarily show checking state | ||
| controller.usernameAvailable.value = true; |
There was a problem hiding this comment.
This is not a checking state, this will show the user a green tick even while checking
|
i had to force push earlier cause i was haveing branch issues and i removed rethrow and just logging the errors as we are already showing it snakebar |
M4dhav
left a comment
M4dhav
left a comment
There was a problem hiding this comment.
Please share a video of the functionality as it looks right now in a new comment
screen-recording-2026-01-04-180954_e9HyAd0b.mp4video functionality @M4dhav |
|
|
||
| if (value.length >= 7) { | ||
| final validUsername = RegExp( | ||
| r'^[a-zA-Z0-9._-]+$', | ||
| ).hasMatch(value.trim()); | ||
|
|
||
| if (!validUsername || value.trim().length > 36) { | ||
| controller.usernameAvailable.value = false; | ||
| controller.usernameChecking.value = false; | ||
|
|
||
| customSnackbar( | ||
| AppLocalizations.of( | ||
| context, | ||
| )!.usernameUnavailable, | ||
| AppLocalizations.of( | ||
| context, | ||
| )!.usernameInvalidFormat, | ||
| LogType.error, | ||
| snackbarDuration: 1, | ||
| ); | ||
| return; | ||
| } |
There was a problem hiding this comment.
We do not need snackbars here anymore, the Validator is handling this
| controller.usernameChecking.value = true; | ||
| controller.usernameAvailable.value = false; | ||
|
|
||
| debouncer.run(() async { | ||
| final available = await controller | ||
| .isUsernameAvailable(value.trim()); | ||
|
|
||
| controller.usernameChecking.value = false; | ||
| controller.usernameAvailable.value = available; | ||
|
|
||
| if (!available) { | ||
| customSnackbar( | ||
| AppLocalizations.of( | ||
| context, | ||
| )!.usernameUnavailable, | ||
| AppLocalizations.of( | ||
| context, | ||
| )!.usernameAlreadyTaken, | ||
| LogType.error, | ||
| snackbarDuration: 1, | ||
| ); | ||
| } | ||
| }); |
There was a problem hiding this comment.
All this logic can also be moved to the validator
was i also supposed to remove this block as well? @M4dhav |
that was what I intended earlier, but it's fine. We can leave it as is |
|
As a final check, can you share a final video of how everything looks? |
|
@M4dhav i am sorry i can remove that snake bar as well? even i got that doubt after commit |
It's alright. I think that snackbar probably does need to be there anyways. My suggestion was to move the check login to the Validator, not remove that particular snackbar, but I realise it's better to have the separation |
|
is it correct? i was having some branch issues in the main repo earlier with upstream and all so i tested it like this thats why there is no M beside the files |
|
Is this the latest commit? The latest code in the PR doesn't seem to have Snackbars triggered for Usernames with invalid characters |
i am sorry i made a mistake in hurry that video wasnt made on the main repo i wil just resent it |
|
³before making the last change screen-recording-2026-01-07-032908_1EtybjVF.mp4after making the last change screen-recording-2026-01-07-035049_SUPbcxxf.mp4as before it was the icon was showing green and button was showing enable even when the username had special char |
| controller.usernameAvailable.value && | ||
| controller.usernameController.text | ||
| .trim() | ||
| .length >= | ||
| 7 && | ||
| RegExp(r'^[a-zA-Z0-9._-]+$').hasMatch( | ||
| controller.usernameController.text.trim(), | ||
| )) |
There was a problem hiding this comment.
instead of using all these conditions, just set usernameAvailable to false if any of the conditions are violated (length/composition)
There was a problem hiding this comment.
Please add translations for these strings for your native languages
|
@M4dhav do i need to sent the video ? it works similar way like the old one i sented ... |
Yes please do |
screen-recording-2026-01-08-153548_F7JLA4aa.mp4is it correct? now ? @M4dhav |
|
When the debouncer runs and username is found to be unavailable, shouldn't the text field have a Red cross icon at the end? Also shorten the validator text as now it is only in the validator and we have less space there |
something like this? 
this is how it can be implemented with a circular indicator |
|
Was there nothing there before? How does the other place with the check handle it? |
please elaborate.........i didnt understood ...... what is actually breaking in the feature ? if you mean by the suffixicon than it was just green before just the way it is in the dev repo before i made all this change in this feature
|
2 participants
Description
This PR adds the username unavailability indicator feature to the Edit Profile Screen, matching the functionality already present in the Onboarding Screen. Previously, the Edit Profile Screen only showed when a username was available but provided no feedback when a username was unavailable or invalid.
Changes made:
usernameAvailableCheckingobservable to track validation stateFixes #440
screen-recording-2025-11-23-100747_7v5xHbCz.mp4
Type of change
How Has This Been Tested?
Manual Testing:
Test Configuration:
Checklist:
Maintainer Checklist
Summary by CodeRabbit
Release Notes