Skip to content

Commit aae57ac

Browse files
jzongkerjzongker
committed
Updated login and added bulk add to lessons
1 parent d962057 commit aae57ac

12 files changed

Lines changed: 740 additions & 75 deletions

File tree

‎package-lock.json‎

Lines changed: 20 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"@churchapps/apphelper": "0.6.15",
88
"@churchapps/apphelper-donations": "0.6.17",
99
"@churchapps/apphelper-forms": "0.6.14",
10-
"@churchapps/apphelper-login": "0.6.15",
10+
"@churchapps/apphelper-login": "0.6.16",
1111
"@churchapps/apphelper-markdown": "0.6.15",
1212
"@churchapps/apphelper-website": "0.6.17",
1313
"@churchapps/content-providers": "0.1.0",

‎public/images/logo-white.png‎

9.26 KB
Loading

‎public/locales/en.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1130,8 +1130,23 @@
11301130
"noPlans": "No plans found",
11311131
"plans": "Plans",
11321132
"scheduleLesson": "Schedule Lesson",
1133+
"bulkSchedule": "Bulk Schedule",
11331134
"serviceOrder": "Service Order"
11341135
},
1136+
"bulkLessonSchedule": {
1137+
"title": "Bulk Schedule Lessons",
1138+
"startingLesson": "Starting Lesson",
1139+
"startDate": "Start Date",
1140+
"interval": "Interval",
1141+
"weekly": "Weekly",
1142+
"biWeekly": "Bi-Weekly",
1143+
"date": "Date",
1144+
"lesson": "Lesson",
1145+
"venue": "Venue",
1146+
"noRemainingLessons": "No remaining lessons in this series. You've completed them all!",
1147+
"noPreviousLesson": "No previous lesson found to continue from. Schedule at least one lesson first.",
1148+
"lessonsToSchedule": "lessons to schedule"
1149+
},
11351150
"planPage": {
11361151
"assign": "Team Assignments",
11371152
"assignments": "Assignments",

‎src/Login.tsx‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { UserHelper, Permissions } from "@churchapps/apphelper";
55
import UserContext from "./UserContext";
66
import { LoginPage } from "@churchapps/apphelper-login";
77
import { Alert } from "@mui/material";
8+
import { LoginHeroPanel } from "./components/LoginHeroPanel";
89

910
export const Login: React.FC = () => {
1011
const [errors] = React.useState<string[]>([]);
@@ -46,29 +47,33 @@ export const Login: React.FC = () => {
4647
if (!auth) auth = "";
4748

4849
return (
49-
<div style={{ marginTop: -50, backgroundColor: "var(--bg-main)", minHeight: "100vh" }}>
50-
{process.env.REACT_APP_STAGE === "demo" && (
51-
<Alert severity="error" style={{ marginTop: 50 }}>
52-
<b>Demo:</b> This is the demo environment. All data is erased nightly.
53-
<br />
54-
You can log into a test church of "Grace Community Church"
55-
<br />
56-
Use the email "<b>demo@b1.church</b>" and password "<b>password</b>".
57-
</Alert>
58-
)}
59-
<LoginPage
60-
auth={auth}
61-
context={context}
62-
jwt={jwt}
63-
appName="B1Admin"
64-
appUrl={window.location.href}
65-
callbackErrors={errors}
66-
returnUrl={returnUrl}
67-
handleRedirect={handleRedirect}
68-
defaultEmail={process.env.REACT_APP_STAGE === "demo" ? "demo@b1.church" : undefined}
69-
defaultPassword={process.env.REACT_APP_STAGE === "demo" ? "password" : undefined}
70-
showFooter={true}
71-
/>
50+
<div className="split-login-page" style={{ display: "flex", minHeight: "100vh" }}>
51+
<LoginHeroPanel />
52+
<div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
53+
{process.env.REACT_APP_STAGE === "demo" && (
54+
<Alert severity="error" style={{ margin: "16px 16px 0" }}>
55+
<b>Demo:</b> This is the demo environment. All data is erased nightly.
56+
<br />
57+
You can log into a test church of "Grace Community Church"
58+
<br />
59+
Use the email "<b>demo@b1.church</b>" and password "<b>password</b>".
60+
</Alert>
61+
)}
62+
<LoginPage
63+
auth={auth}
64+
context={context}
65+
jwt={jwt}
66+
appName="B1Admin"
67+
appUrl={window.location.href}
68+
callbackErrors={errors}
69+
returnUrl={returnUrl}
70+
handleRedirect={handleRedirect}
71+
defaultEmail={process.env.REACT_APP_STAGE === "demo" ? "demo@b1.church" : undefined}
72+
defaultPassword={process.env.REACT_APP_STAGE === "demo" ? "password" : undefined}
73+
showFooter={true}
74+
containerStyle={{ minHeight: "auto", flex: 1 }}
75+
/>
76+
</div>
7277
</div>
7378
);
7479
};

‎src/components/LoginHeroPanel.tsx‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import React from "react";
2+
3+
export const LoginHeroPanel: React.FC = () => (
4+
<>
5+
<style>{`
6+
.hero-panel {
7+
flex: 1;
8+
background: linear-gradient(135deg, var(--c1d3) 0%, var(--c1) 40%, var(--c1l2) 100%);
9+
display: flex;
10+
flex-direction: column;
11+
justify-content: center;
12+
align-items: center;
13+
padding: 48px;
14+
position: relative;
15+
overflow: hidden;
16+
}
17+
.hero-panel::before {
18+
content: '';
19+
position: absolute;
20+
top: -100px;
21+
right: -100px;
22+
width: 400px;
23+
height: 400px;
24+
border-radius: 50%;
25+
background: rgba(255,255,255,0.05);
26+
}
27+
.hero-panel::after {
28+
content: '';
29+
position: absolute;
30+
bottom: -80px;
31+
left: -80px;
32+
width: 300px;
33+
height: 300px;
34+
border-radius: 50%;
35+
background: rgba(255,255,255,0.04);
36+
}
37+
.hero-content {
38+
position: relative;
39+
z-index: 1;
40+
text-align: center;
41+
max-width: 420px;
42+
}
43+
.hero-logo {
44+
margin: 0 auto 32px;
45+
}
46+
.hero-logo img {
47+
max-width: 280px;
48+
height: auto;
49+
}
50+
.hero-title {
51+
font-size: 2.125rem;
52+
font-weight: 500;
53+
color: white;
54+
margin: 0 0 16px;
55+
line-height: 1.2;
56+
}
57+
.hero-subtitle {
58+
font-size: 1rem;
59+
color: rgba(255,255,255,0.8);
60+
line-height: 1.6;
61+
margin: 0 0 40px;
62+
}
63+
.hero-features {
64+
display: flex;
65+
flex-direction: column;
66+
gap: 16px;
67+
text-align: left;
68+
}
69+
.hero-feature {
70+
display: flex;
71+
align-items: center;
72+
gap: 12px;
73+
color: rgba(255,255,255,0.9);
74+
font-size: 0.875rem;
75+
}
76+
.hero-feature-icon {
77+
width: 32px;
78+
height: 32px;
79+
min-width: 32px;
80+
background: rgba(255,255,255,0.15);
81+
border-radius: 8px;
82+
display: flex;
83+
align-items: center;
84+
justify-content: center;
85+
}
86+
.hero-feature-icon svg {
87+
width: 16px;
88+
height: 16px;
89+
fill: white;
90+
}
91+
@media (max-width: 900px) {
92+
.hero-panel {
93+
display: none;
94+
}
95+
}
96+
`}</style>
97+
<div className="hero-panel">
98+
<div className="hero-content">
99+
<div className="hero-logo">
100+
<img src="/images/logo-white.png" alt="B1.church" />
101+
</div>
102+
<h1 className="hero-title">Church Management<br />Made Simple</h1>
103+
<p className="hero-subtitle">
104+
Manage your congregation, plan services, track attendance, and handle donations &mdash; all in one place.
105+
</p>
106+
<div className="hero-features">
107+
<div className="hero-feature">
108+
<div className="hero-feature-icon">
109+
<svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
110+
</div>
111+
<span>People &amp; household management</span>
112+
</div>
113+
<div className="hero-feature">
114+
<div className="hero-feature-icon">
115+
<svg viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/></svg>
116+
</div>
117+
<span>Service planning &amp; scheduling</span>
118+
</div>
119+
<div className="hero-feature">
120+
<div className="hero-feature-icon">
121+
<svg viewBox="0 0 24 24"><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>
122+
</div>
123+
<span>Donations &amp; financial tracking</span>
124+
</div>
125+
<div className="hero-feature">
126+
<div className="hero-feature-icon">
127+
<svg viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
128+
</div>
129+
<span>Website builder &amp; content management</span>
130+
</div>
131+
</div>
132+
</div>
133+
</div>
134+
</>
135+
);

0 commit comments

Comments
 (0)