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";
|
import { EnvelopeReveal } from "../reader/EnvelopeReveal";
|
||||||
|
|
||||||
export interface WelcomeLetterOverlayProps {
|
export interface WelcomeLetterOverlayProps {
|
||||||
onComplete: () => void;
|
onComplete: () => void;
|
||||||
userName: string;
|
userName: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function WelcomeLetterOverlay({
|
export function WelcomeLetterOverlay({
|
||||||
onComplete,
|
onComplete,
|
||||||
userName,
|
userName,
|
||||||
}: WelcomeLetterOverlayProps) {
|
}: WelcomeLetterOverlayProps) {
|
||||||
const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
|
const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
|
||||||
"SEALED",
|
"SEALED",
|
||||||
);
|
);
|
||||||
const canvasRef = useRef<CanvasTools>(null);
|
const canvasRef = useRef<CanvasTools>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (revealState === "REVEALED" && canvasRef.current) {
|
if (revealState === "REVEALED" && canvasRef.current) {
|
||||||
const welcomeContent = getWelcomeLetterContent(userName);
|
const welcomeContent = getWelcomeLetterContent(userName);
|
||||||
canvasRef.current.loadData(welcomeContent);
|
canvasRef.current.loadData(welcomeContent);
|
||||||
}
|
}
|
||||||
}, [revealState, userName]);
|
}, [revealState, userName]);
|
||||||
|
|
||||||
return (
|
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 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="fixed inset-0 bg-vig pointer-events-none z-0" />
|
||||||
|
|
||||||
<div className="w-full max-w-4xl z-10 flex flex-col items-center">
|
<div className="w-full max-w-4xl z-10 flex flex-col items-center">
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{revealState === "SEALED" && (
|
{revealState === "SEALED" && (
|
||||||
<motion.div
|
<motion.div
|
||||||
key="envelope"
|
key="envelope"
|
||||||
initial={{ scale: 0.5, opacity: 0 }}
|
initial={{ scale: 0.5, opacity: 0 }}
|
||||||
animate={{ scale: 0.8, opacity: 1 }}
|
animate={{ scale: 0.8, opacity: 1 }}
|
||||||
exit={{
|
exit={{
|
||||||
scale: 1,
|
scale: 1,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
transition: { duration: 0.5, ease: "easeOut" },
|
transition: { duration: 0.5, ease: "easeOut" },
|
||||||
}}
|
}}
|
||||||
transition={{ duration: 4, delay: 1 }}
|
transition={{ duration: 4, delay: 1 }}
|
||||||
>
|
>
|
||||||
<EnvelopeReveal
|
<EnvelopeReveal
|
||||||
recipient={userName}
|
recipient={userName}
|
||||||
date={formatDate(new Date())}
|
date={formatDate(new Date())}
|
||||||
onRevealComplete={() => setRevealState("REVEALED")}
|
onRevealComplete={() => setRevealState("REVEALED")}
|
||||||
ignite={false}
|
ignite={false}
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
<div
|
<div
|
||||||
className={`w-full space-y-8 py-12 ${revealState === "REVEALED" ? "block" : "hidden"}`}
|
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="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" />
|
<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 />
|
<ComposeCanvas ref={canvasRef} readOnly />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-center mt-12">
|
<div className="flex justify-center mt-12">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
data-testid="dismiss-welcome-letter-btn"
|
data-testid="dismiss-welcome-letter-btn"
|
||||||
onClick={onComplete}
|
onClick={onComplete}
|
||||||
className="btn btn-accent opacity-80 px-12 shadow-lg"
|
className="btn btn-accent opacity-80 px-12 shadow-lg"
|
||||||
>
|
>
|
||||||
I'll see you
|
I'll see you
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,96 +7,99 @@ import { endpoints, replacePathParams } from "../config/endpoints";
|
|||||||
import { ROUTES } from "../config/routes";
|
import { ROUTES } from "../config/routes";
|
||||||
|
|
||||||
export default function Activate() {
|
export default function Activate() {
|
||||||
const { uidb64, token } = useParams();
|
const { uidb64, token } = useParams();
|
||||||
const [status, setStatus] = useState<"loading" | "success" | "error">(
|
const [status, setStatus] = useState<"loading" | "success" | "error">(
|
||||||
"loading",
|
"loading",
|
||||||
);
|
);
|
||||||
const hasCalled = useRef(false);
|
const hasCalled = useRef(false);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!(uidb64 && token) || hasCalled.current) return;
|
if (!(uidb64 && token) || hasCalled.current) return;
|
||||||
hasCalled.current = true;
|
hasCalled.current = true;
|
||||||
|
|
||||||
const activateAccount = async () => {
|
const activateAccount = async () => {
|
||||||
try {
|
try {
|
||||||
const url = replacePathParams(endpoints.ACTIVATE, {
|
const url = replacePathParams(endpoints.ACTIVATE, {
|
||||||
uidb64,
|
uidb64,
|
||||||
token,
|
token,
|
||||||
});
|
});
|
||||||
await publicApi.get(url);
|
await publicApi.get(url);
|
||||||
setStatus("success");
|
setStatus("success");
|
||||||
} catch (_err) {
|
} catch (_err) {
|
||||||
setStatus("error");
|
setStatus("error");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
activateAccount();
|
activateAccount();
|
||||||
}, [uidb64, token]);
|
}, [uidb64, token]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="glass-card w-full max-w-sm p-8 text-center fade-zoom">
|
<div className="glass-card w-full max-w-sm p-8 text-center fade-zoom">
|
||||||
{status === "loading" && (
|
{status === "loading" && (
|
||||||
<div className="flex flex-col items-center gap-4 py-8">
|
<div className="flex flex-col items-center gap-4 py-8">
|
||||||
<span className="loading loading-spinner loading-lg text-primary" />
|
<span className="loading loading-spinner loading-lg text-primary" />
|
||||||
<p className="text-sm opacity-70">Activating your account...</p>
|
<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>
|
</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("../hooks/useLetters");
|
||||||
vi.mock("../components/drawer/WelcomeLetterOverlay", () => ({
|
vi.mock("../components/drawer/WelcomeLetterOverlay", () => ({
|
||||||
WelcomeLetterOverlay: ({ onComplete }: WelcomeLetterOverlayProps) => (
|
WelcomeLetterOverlay: ({ onComplete }: WelcomeLetterOverlayProps) => (
|
||||||
<div data-testid="welcome-letter-overlay">
|
<div data-testid="welcome-letter-overlay">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
data-testid="overlay-exit-button"
|
data-testid="overlay-exit-button"
|
||||||
onClick={onComplete}
|
onClick={onComplete}
|
||||||
>
|
>
|
||||||
I'll see you
|
I'll see you
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
describe("Drawer Page", () => {
|
describe("Drawer Page", () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
// Setup authenticated state for the test
|
// Setup authenticated state for the test
|
||||||
useAuthStore.setState({
|
useAuthStore.setState({
|
||||||
user: mockUser,
|
user: mockUser,
|
||||||
accessToken: "fake-token",
|
accessToken: "fake-token",
|
||||||
isInitializing: false,
|
isInitializing: false,
|
||||||
});
|
|
||||||
|
|
||||||
vi.mocked(useLetters).mockReturnValue({
|
|
||||||
drafts: [],
|
|
||||||
kept: [],
|
|
||||||
sent: [],
|
|
||||||
vault: [],
|
|
||||||
loading: false,
|
|
||||||
isAuthRequired: false,
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("renders the cabinet sections and empty state message", () => {
|
vi.mocked(useLetters).mockReturnValue({
|
||||||
render(
|
drafts: [],
|
||||||
<MemoryRouter>
|
kept: [],
|
||||||
<Drawer />
|
sent: [],
|
||||||
</MemoryRouter>,
|
vault: [],
|
||||||
);
|
loading: false,
|
||||||
|
isAuthRequired: false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
expect(screen.getByText(/Drafts/i)).toBeInTheDocument();
|
it("renders the cabinet sections and empty state message", () => {
|
||||||
expect(screen.getAllByText(/Kept/i).length).toBeGreaterThanOrEqual(1);
|
render(
|
||||||
expect(screen.getByText(/Vault/i)).toBeInTheDocument();
|
<MemoryRouter>
|
||||||
expect(screen.getByText(/This drawer remains silent/i)).toBeInTheDocument();
|
<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", () => {
|
render(
|
||||||
vi.mocked(useLetters).mockReturnValue({
|
<MemoryRouter>
|
||||||
drafts: [],
|
<Drawer />
|
||||||
kept: [],
|
</MemoryRouter>,
|
||||||
sent: [],
|
);
|
||||||
vault: [],
|
|
||||||
loading: true,
|
|
||||||
isAuthRequired: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
render(
|
expect(screen.getByText(/Opening your cabinet/i)).toBeInTheDocument();
|
||||||
<MemoryRouter>
|
});
|
||||||
<Drawer />
|
|
||||||
</MemoryRouter>,
|
|
||||||
);
|
|
||||||
|
|
||||||
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", () => {
|
render(
|
||||||
vi.mocked(useLetters).mockReturnValue({
|
<MemoryRouter>
|
||||||
drafts: [],
|
<Drawer />
|
||||||
kept: [],
|
</MemoryRouter>,
|
||||||
sent: [],
|
);
|
||||||
vault: [],
|
|
||||||
loading: false,
|
|
||||||
isAuthRequired: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
render(
|
expect(screen.getByText(/You've been away a while./i)).toBeInTheDocument();
|
||||||
<MemoryRouter>
|
expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
|
||||||
<Drawer />
|
});
|
||||||
</MemoryRouter>,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(screen.getByText(/You've been away a while./i)).toBeInTheDocument();
|
it("renders the welcome letter when firstTime state is present", () => {
|
||||||
expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
|
render(
|
||||||
});
|
<MemoryRouter
|
||||||
|
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
|
||||||
|
>
|
||||||
|
<Drawer />
|
||||||
|
</MemoryRouter>,
|
||||||
|
);
|
||||||
|
|
||||||
it("renders the welcome letter when firstTime state is present", () => {
|
expect(screen.getByTestId("welcome-letter-overlay")).toBeInTheDocument();
|
||||||
render(
|
});
|
||||||
<MemoryRouter
|
|
||||||
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
|
|
||||||
>
|
|
||||||
<Drawer />
|
|
||||||
</MemoryRouter>,
|
|
||||||
);
|
|
||||||
|
|
||||||
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", () => {
|
const completeButton = screen.getByTestId("overlay-exit-button");
|
||||||
render(
|
fireEvent.click(completeButton);
|
||||||
<MemoryRouter
|
|
||||||
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
|
|
||||||
>
|
|
||||||
<Drawer />
|
|
||||||
</MemoryRouter>,
|
|
||||||
);
|
|
||||||
|
|
||||||
const completeButton = screen.getByTestId("overlay-exit-button");
|
expect(
|
||||||
fireEvent.click(completeButton);
|
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";
|
import { CryptoUtils } from "../utils/crypto";
|
||||||
|
|
||||||
const registerSchema = z
|
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>;
|
type RegisterInputs = z.infer<typeof registerSchema>;
|
||||||
|
|
||||||
export default function Register() {
|
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 /> Account
|
Create a <Logo /> 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" />
|
|
||||||
) : (
|
|
||||||
"Register"
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</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