pi-ku/frontend/src/pages/Register.tsx

import { zodResolver } from "@hookform/resolvers/zod";
import { InfoIcon } from "@phosphor-icons/react";
import axios from "axios";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import { z } from "zod";
import { publicApi } from "../api/apiClient";
import Logo from "../components/Logo";
import FormField from "../components/ui/FormField";
import Saajan from "../components/ui/Saajan";
import { endpoints } from "../config/endpoints";
import { ROUTES } from "../config/routes";
import { CryptoUtils } from "../utils/crypto";

const registerSchema = z
  .object({
    full_name: z.string().min(2, "Name must be at least 2 characters"),
    email: z.email("Please enter a valid email"),
    password: z.string().min(8, "Password must be at least 8 characters"),
    confirm_password: z.string(),
  })
  .refine((data) => data.password === data.confirm_password, {
    message: "Passwords don't match",
    path: ["confirm_password"],
  });

type RegisterInputs = z.infer<typeof registerSchema>;

export default function Register() {
  const navigate = useNavigate();
  const [isLoading, setIsLoading] = useState(false);
  const [apiError, setApiError] = useState<string | null>(null);
  const [saajanMessage, setSaajanMessage] = useState<string>(
    "I didn't think I'd be here either.\nAnd yet, here we are.",
  );

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<RegisterInputs>({
    resolver: zodResolver(registerSchema),
  });

  const onSubmit = async (data: RegisterInputs) => {
    setSaajanMessage("Good. I'll remember that.");
    setIsLoading(true);
    setApiError(null);
    try {
      // we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db.
      const { authHash } = await CryptoUtils.deriveKeyBundle(
        data.password,
        data.email,
      );

      await publicApi.post(endpoints.REGISTER, {
        full_name: data.full_name,
        email: data.email,
        password: authHash,
      });
      navigate(ROUTES.VERIFY_EMAIL, { replace: true });
    } catch (err) {
      let message = "Registration failed. Please try again.";
      if (axios.isAxiosError(err)) {
        message = err.response?.data?.message || message;
      }
      setApiError(message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="flex flex-col">
      <Saajan message={saajanMessage} position="right" />
      <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
        <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
          <div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
            Create a <Logo /> Account
          </div>

          {apiError && (
            <div className="alert alert-error text-xs py-2 rounded-md">
              <span>{apiError}</span>
            </div>
          )}

          <FormField
            label="Pen Name"
            placeholder="Word Smith"
            registration={register("full_name")}
            error={errors.full_name?.message}
            handleFocus={() =>
              setSaajanMessage("Hello friend. What should I call you?")
            }
          />

          <FormField
            label="Email"
            type="email"
            placeholder="f.kafka@email.com"
            registration={register("email")}
            error={errors.email?.message}
            handleFocus={() =>
              setSaajanMessage(
                "Where should I send your letters?\nNo empty lunchboxes, please.",
              )
            }
          />

          <FormField
            label="Password"
            type="password"
            placeholder="••••••••"
            registration={register("password")}
            error={errors.password?.message}
            handleFocus={() =>
              setSaajanMessage(
                "Something only you know.\nI have one of those too.",
              )
            }
          />

          <FormField
            label="Confirm Password"
            type="password"
            placeholder="••••••••"
            registration={register("confirm_password")}
            error={errors.confirm_password?.message}
            handleFocus={() =>
              setSaajanMessage(
                "Just once? Trust me, \nsome things are worth repeating twice.",
              )
            }
          />

          <div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
            <InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
            <p className="text-sm font-semibold">
              Choose a password you won't forget. <br />
              Just like life,{" "}
              <span className="underline decoration-2">there is no reset</span>{" "}
              here. If you lose it, your letters cannot be recovered.
            </p>
          </div>

          <div className="card-actions mt-4">
            <button
              type="submit"
              disabled={isLoading}
              aria-label="Register"
              className="btn btn-primary w-full shadow-lg"
            >
              {isLoading ? (
                <span className="loading loading-spinner loading-sm" />
              ) : (
                "Register"
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}