@evenicanpm/storefront-core 2.4.0 → 2.4.2

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

@@ -0,0 +1,241 @@
+"use client";
+
+import AuthForm from "@evenicanpm/storefront-core/src/pages/auth/compound/auth-form";
+import { Box, Divider, TextField, Typography } from "@mui/material";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import {
+	type ChangeEvent,
+	createContext,
+	type FormEvent,
+	type ReactNode,
+	useContext,
+	useMemo,
+	useState,
+} from "react";
+
+type LoginContextValue = {
+	t: ReturnType<typeof useTranslations>;
+	tErrors: ReturnType<typeof useTranslations>;
+	callbackUrl: string;
+	email: string;
+	password: string;
+	loading: boolean;
+	error: string | null;
+	handleEmailChange: (event: ChangeEvent<HTMLInputElement>) => void;
+	handlePasswordChange: (event: ChangeEvent<HTMLInputElement>) => void;
+	handleSubmit: (event: FormEvent<HTMLFormElement>) => Promise<void>;
+};
+
+const AuthLoginPageContext = createContext<LoginContextValue | null>(null);
+
+const useAuthLoginPage = () => {
+	const context = useContext(AuthLoginPageContext);
+	if (!context) {
+		throw new Error(
+			"AuthLoginPage compound components must be used within AuthLoginPage",
+		);
+	}
+	return context;
+};
+
+function AuthLoginHeader() {
+	const { t } = useAuthLoginPage();
+
+	return (
+		<>
+			<Typography variant="h5" fontWeight={700} gutterBottom>
+				{t("title")}
+			</Typography>
+			<Typography variant="body2" color="text.secondary" mb={3}>
+				{t("subtitle")}
+			</Typography>
+			<Divider sx={{ mb: 3 }} />
+		</>
+	);
+}
+
+function AuthLoginError() {
+	const { error } = useAuthLoginPage();
+	return <AuthForm.Error message={error} />;
+}
+
+function AuthLoginCredentialsForm() {
+	const {
+		t,
+		email,
+		password,
+		loading,
+		handleEmailChange,
+		handlePasswordChange,
+		handleSubmit,
+	} = useAuthLoginPage();
+
+	return (
+		<AuthForm onSubmit={handleSubmit}>
+			<TextField
+				label={t("emailLabel")}
+				type="email"
+				value={email}
+				onChange={handleEmailChange}
+				fullWidth
+				required
+				autoComplete="email"
+				autoFocus
+				sx={{ mb: 2 }}
+				disabled={loading}
+			/>
+			<TextField
+				label={t("passwordLabel")}
+				type="password"
+				value={password}
+				onChange={handlePasswordChange}
+				fullWidth
+				required
+				autoComplete="current-password"
+				sx={{ mb: 1 }}
+				disabled={loading}
+			/>
+			<Box sx={{ textAlign: "right", mb: 2 }}>
+				<Link href="/reset-password" style={{ fontSize: "0.8125rem" }}>
+					{t("forgotPassword")}
+				</Link>
+			</Box>
+			<AuthForm.SubmitButton
+				label={t("submit")}
+				loading={loading}
+				disabled={!email || !password}
+			/>
+		</AuthForm>
+	);
+}
+
+function AuthLoginFooter() {
+	const { t } = useAuthLoginPage();
+
+	return (
+		<Box sx={{ mt: 3, textAlign: "center" }}>
+			<Link href="/activate" style={{ fontSize: "0.875rem" }}>
+				{t("activateAccount")}
+			</Link>
+		</Box>
+	);
+}
+
+function AuthLoginDefaultView() {
+	return (
+		<>
+			<AuthLoginPage.Header />
+			<AuthLoginPage.Error />
+			<AuthLoginPage.Form />
+			<AuthLoginPage.Footer />
+		</>
+	);
+}
+
+function AuthLoginPageRoot({ children }: Readonly<{ children?: ReactNode }>) {
+	const t = useTranslations("Auth.Login");
+	const tErrors = useTranslations("Auth.Errors");
+
+	const searchParams = useSearchParams();
+	const callbackUrl =
+		searchParams.get("callbackUrl") ?? searchParams.get("redirect") ?? "/";
+
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const handleEmailChange = (event: ChangeEvent<HTMLInputElement>) => {
+		setEmail(event.target.value);
+	};
+
+	const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
+		setPassword(event.target.value);
+	};
+
+	const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		setLoading(true);
+		setError(null);
+
+		try {
+			const response = await fetch("/api/auth/native-login", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ email, password }),
+			});
+
+			if (!response.ok) {
+				const data = (await response.json().catch(() => null)) as {
+					error_description?: string;
+					error?: string;
+				} | null;
+				setError(
+					data?.error_description ||
+						data?.error ||
+						tErrors("invalidCredentials"),
+				);
+				setLoading(false);
+				return;
+			}
+
+			globalThis.location.href = callbackUrl;
+		} catch {
+			setError(tErrors("unableToSignIn"));
+			setLoading(false);
+		}
+	};
+
+	const contextValue = useMemo(
+		() => ({
+			t,
+			tErrors,
+			callbackUrl,
+			email,
+			password,
+			loading,
+			error,
+			handleEmailChange,
+			handlePasswordChange,
+			handleSubmit,
+		}),
+		[
+			t,
+			tErrors,
+			callbackUrl,
+			email,
+			password,
+			loading,
+			error,
+			handleEmailChange,
+			handlePasswordChange,
+			handleSubmit,
+		],
+	);
+
+	return (
+		<AuthLoginPageContext.Provider value={contextValue}>
+			{children ?? <AuthLoginPage.Default />}
+		</AuthLoginPageContext.Provider>
+	);
+}
+
+type AuthLoginPageComponent = typeof AuthLoginPageRoot & {
+	Header: typeof AuthLoginHeader;
+	Error: typeof AuthLoginError;
+	Form: typeof AuthLoginCredentialsForm;
+	Footer: typeof AuthLoginFooter;
+	Default: typeof AuthLoginDefaultView;
+};
+
+const AuthLoginPage = AuthLoginPageRoot as AuthLoginPageComponent;
+
+AuthLoginPage.Header = AuthLoginHeader;
+AuthLoginPage.Error = AuthLoginError;
+AuthLoginPage.Form = AuthLoginCredentialsForm;
+AuthLoginPage.Footer = AuthLoginFooter;
+AuthLoginPage.Default = AuthLoginDefaultView;
+
+export default AuthLoginPage;

