@churchapps/apphelper-login 0.4.13

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { LoginPage } from "./LoginPage";
+export { LogoutPage } from "./LogoutPage";
+export { Register } from "./components/Register";
+export { Login } from "./components/Login";
+export { Forgot } from "./components/Forgot";
+export { LoginSetPassword } from "./components/LoginSetPassword";
+export { SelectChurchModal } from "./components/SelectChurchModal";
+export { SelectChurchRegister } from "./components/SelectChurchRegister";
+export { SelectChurchSearch } from "./components/SelectChurchSearch";
+export { SelectableChurch } from "./components/SelectableChurch";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/index.js

@@ -0,0 +1,11 @@
+export { LoginPage } from "./LoginPage";
+export { LogoutPage } from "./LogoutPage";
+export { Register } from "./components/Register";
+export { Login } from "./components/Login";
+export { Forgot } from "./components/Forgot";
+export { LoginSetPassword } from "./components/LoginSetPassword";
+export { SelectChurchModal } from "./components/SelectChurchModal";
+export { SelectChurchRegister } from "./components/SelectChurchRegister";
+export { SelectChurchSearch } from "./components/SelectChurchSearch";
+export { SelectableChurch } from "./components/SelectableChurch";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@churchapps/apphelper-login",
+  "version": "0.4.13",
+  "description": "Login components for ChurchApps AppHelper",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "rimraf dist",
+    "tsc": "tsc",
+    "build": "npm-run-all clean tsc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LiveChurchSolutions/AppHelper.git"
+  },
+  "keywords": [
+    "ChurchApps",
+    "login",
+    "authentication"
+  ],
+  "author": "ChurchApps.org",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/LiveChurchSolutions/AppHelper/issues"
+  },
+  "homepage": "https://github.com/LiveChurchSolutions/AppHelper#readme",
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.3"
+  },
+  "dependencies": {
+    "@churchapps/helpers": "^1.0.40",
+    "@churchapps/apphelper": "*",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.2.0",
+    "axios": "^1.10.0",
+    "i18next": "^25.3.1",
+    "jwt-decode": "^4.0.0",
+    "react-cookie": "^8.0.1",
+    "react-google-recaptcha": "^3.1.0",
+    "react-i18next": "^15.6.0",
+    "react-ga4": "^2.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.10",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@types/react-google-recaptcha": "^2.1.5",
+    "npm-run-all2": "^8.0.4",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.8.3"
+  }
+}

