Merge remote-tracking branch 'origin/main' into fix/input

Author: hewenguang

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omnibox",
   "private": true,
-  "version": "0.1.4",
+  "version": "0.1.10",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -45,6 +45,7 @@
     "html-react-parser": "^5.2.7",
     "i18next": "^25.6.0",
     "i18next-browser-languagedetector": "^8.2.0",
+    "input-otp": "^1.4.2",
     "ismobilejs": "^1.1.1",
     "jszip": "^3.10.1",
     "katex": "^0.16.25",

pnpm-lock.yaml

@@ -16,10 +16,9 @@ const InvitePage = lazy(() => import('@/page/user/invite'));
 const ResourcePage = lazy(() => import('@/page/resource'));
 const NamespacePage = lazy(() => import('@/page/namespace'));
 const RegisterPage = lazy(() => import('@/page/user/register'));
-const ForgotPasswordPage = lazy(() => import('@/page/user/password'));
+const VerifyOtpPage = lazy(() => import('@/page/user/verify-otp'));
+const AcceptInvitePage = lazy(() => import('@/page/user/accept-invite'));
 const InviteRedirectPage = lazy(() => import('@/page/invite-redirect'));
-const PasswordConfirmPage = lazy(() => import('@/page/user/password-confirm'));
-const RegisterConfirmPage = lazy(() => import('@/page/user/register-confirm'));
 const WechatAuthConfirmPage = lazy(
   () => import('@/page/user/wechat/auth-confirm')
 );
@@ -69,16 +68,12 @@ const router = createBrowserRouter([
         element: <RegisterPage />,
       },
       {
-        path: 'user/sign-up/confirm',
-        element: <RegisterConfirmPage />,
+        path: 'user/verify-otp',
+        element: <VerifyOtpPage />,
       },
       {
-        path: 'user/password',
-        element: <ForgotPasswordPage />,
-      },
-      {
-        path: 'user/password/confirm',
-        element: <PasswordConfirmPage />,
+        path: 'user/accept-invite',
+        element: <AcceptInvitePage />,
       },
       {
         path: 'invite/confirm',

src/App.tsx

@@ -0,0 +1,69 @@
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { Minus } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      'flex items-center gap-2 has-[:disabled]:opacity-50',
+      containerClassName
+    )}
+    className={cn('disabled:cursor-not-allowed', className)}
+    {...props}
+  />
+));
+InputOTP.displayName = 'InputOTP';
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
+));
+InputOTPGroup.displayName = 'InputOTPGroup';
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        isActive && 'z-10 ring-1 ring-ring',
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = 'InputOTPSlot';
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Minus />
+  </div>
+));
+InputOTPSeparator.displayName = 'InputOTPSeparator';
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

src/components/ui/input-otp.tsx

@@ -12,3 +12,9 @@ export const WECHAT_GROUP_QRCODE_URL =
 export const RESOURCE_TASKS_INTERVAL = 3 * 1000;
 export const BIND_CHECK_INTERVAL = 3 * 1000;
 export const DISCORD_LINK = 'https://www.omnibox.pro/links/discord';
+export const ALLOWED_EMAIL_DOMAINS = [
+  'gmail.com',
+  'outlook.com',
+  '163.com',
+  'qq.com',
+];

src/const.ts

@@ -0,0 +1,38 @@
+import { useCallback, useState } from 'react';
+
+/**
+ * Custom hook for managing async operations with loading and error states
+ *
+ * @example
+ * const { loading, error, execute } = useAsync(async (data) => {
+ *   return await http.post('/api/endpoint', data);
+ * });
+ *
+ * // Later in your component
+ * await execute(formData);
+ */
+export function useAsync<T, Args extends any[] = any[]>(
+  asyncFunction: (...args: Args) => Promise<T>
+) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const execute = useCallback(
+    async (...args: Args): Promise<T | undefined> => {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await asyncFunction(...args);
+        return result;
+      } catch (err) {
+        setError(err as Error);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [asyncFunction]
+  );
+
+  return { loading, error, execute };
+}

