@pisell/private-materials 6.6.2 → 6.7.2

package/es/components/authentication/admin/AuthMethods/locales.js

@@ -0,0 +1,290 @@
+export default {
+  en: {
+    // Auth method titles and descriptions
+    'auth.method.email.title': 'Email',
+    'auth.method.email.description': 'Register and log in via email',
+    'auth.method.phone.title': 'Phone Number',
+    'auth.method.phone.description': 'Register and log in via phone number',
+    'auth.method.facebook.title': 'Facebook',
+    'auth.method.facebook.description': 'Log in with Facebook account',
+    'auth.method.apple.title': 'Apple',
+    'auth.method.apple.description': 'Log in with Apple ID',
+    'auth.method.guest.title': 'Guest',
+    'auth.method.guest.description': 'Allow guests to access without registration process',
+    // Login method titles and descriptions
+    'auth.login.method.password.title': 'Password',
+    'auth.login.method.password.email.description': 'Log in using email and password',
+    'auth.login.method.password.phone.description': 'Log in using phone and password',
+    'auth.login.method.magic-link.title': 'Magic Link',
+    'auth.login.method.magic-link.description': 'Send a magic link to email',
+    'auth.login.method.verification-code.title': 'Verification Code',
+    'auth.login.method.verification-code.description': 'Send a verification code to email',
+    'auth.login.method.sms.title': 'SMS Code',
+    'auth.login.method.sms.description': 'Send a verification code via SMS',
+    // Drawer title
+    'auth.email.settings': 'Email Settings',
+    'auth.phone.settings': 'Phone Number Settings',
+    // Email Registration section
+    'auth.email.registration.title': 'Email Registration',
+    'auth.email.registration.enable': 'Enable Email Registration',
+    'auth.email.registration.enable.description': 'Allow users to register using email address',
+    // Registration Verification section
+    'auth.email.verification.title': 'Registration Verification',
+    'auth.email.verification.description': 'Select email verification method for registration.',
+    'auth.email.verification.link': 'Verification Link',
+    'auth.email.verification.link.description': "Send verification link to user's email, user clicks link to complete registration",
+    'auth.email.verification.code': 'Verification Code',
+    'auth.email.verification.code.description': "Send verification code to user's email, user needs to input the verification code to complete registration",
+    'auth.email.verification.note': 'Note:',
+    'auth.email.verification.note.description': 'On self-service devices like Kiosk, the system will automatically use Verification Code mode instead of Verification Link for better user experience.',
+    // Login Verification Methods section
+    'auth.email.login.title': 'Login Verification Methods',
+    'auth.email.login.description': 'Drag to reorder login methods by priority.',
+    'auth.email.login.password': 'Password Login',
+    'auth.email.login.password.description': 'User inputs their password for authentication',
+    'auth.email.login.magic-link': 'Magic Link Login',
+    'auth.email.login.magic-link.description': "Send login link to user's email, click link to complete login",
+    'auth.email.login.verification-code': 'Email Verification Code',
+    'auth.email.login.verification-code.description': "Send verification code to user's email, user inputs the code to login",
+    // Phone Registration section
+    'auth.phone.registration.title': 'Phone Number Registration',
+    'auth.phone.registration.enable': 'Enable Phone Number Registration',
+    'auth.phone.registration.enable.description': 'Allow users to register using phone number',
+    // Phone Registration Verification section
+    'auth.phone.verification.title': 'Registration Verification',
+    'auth.phone.verification.description': 'Select phone verification method for registration.',
+    'auth.phone.verification.sms': 'SMS Verification Code',
+    'auth.phone.verification.sms.description': "Send verification code to user's phone number, user inputs the code to complete registration",
+    // Phone Login Verification Methods section
+    'auth.phone.login.title': 'Login Verification Methods',
+    'auth.phone.login.description': 'Drag to reorder login methods by priority.',
+    'auth.phone.login.password': 'Password Login',
+    'auth.phone.login.password.description': 'User inputs their password for authentication',
+    'auth.phone.login.sms': 'SMS Verification Code',
+    'auth.phone.login.sms.description': "Send verification code to user's phone number, user inputs the code to login",
+    // Password Settings
+    'auth.password.settings': 'Password Settings',
+    'auth.password.rules.title': 'Password Rules',
+    'auth.password.rules.description': 'Define password complexity requirements for accounts',
+    'auth.password.requirements.title': 'Password Requirements',
+    'auth.password.requirements.description': 'Define password complexity requirements for user accounts.',
+    'auth.password.min.length': 'Minimum Length',
+    'auth.password.min.length.description': 'Required password length',
+    'auth.password.requirements': 'Requirements',
+    'auth.password.requirements.character': 'Character type requirements',
+    'auth.password.require.uppercase': 'Require uppercase letters',
+    'auth.password.require.uppercase.description': 'At least one uppercase letter (A-Z)',
+    'auth.password.require.lowercase': 'Require lowercase letters',
+    'auth.password.require.lowercase.description': 'At least one lowercase letter (a-z)',
+    'auth.password.require.numbers': 'Require numbers',
+    'auth.password.require.numbers.description': 'At least one number (0-9)',
+    'auth.password.require.special': 'Require special characters',
+    'auth.password.require.special.description': 'At least one special character (!@#$%^&*)',
+    // Buttons
+    'auth.button.cancel': 'Cancel',
+    'auth.button.save': 'Save',
+    'auth.button.settings': 'Settings',
+    // Category badges
+    'auth.category.general': 'General',
+    'auth.category.password-free': 'Password-free',
+    'auth.category.auth-free': 'Auth-free',
+    'auth.category.oauth': 'OAuth',
+    // OAuth configuration
+    'auth.oauth.config.message': 'Configure OAuth settings in Auth Configuration page first',
+    'auth.oauth.config.link': 'click to config',
+    // Empty state
+    'auth.settings.no.additional': 'No additional settings available for this authentication method.'
+  },
+  'zh-CN': {
+    // Auth method titles and descriptions
+    'auth.method.email.title': '邮箱',
+    'auth.method.email.description': '通过邮箱注册和登录',
+    'auth.method.phone.title': '手机号码',
+    'auth.method.phone.description': '通过手机号码注册和登录',
+    'auth.method.facebook.title': 'Facebook',
+    'auth.method.facebook.description': '使用Facebook账号登录',
+    'auth.method.apple.title': 'Apple',
+    'auth.method.apple.description': '使用Apple ID登录',
+    'auth.method.guest.title': '访客',
+    'auth.method.guest.description': '允许访客无需注册即可访问',
+    // Login method titles and descriptions
+    'auth.login.method.password.title': '密码',
+    'auth.login.method.password.email.description': '使用邮箱和密码登录',
+    'auth.login.method.password.phone.description': '使用手机号和密码登录',
+    'auth.login.method.magic-link.title': '魔法链接',
+    'auth.login.method.magic-link.description': '向邮箱发送魔法链接',
+    'auth.login.method.verification-code.title': '验证码',
+    'auth.login.method.verification-code.description': '向邮箱发送验证码',
+    'auth.login.method.sms.title': '短信验证码',
+    'auth.login.method.sms.description': '通过短信发送验证码',
+    // Drawer title
+    'auth.email.settings': '邮箱设置',
+    'auth.phone.settings': '手机号码设置',
+    // Email Registration section
+    'auth.email.registration.title': '邮箱注册',
+    'auth.email.registration.enable': '启用邮箱注册',
+    'auth.email.registration.enable.description': '允许用户使用邮箱地址注册',
+    // Registration Verification section
+    'auth.email.verification.title': '注册验证',
+    'auth.email.verification.description': '选择注册时的邮箱验证方式。',
+    'auth.email.verification.link': '验证链接',
+    'auth.email.verification.link.description': '发送验证链接到用户邮箱，用户点击链接完成注册',
+    'auth.email.verification.code': '验证码',
+    'auth.email.verification.code.description': '发送验证码到用户邮箱，用户需要输入验证码完成注册',
+    'auth.email.verification.note': '注意：',
+    'auth.email.verification.note.description': '在自助设备如Kiosk上，系统将自动使用验证码模式而不是验证链接，以提供更好的用户体验。',
+    // Login Verification Methods section
+    'auth.email.login.title': '登录验证方法',
+    'auth.email.login.description': '拖拽调整登录方法优先级。',
+    'auth.email.login.password': '密码登录',
+    'auth.email.login.password.description': '用户输入密码进行身份验证',
+    'auth.email.login.magic-link': '魔法链接登录',
+    'auth.email.login.magic-link.description': '发送登录链接到用户邮箱，点击链接完成登录',
+    'auth.email.login.verification-code': '邮箱验证码',
+    'auth.email.login.verification-code.description': '发送验证码到用户邮箱，用户输入验证码登录',
+    // Phone Registration section
+    'auth.phone.registration.title': '手机号码注册',
+    'auth.phone.registration.enable': '启用手机号码注册',
+    'auth.phone.registration.enable.description': '允许用户使用手机号码注册',
+    // Phone Registration Verification section
+    'auth.phone.verification.title': '注册验证',
+    'auth.phone.verification.description': '选择注册时的手机验证方式。',
+    'auth.phone.verification.sms': '短信验证码',
+    'auth.phone.verification.sms.description': '发送验证码到用户手机，用户输入验证码完成注册',
+    // Phone Login Verification Methods section
+    'auth.phone.login.title': '登录验证方法',
+    'auth.phone.login.description': '拖拽调整登录方法优先级。',
+    'auth.phone.login.password': '密码登录',
+    'auth.phone.login.password.description': '用户输入密码进行身份验证',
+    'auth.phone.login.sms': '短信验证码',
+    'auth.phone.login.sms.description': '发送验证码到用户手机，用户输入验证码登录',
+    // Password Settings
+    'auth.password.settings': '密码设置',
+    'auth.password.rules.title': '密码规则',
+    'auth.password.rules.description': '定义账户的密码复杂度要求',
+    'auth.password.requirements.title': '密码要求',
+    'auth.password.requirements.description': '定义用户账户的密码复杂度要求。',
+    'auth.password.min.length': '最小长度',
+    'auth.password.min.length.description': '密码长度要求',
+    'auth.password.requirements': '要求',
+    'auth.password.requirements.character': '字符类型要求',
+    'auth.password.require.uppercase': '需要大写字母',
+    'auth.password.require.uppercase.description': '至少一个大写字母（A-Z）',
+    'auth.password.require.lowercase': '需要小写字母',
+    'auth.password.require.lowercase.description': '至少一个小写字母（a-z）',
+    'auth.password.require.numbers': '需要数字',
+    'auth.password.require.numbers.description': '至少一个数字（0-9）',
+    'auth.password.require.special': '需要特殊字符',
+    'auth.password.require.special.description': '至少一个特殊字符（!@#$%^&*）',
+    // Buttons
+    'auth.button.cancel': '取消',
+    'auth.button.save': '保存',
+    'auth.button.settings': '设置',
+    // Category badges
+    'auth.category.general': '通用',
+    'auth.category.password-free': '免密',
+    'auth.category.auth-free': '免认证',
+    'auth.category.oauth': 'OAuth',
+    // OAuth configuration
+    'auth.oauth.config.message': '请先在OAuth配置页面中配置OAuth设置',
+    'auth.oauth.config.link': '点击配置',
+    // Empty state
+    'auth.settings.no.additional': '此认证方法没有额外的设置选项。'
+  },
+  'zh-HK': {
+    // Auth method titles and descriptions
+    'auth.method.email.title': '郵箱',
+    'auth.method.email.description': '通過郵箱註冊和登錄',
+    'auth.method.phone.title': '手機號碼',
+    'auth.method.phone.description': '通過手機號碼註冊和登錄',
+    'auth.method.facebook.title': 'Facebook',
+    'auth.method.facebook.description': '使用Facebook賬號登錄',
+    'auth.method.apple.title': 'Apple',
+    'auth.method.apple.description': '使用Apple ID登錄',
+    'auth.method.guest.title': '訪客',
+    'auth.method.guest.description': '允許訪客無需註冊即可訪問',
+    // Login method titles and descriptions
+    'auth.login.method.password.title': '密碼',
+    'auth.login.method.password.email.description': '使用郵箱和密碼登錄',
+    'auth.login.method.password.phone.description': '使用手機號和密碼登錄',
+    'auth.login.method.magic-link.title': '魔法鏈接',
+    'auth.login.method.magic-link.description': '向郵箱發送魔法鏈接',
+    'auth.login.method.verification-code.title': '驗證碼',
+    'auth.login.method.verification-code.description': '向郵箱發送驗證碼',
+    'auth.login.method.sms.title': '短信驗證碼',
+    'auth.login.method.sms.description': '通過短信發送驗證碼',
+    // Drawer title
+    'auth.email.settings': '郵箱設置',
+    'auth.phone.settings': '手機號碼設置',
+    // Email Registration section
+    'auth.email.registration.title': '郵箱註冊',
+    'auth.email.registration.enable': '啟用郵箱註冊',
+    'auth.email.registration.enable.description': '允許用戶使用郵箱地址註冊',
+    // Registration Verification section
+    'auth.email.verification.title': '註冊驗證',
+    'auth.email.verification.description': '選擇註冊時的郵箱驗證方式。',
+    'auth.email.verification.link': '驗證鏈接',
+    'auth.email.verification.link.description': '發送驗證鏈接到用戶郵箱，用戶點擊鏈接完成註冊',
+    'auth.email.verification.code': '驗證碼',
+    'auth.email.verification.code.description': '發送驗證碼到用戶郵箱，用戶需要輸入驗證碼完成註冊',
+    'auth.email.verification.note': '注意：',
+    'auth.email.verification.note.description': '在自助設備如Kiosk上，系統將自動使用驗證碼模式而不是驗證鏈接，以提供更好的用戶體驗。',
+    // Login Verification Methods section
+    'auth.email.login.title': '登錄驗證方法',
+    'auth.email.login.description': '拖拽調整登錄方法優先級。',
+    'auth.email.login.password': '密碼登錄',
+    'auth.email.login.password.description': '用戶輸入密碼進行身份驗證',
+    'auth.email.login.magic-link': '魔法鏈接登錄',
+    'auth.email.login.magic-link.description': '發送登錄鏈接到用戶郵箱，點擊鏈接完成登錄',
+    'auth.email.login.verification-code': '郵箱驗證碼',
+    'auth.email.login.verification-code.description': '發送驗證碼到用戶郵箱，用戶輸入驗證碼登錄',
+    // Phone Registration section
+    'auth.phone.registration.title': '手機號碼註冊',
+    'auth.phone.registration.enable': '啟用手機號碼註冊',
+    'auth.phone.registration.enable.description': '允許用戶使用手機號碼註冊',
+    // Phone Registration Verification section
+    'auth.phone.verification.title': '註冊驗證',
+    'auth.phone.verification.description': '選擇註冊時的手機驗證方式。',
+    'auth.phone.verification.sms': '短信驗證碼',
+    'auth.phone.verification.sms.description': '發送驗證碼到用戶手機，用戶輸入驗證碼完成註冊',
+    // Phone Login Verification Methods section
+    'auth.phone.login.title': '登錄驗證方法',
+    'auth.phone.login.description': '拖拽調整登錄方法優先級。',
+    'auth.phone.login.password': '密碼登錄',
+    'auth.phone.login.password.description': '用戶輸入密碼進行身份驗證',
+    'auth.phone.login.sms': '短信驗證碼',
+    'auth.phone.login.sms.description': '發送驗證碼到用戶手機，用戶輸入驗證碼登錄',
+    // Password Settings
+    'auth.password.settings': '密碼設置',
+    'auth.password.rules.title': '密碼規則',
+    'auth.password.rules.description': '定義賬戶的密碼複雜度要求',
+    'auth.password.requirements.title': '密碼要求',
+    'auth.password.requirements.description': '定義用戶賬戶的密碼複雜度要求。',
+    'auth.password.min.length': '最小長度',
+    'auth.password.min.length.description': '密碼長度要求',
+    'auth.password.requirements': '要求',
+    'auth.password.requirements.character': '字符類型要求',
+    'auth.password.require.uppercase': '需要大寫字母',
+    'auth.password.require.uppercase.description': '至少一個大寫字母（A-Z）',
+    'auth.password.require.lowercase': '需要小寫字母',
+    'auth.password.require.lowercase.description': '至少一個小寫字母（a-z）',
+    'auth.password.require.numbers': '需要數字',
+    'auth.password.require.numbers.description': '至少一個數字（0-9）',
+    'auth.password.require.special': '需要特殊字符',
+    'auth.password.require.special.description': '至少一個特殊字符（!@#$%^&*）',
+    // Buttons
+    'auth.button.cancel': '取消',
+    'auth.button.save': '保存',
+    'auth.button.settings': '設置',
+    // Category badges
+    'auth.category.general': '通用',
+    'auth.category.password-free': '免密',
+    'auth.category.auth-free': '免認證',
+    'auth.category.oauth': 'OAuth',
+    // OAuth configuration
+    'auth.oauth.config.message': '請先在OAuth配置頁面中配置OAuth設置',
+    'auth.oauth.config.link': '點擊配置',
+    // Empty state
+    'auth.settings.no.additional': '此認證方法沒有額外的設置選項。'
+  }
+};

