test: replace role texts by testids

frontend/src/components/drawer/PasskeyModal.tsx

@@ -41,10 +41,15 @@ export function PasskeyModal() {
             required
             type="password"
             placeholder="password"
+            data-testid="passkey-input"
             className="font-sans validator input input-bordered rounded-r-none"
           />
           <div className="validator-message text-xs text-error"></div>
-          <button type="submit" className="btn btn-primary rounded-l-none">
+          <button
+            type="submit"
+            data-testid="passkey-submit-btn"
+            className="btn btn-primary rounded-l-none"
+          >
             Unlock
           </button>
         </form>

frontend/src/components/editor/ToolBar.tsx

@@ -194,6 +194,7 @@ export function ToolBar({
         </div>
         <button
           type="button"
+          data-testid="vault-trigger-btn"
           className="btn btn-neutral btn-sm rounded-full px-6 group"
           onClick={() => setConfirmModal("VAULT")}
         >
@@ -299,6 +300,7 @@ export function VaultConfirmModal({
         <div className="w-full flex justify-center gap-8 mt-4">
           <button
             type="button"
+            data-testid="vault-cancel-btn"
             className="btn btn-ghost btn-sm mt-4"
             onClick={() => setConfirmModal(null)}
           >
@@ -307,6 +309,7 @@ export function VaultConfirmModal({
           <button
             className="btn btn-primary btn-sm mt-4"
             type="submit"
+            data-testid="vault-confirm-btn"
             form="vault-form"
           >
             Take it

frontend/src/components/ui/FormField.tsx

@@ -1,43 +1,44 @@
 import type { UseFormRegisterReturn } from "react-hook-form";
 
 interface FormFieldProps {
-    label: string;
+  label: string;
-    type?: string;
+  type?: string;
-    placeholder?: string;
+  placeholder?: string;
-    registration: UseFormRegisterReturn;
+  registration: UseFormRegisterReturn;
-    error?: string;
+  error?: string;
-    handleFocus?: () => void;
+  handleFocus?: () => void;
-    "data-testid"?: string;
+  "data-testid"?: string;
 }
 
 export default function FormField({
-    label,
+  label,
-    type = "text",
+  type = "text",
-    placeholder,
+  placeholder,
-    registration,
+  registration,
-    error,
+  error,
-    handleFocus,
+  handleFocus,
-    "data-testid": testId,
+  "data-testid": testId,
 }: FormFieldProps) {
-    return (
+  return (
-        <div className="form-control">
+    <div className="form-control">
-            <label
+      <label
-                htmlFor={registration.name}
+        htmlFor={registration.name}
-                className="field-label font-display text-neutral-content/80 font-medium"
+        className="field-label font-display text-neutral-content/80 font-medium"
-            >
+      >
-                {label}
+        {label}
-            </label>
+      </label>
-            <input
+      <input
-                {...registration}
+        {...registration}
-                id={registration.name}
+        id={registration.name}
-                data-testid={testId}
+        data-testid={testId}
-                type={type}
+        type={type}
-                placeholder={placeholder}
+        placeholder={placeholder}
-                className={`input input-bordered focus:input-primary ${error ? "input-error" : ""
+        className={`input input-bordered focus:input-primary ${
-                    }`}
+          error ? "input-error" : ""
-                onFocus={handleFocus}
+        }`}
-            />
+        onFocus={handleFocus}
-            {error && <p className="text-error">{error}</p>}
+      />
-        </div>
+      {error && <p className="text-error">{error}</p>}
-    );
+    </div>
+  );
 }

frontend/src/components/ui/Modal.tsx

@@ -3,42 +3,42 @@ import type { ReactNode } from "react";
 import { createPortal } from "react-dom";
 
 interface ModalProps {
-    isOpen: boolean;
+  isOpen: boolean;
-    onClose?: () => void;
+  onClose?: () => void;
-    children: ReactNode;
+  children: ReactNode;
-    "data-testid"?: string;
+  "data-testid"?: string;
 }
 
 export function Modal({
-    isOpen,
+  isOpen,
-    onClose,
+  onClose,
-    children,
+  children,
-    "data-testid": testId,
+  "data-testid": testId,
 }: ModalProps) {
-    if (!isOpen) return null;
+  if (!isOpen) return null;
-    // render the modal top of all elements and position them to document viewport (/ the main wrapper).
+  // render the modal top of all elements and position them to document viewport (/ the main wrapper).
-    // NOTE: this is recommended approach for modals as it shouldn't be bound to the parent box.
+  // NOTE: this is recommended approach for modals as it shouldn't be bound to the parent box.
-    const mainContainer = document.querySelector("main") || document.body;
+  const mainContainer = document.querySelector("main") || document.body;
-    return createPortal(
+  return createPortal(
-        <div
+    <div
-            data-testid={testId}
+      data-testid={testId}
-            className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/textures/noise.gif')]"
+      className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/textures/noise.gif')]"
-        >
+    >
-            <div className="modal-box border border-neutral/60 relative bg-base-100/60 flex flex-col items-center text-center gap-6">
+      <div className="modal-box border border-neutral/60 relative bg-base-100/60 flex flex-col items-center text-center gap-6">
-                {onClose && (
+        {onClose && (
-                    <button
+          <button
-                        type="button"
+            type="button"
-                        data-testid="modal-close-btn"
+            data-testid="modal-close-btn"
-                        className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
+            className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
-                        onClick={onClose}
+            onClick={onClose}
-                        aria-label="Close"
+            aria-label="Close"
-                    >
+          >
-                        <XCircleIcon size={18} weight="bold" />
+            <XCircleIcon size={18} weight="bold" />
-                    </button>
+          </button>
-                )}
+        )}
-                {children}
+        {children}
-            </div>
+      </div>
-        </div>,
+    </div>,
-        mainContainer,
+    mainContainer,
-    );
+  );
 }

frontend/src/pages/Drawer.test.tsx

@@ -94,7 +94,7 @@ describe("Drawer Page", () => {
     );
 
     expect(screen.getByTestId("passkey-modal-title")).toBeInTheDocument();
-    expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
+    expect(screen.getByTestId("passkey-input")).toBeInTheDocument();
   });
 
   it("renders the welcome letter when firstTime state is present", () => {

frontend/src/pages/Editor.test.tsx

@@ -97,25 +97,22 @@ describe("Editor Page", () => {
     fireEvent.click(sealBtn);
 
     // Click Vault to show confirm modal
-    const vaultBtn = screen.getByRole("button", { name: /vault/i });
+    const vaultBtn = screen.getByTestId("vault-trigger-btn");
     fireEvent.click(vaultBtn);
 
     // Set date and submit vault form
-    const dateInput = container.querySelector('input[name="vault-date"]');
+    const dateInput = document.body.querySelector('input[name="vault-date"]');
     if (!dateInput) throw new Error("Date input not found");
     fireEvent.change(dateInput, { target: { value: "2026-12-31" } });
 
-    const confirmVaultBtn = container.querySelector(
+    const confirmVaultBtn = screen.getByTestId("vault-confirm-btn");
-      'button[form="vault-form"]',
-    );
-    if (!confirmVaultBtn) throw new Error("Confirm vault button not found");
     fireEvent.click(confirmVaultBtn);
 
     // Wait for save to complete and check readOnly
     expect(await screen.findByTestId("save-success-toast")).toBeInTheDocument();
 
     expect(canvas.getAttribute("data-readonly")).toBe("true");
-    expect(screen.getByLabelText(/recipient/i)).toBeDisabled();
+    expect(screen.getByTestId("recipient-input")).toBeDisabled();
   });
 
   it("should set canvas to readOnly when status is SEALED", async () => {
@@ -135,7 +132,7 @@ describe("Editor Page", () => {
       }),
     );
 
-    const { container } = render(
+    render(
       <MemoryRouter initialEntries={["/write/test-id"]}>
         <Routes>
           <Route path="/write/:public_id" element={<Editor />} />
@@ -149,19 +146,17 @@ describe("Editor Page", () => {
 
     const canvas = screen.getByTestId("canvas");
 
-    const toolbar = container.querySelector("#writer-toolbar");
+    const sealBtn = screen.getByTestId("seal-trigger-btn");
-    const sealBtn = toolbar?.querySelector(".btn-primary");
-    if (!sealBtn) throw new Error("Seal button not found");
     fireEvent.click(sealBtn);
 
     // The secondary seal button appears (it has btn-accent class)
-    const secondarySealBtn = container.querySelector(".btn-accent");
+    const secondarySealBtn = screen.getByTestId("seal-confirm-btn");
     if (!secondarySealBtn) throw new Error("Secondary seal button not found");
     fireEvent.click(secondarySealBtn);
 
     expect(await screen.findByTestId("save-success-toast")).toBeInTheDocument();
 
     expect(canvas.getAttribute("data-readonly")).toBe("true");
-    expect(screen.getByLabelText(/recipient/i)).toBeDisabled();
+    expect(screen.getByTestId("recipient-input")).toBeDisabled();
   });
 });

frontend/src/pages/Login.test.tsx

@@ -27,9 +27,9 @@ describe("Login Page", () => {
       </MemoryRouter>,
     );
 
-    await userEvent.type(screen.getByLabelText(/email/i), "test@example.com");
+    await userEvent.type(screen.getByTestId("email-input"), "test@example.com");
-    await userEvent.type(screen.getByLabelText(/password/i), "password123");
+    await userEvent.type(screen.getByTestId("password-input"), "password123");
-    await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
+    await userEvent.click(screen.getByTestId("login-submit-btn"));
 
     expect(await screen.findByTestId("login-error-message")).toHaveTextContent(
       /technical issues/i,
@@ -87,9 +87,9 @@ describe("Login Page", () => {
       </MemoryRouter>,
     );
 
-    await userEvent.type(screen.getByLabelText(/email/i), "test@example.com");
+    await userEvent.type(screen.getByTestId("email-input"), "test@example.com");
-    await userEvent.type(screen.getByLabelText(/password/i), "password123");
+    await userEvent.type(screen.getByTestId("password-input"), "password123");
-    await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
+    await userEvent.click(screen.getByTestId("login-submit-btn"));
 
     const expectedTestId =
       nextRoute.toLowerCase() === "drawer" ? "drawer-page" : "reader-page";

frontend/src/pages/Login.tsx

@@ -16,134 +16,135 @@ import { useAuth } from "../hooks/useAuth";
 import { CryptoUtils } from "../utils/crypto";
 
 const loginSchema = z.object({
-    email: z.email("Please enter a valid email"),
+  email: z.email("Please enter a valid email"),
-    password: z.string().min(1, "Password is required"),
+  password: z.string().min(1, "Password is required"),
 });
 
 type LoginInputs = z.infer<typeof loginSchema>;
 
 export default function Login() {
-    const navigate = useNavigate();
+  const navigate = useNavigate();
-    const location = useLocation();
+  const location = useLocation();
-    const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
-    const [apiError, setApiError] = useState<string | null>(null);
+  const [apiError, setApiError] = useState<string | null>(null);
-    const { setAuthStore } = useAuth();
+  const { setAuthStore } = useAuth();
-    const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime);
+  const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime);
-    const [saajanMessage, setSaajanMessage] = useState<string>(
+  const [saajanMessage, setSaajanMessage] = useState<string>(
-        "I was wondering when you'd return.",
+    "I was wondering when you'd return.",
-    );
+  );
-    const nextRoute = location.state?.redirectUrl || ROUTES.DRAWER;
+  const nextRoute = location.state?.redirectUrl || ROUTES.DRAWER;
 
-    const {
+  const {
-        register,
+    register,
-        handleSubmit,
+    handleSubmit,
-        formState: { errors },
+    formState: { errors },
-    } = useForm<LoginInputs>({
+  } = useForm<LoginInputs>({
-        resolver: zodResolver(loginSchema),
+    resolver: zodResolver(loginSchema),
-    });
+  });
 
-    const onSubmit = async (data: LoginInputs) => {
+  const onSubmit = async (data: LoginInputs) => {
-        setIsLoading(true);
+    setIsLoading(true);
-        setApiError(null);
+    setApiError(null);
-        try {
+    try {
-            // client side key derivation for e2e encryption
+      // client side key derivation for e2e encryption
-            const { masterKey, authHash } = await CryptoUtils.deriveKeyBundle(
+      const { masterKey, authHash } = await CryptoUtils.deriveKeyBundle(
-                data.password,
+        data.password,
-                data.email,
+        data.email,
-            );
+      );
 
-            // send just the authHash as the password to the server
+      // send just the authHash as the password to the server
-            const { data: authData } = await publicApi.post(endpoints.LOGIN, {
+      const { data: authData } = await publicApi.post(endpoints.LOGIN, {
-                email: data.email,
+        email: data.email,
-                password: authHash,
+        password: authHash,
-            });
+      });
 
-            const { data: userData } = await api.get(endpoints.ME, {
+      const { data: userData } = await api.get(endpoints.ME, {
-                headers: { Authorization: `Bearer ${authData.access}` },
+        headers: { Authorization: `Bearer ${authData.access}` },
-            });
+      });
 
-            await setAuthStore(authData.access, userData, masterKey);
+      await setAuthStore(authData.access, userData, masterKey);
 
-            navigate(nextRoute, { replace: true, state: location.state });
+      navigate(nextRoute, { replace: true, state: location.state });
-        } catch (err) {
+    } catch (err) {
-            let message =
+      let message =
-                "Sorry, we're experiencing technical issues.\nPlease try again later.";
+        "Sorry, we're experiencing technical issues.\nPlease try again later.";
-            if (axios.isAxiosError(err) && err.response?.status !== 500) {
+      if (axios.isAxiosError(err) && err.response?.status !== 500) {
-                message = err.response?.data?.detail || err.response?.data?.message;
+        message = err.response?.data?.detail || err.response?.data?.message;
-            }
+      }
-            setApiError(message);
+      setApiError(message);
-        } finally {
+    } finally {
-            setIsLoading(false);
+      setIsLoading(false);
-        }
+    }
-    };
+  };
 
-    return (
+  return (
-        <div className="flex flex-col items-center">
+    <div className="flex flex-col items-center">
-            {!showWelcome && <Saajan message={saajanMessage} position="top" />}
+      {!showWelcome && <Saajan message={saajanMessage} position="top" />}
-            {showWelcome && <WelcomeModal setShowWelcome={setShowWelcome} />}
+      {showWelcome && <WelcomeModal setShowWelcome={setShowWelcome} />}
-            <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
+      <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">
+        <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
-                    <h1 className="flex items-center font-display text-2xl justify-center text-primary/80 tracking-tight">
+          <h1 className="flex items-center font-display text-2xl justify-center text-primary/80 tracking-tight">
-                        &nbsp;&nbsp;Enter <Logo type="logo" scale={0.7} /> Archive
+            &nbsp;&nbsp;Enter <Logo type="logo" scale={0.7} /> Archive
-                    </h1>
+          </h1>
 
-                    {apiError && (
+          {apiError && (
-                        <div className="alert alert-error text-xs py-2 rounded-md">
+            <div className="alert alert-error text-xs py-2 rounded-md">
-                            <span data-testid="login-error-message">{apiError}</span>
+              <span data-testid="login-error-message">{apiError}</span>
-                        </div>
-                    )}
-
-                    <FormField
-                        label="Email"
-                        type="email"
-                        placeholder="f.kafka@wrongtrain.com"
-                        data-testid="email-input"
-                        registration={register("email")}
-                        error={errors.email?.message}
-                        handleFocus={() => setSaajanMessage("I remember you.")}
-                    />
-
-                    <FormField
-                        label="Password"
-                        type="password"
-                        placeholder="••••••••"
-                        data-testid="password-input"
-                        registration={register("password")}
-                        error={errors.password?.message}
-                        handleFocus={() =>
-                            setSaajanMessage("The one thing I cannot know for you.")
-                        }
-                    />
-
-                    <div className="card-actions mt-4">
-                        <button
-                            type="submit"
-                            name="login"
-                            disabled={isLoading}
-                            data-testid="login-submit-btn"
-                            className="btn btn-primary w-full shadow-lg"
-                        >
-                            {isLoading ? (
-                                <span className="loading loading-spinner loading-sm" />
-                            ) : (
-                                "Continue"
-                            )}
-                        </button>
-                    </div>
-                    <div className="divider text-neutral my-0">or</div>
-                    <div className="text-center text-sm font-medium text-neutral">
-                        New to <Logo type="inline" />?{" "}
-                        <button
-                            type="button"
-                            name="register"
-                            onClick={() => navigate(ROUTES.ONBOARD)}
-                            className="link link-primary"
-                        >
-                            Start here
-                        </button>.
-                    </div>
-                </form>
             </div>
-        </div>
+          )}
-    );
+
+          <FormField
+            label="Email"
+            type="email"
+            placeholder="f.kafka@wrongtrain.com"
+            data-testid="email-input"
+            registration={register("email")}
+            error={errors.email?.message}
+            handleFocus={() => setSaajanMessage("I remember you.")}
+          />
+
+          <FormField
+            label="Password"
+            type="password"
+            placeholder="••••••••"
+            data-testid="password-input"
+            registration={register("password")}
+            error={errors.password?.message}
+            handleFocus={() =>
+              setSaajanMessage("The one thing I cannot know for you.")
+            }
+          />
+
+          <div className="card-actions mt-4">
+            <button
+              type="submit"
+              name="login"
+              disabled={isLoading}
+              data-testid="login-submit-btn"
+              className="btn btn-primary w-full shadow-lg"
+            >
+              {isLoading ? (
+                <span className="loading loading-spinner loading-sm" />
+              ) : (
+                "Continue"
+              )}
+            </button>
+          </div>
+          <div className="divider text-neutral my-0">or</div>
+          <div className="text-center text-sm font-medium text-neutral">
+            New to <Logo type="inline" />?{" "}
+            <button
+              type="button"
+              name="register"
+              onClick={() => navigate(ROUTES.ONBOARD)}
+              className="link link-primary"
+            >
+              Start here
+            </button>
+            .
+          </div>
+        </form>
+      </div>
+    </div>
+  );
 }

frontend/src/pages/Register.tsx

@@ -14,170 +14,171 @@ import { ROUTES } from "../config/routes";
 import { CryptoUtils } from "../utils/crypto";
 
 const registerSchema = z
-    .object({
+  .object({
-        full_name: z.string().min(2, "Name must be at least 2 characters"),
+    full_name: z.string().min(2, "Name must be at least 2 characters"),
-        email: z.email("Please enter a valid email"),
+    email: z.email("Please enter a valid email"),
-        password: z.string().min(8, "Password must be at least 8 characters"),
+    password: z.string().min(8, "Password must be at least 8 characters"),
-        confirm_password: z.string(),
+    confirm_password: z.string(),
-    })
+  })
-    .refine((data) => data.password === data.confirm_password, {
+  .refine((data) => data.password === data.confirm_password, {
-        message: "Passwords don't match",
+    message: "Passwords don't match",
-        path: ["confirm_password"],
+    path: ["confirm_password"],
-    });
+  });
 
 type RegisterInputs = z.infer<typeof registerSchema>;
 
 export default function Register() {
-    const navigate = useNavigate();
+  const navigate = useNavigate();
-    const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
-    const [apiError, setApiError] = useState<string | null>(null);
+  const [apiError, setApiError] = useState<string | null>(null);
-    const [saajanMessage, setSaajanMessage] = useState<string>(
+  const [saajanMessage, setSaajanMessage] = useState<string>(
-        "I didn't think I'd be here either.\nAnd yet, here we are.",
+    "I didn't think I'd be here either.\nAnd yet, here we are.",
-    );
+  );
 
-    const {
+  const {
-        register,
+    register,
-        handleSubmit,
+    handleSubmit,
-        formState: { errors },
+    formState: { errors },
-    } = useForm<RegisterInputs>({
+  } = useForm<RegisterInputs>({
-        resolver: zodResolver(registerSchema),
+    resolver: zodResolver(registerSchema),
-    });
+  });
 
-    const onSubmit = async (data: RegisterInputs) => {
+  const onSubmit = async (data: RegisterInputs) => {
-        setSaajanMessage("Good. I'll remember that.");
+    setSaajanMessage("Good. I'll remember that.");
-        setIsLoading(true);
+    setIsLoading(true);
-        setApiError(null);
+    setApiError(null);
-        try {
+    try {
-            // we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db.
+      // we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db.
-            const { authHash } = await CryptoUtils.deriveKeyBundle(
+      const { authHash } = await CryptoUtils.deriveKeyBundle(
-                data.password,
+        data.password,
-                data.email,
+        data.email,
-            );
+      );
 
-            await publicApi.post(endpoints.REGISTER, {
+      await publicApi.post(endpoints.REGISTER, {
-                full_name: data.full_name,
+        full_name: data.full_name,
-                email: data.email,
+        email: data.email,
-                password: authHash,
+        password: authHash,
-            });
+      });
-            navigate(ROUTES.VERIFY_EMAIL, { replace: true });
+      navigate(ROUTES.VERIFY_EMAIL, { replace: true });
-        } catch (err) {
+    } catch (err) {
-            let message = "Registration failed. Please try again.";
+      let message = "Registration failed. Please try again.";
-            if (axios.isAxiosError(err)) {
+      if (axios.isAxiosError(err)) {
-                message = err.response?.data?.message || message;
+        message = err.response?.data?.message || message;
-            }
+      }
-            setApiError(message);
+      setApiError(message);
-        } finally {
+    } finally {
-            setIsLoading(false);
+      setIsLoading(false);
-        }
+    }
-    };
+  };
 
-    return (
+  return (
-        <div className="flex flex-col">
+    <div className="flex flex-col">
-            <Saajan message={saajanMessage} position="right" />
+      <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">
+      <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">
+        <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">
+          <div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
-                        Create a <Logo type="logo" scale={0.7} /> Account
+            Create a <Logo type="logo" scale={0.7} /> Account
-                    </div>
+          </div>
 
-                    {apiError && (
+          {apiError && (
-                        <div className="alert alert-error text-xs py-2 rounded-md">
+            <div className="alert alert-error text-xs py-2 rounded-md">
-                            <span>{apiError}</span>
+              <span>{apiError}</span>
-                        </div>
-                    )}
-
-                    <FormField
-                        label="Pen Name"
-                        placeholder="Word Smith"
-                        data-testid="pen-name-input"
-                        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@wrongtrain.com"
-                        data-testid="email-input"
-                        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="••••••••"
-                        data-testid="password-input"
-                        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="••••••••"
-                        data-testid="confirm-password-input"
-                        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"
-                            data-testid="register-submit-btn"
-                            className="btn btn-primary w-full shadow-lg"
-                        >
-                            {isLoading ? (
-                                <span className="loading loading-spinner loading-sm" />
-                            ) : (
-                                "Begin"
-                            )}
-                        </button>
-                    </div>
-                    <div className="divider text-neutral my-0">or</div>
-                    <div className="text-center text-sm font-medium text-neutral">
-                        Been here before?{" "}
-                        <button
-                            type="button"
-                            name="register"
-                            onClick={() => navigate(ROUTES.LOGIN)}
-                            className="link link-primary"
-                        >
-                            Continue where you left off
-                        </button>.
-                    </div>
-                </form>
             </div>
-        </div>
+          )}
-    );
+
+          <FormField
+            label="Pen Name"
+            placeholder="Word Smith"
+            data-testid="pen-name-input"
+            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@wrongtrain.com"
+            data-testid="email-input"
+            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="••••••••"
+            data-testid="password-input"
+            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="••••••••"
+            data-testid="confirm-password-input"
+            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"
+              data-testid="register-submit-btn"
+              className="btn btn-primary w-full shadow-lg"
+            >
+              {isLoading ? (
+                <span className="loading loading-spinner loading-sm" />
+              ) : (
+                "Begin"
+              )}
+            </button>
+          </div>
+          <div className="divider text-neutral my-0">or</div>
+          <div className="text-center text-sm font-medium text-neutral">
+            Been here before?{" "}
+            <button
+              type="button"
+              name="register"
+              onClick={() => navigate(ROUTES.LOGIN)}
+              className="link link-primary"
+            >
+              Continue where you left off
+            </button>
+            .
+          </div>
+        </form>
+      </div>
+    </div>
+  );
 }