@hanwenbo/x-taro-ui 0.0.1 → 0.0.2

package/lib/auth/components.js

@@ -77,6 +77,7 @@ function ThirdPartySignIn({
   testID,
   tokens
 }) {
+  const t = (0, import_react2.useAuthTranslation)(config);
   const controller = (0, import_react2.useThirdPartySignInController)({
     config,
     onAuthError,
@@ -96,21 +97,31 @@ function ThirdPartySignIn({
       style: useAuthStyle(tokens, style)
     },
     /* @__PURE__ */ import_react.default.createElement(import_internal.AuthError, null, controller.error),
-    /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-divider" }, /* @__PURE__ */ import_react.default.createElement(import_components.View, null), /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, "其他方式登录"), /* @__PURE__ */ import_react.default.createElement(import_components.View, null)),
+    /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-divider" }, /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-divider__line" }), /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, t("auth.otherSignIn")), /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-divider__line" })),
     /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-third-party__items" }, controller.providers.map((provider) => /* @__PURE__ */ import_react.default.createElement(
       import_button.Button,
       {
-        ariaLabel: provider.ariaLabel ?? `${String(provider.label)}登录`,
-        block: true,
+        ariaLabel: provider.ariaLabel ?? t("auth.providerSignIn", { provider: String(provider.label) }),
+        className: "x-taro-auth-third-party__item",
+        compact: true,
         disabled: provider.disabled || Boolean(controller.loadingProviderId),
-        icon: provider.icon,
+        icon: /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-third-party__icon" }, provider.icon ?? /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "ShieldCheck", size: 28 })),
+        loadingIcon: /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-third-party__icon" }, /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "Loader2", size: 28, spin: true })),
         key: provider.id,
         loading: provider.loading || controller.loadingProviderId === provider.id,
         onClick: () => void controller.signIn(provider),
-        size: "large",
-        type: "outline"
+        size: "small",
+        variant: "ghost",
+        gap: "var(--x-space-2)",
+        style: {
+          flexDirection: "column",
+          flex: "0 0 auto",
+          width: "calc(var(--x-space-8) * 2)",
+          padding: "var(--x-space-1) 0",
+          borderWidth: 0
+        }
       },
-      provider.label
+      /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-third-party__label" }, provider.label)
     )))
   );
 }
