@churchapps/apphelper-login 0.6.14 → 0.6.16

package/src/components/SelectChurchModal.tsx

@@ -1,88 +0,0 @@
-"use client";
-
-import React from "react";
-import { ChurchInterface, LoginUserChurchInterface } from "@churchapps/helpers";
-import { SelectChurchSearch } from "./SelectChurchSearch";
-import { SelectableChurch } from "./SelectableChurch";
-import { ErrorMessages } from "@churchapps/apphelper"
-import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip, Box } from "@mui/material";
-import { Logout } from "@mui/icons-material";
-import { Locale } from "../helpers";
-
-interface Props {
-	appName: string,
-	show: boolean,
-	userChurches?: LoginUserChurchInterface[],
-	selectChurch: (churchId: string) => void,
-	registeredChurchCallback?: (church: ChurchInterface) => void,
-	errors?: string[],
-	handleRedirect?: (url: string) => void
-}
-
-export const SelectChurchModal: React.FC<Props> = (props) => {
-	const [showSearch, setShowSearch] = React.useState(false);
-
-	const handleClose = () => {
-		window.location.reload();
-	}
-
-	const getContents = () => {
-		if (showSearch || props.userChurches?.length === 0) return <SelectChurchSearch selectChurch={props.selectChurch} registeredChurchCallback={props.registeredChurchCallback} appName={props.appName} />
-		else return (<>
-			{props.userChurches?.map(uc => (<SelectableChurch church={uc.church} selectChurch={props.selectChurch} key={uc.church.id} />))}
-			<Box sx={{ textAlign: "center", mt: 3 }}>
-				<button 
-					type="button"
-					style={{ 
-						display: "inline-block", 
-						background: "none", 
-						border: "none", 
-						color: "#3b82f6", 
-						cursor: "pointer", 
-						textDecoration: "none",
-						fontSize: "1rem",
-						transition: "all 0.2s ease"
-					}} 
-					onClick={(e) => { e.preventDefault(); setShowSearch(true); }}
-					onMouseEnter={(e) => e.currentTarget.style.textDecoration = "underline"}
-					onMouseLeave={(e) => e.currentTarget.style.textDecoration = "none"}
-				>
-					{Locale.label("selectChurch.another")}
-				</button>
-			</Box>
-		</>);
-	}
-
-	return (
-		<Dialog 
-			open={props.show} 
-			onClose={handleClose}
-			aria-labelledby="select-church-title"
-			aria-describedby="select-church-content"
-		>
-			<DialogTitle id="select-church-title" sx={{ fontSize: "1.5rem", fontWeight: 600 }}>
-				{Locale.label("selectChurch.selectChurch")}
-			</DialogTitle>
-			<Tooltip title="Logout" arrow>
-				<IconButton 
-					sx={{ position: "absolute", right: 8, top: 8 }} 
-					color="error" 
-					aria-label="Logout"
-					onClick={() => {
-						// Use handleRedirect function if available, otherwise fallback to window.location
-						if (props.handleRedirect) {
-							props.handleRedirect("/logout");
-						} else {
-							window.location.href = "/logout";
-						}
-					}}>
-					<Logout />
-				</IconButton>
-			</Tooltip>
-			<DialogContent id="select-church-content" sx={{ width: 700, maxWidth: "100%", px: 2, py: 2 }}>
-				<ErrorMessages errors={props.errors} />
-				{getContents()}
-			</DialogContent>
-		</Dialog>
-	);
-};

package/src/components/SelectChurchRegister.tsx