src/hooks/use-async.ts

@@ -72,7 +72,7 @@
   "form": {
     "or": "or",
     "operator": "Action",
-    "exist_account": "Already have an account?",
+    "exist_account": "Already have an account? ",
     "invalid_request": "Invalid request parameters",
     "username": "Username",
     "username_min": "Username must be at least 2 characters",
@@ -105,7 +105,10 @@
     "submit": "Save",
     "button": "Send Invitation",
     "success": "Invitation sent",
-    "add_namespace": "Add namespace"
+    "add_namespace": "Add namespace",
+    "please_login_first": "Please log in first to accept this invitation",
+    "user_mismatch": "This invitation is for {{ username }}",
+    "user_mismatch_generic": "This invitation is for another user"
   },
   "namespace": {
     "add": "Add Namespace",
@@ -122,6 +125,12 @@
     "product_name": "OmniBox",
     "logout": "Logout",
     "submit": "Login",
+    "continue": "Continue",
+    "use_password": "Use password",
+    "use_email": "Use email code",
+    "sign_up": "Sign Up",
+    "error_sending_otp": "Failed to send verification code",
+    "email_not_exists": "This email doesn't exist. Please sign up to continue.",
     "title": "Login to your account",
     "description": "Enter your email below to login your account",
     "authorizing": "Authorizing, please wait...",
@@ -141,9 +150,38 @@
     "description": "Enter your information to create an account",
     "submit": "Sign Up",
     "success": "Registration successful, please check your email to activate your account",
+    "error_sending_otp": "Failed to send verification code",
+    "email_already_exists": "This email is already registered. Please login to continue.",
     "conform_title": "Complete Account Creation",
     "conform_description": "Enter your information to complete account creation"
   },
+  "verify_otp": {
+    "title": "Enter verification code",
+    "description": "We sent a 6-digit code to",
+    "didnt_receive": "Didn't receive the code?",
+    "resend": "Resend code",
+    "resending": "Sending...",
+    "resend_countdown": "Resend in {{seconds}}s",
+    "resend_success": "Code sent successfully",
+    "error_resend": "Failed to resend code",
+    "error_invalid_code": "Invalid verification code",
+    "error_invalid_code_with_attempts": "Invalid verification code. {{remaining}} attempts remaining.",
+    "error_expired_code": "Verification code has expired",
+    "error_too_many_attempts": "Too many failed attempts. Please request a new code.",
+    "error_too_many_otp_requests": "Too many OTP requests. Please try again in {{minutes}} minutes.",
+    "error_magic_link": "Invalid or expired magic link",
+    "open_email": "Open email app",
+    "back_to_login": "Back to login",
+    "verifying": "Verifying...",
+    "verifying_description": "Please wait..."
+  },
+  "accept_invite": {
+    "accepting": "Accepting invitation...",
+    "accepting_description": "Creating your account and joining the space",
+    "error_accept": "Failed to accept invitation. The link may be expired or invalid.",
+    "error_title": "Invitation Error",
+    "back_to_login": "Back to login"
+  },
   "password": {
     "title": "Reset Password",
     "description": "Enter your email address and we'll send you a link to reset your password",

src/i18n/locales/en.json

@@ -87,7 +87,7 @@
     "email_invalid": "请输入有效的邮箱地址",
     "email_limit": "仅支持 Gmail、Outlook、163 和 QQ 邮箱",
     "email_limit_rule": "邮箱必须是 Gmail、Outlook、163 或 QQ 邮箱",
-    "email_or_username": "邮箱或用户名",
+    "email_or_username": "邮箱 或 用户名",
     "email_or_username_invalid": "请输入有效的邮箱地址或用户名",
     "role": "角色",
     "username_not_emptyStr": "无效的用户名"
@@ -105,7 +105,10 @@
     "submit": "保存",
     "button": "发送邀请",
     "success": "邀请已发送",
-    "add_namespace": "加入空间"
+    "add_namespace": "加入空间",
+    "please_login_first": "请先登录以接受此邀请",
+    "user_mismatch": "此邀请是给 {{ username }} 的",
+    "user_mismatch_generic": "此邀请是给其他用户的"
   },
   "namespace": {
     "add": "创建空间",
@@ -122,6 +125,12 @@
     "product_name": "小黑",
     "logout": "退出登录",
     "submit": "登录",
+    "continue": "继续",
+    "use_password": "使用密码登录",
+    "use_email": "使用邮箱验证码",
+    "sign_up": "注册",
+    "error_sending_otp": "发送验证码失败",
+    "email_not_exists": "该邮箱不存在，请注册以继续。",
     "title": "登录您的账户",
     "description": "请输入您的邮箱以登录账户",
     "authorizing": "授权中，请稍候...",
@@ -141,9 +150,38 @@
     "description": "输入您的信息以创建账户",
     "submit": "注册",
     "success": "注册成功，请检查邮箱以激活账户",
+    "error_sending_otp": "发送验证码失败",
+    "email_already_exists": "该邮箱已注册，请登录以继续。",
     "conform_title": "完成账户创建",
     "conform_description": "输入您的信息以完成账户创建"
   },
