@h-ai/ui 0.1.0-alpha.59 → 0.1.0-alpha.61

package/dist/components/scenes/iam/LoginForm.svelte

@@ -4,7 +4,7 @@
 -->
 <script lang='ts'>
   import type { DataAttributes } from '../../../types.js'
-  import type { LoginFormData, LoginFormProps } from '../types.js'
+  import type { AuthLoginMethod, LoginFormData, LoginFormProps } from '../types.js'
   import { uiM } from '../../../messages.js'
   import { cn, getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
@@ -12,9 +12,15 @@
   import Button from '../../primitives/Button.svelte'
   import Checkbox from '../../primitives/Checkbox.svelte'
   import Input from '../../primitives/Input.svelte'
+  import AgreementNotice from './AgreementNotice.svelte'
+  import { authErrorMessage } from './auth-error-message.js'
   import PasswordInput from './PasswordInput.svelte'
 
   const {
+    methods = ['password'],
+    otpLength = 6,
+    resendInterval = 60,
+    onsendotp,
     loading = false,
     disabled = false,
     showTitle = false,
@@ -30,18 +36,65 @@
     onsubmit,
     onforgotpassword,
     header,
+    extraFields,
     footer,
     ...restProps
   }: LoginFormProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
-  const hasAgreements = $derived(
-    !!(agreements?.userAgreementUrl || agreements?.privacyPolicyUrl),
-  )
 
   let username = $state('')
   let password = $state('')
   let rememberMe = $state(false)
+  let selectedMethod = $state<AuthLoginMethod>('password')
+  const method = $derived(methods.includes(selectedMethod) ? selectedMethod : methods[0])
+  const isOtp = $derived(method === 'email' || method === 'sms')
+  let code = $state('')
+  let sending = $state(false)
+  let sendError = $state('')
+  let resendAt = $state(0)
+  let now = $state(Date.now())
+  const remaining = $derived(Math.max(0, Math.ceil((resendAt - now) / 1000)))
+  // 倒计时只负责 UI 提示；服务端独立校验 resendInterval，刷新页面不能绕过限制。
+  $effect(() => {
+    if (resendAt <= Date.now())
+      return
+    const timer = setInterval(() => {
+      now = Date.now()
+    }, 1000)
+    return () => clearInterval(timer)
+  })
+
+  function methodLabel(value: AuthLoginMethod): string {
+    if (value === 'ldap')
+      return uiM('login_method_ldap')
+    if (value === 'email')
+      return uiM('login_method_email')
+    if (value === 'sms')
+      return uiM('login_method_sms')
+    return uiM('login_method_password')
+  }
+
+  async function sendOtp() {
+    if (!onsendotp || sending || remaining || !username.trim())
+      return
+    sending = true
+    sendError = ''
+    try {
+      const result = await onsendotp(username.trim())
+      if (!result.success) {
+        sendError = authErrorMessage(result.error)
+      }
+      else {
+        now = Date.now()
+        resendAt = now + resendInterval * 1000
+      }
+    }
+    catch {
+      sendError = uiM('auth_network_error')
+    }
+    finally { sending = false }
+  }
 
   const formClass = $derived(
     cn(
@@ -52,13 +105,15 @@
 
   async function handleSubmit(e: SubmitEvent) {
     e.preventDefault()
-    if (loading || disabled)
+    if (loading || disabled || !method)
       return
 
     const data: LoginFormData = {
       username,
       password,
       rememberMe,
+      method,
+      code: isOtp ? code : undefined,
     }
 
     await onsubmit?.(data)
@@ -83,41 +138,73 @@
   {/if}
 
   <!-- 用户名 -->
-  <div class='space-y-1.5'>
-    <label class='text-sm font-medium text-base-content/70' for='login-username'>
-      {uiM('login_username')}
-    </label>
-    <Input
-      id='login-username'
-      name='username'
-      type='text'
-      placeholder={uiM('login_username_placeholder')}
-      bind:value={username}
-      autocomplete='username'
-      {disabled}
-      required
-      error={errors.username}
-    />
-  </div>
-
-  <!-- 密码 -->
-  <div class='space-y-1.5'>
-    <label class='text-sm font-medium text-base-content/70' for='login-password'>
-      {uiM('login_password')}
-    </label>
-    <PasswordInput
-      bind:value={password}
-      placeholder={uiM('login_password_placeholder')}
-      autocomplete='current-password'
-      {disabled}
-      required
-      error={errors.password}
-      showStrength={false}
-    />
-  </div>
+  {#if methods.length > 1}
+    <div class='grid grid-cols-2 gap-1 rounded-lg bg-base-200 p-1 sm:flex' aria-label={uiM('login_methods')}>
+      {#each methods as value (value)}
+        <button type='button' class={cn('flex-1 rounded-md px-2 py-2 text-sm transition-colors', method === value ? 'bg-base-100 font-medium shadow-sm' : 'text-base-content/60')} aria-pressed={method === value} disabled={loading || disabled} onclick={() => {
+          selectedMethod = value
+          password = ''
+          code = ''
+          sendError = ''
+        }}>
+          {methodLabel(value)}
+        </button>
+      {/each}
+    </div>
+  {/if}
+  {#if !method}
+    <Alert variant='warning'>{uiM('auth_unavailable')}</Alert>
+  {:else}
+    <div class='space-y-1.5'>
+      <label class='text-sm font-medium text-base-content/70' for='login-username'>
+        {method === 'email' ? uiM('register_email') : method === 'sms' ? uiM('register_phone') : uiM('login_username')}
+      </label>
+      <Input
+        id='login-username'
+        name='username'
+        type={method === 'email' ? 'email' : method === 'sms' ? 'tel' : 'text'}
+        placeholder={method === 'email' ? uiM('register_email_placeholder') : method === 'sms' ? uiM('register_phone_placeholder') : uiM('login_username_placeholder')}
+        bind:value={username}
+        autocomplete='username'
+        {disabled}
+        required
+        error={errors.username}
+      />
+    </div>
+
+    <!-- 密码 -->
+    {#if isOtp}
+      <div class='space-y-1.5'>
+        <label class='text-sm font-medium text-base-content/70' for='login-code'>{uiM('login_code')}</label>
+        <div class='flex items-start gap-2'>
+          <Input id='login-code' name='code' bind:value={code} autocomplete='one-time-code' inputmode='numeric' maxlength={otpLength} pattern={`[0-9]{${otpLength}}`} placeholder={uiM('login_code_placeholder', { length: otpLength })} required {disabled} />
+          <Button type='button' variant='outline' loading={sending} disabled={loading || disabled || !username.trim() || remaining > 0 || !onsendotp} onclick={sendOtp}>
+            {remaining ? uiM('login_resend_wait', { seconds: remaining }) : uiM('login_send_code')}
+          </Button>
+        </div>
+        {#if sendError}<p role='alert' class='text-sm text-error'>{sendError}</p>{/if}
+      </div>
+    {:else}
+      <div class='space-y-1.5'>
+        <label class='text-sm font-medium text-base-content/70' for='login-password'>
+          {uiM('login_password')}
+        </label>
+        <PasswordInput
+          id='login-password'
+          bind:value={password}
+          placeholder={uiM('login_password_placeholder')}
+          autocomplete='current-password'
+          {disabled}
+          required
+          error={errors.password}
+          showStrength={false}
+        />
+      </div>
+    {/if}
+  {/if}
 
   <!-- 记住我 & 忘记密码 -->
-  {#if showRememberMe || showForgotPassword}
+  {#if method === 'password' && (showRememberMe || showForgotPassword)}
     <div class='flex items-center justify-between'>
       {#if showRememberMe}
         <Checkbox
@@ -149,6 +236,9 @@
   {/if}
 
   <!-- 通用错误 -->
+  {#if extraFields}
+    <div class='login-form-extra-fields'>{@render extraFields()}</div>
+  {/if}
   {#if errors.general}
     <Alert variant='error'>
       {errors.general}
@@ -160,27 +250,14 @@
     type='submit'
     variant='primary'
     {loading}
-    disabled={loading || disabled}
+    disabled={loading || disabled || !method}
     class='w-full'
   >
     {submitText || uiM('login_submit')}
   </Button>
 
   <!-- 协议提示 -->
-  {#if hasAgreements}
-    <p class='text-xs text-base-content/50 text-center'>
-      {uiM('agreement_prefix')}
-      {#if agreements?.userAgreementUrl}
-        <a href={agreements.userAgreementUrl} target='_blank' rel='noopener noreferrer' class='link link-primary'>{uiM('agreement_user_agreement')}</a>
-      {/if}
-      {#if agreements?.userAgreementUrl && agreements?.privacyPolicyUrl}
-        {uiM('agreement_and')}
-      {/if}
-      {#if agreements?.privacyPolicyUrl}
-        <a href={agreements.privacyPolicyUrl} target='_blank' rel='noopener noreferrer' class='link link-primary'>{uiM('agreement_privacy_policy')}</a>
-      {/if}
-    </p>
-  {/if}
+  <AgreementNotice {agreements} />
 
   <!-- 自定义底部 -->
   {#if footer}

package/dist/components/scenes/iam/RegisterForm.svelte

@@ -10,6 +10,8 @@
   import Alert from '../../compounds/Alert.svelte'
   import Button from '../../primitives/Button.svelte'
   import Input from '../../primitives/Input.svelte'
+  import AgreementNotice from './AgreementNotice.svelte'
+  import { passwordPolicyError, passwordPolicyHint } from './password-utils.js'
   import PasswordInput from './PasswordInput.svelte'
 
   const {
@@ -19,6 +21,7 @@
     showPasswordStrength = true,
     requireConfirmPassword = true,
     minPasswordLength = 8,
+    passwordPolicy,
     fields = ['username', 'email', 'password'],
     showLoginLink = false,
     loginUrl = '/login',
@@ -28,14 +31,12 @@
     errors = {},
     onsubmit,
     header,
+    extraFields,
     footer,
     ...restProps
   }: RegisterFormProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
-  const hasAgreements = $derived(
-    !!(agreements?.userAgreementUrl || agreements?.privacyPolicyUrl),
-  )
 
   // 表单数据
   let username = $state('')
@@ -45,6 +46,8 @@
   let confirmPassword = $state('')
   let nickname = $state('')
 
+  const policyError = $derived(passwordPolicy && password ? passwordPolicyError(password, passwordPolicy) : '')
+
   const formClass = $derived(
     cn(
       'register-form space-y-4',
@@ -112,7 +115,7 @@
 
   async function handleSubmit(e: SubmitEvent) {
     e.preventDefault()
-    if (loading || disabled)
+    if (policyError || loading || disabled)
       return
     if (!passwordsMatch)
       return
@@ -174,6 +177,9 @@
     </div>
   {/if}
 
+  {#if passwordPolicy}<p class='text-xs text-base-content/60'>{passwordPolicyHint(passwordPolicy)}</p>{/if}
+  {#if policyError}<p role='alert' class='text-sm text-error'>{policyError}</p>{/if}
+
   <!-- 动态字段 -->
   {#each fields as field (field)}
     {#if field === 'password'}
@@ -235,6 +241,9 @@
   {/each}
 
   <!-- 通用错误 -->
+  {#if extraFields}
+    <div class='register-form-extra-fields'>{@render extraFields()}</div>
+  {/if}
   {#if errors.general}
     <Alert variant='error'>
       {errors.general}
@@ -246,27 +255,14 @@
     type='submit'
     variant='primary'
     class='w-full'
-    disabled={loading || disabled || !passwordsMatch}
+    disabled={loading || disabled || !passwordsMatch || Boolean(policyError)}
     loading={loading}
   >
     {submitText || uiM('register_submit')}
   </Button>
 
   <!-- 协议提示 -->
-  {#if hasAgreements}
-    <p class='text-xs text-base-content/50 text-center'>
-      {uiM('agreement_prefix')}
-      {#if agreements?.userAgreementUrl}
-        <a href={agreements.userAgreementUrl} target='_blank' rel='noopener noreferrer' class='link link-primary'>{uiM('agreement_user_agreement')}</a>
-      {/if}
-      {#if agreements?.userAgreementUrl && agreements?.privacyPolicyUrl}
-        {uiM('agreement_and')}
-      {/if}
-      {#if agreements?.privacyPolicyUrl}
-        <a href={agreements.privacyPolicyUrl} target='_blank' rel='noopener noreferrer' class='link link-primary'>{uiM('agreement_privacy_policy')}</a>
-      {/if}
-    </p>
-  {/if}
+  <AgreementNotice {agreements} />
 
   <!-- 自定义底部 -->
   {#if footer}

package/dist/components/scenes/iam/ResetPasswordForm.svelte

@@ -10,7 +10,7 @@
   import Alert from '../../compounds/Alert.svelte'
   import Button from '../../primitives/Button.svelte'
   import Input from '../../primitives/Input.svelte'
-  import { arePasswordsEqual } from './password-utils.js'
+  import { arePasswordsEqual, passwordPolicyError, passwordPolicyHint } from './password-utils.js'
   import PasswordInput from './PasswordInput.svelte'
 
   const {
@@ -21,6 +21,7 @@
     showCode = true,
     showPasswordStrength = true,
     minPasswordLength = 8,
+    passwordPolicy,
     showBackLink = false,
     loginUrl = '/login',
     submitText,
@@ -35,6 +36,8 @@
   let newPassword = $state('')
   let confirmPassword = $state('')
 
+  const policyError = $derived(passwordPolicy && newPassword ? passwordPolicyError(newPassword, passwordPolicy) : '')
+
   const formClass = $derived(
     cn(
       'reset-password-form space-y-4',
@@ -55,7 +58,7 @@
 
   async function handleSubmit(e: SubmitEvent) {
     e.preventDefault()
-    if (loading || disabled || !canSubmit)
+    if (policyError || loading || disabled || !canSubmit)
       return
 
     const data: ResetPasswordFormData = {
@@ -136,12 +139,15 @@
     </Alert>
   {/if}
 
+  {#if passwordPolicy}<p class='text-xs text-base-content/60'>{passwordPolicyHint(passwordPolicy)}</p>{/if}
+  {#if policyError}<p role='alert' class='text-sm text-error'>{policyError}</p>{/if}
+
   <!-- 提交按钮 -->
   <Button
     type='submit'
     variant='primary'
     {loading}
-    disabled={loading || disabled || !canSubmit}
+    disabled={loading || disabled || !canSubmit || Boolean(policyError)}
     class='w-full'
   >
     {submitText || uiM('reset_password_submit')}

package/dist/components/scenes/iam/auth-error-message.d.ts

@@ -0,0 +1,4 @@
+export declare function authErrorMessage(error: {
+    code: string;
+    message: string;
+}): string;

package/dist/components/scenes/iam/auth-error-message.js

@@ -0,0 +1,33 @@
+import { uiM } from '../../../messages.js';
+const messages = {
+    'hai:iam:001': 'auth_error_credentials',
+    'hai:iam:002': 'auth_error_credentials',
+    'hai:iam:003': 'auth_error_credentials',
+    'hai:iam:004': 'auth_error_disabled',
+    'hai:iam:005': 'auth_error_locked',
+    'hai:iam:006': 'auth_error_duplicate',
+    'hai:iam:007': 'auth_error_password_expired',
+    'hai:iam:008': 'auth_error_password_policy',
+    'hai:iam:009': 'auth_error_otp',
+    'hai:iam:010': 'auth_error_service',
+    'hai:iam:011': 'auth_error_otp_wait',
+    'hai:iam:012': 'auth_unavailable',
+    'hai:iam:013': 'auth_unavailable',
+    'hai:iam:014': 'auth_unavailable',
+    'hai:iam:019': 'auth_error_reset_token',
+    'hai:iam:020': 'auth_error_reset_token',
+    'hai:iam:021': 'auth_error_reset_token',
+    'hai:iam:022': 'auth_error_otp',
+    'hai:iam:023': 'auth_error_busy',
+    'hai:iam:024': 'auth_unavailable',
+    'hai:iam:301': 'auth_error_service',
+    'hai:iam:302': 'auth_error_credentials',
+    'hai:iam:303': 'auth_error_service',
+    'hai:iam:401': 'auth_error_service',
+    'hai:iam:901': 'auth_error_service',
+    'hai:iam:999': 'auth_error_service',
+};
+export function authErrorMessage(error) {
+    const key = messages[error.code];
+    return key ? uiM(key) : error.message;
+}

package/dist/components/scenes/iam/index.d.ts

@@ -4,6 +4,7 @@
  * 身份认证相关的场景化组件
  * @module index
  */
+export { default as AuthPanel } from './AuthPanel.svelte';
 export { default as AuthShell } from './AuthShell.svelte';
 export { default as ChangePasswordForm } from './ChangePasswordForm.svelte';
 export { default as ForgotPasswordForm } from './ForgotPasswordForm.svelte';

package/dist/components/scenes/iam/index.js

@@ -4,6 +4,7 @@
  * 身份认证相关的场景化组件
  * @module index
  */
+export { default as AuthPanel } from './AuthPanel.svelte';
 // 认证表单
 export { default as AuthShell } from './AuthShell.svelte';
 export { default as ChangePasswordForm } from './ChangePasswordForm.svelte';

package/dist/components/scenes/iam/password-utils.d.ts

@@ -8,8 +8,12 @@
  * 规范化密码字符串
  * - 使用 NFKC 统一兼容字符
  */
+import type { PasswordPolicy } from '../types.js';
 export declare function normalizePassword(value: string): string;
 /**
  * 比较两次密码是否一致
  */
 export declare function arePasswordsEqual(password: string, confirmPassword: string): boolean;
+/** 与 IAM 密码策略一致的前端提示；服务端仍执行最终校验。 */
+export declare function passwordPolicyError(password: string, policy: PasswordPolicy): string;
+export declare function passwordPolicyHint(policy: PasswordPolicy): string;

package/dist/components/scenes/iam/password-utils.js

@@ -4,10 +4,7 @@
  * 密码规范化与一致性比较工具
  * @module password-utils
  */
-/**
- * 规范化密码字符串
- * - 使用 NFKC 统一兼容字符
- */
+import { uiM } from '../../../messages.js';
 export function normalizePassword(value) {
     return value.normalize('NFKC');
 }
@@ -17,3 +14,29 @@ export function normalizePassword(value) {
 export function arePasswordsEqual(password, confirmPassword) {
     return normalizePassword(password) === normalizePassword(confirmPassword);
 }
+/** 与 IAM 密码策略一致的前端提示；服务端仍执行最终校验。 */
+export function passwordPolicyError(password, policy) {
+    if (password.length < policy.minLength || password.length > policy.maxLength)
+        return uiM('password_policy_length', { min: policy.minLength, max: policy.maxLength });
+    if (policy.requireUppercase && !/[A-Z]/.test(password))
+        return uiM('password_policy_uppercase');
+    if (policy.requireLowercase && !/[a-z]/.test(password))
+        return uiM('password_policy_lowercase');
+    if (policy.requireNumber && !/\d/.test(password))
+        return uiM('password_policy_number');
+    if (policy.requireSpecialChar && !/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password))
+        return uiM('password_policy_special');
+    return '';
+}
+export function passwordPolicyHint(policy) {
+    const requirements = [uiM('password_policy_length', { min: policy.minLength, max: policy.maxLength })];
+    if (policy.requireUppercase)
+        requirements.push(uiM('password_policy_uppercase'));
+    if (policy.requireLowercase)
+        requirements.push(uiM('password_policy_lowercase'));
+    if (policy.requireNumber)
+        requirements.push(uiM('password_policy_number'));
+    if (policy.requireSpecialChar)
+        requirements.push(uiM('password_policy_special'));
+    return requirements.join(' · ');
+}