feat: add PasswordInput component and integrate it into signup and lo…#234
Conversation
✅ Deploy Preview for logifypro ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ 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: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughA new reusable ChangesPassword Input Component Extraction
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
logify-frontend/src/components/ui/PasswordInput.jsx (1)
56-64: 🏗️ Heavy liftReplace
propTypeswith TypeScript types or explicit runtime schema validation.In React 19,
propTypeson function components are no longer executed by the React runtime—they're silently ignored. This leaves no runtime guarantee that the component receives correct prop types. For runtime validation guarantees, use explicit schema validation (e.g., Zod, Yup) or migrate to TypeScript for static type checking.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@logify-frontend/src/components/ui/PasswordInput.jsx` around lines 56 - 64, The PasswordInput.propTypes block must be replaced with either TypeScript props definitions or an explicit runtime schema validation; remove the PasswordInput.propTypes assignment and instead (a) if migrating to TS, define an interface PasswordInputProps (with label?: string, name: string, value: string, onChange: (e: any) => void, placeholder?: string, error?: string, className?: string) and annotate the PasswordInput function signature with that type, or (b) if keeping JS, create a Zod/Yup schema (e.g., passwordInputSchema) describing the same fields and call schema.parse/validate at the top of the PasswordInput function (handle validation errors and surface them appropriately) so props are validated at runtime; ensure all references to PasswordInput.propTypes are removed.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@logify-frontend/src/components/ui/PasswordInput.jsx`:
- Around line 24-37: The label and error text in the PasswordInput component are
not programmatically associated with the input; add an id for the input (derive
from the name prop or accept an id prop) and set the label's htmlFor to that id,
and for error text render an element with a unique id (e.g. `${id}-error`) and
add aria-describedby on the input when an error exists so screen readers
announce the error; update the PasswordInput JSX to wire label -> input via
htmlFor/id and input -> error via aria-describedby (and ensure the error element
uses role="alert" or similar if needed).
---
Nitpick comments:
In `@logify-frontend/src/components/ui/PasswordInput.jsx`:
- Around line 56-64: The PasswordInput.propTypes block must be replaced with
either TypeScript props definitions or an explicit runtime schema validation;
remove the PasswordInput.propTypes assignment and instead (a) if migrating to
TS, define an interface PasswordInputProps (with label?: string, name: string,
value: string, onChange: (e: any) => void, placeholder?: string, error?: string,
className?: string) and annotate the PasswordInput function signature with that
type, or (b) if keeping JS, create a Zod/Yup schema (e.g., passwordInputSchema)
describing the same fields and call schema.parse/validate at the top of the
PasswordInput function (handle validation errors and surface them appropriately)
so props are validated at runtime; ensure all references to
PasswordInput.propTypes are removed.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: fdaf1175-46f2-4dec-a943-2a8dd62b6124
📒 Files selected for processing (5)
logify-frontend/src/components/ui/PasswordInput.jsxlogify-frontend/src/pages/AdminSignupPage.jsxlogify-frontend/src/pages/LoginPage.jsxlogify-frontend/src/pages/StudentSignupPage.jsxlogify-frontend/src/pages/SupervisorSignupPage.jsx
…ve label association; adjust test for password field accessibility
Deploying logify-frontend with
|
| Latest commit: |
121a4dd
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://59e6a2fc.logify-frontend.pages.dev |
| Branch Preview URL: | https://fix-loading.logify-frontend.pages.dev |
There was a problem hiding this comment.
Pull request overview
This PR introduces a reusable PasswordInput UI component (with a show/hide toggle) and replaces inline password <input type="password" /> fields in the login and signup pages to reduce duplication and unify UX.
Changes:
- Added
PasswordInputcomponent undersrc/components/ui/. - Replaced password + confirm password fields in Student/Admin/Supervisor signup pages with
PasswordInput. - Replaced the Login page password field with
PasswordInput.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| logify-frontend/src/components/ui/PasswordInput.jsx | Adds the new reusable password input with visibility toggle. |
| logify-frontend/src/pages/LoginPage.jsx | Swaps the login password field to use PasswordInput. |
| logify-frontend/src/pages/StudentSignupPage.jsx | Swaps password + confirm password fields to use PasswordInput. |
| logify-frontend/src/pages/AdminSignupPage.jsx | Swaps password + confirm password fields to use PasswordInput. |
| logify-frontend/src/pages/SupervisorSignupPage.jsx | Swaps password + confirm password fields to use PasswordInput. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| return ( | ||
| <div> | ||
| {label && ( | ||
| <label | ||
| htmlFor={inputId} | ||
| className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold" | ||
| > | ||
| {label} | ||
| </label> | ||
| )} | ||
| <div className="relative mt-2"> | ||
| <input | ||
| id={inputId} | ||
| type={isVisible ? "text" : "password"} | ||
| name={name} |
| const inputId = id || `password-input-${name}`; | ||
|
|
||
| const toggleVisibility = () => { | ||
| setIsVisible(!isVisible); | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| {label && ( | ||
| <label | ||
| htmlFor={inputId} | ||
| className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold" | ||
| > | ||
| {label} | ||
| </label> | ||
| )} | ||
| <div className="relative mt-2"> | ||
| <input | ||
| id={inputId} | ||
| type={isVisible ? "text" : "password"} | ||
| name={name} | ||
| value={value} | ||
| onChange={onChange} | ||
| placeholder={placeholder} | ||
| className={`w-full rounded-xl border border-border bg-white px-4 py-3 pr-10 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800 ${className}`} | ||
| {...props} | ||
| /> |
| > | ||
| {label} | ||
| </label> | ||
| )} | ||
| <div className="relative mt-2"> | ||
| <input | ||
| id={inputId} | ||
| type={isVisible ? "text" : "password"} | ||
| name={name} |
…gin pages