binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1681] chore: handled password strength validation and improved the acceptable char (#4891)

Browse source 
* chore: handled password validation on onboarding screen

* chore: updated is password focused
This commit is contained in:
guru_sainath 2024-06-20 16:58:26 +05:30 • committed by GitHub
parent f06cce44a3
commit 01d785b9a9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 259 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/app/accounts/reset-password/page.tsx
View file

@ -20,7 +20,7 @@ import {
authErrorHandler, authErrorHandler,
} from "@/helpers/authentication.helper"; } from "@/helpers/authentication.helper";
import { API_BASE_URL } from "@/helpers/common.helper"; import { API_BASE_URL } from "@/helpers/common.helper";
import { getPasswordStrength } from "@/helpers/password.helper"; import { E_PASSWORD_STRENGTH, getPasswordStrength } from "@/helpers/password.helper";
// wrappers // wrappers
import { AuthenticationWrapper } from "@/lib/wrappers"; import { AuthenticationWrapper } from "@/lib/wrappers";
// services // services
@ -83,7 +83,7 @@ export default function ResetPasswordPage() {
const isButtonDisabled = useMemo( const isButtonDisabled = useMemo(
() => () =>
!!resetFormData.password && !!resetFormData.password &&
getPasswordStrength(resetFormData.password) >= 3 && getPasswordStrength(resetFormData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID &&
resetFormData.password === resetFormData.confirm_password resetFormData.password === resetFormData.confirm_password
? false ? false
: true, : true,
@ -187,7 +187,7 @@ export default function ResetPasswordPage() {
/> />
)} )}
</div> </div>
{isPasswordInputFocused && <PasswordStrengthMeter password={resetFormData.password} />} <PasswordStrengthMeter password={resetFormData.password} isFocused={isPasswordInputFocused} />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password"> <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">

6
web/app/accounts/set-password/page.tsx
View file

@ -14,7 +14,7 @@ import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
import { PasswordStrengthMeter } from "@/components/account"; import { PasswordStrengthMeter } from "@/components/account";
// helpers // helpers
import { EPageTypes } from "@/helpers/authentication.helper"; import { EPageTypes } from "@/helpers/authentication.helper";
import { getPasswordStrength } from "@/helpers/password.helper"; import { E_PASSWORD_STRENGTH, getPasswordStrength } from "@/helpers/password.helper";
// hooks // hooks
import { useUser } from "@/hooks/store"; import { useUser } from "@/hooks/store";
import { useAppRouter } from "@/hooks/use-app-router"; import { useAppRouter } from "@/hooks/use-app-router";
@ -79,7 +79,7 @@ const SetPasswordPage = observer(() => {
const isButtonDisabled = useMemo( const isButtonDisabled = useMemo(
() => () =>
!!passwordFormData.password && !!passwordFormData.password &&
getPasswordStrength(passwordFormData.password) >= 3 && getPasswordStrength(passwordFormData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID &&
passwordFormData.password === passwordFormData.confirm_password passwordFormData.password === passwordFormData.confirm_password
? false ? false
: true, : true,
@ -181,7 +181,7 @@ const SetPasswordPage = observer(() => {
/> />
)} )}
</div> </div>
{isPasswordInputFocused && <PasswordStrengthMeter password={passwordFormData.password} />} <PasswordStrengthMeter password={passwordFormData.password} isFocused={isPasswordInputFocused} />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password"> <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">

9
web/app/profile/security/page.tsx
View file

@ -13,7 +13,7 @@ import { PageHead } from "@/components/core";
import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile"; import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile";
// helpers // helpers
import { authErrorHandler } from "@/helpers/authentication.helper"; import { authErrorHandler } from "@/helpers/authentication.helper";
import { getPasswordStrength } from "@/helpers/password.helper"; import { E_PASSWORD_STRENGTH, getPasswordStrength } from "@/helpers/password.helper";
// hooks // hooks
import { useUser } from "@/hooks/store"; import { useUser } from "@/hooks/store";
import { useAppRouter } from "@/hooks/use-app-router"; import { useAppRouter } from "@/hooks/use-app-router";
@ -107,15 +107,16 @@ const SecurityPage = observer(() => {
}, [currentUser, router]); }, [currentUser, router]);
const isButtonDisabled = const isButtonDisabled =
getPasswordStrength(password) < 3 || getPasswordStrength(password) != E_PASSWORD_STRENGTH.STRENGTH_VALID ||
oldPassword.trim() === "" || oldPassword.trim() === "" ||
password.trim() === "" || password.trim() === "" ||
confirmPassword.trim() === "" || confirmPassword.trim() === "" ||
password !== confirmPassword || password !== confirmPassword ||
password === oldPassword; password === oldPassword;
const passwordSupport = password.length > 0 && (getPasswordStrength(password) < 3 || isPasswordInputFocused) && ( const passwordSupport = password.length > 0 &&
<PasswordStrengthMeter password={password} /> getPasswordStrength(password) != E_PASSWORD_STRENGTH.STRENGTH_VALID && (
<PasswordStrengthMeter password={password} isFocused={isPasswordInputFocused} />
); );
if (isPageLoading) if (isPageLoading)

8
web/core/components/account/auth-forms/password.tsx
View file

@ -19,7 +19,7 @@ import {
// helpers // helpers
import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper"; import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper";
import { API_BASE_URL } from "@/helpers/common.helper"; import { API_BASE_URL } from "@/helpers/common.helper";
import { getPasswordStrength } from "@/helpers/password.helper"; import { E_PASSWORD_STRENGTH, getPasswordStrength } from "@/helpers/password.helper";
// hooks // hooks
import { useEventTracker } from "@/hooks/store"; import { useEventTracker } from "@/hooks/store";
// services // services
@ -96,8 +96,8 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
</div> </div>
) : ( ) : (
passwordFormData.password.length > 0 && passwordFormData.password.length > 0 &&
(getPasswordStrength(passwordFormData.password) < 3 || isPasswordInputFocused) && ( getPasswordStrength(passwordFormData.password) != E_PASSWORD_STRENGTH.STRENGTH_VALID && (
<PasswordStrengthMeter password={passwordFormData.password} /> <PasswordStrengthMeter password={passwordFormData.password} isFocused={isPasswordInputFocused} />
) )
); );
@ -137,7 +137,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
action={`${API_BASE_URL}/auth/${mode === EAuthModes.SIGN_IN ? "sign-in" : "sign-up"}/`} action={`${API_BASE_URL}/auth/${mode === EAuthModes.SIGN_IN ? "sign-in" : "sign-up"}/`}
onSubmit={(event) => { onSubmit={(event) => {
event.preventDefault(); // Prevent form from submitting by default event.preventDefault(); // Prevent form from submitting by default
if (getPasswordStrength(passwordFormData.password) >= 3) { if (getPasswordStrength(passwordFormData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID) {
setIsSubmitting(true); setIsSubmitting(true);
captureEvent(mode === EAuthModes.SIGN_IN ? SIGN_IN_WITH_PASSWORD : SIGN_UP_WITH_PASSWORD); captureEvent(mode === EAuthModes.SIGN_IN ? SIGN_IN_WITH_PASSWORD : SIGN_UP_WITH_PASSWORD);
event.currentTarget.submit(); // Manually submit the form if the condition is met event.currentTarget.submit(); // Manually submit the form if the condition is met

117
web/core/components/account/password-strength-meter.tsx
View file

@ -1,67 +1,94 @@
// icons "use client";
import { CircleCheck } from "lucide-react";
import { FC, useMemo } from "react";
// import { CircleCheck } from "lucide-react";
// helpers // helpers
import { cn } from "@/helpers/common.helper"; import { cn } from "@/helpers/common.helper";
import { getPasswordStrength } from "@/helpers/password.helper"; import {
E_PASSWORD_STRENGTH,
// PASSWORD_CRITERIA,
getPasswordStrength,
} from "@/helpers/password.helper";
type Props = { type TPasswordStrengthMeter = {
password: string; password: string;
isFocused?: boolean;
}; };
export const PasswordStrengthMeter: React.FC<Props> = (props: Props) => { export const PasswordStrengthMeter: FC<TPasswordStrengthMeter> = (props) => {
const { password } = props; const { password, isFocused = false } = props;
// derived values
const strength = getPasswordStrength(password); const strength = useMemo(() => getPasswordStrength(password), [password]);
let bars = []; const strengthBars = useMemo(() => {
let text = ""; switch (strength) {
let textColor = ""; case E_PASSWORD_STRENGTH.EMPTY: {
return {
if (password.length === 0) { bars: [`bg-custom-text-100`, `bg-custom-text-100`, `bg-custom-text-100`],
bars = [`bg-[#F0F0F3]`, `bg-[#F0F0F3]`, `bg-[#F0F0F3]`]; text: "Please enter your password.",
text = "Password requirements"; textColor: "text-custom-text-100",
} else if (password.length < 8) { };
bars = [`bg-[#DC3E42]`, `bg-[#F0F0F3]`, `bg-[#F0F0F3]`];
text = "Password is too short";
textColor = `text-[#DC3E42]`;
} else if (strength < 3) {
bars = [`bg-[#DC3E42]`, `bg-[#F0F0F3]`, `bg-[#F0F0F3]`];
text = "Password is weak";
textColor = `text-[#DC3E42]`;
} else {
bars = [`bg-[#3E9B4F]`, `bg-[#3E9B4F]`, `bg-[#3E9B4F]`];
text = "Password is strong";
textColor = `text-[#3E9B4F]`;
} }
case E_PASSWORD_STRENGTH.LENGTH_NOT_VALID: {
return {
bars: [`bg-red-500`, `bg-custom-text-100`, `bg-custom-text-100`],
text: "Password length should me more than 8 characters.",
textColor: "text-red-500",
};
}
case E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID: {
return {
bars: [`bg-red-500`, `bg-custom-text-100`, `bg-custom-text-100`],
text: "Password is weak.",
textColor: "text-red-500",
};
}
case E_PASSWORD_STRENGTH.STRENGTH_VALID: {
return {
bars: [`bg-green-500`, `bg-green-500`, `bg-green-500`],
text: "Password is strong.",
textColor: "text-green-500",
};
}
default: {
return {
bars: [`bg-custom-text-100`, `bg-custom-text-100`, `bg-custom-text-100`],
text: "Please enter your password.",
textColor: "text-custom-text-100",
};
}
}
}, [strength]);
const criteria = [ const isPasswordMeterVisible = isFocused ? true : strength === E_PASSWORD_STRENGTH.STRENGTH_VALID ? false : true;
{ label: "Min 8 characters", isValid: password.length >= 8 },
{ label: "Min 1 upper-case letter", isValid: /[A-Z]/.test(password) },
{ label: "Min 1 number", isValid: /\d/.test(password) },
{ label: "Min 1 special character", isValid: /[!@#$%^&*]/.test(password) },
];
if (!isPasswordMeterVisible) return <></>;
return ( return (
<div className="w-full p-1"> <div className="w-full space-y-2 pt-2">
<div className="flex w-full gap-1.5"> <div className="space-y-1.5">
{bars.map((color, index) => ( <div className="relative flex items-center gap-2">
<div key={index} className={cn("w-full h-1 rounded-full", color)} /> {strengthBars?.bars.map((color, index) => (
<div key={`${color}-${index}`} className={cn("w-full h-1 rounded-full", color)} />
))} ))}
</div> </div>
<p className={cn("text-xs font-medium py-1", textColor)}>{text}</p> <div className={cn(`text-xs font-medium text-custom-text-100`, strengthBars?.textColor)}>
<div className="flex flex-wrap gap-x-4 gap-y-2"> {strengthBars?.text}
{criteria.map((criterion, index) => ( </div>
</div>
{/* <div className="relative flex flex-wrap gap-x-4 gap-y-2">
{PASSWORD_CRITERIA.map((criteria) => (
<div <div
key={index} key={criteria.key}
className={cn( className={cn(
"flex items-center gap-1 text-xs font-medium", "relative flex items-center gap-1 text-xs",
criterion.isValid ? `text-[#3E9B4F]` : "text-custom-text-400" criteria.isCriteriaValid(password) ? `text-green-500/70` : "text-custom-text-300"
)} )}
> >
<CircleCheck width={14} height={14} /> <CircleCheck width={14} height={14} />
{criterion.label} {criteria.label}
</div> </div>
))} ))}
</div> </div> */}
</div> </div>
); );
}; };

64
web/core/components/onboarding/profile-setup.tsx
View file

@ -17,7 +17,7 @@ import { OnboardingHeader, SwitchAccountDropdown } from "@/components/onboarding
// constants // constants
import { USER_DETAILS, E_ONBOARDING_STEP_1, E_ONBOARDING_STEP_2 } from "@/constants/event-tracker"; import { USER_DETAILS, E_ONBOARDING_STEP_1, E_ONBOARDING_STEP_2 } from "@/constants/event-tracker";
// helpers // helpers
import { getPasswordStrength } from "@/helpers/password.helper"; import { E_PASSWORD_STRENGTH, getPasswordStrength } from "@/helpers/password.helper";
// hooks // hooks
import { useEventTracker, useUser, useUserProfile } from "@/hooks/store"; import { useEventTracker, useUser, useUserProfile } from "@/hooks/store";
// services // services
@ -248,30 +248,30 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
}); });
}; };
// derived values
const isPasswordAlreadySetup = !user?.is_password_autoset; const isPasswordAlreadySetup = !user?.is_password_autoset;
const isSignUpUsingMagicCode = user?.last_login_medium === "magic-code"; const isValidPassword = useMemo(() => {
const currentPassword = watch("password") || undefined;
const password = watch("password"); const currentConfirmPassword = watch("confirm_password") || undefined;
const confirmPassword = watch("confirm_password"); if (currentPassword) {
const isValidPassword = (password: string, confirmPassword?: string) => if (
getPasswordStrength(password) >= 3 && password === confirmPassword; currentPassword === currentConfirmPassword &&
getPasswordStrength(currentPassword) === E_PASSWORD_STRENGTH.STRENGTH_VALID
) {
return true;
} else {
return false;
}
} else {
return true;
}
}, [watch]);
// Check for all available fields validation and if password field is available, then checks for password validation (strength + confirmation). // Check for all available fields validation and if password field is available, then checks for password validation (strength + confirmation).
// Also handles the condition for optional password i.e if password field is optional it only checks for above validation if it's not empty. // Also handles the condition for optional password i.e if password field is optional it only checks for above validation if it's not empty.
const isButtonDisabled = useMemo( const isButtonDisabled = useMemo(
() => () => (!isSubmitting && isValid && (isPasswordAlreadySetup ? true : isValidPassword) ? false : true),
!isSubmitting && [isSubmitting, isValid, isPasswordAlreadySetup, isValidPassword]
isValid &&
(isPasswordAlreadySetup
? true
: isSignUpUsingMagicCode
? !!password && isValidPassword(password, confirmPassword)
: !!password
? isValidPassword(password, confirmPassword)
: true)
? false
: true,
[isSubmitting, isValid, isPasswordAlreadySetup, isSignUpUsingMagicCode, password, confirmPassword]
); );
const isCurrentStepUserPersonalization = profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION; const isCurrentStepUserPersonalization = profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION;
@ -412,17 +412,19 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
{errors.last_name && <span className="text-sm text-red-500">{errors.last_name.message}</span>} {errors.last_name && <span className="text-sm text-red-500">{errors.last_name.message}</span>}
</div> </div>
</div> </div>
{/* setting up password for the first time */}
{!isPasswordAlreadySetup && ( {!isPasswordAlreadySetup && (
<>
<div className="space-y-1"> <div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password"> <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
Set a password{" "} Set a password (optional)
{!isSignUpUsingMagicCode && <span className="text-onboarding-text-400">(optional)</span>}
</label> </label>
<Controller <Controller
control={control} control={control}
name="password" name="password"
rules={{ rules={{
required: isSignUpUsingMagicCode ? "Password is required" : false, required: false,
}} }}
render={({ field: { value, onChange, ref } }) => ( render={({ field: { value, onChange, ref } }) => (
<div className="relative flex items-center rounded-md"> <div className="relative flex items-center rounded-md">
@ -452,20 +454,19 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
</div> </div>
)} )}
/> />
{isPasswordInputFocused && <PasswordStrengthMeter password={watch("password") ?? ""} />} <PasswordStrengthMeter password={watch("password") ?? ""} isFocused={isPasswordInputFocused} />
{errors.password && <span className="text-sm text-red-500">{errors.password.message}</span>}
</div> </div>
)}
{!isPasswordAlreadySetup && (
<div className="space-y-1"> <div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password"> <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
Confirm password Confirm password (optional)
</label> </label>
<Controller <Controller
control={control} control={control}
name="confirm_password" name="confirm_password"
rules={{ rules={{
validate: (value) => value === password || "Passwords don't match", required: watch("password") ? true : false,
validate: (value) =>
watch("password") ? (value === watch("password") ? true : "Passwords don't match") : true,
}} }}
render={({ field: { value, onChange, ref } }) => ( render={({ field: { value, onChange, ref } }) => (
<div className="relative flex items-center rounded-md"> <div className="relative flex items-center rounded-md">
@ -475,7 +476,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
value={value} value={value}
onChange={onChange} onChange={onChange}
ref={ref} ref={ref}
hasError={Boolean(errors.password)} hasError={Boolean(errors.confirm_password)}
placeholder="Confirm password..." placeholder="Confirm password..."
className="w-full border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400" className="w-full border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/> />
@ -497,9 +498,12 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
<span className="text-sm text-red-500">{errors.confirm_password.message}</span> <span className="text-sm text-red-500">{errors.confirm_password.message}</span>
)} )}
</div> </div>
</>
)} )}
</> </>
)} )}
{/* user role once the password is set */}
{profileSetupStep !== EProfileSetupSteps.USER_DETAILS && ( {profileSetupStep !== EProfileSetupSteps.USER_DETAILS && (
<> <>
<div className="space-y-1"> <div className="space-y-1">

75
web/helpers/password.helper.ts
View file

@ -1,16 +1,67 @@
import zxcvbn from "zxcvbn"; import zxcvbn from "zxcvbn";
export const isPasswordCriteriaMet = (password: string) => { export enum E_PASSWORD_STRENGTH {
const criteria = [password.length >= 8, /[A-Z]/.test(password), /\d/.test(password), /[!@#$%^&*]/.test(password)]; EMPTY = "empty",
LENGTH_NOT_VALID = "length_not_valid",
STRENGTH_NOT_VALID = "strength_not_valid",
STRENGTH_VALID = "strength_valid",
}
return criteria.every((criterion) => criterion); const PASSWORD_MIN_LENGTH = 8;
}; // const PASSWORD_NUMBER_REGEX = /\d/;
// const PASSWORD_CHAR_CAPS_REGEX = /[A-Z]/;
export const getPasswordStrength = (password: string) => { // const PASSWORD_SPECIAL_CHAR_REGEX = /[`!@#$%^&*()_\-+=\[\]{};':"\\|,.<>\/?~ ]/;
if (password.length === 0) return 0;
if (password.length < 8) return 1; export const PASSWORD_CRITERIA = [
if (!isPasswordCriteriaMet(password)) return 2; {
key: "min_8_char",
const result = zxcvbn(password); label: "Min 8 characters",
return result.score; isCriteriaValid: (password: string) => password.length >= PASSWORD_MIN_LENGTH,
},
// {
// key: "min_1_upper_case",
// label: "Min 1 upper-case letter",
// isCriteriaValid: (password: string) => PASSWORD_NUMBER_REGEX.test(password),
// },
// {
// key: "min_1_number",
// label: "Min 1 number",
// isCriteriaValid: (password: string) => PASSWORD_CHAR_CAPS_REGEX.test(password),
// },
// {
// key: "min_1_special_char",
// label: "Min 1 special character",
// isCriteriaValid: (password: string) => PASSWORD_SPECIAL_CHAR_REGEX.test(password),
// },
];
export const getPasswordStrength = (password: string): E_PASSWORD_STRENGTH => {
let passwordStrength: E_PASSWORD_STRENGTH = E_PASSWORD_STRENGTH.EMPTY;
if (!password || password === "" || password.length <= 0) {
return passwordStrength;
}
if (password.length >= PASSWORD_MIN_LENGTH) {
passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID;
} else {
passwordStrength = E_PASSWORD_STRENGTH.LENGTH_NOT_VALID;
return passwordStrength;
}
const passwordCriteriaValidation = PASSWORD_CRITERIA.map((criteria) => criteria.isCriteriaValid(password)).every(
(criterion) => criterion
);
const passwordStrengthScore = zxcvbn(password).score;
if (passwordCriteriaValidation === false || passwordStrengthScore <= 2) {
passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID;
return passwordStrength;
}
if (passwordCriteriaValidation === true && passwordStrengthScore >= 3) {
passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_VALID;
}
return passwordStrength;
}; };