@churchapps/apphelper-login 0.4.13

package/src/components/Register.tsx

@@ -0,0 +1,371 @@
+"use client";
+
+import React, { FormEventHandler } from "react";
+import { LoginResponseInterface, RegisterUserInterface, UserInterface } from "@churchapps/helpers";
+import { ApiHelper } from "@churchapps/helpers";
+import { AnalyticsHelper, Locale } from "../helpers";
+import { TextField, Card, CardContent, Typography, Button } 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(Locale.label("login.validate.email"));
+    else if (!validateEmail(user.email)) errors.push(Locale.label("login.validate.email"));
+    if (!user.firstName?.trim()) errors.push(Locale.label("login.validate.firstName"));
+    if (!user.lastName?.trim()) errors.push(Locale.label("login.validate.lastName"));
+    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)
+        });
+    }
+  };
+
+  if (registered) {
+    return (
+      <div style={{ minHeight: '100vh', backgroundColor: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px' }}>
+        <Card sx={{ 
+          width: '100%', 
+          maxWidth: { xs: '400px', sm: '500px' },
+          backgroundColor: 'white', 
+          border: '1px solid #e5e7eb',
+          boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)'
+        }}>
+          <CardContent sx={{ textAlign: 'center', padding: '32px' }}>
+            <div style={{ marginBottom: '32px' }}>
+              <img 
+                src="/images/logo-login.png" 
+                alt="Church Logo" 
+                style={{ 
+                  maxWidth: '100%', 
+                  width: 'auto',
+                  height: 'auto',
+                  maxHeight: '80px', 
+                  marginBottom: '16px',
+                  objectFit: 'contain'
+                }}
+              />
+            </div>
+            <Typography 
+              component="h1" 
+              sx={{ 
+                fontSize: '24px', 
+                fontWeight: 'bold', 
+                color: '#111827',
+                marginBottom: '32px'
+              }}
+            >
+              Registration Complete
+            </Typography>
+            <Typography sx={{ color: '#6b7280', marginBottom: '24px' }}>
+              {Locale.label("login.registerThankYou")}
+            </Typography>
+            <button
+              type="button"
+              onClick={(e) => { e.preventDefault(); props.loginCallback && props.loginCallback(); }}
+              style={{
+                background: 'none',
+                border: 'none',
+                color: '#3b82f6',
+                fontSize: '14px',
+                cursor: 'pointer',
+                textDecoration: 'none'
+              }}
+              onMouseOver={(e) => e.currentTarget.style.textDecoration = 'underline'}
+              onMouseOut={(e) => e.currentTarget.style.textDecoration = 'none'}
+            >
+              Back to sign in
+            </button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ minHeight: '100vh', backgroundColor: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px' }}>
+      <Card sx={{ 
+        width: '100%', 
+        maxWidth: { xs: '400px', sm: '500px' },
+        backgroundColor: 'white', 
+        border: '1px solid #e5e7eb',
+        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)'
+      }}>
+        <CardContent sx={{ textAlign: 'center', padding: '32px' }}>
+          <div style={{ marginBottom: '32px' }}>
+            <img 
+              src="/images/logo-login.png" 
+              alt="Church Logo" 
+              style={{ 
+                maxWidth: '100%', 
+                width: 'auto',
+                height: 'auto',
+                maxHeight: '80px', 
+                marginBottom: '16px',
+                objectFit: 'contain'
+              }}
+            />
+          </div>
+          <Typography 
+            component="h1" 
+            sx={{ 
+              fontSize: '24px', 
+              fontWeight: 'bold', 
+              color: '#111827',
+              marginBottom: '8px'
+            }}
+          >
+            Create Account
+          </Typography>
+          <Typography 
+            sx={{ 
+              color: '#6b7280',
+              marginBottom: '32px'
+            }}
+          >
+            Create a new account to access your church
+          </Typography>
+
+          <form onSubmit={register} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+            {errors.length > 0 && (
+              <div style={{ 
+                backgroundColor: '#fef2f2', 
+                border: '1px solid #fecaca', 
+                borderRadius: '6px', 
+                padding: '12px',
+                textAlign: 'left'
+              }}>
+                {errors.map((error, index) => (
+                  <div key={index} style={{ color: '#dc2626', fontSize: '14px' }}>{error}</div>
+                ))}
+              </div>
+            )}
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label htmlFor="firstName" style={{ fontSize: '14px', fontWeight: 500, color: '#374151', textAlign: 'left' }}>
+                  First Name
+                </label>
+                <TextField
+                  id="firstName"
+                  name="firstName"
+                  type="text"
+                  placeholder="First Name"
+                  value={user.firstName}
+                  onChange={handleChange}
+                  required
+                  autoComplete="given-name"
+                  variant="outlined"
+                  fullWidth
+                  sx={{
+                    '& .MuiOutlinedInput-root': {
+                      backgroundColor: 'white',
+                      '& fieldset': { 
+                        borderColor: '#d1d5db' 
+                      },
+                      '&:hover fieldset': { 
+                        borderColor: '#d1d5db' 
+                      },
+                      '&.Mui-focused fieldset': { 
+                        borderColor: '#3b82f6' 
+                      },
+                      '& input': { 
+                        color: '#111827',
+                        fontSize: '16px'
+                      }
+                    },
+                    '& .MuiInputLabel-root': {
+                      display: 'none'
+                    }
+                  }}
+                />
+              </div>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label htmlFor="lastName" style={{ fontSize: '14px', fontWeight: 500, color: '#374151', textAlign: 'left' }}>
+                  Last Name
+                </label>
+                <TextField
+                  id="lastName"
+                  name="lastName"
+                  type="text"
+                  placeholder="Last Name"
+                  value={user.lastName}
+                  onChange={handleChange}
+                  required
+                  autoComplete="family-name"
+                  variant="outlined"
+                  fullWidth
+                  sx={{
+                    '& .MuiOutlinedInput-root': {
+                      backgroundColor: 'white',
+                      '& fieldset': { 
+                        borderColor: '#d1d5db' 
+                      },
+                      '&:hover fieldset': { 
+                        borderColor: '#d1d5db' 
+                      },
+                      '&.Mui-focused fieldset': { 
+                        borderColor: '#3b82f6' 
+                      },
+                      '& input': { 
+                        color: '#111827',
+                        fontSize: '16px'
+                      }
+                    },
+                    '& .MuiInputLabel-root': {
+                      display: 'none'
+                    }
+                  }}
+                />
+              </div>
+            </div>
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+              <label htmlFor="email" style={{ fontSize: '14px', fontWeight: 500, color: '#374151', textAlign: 'left' }}>
+                Email
+              </label>
+              <TextField
+                id="email"
+                name="email"
+                type="email"
+                placeholder="Email"
+                value={user.email}
+                onChange={handleChange}
+                required
+                autoComplete="email"
+                variant="outlined"
+                fullWidth
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    backgroundColor: 'white',
+                    '& fieldset': { 
+                      borderColor: '#d1d5db' 
+                    },
+                    '&:hover fieldset': { 
+                      borderColor: '#d1d5db' 
+                    },
+                    '&.Mui-focused fieldset': { 
+                      borderColor: '#3b82f6' 
+                    },
+                    '& input': { 
+                      color: '#111827',
+                      fontSize: '16px'
+                    }
+                  },
+                  '& .MuiInputLabel-root': {
+                    display: 'none'
+                  }
+                }}
+              />
+            </div>
+
+            <Button
+              type="submit"
+              variant="contained"
+              fullWidth
+              disabled={isSubmitting}
+              sx={{
+                backgroundColor: 'hsl(218, 85%, 55%)',
+                color: 'white',
+                padding: '12px',
+                textTransform: 'none',
+                fontSize: '16px',
+                fontWeight: 500,
+                borderRadius: '6px',
+                '&:hover': { 
+                  backgroundColor: 'hsl(218, 85%, 50%)' 
+                },
+                '&:disabled': { 
+                  backgroundColor: '#9ca3af' 
+                }
+              }}
+            >
+              {isSubmitting ? "Please wait..." : "Register"}
+            </Button>
+
+            <div style={{ textAlign: 'center' }}>
+              <div style={{ fontSize: '14px', color: '#6b7280' }}>
+                Already have an account?{' '}
+                <button
+                  type="button"
+                  onClick={(e) => { e.preventDefault(); props.loginCallback && props.loginCallback(); }}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    color: '#3b82f6',
+                    fontSize: '14px',
+                    cursor: 'pointer',
+                    textDecoration: 'none'
+                  }}
+                  onMouseOver={(e) => e.currentTarget.style.textDecoration = 'underline'}
+                  onMouseOut={(e) => e.currentTarget.style.textDecoration = 'none'}
+                >
+                  Sign in
+                </button>
+              </div>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/src/components/SelectChurchModal.tsx

@@ -0,0 +1,82 @@
+"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 } 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} />))}
+			<button 
+				type="button"
+				style={{ 
+					display: "block", 
+					textAlign: "center", 
+					background: "none", 
+					border: "none", 
+					color: "#3b82f6", 
+					cursor: "pointer", 
+					textDecoration: "underline" 
+				}} 
+				onClick={(e) => { e.preventDefault(); setShowSearch(true); }}
+			>
+				{Locale.label("selectChurch.another")}
+			</button>
+		</>);
+	}
+
+	return (
+		<Dialog 
+			open={props.show} 
+			onClose={handleClose}
+			aria-labelledby="select-church-title"
+			aria-describedby="select-church-content"
+		>
+			<DialogTitle id="select-church-title">{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: 500, maxWidth: "100%" }}>
+				<ErrorMessages errors={props.errors} />
+				{getContents()}
+			</DialogContent>
+		</Dialog>
+	);
+};

package/src/components/SelectChurchRegister.tsx

@@ -0,0 +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 => {
+        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

@@ -0,0 +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 => 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()}
+		</>
+
+	);
+};