package/src/pages/auth/auth-reset-password-page.tsx

@@ -0,0 +1,487 @@
+"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, Divider, TextField, Typography } from "@mui/material";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import {
+	type ChangeEvent,
+	createContext,
+	type FormEvent,
+	type ReactNode,
+	useContext,
+	useMemo,
+	useState,
+} from "react";
+
+type Step = "email" | "otp" | "password" | "success";
+
+type ResetPasswordContextValue = {
+	t: ReturnType<typeof useTranslations>;
+	tErrors: ReturnType<typeof useTranslations>;
+	tCommon: ReturnType<typeof useTranslations>;
+	step: Step;
+	error: string | null;
+	email: string;
+	emailLoading: boolean;
+	otpMeta: OtpMeta | null;
+	otp: string;
+	otpLoading: boolean;
+	passwordToken: string;
+	newPassword: string;
+	confirmPassword: string;
+	passwordLoading: boolean;
+	passwordMismatch: boolean;
+	setStep: (step: Step) => void;
+	setError: (message: string | null) => void;
+	setEmail: (value: string) => void;
+	setOtp: (value: string) => void;
+	setNewPassword: (value: string) => void;
+	setConfirmPassword: (value: string) => void;
+	handleEmail: (event: FormEvent<HTMLFormElement>) => Promise<void>;
+	handleOtp: (event: FormEvent<HTMLFormElement>) => Promise<void>;
+	handlePassword: (event: FormEvent<HTMLFormElement>) => Promise<void>;
+};
+
+const AuthResetPasswordPageContext =
+	createContext<ResetPasswordContextValue | null>(null);
+
+function getStringValue(value: unknown): string {
+	return typeof value === "string" ? value : "";
+}
+
+const useAuthResetPasswordPage = () => {
+	const context = useContext(AuthResetPasswordPageContext);
+	if (!context) {
+		throw new Error(
+			"AuthResetPasswordPage compound components must be used within AuthResetPasswordPage",
+		);
+	}
+	return context;
+};
+
+function AuthResetPasswordHeader() {
+	const { t, tCommon, step, otpMeta } = useAuthResetPasswordPage();
+
+	return (
+		<>
+			<Typography variant="h5" fontWeight={700} gutterBottom>
+				{step === "success" ? t("titleSuccess") : t("title")}
+			</Typography>
+			<Typography variant="body2" color="text.secondary" mb={3}>
+				{step === "email" && t("subtitleEmail")}
+				{step === "otp" &&
+					t("subtitleOtp", {
+						codeLength: otpMeta?.code_length ?? 8,
+						target: otpMeta?.challenge_target_label || tCommon("yourEmail"),
+					})}
+				{step === "password" && t("subtitlePassword")}
+				{step === "success" && t("subtitleSuccess")}
+			</Typography>
+			<Divider sx={{ mb: 3 }} />
+		</>
+	);
+}
+
+function AuthResetPasswordError() {
+	const { error, step } = useAuthResetPasswordPage();
+
+	if (step === "success") {
+		return null;
+	}
+
+	return <AuthForm.Error message={error} />;
+}
+
+function AuthResetPasswordEmailForm() {
+	const { t, step, email, emailLoading, setEmail, handleEmail } =
+		useAuthResetPasswordPage();
+
+	if (step !== "email") {
+		return null;
+	}
+
+	return (
+		<AuthForm onSubmit={handleEmail}>
+			<TextField
+				label={t("emailLabel")}
+				type="email"
+				value={email}
+				onChange={(
+					event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+				) => setEmail(event.target.value)}
+				fullWidth
+				required
+				autoComplete="email"
+				autoFocus
+				sx={{ mb: 3 }}
+				disabled={emailLoading}
+			/>
+			<AuthForm.SubmitButton
+				label={t("sendCode")}
+				loading={emailLoading}
+				disabled={!email}
+			/>
+		</AuthForm>
+	);
+}
+
+function AuthResetPasswordOtpForm() {
+	const {
+		t,
+		step,
+		otp,
+		otpMeta,
+		otpLoading,
+		setStep,
+		setOtp,
+		setError,
+		handleOtp,
+	} = useAuthResetPasswordPage();
+
+	if (step !== "otp") {
+		return null;
+	}
+
+	return (
+		<AuthForm onSubmit={handleOtp}>
+			<AuthForm.OtpField
+				value={otp}
+				onChange={setOtp}
+				codeLength={otpMeta?.code_length ?? 8}
+				disabled={otpLoading}
+				label={t("verificationCodeLabel")}
+			/>
+			<AuthForm.SubmitButton
+				label={t("verifyCode")}
+				loading={otpLoading}
+				disabled={otp.length < (otpMeta?.code_length ?? 8)}
+			/>
+			<Button
+				variant="text"
+				color="secondary"
+				fullWidth
+				sx={{ mt: 1 }}
+				onClick={() => {
+					setStep("email");
+					setOtp("");
+					setError(null);
+				}}
+			>
+				{t("sendAgain")}
+			</Button>
+		</AuthForm>
+	);
+}
+
+function AuthResetPasswordPasswordForm() {
+	const {
+		t,
+		tCommon,
+		step,
+		newPassword,
+		confirmPassword,
+		passwordLoading,
+		passwordMismatch,
+		setNewPassword,
+		setConfirmPassword,
+		handlePassword,
+	} = useAuthResetPasswordPage();
+
+	if (step !== "password") {
+		return null;
+	}
+
+	return (
+		<AuthForm onSubmit={handlePassword}>
+			<AuthForm.PasswordFields
+				password={newPassword}
+				confirmPassword={confirmPassword}
+				onPasswordChange={setNewPassword}
+				onConfirmChange={setConfirmPassword}
+				disabled={passwordLoading}
+				autoFocus
+				label={t("newPasswordLabel")}
+				confirmLabel={t("confirmNewPasswordLabel")}
+				mismatchHelperText={tCommon("passwordsDoNotMatch")}
+			/>
+			<AuthForm.SubmitButton
+				label={t("resetPassword")}
+				loading={passwordLoading}
+				disabled={passwordMismatch || !newPassword || !confirmPassword}
+			/>
+		</AuthForm>
+	);
+}
+
+function AuthResetPasswordSuccessAction() {
+	const { t, step } = useAuthResetPasswordPage();
+
+	if (step !== "success") {
+		return null;
+	}
+
+	return (
+		<Button
+			component={Link}
+			href="/login"
+			variant="contained"
+			color="primary"
+			fullWidth
+			size="large"
+			sx={{ borderRadius: 2, py: 1.5 }}
+		>
+			{t("returnToSignIn")}
+		</Button>
+	);
+}
+
+function AuthResetPasswordFooter() {
+	const { t, step } = useAuthResetPasswordPage();
+
+	if (step === "success") {
+		return null;
+	}
+
+	return (
+		<Box sx={{ mt: 3, textAlign: "center" }}>
+			<Link href="/login" style={{ fontSize: "0.875rem" }}>
+				{t("backToSignIn")}
+			</Link>
+		</Box>
+	);
+}
+
+function AuthResetPasswordDefaultView() {
+	return (
+		<>
+			<AuthResetPasswordPage.Header />
+			<AuthResetPasswordPage.Error />
+			<AuthResetPasswordPage.EmailForm />
+			<AuthResetPasswordPage.OtpForm />
+			<AuthResetPasswordPage.PasswordForm />
+			<AuthResetPasswordPage.SuccessAction />
+			<AuthResetPasswordPage.Footer />
+		</>
+	);
+}
+
+function AuthResetPasswordPageRoot({
+	children,
+}: Readonly<{ children?: ReactNode }>) {
+	const t = useTranslations("Auth.ResetPassword");
+	const tErrors = useTranslations("Auth.Errors");
+	const tCommon = useTranslations("Auth.Common");
+
+	const [step, setStep] = useState<Step>("email");
+	const [error, setError] = useState<string | null>(null);
+
+	const [email, setEmail] = useState("");
+	const [emailLoading, setEmailLoading] = useState(false);
+	const [otpMeta, setOtpMeta] = useState<OtpMeta | null>(null);
+
+	const [otp, setOtp] = useState("");
+	const [otpLoading, setOtpLoading] = useState(false);
+	const [passwordToken, setPasswordToken] = useState("");
+
+	const [newPassword, setNewPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [passwordLoading, setPasswordLoading] = useState(false);
+
+	const passwordMismatch =
+		confirmPassword.length > 0 && newPassword !== confirmPassword;
+
+	const handleEmail = async (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		setError(null);
+		setEmailLoading(true);
+		try {
+			const response = await fetch("/api/reset-password", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ email }),
+			});
+			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("networkError"));
+		} finally {
+			setEmailLoading(false);
+		}
+	};
+
+	const handleOtp = async (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		if (!otpMeta) return;
+		setError(null);
+		setOtpLoading(true);
+		try {
+			const response = await fetch("/api/reset-password/verify", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					otp,
+					continuation_token: otpMeta.continuation_token,
+				}),
+			});
+			const data = (await response.json()) as Record<string, unknown>;
+			if (!response.ok) {
+				setError(
+					friendlyError(
+						getStringValue(data.error),
+						getStringValue(data.suberror),
+						tErrors,
+					),
+				);
+				if (getStringValue(data.suberror) === "invalid_oob_value") setOtp("");
+				return;
+			}
+			setPasswordToken(getStringValue(data.continuation_token));
+			setStep("password");
+		} catch {
+			setError(tErrors("networkError"));
+		} finally {
+			setOtpLoading(false);
+		}
+	};
+
+	const handlePassword = async (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		if (newPassword !== confirmPassword) {
+			setError(tCommon("passwordsDoNotMatch"));
+			return;
+		}
+		setError(null);
+		setPasswordLoading(true);
+		try {
+			const response = await fetch("/api/reset-password/submit", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					new_password: newPassword,
+					continuation_token: passwordToken,
+				}),
+			});
+			const data = (await response.json()) as Record<string, unknown>;
+			if (!response.ok) {
+				setError(
+					friendlyError(
+						getStringValue(data.error),
+						getStringValue(data.suberror),
+						tErrors,
+					),
+				);
+				return;
+			}
+			setStep("success");
+		} catch {
+			setError(tErrors("networkError"));
+		} finally {
+			setPasswordLoading(false);
+		}
+	};
+
+	const contextValue = useMemo(
+		() => ({
+			t,
+			tErrors,
+			tCommon,
+			step,
+			error,
+			email,
+			emailLoading,
+			otpMeta,
+			otp,
+			otpLoading,
+			passwordToken,
+			newPassword,
+			confirmPassword,
+			passwordLoading,
+			passwordMismatch,
+			setStep,
+			setError,
+			setEmail,
+			setOtp,
+			setNewPassword,
+			setConfirmPassword,
+			handleEmail,
+			handleOtp,
+			handlePassword,
+		}),
+		[
+			t,
+			tErrors,
+			tCommon,
+			step,
+			error,
+			email,
+			emailLoading,
+			otpMeta,
+			otp,
+			otpLoading,
+			passwordToken,
+			newPassword,
+			confirmPassword,
+			passwordLoading,
+			passwordMismatch,
+			setStep,
+			setError,
+			setEmail,
+			setOtp,
+			setNewPassword,
+			setConfirmPassword,
+			handleEmail,
+			handleOtp,
+			handlePassword,
+		],
+	);
+
+	return (
+		<AuthResetPasswordPageContext.Provider value={contextValue}>
+			{children ?? <AuthResetPasswordPage.Default />}
+		</AuthResetPasswordPageContext.Provider>
+	);
+}
+
+type AuthResetPasswordPageComponent = typeof AuthResetPasswordPageRoot & {
+	Header: typeof AuthResetPasswordHeader;
+	Error: typeof AuthResetPasswordError;
+	EmailForm: typeof AuthResetPasswordEmailForm;
+	OtpForm: typeof AuthResetPasswordOtpForm;
+	PasswordForm: typeof AuthResetPasswordPasswordForm;
+	SuccessAction: typeof AuthResetPasswordSuccessAction;
+	Footer: typeof AuthResetPasswordFooter;
+	Default: typeof AuthResetPasswordDefaultView;
+};
+
+const AuthResetPasswordPage =
+	AuthResetPasswordPageRoot as AuthResetPasswordPageComponent;
+
+AuthResetPasswordPage.Header = AuthResetPasswordHeader;
+AuthResetPasswordPage.Error = AuthResetPasswordError;
+AuthResetPasswordPage.EmailForm = AuthResetPasswordEmailForm;
+AuthResetPasswordPage.OtpForm = AuthResetPasswordOtpForm;
+AuthResetPasswordPage.PasswordForm = AuthResetPasswordPasswordForm;
+AuthResetPasswordPage.SuccessAction = AuthResetPasswordSuccessAction;
+AuthResetPasswordPage.Footer = AuthResetPasswordFooter;
+AuthResetPasswordPage.Default = AuthResetPasswordDefaultView;
+
+export default AuthResetPasswordPage;