+  "verify_otp": {
+    "title": "输入验证码",
+    "description": "我们已向以下邮箱发送 6 位验证码：",
+    "didnt_receive": "没有收到验证码？",
+    "resend": "重新发送",
+    "resending": "发送中...",
+    "resend_countdown": "{{seconds}} 秒后可重新发送",
+    "resend_success": "验证码发送成功",
+    "error_resend": "重新发送失败",
+    "error_invalid_code": "验证码无效",
+    "error_invalid_code_with_attempts": "验证码无效。还剩 {{remaining}} 次尝试机会。",
+    "error_expired_code": "验证码已过期",
+    "error_too_many_attempts": "尝试次数过多,请重新获取验证码。",
+    "error_too_many_otp_requests": "验证码请求过多，请在 {{minutes}} 分钟后重试。",
+    "error_magic_link": "链接无效或已过期",
+    "open_email": "打开邮件应用",
+    "back_to_login": "返回登录",
+    "verifying": "验证中...",
+    "verifying_description": "请稍候..."
+  },
+  "accept_invite": {
+    "accepting": "接受邀请中...",
+    "accepting_description": "正在创建您的账户并加入空间",
+    "error_accept": "接受邀请失败。链接可能已过期或无效。",
+    "error_title": "邀请错误",
+    "back_to_login": "返回登录"
+  },
   "password": {
     "title": "重置密码",
     "description": "输入您的邮箱地址，我们将向您发送重置密码的链接",

src/i18n/locales/zh.json

@@ -0,0 +1,23 @@
+import { ALLOWED_EMAIL_DOMAINS } from '@/const';
+
+/**
+ * Check if an email domain is in the allowed list
+ */
+export function isAllowedEmailDomain(email: string): boolean {
+  const domain = email.split('@')[1];
+  return ALLOWED_EMAIL_DOMAINS.includes(domain);
+}
+
+/**
+ * Create a validation function for email domains with custom error message
+ */
+export function createEmailDomainValidator(errorMessage: string) {
+  return (email: string) => isAllowedEmailDomain(email) || errorMessage;
+}
+
+/**
+ * Get the domain from an email address
+ */
+export function getEmailDomain(email: string): string {
+  return email.split('@')[1] || '';
+}

src/lib/email-validation.ts

@@ -4,3 +4,23 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function isBlank(value: string | null | undefined): boolean {
+  return value === null || value === undefined || value === '';
+}
+
+export function buildUrl(
+  url: string,
+  params: Record<string, string | undefined | null>
+): string {
+  const filteredParams = Object.entries(params)
+    .filter(([, value]) => !isBlank(value))
+    .map(([key, value]) => `${key}=${encodeURIComponent(value!)}`)
+    .join('&');
+
+  if (!filteredParams) {
+    return url;
+  }
+
+  return `${url}?${filteredParams}`;
+}