polish auth entry surfaces

This commit is contained in:
boos
2026-06-06 17:42:14 +08:00
parent 188e457e7f
commit 1b2880739a
6 changed files with 154 additions and 56 deletions
+1 -1
View File
@@ -113,7 +113,6 @@ export default function UserRegister({ onLogin }: { onLogin?: () => void }) {
</div>
)}
>
<OAuthSlot t={(text) => text} variant="user" mode="register" />
<form onSubmit={handleSubmit} className="login-register-form">
<div className="login-register-grid">
<div className="login-field-group">
@@ -234,6 +233,7 @@ export default function UserRegister({ onLogin }: { onLogin?: () => void }) {
)}
</button>
</form>
<OAuthSlot t={(text) => text} variant="user" mode="register" />
</LoginShell>
);
}
+2 -2
View File
@@ -51,7 +51,7 @@ export default function LoginShell({
>
<div className="brand-mark-frame brand-mark-frame-hero">
<div className="brand-mark-canvas">
<img src="/logo.png" alt="BoosAPI" className="login-brand-logo" />
<img src="/logo.png" alt="BossAI" className="login-brand-logo" />
</div>
</div>
<div
@@ -104,12 +104,12 @@ export default function LoginShell({
<div className="login-auth-eyebrow">{eyebrow}</div>
<h2 className="login-auth-title">{title}</h2>
<p className="login-auth-copy">{description}</p>
{children}
{error && (
<div className="alert alert-error animate-shake" style={{ marginBottom: 12 }}>
{error}
</div>
)}
{children}
{footer && <div className="login-auth-footer">{footer}</div>}
</div>
</section>
+19 -7
View File
@@ -1,4 +1,5 @@
import React from 'react';
import { BrandGlyph } from '../../components/BrandIcon.js';
export interface OAuthSlotProps {
t: (text: string) => string;
@@ -17,16 +18,17 @@ export interface OAuthSlotProps {
* does not touch `authSession`. Tests assert that property.
*/
const OAUTH_PROVIDER_KEYS = [
{ key: 'google', label: 'Google' },
{ key: 'github', label: 'GitHub' },
{ key: 'wechat', label: '微信' },
{ key: 'google', label: 'Google', icon: 'google-color' },
{ key: 'github', label: 'GitHub', icon: 'github' },
{ key: 'wechat', label: '微信', icon: 'wechat-color' },
];
export default function OAuthSlot({ t, mode = 'login' }: OAuthSlotProps) {
const title = mode === 'register' ? t('第三方账号快速注册') : t('第三方登录');
const desc = mode === 'register'
? t('OAuth 接入后可自动创建账号并绑定同一用户身份。')
: t('即将支持配置后的 OAuth 提供商。');
? t('接入后可自动创建账号,并绑定同一用户身份。')
: t('管理员配置 OAuth 后即可启用这些入口。');
const pendingLabel = t('待配置');
return (
<div
@@ -48,8 +50,18 @@ export default function OAuthSlot({ t, mode = 'login' }: OAuthSlotProps) {
data-provider={provider.key}
title={t('等待管理员配置 OAuth 后启用')}
>
<span className="login-oauth-provider-mark">{provider.label.slice(0, 1)}</span>
<span>{provider.label}</span>
<span className="login-oauth-provider-mark" aria-hidden="true">
<BrandGlyph
icon={provider.icon}
alt=""
size={18}
fallbackText={provider.label}
/>
</span>
<span className="login-oauth-provider-copy">
<span className="login-oauth-provider-name">{provider.label}</span>
<span className="login-oauth-provider-state">{pendingLabel}</span>
</span>
</button>
))}
</div>