@evenicanpm/storefront-core 2.4.0 → 2.4.2

package/src/pages/auth/auth-activate-page.tsx

@@ -0,0 +1,509 @@
+"use client";
+
+import AuthForm from "@evenicanpm/storefront-core/src/pages/auth/compound/auth-form";
+import type { OtpMeta } from "@evenicanpm/storefront-core/src/pages/auth/lib";
+import { friendlyError } from "@evenicanpm/storefront-core/src/pages/auth/lib";
+import {
+	Box,
+	Button,
+	CircularProgress,
+	Divider,
+	TextField,
+	Typography,
+} from "@mui/material";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import {
+	type ChangeEvent,
+	createContext,
+	type FormEvent,
+	type ReactNode,
+	useContext,
+	useMemo,
+	useState,
+} from "react";
+
+type Step = "details" | "otp" | "activating";
+
+type ActivateContextValue = {
+	t: ReturnType<typeof useTranslations>;
+	tCommon: ReturnType<typeof useTranslations>;
+	tErrors: ReturnType<typeof useTranslations>;
+	step: Step;
+	error: string | null;
+	email: string;
+	firstName: string;
+	lastName: string;
+	password: string;
+	confirmPassword: string;
+	detailsLoading: boolean;
+	otp: string;
+	otpMeta: OtpMeta | null;
+	otpLoading: boolean;
+	passwordMismatch: boolean;
+	setStep: (step: Step) => void;
+	setError: (message: string | null) => void;
+	setEmail: (value: string) => void;
+	setFirstName: (value: string) => void;
+	setLastName: (value: string) => void;
+	setPassword: (value: string) => void;
+	setConfirmPassword: (value: string) => void;
+	setOtp: (value: string) => void;
+	handleStart: (event: FormEvent<HTMLFormElement>) => Promise<void>;
+	handleOtpSubmit: (event: FormEvent<HTMLFormElement>) => Promise<void>;
+};
+
+const AuthActivatePageContext = createContext<ActivateContextValue | null>(
+	null,
+);
+
+function getStringValue(value: unknown): string {
+	return typeof value === "string" ? value : "";
+}
+
+const useAuthActivatePage = () => {
+	const context = useContext(AuthActivatePageContext);
+	if (!context) {
+		throw new Error(
+			"AuthActivatePage compound components must be used within AuthActivatePage",
+		);
+	}
+	return context;
+};
+
+function AuthActivateHeader() {
+	const { t, tCommon, step, otpMeta } = useAuthActivatePage();
+
+	if (step === "activating") {
+		return null;
+	}
+
+	return (
+		<>
+			<Typography variant="h5" fontWeight={700} gutterBottom>
+				{t("title")}
+			</Typography>
+			<Typography variant="body2" color="text.secondary" mb={3}>
+				{step === "details"
+					? t("subtitleDetails")
+					: t("subtitleOtp", {
+							codeLength: otpMeta?.code_length ?? 8,
+							target: otpMeta?.challenge_target_label || tCommon("yourEmail"),
+						})}
+			</Typography>
+			<Divider sx={{ mb: 3 }} />
+		</>
+	);
+}
+
+function AuthActivateError() {
+	const { error, step } = useAuthActivatePage();
+
+	if (step === "activating") {
+		return null;
+	}
+
+	return <AuthForm.Error message={error} />;
+}
+
+function AuthActivateDetailsForm() {
+	const {
+		t,
+		tCommon,
+		step,
+		firstName,
+		lastName,
+		email,
+		password,
+		confirmPassword,
+		detailsLoading,
+		passwordMismatch,
+		setFirstName,
+		setLastName,
+		setEmail,
+		setPassword,
+		setConfirmPassword,
+		handleStart,
+	} = useAuthActivatePage();
+
+	if (step !== "details") {
+		return null;
+	}
+
+	return (
+		<AuthForm onSubmit={handleStart}>
+			<TextField
+				label={t("firstNameLabel")}
+				value={firstName}
+				onChange={(
+					event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+				) => setFirstName(event.target.value)}
+				fullWidth
+				required
+				autoComplete="given-name"
+				autoFocus
+				sx={{ mb: 2 }}
+				disabled={detailsLoading}
+			/>
+			<TextField
+				label={t("lastNameLabel")}
+				value={lastName}
+				onChange={(
+					event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+				) => setLastName(event.target.value)}
+				fullWidth
+				required
+				autoComplete="family-name"
+				sx={{ mb: 2 }}
+				disabled={detailsLoading}
+			/>
+			<TextField
+				label={t("emailLabel")}
+				type="email"
+				value={email}
+				onChange={(
+					event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+				) => setEmail(event.target.value)}
+				fullWidth
+				required
+				autoComplete="email"
+				sx={{ mb: 2 }}
+				disabled={detailsLoading}
+			/>
+			<AuthForm.PasswordFields
+				password={password}
+				confirmPassword={confirmPassword}
+				onPasswordChange={setPassword}
+				onConfirmChange={setConfirmPassword}
+				disabled={detailsLoading}
+				autoFocus={false}
+				label={tCommon("passwordLabel")}
+				confirmLabel={tCommon("confirmPasswordLabel")}
+				mismatchHelperText={tCommon("passwordsDoNotMatch")}
+			/>
+			<AuthForm.SubmitButton
+				label={t("continue")}
+				loading={detailsLoading}
+				disabled={
+					!firstName.trim() ||
+					!lastName.trim() ||
+					!email ||
+					!password ||
+					!confirmPassword ||
+					passwordMismatch
+				}
+			/>
+		</AuthForm>
+	);
+}
+
+function AuthActivateOtpForm() {
+	const {
+		t,
+		step,
+		otp,
+		otpMeta,
+		otpLoading,
+		setStep,
+		setOtp,
+		setError,
+		handleOtpSubmit,
+	} = useAuthActivatePage();
+
+	if (step !== "otp" || !otpMeta) {
+		return null;
+	}
+
+	return (
+		<AuthForm onSubmit={handleOtpSubmit}>
+			<AuthForm.OtpField
+				value={otp}
+				onChange={setOtp}
+				codeLength={otpMeta.code_length}
+				disabled={otpLoading}
+				label={t("verificationCodeLabel")}
+			/>
+			<AuthForm.SubmitButton
+				label={t("verifyAndActivate")}
+				loading={otpLoading}
+				disabled={otp.length < otpMeta.code_length}
+			/>
+			<Button
+				variant="text"
+				color="secondary"
+				fullWidth
+				sx={{ mt: 1 }}
+				onClick={() => {
+					setStep("details");
+					setOtp("");
+					setError(null);
+				}}
+			>
+				{t("back")}
+			</Button>
+		</AuthForm>
+	);
+}
+
+function AuthActivateActivatingState() {
+	const { t } = useAuthActivatePage();
+
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				minHeight: "100vh",
+				alignItems: "center",
+				justifyContent: "center",
+			}}
+		>
+			<Box sx={{ textAlign: "center" }}>
+				<CircularProgress sx={{ mb: 2 }} />
+				<Typography variant="body1" color="text.secondary">
+					{t("activating")}
+				</Typography>
+			</Box>
+		</Box>
+	);
+}
+
+function AuthActivateFooter() {
+	const { t, step } = useAuthActivatePage();
+
+	if (step === "activating") {
+		return null;
+	}
+
+	return (
+		<Box sx={{ mt: 3, textAlign: "center" }}>
+			<Link href="/login" style={{ fontSize: "0.875rem" }}>
+				{t("backToSignIn")}
+			</Link>
+		</Box>
+	);
+}
+
+function AuthActivateDefaultView() {
+	return (
+		<>
+			<AuthActivatePage.Activating />
+			<AuthActivatePage.Header />
+			<AuthActivatePage.Error />
+			<AuthActivatePage.DetailsForm />
+			<AuthActivatePage.OtpForm />
+			<AuthActivatePage.Footer />
+		</>
+	);
+}
+
+function AuthActivatePageRoot({
+	children,
+}: Readonly<{ children?: ReactNode }>) {
+	const t = useTranslations("Auth.Activate");
+	const tCommon = useTranslations("Auth.Common");
+	const tErrors = useTranslations("Auth.Errors");
+
+	const router = useRouter();
+	const searchParams = useSearchParams();
+	const callbackUrl =
+		searchParams.get("callbackUrl") ?? searchParams.get("redirect") ?? "/";
+
+	const [step, setStep] = useState<Step>("details");
+	const [error, setError] = useState<string | null>(null);
+
+	const [email, setEmail] = useState("");
+	const [firstName, setFirstName] = useState("");
+	const [lastName, setLastName] = useState("");
+	const [password, setPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [detailsLoading, setDetailsLoading] = useState(false);
+
+	const [otp, setOtp] = useState("");
+	const [otpMeta, setOtpMeta] = useState<OtpMeta | null>(null);
+	const [otpLoading, setOtpLoading] = useState(false);
+
+	const passwordMismatch =
+		confirmPassword.length > 0 && password !== confirmPassword;
+
+	const handleStart = async (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		if (password.length < 8) {
+			setError(tErrors("passwordMinLength"));
+			return;
+		}
+		if (password !== confirmPassword) {
+			setError(tCommon("passwordsDoNotMatch"));
+			return;
+		}
+
+		setError(null);
+		setDetailsLoading(true);
+		try {
+			const response = await fetch("/api/activate", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					email,
+					password,
+					firstName: firstName.trim(),
+					lastName: lastName.trim(),
+				}),
+			});
+			const data = (await response.json()) as Record<string, unknown>;
+			if (!response.ok) {
+				setError(
+					friendlyError(
+						getStringValue(data.error),
+						getStringValue(data.suberror),
+						tErrors,
+					),
+				);
+				return;
+			}
+
+			setOtpMeta({
+				continuation_token: getStringValue(data.continuation_token),
+				challenge_target_label:
+					getStringValue(data.challenge_target_label) || email,
+				code_length: Number(data.code_length || 8),
+			});
+			setStep("otp");
+		} catch {
+			setError(tErrors("unableToStartActivation"));
+		} finally {
+			setDetailsLoading(false);
+		}
+	};
+
+	const handleOtpSubmit = async (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		if (!otpMeta) return;
+		setError(null);
+		setOtpLoading(true);
+		setStep("activating");
+
+		try {
+			const response = await fetch("/api/activate/verify", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					email,
+					password,
+					firstName: firstName.trim(),
+					lastName: lastName.trim(),
+					otp,
+					continuation_token: otpMeta.continuation_token,
+				}),
+			});
+
+			if (!response.ok) {
+				const data = (await response.json().catch(() => null)) as {
+					error?: string;
+					suberror?: string;
+				} | null;
+				setError(
+					friendlyError(
+						getStringValue(data?.error),
+						getStringValue(data?.suberror),
+						tErrors,
+					),
+				);
+				setStep("otp");
+				return;
+			}
+
+			router.push(callbackUrl);
+		} catch {
+			setError(tErrors("activationFailed"));
+			setStep("otp");
+		} finally {
+			setOtpLoading(false);
+		}
+	};
+
+	const contextValue = useMemo(
+		() => ({
+			t,
+			tCommon,
+			tErrors,
+			step,
+			error,
+			email,
+			firstName,
+			lastName,
+			password,
+			confirmPassword,
+			detailsLoading,
+			otp,
+			otpMeta,
+			otpLoading,
+			passwordMismatch,
+			setStep,
+			setError,
+			setEmail,
+			setFirstName,
+			setLastName,
+			setPassword,
+			setConfirmPassword,
+			setOtp,
+			handleStart,
+			handleOtpSubmit,
+		}),
+		[
+			t,
+			tCommon,
+			tErrors,
+			step,
+			error,
+			email,
+			firstName,
+			lastName,
+			password,
+			confirmPassword,
+			detailsLoading,
+			otp,
+			otpMeta,
+			otpLoading,
+			passwordMismatch,
+			setStep,
+			setError,
+			setEmail,
+			setFirstName,
+			setLastName,
+			setPassword,
+			setConfirmPassword,
+			setOtp,
+			handleStart,
+			handleOtpSubmit,
+		],
+	);
+
+	return (
+		<AuthActivatePageContext.Provider value={contextValue}>
+			{children ?? <AuthActivatePage.Default />}
+		</AuthActivatePageContext.Provider>
+	);
+}
+
+type AuthActivatePageComponent = typeof AuthActivatePageRoot & {
+	Header: typeof AuthActivateHeader;
+	Error: typeof AuthActivateError;
+	DetailsForm: typeof AuthActivateDetailsForm;
+	OtpForm: typeof AuthActivateOtpForm;
+	Activating: typeof AuthActivateActivatingState;
+	Footer: typeof AuthActivateFooter;
+	Default: typeof AuthActivateDefaultView;
+};
+
+const AuthActivatePage = AuthActivatePageRoot as AuthActivatePageComponent;
+
+AuthActivatePage.Header = AuthActivateHeader;
+AuthActivatePage.Error = AuthActivateError;
+AuthActivatePage.DetailsForm = AuthActivateDetailsForm;
+AuthActivatePage.OtpForm = AuthActivateOtpForm;
+AuthActivatePage.Activating = AuthActivateActivatingState;
+AuthActivatePage.Footer = AuthActivateFooter;
+AuthActivatePage.Default = AuthActivateDefaultView;
+
+export default AuthActivatePage;

