refactor: whitespace fixes
This commit is contained in:
me
@@ -6,73 +6,73 @@ import { type CanvasTools, ComposeCanvas } from "../editor/ComposeCanvas";
|
||||
import { EnvelopeReveal } from "../reader/EnvelopeReveal";
|
||||
|
||||
export interface WelcomeLetterOverlayProps {
|
||||
onComplete: () => void;
|
||||
userName: string;
|
||||
onComplete: () => void;
|
||||
userName: string;
|
||||
}
|
||||
|
||||
export function WelcomeLetterOverlay({
|
||||
onComplete,
|
||||
userName,
|
||||
onComplete,
|
||||
userName,
|
||||
}: WelcomeLetterOverlayProps) {
|
||||
const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
|
||||
"SEALED",
|
||||
);
|
||||
const canvasRef = useRef<CanvasTools>(null);
|
||||
const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
|
||||
"SEALED",
|
||||
);
|
||||
const canvasRef = useRef<CanvasTools>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (revealState === "REVEALED" && canvasRef.current) {
|
||||
const welcomeContent = getWelcomeLetterContent(userName);
|
||||
canvasRef.current.loadData(welcomeContent);
|
||||
}
|
||||
}, [revealState, userName]);
|
||||
useEffect(() => {
|
||||
if (revealState === "REVEALED" && canvasRef.current) {
|
||||
const welcomeContent = getWelcomeLetterContent(userName);
|
||||
canvasRef.current.loadData(welcomeContent);
|
||||
}
|
||||
}, [revealState, userName]);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-30 backdrop-blur-3xl flex flex-col items-center justify-center p-4 md:p-8 overflow-x-hidden">
|
||||
<div className="fixed inset-0 bg-vig pointer-events-none z-0" />
|
||||
return (
|
||||
<div className="fixed inset-0 z-30 backdrop-blur-3xl flex flex-col items-center justify-center p-4 md:p-8 overflow-x-hidden">
|
||||
<div className="fixed inset-0 bg-vig pointer-events-none z-0" />
|
||||
|
||||
<div className="w-full max-w-4xl z-10 flex flex-col items-center">
|
||||
<AnimatePresence mode="wait">
|
||||
{revealState === "SEALED" && (
|
||||
<motion.div
|
||||
key="envelope"
|
||||
initial={{ scale: 0.5, opacity: 0 }}
|
||||
animate={{ scale: 0.8, opacity: 1 }}
|
||||
exit={{
|
||||
scale: 1,
|
||||
opacity: 0,
|
||||
transition: { duration: 0.5, ease: "easeOut" },
|
||||
}}
|
||||
transition={{ duration: 4, delay: 1 }}
|
||||
>
|
||||
<EnvelopeReveal
|
||||
recipient={userName}
|
||||
date={formatDate(new Date())}
|
||||
onRevealComplete={() => setRevealState("REVEALED")}
|
||||
ignite={false}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<div
|
||||
className={`w-full space-y-8 py-12 ${revealState === "REVEALED" ? "block" : "hidden"}`}
|
||||
>
|
||||
<div className="bg-paper shadow-warm rounded-sm overflow-hidden mx-auto max-w-180">
|
||||
<div className="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
|
||||
<ComposeCanvas ref={canvasRef} readOnly />
|
||||
</div>
|
||||
<div className="w-full max-w-4xl z-10 flex flex-col items-center">
|
||||
<AnimatePresence mode="wait">
|
||||
{revealState === "SEALED" && (
|
||||
<motion.div
|
||||
key="envelope"
|
||||
initial={{ scale: 0.5, opacity: 0 }}
|
||||
animate={{ scale: 0.8, opacity: 1 }}
|
||||
exit={{
|
||||
scale: 1,
|
||||
opacity: 0,
|
||||
transition: { duration: 0.5, ease: "easeOut" },
|
||||
}}
|
||||
transition={{ duration: 4, delay: 1 }}
|
||||
>
|
||||
<EnvelopeReveal
|
||||
recipient={userName}
|
||||
date={formatDate(new Date())}
|
||||
onRevealComplete={() => setRevealState("REVEALED")}
|
||||
ignite={false}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<div
|
||||
className={`w-full space-y-8 py-12 ${revealState === "REVEALED" ? "block" : "hidden"}`}
|
||||
>
|
||||
<div className="bg-paper shadow-warm rounded-sm overflow-hidden mx-auto max-w-180">
|
||||
<div className="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
|
||||
<ComposeCanvas ref={canvasRef} readOnly />
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-12">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="dismiss-welcome-letter-btn"
|
||||
onClick={onComplete}
|
||||
className="btn btn-accent opacity-80 px-12 shadow-lg"
|
||||
>
|
||||
I'll see you
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center mt-12">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="dismiss-welcome-letter-btn"
|
||||
onClick={onComplete}
|
||||
className="btn btn-accent opacity-80 px-12 shadow-lg"
|
||||
>
|
||||
I'll see you
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,96 +7,99 @@ import { endpoints, replacePathParams } from "../config/endpoints";
|
||||
import { ROUTES } from "../config/routes";
|
||||
|
||||
export default function Activate() {
|
||||
const { uidb64, token } = useParams();
|
||||
const [status, setStatus] = useState<"loading" | "success" | "error">(
|
||||
"loading",
|
||||
);
|
||||
const hasCalled = useRef(false);
|
||||
const navigate = useNavigate();
|
||||
const { uidb64, token } = useParams();
|
||||
const [status, setStatus] = useState<"loading" | "success" | "error">(
|
||||
"loading",
|
||||
);
|
||||
const hasCalled = useRef(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
if (!(uidb64 && token) || hasCalled.current) return;
|
||||
hasCalled.current = true;
|
||||
useEffect(() => {
|
||||
if (!(uidb64 && token) || hasCalled.current) return;
|
||||
hasCalled.current = true;
|
||||
|
||||
const activateAccount = async () => {
|
||||
try {
|
||||
const url = replacePathParams(endpoints.ACTIVATE, {
|
||||
uidb64,
|
||||
token,
|
||||
});
|
||||
await publicApi.get(url);
|
||||
setStatus("success");
|
||||
} catch (_err) {
|
||||
setStatus("error");
|
||||
}
|
||||
};
|
||||
const activateAccount = async () => {
|
||||
try {
|
||||
const url = replacePathParams(endpoints.ACTIVATE, {
|
||||
uidb64,
|
||||
token,
|
||||
});
|
||||
await publicApi.get(url);
|
||||
setStatus("success");
|
||||
} catch (_err) {
|
||||
setStatus("error");
|
||||
}
|
||||
};
|
||||
|
||||
activateAccount();
|
||||
}, [uidb64, token]);
|
||||
activateAccount();
|
||||
}, [uidb64, token]);
|
||||
|
||||
return (
|
||||
<div className="glass-card w-full max-w-sm p-8 text-center fade-zoom">
|
||||
{status === "loading" && (
|
||||
<div className="flex flex-col items-center gap-4 py-8">
|
||||
<span className="loading loading-spinner loading-lg text-primary" />
|
||||
<p className="text-sm opacity-70">Activating your account...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status === "success" && (
|
||||
<div className="flex flex-col items-center gap-6 duration-500">
|
||||
<div className="bg-success/10 p-4 rounded-full">
|
||||
<CheckCircleIcon
|
||||
size={64}
|
||||
weight="duotone"
|
||||
className="text-success"
|
||||
/>
|
||||
</div>
|
||||
<h2 data-testid="activation-success-header" className="font-display text-xl text-success">
|
||||
You're in.
|
||||
</h2>
|
||||
<p className="opacity-70 leading-relaxed">
|
||||
Welcome to <Logo scale={1} />
|
||||
<br />
|
||||
Just one more step and you can start writing timeless letters.
|
||||
</p>
|
||||
<div className="divider opacity-10 my-0"></div>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="start-writing-btn"
|
||||
className="btn btn-primary w-full shadow-lg"
|
||||
onClick={() =>
|
||||
navigate(ROUTES.LOGIN, {
|
||||
state: { firstTime: true },
|
||||
replace: true,
|
||||
})
|
||||
}
|
||||
>
|
||||
I'm ready
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status === "error" && (
|
||||
<div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
|
||||
<div className="bg-error/10 p-4 rounded-full">
|
||||
<XCircleIcon size={64} weight="duotone" className="text-error" />
|
||||
</div>
|
||||
<h2 className="font-display text-xl text-error">Activation Failed</h2>
|
||||
<p className="opacity-70 leading-relaxed">
|
||||
The link might be expired or already used. Please try registering
|
||||
again.
|
||||
</p>
|
||||
<div className="divider opacity-10 my-0"></div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost w-full"
|
||||
onClick={() => navigate(ROUTES.ONBOARD)}
|
||||
>
|
||||
Register Again
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
return (
|
||||
<div className="glass-card w-full max-w-sm p-8 text-center fade-zoom">
|
||||
{status === "loading" && (
|
||||
<div className="flex flex-col items-center gap-4 py-8">
|
||||
<span className="loading loading-spinner loading-lg text-primary" />
|
||||
<p className="text-sm opacity-70">Activating your account...</p>
|
||||
</div>
|
||||
);
|
||||
)}
|
||||
|
||||
{status === "success" && (
|
||||
<div className="flex flex-col items-center gap-6 duration-500">
|
||||
<div className="bg-success/10 p-4 rounded-full">
|
||||
<CheckCircleIcon
|
||||
size={64}
|
||||
weight="duotone"
|
||||
className="text-success"
|
||||
/>
|
||||
</div>
|
||||
<h2
|
||||
data-testid="activation-success-header"
|
||||
className="font-display text-xl text-success"
|
||||
>
|
||||
You're in.
|
||||
</h2>
|
||||
<p className="opacity-70 leading-relaxed">
|
||||
Welcome to <Logo scale={1} />
|
||||
<br />
|
||||
Just one more step and you can start writing timeless letters.
|
||||
</p>
|
||||
<div className="divider opacity-10 my-0"></div>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="start-writing-btn"
|
||||
className="btn btn-primary w-full shadow-lg"
|
||||
onClick={() =>
|
||||
navigate(ROUTES.LOGIN, {
|
||||
state: { firstTime: true },
|
||||
replace: true,
|
||||
})
|
||||
}
|
||||
>
|
||||
I'm ready
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status === "error" && (
|
||||
<div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
|
||||
<div className="bg-error/10 p-4 rounded-full">
|
||||
<XCircleIcon size={64} weight="duotone" className="text-error" />
|
||||
</div>
|
||||
<h2 className="font-display text-xl text-error">Activation Failed</h2>
|
||||
<p className="opacity-70 leading-relaxed">
|
||||
The link might be expired or already used. Please try registering
|
||||
again.
|
||||
</p>
|
||||
<div className="divider opacity-10 my-0"></div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost w-full"
|
||||
onClick={() => navigate(ROUTES.ONBOARD)}
|
||||
>
|
||||
Register Again
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,116 +9,116 @@ import Drawer from "./Drawer";
|
||||
|
||||
vi.mock("../hooks/useLetters");
|
||||
vi.mock("../components/drawer/WelcomeLetterOverlay", () => ({
|
||||
WelcomeLetterOverlay: ({ onComplete }: WelcomeLetterOverlayProps) => (
|
||||
<div data-testid="welcome-letter-overlay">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="overlay-exit-button"
|
||||
onClick={onComplete}
|
||||
>
|
||||
I'll see you
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
WelcomeLetterOverlay: ({ onComplete }: WelcomeLetterOverlayProps) => (
|
||||
<div data-testid="welcome-letter-overlay">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="overlay-exit-button"
|
||||
onClick={onComplete}
|
||||
>
|
||||
I'll see you
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
describe("Drawer Page", () => {
|
||||
beforeEach(() => {
|
||||
// Setup authenticated state for the test
|
||||
useAuthStore.setState({
|
||||
user: mockUser,
|
||||
accessToken: "fake-token",
|
||||
isInitializing: false,
|
||||
});
|
||||
|
||||
vi.mocked(useLetters).mockReturnValue({
|
||||
drafts: [],
|
||||
kept: [],
|
||||
sent: [],
|
||||
vault: [],
|
||||
loading: false,
|
||||
isAuthRequired: false,
|
||||
});
|
||||
beforeEach(() => {
|
||||
// Setup authenticated state for the test
|
||||
useAuthStore.setState({
|
||||
user: mockUser,
|
||||
accessToken: "fake-token",
|
||||
isInitializing: false,
|
||||
});
|
||||
|
||||
it("renders the cabinet sections and empty state message", () => {
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<Drawer />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
vi.mocked(useLetters).mockReturnValue({
|
||||
drafts: [],
|
||||
kept: [],
|
||||
sent: [],
|
||||
vault: [],
|
||||
loading: false,
|
||||
isAuthRequired: false,
|
||||
});
|
||||
});
|
||||
|
||||
expect(screen.getByText(/Drafts/i)).toBeInTheDocument();
|
||||
expect(screen.getAllByText(/Kept/i).length).toBeGreaterThanOrEqual(1);
|
||||
expect(screen.getByText(/Vault/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/This drawer remains silent/i)).toBeInTheDocument();
|
||||
it("renders the cabinet sections and empty state message", () => {
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<Drawer />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
expect(screen.getByText(/Drafts/i)).toBeInTheDocument();
|
||||
expect(screen.getAllByText(/Kept/i).length).toBeGreaterThanOrEqual(1);
|
||||
expect(screen.getByText(/Vault/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/This drawer remains silent/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the loading state", () => {
|
||||
vi.mocked(useLetters).mockReturnValue({
|
||||
drafts: [],
|
||||
kept: [],
|
||||
sent: [],
|
||||
vault: [],
|
||||
loading: true,
|
||||
isAuthRequired: false,
|
||||
});
|
||||
|
||||
it("renders the loading state", () => {
|
||||
vi.mocked(useLetters).mockReturnValue({
|
||||
drafts: [],
|
||||
kept: [],
|
||||
sent: [],
|
||||
vault: [],
|
||||
loading: true,
|
||||
isAuthRequired: false,
|
||||
});
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<Drawer />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<Drawer />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
expect(screen.getByText(/Opening your cabinet/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
expect(screen.getByText(/Opening your cabinet/i)).toBeInTheDocument();
|
||||
it("renders the authentication required modal when api requires auth", () => {
|
||||
vi.mocked(useLetters).mockReturnValue({
|
||||
drafts: [],
|
||||
kept: [],
|
||||
sent: [],
|
||||
vault: [],
|
||||
loading: false,
|
||||
isAuthRequired: true,
|
||||
});
|
||||
|
||||
it("renders the authentication required modal when api requires auth", () => {
|
||||
vi.mocked(useLetters).mockReturnValue({
|
||||
drafts: [],
|
||||
kept: [],
|
||||
sent: [],
|
||||
vault: [],
|
||||
loading: false,
|
||||
isAuthRequired: true,
|
||||
});
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<Drawer />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<Drawer />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
expect(screen.getByText(/You've been away a while./i)).toBeInTheDocument();
|
||||
expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
expect(screen.getByText(/You've been away a while./i)).toBeInTheDocument();
|
||||
expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
|
||||
});
|
||||
it("renders the welcome letter when firstTime state is present", () => {
|
||||
render(
|
||||
<MemoryRouter
|
||||
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
|
||||
>
|
||||
<Drawer />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
it("renders the welcome letter when firstTime state is present", () => {
|
||||
render(
|
||||
<MemoryRouter
|
||||
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
|
||||
>
|
||||
<Drawer />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
expect(screen.getByTestId("welcome-letter-overlay")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
expect(screen.getByTestId("welcome-letter-overlay")).toBeInTheDocument();
|
||||
});
|
||||
it("renders the drawer content when the letter is closed", () => {
|
||||
render(
|
||||
<MemoryRouter
|
||||
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
|
||||
>
|
||||
<Drawer />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
it("renders the drawer content when the letter is closed", () => {
|
||||
render(
|
||||
<MemoryRouter
|
||||
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
|
||||
>
|
||||
<Drawer />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
const completeButton = screen.getByTestId("overlay-exit-button");
|
||||
fireEvent.click(completeButton);
|
||||
|
||||
const completeButton = screen.getByTestId("overlay-exit-button");
|
||||
fireEvent.click(completeButton);
|
||||
|
||||
expect(
|
||||
screen.queryByTestId("welcome-letter-overlay"),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
expect(
|
||||
screen.queryByTestId("welcome-letter-overlay"),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
+144
-144
@@ -14,158 +14,158 @@ 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 /> 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 /> 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" />
|
||||
) : (
|
||||
"Register"
|
||||
)}
|
||||
</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" />
|
||||
) : (
|
||||
"Register"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user