112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { FormEvent, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useEffect } from "react";
|
|
import { useAuthStore } from "@/store/authStore";
|
|
import { useTenantStore } from "@/store/tenantStore";
|
|
import { login, getCurrentUser } from "@/services/auth";
|
|
import { usePermissionStore } from "@/store/permissionStore";
|
|
import { useApiStore } from "@/store/uiStore";
|
|
import { t } from "@/lib/locale";
|
|
import { useLocaleStore } from "@/store/uiStore";
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const setAuth = useAuthStore((s) => s.setAuthFromLogin);
|
|
const setPermissions = usePermissionStore((s) => s.setProfile);
|
|
const setProfile = useAuthStore((s) => s.setProfile);
|
|
const addToast = useApiStore((s) => s.addToast);
|
|
const tenantId = useTenantStore((s) => s.tenantId);
|
|
const setTenant = useTenantStore((s) => s.setTenantId);
|
|
const availableTenants = useTenantStore((s) => s.availableTenants);
|
|
const locale = useLocaleStore((s) => s.locale);
|
|
const hasToken = useAuthStore((s) => !!s.accessToken);
|
|
|
|
useEffect(() => {
|
|
useAuthStore.getState().hydrate();
|
|
if (hasToken) router.replace("/dashboard");
|
|
}, [hasToken, router]);
|
|
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [selectedTenant, setSelectedTenant] = useState(tenantId);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const onSubmit = async (ev: FormEvent) => {
|
|
ev.preventDefault();
|
|
if (!selectedTenant) {
|
|
addToast("Tenant is required", "error");
|
|
return;
|
|
}
|
|
if (!username || !password) {
|
|
addToast("Username and password are required", "error");
|
|
return;
|
|
}
|
|
setIsLoading(true);
|
|
try {
|
|
const authRes = await login({ username, password }, selectedTenant);
|
|
setAuth({
|
|
tokenType: authRes.tokenType,
|
|
accessToken: authRes.accessToken,
|
|
refreshToken: authRes.refreshToken,
|
|
expiresInSeconds: authRes.expiresInSeconds
|
|
});
|
|
setTenant(selectedTenant);
|
|
const me = await getCurrentUser();
|
|
setProfile(me.data);
|
|
setPermissions(me.data.roles, me.data.permissions);
|
|
addToast(t("loginSuccess", locale), "success");
|
|
router.replace("/dashboard");
|
|
} catch (error: unknown) {
|
|
const message =
|
|
(error as { message?: string } | undefined)?.message ||
|
|
t("unknownError", locale);
|
|
addToast(message, "error");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="min-vh-100 d-flex align-items-center justify-content-center">
|
|
<section className="card p-4 w-100" style={{ maxWidth: 420 }}>
|
|
<div className="mb-3 text-center">
|
|
<h1 className="h3">UTMS Admin</h1>
|
|
<p className="text-muted">Sign in with tenant context</p>
|
|
</div>
|
|
<form className="vstack gap-3" onSubmit={onSubmit}>
|
|
<select
|
|
className="form-select"
|
|
value={selectedTenant}
|
|
onChange={(e) => setSelectedTenant(e.target.value)}
|
|
>
|
|
<option value="">Select tenant</option>
|
|
{availableTenants.map((tenant) => (
|
|
<option key={tenant} value={tenant}>
|
|
{tenant}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<input
|
|
className="form-control"
|
|
placeholder="Username"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
/>
|
|
<input
|
|
className="form-control"
|
|
type="password"
|
|
placeholder="Password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
<button className="btn btn-primary" type="submit" disabled={isLoading}>
|
|
{isLoading ? "Signing in..." : "Sign in"}
|
|
</button>
|
|
</form>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|