package/es/components/authentication/admin/AuthMethods/types.d.ts

@@ -0,0 +1,76 @@
+/// <reference types="react" />
+export declare enum AuthMethodType {
+    EMAIL = "email",
+    PHONE = "phone",
+    WALLET_PIN = "wallet_pin",
+    CUSTOMER_PASSCODE = "customer_passcode",
+    DEVICE_PASSCODE = "device_passcode",
+    TEAM_MEMBER = "team_member",
+    PASSWORD_RULES = "password_rules",
+    GUEST = "guest",
+    WALK_IN = "walk_in",
+    GOOGLE = "google",
+    FACEBOOK = "facebook",
+    APPLE = "apple",
+    DIGIT_ID_PIN = "digit_id_pin"
+}
+export declare enum AuthMethodCategory {
+    GENERAL = "General",
+    PASSWORD_FREE = "Password-free",
+    AUTH_FREE = "Auth-free",
+    OAUTH = "OAuth"
+}
+export interface AuthMethod {
+    id: string;
+    type: AuthMethodType;
+    title: string;
+    category: AuthMethodCategory;
+    description: string;
+    icon: React.ReactNode;
+    enabled: boolean;
+    hasSettings: boolean;
+    sort?: number;
+    configLink?: string;
+    requiresOAuthConfig?: boolean;
+    inheritMessage?: string;
+    disableToggle?: boolean;
+}
+export interface AuthMethodsProps {
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 认证方法列表
+     */
+    methods?: AuthMethod[];
+    /**
+     * 顺序变化回调
+     */
+    onOrderChange?: (methods: AuthMethod[]) => void;
+    /**
+     * 启用/禁用回调
+     */
+    onToggle?: (method: AuthMethod, enabled: boolean) => void;
+    /**
+     * 设置按钮点击回调
+     */
+    onSettings?: (method: AuthMethod) => void;
+    /**
+     * 配置链接点击回调
+     */
+    onConfigClick?: (method: AuthMethod) => void;
+    /**
+     * 是否启用设置按钮
+     * @default true
+     */
+    enableSetting?: boolean;
+    /**
+     * 自定义标题渲染函数
+     */
+    renderTitle?: (method: AuthMethod) => React.ReactNode;
+}

