MythEclipse/zeavis-edu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(auth): replace local background images with external URLs

Browse Source 
- Remove local image imports for the background in login and register pages.
- Update background-image styles to use external URL links for easier asset management.
This commit is contained in:
seriouselly
2026-06-16 01:51:22 +07:00
parent 1afd2e013c
commit d1282364e7
3 changed files with 40 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/auth-form.tsx
+5 -5
View File
@@ -37,12 +37,12 @@ export function AuthForm({ mode, isSubmitting, error, googleOAuthEnabled, onSubm
}, []);
return (
<Card className="mx-auto w-full max-w-md">
<CardHeader>
<CardTitle>{mode === 'login' ? 'Masuk ke ZeaVis Edu' : 'Buat akun ZeaVis Edu'}</CardTitle>
<CardDescription>
<Card className="mx-auto w-full max-w-md bg-transparent border-none shadow-none">
<CardHeader className="text-center space-y-2">
<CardTitle className="text-2xl font-bold text-emerald-900">{mode === 'login' ? 'Masuk Akun ZeaVis Edu' : 'Buat akun ZeaVis Edu'}</CardTitle>
<CardDescription className="text-sm text-emerald-800/80">
{mode === 'login'
? 'Masuk untuk melihat riwayat diagnosis daun jagung Anda.'
? 'Masuk untuk menyimpan diagnosis dan mengikuti review pakar.'
: 'Daftar untuk menyimpan diagnosis dan mengikuti review pakar.'}
</CardDescription>
</CardHeader>
apps/web/src/pages/login-page.tsx
+23 -5
View File
@@ -65,15 +65,29 @@ export function LoginPage() {
<main className="flex min-h-screen items-center justify-center px-6 py-12">
<div className="flex flex-col items-center gap-3">
<div className="h-10 w-10 border-4 border-green-500 border-t-transparent rounded-full animate-spin" />
<p className="text-gray-500 text-sm">Menyelesaikan login dengan Google...</p>
<p className="text-gray-500 text-sm">
Menyelesaikan login dengan Google...
</p>
</div>
</main>
);
}
return (
<main className="flex min-h-screen items-center justify-center px-6 py-12">
<div className="w-full max-w-sm md:max-w-md space-y-4">
<main className="relative flex min-h-screen items-center justify-center px-6 py-12">
{/* Background Image with Overlay */}
<div
className="absolute inset-0 z-0"
style={{
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://cdn.pixabay.com/photo/2014/09/09/19/07/corn-field-440338_1280.jpg)`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}
/>
{/* Glassmorphism Container */}
<div className="relative z-10 w-full max-w-sm md:max-w-md space-y-6 bg-white/60 backdrop-blur-md p-8 md:p-10 rounded-3xl shadow-2xl border border-white/50">
<AuthForm
mode="login"
isSubmitting={mutation.isPending}
@@ -87,9 +101,13 @@ export function LoginPage() {
}}
onFieldChange={() => setError(null)}
/>
<p className="text-center text-sm text-muted-foreground">
<p className="text-center text-sm text-slate-700">
Belum punya akun?{" "}
<Link className="text-primary" to="/register">
<Link
className="text-emerald-700 font-bold hover:underline"
to="/register"
>
Daftar
</Link>
</p>
apps/web/src/pages/register-page.tsx
+12 -1
View File
@@ -28,7 +28,18 @@ export function RegisterPage() {
return (
<main className="flex min-h-screen items-center justify-center px-6 py-12">
<div className="w-full max-w-sm md:max-w-md space-y-4">
{/* Background Image with Overlay */}
<div
className="absolute inset-0 z-0"
style={{
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://cdn.pixabay.com/photo/2014/09/09/19/07/corn-field-440338_1280.jpg)`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}
/>
{/* Glassmorphism Container */}
<div className="relative z-10 w-full max-w-sm md:max-w-md space-y-6 bg-white/60 backdrop-blur-md p-8 md:p-10 rounded-3xl shadow-2xl border border-white/50">
<AuthForm
mode="register"
isSubmitting={mutation.isPending}