@hanwenbo/x-taro-ui 0.0.1 → 0.0.3

package/es/auth/components.js

@@ -19,13 +19,13 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Text, View } from '@tarojs/components';
 import { identifierLabel } from '@hanwenbo/x-auth-core/identifier';
-import { useAccountSecurityController, useChangePasswordController, useForgotPasswordController, useIdentifierBindingController, useQuickSignInController, useSignInController, useSignUpController, useThirdPartySignInController } from '@hanwenbo/x-auth-core/react';
+import { useAuthTranslation, useAccountSecurityController, useChangePasswordController, useForgotPasswordController, useIdentifierBindingController, useQuickSignInController, useSignInController, useSignUpController, useThirdPartySignInController } from '@hanwenbo/x-auth-core/react';
 import { Button } from "../components/button";
 import { Checkbox } from "../components/checkbox";
 import { Icon } from "../components/icon";
 import { InputItem } from "../components/inputItem/index";
 import { Modal } from "../components/modal";
-import { AuthError, AuthField, AuthPanel, AuthSelector, IdentifierInput, VerificationCodeInput, contactOptions } from "./internal";
+import { AuthError, AuthField, AuthPanel, AuthSelector, CredentialSelector, IdentifierInput, VerificationCodeInput, contactOptions } from "./internal";
 import { useAuthTheme } from "./provider";
 import { authThemeTokensToStyle } from "./theme";
 import "./styles.css";
@@ -56,6 +56,7 @@ export function ThirdPartySignIn(_ref2) {
     style = _ref2.style,
     testID = _ref2.testID,
     tokens = _ref2.tokens;
+  var t = useAuthTranslation(config);
   var controller = useThirdPartySignInController({
     config: config,
     onAuthError: onAuthError,
@@ -75,25 +76,57 @@ export function ThirdPartySignIn(_ref2) {
       children: controller.error
     }), /*#__PURE__*/_jsxs(View, {
       className: "x-taro-auth-divider",
-      children: [/*#__PURE__*/_jsx(View, {}), /*#__PURE__*/_jsx(Text, {
-        children: "\u5176\u4ED6\u65B9\u5F0F\u767B\u5F55"
-      }), /*#__PURE__*/_jsx(View, {})]
+      children: [/*#__PURE__*/_jsx(View, {
+        className: "x-taro-auth-divider__line"
+      }), /*#__PURE__*/_jsx(Text, {
+        children: t('auth.otherSignIn')
+      }), /*#__PURE__*/_jsx(View, {
+        className: "x-taro-auth-divider__line"
+      })]
     }), /*#__PURE__*/_jsx(View, {
       className: "x-taro-auth-third-party__items",
       children: controller.providers.map(function (provider) {
-        var _provider$ariaLabel;
+        var _provider$ariaLabel, _provider$icon;
         return /*#__PURE__*/_jsx(Button, {
-          ariaLabel: (_provider$ariaLabel = provider.ariaLabel) !== null && _provider$ariaLabel !== void 0 ? _provider$ariaLabel : "".concat(String(provider.label), "\u767B\u5F55"),
-          block: true,
+          ariaLabel: (_provider$ariaLabel = provider.ariaLabel) !== null && _provider$ariaLabel !== void 0 ? _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__*/_jsx(View, {
+            className: "x-taro-auth-third-party__icon",
+            children: (_provider$icon = provider.icon) !== null && _provider$icon !== void 0 ? _provider$icon : /*#__PURE__*/_jsx(Icon, {
+              name: "ShieldCheck",
+              size: 28
+            })
+          }),
+          loadingIcon: /*#__PURE__*/_jsx(View, {
+            className: "x-taro-auth-third-party__icon",
+            children: /*#__PURE__*/_jsx(Icon, {
+              name: "Loader2",
+              size: 28,
+              spin: true
+            })
+          }),
           loading: provider.loading || controller.loadingProviderId === provider.id,
           onClick: function onClick() {
             return void controller.signIn(provider);
           },
-          size: "large",
-          type: "outline",
-          children: provider.label
+          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
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            className: "x-taro-auth-third-party__label",
+            children: provider.label
+          })
         }, provider.id);
       })
     })]
