@pisell/private-materials 6.5.26 → 6.5.28

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

@@ -0,0 +1,314 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/authentication/admin/AuthMethods/locales.ts
+var locales_exports = {};
+__export(locales_exports, {
+  default: () => locales_default
+});
+module.exports = __toCommonJS(locales_exports);
+var locales_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/lib/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/lib/components/authentication/admin/AuthMethods/types.js

@@ -0,0 +1,53 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/authentication/admin/AuthMethods/types.ts
+var types_exports = {};
+__export(types_exports, {
+  AuthMethodCategory: () => AuthMethodCategory,
+  AuthMethodType: () => AuthMethodType
+});
+module.exports = __toCommonJS(types_exports);
+var AuthMethodType = /* @__PURE__ */ ((AuthMethodType2) => {
+  AuthMethodType2["EMAIL"] = "email";
+  AuthMethodType2["PHONE"] = "phone";
+  AuthMethodType2["WALLET_PIN"] = "wallet_pin";
+  AuthMethodType2["CUSTOMER_PASSCODE"] = "customer_passcode";
+  AuthMethodType2["DEVICE_PASSCODE"] = "device_passcode";
+  AuthMethodType2["TEAM_MEMBER"] = "team_member";
+  AuthMethodType2["PASSWORD_RULES"] = "password_rules";
+  AuthMethodType2["GUEST"] = "guest";
+  AuthMethodType2["WALK_IN"] = "walk_in";
+  AuthMethodType2["GOOGLE"] = "google";
+  AuthMethodType2["FACEBOOK"] = "facebook";
+  AuthMethodType2["APPLE"] = "apple";
+  AuthMethodType2["DIGIT_ID_PIN"] = "digit_id_pin";
+  return AuthMethodType2;
+})(AuthMethodType || {});
+var AuthMethodCategory = /* @__PURE__ */ ((AuthMethodCategory2) => {
+  AuthMethodCategory2["GENERAL"] = "General";
+  AuthMethodCategory2["PASSWORD_FREE"] = "Password-free";
+  AuthMethodCategory2["AUTH_FREE"] = "Auth-free";
+  AuthMethodCategory2["OAUTH"] = "OAuth";
+  return AuthMethodCategory2;
+})(AuthMethodCategory || {});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthMethodCategory,
+  AuthMethodType
+});

package/lib/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/lib/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';