@churchapps/apphelper 0.1.2 → 0.1.4

package/src/pageComponents/components/Forgot.tsx

@@ -1,79 +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>
-  );
-}
+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

@@ -1,54 +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>
-  );
-}
+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

@@ -1,63 +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>
-  );
-}
+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

@@ -1,107 +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();
-
-};
+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();
+
+};