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

packages/frontend/core/src/components/affine/auth/send-email.tsx

@@ -7,8 +7,10 @@ import {
 } from '@affine/component/auth-components';
 import { pushNotificationAtom } from '@affine/component/notification-center';
 import { Button } from '@affine/component/ui/button';
+import { useCredentialsRequirement } from '@affine/core/hooks/affine/use-server-config';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import {
+  type PasswordLimitsFragment,
   sendChangeEmailMutation,
   sendChangePasswordEmailMutation,
   sendSetPasswordEmailMutation,
@@ -35,12 +37,19 @@ const useEmailTitle = (emailType: AuthPanelProps['emailType']) => {
       return t['com.affine.settings.email.action.verify']();
   }
 };
-const useContent = (emailType: AuthPanelProps['emailType'], email: string) => {
+const useContent = (
+  emailType: AuthPanelProps['emailType'],
+  email: string,
+  passwordLimits: PasswordLimitsFragment
+) => {
   const t = useAFFiNEI18N();
 
   switch (emailType) {
     case 'setPassword':
-      return t['com.affine.auth.set.password.message']();
+      return t['com.affine.auth.set.password.message']({
+        min: String(passwordLimits.minLength),
+        max: String(passwordLimits.maxLength),
+      });
     case 'changePassword':
       return t['com.affine.auth.reset.password.message']();
     case 'changeEmail':
@@ -154,12 +163,13 @@ export const SendEmail = ({
   emailType,
 }: AuthPanelProps) => {
   const t = useAFFiNEI18N();
+  const { password: passwordLimits } = useCredentialsRequirement();
   const [hasSentEmail, setHasSentEmail] = useState(false);
   const pushNotification = useSetAtom(pushNotificationAtom);
 
   const title = useEmailTitle(emailType);
   const hint = useNotificationHint(emailType);
-  const content = useContent(emailType, email);
+  const content = useContent(emailType, email, passwordLimits);
   const buttonContent = useButtonContent(emailType);
   const { loading, sendEmail } = useSendEmail(emailType);
 

packages/frontend/core/src/components/affine/auth/subscription-redirect.tsx

@@ -2,6 +2,7 @@ import { SignUpPage } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
 import { Loading } from '@affine/component/ui/loading';
 import { AffineShapeIcon } from '@affine/core/components/page-list';
+import { useCredentialsRequirement } from '@affine/core/hooks/affine/use-server-config';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import type { SubscriptionPlan, SubscriptionRecurring } from '@affine/graphql';
 import {
@@ -106,6 +107,7 @@ const SubscriptionRedirectWithData = () => {
   const user = useCurrentUser();
   const searchData = useSubscriptionSearch();
   const openPaymentUrl = usePaymentRedirect();
+  const { password: passwordLimits } = useCredentialsRequirement();
 
   const { trigger: changePassword } = useMutation({
     mutation: changePasswordMutation,
@@ -128,6 +130,7 @@ const SubscriptionRedirectWithData = () => {
     return (
       <SignUpPage
         user={user}
+        passwordLimits={passwordLimits}
         onSetPassword={onSetPassword}
         onOpenAffine={openPaymentUrl}
         openButtonText={t['com.affine.payment.subscription.go-to-subscribe']()}

packages/frontend/core/src/hooks/affine/use-server-config.ts

@@ -1,4 +1,4 @@
-import type { ServerFeature } from '@affine/graphql';
+import type { ServerConfigQuery, ServerFeature } from '@affine/graphql';
 import { oauthProvidersQuery, serverConfigQuery } from '@affine/graphql';
 import type { BareFetcher, Middleware } from 'swr';
 
@@ -73,3 +73,13 @@ export const useServerBaseUrl = () => {
 
   return config.baseUrl;
 };
+
+export const useCredentialsRequirement = () => {
+  const config = useServerConfig();
+
+  if (!config) {
+    return {} as ServerConfigQuery['serverConfig']['credentialsRequirement'];
+  }
+
+  return config.credentialsRequirement;
+};

packages/frontend/core/src/pages/auth.tsx

@@ -8,6 +8,7 @@ import {
   SignUpPage,
 } from '@affine/component/auth-components';
 import { pushNotificationAtom } from '@affine/component/notification-center';
+import { useCredentialsRequirement } from '@affine/core/hooks/affine/use-server-config';
 import {
   changeEmailMutation,
   changePasswordMutation,
@@ -45,6 +46,7 @@ const authTypeSchema = z.enum([
 export const AuthPage = (): ReactElement | null => {
   const user = useCurrentUser();
   const t = useAFFiNEI18N();
+  const { password: passwordLimits } = useCredentialsRequirement();
 
   const { authType } = useParams();
   const [searchParams] = useSearchParams();
@@ -112,6 +114,7 @@ export const AuthPage = (): ReactElement | null => {
       return (
         <SignUpPage
           user={user}
+          passwordLimits={passwordLimits}
           onSetPassword={onSetPassword}
           onOpenAffine={onOpenAffine}
         />
@@ -124,6 +127,7 @@ export const AuthPage = (): ReactElement | null => {
       return (
         <ChangePasswordPage
           user={user}
+          passwordLimits={passwordLimits}
           onSetPassword={onSetPassword}
           onOpenAffine={onOpenAffine}
         />
@@ -133,6 +137,7 @@ export const AuthPage = (): ReactElement | null => {
       return (
         <SetPasswordPage
           user={user}
+          passwordLimits={passwordLimits}
           onSetPassword={onSetPassword}
           onOpenAffine={onOpenAffine}
         />