package/src/LoginPage.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import * as React from "react";
+import { ErrorMessages, FloatingSupport, Loading } from "@churchapps/apphelper";
+import { LoginResponseInterface, UserContextInterface, ChurchInterface, UserInterface, LoginUserChurchInterface } from "@churchapps/helpers";
+import { ApiHelper, ArrayHelper, UserHelper, CommonEnvironmentHelper } from "@churchapps/helpers";
+import { AnalyticsHelper, Locale } from "./helpers";
+import { useCookies, CookiesProvider } from "react-cookie"
+import { jwtDecode } from "jwt-decode"
+import { Register } from "./components/Register"
+import { SelectChurchModal } from "./components/SelectChurchModal"
+import { Forgot } from "./components/Forgot";
+import { Alert, Box, PaperProps, Typography } from "@mui/material";
+import { Login } from "./components/Login";
+import { LoginSetPassword } from "./components/LoginSetPassword";
+import ga4 from "react-ga4";
+
+interface Props {
+	context: UserContextInterface,
+	jwt: string,
+	auth: string,
+	keyName?: string,
+	logo?: string,
+	appName?: string,
+	appUrl?: string,
+	returnUrl?: string,
+	loginSuccessOverride?: () => void,
+	userRegisteredCallback?: (user: UserInterface) => Promise<void>;
+	churchRegisteredCallback?: (church: ChurchInterface) => Promise<void>;
+	callbackErrors?: string[];
+	showLogo?: boolean;
+	loginContainerCssProps?: PaperProps;
+	defaultEmail?: string;
+	defaultPassword?: string;
+	handleRedirect?: (url: string) => void; // Function to handle redirects from parent component
+}
+
+const LoginPageContent: React.FC<Props> = ({ showLogo = true, loginContainerCssProps, ...props }) => {
+	const [welcomeBackName, setWelcomeBackName] = React.useState("");
+	const [pendingAutoLogin, setPendingAutoLogin] = React.useState(false);
+	const [errors, setErrors] = React.useState([]);
+	const [cookies, setCookie] = useCookies(["jwt", "name", "email", "lastChurchId"]);
+	const [showForgot, setShowForgot] = React.useState(false);
+	const [showRegister, setShowRegister] = React.useState(false);
+	const [showSelectModal, setShowSelectModal] = React.useState(false);
+	const [loginResponse, setLoginResponse] = React.useState<LoginResponseInterface>(null)
+	const [userJwt, setUserJwt] = React.useState("");
+	const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+	const loginFormRef = React.useRef(null);
+	const location = typeof window !== "undefined" && window.location;
+	let selectedChurchId = "";
+	let registeredChurch: ChurchInterface = null;
+	let userJwtBackup = ""; //use state copy for storing between page updates.  This copy for instant availability.
+
+	const cleanAppUrl = () => {
+		if (!props.appUrl) return null;
+		else {
+			const index = props.appUrl.indexOf("/", 9);
+			if (index === -1) return props.appUrl;
+			else return props.appUrl.substring(0, index);
+		}
+	}
+
+	React.useEffect(() => {
+		if (props.callbackErrors?.length > 0) {
+			setErrors(props.callbackErrors)
+		}
+	}, [props.callbackErrors])
+
+	const init = () => {
+		const search = new URLSearchParams(location?.search);
+		const action = search.get("action");
+		if (action === "forgot") setShowForgot(true);
+		else if (action === "register") setShowRegister(true);
+		else {
+			if (!props.auth && props.jwt) {
+				setWelcomeBackName(cookies.name);
+				login({ jwt: props.jwt });
+				setPendingAutoLogin(true);
+			} else {
+				setPendingAutoLogin(false);
+			}
+		}
+	};
+
+	const handleLoginSuccess = async (resp: LoginResponseInterface) => {
+		userJwtBackup = resp.user.jwt;
+		setUserJwt(userJwtBackup);
+		ApiHelper.setDefaultPermissions(resp.user.jwt);
+		setLoginResponse(resp)
+		resp.userChurches.forEach(uc => { if (!uc.apis) uc.apis = []; });
+		UserHelper.userChurches = resp.userChurches;
+
+		setCookie("name", `${resp.user.firstName} ${resp.user.lastName}`, { path: "/" });
+		setCookie("email", resp.user.email, { path: "/" });
+		UserHelper.user = resp.user;
+
+		if (props.jwt) {
+			const decoded: any = jwtDecode(userJwtBackup)
+			selectedChurchId = decoded.churchId
+		}
+
+		const search = new URLSearchParams(location?.search);
+		const churchIdInParams = search.get("churchId");
+
+		if (props.keyName) selectChurchByKeyName();
+		else if (selectedChurchId) selectChurchById();
+		else if (churchIdInParams) selectChurch(churchIdInParams);
+		else if (props.jwt && cookies.lastChurchId && ArrayHelper.getOne(resp.userChurches, "church.id", cookies.lastChurchId)) {
+			selectedChurchId = cookies.lastChurchId;
+			selectChurchById();
+		}
+		else setShowSelectModal(true);
+	}
+
+	const selectChurchById = async () => {
+		await UserHelper.selectChurch(props.context, selectedChurchId, undefined);
+
+		setCookie("lastChurchId", selectedChurchId, { path: "/" });
+
+		if (registeredChurch) {
+			AnalyticsHelper.logEvent("Church", "Register", UserHelper.currentUserChurch.church.name);
+			try {
+				if (CommonEnvironmentHelper.GoogleAnalyticsTag && typeof (window) !== "undefined") {
+					ga4.gtag("event", "conversion", { send_to: "AW-427967381/Ba2qCLrXgJoYEJWHicwB" });
+				}
+			} catch { }
+		}
+		else AnalyticsHelper.logEvent("Church", "Select", UserHelper.currentUserChurch.church.name);
+
+		if (props.churchRegisteredCallback && registeredChurch) {
+			await props.churchRegisteredCallback(registeredChurch)
+			registeredChurch = null;
+			login({ jwt: userJwt || userJwtBackup });
+		} else await continueLoginProcess();
+	}
+
+	const selectChurchByKeyName = async () => {
+		if (!ArrayHelper.getOne(UserHelper.userChurches, "church.subDomain", props.keyName)) {
+			const userChurch: LoginUserChurchInterface = await ApiHelper.post("/churches/select", { subDomain: props.keyName }, "MembershipApi");
+			UserHelper.setupApiHelper(userChurch);
+			setCookie("lastChurchId", userChurch.church.id, { path: "/" });
+			//create/claim the person record and relogin
+			await ApiHelper.get("/people/claim/" + userChurch.church.id, "MembershipApi");
+			login({ jwt: userJwt || userJwtBackup });
+			return;
+		}
+		await UserHelper.selectChurch(props.context, undefined, props.keyName);
+		const selectedChurch = ArrayHelper.getOne(UserHelper.userChurches, "church.subDomain", props.keyName);
+		if (selectedChurch) setCookie("lastChurchId", selectedChurch.church.id, { path: "/" });
+		await continueLoginProcess()
+		return;
+	}
+
+	async function continueLoginProcess() {
+		if (UserHelper.currentUserChurch) {
+			UserHelper.currentUserChurch.apis.forEach(api => {
+				if (api.keyName === "MembershipApi") setCookie("jwt", api.jwt, { path: "/" });
+			})
+			try {
+				if (UserHelper.currentUserChurch.church.id) ApiHelper.patch(`/userChurch/${UserHelper.user.id}`, { churchId: UserHelper.currentUserChurch.church.id, appName: props.appName, lastAccessed: new Date() }, "MembershipApi")
+			} catch (e) {
+				console.log("Could not update user church accessed date")
+			}
+		}
+
+		if (props.loginSuccessOverride !== undefined) props.loginSuccessOverride();
+		else {
+			props.context.setUser(UserHelper.user);
+			props.context.setUserChurches(UserHelper.userChurches)
+			props.context.setUserChurch(UserHelper.currentUserChurch)
+			try {
+				const p = await ApiHelper.get(`/people/${UserHelper.currentUserChurch.person?.id}`, "MembershipApi");
+				if (p) props.context.setPerson(p);
+			} catch {
+				console.log("claiming person");
+				const personClaim = await ApiHelper.get("/people/claim/" + UserHelper.currentUserChurch.church.id, "MembershipApi");
+				props.context.setPerson(personClaim);
+			}
+
+			const search = new URLSearchParams(location?.search);
+			const returnUrl = search.get("returnUrl") || props.returnUrl;
+			if (returnUrl && typeof window !== "undefined") {
+				// Use handleRedirect function if available, otherwise fallback to window.location
+				if (props.handleRedirect) {
+					props.handleRedirect(returnUrl);
+				} else {
+					window.location.href = returnUrl;
+				}
+			}
+		}
+	}
+
+	async function selectChurch(churchId: string) {
+		try {
+			setErrors([])
+			selectedChurchId = churchId;
+			setCookie("lastChurchId", churchId, { path: "/" });
+			if (!ArrayHelper.getOne(UserHelper.userChurches, "church.id", churchId)) {
+				const userChurch: LoginUserChurchInterface = await ApiHelper.post("/churches/select", { churchId: churchId }, "MembershipApi");
+				UserHelper.setupApiHelper(userChurch);
+
+				//create/claim the person record and relogin
+				await ApiHelper.get("/people/claim/" + churchId, "MembershipApi");
+				login({ jwt: userJwt || userJwtBackup });
+				return;
+			}
+			UserHelper.selectChurch(props.context, churchId, null).then(() => { continueLoginProcess() });
+		} catch (err) {
+			console.log("Error in selecting church: ", err)
+			setErrors([Locale.label("login.validate.selectingChurch")])
+			loginFormRef?.current?.setSubmitting(false);
+		}
+
+	}
+
+	const handleLoginErrors = (errors: string[]) => {
+		setWelcomeBackName("");
+		console.log(errors);
+		setErrors([Locale.label("login.validate.invalid")]);
+	}
+
+	const login = async (data: any) => {
+		setErrors([])
+		setIsSubmitting(true);
+		try {
+			const resp: LoginResponseInterface = await ApiHelper.postAnonymous("/users/login", data, "MembershipApi");
+			setIsSubmitting(false);
+			handleLoginSuccess(resp);
+		} catch (e: any) {
+			setPendingAutoLogin(false);
+			if (!data.jwt) handleLoginErrors([e.toString()]);
+			else setWelcomeBackName("");
+			setIsSubmitting(false);
+		}
+	};
+
+	const getWelcomeBack = () => { if (welcomeBackName !== "") return (<><Alert severity="info"><div dangerouslySetInnerHTML={{ __html: Locale.label("login.welcomeName")?.replace("{}", welcomeBackName) }} /></Alert><Loading /></>); }
+	const getCheckEmail = () => { if (new URLSearchParams(location?.search).get("checkEmail") === "1") return <Alert severity="info">{Locale.label("login.registerThankYou")}</Alert> }
+	const handleRegisterCallback = () => { setShowForgot(false); setShowRegister(true); }
+	const handleLoginCallback = () => { setShowForgot(false); setShowRegister(false); }
+	const handleChurchRegistered = (church: ChurchInterface) => { registeredChurch = church; setShowRegister(false); console.log("Updated VERSION********") }
+
+	const getInputBox = () => {
+		if (showRegister) return (
+			<Box id="loginBox" sx={{ backgroundColor: "#FFF", border: "1px solid #CCC", borderRadius: "5px", padding: "20px" }}>
+				<Typography component="h2" sx={{ fontSize: "32px", fontWeight: 500, lineHeight: 1.2, margin: "0 0 8px 0" }}>{Locale.label("login.createAccount")}</Typography>
+				<Register updateErrors={setErrors} appName={props.appName} appUrl={cleanAppUrl()} loginCallback={handleLoginCallback} userRegisteredCallback={props.userRegisteredCallback} />
+			</Box>
+		);
+		else if (showForgot) return (<Forgot registerCallback={handleRegisterCallback} loginCallback={handleLoginCallback} />);
+		else if (props.auth) return (<LoginSetPassword setErrors={setErrors} setShowForgot={setShowForgot} isSubmitting={isSubmitting} auth={props.auth} login={login} appName={props.appName} appUrl={cleanAppUrl()} />)
+		else return <Login setShowRegister={setShowRegister} setShowForgot={setShowForgot} setErrors={setErrors} isSubmitting={isSubmitting} login={login} mainContainerCssProps={loginContainerCssProps} defaultEmail={props.defaultEmail} defaultPassword={props.defaultPassword} />;
+	}
+
+	React.useEffect(init, []); //eslint-disable-line
+
+	return (
+		<>
+			<ErrorMessages errors={errors} />
+			{getWelcomeBack()}
+			{getCheckEmail()}
+			{!pendingAutoLogin && getInputBox()}
+			<SelectChurchModal show={showSelectModal} userChurches={loginResponse?.userChurches} selectChurch={selectChurch} registeredChurchCallback={handleChurchRegistered} errors={errors} appName={props.appName} />
+			<FloatingSupport appName={props.appName} />
+		</>
+	);
+
+};
+
+export const LoginPage: React.FC<Props> = (props) => {
+	// Try to detect if CookiesProvider is available
+	const CookiesContext = React.createContext(null);
+	const context = React.useContext(CookiesContext);
+
+	// Always wrap with CookiesProvider to ensure context is available
+	return (
+		<CookiesProvider defaultSetOptions={{ path: '/' }}>
+			<LoginPageContent {...props} />
+		</CookiesProvider>
+	);
+};