@@ -108,8 +141,8 @@ export function SignIn(_ref3) {
     _ref3$contextFields = _ref3.contextFields,
     contextFields = _ref3$contextFields === void 0 ? [] : _ref3$contextFields,
     defaultMethod = _ref3.defaultMethod,
-    _ref3$description = _ref3.description,
-    description = _ref3$description === void 0 ? '使用账号密码、验证码或第三方方式登录' : _ref3$description,
+    description = _ref3.description,
+    headerAlign = _ref3.headerAlign,
     logo = _ref3.logo,
     methods = _ref3.methods,
     onAuthError = _ref3.onAuthError,
@@ -129,9 +162,9 @@ export function SignIn(_ref3) {
     style = _ref3.style,
     surface = _ref3.surface,
     testID = _ref3.testID,
-    _ref3$title = _ref3.title,
-    title = _ref3$title === void 0 ? '登录' : _ref3$title,
+    title = _ref3.title,
     tokens = _ref3.tokens;
+  var t = useAuthTranslation(config);
   var controller = useSignInController({
     config: config,
     contextFields: contextFields,
@@ -143,9 +176,12 @@ export function SignIn(_ref3) {
     onSuccess: onSuccess,
     services: services
   });
+  if (description === undefined) description = t('auth.signInDescription');
+  if (title === undefined) title = t('auth.signIn');
   return /*#__PURE__*/_jsx(AuthPanel, {
     className: className,
     description: description,
+    headerAlign: headerAlign,
     logo: logo,
     style: useAuthStyle(tokens, style),
     surface: surface,
@@ -155,12 +191,12 @@ export function SignIn(_ref3) {
       className: "x-taro-auth-form",
       children: [/*#__PURE__*/_jsx(AuthError, {
         children: controller.error
-      }), /*#__PURE__*/_jsx(AuthSelector, {
+      }), /*#__PURE__*/_jsx(CredentialSelector, {
         onChange: controller.selectCredentialType,
         options: controller.credentialOptions.map(function (value) {
           return {
             value: value,
-            label: value === 'password' ? '密码登录' : '验证码登录'
+            label: value === 'password' ? t('auth.passwordSignIn') : t('auth.codeSignIn')
           };
         }),
         value: controller.credentialType
@@ -179,12 +215,14 @@ export function SignIn(_ref3) {
           error: controller.contextFieldErrors[field.name],
           label: showFieldLabels ? field.label : undefined,
           children: /*#__PURE__*/_jsx(InputItem, {
-            error: controller.contextFieldErrors[field.name],
+            error: Boolean(controller.contextFieldErrors[field.name]),
             maxLength: field.maxLength,
             onChange: function onChange(value) {
               return controller.setContextValue(field.name, value);
             },
-            placeholder: (_field$placeholder = field.placeholder) !== null && _field$placeholder !== void 0 ? _field$placeholder : "\u8BF7\u8F93\u5165".concat(field.label),
+            placeholder: (_field$placeholder = field.placeholder) !== null && _field$placeholder !== void 0 ? _field$placeholder : t('auth.enter', {
+              label: field.label
+            }),
             prefix: field.prefix,
             size: "large",
             testID: testID ? "".concat(testID, "-context-").concat(field.name) : undefined,
@@ -201,11 +239,13 @@ export function SignIn(_ref3) {
         value: controller.identifierValue
       }) : null, controller.credentialType === 'password' ? /*#__PURE__*/_jsx(AuthField, {
         error: controller.fieldErrors.password,
-        label: showFieldLabels ? '密码' : undefined,
+        label: showFieldLabels ? t('auth.password') : undefined,
         children: /*#__PURE__*/_jsx(InputItem, {
-          error: controller.fieldErrors.password,
+          error: Boolean(controller.fieldErrors.password),
           onChange: controller.setPassword,
-          placeholder: "\u8BF7\u8F93\u5165\u5BC6\u7801",
+          placeholder: t('auth.enter', {
+            label: t('auth.password')
+          }),
           prefix: /*#__PURE__*/_jsx(Icon, {
             name: "Lock",
             size: 18
@@ -215,6 +255,7 @@ export function SignIn(_ref3) {
           value: controller.password
         })
       }) : /*#__PURE__*/_jsx(VerificationCodeInput, {
+        config: controller.config,
         codeLength: controller.config.code.length,
         countdown: controller.countdown,
         disabled: controller.submitting,
@@ -226,20 +267,21 @@ export function SignIn(_ref3) {
         sending: controller.sendingCode,
         showLabel: showFieldLabels,
         value: controller.code
-      }), showRemember || onForgotPassword ? /*#__PURE__*/_jsxs(View, {
+      }), showRemember || onForgotPassword && controller.credentialType === 'password' ? /*#__PURE__*/_jsxs(View, {
         className: "x-taro-auth-form__meta",
         children: [showRemember ? /*#__PURE__*/_jsx(Checkbox, {
           checked: controller.remember,
           onChange: controller.setRemember,
-          children: "\u8BB0\u4F4F\u6211"
+          children: t('auth.remember')
         }) : /*#__PURE__*/_jsx(View, {}), onForgotPassword && controller.credentialType === 'password' ? /*#__PURE__*/_jsx(Button, {
           onClick: onForgotPassword,
           size: "small",
           type: "link",
-          children: "\u5FD8\u8BB0\u5BC6\u7801\uFF1F"
+          compact: true,
+          children: t('auth.forgotLink')
         }) : null]
       }) : null, /*#__PURE__*/_jsx(Button, {
-        ariaLabel: "\u767B\u5F55",
+        ariaLabel: t('auth.signIn'),
         block: true,
         disabled: !controller.method || controller.submitting,
         loading: controller.submitting,
@@ -248,7 +290,7 @@ export function SignIn(_ref3) {
         },
         size: "large",
         testID: testID ? "".concat(testID, "-submit") : undefined,
-        children: "\u767B\u5F55"
+        children: t('auth.signIn')
       }), /*#__PURE__*/_jsx(ThirdPartySignIn, {
         config: config,
         onAuthError: onAuthError,
@@ -260,12 +302,13 @@ export function SignIn(_ref3) {
         services: services
       }), onSignUp ? /*#__PURE__*/_jsxs(InlineFooter, {
         children: [/*#__PURE__*/_jsx(Text, {
-          children: "\u8FD8\u6CA1\u6709\u8D26\u53F7\uFF1F"
+          children: t('auth.noAccount')
         }), /*#__PURE__*/_jsx(Button, {
           onClick: onSignUp,
           size: "small",
           type: "link",
-          children: "\u7ACB\u5373\u6CE8\u518C"
+          compact: true,
+          children: t('auth.signUpNow')
         })]
       }) : null]
     })
@@ -275,8 +318,7 @@ export function SignUp(_ref5) {
   var className = _ref5.className,
     config = _ref5.config,
     defaultIdentifier = _ref5.defaultIdentifier,
-    _ref5$description = _ref5.description,
-    description = _ref5$description === void 0 ? '验证手机号或邮箱后创建账号' : _ref5$description,
+    description = _ref5.description,
     identifiers = _ref5.identifiers,
     logo = _ref5.logo,
     onAuthError = _ref5.onAuthError,
@@ -287,9 +329,9 @@ export function SignUp(_ref5) {
     style = _ref5.style,
     surface = _ref5.surface,
     testID = _ref5.testID,
-    _ref5$title = _ref5.title,
-    title = _ref5$title === void 0 ? '注册' : _ref5$title,
+    title = _ref5.title,
     tokens = _ref5.tokens;
+  var t = useAuthTranslation(config);
   var controller = useSignUpController({
     config: config,
     defaultIdentifier: defaultIdentifier,
@@ -299,6 +341,8 @@ export function SignUp(_ref5) {
     onSuccess: onSuccess,
     services: services
   });
+  if (description === undefined) description = t('auth.signUpDescription');
+  if (title === undefined) title = t('auth.signUp');
   return /*#__PURE__*/_jsx(AuthPanel, {
     className: className,
     description: description,
@@ -313,7 +357,7 @@ export function SignUp(_ref5) {
         children: controller.error
       }), /*#__PURE__*/_jsx(AuthSelector, {
         onChange: controller.setIdentifierType,
-        options: contactOptions(controller.identifiers),
+        options: contactOptions(controller.identifiers, controller.config),
         value: controller.identifierType
       }), /*#__PURE__*/_jsx(IdentifierInput, {
         config: controller.config,
@@ -322,6 +366,7 @@ export function SignUp(_ref5) {
         type: controller.identifierType,
         value: controller.identifierValue
       }), /*#__PURE__*/_jsx(VerificationCodeInput, {
+        config: controller.config,
         codeLength: controller.config.code.length,
         countdown: controller.countdown,
         disabled: controller.submitting,
@@ -334,22 +379,24 @@ export function SignUp(_ref5) {
         value: controller.code
       }), /*#__PURE__*/_jsx(AuthField, {
         error: controller.fieldErrors.password,
-        label: "\u5BC6\u7801",
+        label: t('auth.password'),
         children: /*#__PURE__*/_jsx(InputItem, {
-          error: controller.fieldErrors.password,
+          error: Boolean(controller.fieldErrors.password),
           onChange: controller.setPassword,
-          placeholder: "\u81F3\u5C11 ".concat(controller.config.password.minLength, " \u4F4D"),
+          placeholder: t('auth.passwordHint', {
+            length: controller.config.password.minLength
+          }),
           size: "large",
           type: "password",
           value: controller.password
         })
       }), /*#__PURE__*/_jsx(AuthField, {
         error: controller.fieldErrors.confirmPassword,
-        label: "\u786E\u8BA4\u5BC6\u7801",
+        label: t('auth.confirmPassword'),
         children: /*#__PURE__*/_jsx(InputItem, {
-          error: controller.fieldErrors.confirmPassword,
+          error: Boolean(controller.fieldErrors.confirmPassword),
           onChange: controller.setConfirmPassword,
-          placeholder: "\u8BF7\u518D\u6B21\u8F93\u5165\u5BC6\u7801",
+          placeholder: t('auth.repeatPassword'),
           size: "large",
           type: "password",
           value: controller.confirmPassword
@@ -368,6 +415,7 @@ export function SignUp(_ref5) {
                 href: agreement.href,
                 size: "small",
                 type: "link",
+                compact: true,
                 children: agreement.label
               }) : agreement.label
             }, agreement.id);
@@ -380,15 +428,16 @@ export function SignUp(_ref5) {
           return void controller.submit();
         },
         size: "large",
-        children: "\u6CE8\u518C"
+        children: t('auth.signUp')
       }), onSignIn ? /*#__PURE__*/_jsxs(InlineFooter, {
         children: [/*#__PURE__*/_jsx(Text, {
-          children: "\u5DF2\u6709\u8D26\u53F7\uFF1F"
+          children: t('auth.hasAccount')
         }), /*#__PURE__*/_jsx(Button, {
           onClick: onSignIn,
           size: "small",
           type: "link",
-          children: "\u53BB\u767B\u5F55"
+          compact: true,
+          children: t('auth.goSignIn')
         })]
       }) : null]
     })
@@ -397,6 +446,7 @@ export function SignUp(_ref5) {
 export function ForgotPassword(_ref6) {
   var className = _ref6.className,
     config = _ref6.config,
+    description = _ref6.description,
     defaultIdentifier = _ref6.defaultIdentifier,
     identifiers = _ref6.identifiers,
     onAuthError = _ref6.onAuthError,
@@ -407,9 +457,9 @@ export function ForgotPassword(_ref6) {
     style = _ref6.style,
     surface = _ref6.surface,
     testID = _ref6.testID,
-    _ref6$title = _ref6.title,
-    title = _ref6$title === void 0 ? '找回密码' : _ref6$title,
+    title = _ref6.title,
     tokens = _ref6.tokens;
+  var t = useAuthTranslation(config);
   var controller = useForgotPasswordController({
     config: config,
     defaultIdentifier: defaultIdentifier,
@@ -419,21 +469,24 @@ export function ForgotPassword(_ref6) {
     onSuccess: onSuccess,
     services: services
   });
+  if (title === undefined) title = t('auth.forgotPassword');
   var activeStep = controller.step === 'verify' ? 0 : controller.step === 'reset' ? 1 : 2;
   return /*#__PURE__*/_jsxs(AuthPanel, {
     className: className,
-    description: "\u9A8C\u8BC1\u8D26\u53F7\u8EAB\u4EFD\u540E\u91CD\u65B0\u8BBE\u7F6E\u5BC6\u7801",
+    description: description === undefined ? t('auth.forgotDescription') : description,
     style: useAuthStyle(tokens, style),
     surface: surface,
     testID: testID,
     title: title,
     children: [/*#__PURE__*/_jsx(View, {
-      ariaLabel: "\u627E\u56DE\u5BC6\u7801\u6B65\u9AA4",
+      ariaLabel: t('auth.forgotSteps'),
       className: "x-taro-auth-steps",
-      children: ['验证身份', '设置密码', '完成'].map(function (label, index) {
+      children: [t(controller.verifiesBeforeReset ? 'auth.verifyIdentity' : 'auth.code'), t('auth.setPassword'), t('auth.done')].map(function (label, index) {
         return /*#__PURE__*/_jsxs(View, {
+          className: "x-taro-auth-step",
           "data-active": index === activeStep ? 'true' : 'false',
           children: [/*#__PURE__*/_jsx(Text, {
+            className: "x-taro-auth-step__number",
             children: index + 1
           }), /*#__PURE__*/_jsx(Text, {
             children: label
@@ -448,7 +501,7 @@ export function ForgotPassword(_ref6) {
       }), controller.step === 'verify' ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(AuthSelector, {
           onChange: controller.setIdentifierType,
-          options: contactOptions(controller.identifiers),
+          options: contactOptions(controller.identifiers, controller.config),
           value: controller.identifierType
         }), /*#__PURE__*/_jsx(IdentifierInput, {
           config: controller.config,
@@ -457,6 +510,7 @@ export function ForgotPassword(_ref6) {
           type: controller.identifierType,
           value: controller.identifierValue
         }), /*#__PURE__*/_jsx(VerificationCodeInput, {
+          config: controller.config,
           codeLength: controller.config.code.length,
           countdown: controller.countdown,
           error: controller.fieldErrors.code,
@@ -473,27 +527,29 @@ export function ForgotPassword(_ref6) {
             return void controller.submitVerify();
           },
           size: "large",
-          children: "\u4E0B\u4E00\u6B65"
+          children: t('auth.next')
         })]
       }) : controller.step === 'reset' ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(AuthField, {
           error: controller.fieldErrors.newPassword,
-          label: "\u65B0\u5BC6\u7801",
+          label: t('auth.newPassword'),
           children: /*#__PURE__*/_jsx(InputItem, {
-            error: controller.fieldErrors.newPassword,
+            error: Boolean(controller.fieldErrors.newPassword),
             onChange: controller.setNewPassword,
-            placeholder: "\u81F3\u5C11 ".concat(controller.config.password.minLength, " \u4F4D"),
+            placeholder: t('auth.passwordHint', {
+              length: controller.config.password.minLength
+            }),
             size: "large",
             type: "password",
             value: controller.newPassword
           })
         }), /*#__PURE__*/_jsx(AuthField, {
           error: controller.fieldErrors.confirmPassword,
-          label: "\u786E\u8BA4\u65B0\u5BC6\u7801",
+          label: t('auth.confirmNewPassword'),
           children: /*#__PURE__*/_jsx(InputItem, {
-            error: controller.fieldErrors.confirmPassword,
+            error: Boolean(controller.fieldErrors.confirmPassword),
             onChange: controller.setConfirmPassword,
-            placeholder: "\u8BF7\u518D\u6B21\u8F93\u5165\u65B0\u5BC6\u7801",
+            placeholder: t('auth.repeatNewPassword'),
             size: "large",
             type: "password",
             value: controller.confirmPassword
@@ -502,30 +558,39 @@ export function ForgotPassword(_ref6) {
           className: "x-taro-auth-form__actions",
           children: [/*#__PURE__*/_jsx(Button, {
             onClick: controller.back,
+            style: {
+              alignSelf: 'center'
+            },
             size: "small",
-            type: "outline",
-            children: "\u4E0A\u4E00\u6B65"
+            type: "link",
+            compact: true,
+            disabled: controller.submitting,
+            children: t('auth.previous')
           }), /*#__PURE__*/_jsx(Button, {
             loading: controller.submitting,
             onClick: function onClick() {
               return void controller.submitReset();
             },
-            size: "small",
-            children: "\u91CD\u7F6E\u5BC6\u7801"
+            size: "large",
+            block: true,
+            children: t('auth.resetPassword')
           })]
         })]
       }) : /*#__PURE__*/_jsxs(View, {
         className: "x-taro-auth-success",
-        children: [/*#__PURE__*/_jsx(Text, {
+        children: [/*#__PURE__*/_jsx(Icon, {
+          name: "CircleCheck",
+          size: 40
+        }), /*#__PURE__*/_jsx(Text, {
           className: "x-taro-auth-success__title",
-          children: "\u5BC6\u7801\u5DF2\u91CD\u7F6E"
+          children: t('auth.passwordReset')
         }), /*#__PURE__*/_jsx(Text, {
-          children: "\u73B0\u5728\u53EF\u4EE5\u4F7F\u7528\u65B0\u5BC6\u7801\u767B\u5F55"
+          children: t('auth.passwordResetDescription')
         }), onBackToSignIn ? /*#__PURE__*/_jsx(Button, {
           block: true,
           onClick: onBackToSignIn,
           size: "large",
-          children: "\u8FD4\u56DE\u767B\u5F55"
+          children: t('auth.backToSignIn')
         }) : null]
       })]
     }, controller.revision)]
@@ -536,11 +601,9 @@ export function QuickSignIn(_ref7) {
     autoSubmitCode = _ref7$autoSubmitCode === void 0 ? true : _ref7$autoSubmitCode,
     className = _ref7.className,
     config = _ref7.config,
-    _ref7$description = _ref7.description,
-    description = _ref7$description === void 0 ? '输入手机号，验证后继续当前操作' : _ref7$description,
+    description = _ref7.description,
     footer = _ref7.footer,
-    _ref7$identifierSubmi = _ref7.identifierSubmitText,
-    identifierSubmitText = _ref7$identifierSubmi === void 0 ? '继续' : _ref7$identifierSubmi,
+    identifierSubmitText = _ref7.identifierSubmitText,
     _ref7$identifierType = _ref7.identifierType,
     identifierType = _ref7$identifierType === void 0 ? 'phone' : _ref7$identifierType,
     initialIdentifier = _ref7.initialIdentifier,
@@ -553,14 +616,13 @@ export function QuickSignIn(_ref7) {
     _ref7$showHeader = _ref7.showHeader,
     showHeader = _ref7$showHeader === void 0 ? true : _ref7$showHeader,
     style = _ref7.style,
-    _ref7$submitText = _ref7.submitText,
-    submitText = _ref7$submitText === void 0 ? '继续' : _ref7$submitText,
+    submitText = _ref7.submitText,
     _ref7$surface = _ref7.surface,
     surface = _ref7$surface === void 0 ? 'plain' : _ref7$surface,
     testID = _ref7.testID,
-    _ref7$title = _ref7.title,
-    title = _ref7$title === void 0 ? '输入手机号' : _ref7$title,
+    title = _ref7.title,
     tokens = _ref7.tokens;
+  var t = useAuthTranslation(config);
   var controller = useQuickSignInController({
     config: config,
     defaultIdentifier: identifierType,
@@ -572,6 +634,14 @@ export function QuickSignIn(_ref7) {
     onSuccess: onSuccess,
     services: services
   });
+  if (description === undefined) description = t('auth.quickDescription', {
+    label: identifierLabel(identifierType, controller.config)
+  });
+  if (identifierSubmitText === undefined) identifierSubmitText = t('auth.continue');
+  if (submitText === undefined) submitText = t('auth.continue');
+  if (title === undefined) title = t('auth.quickTitle', {
+    label: identifierLabel(identifierType, controller.config)
+  });
   var submittedCodeRef = useRef('');
   useEffect(function () {
     if (autoSubmitCode && controller.step === 'code' && controller.code.length === controller.config.code.length && submittedCodeRef.current !== controller.code) {
@@ -587,30 +657,43 @@ export function QuickSignIn(_ref7) {
     children: /*#__PURE__*/_jsxs(View, {
       className: "x-taro-auth-quick x-taro-auth-step-screen",
       "data-direction": controller.direction,
-      children: [controller.step === 'code' ? /*#__PURE__*/_jsx(Button, {
-        ariaLabel: "\u8FD4\u56DE\u4FEE\u6539\u8D26\u53F7",
-        className: "x-taro-auth-quick__back",
-        onClick: controller.back,
-        shape: "round",
-        size: "small",
-        type: "ghost",
-        children: "\u2190"
-      }) : onClose ? /*#__PURE__*/_jsx(Button, {
-        ariaLabel: "\u5173\u95ED",
-        className: "x-taro-auth-quick__close",
-        onClick: onClose,
-        shape: "round",
-        size: "small",
-        type: "ghost",
-        children: "\xD7"
-      }) : null, showHeader ? /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsx(View, {
+        className: "x-taro-auth-quick__nav x-taro-auth-quick__nav--".concat(controller.step === 'code' ? 'back' : 'close'),
+        children: controller.step === 'code' ? /*#__PURE__*/_jsx(Button, {
+          ariaLabel: t('auth.editIdentifier'),
+          className: "x-taro-auth-quick__back",
+          onClick: controller.back,
+          shape: "round",
+          size: "small",
+          type: "ghost",
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: "ChevronLeft",
+            size: 18
+          })
+        }) : onClose ? /*#__PURE__*/_jsx(Button, {
+          ariaLabel: t('auth.close'),
+          className: "x-taro-auth-quick__close",
+          onClick: onClose,
+          shape: "round",
+          size: "small",
+          type: "ghost",
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: "X",
+            size: 18
+          })
+        }) : null
+      }), showHeader ? /*#__PURE__*/_jsxs(View, {
         className: "x-taro-auth-quick__header",
         children: [/*#__PURE__*/_jsx(Text, {
           className: "x-taro-auth-quick__title",
-          children: controller.step === 'identifier' ? title : "\u8F93\u5165 ".concat(controller.config.code.length, " \u4F4D\u9A8C\u8BC1\u7801")
+          children: controller.step === 'identifier' ? title : t('auth.quickCodeTitle', {
+            length: controller.config.code.length
+          })
         }), /*#__PURE__*/_jsx(Text, {
           className: "x-taro-auth-quick__description",
-          children: controller.step === 'identifier' ? description : "\u9A8C\u8BC1\u7801\u5DF2\u53D1\u9001\u81F3 ".concat(controller.identifierValue)
+          children: controller.step === 'identifier' ? description : t('auth.codeSent', {
+            identifier: controller.identifierValue
+          })
         })]
       }) : null, /*#__PURE__*/_jsxs(View, {
         className: "x-taro-auth-form",
@@ -634,6 +717,7 @@ export function QuickSignIn(_ref7) {
           })]
         }) : /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx(VerificationCodeInput, {
+            config: controller.config,
             codeLength: controller.config.code.length,
             countdown: controller.countdown,
             error: controller.fieldErrors.code,
@@ -730,6 +814,7 @@ export function IdentifierBinding(_ref9) {
     testID = _ref9.testID,
     title = _ref9.title,
     tokens = _ref9.tokens;
+  var t = useAuthTranslation(config);
   var controller = useIdentifierBindingController({
     action: action,
     config: config,
@@ -740,25 +825,34 @@ export function IdentifierBinding(_ref9) {
     requireReauthentication: requireReauthentication,
     services: services
   });
-  var label = identifierLabel(identifierType);
+  var label = identifierLabel(identifierType, controller.config);
   return /*#__PURE__*/_jsx(AuthPanel, {
     className: className,
-    description: action === 'change' && currentDisplayValue ? "\u5F53\u524D".concat(label, "\uFF1A").concat(currentDisplayValue) : "\u9A8C\u8BC1\u65B0\u7684".concat(label, "\u540E\u5B8C\u6210").concat(action === 'bind' ? '绑定' : '更换'),
+    description: action === 'change' && currentDisplayValue ? t('auth.currentIdentifier', {
+      label: label,
+      value: currentDisplayValue
+    }) : t(action === 'bind' ? 'auth.bindDescription' : 'auth.replaceDescription', {
+      label: label
+    }),
     style: useAuthStyle(tokens, style),
     surface: surface,
     testID: testID,
-    title: title !== null && title !== void 0 ? title : "".concat(action === 'bind' ? '绑定' : '更换').concat(label),
+    title: title === undefined ? t(action === 'bind' ? 'auth.bindTitle' : 'auth.replaceTitle', {
+      label: label
+    }) : title,
     children: /*#__PURE__*/_jsxs(View, {
       className: "x-taro-auth-form",
       children: [/*#__PURE__*/_jsx(AuthError, {
         children: controller.error
       }), controller.shouldReauthenticate ? /*#__PURE__*/_jsx(AuthField, {
         error: controller.fieldErrors.currentPassword,
-        label: "\u5F53\u524D\u5BC6\u7801",
+        label: t('auth.currentPassword'),
         children: /*#__PURE__*/_jsx(InputItem, {
-          error: controller.fieldErrors.currentPassword,
+          error: Boolean(controller.fieldErrors.currentPassword),
           onChange: controller.setCurrentPassword,
-          placeholder: "\u8BF7\u8F93\u5165\u5F53\u524D\u5BC6\u7801",
+          placeholder: t('auth.enter', {
+            label: t('auth.currentPassword')
+          }),
           size: "large",
           type: "password",
           value: controller.currentPassword
@@ -770,6 +864,7 @@ export function IdentifierBinding(_ref9) {
         type: identifierType,
         value: controller.identifierValue
       }), /*#__PURE__*/_jsx(VerificationCodeInput, {
+        config: controller.config,
         codeLength: controller.config.code.length,
         countdown: controller.countdown,
         error: controller.fieldErrors.code,
@@ -783,16 +878,22 @@ export function IdentifierBinding(_ref9) {
         className: "x-taro-auth-form__actions",
         children: [onCancel ? /*#__PURE__*/_jsx(Button, {
           onClick: onCancel,
+          style: {
+            alignSelf: 'center'
+          },
           size: "small",
-          type: "outline",
-          children: "\u53D6\u6D88"
-        }) : null, /*#__PURE__*/_jsxs(Button, {
+          type: "link",
+          compact: true,
+          disabled: controller.submitting,
+          children: t('auth.cancel')
+        }) : null, /*#__PURE__*/_jsx(Button, {
           loading: controller.submitting,
           onClick: function onClick() {
             return void controller.submit();
           },
-          size: "small",
-          children: ["\u786E\u8BA4", action === 'bind' ? '绑定' : '更换']
+          size: "large",
+          block: true,
+          children: t(action === 'bind' ? 'auth.confirmBind' : 'auth.confirmReplace')
         })]
       })]
     })
@@ -801,8 +902,7 @@ export function IdentifierBinding(_ref9) {
 export function ChangePassword(_ref10) {
   var className = _ref10.className,
     config = _ref10.config,
-    _ref10$description = _ref10.description,
-    description = _ref10$description === void 0 ? '更新当前账号的登录密码' : _ref10$description,
+    description = _ref10.description,
     onAuthError = _ref10.onAuthError,
     onCancel = _ref10.onCancel,
     onReauthenticationRequired = _ref10.onReauthenticationRequired,
@@ -812,9 +912,9 @@ export function ChangePassword(_ref10) {
     style = _ref10.style,
     surface = _ref10.surface,
     testID = _ref10.testID,
-    _ref10$title = _ref10.title,
-    title = _ref10$title === void 0 ? '修改密码' : _ref10$title,
+    title = _ref10.title,
     tokens = _ref10.tokens;
+  var t = useAuthTranslation(config);
   var controller = useChangePasswordController({
     config: config,
     onAuthError: onAuthError,
@@ -823,6 +923,8 @@ export function ChangePassword(_ref10) {
     requireCurrentPassword: requireCurrentPassword,
     services: services
   });
+  if (description === undefined) description = t('auth.changePasswordDescription');
+  if (title === undefined) title = t('auth.changePassword');
   return /*#__PURE__*/_jsx(AuthPanel, {
     className: className,
     description: description,
@@ -836,33 +938,37 @@ export function ChangePassword(_ref10) {
         children: controller.error
       }), controller.requireCurrentPassword ? /*#__PURE__*/_jsx(AuthField, {
         error: controller.fieldErrors.currentPassword,
-        label: "\u5F53\u524D\u5BC6\u7801",
+        label: t('auth.currentPassword'),
         children: /*#__PURE__*/_jsx(InputItem, {
-          error: controller.fieldErrors.currentPassword,
+          error: Boolean(controller.fieldErrors.currentPassword),
           onChange: controller.setCurrentPassword,
-          placeholder: "\u8BF7\u8F93\u5165\u5F53\u524D\u5BC6\u7801",
+          placeholder: t('auth.enter', {
+            label: t('auth.currentPassword')
+          }),
           size: "large",
           type: "password",
           value: controller.currentPassword
         })
       }) : null, /*#__PURE__*/_jsx(AuthField, {
         error: controller.fieldErrors.newPassword,
-        label: "\u65B0\u5BC6\u7801",
+        label: t('auth.newPassword'),
         children: /*#__PURE__*/_jsx(InputItem, {
-          error: controller.fieldErrors.newPassword,
+          error: Boolean(controller.fieldErrors.newPassword),
           onChange: controller.setNewPassword,
-          placeholder: "\u81F3\u5C11 ".concat(controller.config.password.minLength, " \u4F4D"),
+          placeholder: t('auth.passwordHint', {
+            length: controller.config.password.minLength
+          }),
           size: "large",
           type: "password",
           value: controller.newPassword
         })
       }), /*#__PURE__*/_jsx(AuthField, {
         error: controller.fieldErrors.confirmPassword,
-        label: "\u786E\u8BA4\u65B0\u5BC6\u7801",
+        label: t('auth.confirmNewPassword'),
         children: /*#__PURE__*/_jsx(InputItem, {
-          error: controller.fieldErrors.confirmPassword,
+          error: Boolean(controller.fieldErrors.confirmPassword),
           onChange: controller.setConfirmPassword,
-          placeholder: "\u8BF7\u518D\u6B21\u8F93\u5165\u65B0\u5BC6\u7801",
+          placeholder: t('auth.repeatNewPassword'),
           size: "large",
           type: "password",
           value: controller.confirmPassword
@@ -871,16 +977,22 @@ export function ChangePassword(_ref10) {
         className: "x-taro-auth-form__actions",
         children: [onCancel ? /*#__PURE__*/_jsx(Button, {
           onClick: onCancel,
+          style: {
+            alignSelf: 'center'
+          },
           size: "small",
-          type: "outline",
-          children: "\u53D6\u6D88"
+          type: "link",
+          compact: true,
+          disabled: controller.submitting,
+          children: t('auth.cancel')
         }) : null, /*#__PURE__*/_jsx(Button, {
           loading: controller.submitting,
           onClick: function onClick() {
             return void controller.submit();
           },
-          size: "small",
-          children: "\u786E\u8BA4\u4FEE\u6539"
+          size: "large",
+          block: true,
+          children: t('auth.confirmChange')
         })]
       })]
     })
@@ -890,8 +1002,7 @@ export function AccountSecurity(_ref11) {
   var _controller$state2, _controller$state3;
   var className = _ref11.className,
     config = _ref11.config,
-    _ref11$description = _ref11.description,
-    description = _ref11$description === void 0 ? '管理可用于登录和找回账号的安全信息' : _ref11$description,
+    description = _ref11.description,
     onAuthError = _ref11.onAuthError,
     onReauthenticationRequired = _ref11.onReauthenticationRequired,
     onStateChange = _ref11.onStateChange,
@@ -899,9 +1010,9 @@ export function AccountSecurity(_ref11) {
     state = _ref11.state,
     style = _ref11.style,
     testID = _ref11.testID,
-    _ref11$title = _ref11.title,
-    title = _ref11$title === void 0 ? '账号安全' : _ref11$title,
+    title = _ref11.title,
     tokens = _ref11.tokens;
+  var t = useAuthTranslation(config);
   var controller = useAccountSecurityController({
     config: config,
     onAuthError: onAuthError,
@@ -910,6 +1021,8 @@ export function AccountSecurity(_ref11) {
     services: services,
     state: state
   });
+  if (description === undefined) description = t('auth.securityDescription');
+  if (title === undefined) title = t('auth.security');
   var _useState5 = useState(),
     _useState6 = _slicedToArray(_useState5, 2),
     dialog = _useState6[0],
@@ -952,7 +1065,7 @@ export function AccountSecurity(_ref11) {
       children: controller.error
     }), controller.loading ? /*#__PURE__*/_jsx(Text, {
       className: "x-taro-auth-security__loading",
-      children: "\u6B63\u5728\u52A0\u8F7D\u2026"
+      children: t('auth.loading')
     }) : null, /*#__PURE__*/_jsxs(View, {
       className: "x-taro-auth-security__list",
       children: [controller.config.accountSecurity.identifiers.map(function (type) {
@@ -965,10 +1078,12 @@ export function AccountSecurity(_ref11) {
             className: "x-taro-auth-security__content",
             children: [/*#__PURE__*/_jsx(Text, {
               className: "x-taro-auth-security__label",
-              children: identifierLabel(type)
+              children: identifierLabel(type, controller.config)
             }), /*#__PURE__*/_jsx(Text, {
               className: "x-taro-auth-security__value",
-              children: binding !== null && binding !== void 0 && binding.bound ? "\u5DF2\u7ED1\u5B9A".concat(binding.displayValue ? "\uFF0C".concat(binding.displayValue) : '') : '未绑定，绑定后可用于登录'
+              children: binding !== null && binding !== void 0 && binding.bound ? binding.displayValue ? t('auth.linkedValue', {
+                value: binding.displayValue
+              }) : t('auth.linked') : t('auth.notLinked')
             })]
           }), /*#__PURE__*/_jsx(Button, {
             onClick: function onClick() {
@@ -979,7 +1094,7 @@ export function AccountSecurity(_ref11) {
             },
             size: "small",
             type: "outline",
-            children: action === 'bind' ? '绑定' : '更换'
+            children: action === 'bind' ? t('auth.bind') : t('auth.replace')
           })]
         }, type);
       }), /*#__PURE__*/_jsxs(View, {
@@ -988,10 +1103,10 @@ export function AccountSecurity(_ref11) {
           className: "x-taro-auth-security__content",
           children: [/*#__PURE__*/_jsx(Text, {
             className: "x-taro-auth-security__label",
-            children: "\u5BC6\u7801"
+            children: t('auth.password')
           }), /*#__PURE__*/_jsx(Text, {
             className: "x-taro-auth-security__value",
-            children: (_controller$state2 = controller.state) !== null && _controller$state2 !== void 0 && _controller$state2.password.set ? '已设置，可通过密码登录' : '未设置'
+            children: (_controller$state2 = controller.state) !== null && _controller$state2 !== void 0 && _controller$state2.password.set ? t('auth.passwordSet') : t('auth.notSet')
           })]
         }), /*#__PURE__*/_jsx(Button, {
           onClick: function onClick() {
@@ -1001,10 +1116,13 @@ export function AccountSecurity(_ref11) {
           },
           size: "small",
           type: "outline",
-          children: "\u4FEE\u6539"
+          children: t('auth.edit')
         })]
       })]
     }), /*#__PURE__*/_jsx(Modal, {
+      title: (dialog === null || dialog === void 0 ? void 0 : dialog.action) === 'password' ? t('auth.changePassword') : dialog !== null && dialog !== void 0 && dialog.type ? t(dialog.action === 'bind' ? 'auth.bindTitle' : 'auth.replaceTitle', {
+        label: identifierLabel(dialog.type, controller.config)
+      }) : undefined,
       body: (dialog === null || dialog === void 0 ? void 0 : dialog.action) === 'password' ? /*#__PURE__*/_jsx(ChangePassword, {
         config: config,
         onCancel: close,
@@ -1012,7 +1130,8 @@ export function AccountSecurity(_ref11) {
           return void complete();
         },
         services: services,
-        surface: "plain"
+        surface: "plain",
+        title: null
       }) : dialog !== null && dialog !== void 0 && dialog.type ? /*#__PURE__*/_jsx(IdentifierBinding, {
         action: dialog.action,
         config: config,
@@ -1023,7 +1142,8 @@ export function AccountSecurity(_ref11) {
           return void complete();
         },
         services: services,
-        surface: "plain"
+        surface: "plain",
+        title: null
       }) : null,
       closeIcon: true,
       onClose: close,