@churchapps/apphelper 0.0.1

package/src/pageComponents/LoginPage.tsx

@@ -0,0 +1,244 @@
+import * as React from "react";
+import { ErrorMessages, FloatingSupport, Loading } from "../components";
+import { LoginResponseInterface, UserContextInterface, ChurchInterface, UserInterface, LoginUserChurchInterface } from "../interfaces";
+import { AnalyticsHelper, ApiHelper, ArrayHelper, UserHelper } from "../helpers";
+import { useCookies } from "react-cookie"
+import jwt_decode 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 { CommonEnvironmentHelper } from "../helpers/CommonEnvironmentHelper";
+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;
+}
+
+export const LoginPage: 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"]);
+  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 = jwt_decode(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 setShowSelectModal(true);
+  }
+
+  const selectChurchById = async () => {
+    await UserHelper.selectChurch(props.context, selectedChurchId, undefined);
+
+    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);
+      //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);
+    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);
+      }
+    }
+  }
+
+  async function selectChurch(churchId: string) {
+    try {
+      setErrors([])
+      selectedChurchId = churchId;
+      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(["Error in selecting church. Please verify and try again"])
+      loginFormRef?.current?.setSubmitting(false);
+    }
+
+  }
+
+  const handleLoginErrors = (errors: string[]) => {
+    setWelcomeBackName("");
+    console.log(errors);
+    setErrors(["Invalid login. Please check your email or password."]);
+  }
+
+  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);
+      handleLoginErrors([e.toString()]);
+      setIsSubmitting(false);
+    }
+  };
+
+  const getWelcomeBack = () => { if (welcomeBackName !== "") return (<><Alert severity="info">Welcome back, <b>{welcomeBackName}</b>!  Please wait while we load your data.</Alert><Loading /></>); }
+  const getCheckEmail = () => { if (new URLSearchParams(location?.search).get("checkEmail") === "1") return <Alert severity="info"> Thank you for registering.  Please check your email to continue.</Alert> }
+  const handleRegisterCallback = () => { setShowForgot(false); setShowRegister(true); }
+  const handleLoginCallback = () => { setShowForgot(false); setShowRegister(false); }
+  const handleChurchRegistered = (church: ChurchInterface) => { registeredChurch = church; }
+
+  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" }}>Create an Account</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} />;
+  }
+
+  React.useEffect(init, []); //eslint-disable-line
+
+  return (
+    <Box sx={{ maxWidth: "382px" }} px="16px" mx="auto">
+      {showLogo && <img src={props.logo || "/images/logo-login.png"} alt="logo" style={{ width: "100%", marginTop: 100, marginBottom: 60 }} />}
+      <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} />
+    </Box>
+  );
+
+};

package/src/pageComponents/LogoutPage.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { useCookies } from "react-cookie"
+import { ApiHelper } from "../helpers";
+import { UserContextInterface } from "../interfaces";
+
+interface Props { context?: UserContextInterface, }
+
+export const LogoutPage: React.FC<Props> = (props) => {
+  const [, , removeCookie] = useCookies(["jwt", "email", "name"]);
+
+  removeCookie("jwt");
+  removeCookie("email");
+  removeCookie("name");
+
+  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") {
+      window.location.href = "/";
+    }
+  }, 300);
+  return null;
+}

package/src/pageComponents/components/Forgot.tsx

