@churchapps/apphelper-login 0.5.0 → 0.5.1

package/src/components/SelectChurchModal.tsx

@@ -1,88 +1,88 @@
-"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>
-	);
-};
+"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 +1,88 @@
-"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(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>
-  );
-};
-
+"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(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 +1,85 @@
-"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()}
-		</>
-
-	);
-};
+"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()}
+		</>
+
+	);
+};