Repository navigation
Refactor input components to use LabeledInput for better consistency … - #177
Merged
Merged
Conversation
…and readability - Replaced Input with LabeledInput in various registration and profile settings screens. - Updated styles for LabeledInput to match the design specifications. - Removed redundant input styling and encapsulated it within LabeledInput. - Enhanced error handling display for inputs in the registration and profile forms.
|
Warning Rate limit exceeded
To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe PR introduces a new Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Review rate limit: 0/1 reviews remaining, refill in 15 minutes and 21 seconds.Comment |
Jamie-Poeffel
self-requested a review
May 1, 2026 11:48
Jamie-Poeffel
previously approved these changes
May 1, 2026
Jamie-Poeffel
self-requested a review
May 1, 2026 11:53
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
components/LabeledInput.tsx (1)
48-59: ⚡ Quick winKeep the base input style in one place.
components/input.tsx:33-44already owns the same height/radius/padding/background block, so restating it here creates an easy drift point. LetInputprovide the default field chrome and only merge caller-specific overrides fromstyle.Suggested simplification
<Input {...props} - style={[ - { - height: 52, - borderWidth: 0, - borderRadius: 18, - paddingHorizontal: 16, - fontSize: 15, - marginTop: 0, - backgroundColor: theme.card, - }, - style, - ]} + style={style} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/LabeledInput.tsx` around lines 48 - 59, The LabeledInput file duplicates the base input chrome (height, borderRadius, paddingHorizontal, backgroundColor) that Input already defines in components/input.tsx; remove those hard-coded defaults from LabeledInput's inline style and let the Input component provide its default chrome, only merging the consumer-provided style prop, e.g. keep the style array but drop the base block so LabeledInput passes through style overrides to Input; reference the LabeledInput component and the Input component in components/input.tsx when making the change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/`(auth)/login/forgot-password.tsx:
- Around line 177-200: The shared error string is only rendered on the
confirm-password LabeledInput, so when onSubmitNewPassword() validates the new
password length the message appears under the wrong field; change the error
handling to track and render per-field errors (either add two states like
newPasswordError and confPasswordError or make error an object {newPassword,
confPassword}), update the onChangeText handlers to clear the corresponding
field error (e.g., setNewPassword clears newPasswordError, setConfPassword
clears confPasswordError), and modify onSubmitNewPassword to set the specific
field error (setNewPasswordError or setConfPasswordError) based on which
validation fails, then pass the matching error prop to each LabeledInput
(error={newPasswordError ?? undefined} for the new password input and
error={confPasswordError ?? undefined} for the confirm input).
In `@app/`(auth)/register/password.tsx:
- Around line 92-98: The onChangeText handler for the password field only clears
error.password, leaving a stale "passwords do not match" on error.confPassword;
update the handler in the component where setPasswordInput and setError are used
(the password input onChangeText) to also clear error.confPassword when present
— e.g. inside the existing if block add a check for error.confPassword and call
setError(prev => ({ ...prev, password: undefined, confPassword: undefined })) so
the confirm-field mismatch error is removed as soon as the primary password
changes.
In `@app/`(protected)/settings/personaldetails.tsx:
- Around line 548-563: The email and phone LabeledInput fields (props
value={email} onChangeText={setEmail} and value={phone} onChangeText={setPhone})
are editable but not included in the PATCH sent by handleSaveAndExit; either
include email and phone in the PATCH payload assembled in handleSaveAndExit (add
email and phone alongside firstName, lastName, country, jobTitle, aboutMe,
dateOfBirth) if the API supports updating them, or make the LabeledInput fields
readOnly/disabled so edits cannot be made in the UI; update the code in
handleSaveAndExit (the function that builds the PATCH body) or set the
LabeledInput props to readOnly/disabled to match backend capabilities.
In `@components/LabeledInput.tsx`:
- Around line 46-60: Pass the visible label through to the underlying Input
component and surface the error state for assistive tech: in the LabeledInput
wrapper, provide accessibilityLabel={label} on the Input component and set
accessibilityState={{ invalid: !!error }} (or merge into existing
accessibilityState) so screen readers know the field name and when it's invalid;
keep existing props spread and preserve style.
---
Nitpick comments:
In `@components/LabeledInput.tsx`:
- Around line 48-59: The LabeledInput file duplicates the base input chrome
(height, borderRadius, paddingHorizontal, backgroundColor) that Input already
defines in components/input.tsx; remove those hard-coded defaults from
LabeledInput's inline style and let the Input component provide its default
chrome, only merging the consumer-provided style prop, e.g. keep the style array
but drop the base block so LabeledInput passes through style overrides to Input;
reference the LabeledInput component and the Input component in
components/input.tsx when making the change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8f02cfb3-f1dd-456c-84de-19819c434fb3
📒 Files selected for processing (12)
app/(auth)/login/forgot-password.tsxapp/(auth)/login/withEmail.tsxapp/(auth)/login/withPhoneNumber.tsxapp/(auth)/register/addProfileData.tsxapp/(auth)/register/password.tsxapp/(auth)/register/withEmail.tsxapp/(protected)/settings/personaldetails.tsxapp/(protected)/settings/security.tsxapp/complete-profile/name.tsxapp/complete-profile/personalDetails.tsxcomponents/LabeledInput.tsxcomponents/input.tsx
Comment on lines
+177
to
+200
| <LabeledInput | ||
| label={t("newPasswordPlaceholder")} | ||
| placeholder="••••••••" | ||
| secureTextEntry | ||
| textContentType="newPassword" | ||
| autoComplete="new-password" | ||
| onChangeText={setNewPassword} | ||
| onChangeText={(v) => { | ||
| setNewPassword(v); | ||
| setError(null); | ||
| }} | ||
| value={newPassword} | ||
| /> | ||
| <Input | ||
| placeholder={t("confirmPasswordPlaceholder")} | ||
| <LabeledInput | ||
| label={t("confirmPasswordPlaceholder")} | ||
| placeholder="••••••••" | ||
| secureTextEntry | ||
| textContentType="newPassword" | ||
| autoComplete="new-password" | ||
| onChangeText={setConfPassword} | ||
| onChangeText={(v) => { | ||
| setConfPassword(v); | ||
| setError(null); | ||
| }} | ||
| value={confPassword} | ||
| error={error ?? undefined} |
There was a problem hiding this comment.
Render the validation error on the field that actually failed.
onSubmitNewPassword() uses one shared error string for both rules, but only the confirm-password field renders it. When the new password is too short, the message shows under the wrong input.
Suggested fix
<LabeledInput
label={t("newPasswordPlaceholder")}
placeholder="••••••••"
secureTextEntry
textContentType="newPassword"
autoComplete="new-password"
onChangeText={(v) => {
setNewPassword(v);
setError(null);
}}
value={newPassword}
+ error={error && newPassword.length < 6 ? error : undefined}
/>
<LabeledInput
label={t("confirmPasswordPlaceholder")}
placeholder="••••••••"
secureTextEntry
textContentType="newPassword"
autoComplete="new-password"
onChangeText={(v) => {
setConfPassword(v);
setError(null);
}}
value={confPassword}
- error={error ?? undefined}
+ error={error && newPassword.length >= 6 ? error : undefined}
/>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/`(auth)/login/forgot-password.tsx around lines 177 - 200, The shared
error string is only rendered on the confirm-password LabeledInput, so when
onSubmitNewPassword() validates the new password length the message appears
under the wrong field; change the error handling to track and render per-field
errors (either add two states like newPasswordError and confPasswordError or
make error an object {newPassword, confPassword}), update the onChangeText
handlers to clear the corresponding field error (e.g., setNewPassword clears
newPasswordError, setConfPassword clears confPasswordError), and modify
onSubmitNewPassword to set the specific field error (setNewPasswordError or
setConfPasswordError) based on which validation fails, then pass the matching
error prop to each LabeledInput (error={newPasswordError ?? undefined} for the
new password input and error={confPasswordError ?? undefined} for the confirm
input).
Comment on lines
92
to
+98
| onChangeText={(val) => { | ||
| setPasswordInput(val); | ||
|
|
||
| if (error.password) { | ||
| setError((prev) => ({ | ||
| ...prev, | ||
| password: undefined, | ||
| })); | ||
| setError((prev) => ({ ...prev, password: undefined })); | ||
| } | ||
| }} | ||
| error={error.password?.message} |
There was a problem hiding this comment.
Clear the mismatch error when the password changes.
confPassword validation depends on both inputs. After a “passwords do not match” error, editing the first field can fix it, but this handler only clears error.password, so the stale confirm error keeps showing until the second field is edited.
Suggested fix
onChangeText={(val) => {
setPasswordInput(val);
- if (error.password) {
- setError((prev) => ({ ...prev, password: undefined }));
+ if (error.password || error.confPassword) {
+ setError((prev) => ({
+ ...prev,
+ password: undefined,
+ confPassword: undefined,
+ }));
}
}}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| onChangeText={(val) => { | |
| setPasswordInput(val); | |
| if (error.password) { | |
| setError((prev) => ({ | |
| ...prev, | |
| password: undefined, | |
| })); | |
| setError((prev) => ({ ...prev, password: undefined })); | |
| } | |
| }} | |
| error={error.password?.message} | |
| onChangeText={(val) => { | |
| setPasswordInput(val); | |
| if (error.password || error.confPassword) { | |
| setError((prev) => ({ | |
| ...prev, | |
| password: undefined, | |
| confPassword: undefined, | |
| })); | |
| } | |
| }} | |
| error={error.password?.message} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/`(auth)/register/password.tsx around lines 92 - 98, The onChangeText
handler for the password field only clears error.password, leaving a stale
"passwords do not match" on error.confPassword; update the handler in the
component where setPasswordInput and setError are used (the password input
onChangeText) to also clear error.confPassword when present — e.g. inside the
existing if block add a check for error.confPassword and call setError(prev =>
({ ...prev, password: undefined, confPassword: undefined })) so the
confirm-field mismatch error is removed as soon as the primary password changes.
Comment on lines
+46
to
+60
| <Input | ||
| {...props} | ||
| style={[ | ||
| { | ||
| height: 52, | ||
| borderWidth: 0, | ||
| borderRadius: 18, | ||
| paddingHorizontal: 16, | ||
| fontSize: 15, | ||
| marginTop: 0, | ||
| backgroundColor: theme.card, | ||
| }, | ||
| style, | ||
| ]} | ||
| /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -type f -name "LabeledInput.tsx" -o -name "input.tsx" | head -20Repository: MindsofD23b/Frontend-Elysio
Length of output: 124
🏁 Script executed:
cat -n ./components/LabeledInput.tsxRepository: MindsofD23b/Frontend-Elysio
Length of output: 2293
🏁 Script executed:
cat -n ./components/input.tsxRepository: MindsofD23b/Frontend-Elysio
Length of output: 1791
Expose the field label to assistive tech.
The visible <Text> label is not associated with the underlying TextInput, so screen readers can land on the field without hearing its name reliably. Since this wrapper now backs multiple auth/profile forms, please pass the label through to Input via accessibilityLabel and mark invalid state when error exists.
Suggested fix
interface LabeledInputProps extends TextInputProps {
label: string;
error?: string;
+ accessibilityLabel?: string;
+ accessibilityState?: any;
keyboardType?: "default" | "numeric" | "email-address" | "phone-pad"; export default function LabeledInput({
label,
error,
+ accessibilityLabel,
+ accessibilityState,
style,
...props
}: LabeledInputProps) {
const { theme } = useTheme();
return (
<View style={{ width: "100%", marginTop: 14 }}>
<Text
style={{
fontSize: 14,
fontWeight: "600",
marginBottom: 6,
color: theme.primary,
}}
>
{label}
</Text>
<Input
{...props}
+ accessibilityLabel={accessibilityLabel ?? label}
+ accessibilityState={
+ error
+ ? { ...(accessibilityState ?? {}), invalid: true }
+ : accessibilityState
+ }
style={[🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/LabeledInput.tsx` around lines 46 - 60, Pass the visible label
through to the underlying Input component and surface the error state for
assistive tech: in the LabeledInput wrapper, provide accessibilityLabel={label}
on the Input component and set accessibilityState={{ invalid: !!error }} (or
merge into existing accessibilityState) so screen readers know the field name
and when it's invalid; keep existing props spread and preserve style.
…hone number handling and state management
Jamie-Poeffel
approved these changes
May 1, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…and readability
Summary by CodeRabbit
New Features
Bug Fixes
Improvements