package/src/LogoutPage.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import React from "react";
+import { useCookies, CookiesProvider } from "react-cookie"
+import { ApiHelper, UserContextInterface } from "@churchapps/helpers";
+
+interface Props { context?: UserContextInterface, handleRedirect?: (url: string) => void }
+
+const LogoutPageContent: React.FC<Props> = (props) => {
+	const [, , removeCookie] = useCookies(["jwt", "email", "name", "lastChurchId"]);
+
+	removeCookie("jwt");
+	removeCookie("email");
+	removeCookie("name");
+	removeCookie("lastChurchId");
+
+	ApiHelper.clearPermissions();
+	props.context?.setUser(null);
+	props.context?.setPerson(null);
+	props.context?.setUserChurches(null);
+	props.context?.setUserChurch(null);
+
+	setTimeout(() => {
+		// a must check for Nextjs
+		if (typeof window !== "undefined") {
+			// Use handleRedirect function if available, otherwise fallback to window.location
+			if (props.handleRedirect) {
+				props.handleRedirect("/");
+			} else {
+				window.location.href = "/";
+			}
+		}
+	}, 300);
+	return null;
+}
+
+export const LogoutPage: React.FC<Props> = (props) => {
+	return (
+		<CookiesProvider defaultSetOptions={{ path: '/' }}>
+			<LogoutPageContent {...props} />
+		</CookiesProvider>
+	);
+}

