chore: improve password error message (#6255)

chore: improve error message chore: add password minlength & maxlength i18n chore: check max length fix: i18n variables feat: add CredentialsRequirementType
2026-02-12 04:18:54 +00:00 · 2024-03-26 07:15:06 +00:00
parent b8e6d7d6cb
commit 8ee9f6ec05
25 changed files with 354 additions and 82 deletions
--- a/packages/frontend/component/src/components/auth-components/change-password-page.tsx
+++ b/packages/frontend/component/src/components/auth-components/change-password-page.tsx
@@ -1,3 +1,4 @@
+import type { PasswordLimitsFragment } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useSetAtom } from 'jotai';
 import type { FC } from 'react';
@@ -11,9 +12,15 @@ import type { User } from './type';

 export const ChangePasswordPage: FC<{
  user: User;
+  passwordLimits: PasswordLimitsFragment;
  onSetPassword: (password: string) => Promise<void>;
  onOpenAffine: () => void;
-}> = ({ user: { email }, onSetPassword: propsOnSetPassword, onOpenAffine }) => {
+}> = ({
+  user: { email },
+  passwordLimits,
+  onSetPassword: propsOnSetPassword,
+  onOpenAffine,
+}) => {
  const t = useAFFiNEI18N();
  const [hasSetUp, setHasSetUp] = useState(false);
  const pushNotification = useSetAtom(pushNotificationAtom);
@@ -46,7 +53,10 @@ export const ChangePasswordPage: FC<{
          t['com.affine.auth.sent.reset.password.success.message']()
        ) : (
          <>
-            {t['com.affine.auth.page.sent.email.subtitle']()}
+            {t['com.affine.auth.page.sent.email.subtitle']({
+              min: String(passwordLimits.minLength),
+              max: String(passwordLimits.maxLength),
+            })}
            <a href={`mailto:${email}`}>{email}</a>
          </>
        )
@@ -57,7 +67,10 @@ export const ChangePasswordPage: FC<{
          {t['com.affine.auth.open.affine']()}
        </Button>
      ) : (
-        <SetPassword onSetPassword={onSetPassword} />
+        <SetPassword
+          passwordLimits={passwordLimits}
+          onSetPassword={onSetPassword}
+        />
      )}
    </AuthPageContainer>
  );
--- a/packages/frontend/component/src/components/auth-components/password-input/index.tsx
+++ b/packages/frontend/component/src/components/auth-components/password-input/index.tsx
@@ -1,104 +1,199 @@
+import { type PasswordLimitsFragment } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { passwordStrength } from 'check-password-strength';
-import type { FC } from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { type Options, passwordStrength } from 'check-password-strength';
+import { type FC, useEffect, useMemo } from 'react';
+import { useCallback, useState } from 'react';
+import { z, type ZodCustomIssue, ZodIssueCode } from 'zod';

 import type { InputProps } from '../../../ui/input';
 import { Input } from '../../../ui/input';
 import * as styles from '../share.css';
 import { ErrorIcon } from './error';
+import { statusWrapper } from './style.css';
 import { SuccessIcon } from './success';
 import { Tag } from './tag';

-export type Status = 'weak' | 'medium' | 'strong' | 'maximum';
+export type Status = 'weak' | 'medium' | 'strong' | 'minimum' | 'maximum';
+
+const PASSWORD_STRENGTH_OPTIONS: Options<string> = [
+  {
+    id: 0,
+    value: 'weak',
+    minDiversity: 0,
+    minLength: 0,
+  },
+  {
+    id: 1,
+    value: 'medium',
+    minDiversity: 4,
+    minLength: 8,
+  },
+  {
+    id: 2,
+    value: 'strong',
+    minDiversity: 4,
+    minLength: 10,
+  },
+];

 export const PasswordInput: FC<
  InputProps & {
+    passwordLimits: PasswordLimitsFragment;
    onPass: (password: string) => void;
    onPrevent: () => void;
  }