@@ -0,0 +1,79 @@
+import React, { FormEventHandler } from "react";
+import { ApiHelper } from "../../helpers";
+import { ErrorMessages } from "../../components";
+import { ResetPasswordRequestInterface, ResetPasswordResponseInterface } from "../../interfaces";
+import { Stack, TextField, Box, Typography } from "@mui/material";
+import LoadingButton from "@mui/lab/LoadingButton";
+
+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("Please enter your email address.");
+    else if (!validateEmail(email)) result.push("Please enter a valid email address.");
+    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">
+              Password reset email sent! <br /><br /><a href="about:blank" className="text-decoration" onClick={(e) => { e.preventDefault(); props.loginCallback(); }}>Go to Login</a>
+            </Typography>
+          );
+          setEmail("");
+        } else {
+          setErrors(["We could not find an account with this email address"]);
+          setSuccessMessage(<></>);
+        }
+      }).finally(() => { setIsSubmitting(false); });
+    }
+  }
+
+  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" }}>Reset Password</Typography>
+
+      <form onSubmit={reset}>
+        <p>Enter your email address to request a password reset.</p>
+        <ErrorMessages errors={errors} />
+        {successMessage}
+        {!successMessage && (
+          <>
+            <TextField fullWidth autoFocus label="Email" aria-label="email" id="email" name="email" value={email} onChange={handleChange} placeholder="Email address" onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && reset} />
+            <br />
+            <Box sx={{ textAlign: "right", marginY: 1 }}>
+              <a href="about:blank" className="text-decoration" onClick={(e) => { e.preventDefault(); props.registerCallback(); }}>Register</a> &nbsp; | &nbsp;
+              <a href="about:blank" className="text-decoration" onClick={(e) => { e.preventDefault(); props.loginCallback(); }}>Login</a>&nbsp;
+            </Box>
+            <Stack direction="row" sx={{ marginTop: 1.5 }} spacing={1} justifyContent="flex-end">
+              <LoadingButton loading={isSubmitting} variant="contained" type="submit" disabled={isSubmitting}>Reset</LoadingButton>
+            </Stack>
+          </>
+        )}
+      </form>
+    </Box>
+  );
+}

package/src/pageComponents/components/Login.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { InputBox } from "../../components";
+import { TextField, Box, PaperProps } from "@mui/material";
+
+interface Props {
+  //registerCallback: () => void,
+  //loginCallback: () => void
+  login: (data: any) => void,
+  isSubmitting: boolean,
+  setShowRegister: (showRegister: boolean) => void,
+  setShowForgot: (showForgot: boolean) => void,
+  setErrors: (errors: string[]) => void;
+  mainContainerCssProps?: PaperProps;
+}
+
+export const Login: React.FC<Props> = ({ mainContainerCssProps = {}, ...props }) => {
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+
+  const validateEmail = (email: string) => (/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(.\w{2,3})+$/.test(email))
+
+  const validate = () => {
+    const result = [];
+    if (!email) result.push("Please enter your email address.");
+    else if (!validateEmail(email)) result.push("Please enter a valid email address.");
+    if (!password) result.push("Please enter your password.");
+    props.setErrors(result);
+    return result.length === 0;
+  }
+
+  const submitLogin = () => {
+    if (validate()) props.login({ email, password });
+  }
+
+  const getRegisterLink = () => (
+    <><a href="about:blank" className="text-decoration" onClick={handleShowRegister}>Register</a> &nbsp; | &nbsp; </>
+  )
+
+  const handleShowRegister = (e: React.MouseEvent) => {
+    e.preventDefault();
+    props.setShowRegister(true);
+  }
+
+  return (
+    <InputBox headerText="Please Sign In" saveFunction={submitLogin} saveButtonType="submit" saveText={props.isSubmitting ? "Please wait..." : "Sign in"} isSubmitting={props.isSubmitting} mainContainerCssProps={mainContainerCssProps}>
+      <TextField fullWidth autoFocus name="email" type="email" label="Email" value={email} onChange={(e) => { e.preventDefault(); setEmail(e.target.value) }} />
+      <TextField fullWidth name="email" type="password" label="Password" value={password} onChange={(e) => { e.preventDefault(); setPassword(e.target.value) }} />
+      <Box sx={{ textAlign: "right", marginY: 1 }}>
+        {getRegisterLink()}
+        <a href="about:blank" className="text-decoration" onClick={(e) => { e.preventDefault(); props.setShowForgot(true); }}>Forgot Password</a>&nbsp;
+      </Box>
+    </InputBox>
+  );
+}

