new frontend
ik ben zo cool
This commit is contained in:
@@ -0,0 +1,161 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
import { useState } from "react"
|
||||
import Image from "next/image"
|
||||
import { Calendar, Loader2 } from "lucide-react"
|
||||
import { useAuth } from "@/lib/auth-context"
|
||||
import { ApiError } from "@/lib/api"
|
||||
import { ALL_ROOMS_BACKGROUND } from "@/lib/room-theme"
|
||||
|
||||
type Mode = "login" | "register"
|
||||
|
||||
export function AuthScreen() {
|
||||
const { login, register } = useAuth()
|
||||
const [mode, setMode] = useState<Mode>("login")
|
||||
const [username, setUsername] = useState("")
|
||||
const [email, setEmail] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [notice, setNotice] = useState<string | null>(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError(null)
|
||||
setNotice(null)
|
||||
setSubmitting(true)
|
||||
try {
|
||||
if (mode === "login") {
|
||||
await login(username.trim(), password)
|
||||
} else {
|
||||
await register(username.trim(), password, email.trim())
|
||||
}
|
||||
} catch (err) {
|
||||
const message =
|
||||
err instanceof ApiError ? err.message : "Something went wrong. Please try again."
|
||||
setError(message)
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const switchMode = (next: Mode) => {
|
||||
setMode(next)
|
||||
setError(null)
|
||||
setNotice(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden p-4">
|
||||
<Image
|
||||
src={ALL_ROOMS_BACKGROUND || "/placeholder.svg"}
|
||||
alt="Aurora over a mountain lake"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/30" />
|
||||
|
||||
<div className="relative z-10 w-full max-w-md animate-fade-in rounded-3xl border border-white/20 bg-white/10 p-8 shadow-2xl backdrop-blur-lg">
|
||||
<div className="mb-8 flex flex-col items-center text-center">
|
||||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-500 shadow-lg">
|
||||
<Calendar className="h-7 w-7 text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-semibold text-white drop-shadow">
|
||||
{mode === "login" ? "Welcome back" : "Create your account"}
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-white/70">
|
||||
{mode === "login"
|
||||
? "Sign in to your shared calendar"
|
||||
: "Join rooms and plan events together"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor="username" className="text-sm font-medium text-white/90">
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
autoComplete="username"
|
||||
required
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="rounded-xl border border-white/20 bg-white/10 px-4 py-2.5 text-white placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-white/40"
|
||||
placeholder="your_username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{mode === "register" && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor="email" className="text-sm font-medium text-white/90">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="rounded-xl border border-white/20 bg-white/10 px-4 py-2.5 text-white placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-white/40"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor="password" className="text-sm font-medium text-white/90">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
autoComplete={mode === "login" ? "current-password" : "new-password"}
|
||||
required
|
||||
minLength={mode === "register" ? 8 : undefined}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="rounded-xl border border-white/20 bg-white/10 px-4 py-2.5 text-white placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-white/40"
|
||||
placeholder={mode === "register" ? "At least 8 characters" : "••••••••"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-xl border border-red-400/40 bg-red-500/20 px-4 py-2.5 text-sm text-white">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{notice && (
|
||||
<div className="rounded-xl border border-emerald-400/40 bg-emerald-500/20 px-4 py-2.5 text-sm text-white">
|
||||
{notice}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="mt-2 flex items-center justify-center gap-2 rounded-xl bg-blue-500 px-4 py-3 font-medium text-white shadow-lg transition-colors hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-70"
|
||||
>
|
||||
{submitting && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
{mode === "login" ? "Sign in" : "Create account"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="mt-6 text-center text-sm text-white/70">
|
||||
{mode === "login" ? "Don't have an account? " : "Already have an account? "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => switchMode(mode === "login" ? "register" : "login")}
|
||||
className="font-medium text-white underline-offset-2 hover:underline"
|
||||
>
|
||||
{mode === "login" ? "Sign up" : "Sign in"}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user