feat: add informational popover to registration page with tips on using Space for account authentication

This commit is contained in:
Junyan Qin
2026-01-03 15:26:24 +08:00
parent b295416e6c
commit 840fa39979
5 changed files with 45 additions and 6 deletions

View File

@@ -23,7 +23,12 @@ import {
import { useEffect, useState } from 'react';
import { httpClient } from '@/app/infra/http/HttpClient';
import { useRouter } from 'next/navigation';
import { Mail, Lock, Loader2 } from 'lucide-react';
import { Mail, Lock, Loader2, Info } from 'lucide-react';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/components/ui/popover';
import langbotIcon from '@/app/assets/langbot-logo.webp';
import { toast } from 'sonner';
import { useTranslation } from 'react-i18next';
@@ -165,8 +170,20 @@ export default function Register() {
)}
{t('register.initWithSpace')}
</Button>
<p className="text-xs text-center text-muted-foreground">
<p className="text-xs text-center text-muted-foreground flex items-center justify-center gap-1">
{t('register.spaceRecommended')}
<Popover>
<PopoverTrigger asChild>
<Info className="h-3.5 w-3.5 cursor-pointer hover:text-foreground transition-colors" />
</PopoverTrigger>
<PopoverContent side="right" className="w-80 text-sm">
<ul className="space-y-2 list-disc list-inside text-muted-foreground">
<li>{t('register.spaceInfoTip1')}</li>
<li>{t('register.spaceInfoTip2')}</li>
<li>{t('register.spaceInfoTip3')}</li>
</ul>
</PopoverContent>
</Popover>
</p>
</div>

View File

@@ -713,11 +713,17 @@ const enUS = {
title: 'Initialize LangBot 👋',
description: 'This is your first time starting LangBot',
adminAccountNote:
'The email and password you fill in will be used as the initial administrator account',
'The account you use here will be set as the administrator account',
register: 'Register',
initWithSpace: 'Initialize with Space',
spaceRecommended:
'Recommended: Use official stable model APIs and cloud services',
spaceInfoTip1:
'Space provides unified account authentication services without uploading any of your sensitive information.',
spaceInfoTip2:
'Logging in with a Space account gives you access to LangBot Models and other cloud services, including free model call credits to help you get started quickly.',
spaceInfoTip3:
'Your login method does not affect other features. You can configure and use models from other sources at any time.',
registerLocal: 'Register local account',
registerWithPassword: 'Register with email and password',
initSuccess: 'Initialization successful, please login',

View File

@@ -721,11 +721,17 @@ const jaJP = {
title: 'LangBot を初期化 👋',
description: 'これはLangBotの初回起動です',
adminAccountNote:
'入力したメールアドレスとパスワードが初期管理者アカウントになります',
'ここで初期化されたアカウントは管理者アカウントとして使用されます',
register: '登録',
initWithSpace: 'Space で初期化',
spaceRecommended:
'おすすめ:公式の安定したモデル API とクラウドサービスを利用',
spaceInfoTip1:
'Space は統一されたアカウント認証サービスを提供し、機密情報をアップロードすることはありません。',
spaceInfoTip2:
'Space アカウントでログインすると、LangBot Models などのクラウドサービスを利用でき、無料のモデル呼び出しクレジットで迅速に開始できます。',
spaceInfoTip3:
'ログイン方法は他の機能に影響しません。いつでも他のソースからモデルを設定して使用できます。',
registerLocal: 'ローカルアカウントを登録',
registerWithPassword: 'メールアドレスとパスワードで登録',
initSuccess: '初期化に成功しました。ログインしてください',

View File

@@ -684,10 +684,15 @@ const zhHans = {
register: {
title: '初始化 LangBot 👋',
description: '这是您首次启动 LangBot',
adminAccountNote: '您填写的邮箱和密码将作为初始管理员账号',
adminAccountNote: '您在此处初始化使用的账号将作为管理员账号',
register: '注册',
initWithSpace: '通过 Space 初始化',
spaceRecommended: '推荐:使用官方提供的稳定模型 API 和云服务',
spaceInfoTip1: 'Space 提供统一的账户鉴权服务,不会上传您的任何敏感信息。',
spaceInfoTip2:
'使用 Space 账户登录可使用 LangBot Models 等云服务,您将会获得一定的免费模型调用额度帮助您快速起步。',
spaceInfoTip3:
'登录方式不会影响其他功能,您在任何情况下都可以配置使用其他来源的模型。',
registerLocal: '注册本地账号',
registerWithPassword: '通过邮箱密码组合注册',
initSuccess: '初始化成功 请登录',

View File

@@ -681,10 +681,15 @@ const zhHant = {
register: {
title: '初始化 LangBot 👋',
description: '這是您首次啟動 LangBot',
adminAccountNote: '您填寫的電子郵件和密碼將作為初始管理員帳號',
adminAccountNote: '您在此處初始化使用的帳號將作為管理員帳號',
register: '註冊',
initWithSpace: '透過 Space 初始化',
spaceRecommended: '推薦:使用官方提供的穩定模型 API 和雲服務',
spaceInfoTip1: 'Space 提供統一的帳戶鑑權服務,不會上傳您的任何敏感資訊。',
spaceInfoTip2:
'使用 Space 帳戶登入可使用 LangBot Models 等雲服務,您將會獲得一定的免費模型調用額度幫助您快速起步。',
spaceInfoTip3:
'登入方式不會影響其他功能,您在任何情況下都可以配置使用其他來源的模型。',
registerLocal: '註冊本地帳號',
registerWithPassword: '透過電子郵件密碼組合註冊',
initSuccess: '初始化成功 請登入',