package/src/components/Forgot.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import React, { FormEventHandler } from "react";
+import { ApiHelper } from "@churchapps/helpers";
+import { Locale } from "../helpers";
+import { ResetPasswordRequestInterface, ResetPasswordResponseInterface } from "@churchapps/helpers";
+import { TextField, Typography, Card, CardContent, Button } from "@mui/material";
+
+interface Props {
+  registerCallback: () => void,
+  loginCallback: () => void
+}
+
+export const Forgot: React.FC<Props> = props => {
+  const [errors, setErrors] = React.useState([]);
+  const [successMessage, setSuccessMessage] = React.useState<React.ReactElement>(null);
+  const [email, setEmail] = React.useState("");
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setEmail(e.target.value);
+  }
+
+  const validateEmail = (email: string) => (/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(email))
+
+  const validate = () => {
+    const result = [];
+    if (!email) result.push(Locale.label("login.validate.email"));
+    else if (!validateEmail(email)) result.push(Locale.label("login.validate.email"));
+    setErrors(result);
+    return result.length === 0;
+  }
+
+  const reset: FormEventHandler = (e) => {
+    e.preventDefault();
+    if (validate()) {
+      setIsSubmitting(true);
+      let req: ResetPasswordRequestInterface = { userEmail: email };
+      ApiHelper.postAnonymous("/users/forgot", req, "MembershipApi").then((resp: ResetPasswordResponseInterface) => {
+        if (resp.emailed) {
+          setErrors([]);
+          setSuccessMessage(
+            <Typography textAlign="center" marginTop="35px">
+              {Locale.label("login.resetSent")} <br /><br />
+              <button 
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: '#3b82f6',
+                  fontSize: '14px',
+                  cursor: 'pointer',
+                  textDecoration: 'none'
+                }}
+                onMouseOver={(e) => e.currentTarget.style.textDecoration = 'underline'}
+                onMouseOut={(e) => e.currentTarget.style.textDecoration = 'none'}
+                onClick={(e) => { e.preventDefault(); props.loginCallback(); }}
+              >
+                {Locale.label("login.goLogin")}
+              </button>
+            </Typography>
+          );
+          setEmail("");
+        } else {
+          setErrors(["We could not find an account with this email address"]);
+          setSuccessMessage(<></>);
+        }
+      }).finally(() => { setIsSubmitting(false); });
+    }
+  }
+
+  return (
+    <div style={{ minHeight: '100vh', backgroundColor: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px' }}>
+      <Card sx={{ 
+        width: '100%', 
+        maxWidth: { xs: '400px', sm: '500px' },
+        backgroundColor: 'white', 
+        border: '1px solid #e5e7eb',
+        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)'
+      }}>
+        <CardContent sx={{ textAlign: 'center', padding: '32px' }}>
+          <div style={{ marginBottom: '32px' }}>
+            <img 
+              src="/images/logo-login.png" 
+              alt="Church Logo" 
+              style={{ 
+                maxWidth: '100%', 
+                width: 'auto',
+                height: 'auto',
+                maxHeight: '80px', 
+                marginBottom: '16px',
+                objectFit: 'contain'
+              }}
+            />
+          </div>
+          <Typography 
+            component="h1" 
+            sx={{ 
+              fontSize: '24px', 
+              fontWeight: 'bold', 
+              color: '#111827',
+              marginBottom: '8px'
+            }}
+          >
+            {Locale.label("login.resetPassword")}
+          </Typography>
+          <Typography 
+            sx={{ 
+              color: '#6b7280',
+              marginBottom: '32px'
+            }}
+          >
+            Enter your email to receive password reset instructions
+          </Typography>
+
+          <form onSubmit={reset} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+            {errors.length > 0 && (
+              <div style={{ 
+                backgroundColor: '#fef2f2', 
+                border: '1px solid #fecaca', 
+                borderRadius: '6px', 
+                padding: '12px',
+                textAlign: 'left'
+              }}>
+                {errors.map((error, index) => (
+                  <div key={index} style={{ color: '#dc2626', fontSize: '14px' }}>{error}</div>
+                ))}
+              </div>
+            )}
+            
+            {successMessage ? (
+              <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+                {successMessage}
+              </div>
+            ) : (
+              <>
+                <Typography variant="body2" sx={{ color: '#6b7280', fontSize: '14px', textAlign: 'left' }}>
+                  {Locale.label("login.resetInstructions")}
+                </Typography>
+                
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                  <label htmlFor="forgot-email" style={{ fontSize: '14px', fontWeight: 500, color: '#374151', textAlign: 'left' }}>
+                    {Locale.label("login.email")}
+                  </label>
+                  <TextField
+                    id="forgot-email"
+                    name="forgot-email"
+                    type="email"
+                    placeholder={Locale.label("login.email")}
+                    value={email}
+                    onChange={handleChange}
+                    autoFocus
+                    required
+                    autoComplete="email"
+                    variant="outlined"
+                    fullWidth
+                    onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && reset}
+                    sx={{
+                      '& .MuiOutlinedInput-root': {
+                        backgroundColor: 'white',
+                        '& fieldset': { 
+                          borderColor: '#d1d5db' 
+                        },
+                        '&:hover fieldset': { 
+                          borderColor: '#d1d5db' 
+                        },
+                        '&.Mui-focused fieldset': { 
+                          borderColor: '#3b82f6' 
+                        },
+                        '& input': { 
+                          color: '#111827',
+                          fontSize: '16px'
+                        }
+                      },
+                      '& .MuiInputLabel-root': {
+                        display: 'none'
+                      }
+                    }}
+                  />
+                </div>
+                
+                <Button
+                  type="submit"
+                  variant="contained"
+                  fullWidth
+                  disabled={isSubmitting}
+                  sx={{
+                    backgroundColor: 'hsl(218, 85%, 55%)',
+                    color: 'white',
+                    padding: '12px',
+                    textTransform: 'none',
+                    fontSize: '16px',
+                    fontWeight: 500,
+                    borderRadius: '6px',
+                    '&:hover': { 
+                      backgroundColor: 'hsl(218, 85%, 50%)' 
+                    },
+                    '&:disabled': { 
+                      backgroundColor: '#9ca3af' 
+                    }
+                  }}
+                >
+                  {isSubmitting ? "Sending..." : Locale.label("login.reset")}
+                </Button>
+                
+                <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }}>
+                  <button
+                    type="button"
+                    onClick={(e) => { e.preventDefault(); props.registerCallback(); }}
+                    style={{
+                      background: 'none',
+                      border: 'none',
+                      color: '#3b82f6',
+                      fontSize: '14px',
+                      cursor: 'pointer',
+                      textDecoration: 'none'
+                    }}
+                    onMouseOver={(e) => e.currentTarget.style.textDecoration = 'underline'}
+                    onMouseOut={(e) => e.currentTarget.style.textDecoration = 'none'}
+                  >
+                    {Locale.label("login.register")}
+                  </button>
+                  <span style={{ fontSize: '14px', color: '#6b7280' }}>|</span>
+                  <button
+                    type="button"
+                    onClick={(e) => { e.preventDefault(); props.loginCallback(); }}
+                    style={{
+                      background: 'none',
+                      border: 'none',
+                      color: '#3b82f6',
+                      fontSize: '14px',
+                      cursor: 'pointer',
+                      textDecoration: 'none'
+                    }}
+                    onMouseOver={(e) => e.currentTarget.style.textDecoration = 'underline'}
+                    onMouseOut={(e) => e.currentTarget.style.textDecoration = 'none'}
+                  >
+                    {Locale.label("login.login")}
+                  </button>
+                </div>
+              </>
+            )}
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}