-> = ({ onPass, onPrevent, ...inputProps }) => {
+> = ({ passwordLimits, onPass, onPrevent, ...inputProps }) => {
  const t = useAFFiNEI18N();

  const [status, setStatus] = useState<Status | null>(null);
  const [confirmStatus, setConfirmStatus] = useState<
    'success' | 'error' | null
  >(null);
+  const [canSubmit, setCanSubmit] = useState(false);

  const [password, setPassWord] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
+  const validationSchema = useMemo(() => {
+    const { minLength, maxLength } = passwordLimits;
+    return z.string().superRefine((val, ctx) => {
+      if (val.length < minLength) {
+        ctx.addIssue({
+          code: ZodIssueCode.custom,
+          params: {
+            status: 'minimum',
+          },
+        });
+      } else if (val.length > maxLength) {
+        ctx.addIssue({
+          code: ZodIssueCode.custom,
+          params: {
+            status: 'maximum',
+          },
+        });
+      }
+      // https://github.com/deanilvincent/check-password-strength?tab=readme-ov-file#default-options
+      const { value: status } = passwordStrength(
+        val,
+        PASSWORD_STRENGTH_OPTIONS
+      );

-  const onPasswordChange = useCallback((value: string) => {
-    setPassWord(value);
-    if (!value) {
-      return setStatus(null);
-    }
-    if (value.length > 20) {
-      return setStatus('maximum');
-    }
-    switch (passwordStrength(value).id) {
-      case 0:
-      case 1:
-        setStatus('weak');
-        break;
-      case 2:
-        setStatus('medium');
-        break;
-      case 3:
-        setStatus('strong');
-        break;
-    }
-  }, []);
+      ctx.addIssue({
+        code: ZodIssueCode.custom,
+        message: 'password strength',
+        path: ['strength'],
+        params: {
+          status,
+        },
+      });
+    });
+  }, [passwordLimits]);

-  const onConfirmPasswordChange = useCallback((value: string) => {
-    setConfirmPassword(value);
-  }, []);
+  const validatePasswords = useCallback(
+    (password: string, confirmPassword: string) => {
+      const result = validationSchema.safeParse(password);
+      let canSubmit = false;
+      if (!result.success) {
+        const issues = result.error.issues as ZodCustomIssue[];
+        const firstIssue = issues[0];
+        setStatus(firstIssue.params?.status || null);
+        // ignore strength error
+        if (firstIssue.path.includes('strength')) {
+          canSubmit = true;
+        }
+      }
+      if (confirmPassword) {
+        const isEqual = password === confirmPassword;
+        if (isEqual) {
+          setConfirmStatus('success');
+        } else {
+          setConfirmStatus('error');
+        }
+        canSubmit &&= isEqual;
+      } else {
+        canSubmit &&= false;
+        setConfirmStatus(null);
+      }
+      setCanSubmit(canSubmit);
+    },
+    [validationSchema]
+  );
+
+  const onPasswordChange = useCallback(
+    (value: string) => {
+      const password = value.trim();
+      setPassWord(password);
+      validatePasswords(password, confirmPassword);
+    },
+    [validatePasswords, confirmPassword]
+  );
+
+  const onConfirmPasswordChange = useCallback(
+    (value: string) => {
+      const confirmPassword = value.trim();
+      setConfirmPassword(confirmPassword);
+      validatePasswords(password, confirmPassword);
+    },
+    [validatePasswords, password]
+  );

  useEffect(() => {
-    if (!password || !confirmPassword) {
-      return;
-    }
-    if (password === confirmPassword) {
-      setConfirmStatus('success');
-    } else {
-      setConfirmStatus('error');
-    }
-  }, [confirmPassword, password]);
-
-  useEffect(() => {
-    if (confirmStatus === 'success' && password.length > 7) {
+    if (canSubmit) {
      onPass(password);
    } else {
      onPrevent();
    }
-  }, [confirmStatus, onPass, onPrevent, password]);
+  }, [canSubmit, password, onPass, onPrevent]);

  return (
    <>
      <Input
+        name="password"
        className={styles.input}
        type="password"
        size="extraLarge"
+        minLength={passwordLimits.minLength}
+        maxLength={passwordLimits.maxLength}
        style={{ marginBottom: 20 }}
-        placeholder={t['com.affine.auth.set.password.placeholder']()}
+        placeholder={t['com.affine.auth.set.password.placeholder']({
+          min: String(passwordLimits.minLength),
+        })}
        onChange={onPasswordChange}
-        endFix={status ? <Tag status={status} /> : null}
+        endFix={
+          <div className={statusWrapper}>
+            {status ? (
+              <Tag
+                status={status}
+                minimum={t['com.affine.auth.set.password.message.minlength']({
+                  min: String(passwordLimits.minLength),
+                })}
+                maximum={t['com.affine.auth.set.password.message.maxlength']({
+                  max: String(passwordLimits.maxLength),
+                })}
+              />
+            ) : null}
+          </div>
+        }
        {...inputProps}
      />
      <Input
+        name="confirmPassword"
        className={styles.input}
        type="password"
        size="extraLarge"
+        minLength={passwordLimits.minLength}
+        maxLength={passwordLimits.maxLength}
        placeholder={t['com.affine.auth.set.password.placeholder.confirm']()}
        onChange={onConfirmPasswordChange}
        endFix={
-          confirmStatus ? (
-            confirmStatus === 'success' ? (
-              <SuccessIcon />
-            ) : (
-              <ErrorIcon />
-            )
-          ) : null
+          <div className={statusWrapper}>
+            {confirmStatus ? (
+              confirmStatus === 'success' ? (
+                <SuccessIcon />
+              ) : (
+                <ErrorIcon />
+              )
+            ) : null}
+          </div>
        }
        {...inputProps}
      />
--- a/packages/frontend/component/src/components/auth-components/password-input/style.css.ts
+++ b/packages/frontend/component/src/components/auth-components/password-input/style.css.ts
@@ -1,7 +1,11 @@
 import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
+export const statusWrapper = style({
+  marginLeft: 8,
+  marginRight: 10,
+});
 export const tag = style({
-  padding: '0 15px',
+  padding: '2px 15px',
  height: 20,
  lineHeight: '20px',
  borderRadius: 10,
@@ -19,7 +23,7 @@ export const tag = style({
      backgroundColor: cssVar('tagGreen'),
      color: cssVar('successColor'),
    },
-    '&.maximum': {
+    '&.minimum, &.maximum': {
      backgroundColor: cssVar('tagRed'),
      color: cssVar('errorColor'),
    },
--- a/packages/frontend/component/src/components/auth-components/password-input/tag.tsx
+++ b/packages/frontend/component/src/components/auth-components/password-input/tag.tsx
@@ -4,15 +4,23 @@ import { useMemo } from 'react';

 import type { Status } from './index';
 import { tag } from './style.css';
-export const Tag: FC<{ status: Status }> = ({ status }) => {
+
+type TagProps = {
+  status: Status;
+  minimum: string;
+  maximum: string;
+};
+
+export const Tag: FC<TagProps> = ({ status, minimum, maximum }) => {
  const textMap = useMemo<{ [K in Status]: string }>(() => {
    return {
      weak: 'Weak',
      medium: 'Medium',
      strong: 'Strong',
-      maximum: 'Maximum',
+      minimum,
+      maximum,
    };
-  }, []);
+  }, [minimum, maximum]);

  return (
    <div
@@ -20,6 +28,7 @@ export const Tag: FC<{ status: Status }> = ({ status }) => {
        weak: status === 'weak',
        medium: status === 'medium',
        strong: status === 'strong',
+        minimum: status === 'minimum',
        maximum: status === 'maximum',
      })}
    >
--- a/packages/frontend/component/src/components/auth-components/set-password-page.tsx
+++ b/packages/frontend/component/src/components/auth-components/set-password-page.tsx
@@ -1,3 +1,4 @@
+import type { PasswordLimitsFragment } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useSetAtom } from 'jotai';
 import type { FC } from 'react';
@@ -11,9 +12,15 @@ import type { User } from './type';

 export const SetPasswordPage: FC<{
  user: User;
+  passwordLimits: PasswordLimitsFragment;
  onSetPassword: (password: string) => Promise<void>;
  onOpenAffine: () => void;
-}> = ({ user: { email }, onSetPassword: propsOnSetPassword, onOpenAffine }) => {
+}> = ({
+  user: { email },
+  passwordLimits,
+  onSetPassword: propsOnSetPassword,
+  onOpenAffine,
+}) => {
  const t = useAFFiNEI18N();
  const [hasSetUp, setHasSetUp] = useState(false);
  const pushNotification = useSetAtom(pushNotificationAtom);
@@ -46,7 +53,10 @@ export const SetPasswordPage: FC<{
          t['com.affine.auth.sent.set.password.success.message']()
        ) : (
          <>
-            {t['com.affine.auth.page.sent.email.subtitle']()}
+            {t['com.affine.auth.page.sent.email.subtitle']({
+              min: String(passwordLimits.minLength),
+              max: String(passwordLimits.maxLength),
+            })}
            <a href={`mailto:${email}`}>{email}</a>
          </>
        )
@@ -57,7 +67,10 @@ export const SetPasswordPage: FC<{
          {t['com.affine.auth.open.affine']()}
        </Button>
      ) : (
-        <SetPassword onSetPassword={onSetPassword} />
+        <SetPassword
+          passwordLimits={passwordLimits}
+          onSetPassword={onSetPassword}
+        />
      )}
    </AuthPageContainer>
  );
--- a/packages/frontend/component/src/components/auth-components/set-password.tsx
+++ b/packages/frontend/component/src/components/auth-components/set-password.tsx
@@ -1,3 +1,4 @@
+import type { PasswordLimitsFragment } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { FC } from 'react';
 import { useCallback, useRef, useState } from 'react';
@@ -7,10 +8,11 @@ import { Wrapper } from '../../ui/layout';
 import { PasswordInput } from './password-input';

 export const SetPassword: FC<{
+  passwordLimits: PasswordLimitsFragment;
  showLater?: boolean;
  onLater?: () => void;
  onSetPassword: (password: string) => void;
-}> = ({ onLater, onSetPassword, showLater = false }) => {
+}> = ({ passwordLimits, onLater, onSetPassword, showLater = false }) => {
  const t = useAFFiNEI18N();

  const [passwordPass, setPasswordPass] = useState(false);
@@ -20,6 +22,7 @@ export const SetPassword: FC<{
    <>
      <Wrapper marginTop={30} marginBottom={42}>
        <PasswordInput
+          passwordLimits={passwordLimits}
          onPass={useCallback(password => {
            setPasswordPass(true);
            passwordRef.current = password;
--- a/packages/frontend/component/src/components/auth-components/sign-up-page.tsx
+++ b/packages/frontend/component/src/components/auth-components/sign-up-page.tsx
@@ -1,3 +1,4 @@
+import type { PasswordLimitsFragment } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useSetAtom } from 'jotai';
 import type { FC } from 'react';
@@ -10,11 +11,13 @@ import { SetPassword } from './set-password';
 import type { User } from './type';

 export const SignUpPage: FC<{
+  passwordLimits: PasswordLimitsFragment;
  user: User;
  onSetPassword: (password: string) => Promise<void>;
  openButtonText?: string;
  onOpenAffine: () => void;
 }> = ({
+  passwordLimits,
  user: { email },
  onSetPassword: propsOnSetPassword,
  onOpenAffine,
@@ -55,7 +58,10 @@ export const SignUpPage: FC<{
          t['com.affine.auth.sign.up.success.subtitle']()
        ) : (
          <>
-            {t['com.affine.auth.page.sent.email.subtitle']()}
+            {t['com.affine.auth.page.sent.email.subtitle']({
+              min: String(passwordLimits.minLength),
+              max: String(passwordLimits.maxLength),
+            })}
            <a href={`mailto:${email}`}>{email}</a>
          </>
        )
@@ -67,6 +73,7 @@ export const SignUpPage: FC<{
        </Button>
      ) : (
        <SetPassword
+          passwordLimits={passwordLimits}
          onSetPassword={onSetPassword}
          onLater={onLater}
          showLater={true}