package/src/pageComponents/components/LoginSetPassword.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { InputBox } from "../../components";
+import { TextField } from "@mui/material";
+import { LoginResponseInterface, UserInterface } from "../../interfaces";
+import { ApiHelper } from "../../helpers";
+
+interface Props {
+  appName: string,
+  appUrl: string,
+  setErrors: (errors: string[]) => void,
+  setShowForgot: (showForgot: boolean) => void,
+  isSubmitting: boolean,
+  auth: string,
+  login: (data: any) => void,
+}
+
+export const LoginSetPassword: React.FC<Props> = props => {
+  const [password, setPassword] = React.useState("");
+  const [verifyPassword, setVerifyPassword] = React.useState("");
+  const [user, setUser] = React.useState<UserInterface>(null);
+
+  const validate = () => {
+    const result = [];
+    if (!password) result.push("Please enter your password.");
+    else if (password.length < 8) result.push("Please enter at least an 8 character password.");
+    else if (password !== verifyPassword) result.push("Passwords do not match");
+    props.setErrors(result);
+    return result.length === 0;
+  }
+
+  const submitChangePassword = () => {
+    if (validate()) {
+      submit();
+    }
+  }
+
+  const loadUser = () => {
+    ApiHelper.postAnonymous("/users/login", { authGuid: props.auth }, "MembershipApi").then((resp: LoginResponseInterface) => {
+
+      console.log("RESPONSE", resp);
+      if (resp.user) setUser(resp.user);
+      else props.setShowForgot(true);
+    }).catch(() => {
+      props.setShowForgot(true);
+    });
+  }
+
+  const submit = async () => {
+    const resp = await ApiHelper.postAnonymous("/users/setPasswordGuid", { authGuid: props.auth, newPassword: password, appName: props.appName, appUrl: props.appUrl }, "MembershipApi");
+    if (resp.success) props.login({ email: user.email, password });
+    else props.setShowForgot(true);
+  }
+
+  React.useEffect(loadUser, []); //eslint-disable-line
+
+  return (
+    <InputBox headerText="Set Password" saveFunction={submitChangePassword} saveButtonType="submit" saveText={(props.isSubmitting || !user) ? "Please wait..." : "Sign in"} isSubmitting={props.isSubmitting}>
+      {user && <p style={{ marginTop: 0, marginBottom: 0 }}>Welcome back {user.firstName}.</p>}
+      <TextField fullWidth name="password" type="password" label="Set Password" value={password} onChange={(e) => { e.preventDefault(); setPassword(e.target.value) }} />
+      <TextField fullWidth name="verifyPassword" type="password" label="Verify Password" value={verifyPassword} onChange={(e) => { e.preventDefault(); setVerifyPassword(e.target.value) }} />
+    </InputBox>
+  );
+}

package/src/pageComponents/components/Register.tsx

