1
import { useEffect } from "react";
2
import { Layers, LogIn } from "lucide-react";
3
import { useNavigate, useSearch } from "@tanstack/react-router";
4
 
5
import { useMe } from "@/client/auth/use-me";
6
import { buildLoginUrl } from "@/client/auth/login-redirect";
7
import {
8
  BUTTON_BASE_CLASSES,
9
  BUTTON_SIZE_CLASSES,
10
  BUTTON_VARIANT_CLASSES,
11
} from "@/client/components/ui/button-classes";
12
import { paths } from "@/client/lib/paths";
13
 
14
export function LoginPage() {
15
  const search = useSearch({ from: paths.login });
16
  const navigate = useNavigate();
17
  const me = useMe();
18
 
19
  useEffect(() => {
20
    if (me.data) {
21
      navigate({ to: search.return_to ?? paths.home, replace: true });
22
    }
23
  }, [me.data, navigate, search.return_to]);
24
 
25
  return (
26
    <div className="mx-auto flex max-w-md flex-col items-center gap-8 pt-12 sm:pt-24">
27
      <Layers className="h-16 w-16 text-accent-400" strokeWidth={1.5} aria-hidden="true" />
28
      <div className="space-y-3 text-center">
29
        <h1 className="font-display text-4xl font-extrabold tracking-tight text-zinc-50 sm:text-5xl">dab</h1>
30
        <p className="text-base text-zinc-400">
31
          Your DAV-native data home — calendars, contacts, and files on one opaque host, accessible by any standards
32
          client.
33
        </p>
34
      </div>
35
      <a
36
        href={buildLoginUrl(search.return_to)}
37
        className={`${BUTTON_BASE_CLASSES} ${BUTTON_SIZE_CLASSES.md} ${BUTTON_VARIANT_CLASSES.primary} w-full`}
38
      >
39
        <LogIn className="h-4 w-4" aria-hidden="true" />
40
        Sign in with tessera
41
      </a>
42
      <p className="text-xs text-zinc-500">
43
        You will be redirected to tessera and brought back here once authenticated.
44
      </p>
45
    </div>
46
  );
47
}