gracepress/libre-study
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add hosted login persistence

Browse Source
This commit is contained in:
Jason
2026-07-15 15:33:47 -05:00
parent 02ffa1dfc4
commit e62ec49c59
9 changed files with 508 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
+119
View File
@@ -7,6 +7,83 @@
color: #202124;
}
.login-shell {
display: grid;
min-height: 100vh;
place-items: center;
padding: 28px;
background:
linear-gradient(135deg, rgba(47, 111, 94, 0.16), transparent 36%),
#ece9df;
color: #202124;
box-sizing: border-box;
}
.login-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
gap: 28px;
width: min(760px, 100%);
padding: 28px;
border: 1px solid #d4cdbd;
border-radius: 8px;
background: #fffef8;
box-shadow: 0 20px 50px rgba(44, 48, 42, 0.14);
box-sizing: border-box;
}
.login-panel h1 {
margin: 12px 0 10px;
font-size: 42px;
line-height: 1.05;
letter-spacing: 0;
}
.login-panel p {
margin: 0;
color: #657061;
line-height: 1.5;
}
.login-panel form,
.login-panel label {
display: grid;
gap: 10px;
}
.login-panel form {
align-content: start;
padding-top: 4px;
}
.login-panel label {
color: #657061;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.login-panel input {
min-height: 40px;
font-size: 15px;
}
.login-panel button {
min-height: 40px;
background: #2f6f5e;
color: #fffef8;
font-size: 14px;
}
.login-error {
padding: 10px 12px;
border: 1px solid #d6a5a0;
border-radius: 6px;
background: #fff4f2;
color: #8b231a;
font-weight: 700;
}
.app-shell.menu-open .reader {
filter: blur(1.5px) brightness(0.62) saturate(0.72);
}
@@ -260,6 +337,11 @@ button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
opacity: 0.62;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
@@ -1531,6 +1613,29 @@ textarea:focus-visible {
color: #eee8d8;
}
.theme-dark.login-shell {
background:
linear-gradient(135deg, rgba(47, 111, 94, 0.24), transparent 36%),
#161a18;
}
.theme-dark .login-panel {
border-color: #3f493f;
background: #222820;
color: #eee8d8;
}
.theme-dark .login-panel p,
.theme-dark .login-panel label {
color: #c4cbbb;
}
.theme-dark .login-error {
border-color: #71443d;
background: #35221f;
color: #f2b0a8;
}
.theme-dark .reader {
background: #161a18;
}
@@ -1965,6 +2070,20 @@ textarea:focus-visible {
}
@media (max-width: 760px) {
.login-shell {
padding: 18px;
}
.login-panel {
grid-template-columns: 1fr;
gap: 22px;
padding: 22px;
}
.login-panel h1 {
font-size: 34px;
}
.app-shell {
grid-template-columns: 1fr;
}
src/App.tsx
+126 -25
View File
@@ -15,12 +15,15 @@ import {
createSession,
defaultTranslationId,
hostedWorkspaceEnabled,
loadHostedSession,
loadWorkspaceSnapshot,
loginHostedWorkspace,
logoutHostedWorkspace,
saveWorkspaceSnapshot,
timelineId,
timelineLimit,
} from './workspace'
import type { DragEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react'
import type { DragEvent, FormEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react'
import type {
AudioBibleContext,
AudioBibleSegment,
@@ -32,6 +35,7 @@ import type {
} from './types'
import type {
StrongDisplayMode,
HostedUser,
StudySession,
StudySettings,
ThemeMode,
@@ -245,6 +249,12 @@ function App() {
const [audioSpeed, setAudioSpeed] = useState(1)
const [marginResourcesLoading, setMarginResourcesLoading] = useState(false)
const [mapResourcesLoading, setMapResourcesLoading] = useState(false)
const [authRequired, setAuthRequired] = useState(false)
const [hostedUser, setHostedUser] = useState<HostedUser | null>(null)
const [loginUsername, setLoginUsername] = useState('')
const [loginPassword, setLoginPassword] = useState('')
const [loginBusy, setLoginBusy] = useState(false)
const [loginError, setLoginError] = useState<string | null>(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const restoredSessionId = useRef('')
@@ -445,33 +455,45 @@ function App() {
],
)
async function restoreWorkspace(cancelled = () => false) {
setLoading(true)
setError(null)
setAuthRequired(false)
workspaceHydrated.current = false
if (hostedWorkspaceEnabled()) {
const session = await loadHostedSession()
if (cancelled()) return
setHostedUser(session.user)
if (!session.authenticated) {
setAuthRequired(true)
setLoading(false)
return
}
}
const workspace = await loadWorkspaceSnapshot()
const selectedSession =
workspace.sessions.find((session) => session.id === workspace.activeSessionId) ?? workspace.sessions[0]
if (cancelled()) return
applyStudySettings(workspace.studySettings)
setSessions(workspace.sessions)
setActiveSessionId(workspace.activeSessionId)
getTranslations().then(setTranslations).catch((reason) => setError(String(reason)))
await loadLibrary(selectedSession.baseTranslation)
if (cancelled()) return
setLoading(false)
window.setTimeout(() => {
workspaceHydrated.current = true
}, 0)
}
useEffect(() => {
let cancelled = false
async function restoreWorkspace() {
const workspace = await loadWorkspaceSnapshot()
const selectedSession =
workspace.sessions.find((session) => session.id === workspace.activeSessionId) ?? workspace.sessions[0]
if (cancelled) return
applyStudySettings(workspace.studySettings)
setSessions(workspace.sessions)
setActiveSessionId(workspace.activeSessionId)
getTranslations().then(setTranslations).catch((reason) => setError(String(reason)))
loadLibrary(selectedSession.baseTranslation)
.catch((reason) => setError(String(reason)))
.finally(() => {
if (!cancelled) {
setLoading(false)
window.setTimeout(() => {
workspaceHydrated.current = true
}, 0)
}
})
}
restoreWorkspace().catch((reason) => {
restoreWorkspace(() => cancelled).catch((reason) => {
if (!cancelled) {
setError(String(reason))
setLoading(false)
@@ -1042,6 +1064,33 @@ function App() {
URL.revokeObjectURL(url)
}
async function submitHostedLogin(event: FormEvent<HTMLFormElement>) {
event.preventDefault()
setLoginBusy(true)
setLoginError(null)
try {
const session = await loginHostedWorkspace(loginUsername.trim(), loginPassword)
setHostedUser(session.user)
setLoginPassword('')
await restoreWorkspace()
} catch (reason) {
setLoginError(String(reason))
} finally {
setLoginBusy(false)
}
}
async function signOutHostedWorkspace() {
setError(null)
await logoutHostedWorkspace()
setHostedUser(null)
setSessions([])
setActiveSessionId('')
setAuthRequired(true)
setLoading(false)
workspaceHydrated.current = false
}
function restoreTimelineEntry(entry: TimelineEntry) {
if (!entry.reference) return
const [bookPart, rest] = entry.reference.split(/ (?=\d+:\d+$)/)
@@ -1897,6 +1946,44 @@ function App() {
)
}
function renderHostedLogin() {
return (
<main className={`login-shell ${themeMode === 'dark' ? 'theme-dark' : 'theme-light'}`}>
<section className="login-panel" aria-label="Libre Study sign in">
<div>
<span className="brand-mark">LS</span>
<span className="eyebrow">Hosted Workspace</span>
<h1>Libre Study</h1>
<p>Sign in to load your private sessions, notes, settings, and study timeline.</p>
</div>
<form onSubmit={submitHostedLogin}>
<label>
Username
<input
autoComplete="username"
value={loginUsername}
onChange={(event) => setLoginUsername(event.target.value)}
/>
</label>
<label>
Password
<input
autoComplete="current-password"
type="password"
value={loginPassword}
onChange={(event) => setLoginPassword(event.target.value)}
/>
</label>
{loginError ? <p className="login-error">{loginError}</p> : null}
<button type="submit" disabled={loginBusy || !loginUsername.trim() || !loginPassword}>
{loginBusy ? 'Signing in...' : 'Sign in'}
</button>
</form>
</section>
</main>
)
}
function renderTimelineModal() {
if (!timelineModalOpen) return null
@@ -2460,6 +2547,10 @@ function App() {
const splitTemplate = `${splitPercent}fr 6px ${100 - splitPercent}fr`
if (authRequired && hostedWorkspaceEnabled()) {
return renderHostedLogin()
}
return (
<main
className={[
@@ -2494,6 +2585,16 @@ function App() {
<p className="rail-description">
A readable Bible page, study margin, notes workspace, and linked public Bible data.
</p>
{hostedUser ? (
<button
type="button"
title="Sign out"
onClick={() => signOutHostedWorkspace().catch((reason) => setError(String(reason)))}
>
<span className="rail-icon">U</span>
<span className="rail-copy"><strong>{hostedUser.username}</strong><small>Sign out</small></span>
</button>
) : null}
<button type="button" title="Session management" onClick={() => setSessionModalOpen(true)}>
<span className="rail-icon">S</span>
<span className="rail-copy"><strong>Sessions</strong><small>Save, export, and configure</small></span>
src/workspace.ts
+47
View File
@@ -65,6 +65,16 @@ export type WorkspaceSnapshot = {
studySettings: StudySettings
}
export type HostedUser = {
id: number
username: string
}
export type HostedSession = {
authenticated: boolean
user: HostedUser | null
}
export function hostedWorkspaceEnabled() {
return remoteWorkspaceEnabled
}
@@ -223,3 +233,40 @@ async function saveRemoteWorkspaceSnapshot(snapshot: WorkspaceSnapshot) {
throw new Error(`Unable to save hosted workspace: ${response.status} ${response.statusText}`)
}
}
export async function loadHostedSession(): Promise<HostedSession> {
if (!remoteWorkspaceEnabled) return { authenticated: false, user: null }
const response = await fetch(`${remoteWorkspaceApiBase}/session`, {
credentials: 'include',
})
if (!response.ok) {
throw new Error(`Unable to check hosted login: ${response.status} ${response.statusText}`)
}
return response.json() as Promise<HostedSession>
}
export async function loginHostedWorkspace(username: string, password: string): Promise<HostedSession> {
const response = await fetch(`${remoteWorkspaceApiBase}/login`, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password }),
})
if (!response.ok) {
throw new Error(response.status === 401 ? 'Invalid username or password.' : `Unable to log in: ${response.status} ${response.statusText}`)
}
return response.json() as Promise<HostedSession>
}
export async function logoutHostedWorkspace(): Promise<void> {
if (!remoteWorkspaceEnabled) return
const response = await fetch(`${remoteWorkspaceApiBase}/logout`, {
method: 'POST',
credentials: 'include',
})
if (!response.ok) {
throw new Error(`Unable to log out: ${response.status} ${response.statusText}`)
}
}