@@ -0,0 +1,107 @@
+import React, { FormEventHandler } from "react";
+import { LoginResponseInterface, RegisterUserInterface, UserInterface } from "../../interfaces";
+import { AnalyticsHelper, ApiHelper } from "../../helpers";
+import { ErrorMessages } from "../../components";
+import { Button, Stack, TextField, Link } from "@mui/material";
+
+interface Props {
+  appName?: string,
+  appUrl?: string,
+  updateErrors: (errors: string[]) => void,
+  loginCallback?: () => void
+  userRegisteredCallback?: (user: UserInterface) => Promise<void>;
+}
+
+export const Register: React.FC<Props> = (props) => {
+
+  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);
+    }
+  }
+
+  const [registered, setRegistered] = React.useState(false);
+  const [user, setUser] = React.useState<RegisterUserInterface>({ firstName: "", lastName: "", email: "", appName: props.appName, appUrl: cleanAppUrl() });
+  const [errors, setErrors] = React.useState([]);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleRegisterErrors = (errors: string[]) => {
+    props.updateErrors(errors)
+  }
+
+  const handleRegisterSuccess = (resp: LoginResponseInterface) => {
+    setRegistered(true);
+    AnalyticsHelper.logEvent("User", "Register");
+    if (props.userRegisteredCallback) props.userRegisteredCallback(resp.user);
+  }
+
+  const validateEmail = (email: string) => (/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(.\w{2,3})+$/.test(email))
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const u = { ...user }
+    switch (e.target.name) {
+      case "firstName": u.firstName = e.target.value; break;
+      case "lastName": u.lastName = e.target.value; break;
+      case "email": u.email = e.target.value; break;
+    }
+    setUser(u);
+  }
+
+  const validate = () => {
+    let errors = [];
+    if (!user.email?.trim()) errors.push("Please enter your email address.");
+    else if (!validateEmail(user.email)) errors.push("Please enter a valid email address.");
+    if (!user.firstName?.trim()) errors.push("Please enter your first name.");
+    if (!user.lastName?.trim()) errors.push("Please enter your last name.");
+    setErrors(errors);
+    return errors.length === 0;
+  }
+
+  const register: FormEventHandler = (e) => {
+    e.preventDefault();
+    props.updateErrors([])
+    if (validate()) {
+      setIsSubmitting(true);
+      ApiHelper.postAnonymous("/users/register", user, "MembershipApi")
+        .then((resp: any) => {
+          if (resp.errors) handleRegisterErrors(resp.errors);
+          else handleRegisterSuccess(resp);
+        })
+        .catch((e) => { props.updateErrors([e.toString()]); throw e; })
+        .finally(() => {
+          setIsSubmitting(false)
+        });
+    } else {
+      e.preventDefault();
+    }
+  };
+
+  const getThankYou = () => (
+    <>
+      <p>Thank you for registering. Please check your email to continue.</p>
+    </>
+  )
+
+  const getForm = () => (<>
+    <ErrorMessages errors={errors} />
+    <form onSubmit={register}>
+      <TextField fullWidth name="firstName" label="First Name" value={user.firstName} onChange={handleChange} />
+      <TextField fullWidth name="lastName" label="Last Name" value={user.lastName} onChange={handleChange} />
+      <TextField fullWidth type="email" name="email" label="Email" value={user.email} onChange={handleChange} />
+      <br />
+      <Stack direction="row" sx={{ marginTop: 1 }} spacing={1} justifyContent="end">
+        {props.loginCallback && (<Button variant="text" onClick={(e) => { e.preventDefault(); props.loginCallback(); }}>Login</Button>)}
+        <Button id="signInButton" variant="contained" disableElevation type="submit" disabled={isSubmitting} color="primary" onClick={register} sx={{ "&:focus": { outline: "none" } }}>
+          {isSubmitting ? "Please wait..." : "Register"}
+        </Button>
+      </Stack>
+    </form>
+  </>)
+
+  if (registered) return getThankYou();
+  else return getForm();
+
+};

package/src/pageComponents/components/SelectChurchModal.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { ChurchInterface, LoginUserChurchInterface } from "../../interfaces";
+import { SelectChurchSearch } from "./SelectChurchSearch";
+import { SelectableChurch } from "./SelectableChurch";
+import { ErrorMessages } from "../../components"
+import { Dialog, DialogContent, DialogTitle } from "@mui/material";
+
+interface Props {
+  appName: string,
+  show: boolean,
+  userChurches?: LoginUserChurchInterface[],
+  selectChurch: (churchId: string) => void,
+  registeredChurchCallback?: (church: ChurchInterface) => void,
+  errors?: string[]
+}
+
+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} />))}
+      <a href="about:blank" style={{ display: "block", textAlign: "center" }} onClick={(e) => { e.preventDefault(); setShowSearch(true); }}>Choose another church</a>
+    </>);
+  }
+
+  return (
+    <Dialog open={props.show} onClose={handleClose}>
+      <DialogTitle>Select Church</DialogTitle>
+      <DialogContent sx={{ width: 500, maxWidth: "100%" }}>
+        <ErrorMessages errors={props.errors} />
+        {getContents()}
+      </DialogContent>
+    </Dialog>
+  );
+};