k-notes/k-notes-frontend/src/pages/login.tsx

import { useState } from "react";
import { useForm } from "react-hook-form";
import { Settings, ExternalLink } from "lucide-react";
import { SettingsDialog } from "@/components/settings-dialog";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Link } from "react-router-dom";
import { useLogin, useOidcLogin } from "@/hooks/use-auth";
import { useConfig } from "@/hooks/useConfig";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { ApiError } from "@/lib/api";
import { toast } from "sonner";
import { useTranslation } from "react-i18next";

const loginSchema = z.object({
  email: z.string().email("Invalid email address"),
  password: z.string().min(6, "Password must be at least 6 characters"),
});

type LoginFormValues = z.infer<typeof loginSchema>;

export default function LoginPage() {
  const { mutate: login, isPending } = useLogin();
  const { data: config } = useConfig();
  const { t } = useTranslation();
  const startOidcLogin = useOidcLogin();

  const form = useForm<LoginFormValues>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

  const onSubmit = (data: LoginFormValues) => {
    login(data, {
      onError: (error: any) => {
        if (error instanceof ApiError) {
          toast.error(error.message);
        } else {
          toast.error(t("Failed to login"));
        }
      },
    });
  };

  const [settingsOpen, setSettingsOpen] = useState(false);

  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-950 p-4 relative">
      <div className="absolute top-4 right-4">
        <Button variant="ghost" size="icon" onClick={() => setSettingsOpen(true)}>
          <Settings className="h-5 w-5" />
        </Button>
      </div>
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">{t("Welcome back")}</CardTitle>
          <CardDescription>
            {t("Enter your email to sign in to your account")}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* OIDC/SSO Login Button */}
          {config?.oidc_enabled && (
            <>
              <Button
                type="button"
                variant="outline"
                className="w-full"
                onClick={startOidcLogin}
              >
                <ExternalLink className="mr-2 h-4 w-4" />
                {t("Sign in with SSO")}
              </Button>
              {/* Divider only if both OIDC and password login are enabled */}
              {config?.password_login_enabled && (
                <div className="relative">
                  <div className="absolute inset-0 flex items-center">
                    <span className="w-full border-t" />
                  </div>
                  <div className="relative flex justify-center text-xs uppercase">
                    <span className="bg-background px-2 text-muted-foreground">
                      {t("Or continue with")}
                    </span>
                  </div>
                </div>
              )}
            </>
          )}

          {/* Email/Password Form - only show if password login is enabled */}
          {config?.password_login_enabled !== false && (
            <Form {...form}>
              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                <FormField
                  control={form.control}
                  name="email"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("Email")}</FormLabel>
                      <FormControl>
                        <Input placeholder="name@example.com" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="password"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("Password")}</FormLabel>
                      <FormControl>
                        <Input type="password" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <Button type="submit" className="w-full" disabled={isPending}>
                  {isPending ? t("Signing in...") : t("Sign in")}
                </Button>
              </form>
            </Form>
          )}
        </CardContent>
        <CardFooter className="flex justify-center">
          {config?.allow_registration !== false && (
            <p className="text-sm text-gray-500 dark:text-gray-400">
              {t("Don't have an account?")}{" "}
              <Link to="/register" className="font-semibold text-primary hover:underline">
                {t("Sign up")}
              </Link>
            </p>
          )}
        </CardFooter>
      </Card>
      <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} dataManagementEnabled={false} />
    </div>
  );
}