@@ -1,88 +0,0 @@
-"use client";
-
-import React from "react";
-import { ApiHelper } from "@churchapps/helpers";
-import { Locale } from "../helpers";
-import { ChurchInterface, RegisterChurchRequestInterface } from "@churchapps/helpers";
-import { ErrorMessages, InputBox } from "@churchapps/apphelper"
-import { Grid, TextField } from "@mui/material";
-
-interface Props {
-  initialChurchName: string,
-  registeredChurchCallback?: (church: ChurchInterface) => void,
-  selectChurch: (churchId: string) => void,
-  appName: string
-}
-
-export const SelectChurchRegister: React.FC<Props> = (props) => {
-  const suggestSubDomain = (name: string) => {
-    let result = name.toLowerCase().replaceAll("christian", "").replaceAll("church", "").replaceAll(" ", "");
-    return result;
-  }
-
-  const [church, setChurch] = React.useState<RegisterChurchRequestInterface>({ name: props.initialChurchName, appName: props.appName, subDomain: suggestSubDomain(props.initialChurchName) });
-  const [errors, setErrors] = React.useState([]);
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const c = { ...church }
-    switch (e.target.name) {
-      case "churchName": c.name = e.target.value; break;
-      case "subDomain": c.subDomain = e.target.value; break;
-      case "address1": c.address1 = e.target.value; break;
-      case "address2": c.address2 = e.target.value; break;
-      case "city": c.city = e.target.value; break;
-      case "state": c.state = e.target.value; break;
-      case "zip": c.zip = e.target.value; break;
-      case "country": c.country = e.target.value; break;
-    }
-    setChurch(c);
-  }
-
-  const validate = () => {
-    let errors = [];
-    if (!church.name?.trim()) errors.push(Locale.label("selectChurch.validate.name"));
-    if (!church.address1?.trim()) errors.push(Locale.label("selectChurch.validate.address"));
-    if (!church.city?.trim()) errors.push(Locale.label("selectChurch.validate.city"));
-    if (!church.state?.trim()) errors.push(Locale.label("selectChurch.validate.state"));
-    if (!church.zip?.trim()) errors.push(Locale.label("selectChurch.validate.zip"));
-    if (!church.country?.trim()) errors.push(Locale.label("selectChurch.validate.country"));
-    setErrors(errors);
-    return errors.length === 0;
-  }
-
-  const handleSave = () => {
-    if (validate()) {
-      setIsSubmitting(true);
-      const c = { ...church };
-      if (!c.subDomain) c.subDomain = suggestSubDomain(c.name);
-      ApiHelper.post("/churches/add", church, "MembershipApi").then(async (resp: any) => {
-        setIsSubmitting(false);
-        if (resp.errors !== undefined) setErrors(resp.errors);
-        else {
-          if (props.registeredChurchCallback) props.registeredChurchCallback(resp);
-          props.selectChurch(resp.id);
-        }
-      });
-    }
-  }
-
-  return (
-    <InputBox id="churchBox" saveFunction={handleSave} headerText={Locale.label("selectChurch.register")} headerIcon="church" isSubmitting={isSubmitting}>
-      <ErrorMessages errors={errors} />
-      <TextField required fullWidth name="churchName" label={Locale.label("selectChurch.name")} value={church.name} onChange={handleChange} />
-
-      <TextField required fullWidth name="address1" label={Locale.label("selectChurch.address1")} value={church.address1} onChange={handleChange} />
-      <Grid container spacing={3}>
-        <Grid size={6}><TextField fullWidth name="address2" label={Locale.label("selectChurch.address2")} value={church.address2} onChange={handleChange} /></Grid>
-        <Grid size={6}><TextField required fullWidth name="city" label={Locale.label("selectChurch.city")} value={church.city} onChange={handleChange} /></Grid>
-      </Grid>
-      <Grid container spacing={3}>
-        <Grid size={6}><TextField required fullWidth name="state" label={Locale.label("selectChurch.state")} value={church.state} onChange={handleChange} /></Grid>
-        <Grid size={6}><TextField required fullWidth name="zip" label={Locale.label("selectChurch.zip")} value={church.zip} onChange={handleChange} /></Grid>
-      </Grid>
-      <TextField required fullWidth name="country" label={Locale.label("selectChurch.country")} value={church.country} onChange={handleChange} />
-    </InputBox>
-  );
-};
-