package/es/components/authentication/admin/AuthMethods/types.js

@@ -0,0 +1,23 @@
+export var AuthMethodType = /*#__PURE__*/function (AuthMethodType) {
+  AuthMethodType["EMAIL"] = "email";
+  AuthMethodType["PHONE"] = "phone";
+  AuthMethodType["WALLET_PIN"] = "wallet_pin";
+  AuthMethodType["CUSTOMER_PASSCODE"] = "customer_passcode";
+  AuthMethodType["DEVICE_PASSCODE"] = "device_passcode";
+  AuthMethodType["TEAM_MEMBER"] = "team_member";
+  AuthMethodType["PASSWORD_RULES"] = "password_rules";
+  AuthMethodType["GUEST"] = "guest";
+  AuthMethodType["WALK_IN"] = "walk_in";
+  AuthMethodType["GOOGLE"] = "google";
+  AuthMethodType["FACEBOOK"] = "facebook";
+  AuthMethodType["APPLE"] = "apple";
+  AuthMethodType["DIGIT_ID_PIN"] = "digit_id_pin";
+  return AuthMethodType;
+}({});
+export var AuthMethodCategory = /*#__PURE__*/function (AuthMethodCategory) {
+  AuthMethodCategory["GENERAL"] = "General";
+  AuthMethodCategory["PASSWORD_FREE"] = "Password-free";
+  AuthMethodCategory["AUTH_FREE"] = "Auth-free";
+  AuthMethodCategory["OAUTH"] = "OAuth";
+  return AuthMethodCategory;
+}({});

