eric/agent-fox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign login page with left-right split layout and OAuth buttons

Browse Source
This commit is contained in:
杨建宽
2026-04-03 13:18:05 +08:00
parent a7027c8aaa
commit db4e5540ad
1 changed files with 99 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
packages/web/src/pages/Login.tsx
View File

@@ -1,6 +1,9 @@
import { useState } from 'react'; import { useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom'; import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { useAuth } from '../lib/auth'; import { useAuth } from '../lib/auth';
import { useI18n } from '../lib/i18n';
import AuthBranding from '../components/AuthBranding';
import OAuthButtons from '../components/OAuthButtons';
export default function Login() { export default function Login() {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
@@ -11,7 +14,8 @@ export default function Login() {
const { login } = useAuth(); const { login } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const redirectTo = searchParams.get('redirect') || '/'; const redirectTo = searchParams.get('redirect') || '/dashboard';
const { t } = useI18n();
const validate = () => { const validate = () => {
const errors: { email?: string; password?: string } = {}; const errors: { email?: string; password?: string } = {};
@@ -43,27 +47,38 @@ export default function Login() {
}; };
return ( return (
<div className="min-h-screen flex items-center justify-center bg-bg-primary relative overflow-hidden"> <div className="min-h-screen flex">
{/* Left panel — branding (hidden on mobile) */}
<AuthBranding />
{/* Right panel — form */}
<div className="flex-1 flex items-center justify-center p-6 bg-bg-primary relative overflow-hidden">
{/* Subtle grid background */} {/* Subtle grid background */}
<div className="absolute inset-0" style={{ <div className="absolute inset-0" style={{
backgroundImage: `linear-gradient(var(--border-muted) 1px, transparent 1px), linear-gradient(90deg, var(--border-muted) 1px, transparent 1px)`, backgroundImage: `linear-gradient(var(--border-muted) 1px, transparent 1px), linear-gradient(90deg, var(--border-muted) 1px, transparent 1px)`,
backgroundSize: '48px 48px', backgroundSize: '48px 48px',
}} /> }} />
{/* Radial fade */}
<div className="absolute inset-0" style={{ <div className="absolute inset-0" style={{
background: `radial-gradient(ellipse at center, transparent 0%, var(--bg-primary) 70%)`, background: `radial-gradient(ellipse at center, transparent 0%, var(--bg-primary) 70%)`,
}} /> }} />
<div className="w-full max-w-[360px] mx-4 relative animate-slide-up"> <div className="w-full max-w-[400px] relative animate-slide-up">
{/* Brand */} {/* Mobile-only brand (visible when left panel is hidden) */}
<div className="text-center mb-8"> <div className="lg:hidden text-center mb-8">
<div className="w-11 h-11 rounded-xl bg-accent mx-auto flex items-center justify-center mb-4 shadow-md"> <div className="w-11 h-11 rounded-xl bg-accent mx-auto flex items-center justify-center mb-4 shadow-md">
<svg className="w-5 h-5 text-white" viewBox="0 0 20 20" fill="currentColor"> <svg className="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" /> <path d="M12 2L2 7l10 5 10-5-10-5z" />
<path d="M2 17l10 5 10-5" />
<path d="M2 12l10 5 10-5" />
</svg> </svg>
</div> </div>
<h1 className="text-xl font-semibold text-text-primary tracking-[-0.01em]">Sign in to AgentFox</h1> <h1 className="text-xl font-semibold text-text-primary tracking-[-0.01em]">{t('auth.productName')}</h1>
<p className="text-[13px] text-text-muted mt-1">API documentation for LLMs</p> <p className="text-[13px] text-text-muted mt-1">{t('auth.slogan')}</p>
</div>
{/* Title (desktop) */}
<div className="hidden lg:block mb-8">
<h1 className="text-2xl font-semibold text-text-primary tracking-[-0.01em]">{t('auth.login.title')}</h1>
</div> </div>
{/* Card */} {/* Card */}
@@ -76,7 +91,7 @@ export default function Login() {
)} )}
<form onSubmit={handleSubmit} noValidate className="space-y-4"> <form onSubmit={handleSubmit} noValidate className="space-y-4">
<div> <div>
<label className="block text-[13px] font-medium text-text-secondary mb-1.5">Email</label> <label className="block text-[13px] font-medium text-text-secondary mb-1.5">{t('auth.login.email')}</label>
<input <input
type="email" type="email"
value={email} value={email}
@@ -92,7 +107,7 @@ export default function Login() {
)} )}
</div> </div>
<div> <div>
<label className="block text-[13px] font-medium text-text-secondary mb-1.5">Password</label> <label className="block text-[13px] font-medium text-text-secondary mb-1.5">{t('auth.login.password')}</label>
<input <input
type="password" type="password"
value={password} value={password}
@@ -109,17 +124,28 @@ export default function Login() {
</div> </div>
<button type="submit" disabled={loading} className="btn-primary w-full"> <button type="submit" disabled={loading} className="btn-primary w-full">
{loading ? ( {loading ? (
<><svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" /></svg> Signing in...</> <><svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" /></svg> {t('auth.login.submitting')}</>
) : 'Sign In'} ) : t('auth.login.submit')}
</button> </button>
</form> </form>
{/* Divider */}
<div className="flex items-center gap-3 my-5">
<div className="flex-1 h-px bg-border-default" />
<span className="text-[12px] text-text-muted">{t('auth.login.or')}</span>
<div className="flex-1 h-px bg-border-default" />
</div>
{/* OAuth buttons */}
<OAuthButtons />
</div> </div>
<p className="text-center text-[13px] text-text-muted mt-6"> <p className="text-center text-[13px] text-text-muted mt-6">
Don't have an account?{' '} {t('auth.login.noAccount')}{' '}
<Link to="/register" className="text-accent hover:underline font-medium">Sign Up</Link> <Link to="/register" className="text-accent hover:underline font-medium">{t('auth.login.signUp')}</Link>
</p> </p>
</div> </div>
</div> </div>
</div>
); );
} }