package/src/components/SelectChurchSearch.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import { Button, TextField } from "@mui/material";
-import React from "react";
-import { ApiHelper } from "@churchapps/helpers";
-import { Locale } from "../helpers";
-import { ChurchInterface } from "@churchapps/helpers";
-import { SelectableChurch } from "./SelectableChurch";
-import { SelectChurchRegister } from "./SelectChurchRegister";
-
-interface Props {
-	selectChurch: (churchId: string) => void,
-	registeredChurchCallback?: (church: ChurchInterface) => void,
-	appName: string
-}
-
-export const SelectChurchSearch: React.FC<Props> = (props) => {
-	const [searchText, setSearchText] = React.useState("");
-	const [churches, setChurches] = React.useState<ChurchInterface[]>(null);
-	const [showRegister, setShowRegister] = React.useState(false);
-
-	const handleSubmit = (e: React.MouseEvent) => {
-		if (e !== null) e.preventDefault();
-		let term = searchText.trim();
-		ApiHelper.post("/churches/search", { name: term }, "MembershipApi").then((data: any) => setChurches(data));
-	}
-
-	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setSearchText(e.currentTarget.value);
-
-	const handleKeyDown = (e: React.KeyboardEvent<any>) => { if (e.key === "Enter") { e.preventDefault(); handleSubmit(null); } }
-
-	const handleRegisterClick = (e: React.MouseEvent) => {
-		e.preventDefault();
-		if (window.confirm(Locale.label("selectChurch.confirmRegister"))) {
-			setShowRegister(true);
-		}
-	}
-
-	const getRegisterLink = () => (
-		<div>
-			<button 
-				type="button"
-				style={{ 
-					display: "block", 
-					textAlign: "center", 
-					background: "none", 
-					border: "none", 
-					color: "#3b82f6", 
-					cursor: "pointer", 
-					textDecoration: "underline",
-					width: "100%"
-				}} 
-				onClick={handleRegisterClick}
-			>
-				{Locale.label("selectChurch.register")}
-			</button>
-		</div>
-	)
-
-	const getChurches = () => {
-		const result: React.ReactElement[] = [];
-		churches.forEach(church => {
-			result.push(<SelectableChurch church={church} selectChurch={props.selectChurch} />);
-		});
-		result.push(getRegisterLink());
-		return result;
-	}
-
-	const getResults = () => {
-		if (churches === null) return;
-		else if (churches.length === 0) return <><p>{Locale.label("selectChurch.noMatches")}</p>{getRegisterLink()}</>
-		else return getChurches();
-	}
-
-	if (showRegister) return (<SelectChurchRegister selectChurch={props.selectChurch} registeredChurchCallback={props.registeredChurchCallback} appName={props.appName} initialChurchName={searchText} />)
-	else return (
-		<>
-			<TextField fullWidth name="searchText" label="Name" value={searchText} onChange={handleChange} onKeyDown={handleKeyDown}
-				InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-testid="search-button" onClick={handleSubmit}>{Locale.label("common.search")}</Button> }}
-			/>
-			{getResults()}
-		</>
-
-	);
-};

package/src/components/SelectableChurch.tsx