package/es/components/authentication/admin/ChannelAuthSetting/AuthenticationMethods/AuthenticationMethods.less

@@ -0,0 +1,231 @@
+.authentication-methods {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px;
+  background: #fff;
+}
+
+/* Upper Section - Authentication Settings Mode */
+.authentication-methods-upper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border: 1px solid #f0f0f0;
+  padding: 16px;
+}
+
+.authentication-methods-header {
+  margin-bottom: 8px;
+}
+
+.authentication-methods-title {
+  margin: 0 !important;
+  font-size: 20px;
+  font-weight: 600;
+  color: #000;
+}
+
+.authentication-methods-mode {
+  display: flex;
+  flex-direction: column;
+}
+
+.authentication-methods-mode .ant-radio-wrapper {
+  display: flex;
+  align-items: flex-start;
+}
+
+.authentication-methods-mode-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+.authentication-methods-mode-option {
+  padding: 16px;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  transition: all 0.3s;
+}
+
+.authentication-methods-mode-option:hover {
+  border-color: #1890ff;
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
+}
+
+.authentication-methods-mode-option:has(.ant-radio-wrapper-checked) {
+  border-color: #1890ff;
+  background-color: #f0f7ff;
+}
+
+.authentication-methods-mode-content {
+  margin-left: 8px;
+  flex: 1;
+}
+
+.authentication-methods-mode-title {
+  display: block;
+  font-size: 16px;
+  color: #262626;
+  margin-bottom: 4px;
+}
+
+.authentication-methods-mode-description {
+  margin: 0 0 8px 0;
+  color: #8c8c8c;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.authentication-methods-configure-link {
+  color: #1890ff;
+  font-size: 14px;
+}
+
+.authentication-methods-configure-link:hover {
+  text-decoration: underline;
+}
+
+
+/* Lower Section - Customer (Left-Right Layout) */
+.authentication-methods-lower {
+  display: flex;
+  flex-direction: column;
+}
+
+.authentication-methods-customer {
+  display: flex;
+  gap: 32px;
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid #f0f0f0;
+}
+
+.authentication-methods-customer-left {
+  flex: 0 0 250px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.authentication-methods-customer-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.authentication-methods-customer-icon {
+  font-size: 24px;
+  color: #262626;
+}
+
+.authentication-methods-customer-title {
+  margin: 0 !important;
+  font-size: 16px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.authentication-methods-customer-description {
+  margin: 0 !important;
+  font-size: 14px;
+  color: #8c8c8c;
+  line-height: 1.5;
+}
+
+.authentication-methods-customer-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.authentication-methods-customer-right .authentication-methods-inherited {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.authentication-methods-customer-right .auth-methods {
+  padding: 0;
+}
+
+.authentication-methods-inherited {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.authentication-methods-inherited-title {
+  font-size: 14px;
+  color: #595959;
+  margin: 0 !important;
+  font-weight: 400;
+}
+
+.authentication-methods-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.authentication-methods .auth-method-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0;
+  background: transparent;
+}
+
+.authentication-methods .auth-method-status {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  min-width: 70px;
+  text-align: center;
+  font-weight: 500;
+}
+
+.authentication-methods .auth-method-status.enabled {
+  background: #52c41a;
+  color: #fff;
+}
+
+.authentication-methods .auth-method-status.disabled {
+  background: #8c8c8c;
+  color: #fff;
+}
+
+.authentication-methods .auth-method-item .ant-typography {
+  font-size: 14px;
+  color: #262626;
+  margin: 0;
+}
+
+/* Footer */
+.authentication-methods-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 24px;
+  border-top: 1px solid #f0f0f0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .authentication-methods {
+    padding: 16px;
+  }
+
+  .authentication-methods-customer {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .authentication-methods-customer-left {
+    flex: 1;
+  }
+}

package/es/components/authentication/admin/ChannelAuthSetting/AuthenticationMethods/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AuthenticationMethodsProps } from './types';
+import './AuthenticationMethods.less';
+declare const AuthenticationMethods: React.FC<AuthenticationMethodsProps>;
+export default AuthenticationMethods;
+export type { AuthenticationMethodsProps, AuthenticationMethodsValue, GlobalAuthMethod } from './types';