128 lines
4.2 KiB
TypeScript
128 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { signIn } from "next-auth/react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
export default function SignIn() {
|
|
const router = useRouter();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const formData = new FormData(e.currentTarget);
|
|
const email = formData.get("email");
|
|
const password = formData.get("password");
|
|
|
|
const result = await signIn("keycloak", {
|
|
email,
|
|
password,
|
|
redirect: false,
|
|
});
|
|
|
|
if (result?.error) {
|
|
setError("Invalid credentials");
|
|
return;
|
|
}
|
|
|
|
// Initialize folders after successful login
|
|
try {
|
|
const response = await fetch('/api/nextcloud/status');
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch Nextcloud folders');
|
|
}
|
|
const data = await response.json();
|
|
const folders = data.folders || [];
|
|
|
|
// Cache the folders in localStorage for immediate access in Pages
|
|
localStorage.setItem('nextcloud_folders', JSON.stringify({
|
|
folders,
|
|
timestamp: Date.now()
|
|
}));
|
|
} catch (error) {
|
|
console.error('Error initializing folders:', error);
|
|
// Continue with navigation even if folder initialization fails
|
|
}
|
|
|
|
router.push("/");
|
|
} catch (error) {
|
|
setError("An error occurred during sign in");
|
|
console.error("Sign in error:", error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="min-h-screen flex items-center justify-center"
|
|
style={{
|
|
backgroundImage: "url('/signin.jpg')",
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat'
|
|
}}
|
|
>
|
|
<div className="w-full max-w-md space-y-8">
|
|
<div>
|
|
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-white">
|
|
Sign in to your account
|
|
</h2>
|
|
</div>
|
|
|
|
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
|
<div className="-space-y-px rounded-md shadow-sm">
|
|
<div>
|
|
<label htmlFor="email" className="sr-only">
|
|
Email address
|
|
</label>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
required
|
|
className="relative block w-full rounded-t-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
|
placeholder="Email address"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="password" className="sr-only">
|
|
Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
required
|
|
className="relative block w-full rounded-b-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
|
placeholder="Password"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="text-red-500 text-sm text-center">{error}</div>
|
|
)}
|
|
|
|
<div>
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="group relative flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:opacity-50"
|
|
>
|
|
{isLoading ? "Signing in..." : "Sign in"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|