@@ -1,114 +0,0 @@
-"use client";
-
-import { Grid, Paper, Box, Typography } from "@mui/material";
-import React from "react";
-import { ArrayHelper } from "@churchapps/helpers";
-import { ChurchInterface, GenericSettingInterface } from "@churchapps/helpers";
-import { LocationOn, Church } from "@mui/icons-material";
-
-interface Props {
-  selectChurch: (churchId: string) => void,
-  church: ChurchInterface
-}
-
-export const SelectableChurch: React.FC<Props> = (props) => {
-
-  let logo: string | null = null;
-  if (props.church.settings) {
-    let l: GenericSettingInterface = ArrayHelper.getOne(props.church.settings, "keyName", "logoLight");
-    if (l?.value) logo = l.value;
-  }
-  return (
-    <Paper 
-      elevation={0}
-      sx={{ 
-        p: 1, 
-        mb: 0.75, 
-        cursor: "pointer",
-        transition: "all 0.2s ease",
-        border: "1px solid transparent",
-        borderRadius: 2,
-        "&:hover": {
-          borderColor: "primary.main",
-          boxShadow: 2,
-          transform: "translateY(-2px)"
-        }
-      }}
-      onClick={() => props.selectChurch(props.church.id)}
-    >
-      <Grid container spacing={2} alignItems="center">
-        <Grid size={{ xs: 12, sm: 5, md: 5 }}>
-          <Box 
-            sx={{ 
-              display: "flex", 
-              justifyContent: "center", 
-              alignItems: "center",
-              height: { xs: 60, sm: 80 },
-              p: 0.5
-            }}
-          >
-            {logo ? (
-              <img 
-                src={logo} 
-                alt={`${props.church.name} logo`}
-                style={{ 
-                  width: "100%", 
-                  height: "100%", 
-                  objectFit: "contain" 
-                }} 
-              />
-            ) : (
-              <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  width: "100%",
-                  height: "100%",
-                  backgroundColor: "grey.100",
-                  borderRadius: 2
-                }}
-              >
-                <Church sx={{ fontSize: { xs: 40, sm: 50 }, color: "grey.400" }} />
-              </Box>
-            )}
-          </Box>
-        </Grid>
-        <Grid size={{ xs: 12, sm: 7, md: 7 }}>
-          <Box>
-            <Typography 
-              variant="h6" 
-              component="h3"
-              sx={{ 
-                color: "primary.main",
-                fontWeight: 600,
-                mb: 0.5
-              }}
-            >
-              {props.church.name}
-            </Typography>
-            {(props.church.address1 || props.church.city || props.church.state) && (
-              <Box sx={{ display: "flex", alignItems: "flex-start", color: "text.secondary" }}>
-                <LocationOn sx={{ fontSize: 18, mr: 0.5, mt: 0.3 }} />
-                <Box>
-                  {props.church.address1 && (
-                    <Typography variant="body2">
-                      {props.church.address1}
-                    </Typography>
-                  )}
-                  {(props.church.city || props.church.state) && (
-                    <Typography variant="body2">
-                      {props.church.city && props.church.city}
-                      {props.church.city && props.church.state && ", "}
-                      {props.church.state}
-                    </Typography>
-                  )}
-                </Box>
-              </Box>
-            )}
-          </Box>
-        </Grid>
-      </Grid>
-    </Paper>
-  );
-};

package/src/helpers/AnalyticsHelper.ts

@@ -1,44 +0,0 @@
-import ReactGA from "react-ga4";
-import { CommonEnvironmentHelper, UserHelper } from "@churchapps/helpers";
-
-export class AnalyticsHelper {
-
-  static init = () => {
-    if (CommonEnvironmentHelper.GoogleAnalyticsTag !== "" && typeof(window)!=="undefined") {
-      try {
-        ReactGA.initialize([{trackingId: CommonEnvironmentHelper.GoogleAnalyticsTag}]);
-        AnalyticsHelper.logPageView();
-      } catch (error) {
-        console.warn('Analytics initialization failed:', error);
-      }
-    }
-  }
-
-  static logPageView = () => {
-    if (CommonEnvironmentHelper.GoogleAnalyticsTag !== "" && typeof(window)!=="undefined") {
-      try {
-        this.setChurchKey();
-        ReactGA.send({ hitType: "pageview", page: window.location.pathname + window.location.search });
-      } catch (error) {
-        console.warn('Analytics page view logging failed:', error);
-      }
-    }
-  }
-
-  static logEvent = (category: string, action: string, label?:string) => {
-    if (CommonEnvironmentHelper.GoogleAnalyticsTag !== "" && typeof(window)!=="undefined") {
-      try {
-        this.setChurchKey();
-        ReactGA.event({ category, action, label });
-      } catch (error) {
-        console.warn('Analytics event logging failed:', error);
-      }
-    }
-  }
-
-  private static setChurchKey = () => {
-    const churchKey = UserHelper?.currentUserChurch?.church?.subDomain;
-    if (churchKey) ReactGA.set({church_key: churchKey });
-  }
-
-}

package/src/helpers/Locale.ts

