Implement password policy checklist with live validation #67
Conversation
|
@AvaneeshKesavan is attempting to deploy a commit to the mihir2006's projects Team on Vercel. A member of the Team first needs to authorize it. |
Thanks for creating this PRWe'll review it as soon as possible. If there are any unresolved review comments, feel free to resolve them. |
Summary of ChangesHello @AvaneeshKesavan, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the user signup experience by integrating a live password policy checklist. Users now receive instant visual feedback as they type their password, ensuring it meets criteria such as minimum length, inclusion of uppercase, lowercase, numbers, and special characters. The 'Sign Up' button is intelligently disabled until all these conditions are satisfied, streamlining the process and promoting stronger password creation. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request successfully implements a password policy checklist on the signup page, which greatly improves user experience by providing live feedback. My review includes suggestions to refactor the new client-side logic for better maintainability and performance. However, there is a critical security issue: the password policy is only enforced on the client side. It is essential to add the same validation logic to the backend API (/api/auth/signup/route.ts) to prevent users from bypassing the checks and creating accounts with weak passwords.
| useEffect(() => { | ||
| setPasswordRules({ | ||
| minLength: password.length >= 8, | ||
| uppercase: /[A-Z]/.test(password), | ||
| lowercase: /[a-z]/.test(password), | ||
| number: /[0-9]/.test(password), | ||
| specialChar: /[!@#$%^&*(),.?":{}|<>]/.test(password), | ||
| }); | ||
| }, [password]); |
There was a problem hiding this comment.
The regular expressions for password validation are being re-created inside the useEffect hook on every password change. For better performance and code clarity, you should define them as constants outside the component. This avoids unnecessary re-creation and makes the validation logic easier to read and maintain.
For example, you could define them at the top of the file:
const UPPERCASE_REGEX = /[A-Z]/;
const LOWERCASE_REGEX = /[a-z]/;
const NUMBER_REGEX = /[0-9]/;
const SPECIAL_CHAR_REGEX = /[!@#$%^&*(),.?\":{}|<>]/;And then use them in your useEffect:
useEffect(() => {
setPasswordRules({
minLength: password.length >= 8,
uppercase: UPPERCASE_REGEX.test(password),
lowercase: LOWERCASE_REGEX.test(password),
number: NUMBER_REGEX.test(password),
specialChar: SPECIAL_CHAR_REGEX.test(password),
});
}, [password]);| <ul className="text-sm space-y-1"> | ||
| <li | ||
| className={ | ||
| passwordRules.minLength ? "text-green-600" : "text-red-600" | ||
| } | ||
| > | ||
| At least 8 characters | ||
| </li> | ||
| <li | ||
| className={ | ||
| passwordRules.uppercase ? "text-green-600" : "text-red-600" | ||
| } | ||
| > | ||
| Contains uppercase letter | ||
| </li> | ||
| <li | ||
| className={ | ||
| passwordRules.lowercase ? "text-green-600" : "text-red-600" | ||
| } | ||
| > | ||
| Contains lowercase letter | ||
| </li> | ||
| <li | ||
| className={ | ||
| passwordRules.number ? "text-green-600" : "text-red-600" | ||
| } | ||
| > | ||
| Contains number | ||
| </li> | ||
| <li | ||
| className={ | ||
| passwordRules.specialChar ? "text-green-600" : "text-red-600" | ||
| } | ||
| > | ||
| Contains special character | ||
| </li> | ||
| </ul> |
There was a problem hiding this comment.
The JSX for the password policy checklist is very repetitive. You can make this code more maintainable and less error-prone by defining the rules in an array and then mapping over it to render the list items. This is a common pattern in React for rendering lists of similar items.
For even better performance, you could define the array of rules outside of the component function so it's not recreated on every render.
<ul className="text-sm space-y-1">
{[
{ key: "minLength", text: "At least 8 characters" },
{ key: "uppercase", text: "Contains uppercase letter" },
{ key: "lowercase", text: "Contains lowercase letter" },
{ key: "number", text: "Contains number" },
{ key: "specialChar", text: "Contains special character" },
].map((rule) => (
<li
key={rule.key}
className={
passwordRules[rule.key as keyof typeof passwordRules]
? "text-green-600"
: "text-red-600"
}
>
{rule.text}
</li>
))}
</ul>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
MIHIR2006
added
level: easy
2 participants
Rationale for this change
This PR implements a Password Policy Checklist on the signup page. The checklist visually shows users whether their password meets the following requirements:
The "Sign Up" button remains disabled until all requirements are met, improving UX by giving immediate feedback on password strength.
Changes made