gitfor/platform

import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { z } from "zod";
import { resetPassword } from "~/fns/login";
import { useAction } from "~/hooks/use-action";
import { AuthCard } from "~/components/AuthCard";
import { Button } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { TextLink } from "~/ui/TextLink";

export const Route = createFileRoute("/reset-password")({
  validateSearch: z.object({ token: z.string().optional() }),
  head: () => ({ meta: [{ title: "Choose a new password · gitfor" }] }),
  component: ResetPasswordPage,
});

function ResetPasswordPage() {
  const { token } = Route.useSearch();
  const navigate = useNavigate();
  const action = useAction(resetPassword);

  if (!token) {
    return (
      <AuthCard title="Invalid link" subtitle="This reset link is missing its token.">
        <TextLink to="/forgot-password" className="text-sm">
          Request a new link
        </TextLink>
      </AuthCard>
    );
  }

  return (
    <AuthCard title="Choose a new password" subtitle="Every other session will be signed out.">
      <form
        method="post"
        className="space-y-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const password = String(new FormData(event.currentTarget).get("password") ?? "");
          const result = await action.run({ data: { token, password } });