@@ -1,248 +0,0 @@
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next/initReactI18next";
-import LanguageDetector from "i18next-browser-languagedetector";
-import Backend from "i18next-chained-backend";
-
-interface TranslationResources {
-	[key: string]: {
-		translation: Record<string, unknown>;
-	};
-}
-
-interface ExtraLanguageCodes {
-	[key: string]: string[];
-}
-
-export class Locale {
-	private static readonly supportedLanguages: string[] = [
-		"de",
-		"en",
-		"es",
-		"fr",
-		"hi",
-		"it",
-		"ko",
-		"no",
-		"pt",
-		"ru",
-		"tl",
-		"zh",
-	];
-	private static readonly extraCodes: ExtraLanguageCodes = { no: ["nb", "nn"] };
-
-	// Hard-coded English fallbacks for when locale files are not available
-	private static readonly englishFallbacks: Record<string, any> = {
-		"common": {
-			"pleaseWait": "Please wait...",
-			"search": "Search",
-			"cancel": "Cancel",
-			"save": "Save",
-			"delete": "Delete",
-			"edit": "Edit",
-			"add": "Add",
-			"close": "Close",
-			"date": "Date",
-			"error": "Error",
-			"submit": "Submit",
-			"update": "Update"
-		},
-		"login": {
-			"createAccount": "Create an Account",
-			"email": "Email",
-			"expiredLink": "The current link is expired.",
-			"forgot": "Forgot Password",
-			"goLogin": "Go to Login",
-			"login": "Login",
-			"password": "Password",
-			"register": "Register",
-			"registerThankYou": "Thank you for registering! Please check your email to verify your account.",
-			"requestLink": "Request a new reset link",
-			"reset": "Reset",
-			"resetInstructions": "Enter your email address to request a password reset.",
-			"resetPassword": "Reset Password",
-			"resetSent": "Password reset email sent!",
-			"setPassword": "Set Password",
-			"signIn": "Sign In",
-			"signInTitle": "Please Sign In",
-			"verifyPassword": "Verify Password",
-			"welcomeName": "Welcome back, <b>{}</b>! Please wait while we load your data.",
-			"welcomeBack": "Welcome back",
-			"validate": {
-				"email": "Please enter a valid email address.",
-				"firstName": "Please enter your first name.",
-				"invalid": "Invalid login. Please check your email or password.",
-				"lastName": "Please enter your last name.",
-				"password": "Please enter a password.",
-				"passwordLength": "Password must be at least 8 characters long.",
-				"passwordMatch": "Passwords do not match.",
-				"selectingChurch": "Error in selecting church. Please verify and try again"
-			}
-		},
-		"selectChurch": {
-			"address1": "Address Line 1",
-			"address2": "Address Line 2",
-			"another": "Choose another church",
-			"city": "City",
-			"confirmRegister": "Are you sure you wish to register a new church?",
-			"country": "Country",
-			"name": "Church Name",
-			"noMatches": "No matches found.",
-			"register": "Register a New Church",
-			"selectChurch": "Select a Church",
-			"state": "State / Province",
-			"zip": "Zip / Postal Code",
-			"validate": {
-				"address": "Address cannot be blank.",
-				"city": "City cannot be blank.",
-				"country": "Country cannot be blank.",
-				"name": "Church name cannot be blank.",
-				"state": "State/Province cannot be blank.",
-				"zip": "Zip/Postal code cannot be blank."
-			}
-		}
-	};
-
-	static init = async (backends: string[]): Promise<void> => {
-		const resources: TranslationResources = {};
-		let langs = ["en"];
-
-		if (typeof navigator !== "undefined") {
-			const browserLang = navigator.language.split("-")[0];
-			const mappedLang
-				= Object.keys(this.extraCodes).find((code) =>
-					this.extraCodes[code].includes(browserLang),
-				) || browserLang;
-			const notSupported = this.supportedLanguages.indexOf(mappedLang) === -1;
-			langs = mappedLang === "en" || notSupported ? ["en"] : ["en", mappedLang];
-		}
-
-		// Load translations for each language
-		for (const lang of langs) {
-			resources[lang] = { translation: {} };
-			try {
-				for (const backend of backends) {
-					const url = backend.replace("{{lng}}", lang);
-					try {
-						const response = await fetch(url);
-						if (response.ok) {
-							const data = await response.json();
-							resources[lang].translation = this.deepMerge(
-								resources[lang].translation,
-								data,
-							);
-						}
-					} catch (error) {
-						console.warn(`Failed to load translations from ${url}:`, error);
-					}
-				}
-			} catch (error) {
-				console.warn(`Failed to load translations for language ${lang}:`, error);
-			}
-		}
-
-		// Initialize i18n
-		try {
-			await i18n
-				.use(Backend)
-				.use(LanguageDetector)
-				.use(initReactI18next)
-				.init({
-					resources,
-					fallbackLng: "en",
-					debug: false,
-					interpolation: {
-						escapeValue: false,
-					},
-					detection: {
-						order: ["navigator"],
-						caches: ["localStorage"],
-					},
-				});
-		} catch (error) {
-			console.warn("Failed to initialize i18n:", error);
-		}
-	};
-
-	private static deepMerge(
-		target: Record<string, unknown>,
-		source: Record<string, unknown>,
-	): Record<string, unknown> {
-		for (const key in source) {
-			if (this.isObject(source[key])) {
-				if (!target[key]) Object.assign(target, { [key]: {} });
-				this.deepMerge(
-					target[key] as Record<string, unknown>,
-					source[key] as Record<string, unknown>,
-				);
-			} else Object.assign(target, { [key]: source[key] });
-		}
-		return target;
-	}
-
-	private static isObject(obj: unknown): boolean {
-		return obj !== null && typeof obj === "object" && !Array.isArray(obj);
-	}
-
-	// Helper method to get value from nested object using dot notation
-	private static getNestedValue(obj: Record<string, any>, path: string): any {
-		return path.split('.').reduce((current, key) => {
-			return current && current[key] !== undefined ? current[key] : undefined;
-		}, obj);
-	}
-
-	// New helper method that uses i18n with hard-coded English fallback
-	static t(key: string, options?: Record<string, unknown>): string {
-		try {
-			// Check if i18n is initialized and has the key
-			if (i18n && i18n.isInitialized && i18n.exists(key)) {
-				const translation = i18n.t(key, options);
-				// If translation is not the same as the key, return it
-				if (translation !== key) {
-					return translation;
-				}
-			}
-		} catch (error) {
-			// If i18n fails, fall through to hard-coded fallback
-			console.warn(`i18n translation failed for key "${key}":`, error);
-		}
-
-		// Fallback to hard-coded English translations
-		const fallbackValue = this.getNestedValue(this.englishFallbacks, key);
-		if (fallbackValue !== undefined) {
-			// Handle simple string interpolation for options
-			if (typeof fallbackValue === 'string' && options) {
-				let result = fallbackValue;
-				Object.keys(options).forEach(optionKey => {
-					const placeholder = `{{${optionKey}}}`;
-					if (result.includes(placeholder)) {
-						result = result.replace(new RegExp(placeholder, 'g'), String(options[optionKey]));
-					}
-					// Also handle {} placeholder for backward compatibility
-					if (result.includes('{}')) {
-						result = result.replace('{}', String(options[optionKey]));
-					}
-				});
-				return result;
-			}
-			return String(fallbackValue);
-		}
-
-		// If no fallback found, return the key itself
-		return key;
-	}
-
-	// Keep the old method for backward compatibility
-	static label(key: string): string {
-		return this.t(key);
-	}
-
-	// Helper method to check if i18n is initialized
-	static isInitialized(): boolean {
-		return i18n && i18n.isInitialized;
-	}
-
-	// Method to set up basic fallback-only mode (no i18n)
-	static initFallbackMode(): void {
-		console.info("Locale: Running in fallback mode with English labels only");
-	}
-}

package/src/helpers/index.ts

@@ -1,2 +0,0 @@
-export { Locale } from "./Locale";
-export { AnalyticsHelper } from "./AnalyticsHelper";

package/src/index.ts

@@ -1,11 +0,0 @@
-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";
-export { ErrorMessages } from "@churchapps/apphelper";