test: replace role texts by testids
This commit is contained in:
me
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -1,43 +1,44 @@
|
||||
import type { UseFormRegisterReturn } from "react-hook-form";
|
||||
|
||||
interface FormFieldProps {
|
||||
label: string;
|
||||
type?: string;
|
||||
placeholder?: string;
|
||||
registration: UseFormRegisterReturn;
|
||||
error?: string;
|
||||
handleFocus?: () => void;
|
||||
"data-testid"?: string;
|
||||
label: string;
|
||||
type?: string;
|
||||
placeholder?: string;
|
||||
registration: UseFormRegisterReturn;
|
||||
error?: string;
|
||||
handleFocus?: () => void;
|
||||
"data-testid"?: string;
|
||||
}
|
||||
|
||||
export default function FormField({
|
||||
label,
|
||||
type = "text",
|
||||
placeholder,
|
||||
registration,
|
||||
error,
|
||||
handleFocus,
|
||||
"data-testid": testId,
|
||||
label,
|
||||
type = "text",
|
||||
placeholder,
|
||||
registration,
|
||||
error,
|
||||
handleFocus,
|
||||
"data-testid": testId,
|
||||
}: FormFieldProps) {
|
||||
return (
|
||||
<div className="form-control">
|
||||
<label
|
||||
htmlFor={registration.name}
|
||||
className="field-label font-display text-neutral-content/80 font-medium"
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
{...registration}
|
||||
id={registration.name}
|
||||
data-testid={testId}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
className={`input input-bordered focus:input-primary ${error ? "input-error" : ""
|
||||
}`}
|
||||
onFocus={handleFocus}
|
||||
/>
|
||||
{error && <p className="text-error">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="form-control">
|
||||
<label
|
||||
htmlFor={registration.name}
|
||||
className="field-label font-display text-neutral-content/80 font-medium"
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
{...registration}
|
||||
id={registration.name}
|
||||
data-testid={testId}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
className={`input input-bordered focus:input-primary ${
|
||||
error ? "input-error" : ""
|
||||
}`}
|
||||
onFocus={handleFocus}
|
||||
/>
|
||||
{error && <p className="text-error">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,42 +3,42 @@ import type { ReactNode } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose?: () => void;
|
||||
children: ReactNode;
|
||||
"data-testid"?: string;
|
||||
isOpen: boolean;
|
||||
onClose?: () => void;
|
||||
children: ReactNode;
|
||||
"data-testid"?: string;
|
||||
}
|
||||
|
||||
export function Modal({
|
||||
isOpen,
|
||||
onClose,
|
||||
children,
|
||||
"data-testid": testId,
|
||||
isOpen,
|
||||
onClose,
|
||||
children,
|
||||
"data-testid": testId,
|
||||
}: ModalProps) {
|
||||
if (!isOpen) return null;
|
||||
// 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.
|
||||
const mainContainer = document.querySelector("main") || document.body;
|
||||
return createPortal(
|
||||
<div
|
||||
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')]"
|
||||
>
|
||||
<div className="modal-box border border-neutral/60 relative bg-base-100/60 flex flex-col items-center text-center gap-6">
|
||||
{onClose && (
|
||||
<button
|
||||
type="button"
|
||||
data-testid="modal-close-btn"
|
||||
className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
>
|
||||
<XCircleIcon size={18} weight="bold" />
|
||||
</button>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
</div>,
|
||||
mainContainer,
|
||||
);
|
||||
if (!isOpen) return null;
|
||||
// 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.
|
||||
const mainContainer = document.querySelector("main") || document.body;
|
||||
return createPortal(
|
||||
<div
|
||||
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')]"
|
||||
>
|
||||
<div className="modal-box border border-neutral/60 relative bg-base-100/60 flex flex-col items-center text-center gap-6">
|
||||
{onClose && (
|
||||
<button
|
||||
type="button"
|
||||
data-testid="modal-close-btn"
|
||||
className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
>
|
||||
<XCircleIcon size={18} weight="bold" />
|
||||
</button>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
</div>,
|
||||
mainContainer,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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", () => {
|
||||
|
||||
@@ -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(
|
||||
'button[form="vault-form"]',
|
||||
);
|
||||
if (!confirmVaultBtn) throw new Error("Confirm vault button not found");
|
||||
const confirmVaultBtn = screen.getByTestId("vault-confirm-btn");
|
||||
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 = toolbar?.querySelector(".btn-primary");
|
||||
if (!sealBtn) throw new Error("Seal button not found");
|
||||
const sealBtn = screen.getByTestId("seal-trigger-btn");
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -27,9 +27,9 @@ describe("Login Page", () => {
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
await userEvent.type(screen.getByLabelText(/email/i), "test@example.com");
|
||||
await userEvent.type(screen.getByLabelText(/password/i), "password123");
|
||||
await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
|
||||
await userEvent.type(screen.getByTestId("email-input"), "test@example.com");
|
||||
await userEvent.type(screen.getByTestId("password-input"), "password123");
|
||||
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.getByLabelText(/password/i), "password123");
|
||||
await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
|
||||
await userEvent.type(screen.getByTestId("email-input"), "test@example.com");
|
||||
await userEvent.type(screen.getByTestId("password-input"), "password123");
|
||||
await userEvent.click(screen.getByTestId("login-submit-btn"));
|
||||
|
||||
const expectedTestId =
|
||||
nextRoute.toLowerCase() === "drawer" ? "drawer-page" : "reader-page";
|
||||
|
||||
+117
-116
@@ -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"),
|
||||
password: z.string().min(1, "Password is required"),
|
||||
email: z.email("Please enter a valid email"),
|
||||
password: z.string().min(1, "Password is required"),
|
||||
});
|
||||
|
||||
type LoginInputs = z.infer<typeof loginSchema>;
|
||||
|
||||
export default function Login() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [apiError, setApiError] = useState<string | null>(null);
|
||||
const { setAuthStore } = useAuth();
|
||||
const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime);
|
||||
const [saajanMessage, setSaajanMessage] = useState<string>(
|
||||
"I was wondering when you'd return.",
|
||||
);
|
||||
const nextRoute = location.state?.redirectUrl || ROUTES.DRAWER;
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [apiError, setApiError] = useState<string | null>(null);
|
||||
const { setAuthStore } = useAuth();
|
||||
const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime);
|
||||
const [saajanMessage, setSaajanMessage] = useState<string>(
|
||||
"I was wondering when you'd return.",
|
||||
);
|
||||
const nextRoute = location.state?.redirectUrl || ROUTES.DRAWER;
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<LoginInputs>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
});
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<LoginInputs>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
});
|
||||
|
||||
const onSubmit = async (data: LoginInputs) => {
|
||||
setIsLoading(true);
|
||||
setApiError(null);
|
||||
try {
|
||||
// client side key derivation for e2e encryption
|
||||
const { masterKey, authHash } = await CryptoUtils.deriveKeyBundle(
|
||||
data.password,
|
||||
data.email,
|
||||
);
|
||||
const onSubmit = async (data: LoginInputs) => {
|
||||
setIsLoading(true);
|
||||
setApiError(null);
|
||||
try {
|
||||
// client side key derivation for e2e encryption
|
||||
const { masterKey, authHash } = await CryptoUtils.deriveKeyBundle(
|
||||
data.password,
|
||||
data.email,
|
||||
);
|
||||
|
||||
// send just the authHash as the password to the server
|
||||
const { data: authData } = await publicApi.post(endpoints.LOGIN, {
|
||||
email: data.email,
|
||||
password: authHash,
|
||||
});
|
||||
// send just the authHash as the password to the server
|
||||
const { data: authData } = await publicApi.post(endpoints.LOGIN, {
|
||||
email: data.email,
|
||||
password: authHash,
|
||||
});
|
||||
|
||||
const { data: userData } = await api.get(endpoints.ME, {
|
||||
headers: { Authorization: `Bearer ${authData.access}` },
|
||||
});
|
||||
const { data: userData } = await api.get(endpoints.ME, {
|
||||
headers: { Authorization: `Bearer ${authData.access}` },
|
||||
});
|
||||
|
||||
await setAuthStore(authData.access, userData, masterKey);
|
||||
await setAuthStore(authData.access, userData, masterKey);
|
||||
|
||||
navigate(nextRoute, { replace: true, state: location.state });
|
||||
} catch (err) {
|
||||
let message =
|
||||
"Sorry, we're experiencing technical issues.\nPlease try again later.";
|
||||
if (axios.isAxiosError(err) && err.response?.status !== 500) {
|
||||
message = err.response?.data?.detail || err.response?.data?.message;
|
||||
}
|
||||
setApiError(message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
navigate(nextRoute, { replace: true, state: location.state });
|
||||
} catch (err) {
|
||||
let message =
|
||||
"Sorry, we're experiencing technical issues.\nPlease try again later.";
|
||||
if (axios.isAxiosError(err) && err.response?.status !== 500) {
|
||||
message = err.response?.data?.detail || err.response?.data?.message;
|
||||
}
|
||||
setApiError(message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
{!showWelcome && <Saajan message={saajanMessage} position="top" />}
|
||||
{showWelcome && <WelcomeModal setShowWelcome={setShowWelcome} />}
|
||||
<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">
|
||||
<h1 className="flex items-center font-display text-2xl justify-center text-primary/80 tracking-tight">
|
||||
Enter <Logo type="logo" scale={0.7} /> Archive
|
||||
</h1>
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
{!showWelcome && <Saajan message={saajanMessage} position="top" />}
|
||||
{showWelcome && <WelcomeModal setShowWelcome={setShowWelcome} />}
|
||||
<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">
|
||||
<h1 className="flex items-center font-display text-2xl justify-center text-primary/80 tracking-tight">
|
||||
Enter <Logo type="logo" scale={0.7} /> Archive
|
||||
</h1>
|
||||
|
||||
{apiError && (
|
||||
<div className="alert alert-error text-xs py-2 rounded-md">
|
||||
<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>
|
||||
{apiError && (
|
||||
<div className="alert alert-error text-xs py-2 rounded-md">
|
||||
<span data-testid="login-error-message">{apiError}</span>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
+157
-156
@@ -14,170 +14,171 @@ 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"],
|
||||
});
|
||||
.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 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 {
|
||||
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,
|
||||
);
|
||||
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);
|
||||
}
|
||||
};
|
||||
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 type="logo" scale={0.7} /> Account
|
||||
</div>
|
||||
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 type="logo" scale={0.7} /> 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"
|
||||
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>
|
||||
{apiError && (
|
||||
<div className="alert alert-error text-xs py-2 rounded-md">
|
||||
<span>{apiError}</span>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user