@@ -119,7 +130,8 @@ function SignIn({
   config,
   contextFields = [],
   defaultMethod,
-  description = "使用账号密码、验证码或第三方方式登录",
+  description,
+  headerAlign,
   logo,
   methods,
   onAuthError,
@@ -137,9 +149,10 @@ function SignIn({
   style,
   surface,
   testID,
-  title = "登录",
+  title,
   tokens
 }) {
+  const t = (0, import_react2.useAuthTranslation)(config);
   const controller = (0, import_react2.useSignInController)({
     config,
     contextFields,
@@ -151,11 +164,14 @@ function SignIn({
     onSuccess,
     services
   });
+  if (description === void 0) description = t("auth.signInDescription");
+  if (title === void 0) title = t("auth.signIn");
   return /* @__PURE__ */ import_react.default.createElement(
     import_internal.AuthPanel,
     {
       className,
       description,
+      headerAlign,
       logo,
       style: useAuthStyle(tokens, style),
       surface,
@@ -163,12 +179,12 @@ function SignIn({
       title
     },
     /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form" }, /* @__PURE__ */ import_react.default.createElement(import_internal.AuthError, null, controller.error), /* @__PURE__ */ import_react.default.createElement(
-      import_internal.AuthSelector,
+      import_internal.CredentialSelector,
       {
         onChange: controller.selectCredentialType,
         options: controller.credentialOptions.map((value) => ({
           value,
-          label: value === "password" ? "密码登录" : "验证码登录"
+          label: value === "password" ? t("auth.passwordSignIn") : t("auth.codeSignIn")
         })),
         value: controller.credentialType
       }
@@ -192,10 +208,10 @@ function SignIn({
       /* @__PURE__ */ import_react.default.createElement(
         import_inputItem.InputItem,
         {
-          error: controller.contextFieldErrors[field.name],
+          error: Boolean(controller.contextFieldErrors[field.name]),
           maxLength: field.maxLength,
           onChange: (value) => controller.setContextValue(field.name, value),
-          placeholder: field.placeholder ?? `请输入${field.label}`,
+          placeholder: field.placeholder ?? t("auth.enter", { label: field.label }),
           prefix: field.prefix,
           size: "large",
           testID: testID ? `${testID}-context-${field.name}` : void 0,
@@ -217,14 +233,14 @@ function SignIn({
       import_internal.AuthField,
       {
         error: controller.fieldErrors.password,
-        label: showFieldLabels ? "密码" : void 0
+        label: showFieldLabels ? t("auth.password") : void 0
       },
       /* @__PURE__ */ import_react.default.createElement(
         import_inputItem.InputItem,
         {
-          error: controller.fieldErrors.password,
+          error: Boolean(controller.fieldErrors.password),
           onChange: controller.setPassword,
-          placeholder: "请输入密码",
+          placeholder: t("auth.enter", { label: t("auth.password") }),
           prefix: /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "Lock", size: 18 }),
           size: "large",
           type: "password",
@@ -234,6 +250,7 @@ function SignIn({
     ) : /* @__PURE__ */ import_react.default.createElement(
       import_internal.VerificationCodeInput,
       {
+        config: controller.config,
         codeLength: controller.config.code.length,
         countdown: controller.countdown,
         disabled: controller.submitting,
@@ -244,10 +261,10 @@ function SignIn({
         showLabel: showFieldLabels,
         value: controller.code
       }
-    ), showRemember || onForgotPassword ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form__meta" }, showRemember ? /* @__PURE__ */ import_react.default.createElement(import_checkbox.Checkbox, { checked: controller.remember, onChange: controller.setRemember }, "记住我") : /* @__PURE__ */ import_react.default.createElement(import_components.View, null), onForgotPassword && controller.credentialType === "password" ? /* @__PURE__ */ import_react.default.createElement(import_button.Button, { onClick: onForgotPassword, size: "small", type: "link" }, "忘记密码？") : null) : null, /* @__PURE__ */ import_react.default.createElement(
+    ), showRemember || onForgotPassword && controller.credentialType === "password" ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form__meta" }, showRemember ? /* @__PURE__ */ import_react.default.createElement(import_checkbox.Checkbox, { checked: controller.remember, onChange: controller.setRemember }, t("auth.remember")) : /* @__PURE__ */ import_react.default.createElement(import_components.View, null), onForgotPassword && controller.credentialType === "password" ? /* @__PURE__ */ import_react.default.createElement(import_button.Button, { onClick: onForgotPassword, size: "small", type: "link", compact: true }, t("auth.forgotLink")) : null) : null, /* @__PURE__ */ import_react.default.createElement(
       import_button.Button,
       {
-        ariaLabel: "登录",
+        ariaLabel: t("auth.signIn"),
         block: true,
         disabled: !controller.method || controller.submitting,
         loading: controller.submitting,
@@ -255,7 +272,7 @@ function SignIn({
         size: "large",
         testID: testID ? `${testID}-submit` : void 0
       },
-      "登录"
+      t("auth.signIn")
     ), /* @__PURE__ */ import_react.default.createElement(
       ThirdPartySignIn,
       {
@@ -268,14 +285,14 @@ function SignIn({
         providers,
         services
       }
-    ), onSignUp ? /* @__PURE__ */ import_react.default.createElement(InlineFooter, null, /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, "还没有账号？"), /* @__PURE__ */ import_react.default.createElement(import_button.Button, { onClick: onSignUp, size: "small", type: "link" }, "立即注册")) : null)
+    ), onSignUp ? /* @__PURE__ */ import_react.default.createElement(InlineFooter, null, /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, t("auth.noAccount")), /* @__PURE__ */ import_react.default.createElement(import_button.Button, { onClick: onSignUp, size: "small", type: "link", compact: true }, t("auth.signUpNow"))) : null)
   );
 }
 function SignUp({
   className,
   config,
   defaultIdentifier,
-  description = "验证手机号或邮箱后创建账号",
+  description,
   identifiers,
   logo,
   onAuthError,
@@ -286,9 +303,10 @@ function SignUp({
   style,
   surface,
   testID,
-  title = "注册",
+  title,
   tokens
 }) {
+  const t = (0, import_react2.useAuthTranslation)(config);
   const controller = (0, import_react2.useSignUpController)({
     config,
     defaultIdentifier,
@@ -298,6 +316,8 @@ function SignUp({
     onSuccess,
     services
   });
+  if (description === void 0) description = t("auth.signUpDescription");
+  if (title === void 0) title = t("auth.signUp");
   return /* @__PURE__ */ import_react.default.createElement(
     import_internal.AuthPanel,
     {
@@ -313,7 +333,7 @@ function SignUp({
       import_internal.AuthSelector,
       {
         onChange: controller.setIdentifierType,
-        options: (0, import_internal.contactOptions)(controller.identifiers),
+        options: (0, import_internal.contactOptions)(controller.identifiers, controller.config),
         value: controller.identifierType
       }
     ), /* @__PURE__ */ import_react.default.createElement(
@@ -328,6 +348,7 @@ function SignUp({
     ), /* @__PURE__ */ import_react.default.createElement(
       import_internal.VerificationCodeInput,
       {
+        config: controller.config,
         codeLength: controller.config.code.length,
         countdown: controller.countdown,
         disabled: controller.submitting,
@@ -337,22 +358,22 @@ function SignUp({
         sending: controller.sendingCode,
         value: controller.code
       }
-    ), /* @__PURE__ */ import_react.default.createElement(import_internal.AuthField, { error: controller.fieldErrors.password, label: "密码" }, /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react.default.createElement(import_internal.AuthField, { error: controller.fieldErrors.password, label: t("auth.password") }, /* @__PURE__ */ import_react.default.createElement(
       import_inputItem.InputItem,
       {
-        error: controller.fieldErrors.password,
+        error: Boolean(controller.fieldErrors.password),
         onChange: controller.setPassword,
-        placeholder: `至少 ${controller.config.password.minLength} 位`,
+        placeholder: t("auth.passwordHint", { length: controller.config.password.minLength }),
         size: "large",
         type: "password",
         value: controller.password
       }
-    )), /* @__PURE__ */ import_react.default.createElement(import_internal.AuthField, { error: controller.fieldErrors.confirmPassword, label: "确认密码" }, /* @__PURE__ */ import_react.default.createElement(
+    )), /* @__PURE__ */ import_react.default.createElement(import_internal.AuthField, { error: controller.fieldErrors.confirmPassword, label: t("auth.confirmPassword") }, /* @__PURE__ */ import_react.default.createElement(
       import_inputItem.InputItem,
       {
-        error: controller.fieldErrors.confirmPassword,
+        error: Boolean(controller.fieldErrors.confirmPassword),
         onChange: controller.setConfirmPassword,
-        placeholder: "请再次输入密码",
+        placeholder: t("auth.repeatPassword"),
         size: "large",
         type: "password",
         value: controller.confirmPassword
@@ -364,7 +385,7 @@ function SignUp({
         key: agreement.id,
         onChange: (checked) => controller.toggleAgreement(agreement.id, checked)
       },
-      agreement.href ? /* @__PURE__ */ import_react.default.createElement(import_button.Button, { href: agreement.href, size: "small", type: "link" }, agreement.label) : agreement.label
+      agreement.href ? /* @__PURE__ */ import_react.default.createElement(import_button.Button, { href: agreement.href, size: "small", type: "link", compact: true }, agreement.label) : agreement.label
     )))) : null, /* @__PURE__ */ import_react.default.createElement(
       import_button.Button,
       {
@@ -373,13 +394,14 @@ function SignUp({
         onClick: () => void controller.submit(),
         size: "large"
       },
-      "注册"
-    ), onSignIn ? /* @__PURE__ */ import_react.default.createElement(InlineFooter, null, /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, "已有账号？"), /* @__PURE__ */ import_react.default.createElement(import_button.Button, { onClick: onSignIn, size: "small", type: "link" }, "去登录")) : null)
+      t("auth.signUp")
+    ), onSignIn ? /* @__PURE__ */ import_react.default.createElement(InlineFooter, null, /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, t("auth.hasAccount")), /* @__PURE__ */ import_react.default.createElement(import_button.Button, { onClick: onSignIn, size: "small", type: "link", compact: true }, t("auth.goSignIn"))) : null)
   );
 }
 function ForgotPassword({
   className,
   config,
+  description,
   defaultIdentifier,
   identifiers,
   onAuthError,
@@ -390,9 +412,10 @@ function ForgotPassword({
   style,
   surface,
   testID,
-  title = "找回密码",
+  title,
   tokens
 }) {
+  const t = (0, import_react2.useAuthTranslation)(config);
   const controller = (0, import_react2.useForgotPasswordController)({
     config,
     defaultIdentifier,
@@ -402,18 +425,32 @@ function ForgotPassword({
     onSuccess,
     services
   });
+  if (title === void 0) title = t("auth.forgotPassword");
   const activeStep = controller.step === "verify" ? 0 : controller.step === "reset" ? 1 : 2;
   return /* @__PURE__ */ import_react.default.createElement(
     import_internal.AuthPanel,
     {
       className,
-      description: "验证账号身份后重新设置密码",
+      description: description === void 0 ? t("auth.forgotDescription") : description,
       style: useAuthStyle(tokens, style),
       surface,
       testID,
       title
     },
-    /* @__PURE__ */ import_react.default.createElement(import_components.View, { ariaLabel: "找回密码步骤", className: "x-taro-auth-steps" }, ["验证身份", "设置密码", "完成"].map((label, index) => /* @__PURE__ */ import_react.default.createElement(import_components.View, { "data-active": index === activeStep ? "true" : "false", key: label }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, index + 1), /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, label)))),
+    /* @__PURE__ */ import_react.default.createElement(import_components.View, { ariaLabel: t("auth.forgotSteps"), className: "x-taro-auth-steps" }, [
+      t(controller.verifiesBeforeReset ? "auth.verifyIdentity" : "auth.code"),
+      t("auth.setPassword"),
+      t("auth.done")
+    ].map((label, index) => /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: "x-taro-auth-step",
+        "data-active": index === activeStep ? "true" : "false",
+        key: label
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-step__number" }, index + 1),
+      /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, label)
+    ))),
     /* @__PURE__ */ import_react.default.createElement(
       import_components.View,
       {
@@ -426,7 +463,7 @@ function ForgotPassword({
         import_internal.AuthSelector,
         {
           onChange: controller.setIdentifierType,
-          options: (0, import_internal.contactOptions)(controller.identifiers),
+          options: (0, import_internal.contactOptions)(controller.identifiers, controller.config),
           value: controller.identifierType
         }
       ), /* @__PURE__ */ import_react.default.createElement(
@@ -441,6 +478,7 @@ function ForgotPassword({
       ), /* @__PURE__ */ import_react.default.createElement(
         import_internal.VerificationCodeInput,
         {
+          config: controller.config,
           codeLength: controller.config.code.length,
           countdown: controller.countdown,
           error: controller.fieldErrors.code,
@@ -457,36 +495,57 @@ function ForgotPassword({
           onClick: () => void controller.submitVerify(),
           size: "large"
         },
-        "下一步"
-      )) : controller.step === "reset" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_internal.AuthField, { error: controller.fieldErrors.newPassword, label: "新密码" }, /* @__PURE__ */ import_react.default.createElement(
+        t("auth.next")
+      )) : controller.step === "reset" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_internal.AuthField, { error: controller.fieldErrors.newPassword, label: t("auth.newPassword") }, /* @__PURE__ */ import_react.default.createElement(
         import_inputItem.InputItem,
         {
-          error: controller.fieldErrors.newPassword,
+          error: Boolean(controller.fieldErrors.newPassword),
           onChange: controller.setNewPassword,
-          placeholder: `至少 ${controller.config.password.minLength} 位`,
+          placeholder: t("auth.passwordHint", {
+            length: controller.config.password.minLength
+          }),
           size: "large",
           type: "password",
           value: controller.newPassword
         }
-      )), /* @__PURE__ */ import_react.default.createElement(import_internal.AuthField, { error: controller.fieldErrors.confirmPassword, label: "确认新密码" }, /* @__PURE__ */ import_react.default.createElement(
-        import_inputItem.InputItem,
+      )), /* @__PURE__ */ import_react.default.createElement(
+        import_internal.AuthField,
         {
           error: controller.fieldErrors.confirmPassword,
-          onChange: controller.setConfirmPassword,
-          placeholder: "请再次输入新密码",
-          size: "large",
-          type: "password",
-          value: controller.confirmPassword
-        }
-      )), /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form__actions" }, /* @__PURE__ */ import_react.default.createElement(import_button.Button, { onClick: controller.back, size: "small", type: "outline" }, "上一步"), /* @__PURE__ */ import_react.default.createElement(
+          label: t("auth.confirmNewPassword")
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_inputItem.InputItem,
+          {
+            error: Boolean(controller.fieldErrors.confirmPassword),
+            onChange: controller.setConfirmPassword,
+            placeholder: t("auth.repeatNewPassword"),
+            size: "large",
+            type: "password",
+            value: controller.confirmPassword
+          }
+        )
+      ), /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form__actions" }, /* @__PURE__ */ import_react.default.createElement(
+        import_button.Button,
+        {
+          onClick: controller.back,
+          style: { alignSelf: "center" },
+          size: "small",
+          type: "link",
+          compact: true,
+          disabled: controller.submitting
+        },
+        t("auth.previous")
+      ), /* @__PURE__ */ import_react.default.createElement(
         import_button.Button,
         {
           loading: controller.submitting,
           onClick: () => void controller.submitReset(),
-          size: "small"
+          size: "large",
+          block: true
         },
-        "重置密码"
-      ))) : /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-success" }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-success__title" }, "密码已重置"), /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, "现在可以使用新密码登录"), onBackToSignIn ? /* @__PURE__ */ import_react.default.createElement(import_button.Button, { block: true, onClick: onBackToSignIn, size: "large" }, "返回登录") : null)
+        t("auth.resetPassword")
+      ))) : /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-success" }, /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "CircleCheck", size: 40 }), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-success__title" }, t("auth.passwordReset")), /* @__PURE__ */ import_react.default.createElement(import_components.Text, null, t("auth.passwordResetDescription")), onBackToSignIn ? /* @__PURE__ */ import_react.default.createElement(import_button.Button, { block: true, onClick: onBackToSignIn, size: "large" }, t("auth.backToSignIn")) : null)
     )
   );
 }
@@ -494,9 +553,9 @@ function QuickSignIn({
   autoSubmitCode = true,
   className,
   config,
-  description = "输入手机号，验证后继续当前操作",
+  description,
   footer,
-  identifierSubmitText = "继续",
+  identifierSubmitText,
   identifierType = "phone",
   initialIdentifier,
   onAuthError,
@@ -507,12 +566,13 @@ function QuickSignIn({
   services,
   showHeader = true,
   style,
-  submitText = "继续",
+  submitText,
   surface = "plain",
   testID,
-  title = "输入手机号",
+  title,
   tokens
 }) {
+  const t = (0, import_react2.useAuthTranslation)(config);
   const controller = (0, import_react2.useQuickSignInController)({
     config,
     defaultIdentifier: identifierType,
@@ -524,6 +584,14 @@ function QuickSignIn({
     onSuccess,
     services
   });
+  if (description === void 0)
+    description = t("auth.quickDescription", {
+      label: (0, import_identifier.identifierLabel)(identifierType, controller.config)
+    });
+  if (identifierSubmitText === void 0) identifierSubmitText = t("auth.continue");
+  if (submitText === void 0) submitText = t("auth.continue");
+  if (title === void 0)
+    title = t("auth.quickTitle", { label: (0, import_identifier.identifierLabel)(identifierType, controller.config) });
   const submittedCodeRef = (0, import_react.useRef)("");
   (0, import_react.useEffect)(() => {
     if (autoSubmitCode && controller.step === "code" && controller.code.length === controller.config.code.length && submittedCodeRef.current !== controller.code) {
@@ -546,30 +614,36 @@ function QuickSignIn({
         "data-direction": controller.direction,
         key: controller.revision
       },
-      controller.step === "code" ? /* @__PURE__ */ import_react.default.createElement(
-        import_button.Button,
-        {
-          ariaLabel: "返回修改账号",
-          className: "x-taro-auth-quick__back",
-          onClick: controller.back,
-          shape: "round",
-          size: "small",
-          type: "ghost"
-        },
-        "←"
-      ) : onClose ? /* @__PURE__ */ import_react.default.createElement(
-        import_button.Button,
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
         {
-          ariaLabel: "关闭",
-          className: "x-taro-auth-quick__close",
-          onClick: onClose,
-          shape: "round",
-          size: "small",
-          type: "ghost"
+          className: `x-taro-auth-quick__nav x-taro-auth-quick__nav--${controller.step === "code" ? "back" : "close"}`
         },
-        "×"
-      ) : null,
-      showHeader ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-quick__header" }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-quick__title" }, controller.step === "identifier" ? title : `输入 ${controller.config.code.length} 位验证码`), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-quick__description" }, controller.step === "identifier" ? description : `验证码已发送至 ${controller.identifierValue}`)) : null,
+        controller.step === "code" ? /* @__PURE__ */ import_react.default.createElement(
+          import_button.Button,
+          {
+            ariaLabel: t("auth.editIdentifier"),
+            className: "x-taro-auth-quick__back",
+            onClick: controller.back,
+            shape: "round",
+            size: "small",
+            type: "ghost"
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "ChevronLeft", size: 18 })
+        ) : onClose ? /* @__PURE__ */ import_react.default.createElement(
+          import_button.Button,
+          {
+            ariaLabel: t("auth.close"),
+            className: "x-taro-auth-quick__close",
+            onClick: onClose,
+            shape: "round",
+            size: "small",
+            type: "ghost"
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "X", size: 18 })
+        ) : null
+      ),
+      showHeader ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-quick__header" }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-quick__title" }, controller.step === "identifier" ? title : t("auth.quickCodeTitle", { length: controller.config.code.length })), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-quick__description" }, controller.step === "identifier" ? description : t("auth.codeSent", { identifier: controller.identifierValue }))) : null,
       /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form" }, /* @__PURE__ */ import_react.default.createElement(import_internal.AuthError, null, controller.error), controller.step === "identifier" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
         import_internal.IdentifierInput,
         {
@@ -591,6 +665,7 @@ function QuickSignIn({
       )) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
         import_internal.VerificationCodeInput,
         {
+          config: controller.config,
           codeLength: controller.config.code.length,
           countdown: controller.countdown,
           error: controller.fieldErrors.code,
@@ -686,6 +761,7 @@ function IdentifierBinding({
   title,
   tokens
 }) {
+  const t = (0, import_react2.useAuthTranslation)(config);
   const controller = (0, import_react2.useIdentifierBindingController)({
     action,
     config,
@@ -696,28 +772,35 @@ function IdentifierBinding({
     requireReauthentication,
     services
   });
-  const label = (0, import_identifier.identifierLabel)(identifierType);
+  const label = (0, import_identifier.identifierLabel)(identifierType, controller.config);
   return /* @__PURE__ */ import_react.default.createElement(
     import_internal.AuthPanel,
     {
       className,
-      description: action === "change" && currentDisplayValue ? `当前${label}：${currentDisplayValue}` : `验证新的${label}后完成${action === "bind" ? "绑定" : "更换"}`,
+      description: action === "change" && currentDisplayValue ? t("auth.currentIdentifier", { label, value: currentDisplayValue }) : t(action === "bind" ? "auth.bindDescription" : "auth.replaceDescription", { label }),
       style: useAuthStyle(tokens, style),
       surface,
       testID,
-      title: title ?? `${action === "bind" ? "绑定" : "更换"}${label}`
+      title: title === void 0 ? t(action === "bind" ? "auth.bindTitle" : "auth.replaceTitle", { label }) : title
     },
-    /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form" }, /* @__PURE__ */ import_react.default.createElement(import_internal.AuthError, null, controller.error), controller.shouldReauthenticate ? /* @__PURE__ */ import_react.default.createElement(import_internal.AuthField, { error: controller.fieldErrors.currentPassword, label: "当前密码" }, /* @__PURE__ */ import_react.default.createElement(
-      import_inputItem.InputItem,
+    /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form" }, /* @__PURE__ */ import_react.default.createElement(import_internal.AuthError, null, controller.error), controller.shouldReauthenticate ? /* @__PURE__ */ import_react.default.createElement(
+      import_internal.AuthField,
       {
         error: controller.fieldErrors.currentPassword,
-        onChange: controller.setCurrentPassword,
-        placeholder: "请输入当前密码",
-        size: "large",
-        type: "password",
-        value: controller.currentPassword
-      }
-    )) : null, /* @__PURE__ */ import_react.default.createElement(
+        label: t("auth.currentPassword")
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_inputItem.InputItem,
+        {
+          error: Boolean(controller.fieldErrors.currentPassword),
+          onChange: controller.setCurrentPassword,
+          placeholder: t("auth.enter", { label: t("auth.currentPassword") }),
+          size: "large",
+          type: "password",
+          value: controller.currentPassword
+        }
+      )
+    ) : null, /* @__PURE__ */ import_react.default.createElement(
       import_internal.IdentifierInput,
       {
         config: controller.config,
@@ -729,6 +812,7 @@ function IdentifierBinding({
     ), /* @__PURE__ */ import_react.default.createElement(
       import_internal.VerificationCodeInput,
       {
+        config: controller.config,
         codeLength: controller.config.code.length,
         countdown: controller.countdown,
         error: controller.fieldErrors.code,
@@ -737,22 +821,33 @@ function IdentifierBinding({
         sending: controller.sendingCode,
         value: controller.code
       }
-    ), /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form__actions" }, onCancel ? /* @__PURE__ */ import_react.default.createElement(import_button.Button, { onClick: onCancel, size: "small", type: "outline" }, "取消") : null, /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form__actions" }, onCancel ? /* @__PURE__ */ import_react.default.createElement(
+      import_button.Button,
+      {
+        onClick: onCancel,
+        style: { alignSelf: "center" },
+        size: "small",
+        type: "link",
+        compact: true,
+        disabled: controller.submitting
+      },
+      t("auth.cancel")
+    ) : null, /* @__PURE__ */ import_react.default.createElement(
       import_button.Button,
       {
         loading: controller.submitting,
         onClick: () => void controller.submit(),
-        size: "small"
+        size: "large",
+        block: true
       },
-      "确认",
-      action === "bind" ? "绑定" : "更换"
+      t(action === "bind" ? "auth.confirmBind" : "auth.confirmReplace")
     )))
   );
 }
 function ChangePassword({
   className,
   config,
-  description = "更新当前账号的登录密码",
+  description,
   onAuthError,
   onCancel,
   onReauthenticationRequired,
@@ -762,9 +857,10 @@ function ChangePassword({
   style,
   surface,
   testID,
-  title = "修改密码",
+  title,
   tokens
 }) {
+  const t = (0, import_react2.useAuthTranslation)(config);
   const controller = (0, import_react2.useChangePasswordController)({
     config,
     onAuthError,
@@ -773,6 +869,8 @@ function ChangePassword({
     requireCurrentPassword,
     services
   });
+  if (description === void 0) description = t("auth.changePasswordDescription");
+  if (title === void 0) title = t("auth.changePassword");
   return /* @__PURE__ */ import_react.default.createElement(
     import_internal.AuthPanel,
     {
@@ -783,51 +881,77 @@ function ChangePassword({
       testID,
       title
     },
-    /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form" }, /* @__PURE__ */ import_react.default.createElement(import_internal.AuthError, null, controller.error), controller.requireCurrentPassword ? /* @__PURE__ */ import_react.default.createElement(import_internal.AuthField, { error: controller.fieldErrors.currentPassword, label: "当前密码" }, /* @__PURE__ */ import_react.default.createElement(
-      import_inputItem.InputItem,
+    /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form" }, /* @__PURE__ */ import_react.default.createElement(import_internal.AuthError, null, controller.error), controller.requireCurrentPassword ? /* @__PURE__ */ import_react.default.createElement(
+      import_internal.AuthField,
       {
         error: controller.fieldErrors.currentPassword,
-        onChange: controller.setCurrentPassword,
-        placeholder: "请输入当前密码",
-        size: "large",
-        type: "password",
-        value: controller.currentPassword
-      }
-    )) : null, /* @__PURE__ */ import_react.default.createElement(import_internal.AuthField, { error: controller.fieldErrors.newPassword, label: "新密码" }, /* @__PURE__ */ import_react.default.createElement(
+        label: t("auth.currentPassword")
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_inputItem.InputItem,
+        {
+          error: Boolean(controller.fieldErrors.currentPassword),
+          onChange: controller.setCurrentPassword,
+          placeholder: t("auth.enter", { label: t("auth.currentPassword") }),
+          size: "large",
+          type: "password",
+          value: controller.currentPassword
+        }
+      )
+    ) : null, /* @__PURE__ */ import_react.default.createElement(import_internal.AuthField, { error: controller.fieldErrors.newPassword, label: t("auth.newPassword") }, /* @__PURE__ */ import_react.default.createElement(
       import_inputItem.InputItem,
       {
-        error: controller.fieldErrors.newPassword,
+        error: Boolean(controller.fieldErrors.newPassword),
         onChange: controller.setNewPassword,
-        placeholder: `至少 ${controller.config.password.minLength} 位`,
+        placeholder: t("auth.passwordHint", { length: controller.config.password.minLength }),
         size: "large",
         type: "password",
         value: controller.newPassword
       }
-    )), /* @__PURE__ */ import_react.default.createElement(import_internal.AuthField, { error: controller.fieldErrors.confirmPassword, label: "确认新密码" }, /* @__PURE__ */ import_react.default.createElement(
-      import_inputItem.InputItem,
+    )), /* @__PURE__ */ import_react.default.createElement(
+      import_internal.AuthField,
       {
         error: controller.fieldErrors.confirmPassword,
-        onChange: controller.setConfirmPassword,
-        placeholder: "请再次输入新密码",
-        size: "large",
-        type: "password",
-        value: controller.confirmPassword
-      }
-    )), /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form__actions" }, onCancel ? /* @__PURE__ */ import_react.default.createElement(import_button.Button, { onClick: onCancel, size: "small", type: "outline" }, "取消") : null, /* @__PURE__ */ import_react.default.createElement(
+        label: t("auth.confirmNewPassword")
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_inputItem.InputItem,
+        {
+          error: Boolean(controller.fieldErrors.confirmPassword),
+          onChange: controller.setConfirmPassword,
+          placeholder: t("auth.repeatNewPassword"),
+          size: "large",
+          type: "password",
+          value: controller.confirmPassword
+        }
+      )
+    ), /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-form__actions" }, onCancel ? /* @__PURE__ */ import_react.default.createElement(
+      import_button.Button,
+      {
+        onClick: onCancel,
+        style: { alignSelf: "center" },
+        size: "small",
+        type: "link",
+        compact: true,
+        disabled: controller.submitting
+      },
+      t("auth.cancel")
+    ) : null, /* @__PURE__ */ import_react.default.createElement(
       import_button.Button,
       {
         loading: controller.submitting,
         onClick: () => void controller.submit(),
-        size: "small"
+        size: "large",
+        block: true
       },
-      "确认修改"
+      t("auth.confirmChange")
     )))
   );
 }
 function AccountSecurity({
   className,
   config,
-  description = "管理可用于登录和找回账号的安全信息",
+  description,
   onAuthError,
   onReauthenticationRequired,
   onStateChange,
@@ -835,10 +959,11 @@ function AccountSecurity({
   state,
   style,
   testID,
-  title = "账号安全",
+  title,
   tokens
 }) {
   var _a, _b;
+  const t = (0, import_react2.useAuthTranslation)(config);
   const controller = (0, import_react2.useAccountSecurityController)({
     config,
     onAuthError,
@@ -847,6 +972,8 @@ function AccountSecurity({
     services,
     state
   });
+  if (description === void 0) description = t("auth.securityDescription");
+  if (title === void 0) title = t("auth.security");
   const [dialog, setDialog] = (0, import_react.useState)();
   const close = () => setDialog(void 0);
   const complete = async () => {
@@ -862,16 +989,19 @@ function AccountSecurity({
     },
     /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-security__header" }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-security__title" }, title), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-security__description" }, description)),
     /* @__PURE__ */ import_react.default.createElement(import_internal.AuthError, null, controller.error),
-    controller.loading ? /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-security__loading" }, "正在加载…") : null,
+    controller.loading ? /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-security__loading" }, t("auth.loading")) : null,
     /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-security__list" }, controller.config.accountSecurity.identifiers.map((type) => {
       var _a2;
       const binding = (_a2 = controller.state) == null ? void 0 : _a2[type];
       const action = (binding == null ? void 0 : binding.bound) ? "change" : "bind";
-      return /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-security__row", key: type }, /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-security__content" }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-security__label" }, (0, import_identifier.identifierLabel)(type)), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-security__value" }, (binding == null ? void 0 : binding.bound) ? `已绑定${binding.displayValue ? `，${binding.displayValue}` : ""}` : "未绑定，绑定后可用于登录")), /* @__PURE__ */ import_react.default.createElement(import_button.Button, { onClick: () => setDialog({ action, type }), size: "small", type: "outline" }, action === "bind" ? "绑定" : "更换"));
-    }), /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-security__row" }, /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-security__content" }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-security__label" }, "密码"), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-security__value" }, ((_a = controller.state) == null ? void 0 : _a.password.set) ? "已设置，可通过密码登录" : "未设置")), /* @__PURE__ */ import_react.default.createElement(import_button.Button, { onClick: () => setDialog({ action: "password" }), size: "small", type: "outline" }, "修改"))),
+      return /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-security__row", key: type }, /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-security__content" }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-security__label" }, (0, import_identifier.identifierLabel)(type, controller.config)), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-security__value" }, (binding == null ? void 0 : binding.bound) ? binding.displayValue ? t("auth.linkedValue", { value: binding.displayValue }) : t("auth.linked") : t("auth.notLinked"))), /* @__PURE__ */ import_react.default.createElement(import_button.Button, { onClick: () => setDialog({ action, type }), size: "small", type: "outline" }, action === "bind" ? t("auth.bind") : t("auth.replace")));
+    }), /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-security__row" }, /* @__PURE__ */ import_react.default.createElement(import_components.View, { className: "x-taro-auth-security__content" }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-security__label" }, t("auth.password")), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { className: "x-taro-auth-security__value" }, ((_a = controller.state) == null ? void 0 : _a.password.set) ? t("auth.passwordSet") : t("auth.notSet"))), /* @__PURE__ */ import_react.default.createElement(import_button.Button, { onClick: () => setDialog({ action: "password" }), size: "small", type: "outline" }, t("auth.edit")))),
     /* @__PURE__ */ import_react.default.createElement(
       import_modal.Modal,
       {
+        title: (dialog == null ? void 0 : dialog.action) === "password" ? t("auth.changePassword") : (dialog == null ? void 0 : dialog.type) ? t(dialog.action === "bind" ? "auth.bindTitle" : "auth.replaceTitle", {
+          label: (0, import_identifier.identifierLabel)(dialog.type, controller.config)
+        }) : void 0,
         body: (dialog == null ? void 0 : dialog.action) === "password" ? /* @__PURE__ */ import_react.default.createElement(
           ChangePassword,
           {
@@ -879,7 +1009,8 @@ function AccountSecurity({
             onCancel: close,
             onSuccess: () => void complete(),
             services,
-            surface: "plain"
+            surface: "plain",
+            title: null
           }
         ) : (dialog == null ? void 0 : dialog.type) ? /* @__PURE__ */ import_react.default.createElement(
           IdentifierBinding,
@@ -891,7 +1022,8 @@ function AccountSecurity({
             onCancel: close,
             onSuccess: () => void complete(),
             services,
-            surface: "plain"
+            surface: "plain",
+            title: null
           }
         ) : null,
         closeIcon: true,