package/src/pages/auth/auth-layout.tsx

@@ -0,0 +1,73 @@
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { Box, IconButton } from "@mui/material";
+import Image from "next/image";
+import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+import type { ReactNode } from "react";
+
+export default async function AuthLayout({
+	children,
+}: Readonly<{
+	children: ReactNode;
+}>) {
+	const t = await getTranslations("Auth.Layout");
+
+	return (
+		<Box sx={{ display: "flex", minHeight: "100vh" }}>
+			<Box
+				sx={{
+					display: { xs: "none", md: "block" },
+					flex: 1,
+					position: "relative",
+					overflow: "hidden",
+					bgcolor: "action.hover",
+				}}
+			>
+				<Image
+					src="/e-Icon.svg"
+					alt={t("iconAlt")}
+					fill
+					style={{ objectFit: "contain", padding: "8%" }}
+					priority
+				/>
+				<IconButton
+					component={Link}
+					href="/"
+					color="secondary"
+					sx={{
+						position: "absolute",
+						top: 16,
+						left: 16,
+						bgcolor: "background.paper",
+						"&:hover": { bgcolor: "action.selected" },
+					}}
+					aria-label={t("backToHome")}
+				>
+					<ArrowBackIcon />
+				</IconButton>
+			</Box>
+			<Box
+				sx={{
+					width: { xs: "100%", md: 480 },
+					px: { xs: 3, sm: 6 },
+					py: 6,
+					bgcolor: "background.paper",
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "center",
+				}}
+			>
+				<Box sx={{ display: "flex", justifyContent: "center", mb: 4 }}>
+					<Image
+						src="/logo-blue.png"
+						alt={t("logoAlt")}
+						width={172}
+						height={52}
+						priority
+					/>
+				</Box>
+				{children}
+			</Box>
+		</Box>
+	);
+}