Gabriel Kaszewski
8d8d320a02
- Add AuthContext to manage user authentication state and token storage. - Create hooks for login, registration, and logout functionalities. - Implement dashboard layout with authentication check and loading state. - Enhance dashboard page with channel management features including create, edit, and delete channels. - Integrate API calls for channel operations and current broadcast retrieval. - Add stream URL resolution via server-side API route to handle redirects. - Update TV page to utilize new hooks for channel and broadcast management. - Refactor components for better organization and user experience. - Update application metadata for improved branding.
75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { useLogin } from "@/hooks/use-auth";
|
|
|
|
export default function LoginPage() {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const { mutate: login, isPending, error } = useLogin();
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
login({ email, password });
|
|
};
|
|
|
|
return (
|
|
<div className="w-full max-w-sm space-y-6">
|
|
<div className="space-y-1 text-center">
|
|
<h1 className="text-xl font-semibold text-zinc-100">Sign in</h1>
|
|
<p className="text-sm text-zinc-500">to manage your channels</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-1.5">
|
|
<label className="block text-xs font-medium text-zinc-400">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
autoComplete="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="you@example.com"
|
|
className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="block text-xs font-medium text-zinc-400">
|
|
Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
required
|
|
autoComplete="current-password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="••••••••"
|
|
className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
{error && <p className="text-xs text-red-400">{error.message}</p>}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isPending}
|
|
className="w-full rounded-md bg-white px-3 py-2 text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-200 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
{isPending ? "Signing in…" : "Sign in"}
|
|
</button>
|
|
</form>
|
|
|
|
<p className="text-center text-xs text-zinc-500">
|
|
No account?{" "}
|
|
<Link href="/register" className="text-zinc-300 hover:text-white">
|
|
Create one
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|