{esc(title)}

+ + {visibleKindCount} reported {visibleKindCount === 1 ? "issue" : "issues"} + + ) : undefined + } + /> + + {workspace === "issue" && + items + .filter( + (item) => + item.status === "awaiting_confirmation" && + canConfirmResolution(item) && + item.created_by_username === me?.username, + ) + .map((item) => ( +

Is it fixed?

{item.title}

+ + Answer YES or NO → + +

+ ))} + + {workspace === "request" ? ( +

+ + +

+ ) : null} + + {error &&

{error}

} + {status &&

{status}

} + + {workspace === "request" ? ( +

Search and request content

Search Seerr content directly, then submit a request in one click.

+ + {discoverError &&

{discoverError}

} +

+ {discoverLoading ? ( +

Searching Seerr…

+ ) : discoverResults.length === 0 ? ( +

No discovery results yet.

+ ) : ( + discoverResults.map((item, index) => { + const key = `${item.type ?? "unknown"}:${item.tmdbId ?? index}`; + const requesting = Boolean(requestingTmdbIds[key]); + const poster = resolveTmdbArtworkUrl(item.posterPath, "w185"); + const hasRequest = typeof item.requestId === "number" && item.requestId > 0; + return ( +

+ {poster ? ( +

+ ) : ( +

No artwork

+ )} +

+ {item.title || "Untitled"} + {item.type ?? "unknown"} + {item.year ? {item.year} : null} +

+ {hasRequest ? ( + <> + Already requested + {item.statusLabel ? ` · ${item.statusLabel}` : ""} + {item.requestId ? ` · #${item.requestId}` : ""} + + ) : ( + "Not requested yet" + )} +

+ {hasRequest ? ( + + ) : ( + + )} +

+ ); + }) + )} +

+ ) : ( +

+ + {issueSelectedMedia?.requestId ? ( +

+ Reporting a problem with + + {issueSelectedMedia.title} + {issueSelectedMedia.year ? ` (${issueSelectedMedia.year})` : ""} + + Request #{issueSelectedMedia.requestId} is already selected. +

+ + Back to request + +

+ ) : null} +

+ {ISSUE_CATEGORIES.map((category) => ( + + ))} +

+ + + {selectedIssueDefinition && issueCategory ? ( + <> + +

+ + Find the exact movie or TV show +

+ { + setIssueMediaQuery(event.target.value); + if (issueSelectedMedia) { + setIssueSelectedMedia(null); + setIssueMediaTitle(""); + setIssueOptions(null); + issueOptionsVersion.current += 1; + setIssueOptionsLoading(false); + setIssueSymptoms([]); + setIssueDevices([]); + setActiveSeasonNumber(null); + setSelectedSeasonNumbers([]); + setSelectedEpisodeIds([]); + } + }} + placeholder="Search the media catalogue" + onKeyDown={(event) => { + if (event.key === "Enter") { + event.preventDefault(); + void searchIssueMedia(); + } + }} + /> + +

+ + {issueMediaResults.length > 0 ? ( +

+ {issueMediaResults.map((media, index) => { + const poster = resolveTmdbArtworkUrl(media.posterPath, "w185"); + return ( + + ); + })} +

+ ) : null} + {issueSelectedMedia ? ( +

+ Selected title + + {issueSelectedMedia.title} + {issueSelectedMedia.year ? ` (${issueSelectedMedia.year})` : ""} + + + {issueSelectedMedia.type === "tv" ? "TV show" : "Movie"} + {issueSelectedMedia.requestId + ? ` · Magent request #${issueSelectedMedia.requestId} · ${issueSelectedMedia.statusLabel ?? "Tracked"}` + : " · No existing Magent request"} + +

+ {issueSelectedMedia.requestId ? ( + + ) : null} +

+ ) : null} + + {issueOptionsLoading ? ( +

+ + + {issueSelectedMedia?.type === "movie" + ? "Checking the movie file" + : "Reading seasons and episodes"} + +

+ ) : null} + {issueOptionsMessage && !issueOptions ? ( +
{issueOptionsMessage}
+ ) : null} +

+ {issueSelectedMedia && !issueOptionsLoading ? ( +
+ {issueOptions ? ( + + ) : issueSelectedMedia.requestId ? ( + + ) : null} +
+ ) : null} + + + {issueOptions ? ( + <> + +
+ Choose all that apply +
+ {(issueOptions.request_type === "movie" && issueCategory === "missing_content" + ? ["Entire title is missing"] + : ISSUE_SYMPTOMS[issueCategory] + ).map((symptom) => { + const selected = issueSymptoms.includes(symptom); + return ( + + ); + })} +
+
+ {issueOptions.request_type === "movie" && !movieTargetAvailable ? ( +
+ No managed movie file is available to repair. + +
+ ) : null} +
+ +
+ + + {issueNeedsTvTargets ? ( + `Season ${season}`), + ...selectedEpisodeOptions.map((episode) => episode.code), + ].join(", ")} + > + {issueSymptoms.length > 0 && issueOptions.request_type === "tv" && !missingEntireTitle ? ( +
+
+ {missingSeasons ? "Choose the missing seasons" : "Choose a season"} + You can select more than one. +
+ {missingSeasons ? ( +
+ {issueOptions.seasons.map((season) => { + const selected = selectedSeasonNumbers.includes(season.season_number); + return ( + + ); + })} +
+ ) : null} + + {issueCategory !== "missing_content" || missingEpisodes ? ( +
+ {issueOptions.seasons.map((season) => ( + + ))} +
+ ) : null} + + {(issueCategory !== "missing_content" || missingEpisodes) && + activeSeasonNumber !== null ? ( +
+ {issueOptions.episodes + .filter( + (episode) => episode.season_number === activeSeasonNumber && episode.released, + ) + .map((episode) => { + const selected = selectedEpisodeIds.includes(episode.id); + const disabled = issueRequiresExistingFile && !episode.has_file; + return ( + + ); + })} +
+ ) : null} +
+ ) : null} +
+ + {selectedSeasonNumbers.length ? `${selectedSeasonNumbers.length} season(s) selected` : ""} + {selectedSeasonNumbers.length && selectedEpisodeIds.length ? " · " : ""} + {selectedEpisodeIds.length ? `${selectedEpisodeIds.length} episode(s) selected` : ""} + + +
+ + ) : null} + + {issueNeedsDevices ? ( + + {issueTargetReady && + (issueNeedsServerCheck || issueCategory === "audio" || issueCategory === "subtitle") ? ( +
+ Choose all that apply +
+ {DEVICE_OPTIONS.map((device) => ( + + ))} +
+
+ {issueDevices.length + ? `Selected: ${issueDevices.join(", ")}` + : "Optional — these choices will be included in your report."} +
+
+ ) : null} +
+ + +
+ + ) : null} + + + {issueNeedsServerCheck && issueTargetReady ? ( +
+
+
+ Live media-server check +
+ {mediaServerChecking + ? "Checking Jellyfin now..." + : (mediaServerStatus?.headline ?? "Server check unavailable")} +
+
+ +
+ {mediaServerChecking ? ( +
+ + Contacting the media server +
+ ) : null} + {mediaServerError ?
{mediaServerError}
: null} + {mediaServerStatus ? ( + <> +
{mediaServerStatus.message}
+
+
+ Server API + + {mediaServerStatus.status === "down" ? "Unavailable" : "Responding"} + +
+
+ Response + {mediaServerStatus.latency_ms ?? "--"} ms +
+
+ Active streams + + {mediaServerStatus.activity?.available + ? (mediaServerStatus.activity.active_streams ?? 0) + : "--"} + +
+
+ Transcoding + + {mediaServerStatus.activity?.available + ? (mediaServerStatus.activity.transcoding_streams ?? 0) + : "--"} + +
+
+ + ) : null} +
+ ) : null} + {issueTargetReady ? ( +
+
+ What will happen +
+ {issueOptions?.can_act === false + ? "The selected details will be sent to support." + : selectedIssueDefinition.outcome} +
+
+ {issueOptions?.can_act === false + ? "The issue and every selection will be sent to support. Automatic fixes are not enabled for this account." + : issueCategory === "subtitle" + ? "The issue will be logged, then Bazarr will search for fresh subtitles for every selection." + : issueCategory === "missing_content" + ? "The issue will be logged, then the selected movie, seasons, or episodes will be sent back to the collection pipeline." + : issueSupportsReplacement + ? "The issue will be logged, then the selected content will be sent to Sonarr or Radarr for replacement." + : "The live Jellyfin check will be attached so support can see the server state immediately."} +
+
+ +
+ ) : null} + + + ) : null} + + ) : null} +

+ +

+ )} + + {workspace === "request" ? ( + <> +
+
+ Total {workspace === "request" ? "requests" : "issues"} + {visibleKindCount} +
+
+ Total comments + {Number(overview?.overview?.total_comments ?? 0)} +
+
+ My items + {Number(overview?.my_items ?? 0)} +
+
+ Visible + {items.length} +
+
+ +
+
{workspace === "request" ? "Create request item" : "Create issue item"}
+
+ {workspace === "request" + ? "Create and track request-related notes in a dedicated request workflow." + : "Create and track operational issues in a dedicated issue workflow."} +
+
+ + Priority + + + + Title + setCreateTitle(event.target.value)} + placeholder={ + workspace === "request" ? "Short summary of the request item" : "Short summary of the issue" + } + /> + + + Description + setCreateDescription(event.target.value)} + placeholder={ + workspace === "request" + ? "Add request context, expected media, and notes." + : "Describe the issue, impact, and expected behavior." + } + /> + </label> + {workspace === "request" && ( + <> + <label> + <span>Media type</span> + <select value={createMediaType} onChange={(event) => setCreateMediaType(event.target.value)}> + {MEDIA_TYPE_OPTIONS.map((option) => ( + <option key={option.value || "none"} value={option.value}> + {option.label} + </option> + ))} + </select> + </label> + <label> + <span>Year</span> + <input + value={createYear} + onChange={(event) => setCreateYear(event.target.value)} + inputMode="numeric" + placeholder="Optional" + /> + </label> + </> + )} + <label className="portal-field-span-2"> + <span>External reference</span> + <input + value={createExternalRef} + onChange={(event) => setCreateExternalRef(event.target.value)} + placeholder="Optional: URL, ticket number, or request id" + /> + </label> + <div className="admin-inline-actions portal-field-span-2"> + <button type="submit" disabled={creating}> + {creating ? "Creating…" : workspace === "request" ? "Create request item" : "Create issue item"} + </button> + </div> + </form> + </section> + </> + ) : null} + + <div + className={ + workspace === "issue" + ? `issue-reports-column ${selectedItemId != null ? "has-open-modal" : ""}` + : "portal-lower-content" + } + > + {workspace === "issue" ? ( + <div className="issue-history-heading"> + <div> + <span className="section-kicker">Issue history</span> + <h2>Reported problems</h2> + </div> + <span>{totalItems} total</span> + </div> + ) : null} + + <section className="portal-toolbar"> + <label> + <span>Status</span> + <select value={filterStatus} onChange={(event) => setFilterStatus(event.target.value)}> + <option value="">All</option> + {(workspace === "request" ? REQUEST_FILTER_STATUS_OPTIONS : ISSUE_FILTER_STATUS_OPTIONS).map((option) => ( + <option key={option.value} value={option.value}> + {option.label} + </option> + ))} + </select> + </label> + {workspace === "request" ? ( + <label className="portal-search-filter"> + <span>Search</span> + <input + value={filterSearch} + onChange={(event) => setFilterSearch(event.target.value)} + placeholder="Search request items by title, description, or id" + /> + </label> + ) : null} + <label className="inline-checkbox portal-mine-toggle"> + <input type="checkbox" checked={filterMine} onChange={(event) => setFilterMine(event.target.checked)} /> + My items only + </label> + </section> + + <div className="portal-workspace"> + <section className="admin-panel portal-list-panel"> + <div className="user-directory-panel-header"> + <div> + <h2>{workspace === "request" ? "Requests" : "Issues"}</h2> + <p className="lede"> + {totalItems} total {workspaceLabelPlural} + {hasMore ? " (showing first 60)" : ""} + </p> + </div> + </div> + {items.length === 0 ? ( + <div className="status-banner">No {workspaceLabelPlural} match this filter.</div> + ) : ( + <div className="portal-item-list"> + {items.map((item) => ( + <button + key={item.id} + type="button" + className={`portal-item-row ${selectedItemId === item.id ? "is-active" : ""}`} + onClick={() => setSelectedItemId(item.id)} + > + <div className="portal-item-row-main"> + <div className="portal-item-row-title"> + <strong>{item.title}</strong> + <span className="small-pill"> + {item.kind === "issue" + ? (ISSUE_TYPE_LABELS[item.issue?.issue_type ?? "general"] ?? "Issue") + : item.kind} + </span> + <span className="small-pill is-muted">{item.priority}</span> + </div> + <p>{item.description}</p> + {item.kind === "issue" ? <IssuePipeline item={item} compact /> : null} + <div className="portal-item-row-meta"> + <span>#{item.id}</span> + {item.kind === "request" ? ( + <span>Status: {item.workflow?.stage_label ?? item.status}</span> + ) : null} + {isAdmin ? <span>By: {item.created_by_username}</span> : null} + <span>Updated: {formatDate(item.last_activity_at)}</span> + </div> + </div> + </button> + ))} + </div> + )} + </section> + + {workspace === "issue" && selectedItemId != null ? ( + <button + type="button" + className="issue-modal-backdrop" + aria-label="Close issue details" + onClick={closeIssueModal} + /> + ) : null} + + <section + className={`admin-panel portal-detail-panel ${workspace === "issue" ? `issue-detail-modal ${selectedItemId != null ? "is-open" : ""}` : ""}`} + role={workspace === "issue" ? "dialog" : "region"} + aria-labelledby={workspace === "issue" ? "issue-detail-title" : undefined} + > + {workspace === "issue" && selectedItemId != null ? ( + <div className="issue-modal-toolbar"> + <div> + <span className="section-kicker">Reported problem</span> + <strong id="issue-detail-title"> + {selectedItem ? `Issue #${selectedItem.id}` : "Issue details"} + </strong> + </div> + <div className="issue-modal-toolbar-actions"> + {canDeleteSelected ? ( + <button + type="button" + className="danger-button" + disabled={deleting} + onClick={() => setDeleteConfirming(true)} + > + Delete issue + </button> + ) : null} + <button type="button" className="ghost-button" disabled={deleting} onClick={closeIssueModal}> + Close + </button> + </div> + </div> + ) : null} + {!selectedItemId ? ( + <div className="status-banner">Select a {workspaceLabel} to view details.</div> + ) : loadingItem ? ( + <div className="status-banner">Loading details…</div> + ) : !selectedItem ? ( + <div className="status-banner">{workspace === "request" ? "Request" : "Issue"} not found.</div> + ) : ( + <> + {selectedItem.kind === "issue" && + selectedItem.status === "awaiting_confirmation" && + canConfirmResolution(selectedItem) && ( + <ResolutionChoice + title={selectedItem.title} + busy={respondingResolution} + onAnswer={(value) => void respondToResolution(value)} + /> + )} + <div className="user-directory-panel-header"> + <div> + <h2> + {selectedItem.kind === "request" ? "Request" : "Issue"} #{selectedItem.id} + </h2> + <p className="lede"> + {isAdmin ? `Created by ${selectedItem.created_by_username} on ` : "Reported on "} + {formatDate(selectedItem.created_at)} + </p> + {selectedItem.kind === "issue" ? ( + <p className="lede"> + Category:{" "} + <strong>{ISSUE_TYPE_LABELS[selectedItem.issue?.issue_type ?? "general"] ?? "General"}</strong> + {selectedItem.issue?.is_resolved ? " · Resolved" : ""} + </p> + ) : null} + {selectedItem.kind === "request" && ( + <p className="lede"> + Pipeline:{" "} + <strong> + {selectedItem.workflow?.request_status ?? "pending"} /{" "} + {selectedItem.workflow?.media_status ?? "pending"} + </strong>{" "} + ({selectedItem.workflow?.stage_label ?? "Pending"}) + </p> + )} + </div> + </div> + + {selectedItem.kind === "issue" && canDeleteSelected && deleteConfirming ? ( + <section className="issue-delete-confirmation" aria-live="polite"> + <div> + <span className="section-kicker">Permanent deletion</span> + <h3>Delete issue #{selectedItem.id}?</h3> + <p> + This removes the issue, its comments, and its activity history. The linked media request and + collected content will not be changed. + </p> + </div> + <div> + <button + type="button" + className="ghost-button" + disabled={deleting} + onClick={() => setDeleteConfirming(false)} + > + Cancel + </button> + <button + type="button" + className="danger-button" + disabled={deleting} + onClick={() => void deleteIssue()} + > + {deleting ? "Deleting…" : "Delete permanently"} + </button> + </div> + </section> + ) : null} + + {selectedItem.kind === "issue" ? <IssuePipeline item={selectedItem} /> : null} + + {selectedItem.kind === "issue" && selectedItem.external_ref?.startsWith("/requests/") ? ( + <div className="issue-linked-request"> + <div> + <span className="section-kicker">Linked collection record</span> + <strong>{selectedItem.external_ref.replace("/requests/", "Request #")}</strong> + </div> + <button type="button" onClick={() => router.push(selectedItem.external_ref as string)}> + Open request + </button> + </div> + ) : null} + + <form className="admin-form compact-form portal-form-grid" onSubmit={saveItem}> + <label className="portal-field-span-2"> + <span>Title</span> + <input + value={editTitle} + onChange={(event) => setEditTitle(event.target.value)} + disabled={!canEditSelected} + /> + </label> + <label className="portal-field-span-2"> + <span>Description</span> + <textarea + rows={4} + value={editDescription} + onChange={(event) => setEditDescription(event.target.value)} + disabled={!canEditSelected} + /> + </label> + {selectedItem.kind === "request" ? ( + <> + <label> + <span>Media type</span> + <select + value={editMediaType} + onChange={(event) => setEditMediaType(event.target.value)} + disabled={!canEditSelected} + > + {MEDIA_TYPE_OPTIONS.map((option) => ( + <option key={option.value || "none"} value={option.value}> + {option.label} + </option> + ))} + </select> + </label> + <label> + <span>Year</span> + <input + value={editYear} + onChange={(event) => setEditYear(event.target.value)} + inputMode="numeric" + disabled={!canEditSelected} + /> + </label> + </> + ) : null} + <label className="portal-field-span-2"> + <span>External reference</span> + <input + value={editExternalRef} + onChange={(event) => setEditExternalRef(event.target.value)} + disabled={!canEditSelected} + /> + </label> + {canModerateSelected && ( + <> + {selectedItem.kind === "request" ? ( + <> + <label> + <span>Request status</span> + <select + value={editRequestStatus} + onChange={(event) => setEditRequestStatus(event.target.value)} + > + {REQUEST_STATUS_OPTIONS.map((option) => ( + <option key={option.value} value={option.value}> + {option.label} + </option> + ))} + </select> + </label> + <label> + <span>Media status</span> + <select + value={editMediaStatus} + onChange={(event) => setEditMediaStatus(event.target.value)} + > + {MEDIA_STATUS_OPTIONS.map((option) => ( + <option key={option.value} value={option.value}> + {option.label} + </option> + ))} + </select> + </label> + </> + ) : ( + <> + <label> + <span>Status</span> + <select value={editStatus} onChange={(event) => setEditStatus(event.target.value)}> + {STATUS_OPTIONS.map((option) => ( + <option key={option.value} value={option.value}> + {option.label} + </option> + ))} + </select> + </label> + <label> + <span>Issue category</span> + <select value={editIssueType} onChange={(event) => setEditIssueType(event.target.value)}> + {Object.entries(ISSUE_TYPE_LABELS).map(([value, label]) => ( + <option key={value} value={value}> + {label} + </option> + ))} + </select> + </label> + </> + )} + <label> + <span>Priority</span> + <select value={editPriority} onChange={(event) => setEditPriority(event.target.value)}> + {PRIORITY_OPTIONS.map((option) => ( + <option key={option.value} value={option.value}> + {option.label} + </option> + ))} + </select> + </label> + <label className="portal-field-span-2"> + <span>Assignee username</span> + <input + value={editAssignee} + onChange={(event) => setEditAssignee(event.target.value)} + placeholder="Optional assignee" + /> + </label> + </> + )} + <div className="admin-inline-actions portal-field-span-2"> + <button type="submit" disabled={saving || !canEditSelected}> + {saving ? "Saving…" : "Save changes"} + </button> + </div> + </form> + + {selectedItem.kind === "issue" ? ( + <section className="issue-activity-block"> + <div className="issue-activity-heading"> + <div> + <span className="section-kicker">Recorded work</span> + <h3>Issue activity</h3> + </div> + <span className="small-pill">{visibleActivity.length} events</span> + </div> + {visibleActivity.length === 0 ? ( + <div className="status-banner">No issue activity has been recorded yet.</div> + ) : ( + <ol className="issue-activity-list"> + {visibleActivity.map((entry) => ( + <li key={entry.id}> + <i aria-hidden="true" /> + <div> + <strong>{entry.message}</strong> + <span> + {entry.actor_username} ({entry.actor_role}) + </span> + </div> + <time dateTime={entry.created_at}>{formatDate(entry.created_at)}</time> + </li> + ))} + </ol> + )} + </section> + ) : null} + + <div className="portal-comments-block"> + <h3>Comments</h3> + {visibleComments.length === 0 ? ( + <div className="status-banner">No comments yet.</div> + ) : ( + <div className="portal-comment-list"> + {visibleComments.map((comment) => ( + <article key={comment.id} className="portal-comment-card"> + <header> + <strong>{comment.author_username}</strong> + <span className="small-pill">{comment.author_role}</span> + {comment.is_internal && <span className="small-pill is-muted">internal</span>} + <span>{formatDate(comment.created_at)}</span> + </header> + <p>{comment.message}</p> + </article> + ))} + </div> + )} + <form onSubmit={postComment} className="admin-form compact-form portal-comment-form"> + <label> + <span>Add comment</span> + <textarea + rows={3} + value={commentText} + onChange={(event) => setCommentText(event.target.value)} + placeholder="Add an update, troubleshooting note, or next step." + /> + </label> + {isAdmin && ( + <label className="inline-checkbox"> + <input + type="checkbox" + checked={commentInternal} + onChange={(event) => setCommentInternal(event.target.checked)} + /> + Internal comment (admin only) + </label> + )} + <div className="admin-inline-actions"> + <button type="submit" disabled={commenting}> + {commenting ? "Posting…" : "Post comment"} + </button> + </div> + </form> + </div> + </> + )} + </section> + </div> + </div> + </main> + ); +} diff --git a/frontend/app/portal/issue-flow.css b/frontend/app/portal/issue-flow.css new file mode 100644 index 0000000..7762b54 --- /dev/null +++ b/frontend/app/portal/issue-flow.css @@ -0,0 +1,56 @@ +/* One expanded procedure at a time; completed steps become editable summaries. */ +.issue-flow-progressive .issue-guided-form { padding: 0; border: 0; } +.issue-wizard-fields { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; } +.issue-procedure-step { min-width: 0; border-bottom: 1px solid var(--ops-line-soft); } +.issue-procedure-step:last-child { border-bottom: 0; } +.issue-procedure-step.is-current { padding: 16px 0 8px; } +.issue-procedure-step .issue-flow-heading { align-items: center; margin-bottom: 18px; } +.issue-procedure-step h2 { scroll-margin-top: 130px; } +.issue-procedure-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; animation: issue-step-enter 150ms ease-out; } +.issue-flow-progressive .issue-category-card { min-height: 122px; gap: 6px; padding: 14px; } +.issue-flow-progressive .issue-media-finder { padding: 0; border: 0; background: transparent; } +.page .issue-flow-progressive .issue-step-summary { + display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; + gap: 12px; width: 100%; padding: 10px 0; border: 0 !important; + background: transparent !important; text-align: left; color: var(--ops-text) !important; + box-shadow: none; text-transform: none; +} +.issue-step-summary .issue-step-number { width: 28px; height: 28px; color: var(--ops-primary-2); } +.issue-step-summary-copy { display: grid; gap: 3px; min-width: 0; } +.issue-step-summary-copy small { color: var(--ops-muted); font-size: 11px; font-weight: 500; } +.issue-step-summary-copy strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.issue-step-change { color: var(--ops-primary-2); font-size: 12px; } +.issue-step-summary:hover .issue-step-change { text-decoration: underline; } +.issue-procedure-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; } +.issue-procedure-actions button { min-height: 44px; } +.page .issue-procedure-actions > button:not(.ghost-button) { + background: #c7bdff !important; border-color: #c7bdff !important; color: #1c172c !important; +} +.issue-procedure-actions button:disabled { opacity: .4; } +.issue-selection-count { margin-right: auto; color: var(--ops-muted); font-size: 12px; } +.issue-flow-progressive .issue-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } +.issue-flow-progressive .issue-choice-row button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 48px; } +.issue-device-check { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid currentColor; border-radius: 6px; } +/* Legacy global button colours are !important; scoped overrides keep toggles visible. */ +.page .issue-flow-progressive button[aria-pressed='true'] { + border-color: #c7bdff !important; background: #373147 !important; color: #f5f0ff !important; + box-shadow: inset 0 0 0 1px #c7bdff; +} +.issue-device-feedback { margin: 4px 0 0; color: var(--ops-muted); font-size: 12px; line-height: 1.5; } +.issue-flow-progressive .issue-resolution-card { grid-template-columns: minmax(0, 1fr) auto; padding: 0; border: 0; } +.issue-flow-progressive .issue-resolution-card h3 { margin: 0; font-size: 19px; line-height: 1.4; } +.issue-flow-progressive .issue-resolution-card p { margin-top: 8px; font-size: 13px; } +.issue-flow-progressive .status-banner { display: grid; gap: 10px; } +.issue-flow-progressive .status-banner button { justify-self: start; } +@keyframes issue-step-enter { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } +@media (max-width: 680px) { + .issue-flow-progressive .issue-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .issue-flow-progressive .issue-category-card { min-height: 112px; padding: 12px; } + .issue-flow-progressive .issue-category-card p { display: none; } + .issue-flow-progressive .issue-category-card strong { font-size: 13px; } + .issue-procedure-step .issue-flow-heading h2 { font-size: 19px; } + .issue-flow-progressive .issue-step-summary { gap: 8px; } + .issue-flow-progressive .issue-choice-row button { font-size: 12px; padding: 10px; } + .issue-flow-progressive .issue-resolution-card { grid-template-columns: minmax(0, 1fr); } +} +@media (prefers-reduced-motion: reduce) { .issue-procedure-content { animation: none; } } diff --git a/frontend/app/portal/issues/page.tsx b/frontend/app/portal/issues/page.tsx new file mode 100644 index 0000000..fdea91e --- /dev/null +++ b/frontend/app/portal/issues/page.tsx @@ -0,0 +1,5 @@ +import PortalClient from "../PortalClient"; + +export default function IssuePortalPage() { + return <PortalClient workspace="issue" />; +} diff --git a/frontend/app/portal/page.tsx b/frontend/app/portal/page.tsx new file mode 100644 index 0000000..c0c88d7 --- /dev/null +++ b/frontend/app/portal/page.tsx @@ -0,0 +1,5 @@ +import { redirect } from "next/navigation"; + +export default function PortalIndexPage() { + redirect("/new-requests"); +} diff --git a/frontend/app/portal/requests/page.tsx b/frontend/app/portal/requests/page.tsx new file mode 100644 index 0000000..6f5e700 --- /dev/null +++ b/frontend/app/portal/requests/page.tsx @@ -0,0 +1,5 @@ +import { redirect } from "next/navigation"; + +export default function RequestPortalPage() { + redirect("/new-requests"); +} diff --git a/frontend/app/profile/MonthlyRecapPreference.tsx b/frontend/app/profile/MonthlyRecapPreference.tsx new file mode 100644 index 0000000..c945420 --- /dev/null +++ b/frontend/app/profile/MonthlyRecapPreference.tsx @@ -0,0 +1,223 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { useRouter } from "next/navigation"; +import { authFetch, getApiBase } from "../lib/auth"; +import "../email-recaps/recaps.css"; + +type Preference = { + automatic_monthly: boolean; + state: "off" | "pending" | "expired" | "enabled"; + email: string | null; + can_subscribe: boolean; + detail: string; + schedule_enabled: boolean; + next_send_at: number | null; + day: number; + hour: number; + resend_after: number | null; +}; +const scheduled = (value: number) => + `${new Date(value * 1000).toLocaleString(undefined, { dateStyle: "long", timeStyle: "short", timeZone: "UTC" })} UTC`; + +export default function MonthlyRecapPreference() { + const router = useRouter(); + const [data, setData] = useState<Preference | null>(null); + const [automatic, setAutomatic] = useState(false); + const [busy, setBusy] = useState(false); + const [error, setError] = useState(""); + const [notice, setNotice] = useState(""); + const [revision, setRevision] = useState(0); + const [now, setNow] = useState(Date.now()); + + useEffect(() => { + void revision; + const abort = new AbortController(); + setError(""); + void authFetch(`${getApiBase()}/profile/email-recaps`, { signal: abort.signal }) + .then(async (response) => { + if (response.status === 401) { + router.replace("/login?next=%2Fprofile"); + return; + } + if (!response.ok) throw new Error("Could not load your email preference. Please try again."); + const result = (await response.json()) as Preference; + if (!abort.signal.aborted) { + setData(result); + setAutomatic(result.automatic_monthly); + } + }) + .catch((err: Error) => { + if (!abort.signal.aborted) setError(err.message); + }); + return () => abort.abort(); + }, [revision, router]); + + useEffect(() => { + if (!data?.resend_after || data.state === "enabled" || data.resend_after * 1000 <= Date.now()) return; + const timer = window.setInterval(() => setNow(Date.now()), 1000); + return () => window.clearInterval(timer); + }, [data?.resend_after, data?.state]); + + const save = async (enabled: boolean, monthly = automatic) => { + if (busy) return; + setBusy(true); + setError(""); + setNotice(""); + try { + const response = await authFetch(`${getApiBase()}/profile/email-recaps`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ enabled, automatic_monthly: monthly }), + }); + if (response.status === 401) { + router.replace("/login?next=%2Fprofile"); + return; + } + const result = await response.json().catch(() => ({})); + if (!response.ok) + throw new Error(typeof result.detail === "string" ? result.detail : "Could not update your email preference."); + setData(result); + setAutomatic(result.automatic_monthly); + setNow(Date.now()); + setNotice( + result.message || (enabled ? "Personal report emails are enabled." : "Personal report emails are off."), + ); + } catch (err) { + setError(err instanceof Error ? err.message : "Could not update your email preference."); + // A confirmation may be pending even if SMTP could not confirm delivery. + const response = await authFetch(`${getApiBase()}/profile/email-recaps`).catch(() => null); + if (response?.ok) { + const fresh = await response.json(); + setData(fresh); + setAutomatic(fresh.automatic_monthly); + setNow(Date.now()); + } + } finally { + setBusy(false); + } + }; + + const cooldown = data?.resend_after ? Math.max(0, Math.ceil(data.resend_after - now / 1000)) : 0; + return ( + <section className="recap-preference" id="monthly-recaps" aria-labelledby="recap-preference-title"> + <div className="recap-section-heading"> + <div> + <span className="recap-eyebrow">A little look back</span> + <h2 id="recap-preference-title">Your reports, your choice.</h2> + </div> + {data && ( + <span className={`recap-pill ${data.state === "enabled" ? "is-enabled" : ""}`}> + { + { off: "Off", pending: "Check your inbox", expired: "Confirmation expired", enabled: "Email confirmed" }[ + data.state + ] + } + </span> + )} + </div> + <p> + Email yourself your viewing report whenever you want. Choose a previous month or the current month so far, and + decide whether you also want automatic monthly emails.{" "} + <a href="/insights/reports">Explore your latest report ↗</a> + </p> + {!data && !error && <p role="status">Loading your email preference…</p>} + {data && ( + <> + {data.state === "enabled" ? ( + <p className="recap-delivery-address"> + Recaps will go to <strong>{data.email}</strong>.{" "} + {!data.automatic_monthly + ? "On demand only: choose a month in Reports and email it whenever you want." + : data.schedule_enabled && data.next_send_at + ? `Next scheduled send: ${scheduled(data.next_send_at)}.` + : "The administrator has paused scheduled delivery."} + </p> + ) : ( + <p> + {data.state === "pending" + ? `Check ${data.email} for a confirmation link. It expires after 24 hours. No viewing history is emailed until you confirm.` + : data.state === "expired" + ? "Request a new confirmation link to turn on your recaps." + : "Confirm your profile email to turn this on. You can unsubscribe from any recap or here in Profile."} + </p> + )} + {!data.can_subscribe && data.state !== "enabled" && <p className="recap-muted">{data.detail}</p>} + {data.state !== "enabled" && data.can_subscribe && automatic && !data.schedule_enabled && ( + <p className="recap-muted"> + You can subscribe now. Monthly sends will begin when your administrator starts the schedule. + </p> + )} + <label className="recap-delivery-choice"> + Delivery preference + <select + value={automatic ? "monthly" : "manual"} + disabled={busy || data.state === "pending"} + onChange={(event) => { + const monthly = event.target.value === "monthly"; + setAutomatic(monthly); + if (data.state === "enabled") void save(true, monthly); + }} + > + <option value="manual">On demand only</option> + <option value="monthly">On demand + automatic monthly emails</option> + </select> + </label> + <div className="recap-actions"> + {data.state !== "enabled" && ( + <button + type="button" + className="account-primary" + disabled={busy || !data.can_subscribe || cooldown > 0} + onClick={() => void save(true)} + > + {busy + ? "Sending confirmation…" + : data.state === "off" + ? "Confirm my email for reports" + : "Send a new confirmation"} + </button> + )} + {data.state !== "off" && ( + <button type="button" className="account-secondary" disabled={busy} onClick={() => void save(false)}> + {busy ? "Updating…" : data.state === "enabled" ? "Turn off report emails" : "Cancel subscription"} + </button> + )} + <button + type="button" + className="account-secondary" + disabled={busy} + onClick={() => { + setNotice(""); + setRevision((value) => value + 1); + }} + > + Refresh preference + </button> + </div> + {cooldown > 0 && data.state !== "enabled" && ( + <p className="recap-muted"> + Another confirmation can be requested in {Math.ceil(cooldown / 60)}{" "} + {Math.ceil(cooldown / 60) === 1 ? "minute" : "minutes"}. + </p> + )} + </> + )} + {error && ( + <p className="account-notice is-error" role="alert"> + {error} + {!data && ( + <button type="button" className="account-secondary" onClick={() => setRevision((value) => value + 1)}> + Try again + </button> + )} + </p> + )} + {notice && ( + <p className="account-notice is-status" role="status"> + {notice} + </p> + )} + </section> + ); +} diff --git a/frontend/app/profile/NewsletterPreference.tsx b/frontend/app/profile/NewsletterPreference.tsx new file mode 100644 index 0000000..bfb1d4f --- /dev/null +++ b/frontend/app/profile/NewsletterPreference.tsx @@ -0,0 +1,197 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { useRouter } from "next/navigation"; +import { authFetch, getApiBase } from "../lib/auth"; +import "../email-recaps/recaps.css"; + +type Preference = { + state: "off" | "pending" | "expired" | "enabled"; + email: string | null; + can_subscribe: boolean; + detail: string; + schedule_enabled: boolean; + next_send_at: number | null; + weekday: number; + hour: number; + resend_after: number | null; +}; +const scheduled = (value: number) => + `${new Date(value * 1000).toLocaleString(undefined, { dateStyle: "long", timeStyle: "short", timeZone: "UTC" })} UTC`; + +export default function NewsletterPreference() { + const router = useRouter(); + const [data, setData] = useState<Preference | null>(null); + const [busy, setBusy] = useState(false); + const [error, setError] = useState(""); + const [notice, setNotice] = useState(""); + const [revision, setRevision] = useState(0); + const [now, setNow] = useState(Date.now()); + + useEffect(() => { + void revision; + const abort = new AbortController(); + setError(""); + void authFetch(`${getApiBase()}/profile/newsletters`, { signal: abort.signal }) + .then(async (response) => { + if (response.status === 401) { + router.replace("/login?next=%2Fprofile"); + return; + } + if (!response.ok) throw new Error("Could not load your email preference. Please try again."); + const result = (await response.json()) as Preference; + if (!abort.signal.aborted) setData(result); + }) + .catch((err: Error) => { + if (!abort.signal.aborted) setError(err.message); + }); + return () => abort.abort(); + }, [revision, router]); + + useEffect(() => { + if (!data?.resend_after || data.state === "enabled" || data.resend_after * 1000 <= Date.now()) return; + const timer = window.setInterval(() => setNow(Date.now()), 1000); + return () => window.clearInterval(timer); + }, [data?.resend_after, data?.state]); + + const save = async (enabled: boolean) => { + if (busy) return; + setBusy(true); + setError(""); + setNotice(""); + try { + const response = await authFetch(`${getApiBase()}/profile/newsletters`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ enabled }), + }); + if (response.status === 401) { + router.replace("/login?next=%2Fprofile"); + return; + } + const result = await response.json().catch(() => ({})); + if (!response.ok) + throw new Error(typeof result.detail === "string" ? result.detail : "Could not update your email preference."); + setData(result); + setNow(Date.now()); + setNotice(result.message || (enabled ? "Newsletters are on." : "Newsletters are off.")); + } catch (err) { + setError(err instanceof Error ? err.message : "Could not update your email preference."); + // A confirmation may be pending even if SMTP could not confirm delivery. + const response = await authFetch(`${getApiBase()}/profile/newsletters`).catch(() => null); + if (response?.ok) { + setData(await response.json()); + setNow(Date.now()); + } + } finally { + setBusy(false); + } + }; + + const cooldown = data?.resend_after ? Math.max(0, Math.ceil(data.resend_after - now / 1000)) : 0; + return ( + <section className="recap-preference" id="newsletters" aria-labelledby="newsletter-preference-title"> + <div className="recap-section-heading"> + <div> + <span className="recap-eyebrow">Your next watch</span> + <h2 id="newsletter-preference-title">New in your library.</h2> + </div> + {data && ( + <span className={`recap-pill ${data.state === "enabled" ? "is-enabled" : ""}`}> + { + { off: "Off", pending: "Check your inbox", expired: "Confirmation expired", enabled: "Subscribed" }[ + data.state + ] + } + </span> + )} + </div> + <p> + Your minutes, movies, episodes, longest run and requests, in one personal monthly email.{" "} + <a href="/insights/reports">Explore your latest report ↗</a> + </p> + {!data && !error && <p role="status">Loading your email preference…</p>} + {data && ( + <> + {data.state === "enabled" ? ( + <p className="recap-delivery-address"> + Newsletters will go to <strong>{data.email}</strong>.{" "} + {data.schedule_enabled && data.next_send_at + ? `Next scheduled send: ${scheduled(data.next_send_at)}.` + : "Weekly sending is paused. You may still receive editions scheduled by your administrator."} + </p> + ) : ( + <p> + {data.state === "pending" + ? `Check ${data.email} for a confirmation link. It expires after 24 hours. Your newsletter subscription starts after you confirm.` + : data.state === "expired" + ? "Request a new confirmation link to turn on newsletters." + : "Subscribe with your profile email. If you already confirmed it for monthly recaps, you can turn this on straight away. Otherwise, we?ll send a confirmation link."} + </p> + )} + {!data.can_subscribe && data.state !== "enabled" && <p className="recap-muted">{data.detail}</p>} + {data.state !== "enabled" && data.can_subscribe && !data.schedule_enabled && ( + <p className="recap-muted">You can subscribe now, ready for the next edition your administrator sends.</p> + )} + <div className="recap-actions"> + {data.state !== "enabled" && ( + <button + type="button" + className="account-primary" + disabled={busy || !data.can_subscribe || cooldown > 0} + onClick={() => void save(true)} + > + {busy + ? "Sending confirmation…" + : data.state === "off" + ? "Email me new arrivals" + : "Resend newsletter confirmation"} + </button> + )} + {data.state !== "off" && ( + <button type="button" className="account-secondary" disabled={busy} onClick={() => void save(false)}> + {busy + ? "Updating…" + : data.state === "enabled" + ? "Turn off newsletters" + : "Cancel newsletter subscription"} + </button> + )} + <button + type="button" + className="account-secondary" + disabled={busy} + onClick={() => { + setNotice(""); + setRevision((value) => value + 1); + }} + > + Refresh newsletter preference + </button> + </div> + {cooldown > 0 && data.state !== "enabled" && ( + <p className="recap-muted"> + Another confirmation can be requested in {Math.ceil(cooldown / 60)}{" "} + {Math.ceil(cooldown / 60) === 1 ? "minute" : "minutes"}. + </p> + )} + </> + )} + {error && ( + <p className="account-notice is-error" role="alert"> + {error} + {!data && ( + <button type="button" className="account-secondary" onClick={() => setRevision((value) => value + 1)}> + Try again + </button> + )} + </p> + )} + {notice && ( + <p className="account-notice is-status" role="status"> + {notice} + </p> + )} + </section> + ); +} diff --git a/frontend/app/profile/invites/page.tsx b/frontend/app/profile/invites/page.tsx new file mode 100644 index 0000000..66f2b21 --- /dev/null +++ b/frontend/app/profile/invites/page.tsx @@ -0,0 +1,629 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import { useCallback, useEffect, useMemo, useState } from "react"; +import { authFetch, clearToken, getApiBase, getToken } from "../../lib/auth"; +import { useEffectiveRole } from "../../lib/viewMode"; +import InviteDeliveryChoice from "../../ui/InviteDeliveryChoice"; +import PageHeading from "../../ui/PageHeading"; + +type ProfileInfo = { username: string; role: string; invite_management_enabled?: boolean }; +type OwnedInvite = { + id: number; + code: string; + label?: string | null; + description?: string | null; + code_available?: boolean; + recipient_email?: string | null; + max_uses?: number | null; + use_count: number; + remaining_uses?: number | null; + enabled: boolean; + expires_at?: string | null; + is_usable?: boolean; + created_at?: string | null; +}; +type OwnedInvitesResponse = { + invites?: OwnedInvite[]; + invite_access?: { enabled?: boolean; managed_by_master?: boolean }; + master_invite?: { + id: number; + code: string; + label?: string | null; + max_uses?: number | null; + expires_at?: string | null; + } | null; +}; +type InviteForm = { + code: string; + label: string; + description: string; + recipient_email: string; + enabled: boolean; + message: string; +}; +type DeliveryMethod = "" | "manual" | "email"; + +const defaultInviteForm = (): InviteForm => ({ + code: "", + label: "", + description: "", + recipient_email: "", + enabled: true, + message: "", +}); +const formatDate = (value?: string | null) => { + if (!value) return "Never"; + const date = new Date(value); + return Number.isNaN(date.valueOf()) ? value : date.toLocaleString(); +}; +const isValidEmail = (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim()); + +export default function ProfileInvitesPage() { + const router = useRouter(); + const [profile, setProfile] = useState<ProfileInfo | null>(null); + const [invites, setInvites] = useState<OwnedInvite[]>([]); + const [inviteAccessEnabled, setInviteAccessEnabled] = useState(false); + const [inviteManagedByMaster, setInviteManagedByMaster] = useState(false); + const [masterInvite, setMasterInvite] = useState<OwnedInvitesResponse["master_invite"]>(null); + const [loading, setLoading] = useState(true); + const [saving, setSaving] = useState(false); + const [error, setError] = useState<string | null>(null); + const [status, setStatus] = useState<string | null>(null); + const [editingId, setEditingId] = useState<number | null>(null); + const [flowStep, setFlowStep] = useState(1); + const [useCustomCode, setUseCustomCode] = useState(false); + const [deliveryMethod, setDeliveryMethod] = useState<DeliveryMethod>(""); + const [inviteForm, setInviteForm] = useState<InviteForm>(defaultInviteForm()); + const [createdInvite, setCreatedInvite] = useState<OwnedInvite | null>(null); + const effectiveRole = useEffectiveRole(profile?.role); + const canManageInvites = + effectiveRole === "admin" || + (profile?.role === "admin" ? Boolean(profile.invite_management_enabled) : inviteAccessEnabled); + + const signupBaseUrl = useMemo(() => { + if (typeof window === "undefined") return "/signup"; + return `${window.location.origin}/signup`; + }, []); + + const loadInvites = useCallback(async () => { + const response = await authFetch(`${getApiBase()}/auth/profile/invites`); + if (!response.ok) { + if (response.status === 401) { + clearToken(); + router.push("/login"); + return; + } + throw new Error("Could not load your invite workspace."); + } + const data = (await response.json()) as OwnedInvitesResponse; + setInvites(Array.isArray(data.invites) ? data.invites : []); + setInviteAccessEnabled(Boolean(data.invite_access?.enabled)); + setInviteManagedByMaster(Boolean(data.invite_access?.managed_by_master)); + setMasterInvite(data.master_invite ?? null); + }, [router]); + + useEffect(() => { + if (!getToken()) { + router.push("/login"); + return; + } + const load = async () => { + try { + const profileResponse = await authFetch(`${getApiBase()}/auth/profile`); + if (!profileResponse.ok) { + if (profileResponse.status === 401) { + clearToken(); + router.push("/login"); + return; + } + throw new Error("Could not load your profile."); + } + const profileData = await profileResponse.json(); + setProfile(profileData?.user ?? null); + await loadInvites(); + } catch (err) { + console.error(err); + setError(err instanceof Error ? err.message : "Could not load your invite workspace."); + } finally { + setLoading(false); + } + }; + void load(); + }, [loadInvites, router]); + + const resetFlow = () => { + setEditingId(null); + setFlowStep(1); + setUseCustomCode(false); + setDeliveryMethod(""); + setInviteForm(defaultInviteForm()); + }; + + const editInvite = (invite: OwnedInvite) => { + setEditingId(invite.id); + setCreatedInvite(null); + setFlowStep(4); + setUseCustomCode(true); + setDeliveryMethod(invite.recipient_email ? "email" : "manual"); + setInviteForm({ + code: invite.code, + label: invite.label ?? "", + description: invite.description ?? "", + recipient_email: invite.recipient_email ?? "", + enabled: invite.enabled !== false, + message: "", + }); + setError(null); + setStatus(null); + window.scrollTo({ top: 0, behavior: "smooth" }); + }; + + const saveInvite = async (event: React.FormEvent) => { + event.preventDefault(); + if (!canManageInvites) return; + const inviteName = inviteForm.label.trim(); + const recipientEmail = inviteForm.recipient_email.trim(); + if (!inviteName) { + setError("Give this invite a name so you can recognise it later."); + return; + } + if (!deliveryMethod) { + setError("Choose how you want to deliver the invite."); + return; + } + if (deliveryMethod === "email" && !isValidEmail(recipientEmail)) { + setError("Enter a valid recipient email address."); + return; + } + setSaving(true); + setError(null); + setStatus(null); + try { + const response = await authFetch( + editingId == null + ? `${getApiBase()}/auth/profile/invites` + : `${getApiBase()}/auth/profile/invites/${editingId}`, + { + method: editingId == null ? "POST" : "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + code: useCustomCode ? inviteForm.code || null : null, + label: inviteName, + description: inviteForm.description || null, + recipient_email: deliveryMethod === "email" ? recipientEmail : null, + enabled: inviteForm.enabled, + send_email: editingId == null && deliveryMethod === "email", + message: inviteForm.message || null, + }), + }, + ); + if (!response.ok) { + if (response.status === 401) { + clearToken(); + router.push("/login"); + return; + } + throw new Error((await response.text()) || "Could not save the invite."); + } + const data = await response.json(); + const savedInvite = data?.invite as OwnedInvite | undefined; + setStatus( + data?.email?.status === "ok" + ? `Invite created and emailed to ${data.email.recipient_email}.` + : data?.email?.status === "error" + ? `Invite created, but the email could not be sent: ${data.email.detail}` + : editingId == null + ? "Invite link created and ready to share." + : "Invite updated.", + ); + resetFlow(); + if (editingId == null && savedInvite) setCreatedInvite(savedInvite); + await loadInvites(); + } catch (err) { + console.error(err); + setError(err instanceof Error ? err.message : "Could not save the invite."); + } finally { + setSaving(false); + } + }; + + const deleteInvite = async (invite: OwnedInvite) => { + if (!canManageInvites) return; + if (!window.confirm(`Delete invite “${invite.label || invite.code}”?`)) return; + setError(null); + try { + const response = await authFetch(`${getApiBase()}/auth/profile/invites/${invite.id}`, { method: "DELETE" }); + if (!response.ok) throw new Error((await response.text()) || "Could not delete the invite."); + if (editingId === invite.id) resetFlow(); + setStatus(`Deleted ${invite.label || invite.code}.`); + await loadInvites(); + } catch (err) { + console.error(err); + setError(err instanceof Error ? err.message : "Could not delete the invite."); + } + }; + + const copyInviteLink = async (invite: OwnedInvite) => { + if (!canManageInvites) return; + try { + let usableInvite = invite; + if (!invite.code_available) { + const response = await authFetch(`${getApiBase()}/auth/profile/invites/${invite.id}/rotate`, { + method: "POST", + }); + if (!response.ok) throw new Error((await response.text()) || "Could not generate a replacement link."); + const data = await response.json(); + usableInvite = data.invite as OwnedInvite; + setInvites((current) => current.map((item) => (item.id === invite.id ? usableInvite : item))); + } + const url = `${signupBaseUrl}?code=${encodeURIComponent(usableInvite.code)}`; + await navigator.clipboard.writeText(url); + setStatus( + `Copied the link for ${invite.label || usableInvite.code}. Keep it safe; Magent will not display it again after this page reloads.`, + ); + } catch { + setError("Could not generate or copy the invite link."); + } + }; + + const codeCharacters = inviteForm.code.replace(/[^a-z0-9]/gi, ""); + const identityReady = Boolean(inviteForm.label.trim() && (!useCustomCode || codeCharacters.length >= 6)); + const createdInviteUrl = createdInvite ? `${signupBaseUrl}?code=${encodeURIComponent(createdInvite.code)}` : ""; + + if (loading) return <main className="card">Loading invite workspace…</main>; + + return ( + <main className="card invites-page"> + <PageHeading title="Invites" description="Invite someone to your media library and manage the links you share." /> + {error && <div className="error-banner">{error}</div>} + {status && <div className="status-banner">{status}</div>} + + {!canManageInvites ? ( + <section className="profile-section profile-tab-panel"> + <h2>Invites are not enabled for your account</h2> + <p className="lede">Ask an administrator if you need permission to invite someone.</p> + </section> + ) : ( + <section className="profile-section profile-invites-section profile-tab-panel"> + <div className="invite-flow-heading"> + <div> + <span className="eyebrow">Invite flow</span> + <h2>{editingId == null ? "Create an invite" : `Edit ${inviteForm.label || "invite"}`}</h2> + <p className="lede">Set up the invite one decision at a time.</p> + </div> + {editingId != null && ( + <button type="button" className="ghost-button" onClick={resetFlow}> + Cancel edit + </button> + )} + </div> + + {createdInvite && editingId == null ? ( + <div className="invite-created-card" role="status"> + <span className="eyebrow">Invite ready</span> + <h3>{createdInvite.label || "Your invite"}</h3> + <p> + {createdInvite.recipient_email + ? `The invite was emailed to ${createdInvite.recipient_email}.` + : "Copy this link and send it to the person you are inviting."} + </p> + <div className="invite-created-link"> + <input value={createdInviteUrl} readOnly aria-label="Created invite link" /> + <button type="button" onClick={() => void copyInviteLink(createdInvite)}> + Copy link + </button> + </div> + <button + type="button" + className="ghost-button" + onClick={() => { + setCreatedInvite(null); + resetFlow(); + }} + > + Create another invite + </button> + </div> + ) : ( + <form onSubmit={saveInvite} className="invite-flow-form"> + <ol className="invite-flow-route" aria-label="Invite creation progress"> + {["Identity", "Description", "Access", "Delivery"].map((label, index) => { + const step = index + 1; + return ( + <li key={label} className={step === flowStep ? "is-active" : step < flowStep ? "is-complete" : ""}> + <span>{String(step).padStart(2, "0")}</span> + <strong>{label}</strong> + </li> + ); + })} + </ol> + + <section className={`invite-flow-step ${flowStep > 1 ? "is-complete" : "is-active"}`}> + <header> + <span className="invite-flow-number">01</span> + <div> + <span className="eyebrow">Identity</span> + <h3>Who is this invite for?</h3> + <p>Give it a name that will make sense when you return later.</p> + </div> + </header> + <div className="invite-flow-fields"> + <label> + <span>Invite name</span> + <input + value={inviteForm.label} + onChange={(event) => setInviteForm((current) => ({ ...current, label: event.target.value }))} + placeholder="Family, that guy from work, the neighbour" + /> + </label> + <label className="invite-flow-choice-line"> + <input + type="checkbox" + checked={useCustomCode} + disabled={editingId != null} + onChange={(event) => { + setUseCustomCode(event.target.checked); + if (!event.target.checked) setInviteForm((current) => ({ ...current, code: "" })); + }} + /> + <span> + <strong>Choose a custom invite code</strong> + <small> + The code appears at the end of the sign-up link. Leave this off and Magent will create a secure + code for you. + </small> + </span> + </label> + {useCustomCode && ( + <label> + <span>Custom code</span> + <input + value={inviteForm.code} + disabled={editingId != null} + onChange={(event) => setInviteForm((current) => ({ ...current, code: event.target.value }))} + placeholder="At least 6 letters or numbers" + /> + <small> + This becomes <code>/signup?code={inviteForm.code || "YOUR-CODE"}</code>. + </small> + </label> + )} + {flowStep === 1 && ( + <div className="invite-flow-actions"> + <button type="button" disabled={!identityReady} onClick={() => setFlowStep(2)}> + Continue to description + </button> + </div> + )} + </div> + </section> + + {flowStep >= 2 && ( + <section className={`invite-flow-step ${flowStep > 2 ? "is-complete" : "is-active"}`}> + <header> + <span className="invite-flow-number">02</span> + <div> + <span className="eyebrow">Description</span> + <h3>Add a welcome note</h3> + <p>This optional message is shown on the sign-up page.</p> + </div> + </header> + <div className="invite-flow-fields"> + <label> + <span>Welcome note (optional)</span> + <textarea + rows={3} + value={inviteForm.description} + onChange={(event) => + setInviteForm((current) => ({ ...current, description: event.target.value })) + } + placeholder="Welcome! Use this link to create your account." + /> + </label> + {flowStep === 2 && ( + <div className="invite-flow-actions"> + <button type="button" className="ghost-button" onClick={() => setFlowStep(1)}> + Back + </button> + <button + type="button" + className="ghost-button" + onClick={() => { + setInviteForm((current) => ({ ...current, description: "" })); + setFlowStep(3); + }} + > + Skip + </button> + <button type="button" onClick={() => setFlowStep(3)}> + Continue + </button> + </div> + )} + </div> + </section> + )} + + {flowStep >= 3 && ( + <section className={`invite-flow-step ${flowStep > 3 ? "is-complete" : "is-active"}`}> + <header> + <span className="invite-flow-number">03</span> + <div> + <span className="eyebrow">Access</span> + <h3>Account access is applied automatically</h3> + <p>Magent uses the safe invite policy configured by an administrator.</p> + </div> + </header> + <div className="invite-flow-fields"> + <div className="invite-policy-note"> + <strong>Standard user access</strong> + <span> + {inviteManagedByMaster && masterInvite + ? `Using the “${masterInvite.label || masterInvite.code}” invite policy. Usage and expiry limits are automatic.` + : "This invite creates a standard user account using your configured defaults."} + </span> + </div> + {flowStep === 3 && ( + <div className="invite-flow-actions"> + <button type="button" className="ghost-button" onClick={() => setFlowStep(2)}> + Back + </button> + <button type="button" onClick={() => setFlowStep(4)}> + Continue to delivery + </button> + </div> + )} + </div> + </section> + )} + + {flowStep >= 4 && ( + <section className="invite-flow-step is-active"> + <header> + <span className="invite-flow-number">04</span> + <div> + <span className="eyebrow">Delivery</span> + <h3>How will they receive it?</h3> + <p>Copy the link yourself, or let Magent email it directly.</p> + </div> + </header> + <div className="invite-flow-fields"> + <InviteDeliveryChoice + value={deliveryMethod} + onChange={(method) => { + setDeliveryMethod(method); + if (method === "manual") + setInviteForm((current) => ({ ...current, recipient_email: "", message: "" })); + }} + /> + {deliveryMethod === "manual" && ( + <div className="invite-delivery-summary"> + <strong>Your link will appear as soon as the invite is created.</strong> + <span>No email address is required and Magent will not send a message.</span> + </div> + )} + {deliveryMethod === "email" && ( + <div className="invite-flow-field-grid invite-delivery-fields"> + <label> + <span>Recipient email</span> + <input + type="email" + value={inviteForm.recipient_email} + onChange={(event) => + setInviteForm((current) => ({ ...current, recipient_email: event.target.value })) + } + placeholder="person@example.com" + /> + </label> + <label> + <span>Email note (optional)</span> + <textarea + rows={3} + value={inviteForm.message} + onChange={(event) => + setInviteForm((current) => ({ ...current, message: event.target.value })) + } + placeholder="A short personal message" + /> + </label> + </div> + )} + {editingId != null && ( + <label className="invite-status-control"> + <input + type="checkbox" + checked={inviteForm.enabled} + onChange={(event) => + setInviteForm((current) => ({ ...current, enabled: event.target.checked })) + } + /> + <span> + <strong>{inviteForm.enabled ? "Invite enabled" : "Invite disabled"}</strong> + <small>Disable this existing invite to stop its link from accepting sign-ups.</small> + </span> + </label> + )} + <div className="invite-flow-actions"> + <button type="button" className="ghost-button" onClick={() => setFlowStep(3)}> + Back + </button> + <button + type="submit" + disabled={ + saving || + !deliveryMethod || + (deliveryMethod === "email" && !isValidEmail(inviteForm.recipient_email)) + } + > + {saving + ? "Saving…" + : editingId != null + ? "Save invite" + : deliveryMethod === "email" + ? "Create and email invite" + : "Create invite link"} + </button> + </div> + </div> + </section> + )} + </form> + )} + + <div className="profile-invites-list"> + <div className="invite-flow-heading"> + <div> + <span className="eyebrow">Your invites</span> + <h2>Created invites</h2> + <p className="lede">Copy, edit, disable, or remove invitations you have made.</p> + </div> + </div> + {invites.length === 0 ? ( + <div className="status-banner">You have not created any invites yet.</div> + ) : ( + <div className="admin-list"> + {invites.map((invite) => ( + <div key={invite.id} className="admin-list-item"> + <div className="admin-list-item-main"> + <div className="admin-list-item-title-row"> + <strong>{invite.label || "Unnamed invite"}</strong> + <code className="invite-code">{invite.code}</code> + <span className={`small-pill ${invite.is_usable ? "" : "is-muted"}`}> + {invite.is_usable ? "Ready" : "Unavailable"} + </span> + </div> + {invite.description && ( + <p className="admin-list-item-text admin-list-item-text--muted">{invite.description}</p> + )} + <div className="admin-meta-row"> + <span>Delivery: {invite.recipient_email || "Manual link"}</span> + <span> + Uses: {invite.use_count} + {typeof invite.max_uses === "number" ? ` / ${invite.max_uses}` : ""} + </span> + <span>Expires: {formatDate(invite.expires_at)}</span> + <span>Created: {formatDate(invite.created_at)}</span> + </div> + </div> + <div className="admin-inline-actions"> + <button type="button" className="ghost-button" onClick={() => void copyInviteLink(invite)}> + {invite.code_available ? "Copy link" : "Generate replacement link"} + </button> + <button type="button" className="ghost-button" onClick={() => editInvite(invite)}> + Edit + </button> + <button type="button" onClick={() => void deleteInvite(invite)}> + Delete + </button> + </div> + </div> + ))} + </div> + )} + </div> + </section> + )} + </main> + ); +} diff --git a/frontend/app/profile/page.tsx b/frontend/app/profile/page.tsx new file mode 100644 index 0000000..74b989b --- /dev/null +++ b/frontend/app/profile/page.tsx @@ -0,0 +1,485 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import { type FormEvent, type KeyboardEvent, useCallback, useEffect, useState } from "react"; +import { authFetch, clearToken, getApiBase, getToken } from "../lib/auth"; +import { canAccess, type FeatureAccess } from "../lib/features"; +import { useEffectiveRole } from "../lib/viewMode"; +import PageHeading from "../ui/PageHeading"; +import MonthlyRecapPreference from "./MonthlyRecapPreference"; +import NewsletterPreference from "./NewsletterPreference"; + +type ProfileInfo = { + features?: FeatureAccess; + username: string; + email?: string | null; + role: string; + auth_provider: string; + password_change_supported?: boolean; + password_provider?: "local" | "jellyfin" | null; +}; +type ActivityEntry = { + ip: string; + user_agent: string; + first_seen_at: string; + last_seen_at: string; +}; +type ProfileResponse = { + user: ProfileInfo; + stats?: { total: number; ready: number; in_progress: number }; + activity?: { recent: ActivityEntry[] }; +}; +type Notice = { tone: "status" | "error"; message: string } | null; +type ProfileTab = "overview" | "security" | "activity"; +const TABS: { key: ProfileTab; label: string }[] = [ + { key: "overview", label: "Account" }, + { key: "security", label: "Security" }, + { key: "activity", label: "Activity" }, +]; +const normalizeTab = (value: string | null): ProfileTab => + value === "security" || value === "activity" ? value : "overview"; +const formatDate = (value?: string) => { + if (!value) return "Not recorded"; + const date = new Date(value); + return Number.isNaN(date.valueOf()) + ? "Not recorded" + : date.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" }); +}; +const deviceName = (agent: string) => { + const value = (agent || "").toLowerCase(); + const browser = value.includes("edg/") + ? "Edge" + : value.includes("firefox/") || value.includes("fxios/") + ? "Firefox" + : value.includes("chrome/") || value.includes("crios/") + ? "Chrome" + : value.includes("safari/") + ? "Safari" + : "Browser"; + const device = /iphone|ipad/.test(value) + ? "iOS" + : value.includes("android") + ? "Android" + : value.includes("windows") + ? "Windows" + : value.includes("macintosh") + ? "Mac" + : value.includes("linux") + ? "Linux" + : ""; + return device ? `${browser} on ${device}` : browser; +}; +const responseMessage = async (response: Response, fallback: string) => { + const data = await response.json().catch(() => null); + return typeof data?.detail === "string" && data.detail.trim() ? data.detail : fallback; +}; + +export default function ProfilePage() { + const router = useRouter(); + const [data, setData] = useState<ProfileResponse | null>(null); + const [loading, setLoading] = useState(true); + const [loadError, setLoadError] = useState(""); + const [activeTab, setActiveTab] = useState<ProfileTab>("overview"); + const [email, setEmail] = useState(""); + const [emailSaving, setEmailSaving] = useState(false); + const [emailNotice, setEmailNotice] = useState<Notice>(null); + const [currentPassword, setCurrentPassword] = useState(""); + const [newPassword, setNewPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [passwordSaving, setPasswordSaving] = useState(false); + const [passwordNotice, setPasswordNotice] = useState<Notice>(null); + const [showAllActivity, setShowAllActivity] = useState(false); + + const loadProfile = useCallback(async () => { + if (!getToken()) { + router.replace("/login?next=%2Fprofile"); + return; + } + setLoading(true); + setLoadError(""); + try { + const response = await authFetch(`${getApiBase()}/auth/profile`); + if (response.status === 401) { + clearToken(); + router.replace("/login?next=%2Fprofile"); + return; + } + if (!response.ok) throw new Error("Could not load your profile. Please try again."); + const profile = (await response.json()) as ProfileResponse; + setData(profile); + setEmail(profile.user.email ?? ""); + } catch { + setLoadError("Could not load your profile. Please try again."); + } finally { + setLoading(false); + } + }, [router]); + + useEffect(() => { + void loadProfile(); + }, [loadProfile]); + useEffect(() => { + const syncTab = () => setActiveTab(normalizeTab(new URLSearchParams(window.location.search).get("tab"))); + syncTab(); + window.addEventListener("popstate", syncTab); + return () => window.removeEventListener("popstate", syncTab); + }, []); + + const selectTab = (tab: ProfileTab) => { + setActiveTab(tab); + router.replace(tab === "overview" ? "/profile" : `/profile?tab=${tab}`, { scroll: false }); + }; + const tabKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number) => { + let next = index; + if (event.key === "ArrowRight") next = (index + 1) % TABS.length; + else if (event.key === "ArrowLeft") next = (index + TABS.length - 1) % TABS.length; + else if (event.key === "Home") next = 0; + else if (event.key === "End") next = TABS.length - 1; + else return; + event.preventDefault(); + selectTab(TABS[next].key); + document.getElementById(`profile-tab-${TABS[next].key}`)?.focus(); + }; + + const saveEmail = async (event: FormEvent<HTMLFormElement>) => { + event.preventDefault(); + if (emailSaving) return; + setEmailSaving(true); + setEmailNotice(null); + try { + const response = await authFetch(`${getApiBase()}/auth/profile/email`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ email: email.trim() || null }), + }); + if (response.status === 401) { + clearToken(); + router.replace("/login?next=%2Fprofile"); + return; + } + if (!response.ok) + throw new Error(await responseMessage(response, "Could not save your email. Please try again.")); + const result = await response.json(); + const saved = typeof result.email === "string" ? result.email : ""; + setData((current) => (current ? { ...current, user: { ...current.user, email: saved || null } } : current)); + setEmail(saved); + setEmailNotice({ tone: "status", message: saved ? "Email saved." : "Email removed." }); + } catch (error) { + setEmailNotice({ tone: "error", message: error instanceof Error ? error.message : "Could not save your email." }); + } finally { + setEmailSaving(false); + } + }; + + const savePassword = async (event: FormEvent<HTMLFormElement>) => { + event.preventDefault(); + if (passwordSaving) return; + setPasswordNotice(null); + if (newPassword.trim().length < 8) { + setPasswordNotice({ tone: "error", message: "Use at least 8 characters for your new password." }); + return; + } + if (newPassword !== confirmPassword) { + setPasswordNotice({ tone: "error", message: "The new passwords do not match." }); + return; + } + setPasswordSaving(true); + try { + const response = await authFetch(`${getApiBase()}/auth/password`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ current_password: currentPassword, new_password: newPassword }), + }); + if (!response.ok) + throw new Error(await responseMessage(response, "Could not change your password. Please try again.")); + const result = await response.json(); + setCurrentPassword(""); + setNewPassword(""); + setConfirmPassword(""); + setPasswordNotice({ + tone: "status", + message: + result.provider === "jellyfin" + ? "Password updated for Jellyfin and Magent. Seerr uses the same password." + : "Password updated.", + }); + } catch (error) { + setPasswordNotice({ + tone: "error", + message: error instanceof Error ? error.message : "Could not change your password.", + }); + } finally { + setPasswordSaving(false); + } + }; + + const user = data?.user; + const effectiveRole = useEffectiveRole(user?.role); + const passwordProvider = user?.password_provider ?? (user?.auth_provider === "jellyfin" ? "jellyfin" : "local"); + const canChangePassword = + user?.password_change_supported ?? ["local", "jellyfin"].includes(user?.auth_provider ?? ""); + const emailChanged = email.trim() !== (user?.email ?? ""); + const recent = data?.activity?.recent ?? []; + const notice = (value: Notice) => + value && ( + <p className={`account-notice is-${value.tone}`} role={value.tone === "error" ? "alert" : "status"}> + {value.message} + </p> + ); + + return ( + <main className="account-page"> + <PageHeading + title="My profile" + description="Your contact details, security, and activity." + actions={ + user && ( + <div className="account-identity"> + <span className="account-avatar" aria-hidden="true"> + {user.username.slice(0, 1).toUpperCase()} + </span> + <div> + <strong>{user.username}</strong> + <span>{effectiveRole === "admin" ? "Administrator" : "Member"}</span> + </div> + </div> + ) + } + /> + + {loading ? ( + <p className="account-empty" role="status"> + Loading your profile… + </p> + ) : loadError ? ( + <div className="account-empty"> + <p role="alert">{loadError}</p> + <button type="button" className="account-secondary" onClick={() => void loadProfile()}> + Try again + </button> + </div> + ) : ( + user && ( + <> + <div className="account-tabs" role="tablist" aria-label="Profile sections"> + {TABS.map((tab, index) => ( + <button + key={tab.key} + id={`profile-tab-${tab.key}`} + type="button" + role="tab" + aria-selected={activeTab === tab.key} + aria-controls={`profile-panel-${tab.key}`} + tabIndex={activeTab === tab.key ? 0 : -1} + onKeyDown={(event) => tabKeyDown(event, index)} + onClick={() => selectTab(tab.key)} + > + {tab.label} + </button> + ))} + </div> + + <section + className="account-panel" + id="profile-panel-overview" + role="tabpanel" + aria-labelledby="profile-tab-overview" + hidden={activeTab !== "overview"} + > + <div className="account-section-intro"> + <h2>Contact email</h2> + <p>For password recovery and updates on your reported issues.</p> + </div> + <form className="account-form" onSubmit={saveEmail}> + <label htmlFor="profile-email">Email address</label> + <input + id="profile-email" + name="email" + type="email" + autoComplete="email" + placeholder="you@example.com" + value={email} + disabled={emailSaving} + onChange={(event) => { + setEmail(event.target.value); + setEmailNotice(null); + }} + /> + {!user.email && ( + <p className="account-hint">Add an email so we can let you know when a fix is ready.</p> + )} + {user.email && !email.trim() && ( + <p className="account-hint">Saving without an email stops account and issue emails.</p> + )} + {notice(emailNotice)} + <div className="account-form-actions"> + <button type="submit" className="account-primary" disabled={emailSaving || !emailChanged}> + {emailSaving ? "Saving…" : "Save email"} + </button> + {emailChanged && ( + <button + type="button" + className="account-secondary" + disabled={emailSaving} + onClick={() => { + setEmail(user.email ?? ""); + setEmailNotice(null); + }} + > + Discard + </button> + )} + </div> + </form> + <div className="account-connected"> + <span className="account-connection-dot" aria-hidden="true" /> + <span> + {user.auth_provider === "jellyfin" + ? "Connected with your Jellyfin account" + : user.auth_provider === "local" + ? "Signed in with a Magent account" + : "Signed in with your media account"} + </span> + </div> + {canAccess({ ...user, role: effectiveRole ?? undefined }, "stats") && ( + <MonthlyRecapPreference key={user.email || "no-email"} /> + )} + <NewsletterPreference key={`newsletter-${user.email || "no-email"}`} /> + </section> + + <section + className="account-panel" + id="profile-panel-security" + role="tabpanel" + aria-labelledby="profile-tab-security" + hidden={activeTab !== "security"} + > + <div className="account-section-intro"> + <h2>Change password</h2> + <p> + {passwordProvider === "jellyfin" + ? "One password for Jellyfin, Seerr and Magent." + : "Keep your Magent account secure."} + </p> + </div> + {canChangePassword ? ( + <form className="account-form" onSubmit={savePassword}> + <fieldset disabled={passwordSaving}> + <label htmlFor="profile-current-password">Current password</label> + <input + id="profile-current-password" + type="password" + autoComplete="current-password" + value={currentPassword} + onChange={(event) => setCurrentPassword(event.target.value)} + required + /> + <label htmlFor="profile-new-password">New password</label> + <input + id="profile-new-password" + type="password" + autoComplete="new-password" + aria-describedby="password-length" + value={newPassword} + onChange={(event) => setNewPassword(event.target.value)} + minLength={8} + required + /> + <p id="password-length" className="account-hint"> + At least 8 characters. + </p> + <label htmlFor="profile-confirm-password">Confirm new password</label> + <input + id="profile-confirm-password" + type="password" + autoComplete="new-password" + value={confirmPassword} + onChange={(event) => setConfirmPassword(event.target.value)} + minLength={8} + required + /> + </fieldset> + {notice(passwordNotice)} + <div className="account-form-actions"> + <button type="submit" className="account-primary" disabled={passwordSaving}> + {passwordSaving ? "Updating…" : "Update password"} + </button> + </div> + </form> + ) : ( + <p className="account-empty"> + Password changes are managed by your sign-in provider. Contact an administrator for help. + </p> + )} + </section> + + <section + className="account-panel" + id="profile-panel-activity" + role="tabpanel" + aria-labelledby="profile-tab-activity" + hidden={activeTab !== "activity"} + > + <div className="account-section-intro"> + <h2>Your activity</h2> + <p>Your requests and recent account access.</p> + </div> + {data?.stats && ( + <div className="account-request-summary"> + <div> + <strong>{data.stats.total}</strong> + <span>Requests</span> + </div> + <div> + <strong>{data.stats.ready}</strong> + <span>Ready to watch</span> + </div> + <a href="/"> + View my requests <span aria-hidden="true">↗</span> + </a> + </div> + )} + <h3 className="account-list-heading">Recent account access</h3> + {recent.length ? ( + <ul className="account-access-list"> + {(showAllActivity ? recent : recent.slice(0, 5)).map((entry, index) => ( + <li key={`${entry.ip}-${entry.last_seen_at}-${index}`}> + <div className="account-access-summary"> + <strong>{deviceName(entry.user_agent)}</strong> + <time dateTime={entry.last_seen_at}>{formatDate(entry.last_seen_at)}</time> + </div> + <details> + <summary>Connection details</summary> + <dl> + <div> + <dt>IP address</dt> + <dd>{entry.ip || "Not recorded"}</dd> + </div> + <div> + <dt>First seen</dt> + <dd>{formatDate(entry.first_seen_at)}</dd> + </div> + </dl> + </details> + </li> + ))} + </ul> + ) : ( + <p className="account-empty">No recent activity yet.</p> + )} + {recent.length > 5 && ( + <button + className="account-secondary" + type="button" + onClick={() => setShowAllActivity(!showAllActivity)} + > + {showAllActivity ? "Show less" : "Show all activity"} + </button> + )} + </section> + </> + ) + )} + </main> + ); +} diff --git a/frontend/app/requests/[id]/LatestActivity.tsx b/frontend/app/requests/[id]/LatestActivity.tsx new file mode 100644 index 0000000..39b7be0 --- /dev/null +++ b/frontend/app/requests/[id]/LatestActivity.tsx @@ -0,0 +1,173 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; +import "./latest-activity.css"; +import { lockBodyScroll } from "../../lib/scrollLock"; + +type Event = { id: string; service: string; state: string; message: string; started_at?: string; finished_at?: string }; +type Operation = { + summary?: { title: string; message: string; next: string; action?: string }; + id: string; + label: string; + status: string; + events: Event[]; +}; + +export default function LatestActivity({ + operation, + besideDownload, + onDismiss, +}: { + operation: Operation; + besideDownload: boolean; + onDismiss: () => void; +}) { + const dialog = useRef<HTMLDialogElement>(null); + const trigger = useRef<HTMLButtonElement>(null); + const [open, setOpen] = useState(true); + useEffect(() => { + void operation.id; + setOpen(true); + }, [operation.id]); + // Events are appended in order. Client result events have no timestamp. + const latest = operation.events.at(-1); + const working = operation.status === "running" || operation.status === "searching"; + const message = latest?.message ?? ""; + const choosing = /[1-9]\d* releases? (found|shown)/i.test(message); + const sent = + operation.status === "complete" && + /sent|accepted.*release/i.test(message) && + /download|release|Sonarr|Radarr/i.test(message); + const interrupted = latest?.id === "connection-error"; + const status = + operation.summary?.title ?? + (working + ? "Working on it" + : choosing + ? "Choose a download" + : operation.status === "complete" + ? "Done" + : "Needs your attention"); + const currentStep = + operation.summary?.message ?? + (working + ? /send release/i.test(operation.label) + ? "Sending your download..." + : /search/i.test(operation.label) + ? "Looking for a download..." + : latest?.service === "Jellyfin" + ? "Checking if it is ready to watch..." + : latest?.service === "qBittorrent" + ? "Checking your download..." + : "Checking your request..." + : interrupted + ? "The connection was lost." + : choosing + ? "The search is finished. Choose a version to download." + : sent + ? "Your download has been sent." + : operation.status === "error" + ? "We could not finish this step." + : "This check is finished."); + const nextStep = + operation.summary?.next ?? + (working + ? "Please wait. You can close this box while we work." + : interrupted + ? "Close this box and check the request before trying again." + : choosing + ? "Close this box to see the available downloads." + : sent + ? "You can close this box. The request will update when the download starts." + : operation.status === "error" + ? "Close this box to review the request and its available options." + : "Close this box to see the updated request status."); + const progress = ( + <div + className={`activity-process is-${working ? "working" : operation.status}`} + role="progressbar" + aria-label={currentStep} + aria-valuemin={0} + aria-valuemax={100} + aria-valuenow={working || operation.status === "error" ? undefined : 100} + > + <span /> + </div> + ); + + useEffect(() => { + if (!open) return; + const element = dialog.current; + element?.showModal(); + const unlock = lockBodyScroll(); + return () => { + element?.close(); + unlock(); + trigger.current?.focus(); + }; + }, [open]); + + return ( + <div className={`request-overview-block latest-activity ${besideDownload ? "beside-download" : "full-row"}`}> + <button + ref={trigger} + type="button" + className="latest-activity-trigger" + onClick={() => setOpen(true)} + aria-haspopup="dialog" + aria-expanded={open} + > + <span className="latest-activity-heading"> + <span className="request-overview-label">Latest activity</span> + <span className={`latest-activity-badge is-${operation.status}`}>{status}</span> + </span> + <span className="latest-activity-message" role="status"> + {working && <span className="activity-spinner" aria-hidden="true" />} + {currentStep} + </span> + {progress} + <span className="latest-activity-more">View progress</span> + </button> + <dialog + ref={dialog} + className="activity-dialog" + aria-labelledby="activity-dialog-title" + onCancel={() => setOpen(false)} + onClose={() => setOpen(false)} + > + <div className="activity-dialog-content"> + <header> + <div> + <span className="request-overview-label">Request progress</span> + <h2 id="activity-dialog-title">{status}</h2> + </div> + <button type="button" onClick={() => setOpen(false)}> + Close + </button> + </header> + <div className="activity-current" role="status" aria-live="polite" aria-atomic="true"> + <p className="activity-current-step"> + {working && <span className="activity-spinner" aria-hidden="true" />} + {currentStep} + </p> + {progress} + <p className="activity-next-step">{nextStep}</p> + </div> + {!working && ( + <footer> + <button + type="button" + onClick={() => { + setOpen(false); + onDismiss(); + }} + > + {operation.summary?.action ?? "Dismiss activity"} + </button> + </footer> + )} + </div> + </dialog> + </div> + ); +} diff --git a/frontend/app/requests/[id]/RequestLanguage.tsx b/frontend/app/requests/[id]/RequestLanguage.tsx new file mode 100644 index 0000000..e59c7e5 --- /dev/null +++ b/frontend/app/requests/[id]/RequestLanguage.tsx @@ -0,0 +1,80 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { authFetch, getApiBase } from "../../lib/auth"; + +type AudioChoice = { + language: { code: string } | null; + originalEnabled?: boolean; + canChange?: boolean; + profileLanguage?: string; +}; + +export default function RequestLanguage({ + requestId, + disabled, + onApply, +}: { + requestId: string; + disabled: boolean; + onApply: (code: string) => Promise<void>; +}) { + const [choice, setChoice] = useState<AudioChoice | null>(null); + const [error, setError] = useState<string | null>(null); + const [revision, setRevision] = useState(0); + useEffect(() => { + void revision; + const controller = new AbortController(); + void authFetch(`${getApiBase()}/requests/${requestId}/language`, { signal: controller.signal }) + .then(async (response) => { + if (!response.ok) throw new Error("Could not check the audio settings. Reload the request to try again."); + return response.json(); + }) + .then((data) => { + if (!controller.signal.aborted) setChoice(data); + }) + .catch((e) => { + if (!controller.signal.aborted) setError(e.message); + }); + return () => controller.abort(); + }, [requestId, revision]); + if (error && !choice) return <p role="alert">{error}</p>; + if (!choice?.language) return null; + const code = choice.language.code; + const name = new Intl.DisplayNames(["en"], { type: "language" }).of(code) || code; + return ( + <section className="request-language-notice" aria-label="Audio language"> + <h2> + {name} audio {choice.originalEnabled ? "enabled" : "may need your approval"} + </h2> + <p> + This movie was originally made in {name}. An English dub may not exist.{" "} + {choice.originalEnabled + ? "Radarr is set to accept its original audio." + : `The current audio requirement is ${choice.profileLanguage || "set by the library"}. This can leave the request waiting even when an original-language release exists.`} + </p> + <p> + Accepting original audio keeps the quality requirements. Subtitles and individual release audio tracks are not + guaranteed by title metadata. + </p> + {choice.canChange && !choice.originalEnabled && ( + <button + type="button" + disabled={disabled} + onClick={async () => { + setError(null); + try { + await onApply(code); + setRevision((v) => v + 1); + } catch (e) { + setError(e instanceof Error ? e.message : "The audio choice could not be saved."); + } + }} + > + Use {name} audio & search + </button> + )} + {error && <p role="alert">{error}</p>} + </section> + ); +} diff --git a/frontend/app/requests/[id]/latest-activity.css b/frontend/app/requests/[id]/latest-activity.css new file mode 100644 index 0000000..f355963 --- /dev/null +++ b/frontend/app/requests/[id]/latest-activity.css @@ -0,0 +1,35 @@ +.latest-activity.beside-download { grid-column: 7 / -1; grid-row: 2; } +.latest-activity.full-row { grid-column: 1 / -1; } +.latest-activity .latest-activity-trigger { display: grid; gap: .6rem; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; box-shadow: none; text-transform: none; } +.latest-activity-trigger:focus-visible { outline: 2px solid var(--ops-accent, #83d7f7); outline-offset: 6px; } +.latest-activity-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } +.latest-activity-message { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: .875rem; line-height: 1.5; font-weight: 400; } +.latest-activity-more { color: var(--ops-accent, #83d7f7); font-size: .75rem; } +.latest-activity-badge { font-size: .7rem; font-weight: 500; color: var(--ops-muted, #bbb); } +.latest-activity-badge.is-error { color: #ff9b9b; } +.latest-activity-badge.is-complete { color: #55dec0; } +.activity-dialog { position: fixed; inset: 0; margin: auto; width: min(720px, calc(100vw - 32px)); max-width: none; max-height: min(760px, calc(100dvh - 40px)); padding: 0; border: 1px solid var(--ops-border, #444); border-radius: 16px; color: var(--ops-text, #eee); background: var(--ops-surface, #1c1c1e); overflow: auto; box-shadow: 0 24px 80px #0008; } +.activity-dialog::backdrop { background: #000a; backdrop-filter: blur(5px); } +.activity-dialog-content { padding: 1.25rem; } +.activity-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } +.activity-dialog h2 { font-size: 1.2rem; margin: .4rem 0; } +.activity-dialog small { color: var(--ops-muted, #bbb); } +.activity-dialog footer { display: flex; justify-content: flex-end; margin-top: 1rem; } +@media (max-width: 720px) { + .latest-activity.beside-download { grid-column: 1 / -1; grid-row: auto; } +} + +.activity-current { padding: 1rem 0 .25rem; } +.activity-current-step { font-size: 1.05rem; font-weight: 600; margin: 0 0 1rem; } +.activity-next-step { color: var(--ops-muted, #bbb); font-size: .875rem; line-height: 1.6; margin: 1rem 0 0; } +.activity-process { height: 6px; width: 100%; overflow: hidden; border-radius: 999px; background: #ffffff14; } +.activity-process > span { display: block; height: 100%; width: 100%; border-radius: inherit; background: #55dec0; } +.activity-process.is-working > span { width: 35%; background: var(--ops-accent, #83d7f7); animation: activity-process-slide 1.6s ease-in-out infinite alternate; } +.activity-process.is-error > span { background: #e6b86c; } +@keyframes activity-process-slide { from { transform: translateX(0); } to { transform: translateX(185%); } } +@media (prefers-reduced-motion: reduce) { .activity-process.is-working > span { animation: none; width: 100%; opacity: .65; } } + +.activity-spinner { display: inline-block; width: 28px; height: 28px; flex: 0 0 28px; border: 3px solid #ffffff26; border-top-color: var(--ops-accent, #83d7f7); border-right-color: var(--ops-accent, #83d7f7); border-radius: 50%; animation: activity-spinner-turn .8s linear infinite; } +.activity-current-step, .latest-activity .latest-activity-message { display: flex; align-items: center; gap: 12px; } +@keyframes activity-spinner-turn { to { transform: rotate(360deg); } } +@media (prefers-reduced-motion: reduce) { .activity-spinner { animation: none; } } diff --git a/frontend/app/requests/[id]/page.tsx b/frontend/app/requests/[id]/page.tsx new file mode 100644 index 0000000..b2af2be --- /dev/null +++ b/frontend/app/requests/[id]/page.tsx @@ -0,0 +1,1601 @@ +"use client"; + +import Image from "next/image"; +import { useParams, useRouter } from "next/navigation"; +import { useCallback, useEffect, useMemo, useState } from "react"; +import { authFetch, clearToken, getApiBase, getToken } from "../../lib/auth"; +import { canAccess, type FeatureAccess } from "../../lib/features"; +import { lockBodyScroll } from "../../lib/scrollLock"; +import { useEffectiveRole } from "../../lib/viewMode"; +import PageHeading from "../../ui/PageHeading"; +import LatestActivity from "./LatestActivity"; +import RequestLanguage from "./RequestLanguage"; + +type TimelineHop = { + service: string; + status: string; + details?: Record<string, unknown>; +}; + +type RequestAction = { + id: string; + label: string; + risk: string; + description?: string; + requires_confirmation: boolean; +}; + +type PipelineStage = { + id: string; + label: string; + state: "complete" | "active" | "partial" | "attention" | "waiting" | string; + stateLabel?: string; + searchStatus?: "searching" | "queued" | "idle" | "unavailable"; + summary: string; + available?: number; + missing?: number; + total?: number; + seasons?: Array<{ seasonNumber: number; available: number; missing: number; total: number }>; + unmonitoredSeasons?: Array<{ seasonNumber: number; episodeCount: number; available: number }>; + canAddSeasons?: boolean; + missingEpisodes?: Record<string, number[]>; + actionIds?: string[]; + visible?: boolean; + torrents?: Array<Record<string, unknown>>; + link?: string | null; +}; + +type RepairActivityStep = { + id: string; + label: string; + state: "complete" | "active" | "attention" | "waiting" | string; + detail: string; +}; + +type RepairActivity = { + visible?: boolean; + actionId?: string; + state?: "searching" | "downloading" | "importing" | "indexing" | "complete" | "attention" | string; + headline?: string; + message?: string; + service?: string; + updatedAt?: string | null; + steps?: RepairActivityStep[]; +}; + +type Snapshot = { + request_id: string; + title: string; + year?: number; + request_type: string; + state: string; + state_reason?: string; + timeline: TimelineHop[]; + actions: RequestAction[]; + artwork?: { poster_url?: string; backdrop_url?: string }; + presentation?: { + repairCycle?: string | null; + status?: { label?: string; meaning?: string }; + download?: { + visible?: boolean; + state?: string; + summary?: string; + torrents?: Array<Record<string, unknown>>; + lastSeenAt?: string | null; + }; + nextStep?: { title?: string; description?: string; actionIds?: string[] }; + pipeline?: PipelineStage[]; + repairActivity?: RepairActivity; + }; + raw?: { jellyfin?: { link?: string | null } }; +}; + +type ReleaseOption = { + title?: string; + indexer?: string; + indexerId?: number; + guid?: string; + size?: number; + seeders?: number; + leechers?: number; + protocol?: string; + publishDate?: string; + infoUrl?: string; + downloadUrl?: string; + magnetUrl?: string; + fullSeason?: boolean; + seasonNumber?: number; + quality?: string; + customFormatScore?: number; + approved?: boolean; + selectionToken?: string; + requiresOverride?: boolean; + selectable?: boolean; + rejections?: string[]; + bestPick?: boolean; +}; + +type SnapshotHistory = { + request_id: string; + state: string; + state_reason?: string; + created_at: string; +}; + +type ActionHistory = { + request_id: string; + action_id: string; + label: string; + status: string; + message?: string; + created_at: string; +}; + +type LiveDownloadProgress = { + repairCycle?: string | null; + visible?: boolean; + request_id: string; + state: string; + summary: string; + torrents: Array<Record<string, unknown>>; + updated_at: string; +}; + +type OperationEvent = { + id: string; + service: string; + state: "active" | "complete" | "error" | string; + message: string; + duration_ms?: number | null; + status_code?: number | null; +}; + +type OperationProgress = { + summary?: { title: string; message: string; next: string; action?: string }; + id: string; + label: string; + status: "running" | "complete" | "error" | string; + duration_ms?: number | null; + events: OperationEvent[]; +}; + +const readApiError = async (response: Response, fallback: string) => { + try { + const contentType = response.headers.get("content-type") ?? ""; + if (contentType.includes("application/json")) { + const payload = await response.json(); + if (typeof payload?.detail === "string" && payload.detail.trim()) return payload.detail; + if (typeof payload?.message === "string" && payload.message.trim()) return payload.message; + } else { + const text = await response.text(); + if (text.trim()) return text.trim(); + } + } catch (error) { + console.error(error); + } + return fallback; +}; + +const isSnapshotPayload = (value: unknown): value is Snapshot => { + if (!value || typeof value !== "object") return false; + const snapshot = value as Partial<Snapshot>; + return ( + typeof snapshot.request_id === "string" && + typeof snapshot.title === "string" && + typeof snapshot.request_type === "string" && + typeof snapshot.state === "string" && + Array.isArray(snapshot.timeline) && + Array.isArray(snapshot.actions) + ); +}; + +const formatBytes = (value?: number) => { + if (!value || Number.isNaN(value)) return "Size unavailable"; + const units = ["B", "KB", "MB", "GB", "TB"]; + let size = value; + let index = 0; + while (size >= 1024 && index < units.length - 1) { + size /= 1024; + index += 1; + } + return `${size.toFixed(1)} ${units[index]}`; +}; + +const torrentProgress = (torrent: Record<string, unknown>) => { + const progress = Number(torrent.progress); + if (!Number.isNaN(progress) && progress >= 0 && progress <= 1) return Math.round(progress * 1000) / 10; + const supplied = Number(torrent.progressPercent); + if (!Number.isNaN(supplied) && supplied >= 0 && supplied <= 100) return Math.round(supplied * 10) / 10; + return null; +}; + +const formatProgress = (progress: number) => `${progress.toFixed(1).replace(/\.0$/, "")}% complete`; + +const mergeLiveDownload = (current: Snapshot, live: LiveDownloadProgress): Snapshot => { + if (String(current.request_id) !== String(live.request_id)) return current; + if ((current.presentation?.repairCycle ?? null) !== (live.repairCycle ?? null)) return current; + if (["COMPLETED", "AVAILABLE"].includes(current.state)) return current; + const downloadStage = current.presentation?.pipeline?.find((stage) => stage.id === "download"); + if (downloadStage?.state === "complete" && downloadStage.visible === false) return current; + const visible = live.visible ?? live.state !== "not_started"; + const stageState = + live.state === "completed" + ? "complete" + : ["missing", "error"].includes(live.state) + ? "attention" + : live.state === "not_started" + ? "waiting" + : "active"; + const presentation = current.presentation ?? {}; + const pipeline = (presentation.pipeline ?? fallbackPipeline(current)).map((stage) => + stage.id === "download" + ? { ...stage, state: stageState, stateLabel: undefined, summary: live.summary, visible, torrents: live.torrents } + : stage, + ); + return { + ...current, + presentation: { + ...presentation, + download: { + ...(presentation.download ?? {}), + visible, + state: live.state, + summary: live.summary, + torrents: live.torrents, + lastSeenAt: live.updated_at, + }, + pipeline, + }, + }; +}; + +const fallbackStatusLabel = (state: string) => { + const labels: Record<string, string> = { + REQUESTED: "Waiting for approval", + APPROVED: "Approved — preparing collection", + NEEDS_ADD: "Approved, but not yet in the library queue", + ADDED_TO_ARR: "Added to library queue", + SEARCHING: "Searching for a matching release", + GRABBED: "Download queued", + DOWNLOADING: "Download in progress", + IMPORTING: "Preparing the collected media", + COMPLETED: "Available to watch", + AVAILABLE: "Available to watch", + FAILED: "This request needs attention", + UNKNOWN: "Checking request status", + }; + return labels[state] ?? "Checking request status"; +}; + +const fallbackPipeline = (snapshot: Snapshot): PipelineStage[] => { + const approved = snapshot.state !== "REQUESTED"; + const complete = ["COMPLETED", "AVAILABLE"].includes(snapshot.state); + const indexing = snapshot.state === "IMPORTING"; + return [ + { id: "requested", label: "Requested", state: "complete", summary: "Request received" }, + { + id: "approved", + label: "Approved", + state: approved ? "complete" : "active", + summary: approved ? "Approved for collection" : "Waiting for approval", + }, + { + id: "library", + label: "Library collection", + state: complete ? "complete" : approved ? "active" : "waiting", + summary: complete ? "Collection complete" : "Waiting for collector information", + }, + { id: "search", label: "Release search", state: "waiting", summary: "Search state unavailable" }, + { id: "download", label: "Download", state: "waiting", summary: "No download attempt yet" }, + { + id: "available", + label: complete ? "Available to watch" : indexing ? "Adding to Jellyfin" : "Media server", + state: complete ? "complete" : indexing ? "active" : "waiting", + stateLabel: complete ? "Ready" : indexing ? "Indexing" : "Waiting", + summary: complete + ? "This title is ready to watch in Jellyfin." + : indexing + ? "The download is complete. Jellyfin is indexing this title now." + : "This title has not reached Jellyfin yet.", + link: snapshot.raw?.jellyfin?.link, + }, + ]; +}; + +const formatWhen = (value?: string | null) => { + if (!value) return "Time unavailable"; + const date = new Date(value); + if (Number.isNaN(date.valueOf())) return value; + return date.toLocaleString(); +}; + +export default function RequestTimelinePage() { + const params = useParams<{ id: string | string[] }>(); + const requestId = Array.isArray(params?.id) ? params.id[0] : params?.id; + const router = useRouter(); + const [snapshot, setSnapshot] = useState<Snapshot | null>(null); + const [loading, setLoading] = useState(true); + const [loadError, setLoadError] = useState<string | null>(null); + const [showDetails, setShowDetails] = useState(false); + const [actionMessage, setActionMessage] = useState<string | null>(null); + const [actionError, setActionError] = useState<string | null>(null); + const [busyAction, setBusyAction] = useState<string | null>(null); + const [releaseOptions, setReleaseOptions] = useState<ReleaseOption[]>([]); + const [releasePickerOpen, setReleasePickerOpen] = useState(false); + const [canIgnoreProfileLimits, setCanIgnoreProfileLimits] = useState(false); + const [ignoreProfileLimits, setIgnoreProfileLimits] = useState(false); + const [nextSearchOffset, setNextSearchOffset] = useState<number | null>(null); + const [releaseCollector, setReleaseCollector] = useState<string | null>(null); + const [releaseSearchMessage, setReleaseSearchMessage] = useState<string | null>(null); + const [historySnapshots, setHistorySnapshots] = useState<SnapshotHistory[]>([]); + const [historyActions, setHistoryActions] = useState<ActionHistory[]>([]); + const [operationProgress, setOperationProgress] = useState<OperationProgress | null>(null); + const [viewer, setViewer] = useState<{ role?: string; features?: Partial<FeatureAccess> } | null>(null); + const effectiveRole = useEffectiveRole(viewer?.role); + const isAdmin = effectiveRole === "admin"; + const canReportIssues = canAccess(viewer ? { ...viewer, role: effectiveRole ?? undefined } : null, "issues"); + const [selectedAdditionalSeasons, setSelectedAdditionalSeasons] = useState<number[]>([]); + const awaitingMediaIndex = Boolean( + snapshot?.presentation?.pipeline?.some((stage) => stage.id === "available" && stage.state === "active"), + ); + const repairIsActive = Boolean( + snapshot?.presentation?.repairActivity?.visible && + !["complete", "attention"].includes(snapshot.presentation.repairActivity.state ?? ""), + ); + const searchIsActive = Boolean( + snapshot?.presentation?.pipeline?.some( + (stage) => stage.id === "library" && ["searching", "queued"].includes(stage.searchStatus ?? ""), + ), + ); + + const closeReleasePicker = useCallback(() => { + if (busyAction?.startsWith("grab:")) return; + setReleasePickerOpen(false); + setReleaseOptions([]); + setReleaseSearchMessage(null); + }, [busyAction]); + + useEffect(() => { + if (!releasePickerOpen) return; + const unlock = lockBodyScroll(); + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === "Escape") closeReleasePicker(); + }; + window.addEventListener("keydown", handleKeyDown); + return () => { + unlock(); + window.removeEventListener("keydown", handleKeyDown); + }; + }, [closeReleasePicker, releasePickerOpen]); + + useEffect(() => { + if (!requestId) return; + const load = async () => { + setLoading(true); + setLoadError(null); + try { + if (!getToken()) { + router.push("/login"); + return; + } + const baseUrl = getApiBase(); + const [meResponse, snapshotResponse] = await Promise.all([ + authFetch(`${baseUrl}/auth/me`), + authFetch(`${baseUrl}/requests/${requestId}/snapshot`), + ]); + if ([meResponse, snapshotResponse].some((response) => response.status === 401)) { + clearToken(); + router.push("/login"); + return; + } + if (!meResponse.ok) { + throw new Error("Unable to verify your request access."); + } + const me = await meResponse.json(); + setViewer(me); + if (!snapshotResponse.ok) { + throw new Error(await readApiError(snapshotResponse, "Unable to load this request.")); + } + const snapshotData = await snapshotResponse.json(); + if (!isSnapshotPayload(snapshotData)) throw new Error("Unable to load this request."); + setSnapshot(snapshotData); + } catch (error) { + console.error(error); + setLoadError(error instanceof Error ? error.message : "Unable to load this request."); + } finally { + setLoading(false); + } + }; + void load(); + }, [requestId, router]); + + useEffect(() => { + if (!isAdmin || !requestId) { + setShowDetails(false); + setHistorySnapshots([]); + setHistoryActions([]); + return; + } + const controller = new AbortController(); + const loadHistory = async () => { + try { + const baseUrl = getApiBase(); + const [historyResponse, actionsResponse] = await Promise.all([ + authFetch(`${baseUrl}/requests/${requestId}/history?limit=10`, { signal: controller.signal }), + authFetch(`${baseUrl}/requests/${requestId}/actions?limit=10`, { signal: controller.signal }), + ]); + if (historyResponse.ok) { + const data = await historyResponse.json(); + if (!controller.signal.aborted && Array.isArray(data.snapshots)) setHistorySnapshots(data.snapshots); + } + if (actionsResponse.ok) { + const data = await actionsResponse.json(); + if (!controller.signal.aborted && Array.isArray(data.actions)) setHistoryActions(data.actions); + } + } catch (error) { + if (!controller.signal.aborted) console.error(error); + } + }; + void loadHistory(); + return () => controller.abort(); + }, [isAdmin, requestId]); + + useEffect(() => { + if (!getToken() || !requestId) return; + let stopped = false; + let refreshing = false; + const refresh = async () => { + if (document.visibilityState === "hidden" || refreshing) return; + refreshing = true; + try { + const response = await authFetch(`${getApiBase()}/requests/${requestId}/snapshot`); + if (response.status === 401) { + clearToken(); + router.push("/login"); + return; + } + if (!response.ok) return; + const payload = await response.json(); + if (!stopped && isSnapshotPayload(payload)) setSnapshot(payload); + } catch (error) { + if (!stopped) console.error(error); + } finally { + refreshing = false; + } + }; + const timer = window.setInterval( + () => void refresh(), + awaitingMediaIndex || repairIsActive || searchIsActive ? 5_000 : 15_000, + ); + return () => { + stopped = true; + window.clearInterval(timer); + }; + }, [awaitingMediaIndex, repairIsActive, searchIsActive, requestId, router]); + + const liveDownloadKey = useMemo(() => { + const downloadStage = snapshot?.presentation?.pipeline?.find((stage) => stage.id === "download"); + if (!downloadStage || downloadStage.state === "complete") return ""; + return "discover-and-track"; + }, [snapshot]); + + useEffect(() => { + if (!getToken() || !requestId || !liveDownloadKey) return; + let stopped = false; + let timer: number | undefined; + let controller: AbortController | null = null; + const schedule = () => { + if (!stopped) timer = window.setTimeout(() => void refresh(), 5_000); + }; + const refresh = async () => { + if (document.visibilityState === "hidden") { + schedule(); + return; + } + controller = new AbortController(); + try { + const response = await authFetch(`${getApiBase()}/requests/${requestId}/download-progress`, { + signal: controller.signal, + cache: "no-store", + }); + if (response.status === 401) { + clearToken(); + router.push("/login"); + return; + } + if (response.ok) { + const payload = (await response.json()) as LiveDownloadProgress; + if (!stopped && Array.isArray(payload.torrents)) { + setSnapshot((current) => (current ? mergeLiveDownload(current, payload) : current)); + } + } + } catch (error) { + if (!stopped && !(error instanceof DOMException && error.name === "AbortError")) console.error(error); + } finally { + controller = null; + schedule(); + } + }; + timer = window.setTimeout(() => void refresh(), 750); + return () => { + stopped = true; + if (timer !== undefined) window.clearTimeout(timer); + controller?.abort(); + }; + }, [liveDownloadKey, requestId, router]); + + const actionsById = useMemo( + () => new Map((snapshot?.actions ?? []).map((action) => [action.id, action])), + [snapshot?.actions], + ); + + if (loading) { + return ( + <main className="card request-detail-page"> + <div className="loading-center" role="status" aria-live="polite"> + <div className="spinner" aria-hidden="true" /> + <div className="loading-text">Building a clear request update…</div> + </div> + </main> + ); + } + + if (loadError || !snapshot) { + return ( + <main className="card request-detail-page"> + <PageHeading + title="We could not load this request" + description={loadError ?? "The request API did not return a valid status."} + /> + <div className="request-error-actions"> + <button type="button" onClick={() => window.location.reload()}> + Retry + </button> + <button type="button" className="ghost-button" onClick={() => router.push("/")}> + Back to requests + </button> + </div> + </main> + ); + } + + const presentation = snapshot.presentation ?? {}; + const pipeline = presentation.pipeline?.length ? presentation.pipeline : fallbackPipeline(snapshot); + const libraryStage = pipeline.find((stage) => stage.id === "library"); + const unmonitoredSeasons = libraryStage?.unmonitoredSeasons ?? []; + const availableStage = pipeline.find((stage) => stage.id === "available"); + const mediaServerLink = availableStage?.state === "complete" && availableStage.link ? availableStage.link : null; + const requestComplete = ["COMPLETED", "AVAILABLE"].includes(snapshot.state) || availableStage?.state === "complete"; + const issueReportParams = new URLSearchParams({ + reportRequest: snapshot.request_id, + title: snapshot.title, + type: snapshot.request_type === "tv" ? "tv" : "movie", + }); + if (snapshot.year) issueReportParams.set("year", String(snapshot.year)); + const issueReportLink = `/portal/issues?${issueReportParams.toString()}`; + const statusLabel = presentation.status?.label ?? fallbackStatusLabel(snapshot.state); + const statusMeaning = presentation.status?.meaning ?? snapshot.state_reason ?? "Magent is checking this request."; + const download = presentation.download; + const repairActivity = presentation.repairActivity; + const downloadVisible = Boolean(download?.visible); + const nextStep = presentation.nextStep ?? { + title: snapshot.actions[0]?.label ?? "No action needed right now", + description: snapshot.actions.length + ? "Choose an option below to continue." + : "Magent will keep checking automatically.", + actionIds: snapshot.actions.slice(0, 2).map((action) => action.id), + }; + const recommendedActions = (nextStep.actionIds ?? []) + .map((actionId) => actionsById.get(actionId)) + .filter((action): action is RequestAction => Boolean(action)); + const posterUrl = snapshot.artwork?.poster_url; + const resolvedPoster = posterUrl?.startsWith("http") ? posterUrl : posterUrl ? `${getApiBase()}${posterUrl}` : null; + const backdropUrl = snapshot.artwork?.backdrop_url?.replace( + "https://image.tmdb.org/t/p/w780/", + "https://image.tmdb.org/t/p/w1280/", + ); + const resolvedBackdrop = backdropUrl?.startsWith("http") + ? backdropUrl + : backdropUrl + ? `${getApiBase()}${backdropUrl}` + : null; + + const trackedPost = async (label: string, url: string, init: RequestInit = {}) => { + const operationId = + typeof crypto?.randomUUID === "function" + ? crypto.randomUUID() + : `${Date.now()}-${Math.random().toString(36).slice(2)}`; + const headers = new Headers(init.headers ?? {}); + headers.set("X-Magent-Operation-ID", operationId); + headers.set("X-Magent-Operation-Label", label); + setOperationProgress({ + id: operationId, + label, + status: "running", + duration_ms: null, + events: [ + { + id: "sending", + service: "Magent", + state: "active", + message: "Sending the action to Magent…", + }, + ], + }); + + let stopped = false; + const refreshProgress = async () => { + try { + const progressResponse = await authFetch(`${getApiBase()}/operations/${operationId}`, { + cache: "no-store", + }); + if (!stopped && progressResponse.ok) { + const progress = await progressResponse.json(); + if (Array.isArray(progress?.events)) { + setOperationProgress(progress); + return progress as OperationProgress; + } + } + } catch (error) { + if (!stopped) console.error(error); + } + }; + + const request = authFetch(url, { ...init, method: "POST", headers }); + const timer = window.setInterval(() => void refreshProgress(), 650); + try { + const response = await request; + await refreshProgress(); + let result: Record<string, unknown> | null = null; + try { + result = await response.clone().json(); + } catch { + /* Non-JSON error is handled below. */ + } + const needsAttention = !response.ok || result?.status === "attention" || result?.outcome === "attention"; + const finalState = needsAttention ? "error" : result?.status === "searching" ? "searching" : "complete"; + const interactiveSearch = /\/actions\/search(?:\?|$)/.test(url); + const items = Array.isArray(result?.releases) ? result.releases : []; + const available = items.some((item: ReleaseOption) => item.selectable && !item.requiresOverride); + const outside = items.some((item: ReleaseOption) => item.selectable && item.requiresOverride); + const canChoose = available || (outside && result?.canIgnoreProfileLimits === true); + const summary = interactiveSearch + ? !response.ok + ? { + title: "Search could not finish", + message: "We could not complete the search.", + next: "Try again shortly. If it keeps happening, contact an admin.", + } + : canChoose + ? { + title: available ? "Downloads found" : "Other versions are available", + message: available + ? "Choose the version you want to download." + : "These versions are outside your usual download settings.", + next: available + ? "Your download starts after you choose a version." + : "You can review them and confirm a download outside your profile.", + action: "Choose a version", + } + : { + title: items.length ? "No suitable downloads" : "Nothing available yet", + message: items.length + ? "The versions found cannot be downloaded with your current settings." + : "No downloads were found in this search.", + next: + result?.nextOffset != null + ? "You can check the next group of missing episodes." + : "You can try again later.", + action: result?.nextOffset != null ? "View search results" : undefined, + } + : response.ok && result?.status === "pending" + ? { + title: "Waiting for download confirmation", + message: "The search was sent. The download queue may still be updating.", + next: "Close this window and recheck the request shortly. You do not need to start another search yet.", + } + : response.ok && result?.status === "downloading" + ? { + title: "Download queued", + message: "The download service has confirmed a download for this title.", + next: "Close this window to follow its progress.", + } + : response.ok && /\/actions\/grab$/.test(url) + ? { + title: "Waiting to start", + message: "Your download has been sent.", + next: "Close this box to follow its progress. It may take a moment to start.", + } + : undefined; + setOperationProgress((current) => + current?.id === operationId + ? { + ...current, + status: finalState, + summary, + events: [ + ...current.events.map((event) => + event.state === "active" ? { ...event, state: "complete" as const } : event, + ), + { + id: "result", + service: "Magent", + state: needsAttention ? "error" : "complete", + message: + (typeof result?.message === "string" && result.message) || + (typeof result?.detail === "string" + ? result.detail + : response.ok + ? "Action completed. The pipeline will update as the media services report progress." + : "The action failed. Recheck the request before trying again."), + }, + ], + } + : current, + ); + return response; + } catch (error) { + setOperationProgress((current) => + current?.id === operationId + ? { + ...current, + status: "error", + events: [ + ...current.events, + { + id: "connection-error", + service: "Magent", + state: "error", + message: + "The connection was interrupted. Recheck the request before trying the action again—it may already have started.", + }, + ], + } + : current, + ); + throw error; + } finally { + stopped = true; + window.clearInterval(timer); + } + }; + + const recheckRequest = async () => { + setBusyAction("recheck_pipeline"); + setActionError(null); + setActionMessage(null); + setReleaseOptions([]); + setReleasePickerOpen(false); + setReleaseSearchMessage(null); + try { + const response = await trackedPost( + "Recheck request status", + `${getApiBase()}/requests/${snapshot.request_id}/actions/recheck`, + ); + if (response.status === 401) { + clearToken(); + router.push("/login"); + return; + } + if (!response.ok) { + throw new Error(await readApiError(response, "The request could not be rechecked.")); + } + const data = await response.json(); + if (!isSnapshotPayload(data?.snapshot)) { + throw new Error("The request was checked, but Magent did not return a valid pipeline."); + } + setSnapshot(data.snapshot); + setActionMessage(data?.message ?? "Request status rebuilt from live service data."); + } catch (error) { + console.error(error); + setActionError(error instanceof Error ? error.message : "The request could not be rechecked."); + } finally { + setBusyAction(null); + } + }; + + const addSelectedSeasons = async () => { + if (!selectedAdditionalSeasons.length) return; + setBusyAction("add_seasons"); + setActionError(null); + setActionMessage(null); + try { + const response = await trackedPost( + "Add seasons to this request", + `${getApiBase()}/requests/${snapshot.request_id}/actions/add-seasons`, + { + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ season_numbers: selectedAdditionalSeasons }), + }, + ); + if (response.status === 401) { + clearToken(); + router.push("/login"); + return; + } + if (!response.ok) throw new Error(await readApiError(response, "The selected seasons could not be added.")); + const data = await response.json(); + if (!isSnapshotPayload(data?.snapshot)) { + throw new Error("The seasons were added, but Magent did not return an updated request."); + } + setSnapshot(data.snapshot); + setSelectedAdditionalSeasons([]); + setActionMessage(data?.message ?? "The selected seasons were added and will now be monitored."); + } catch (error) { + console.error(error); + setActionError(error instanceof Error ? error.message : "The selected seasons could not be added."); + } finally { + setBusyAction(null); + } + }; + + const runAction = async (action: RequestAction, searchOffset = 0) => { + if (action.requires_confirmation && !window.confirm(`Run “${action.label}”?`)) return; + const actionPaths: Record<string, string> = { + search_releases: "actions/search", + search_auto: "actions/search_auto", + resume_torrent: "actions/qbit/resume", + readd_to_arr: "actions/readd", + }; + const path = actionPaths[action.id]; + if (!path) { + setActionError("This action is not connected yet."); + return; + } + if (action.id === "search_releases") { + setReleaseOptions([]); + setIgnoreProfileLimits(false); + setNextSearchOffset(null); + setReleaseCollector(snapshot.request_type === "tv" ? "Sonarr" : "Radarr"); + setReleaseSearchMessage(null); + setReleasePickerOpen(false); + } + setBusyAction(action.id); + setActionError(null); + setActionMessage(null); + try { + const response = await trackedPost( + action.label, + `${getApiBase()}/requests/${snapshot.request_id}/${path}${action.id === "search_releases" ? `?offset=${searchOffset}` : ""}`, + ); + if (response.status === 401) { + clearToken(); + router.push("/login"); + return; + } + if (!response.ok) throw new Error(await readApiError(response, `${action.label} could not be completed.`)); + const data = await response.json(); + if (action.id === "search_releases") { + const releases = Array.isArray(data.releases) ? data.releases : []; + setReleaseOptions(releases); + setCanIgnoreProfileLimits(data.canIgnoreProfileLimits === true); + setNextSearchOffset(typeof data.nextOffset === "number" ? data.nextOffset : null); + setReleasePickerOpen(true); + setReleaseCollector(data?.collector ?? (snapshot.request_type === "tv" ? "Sonarr" : "Radarr")); + setReleaseSearchMessage( + data?.message ?? + (releases.length + ? `Found ${releases.length} approved release${releases.length === 1 ? "" : "s"}.` + : "No releases currently meet the assigned quality profile."), + ); + setActionMessage(null); + } else { + setActionMessage(data?.message ?? `${action.label} was started successfully.`); + } + } catch (error) { + console.error(error); + setActionError(error instanceof Error ? error.message : `${action.label} could not be completed.`); + } finally { + setBusyAction(null); + } + }; + + const downloadRelease = async (release: ReleaseOption) => { + if (!release.guid || !release.indexerId) { + setActionError("This release is missing the details needed to start it."); + return; + } + if (release.requiresOverride && (!canIgnoreProfileLimits || !ignoreProfileLimits)) return; + if ( + release.requiresOverride && + !window.confirm( + `Download this release outside the assigned profile?\n\n${release.title}\n${(release.rejections || []).join("\n")}\n\nThe assigned profile will stay unchanged.`, + ) + ) + return; + const collector = snapshot.request_type === "tv" ? "Sonarr" : "Radarr"; + setBusyAction(`grab:${release.guid}`); + setActionError(null); + try { + const response = await trackedPost( + `Send release through ${collector}`, + `${getApiBase()}/requests/${snapshot.request_id}/actions/grab`, + { + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + ...release, + ignoreProfileLimits: release.requiresOverride === true && ignoreProfileLimits, + }), + }, + ); + if (response.status === 401) { + clearToken(); + router.push("/login"); + return; + } + if (!response.ok) throw new Error(await readApiError(response, "The selected release could not be started.")); + const data = await response.json(); + setActionMessage(data?.message ?? "The selected release was queued for download."); + setReleaseOptions([]); + setReleasePickerOpen(false); + setReleaseSearchMessage(null); + } catch (error) { + console.error(error); + setActionError(error instanceof Error ? error.message : "The selected release could not be started."); + } finally { + setBusyAction(null); + } + }; + + return ( + <main className={`card request-detail-page request-cinematic ${resolvedBackdrop ? "has-backdrop" : ""}`}> + <div className="request-cinematic-art" aria-hidden="true"> + {resolvedBackdrop && ( + <Image + src={resolvedBackdrop} + alt="" + fill + sizes="100vw" + priority + unoptimized + onError={(event) => { + event.currentTarget.style.opacity = "0"; + }} + /> + )} + </div> + <div className="request-cinematic-title"> + <PageHeading + title={snapshot.title} + eyebrow={`Request #${snapshot.request_id}`} + description={[snapshot.request_type === "tv" ? "TV show" : "Movie", snapshot.year] + .filter(Boolean) + .join(" · ")} + leading={ + resolvedPoster && ( + <Image + className="request-poster" + src={resolvedPoster} + alt={`${snapshot.title} poster`} + width={60} + height={90} + sizes="60px" + unoptimized + /> + ) + } + /> + </div> + + <RequestLanguage + requestId={snapshot.request_id} + disabled={Boolean(busyAction)} + onApply={async (code) => { + setBusyAction("language"); + try { + const response = await trackedPost( + "Use original audio and search", + `${getApiBase()}/requests/${snapshot.request_id}/actions/language`, + { + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ acceptOriginalLanguage: true, languageCode: code }), + }, + ); + if (!response.ok) throw new Error(await readApiError(response, "The audio choice could not be saved.")); + } finally { + setBusyAction(null); + } + }} + /> + + <section className="request-overview" aria-labelledby="request-status-heading"> + <div className="request-overview-block request-overview-status"> + <span className="request-overview-label" id="request-status-heading"> + Status + </span> + <strong>{statusLabel}</strong> + </div> + <div className="request-overview-block"> + <span className="request-overview-label">What this means</span> + <p>{statusMeaning}</p> + </div> + {downloadVisible && ( + <div className="request-overview-block"> + <span className="request-overview-label">Current download state</span> + <strong>{download?.summary ?? "A download attempt has been observed."}</strong> + {download?.lastSeenAt && !download?.torrents?.length && ( + <small>Last observed {formatWhen(download.lastSeenAt)}</small> + )} + </div> + )} + {operationProgress && ( + <LatestActivity + operation={operationProgress} + besideDownload={downloadVisible} + onDismiss={() => setOperationProgress(null)} + /> + )} + <div className={`request-overview-block request-next-step ${requestComplete ? "is-ready" : ""}`}> + {requestComplete ? ( + <div className="request-ready-actions"> + <section> + <span className="request-overview-label">Ready to watch</span> + <strong>Watch this now!</strong> + <p>Open {snapshot.title} directly in Jellyfin.</p> + {mediaServerLink ? ( + <a className="request-watch-button" href={mediaServerLink} target="_blank" rel="noreferrer"> + Watch on Jellyfin <span aria-hidden="true">→</span> + </a> + ) : ( + <span className="request-ready-unavailable">The Jellyfin watch link is not configured.</span> + )} + </section> + <section> + <span className="request-overview-label">Need help?</span> + <strong>Is there a problem with this?</strong> + <p>Let us know what is wrong and we'll attach the title and request details automatically.</p> + {canReportIssues ? ( + <a className="request-problem-button" href={issueReportLink}> + Start issue report <span aria-hidden="true">→</span> + </a> + ) : ( + <span className="request-ready-unavailable">Issue reporting is not enabled for your account.</span> + )} + </section> + </div> + ) : ( + <> + <div className="request-next-step-main"> + <div className="request-next-step-copy"> + <span className="request-overview-label">Next step</span> + <strong>{nextStep.title}</strong> + <p>{nextStep.description}</p> + </div> + </div> + <div className="request-action-row"> + {recommendedActions.map((action) => ( + <button + key={action.id} + type="button" + disabled={Boolean(busyAction)} + onClick={() => void runAction(action)} + > + {busyAction === action.id ? "Working…" : action.label} + </button> + ))} + <button + type="button" + className="request-recheck-button" + disabled={Boolean(busyAction)} + onClick={() => void recheckRequest()} + title="Recheck Seerr, the library collector, qBittorrent, and the media server" + > + {busyAction === "recheck_pipeline" ? "Rechecking…" : "Recheck request"} + </button> + </div> + </> + )} + </div> + {(actionMessage || actionError) && ( + <div className={`request-action-feedback ${actionError ? "is-error" : "is-success"}`} role="status"> + {actionError ?? actionMessage} + </div> + )} + </section> + + {snapshot.request_type === "tv" && unmonitoredSeasons.length > 0 && ( + <section className="request-add-seasons" aria-labelledby="request-add-seasons-heading"> + <div className="request-add-seasons-heading"> + <div> + <span className="section-kicker">Collection expansion</span> + <h2 id="request-add-seasons-heading">Add more seasons</h2> + <p> + Sonarr knows about {unmonitoredSeasons.length} additional season + {unmonitoredSeasons.length === 1 ? "" : "s"} that {unmonitoredSeasons.length === 1 ? "is" : "are"} not + currently part of this request. + </p> + </div> + <span className="request-live-indicator"> + <i /> + Available to add + </span> + </div> + <fieldset className="request-season-picker"> + <legend>Choose seasons to monitor and search</legend> + <div className="request-season-actions"> + <button + type="button" + disabled={Boolean(busyAction)} + onClick={() => setSelectedAdditionalSeasons(unmonitoredSeasons.map((season) => season.seasonNumber))} + > + Select all + </button> + <button + type="button" + disabled={Boolean(busyAction) || selectedAdditionalSeasons.length === 0} + onClick={() => setSelectedAdditionalSeasons([])} + > + Clear + </button> + </div> + <div className="request-season-grid"> + {unmonitoredSeasons.map((season) => { + const selected = selectedAdditionalSeasons.includes(season.seasonNumber); + const episodeLabel = + season.episodeCount > 0 + ? `${season.episodeCount} known episode${season.episodeCount === 1 ? "" : "s"}` + : "Episodes not announced yet"; + return ( + <label className={selected ? "is-selected" : ""} key={season.seasonNumber}> + <input + type="checkbox" + checked={selected} + disabled={Boolean(busyAction) || libraryStage?.canAddSeasons === false} + onChange={() => + setSelectedAdditionalSeasons((current) => + selected + ? current.filter((number) => number !== season.seasonNumber) + : [...current, season.seasonNumber].sort((left, right) => left - right), + ) + } + /> + <span> + <strong>Season {season.seasonNumber}</strong> + <small> + {episodeLabel} + {season.available > 0 ? ` · ${season.available} already collected` : ""} + </small> + </span> + </label> + ); + })} + </div> + </fieldset> + <div className="request-add-seasons-submit"> + <div> + <strong> + {selectedAdditionalSeasons.length + ? `${selectedAdditionalSeasons.length} season${selectedAdditionalSeasons.length === 1 ? "" : "s"} selected` + : "Choose one or more seasons"} + </strong> + <small> + Selected seasons will be monitored in Sonarr and released missing episodes will be searched immediately. + </small> + </div> + {libraryStage?.canAddSeasons === false ? ( + <span className="request-ready-unavailable"> + Automatic collection searches are not enabled for your account. + </span> + ) : ( + <button + type="button" + disabled={Boolean(busyAction) || selectedAdditionalSeasons.length === 0} + onClick={() => void addSelectedSeasons()} + > + {busyAction === "add_seasons" ? "Adding seasons…" : "Add selected seasons"} + </button> + )} + </div> + </section> + )} + + {repairActivity?.visible && ( + <section className={`request-repair-activity is-${repairActivity.state ?? "searching"}`} aria-live="polite"> + <div className="request-repair-heading"> + <div> + <span className="section-kicker">Repair activity</span> + <h2>{repairActivity.headline ?? "Repair in progress"}</h2> + <p>{repairActivity.message ?? "Magent is checking the repair with the connected services."}</p> + </div> + <div className="request-repair-meta"> + <span + className={`request-operation-status is-${repairActivity.state === "attention" ? "error" : repairActivity.state === "complete" ? "complete" : "running"}`} + > + {repairActivity.state === "complete" + ? "Complete" + : repairActivity.state === "attention" + ? "Attention" + : "Live"} + </span> + {repairActivity.updatedAt && <small>Updated {formatWhen(repairActivity.updatedAt)}</small>} + </div> + </div> + <div className="request-repair-steps"> + {(repairActivity.steps ?? []).map((step) => ( + <div className={`request-repair-step is-${step.state}`} key={step.id}> + <i aria-hidden="true" /> + <div> + <strong>{step.label}</strong> + <span>{step.detail}</span> + </div> + </div> + ))} + </div> + </section> + )} + + {!requestComplete && ( + <section className="request-journey" aria-labelledby="request-journey-heading"> + <div className="request-journey-heading"> + <div> + <span className="section-kicker">Live collection path</span> + <h2 id="request-journey-heading">Where your request is now</h2> + </div> + <span className="request-live-indicator"> + <i /> + Live status + </span> + </div> + + <div className="request-stage-grid"> + {pipeline.map((stage, index) => { + const stageActions = (stage.actionIds ?? []) + .map((actionId) => actionsById.get(actionId)) + .filter((action): action is RequestAction => Boolean(action)); + const content = ( + <> + <div className="request-stage-topline"> + <span className="request-stage-number">{String(index + 1).padStart(2, "0")}</span> + <span className={`request-stage-state state-${stage.state}`}> + {stage.stateLabel ?? stage.state} + </span> + </div> + <h3>{stage.label}</h3> + <p + aria-live={stage.id === "library" ? "polite" : undefined} + aria-atomic={stage.id === "library" ? true : undefined} + > + {stage.summary} + </p> + + {stage.id === "library" && Boolean(stage.total) && ( + <div className="request-availability-meter"> + <div className="request-meter-copy"> + <span>{stage.available ?? 0} collected</span> + <span>{stage.missing ?? 0} missing</span> + </div> + <div + className="request-meter-track" + role="progressbar" + aria-label="Collection progress" + aria-valuemin={0} + aria-valuemax={stage.total ?? 0} + aria-valuenow={stage.available ?? 0} + > + <span + style={{ + width: `${Math.round(((stage.available ?? 0) / Math.max(stage.total ?? 1, 1)) * 100)}%`, + }} + /> + </div> + {stage.seasons?.map((season) => ( + <div className="request-season-row" key={season.seasonNumber}> + <span>Season {season.seasonNumber}</span> + <span> + {season.available} collected · {season.missing} missing + </span> + </div> + ))} + </div> + )} + + {stage.id === "library" && stage.missingEpisodes && Object.keys(stage.missingEpisodes).length > 0 && ( + <div className="request-missing-list"> + {Object.entries(stage.missingEpisodes).map(([season, episodes]) => ( + <div key={season}> + <span>Missing from season {season}</span> + <strong>{episodes.map((episode) => `E${episode}`).join(", ")}</strong> + </div> + ))} + </div> + )} + + {stage.id === "download" && + stage.visible && + stage.torrents?.map((torrent) => { + const progress = torrentProgress(torrent); + const torrentName = typeof torrent.name === "string" ? torrent.name : "Download"; + const torrentHash = typeof torrent.hash === "string" ? torrent.hash : torrentName; + const episodeLabel = typeof torrent.episodeLabel === "string" ? torrent.episodeLabel : null; + return ( + <div className="request-torrent" key={torrentHash}> + {episodeLabel && <small>{episodeLabel}</small>} + <div> + <strong>{torrentName}</strong> + <span>{progress === null ? "Progress unavailable" : formatProgress(progress)}</span> + </div> + {progress !== null && ( + <div + className="request-meter-track is-live-download" + role="progressbar" + aria-label={`${torrentName} progress`} + aria-valuemin={0} + aria-valuemax={100} + aria-valuenow={progress} + > + <span style={{ width: `${progress}%` }} /> + </div> + )} + </div> + ); + })} + + {stageActions.length > 0 && ( + <div className="request-stage-actions"> + {stageActions.map((action) => ( + <button + key={action.id} + type="button" + disabled={Boolean(busyAction)} + onClick={() => void runAction(action)} + > + {busyAction === action.id ? "Working…" : action.label} + </button> + ))} + </div> + )} + </> + ); + return stage.id === "available" && stage.link ? ( + <a + className={`request-stage stage-${stage.state} is-link`} + href={stage.link} + target="_blank" + rel="noreferrer" + key={stage.id} + > + {content} + <span className="request-stage-link">Open on media server →</span> + </a> + ) : ( + <article className={`request-stage stage-${stage.state}`} key={stage.id}> + {content} + </article> + ); + })} + </div> + </section> + )} + + {releasePickerOpen && ( + <div className="request-release-modal-layer"> + <button + type="button" + className="request-release-modal-backdrop" + aria-label="Close available releases" + onClick={closeReleasePicker} + /> + <section + className="request-release-modal" + role="dialog" + aria-modal="true" + aria-labelledby="release-picker-title" + > + <header className="request-release-modal-header"> + <div> + <span className="section-kicker"> + Results from {releaseCollector ?? (snapshot.request_type === "tv" ? "Sonarr" : "Radarr")} + </span> + <h2 id="release-picker-title">Choose an available download</h2> + <p>Review available releases and any rejection reasons. The assigned profile stays unchanged.</p> + </div> + <button + type="button" + className="ghost-button" + onClick={closeReleasePicker} + disabled={busyAction?.startsWith("grab:")} + > + Close + </button> + </header> + + <div className="request-release-modal-body"> + {busyAction === "search_releases" && ( + <div className="request-release-searching" role="status"> + <i aria-hidden="true" /> + <div> + <strong>Checking available releases</strong> + <span> + {releaseCollector ?? "The collector"} is applying its quality profile and ranking the results. + </span> + </div> + </div> + )} + + {busyAction !== "search_releases" && releaseSearchMessage && ( + <div className="request-release-profile-note"> + <strong>Search results</strong> + <span>{releaseSearchMessage}</span> + </div> + )} + + {busyAction !== "search_releases" && actionError && ( + <div className="request-release-empty is-error" role="alert"> + <strong>The release search could not be completed</strong> + <span>{actionError}</span> + </div> + )} + + {busyAction !== "search_releases" && !actionError && releaseOptions.length === 0 && ( + <div className="request-release-empty"> + <strong>No suitable downloads are available right now</strong> + <span>No releases were returned for this search. Check the indexers or try again later.</span> + </div> + )} + + {canIgnoreProfileLimits && ( + <label className="request-release-profile-toggle"> + <span> + <strong>Ignore profile limits</strong> + <small>Allow releases outside this title's profile. You'll confirm each download.</small> + </span> + <input + type="checkbox" + checked={ignoreProfileLimits} + disabled={Boolean(busyAction)} + onChange={(event) => setIgnoreProfileLimits(event.target.checked)} + /> + </label> + )} + {nextSearchOffset !== null && ( + <button + type="button" + className="ghost-button" + disabled={Boolean(busyAction)} + onClick={() => + void runAction( + { + id: "search_releases", + label: "Search next missing episodes", + risk: "low", + requires_confirmation: false, + }, + nextSearchOffset, + ) + } + > + Search next missing episodes + </button> + )} + {releaseOptions.length > 0 && ( + <div className="request-release-list"> + {releaseOptions.map((release) => { + const isBestPick = release.bestPick === true; + return ( + <article + className={`request-release ${isBestPick ? "is-best-pick" : ""}`} + key={`${release.indexerId ?? ""}:${release.guid ?? release.title}`} + > + <div className="request-release-copy"> + <div className="request-release-badges"> + {isBestPick && <span className="request-release-best-badge">Best pick</span>} + {release.requiresOverride && <span>Outside profile</span>} + {release.selectable === false && <span>Unavailable for selection</span>} + {release.quality && <span>{release.quality}</span>} + {release.fullSeason && <span>Season {release.seasonNumber ?? ""} pack</span>} + </div> + <strong>{release.title ?? "Unknown release"}</strong> + <span> + {release.indexer ?? "Unknown indexer"} · {release.seeders ?? 0} seeders ·{" "} + {formatBytes(release.size)} + {typeof release.customFormatScore === "number" + ? ` · Score ${release.customFormatScore}` + : ""} + </span> + {!!release.rejections?.length && ( + <small className="release-rejection-reasons">{release.rejections.join("; ")}</small> + )} + {isBestPick && ( + <small> + This is the highest-ranked release approved by {releaseCollector ?? "the collector"}. + </small> + )} + </div> + <button + type="button" + disabled={ + Boolean(busyAction) || + !release.selectionToken || + release.selectable === false || + (release.requiresOverride && (!canIgnoreProfileLimits || !ignoreProfileLimits)) + } + onClick={() => void downloadRelease(release)} + > + {busyAction === `grab:${release.guid}` + ? "Sending…" + : release.requiresOverride + ? "Download outside profile" + : isBestPick + ? "Download best pick" + : "Download this release"} + </button> + </article> + ); + })} + </div> + )} + </div> + </section> + </div> + )} + + {isAdmin && ( + <section className="request-advanced"> + <button + type="button" + className="request-advanced-toggle" + aria-expanded={showDetails} + onClick={() => setShowDetails((current) => !current)} + > + <span> + <strong>Advanced details</strong> + <small>Service diagnostics, status history and recorded actions</small> + </span> + <span>{showDetails ? "Hide" : "Show"}</span> + </button> + {showDetails && ( + <div className="request-advanced-content"> + <div className="request-diagnostics-grid"> + {snapshot.timeline.map((hop, index) => ( + <article className="request-diagnostic" key={`${hop.service}-${index}`}> + <div> + <strong>{hop.service}</strong> + <span>{hop.status}</span> + </div> + {hop.details && <pre>{JSON.stringify(hop.details, null, 2)}</pre>} + </article> + ))} + </div> + <div className="history-grid"> + <div className="summary-card"> + <h3>Status changes</h3> + <ul> + {historySnapshots.length === 0 ? ( + <li>No distinct status changes recorded yet.</li> + ) : ( + historySnapshots.map((entry) => ( + <li key={`${entry.created_at}-${entry.state}`}> + <span>{fallbackStatusLabel(entry.state)}</span> + <small> + {entry.state_reason ?? "No additional detail."} · {formatWhen(entry.created_at)} + </small> + </li> + )) + )} + </ul> + </div> + <div className="summary-card"> + <h3>Recorded actions</h3> + <ul> + {historyActions.length === 0 ? ( + <li>No actions have been run for this request.</li> + ) : ( + historyActions.map((entry) => ( + <li key={`${entry.created_at}-${entry.action_id}`}> + <span>{entry.label}</span> + <small> + {entry.message ?? entry.status} · {formatWhen(entry.created_at)} + </small> + </li> + )) + )} + </ul> + </div> + </div> + </div> + )} + </section> + )} + </main> + ); +} diff --git a/frontend/app/reset-password/page.tsx b/frontend/app/reset-password/page.tsx new file mode 100644 index 0000000..943fcb2 --- /dev/null +++ b/frontend/app/reset-password/page.tsx @@ -0,0 +1,164 @@ +"use client"; + +import { Suspense, useEffect, useState } from "react"; +import { useRouter, useSearchParams } from "next/navigation"; +import AuthLayout from "../ui/AuthLayout"; +import { getApiBase } from "../lib/auth"; + +type ResetVerification = { + status: string; + recipient_hint?: string; + auth_provider?: string; + expires_at?: string; +}; + +function ResetPasswordPageContent() { + const router = useRouter(); + const searchParams = useSearchParams(); + const token = searchParams.get("token") ?? ""; + const [verification, setVerification] = useState<ResetVerification | null>(null); + const [loading, setLoading] = useState(false); + const [verifying, setVerifying] = useState(true); + const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [error, setError] = useState<string | null>(null); + const [status, setStatus] = useState<string | null>(null); + + useEffect(() => { + const verifyToken = async () => { + if (!token) { + setError("Password reset link is invalid or missing."); + setVerifying(false); + return; + } + setVerifying(true); + setError(null); + setStatus(null); + try { + const baseUrl = getApiBase(); + const response = await fetch(`${baseUrl}/auth/password/reset/verify?token=${encodeURIComponent(token)}`); + const data = await response.json().catch(() => null); + if (!response.ok) { + throw new Error(typeof data?.detail === "string" ? data.detail : "Password reset link is invalid."); + } + setVerification(data); + } catch (err) { + console.error(err); + setVerification(null); + setError(err instanceof Error ? err.message : "Password reset link is invalid."); + } finally { + setVerifying(false); + } + }; + + void verifyToken(); + }, [token]); + + const submit = async (event: React.FormEvent) => { + event.preventDefault(); + if (!token) { + setError("Password reset link is invalid or missing."); + return; + } + if (password.trim().length < 8) { + setError("Password must be at least 8 characters."); + return; + } + if (password !== confirmPassword) { + setError("Passwords do not match."); + return; + } + setLoading(true); + setError(null); + setStatus(null); + try { + const baseUrl = getApiBase(); + const response = await fetch(`${baseUrl}/auth/password/reset`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ token, new_password: password }), + }); + const data = await response.json().catch(() => null); + if (!response.ok) { + throw new Error(typeof data?.detail === "string" ? data.detail : "Unable to reset password."); + } + setStatus("Password updated. You can now sign in with the new password."); + setPassword(""); + setConfirmPassword(""); + window.setTimeout(() => router.push("/login"), 1200); + } catch (err) { + console.error(err); + setError(err instanceof Error ? err.message : "Unable to reset password."); + } finally { + setLoading(false); + } + }; + + const providerLabel = verification?.auth_provider === "jellyfin" ? "Jellyfin, Seerr, and Magent" : "Magent"; + + return ( + <AuthLayout title="Reset password" description="Choose a new password of at least 8 characters."> + <form className="account-form login-form auth-flow-form" onSubmit={submit}> + {verifying && <div className="status-banner">Checking password reset link…</div>} + {!verifying && verification && ( + <div className="status-banner"> + This reset link was sent to {verification.recipient_hint || "your email"} and will update the password used + for {providerLabel}. + </div> + )} + <label> + New password + <input + type="password" + value={password} + onChange={(event) => setPassword(event.target.value)} + autoComplete="new-password" + disabled={!verification || loading} + /> + </label> + <label> + Confirm new password + <input + type="password" + value={confirmPassword} + onChange={(event) => setConfirmPassword(event.target.value)} + autoComplete="new-password" + disabled={!verification || loading} + /> + </label> + {error && ( + <div className="account-notice is-error" role="alert"> + {error} + </div> + )} + {status && ( + <div className="account-notice is-status" role="status"> + {status} + </div> + )} + <div className="auth-actions"> + <button type="submit" className="account-primary" disabled={loading || verifying || !verification}> + {loading ? "Updating password…" : "Reset password"} + </button> + </div> + <button type="button" className="ghost-button" onClick={() => router.push("/login")} disabled={loading}> + Back to sign in + </button> + </form> + </AuthLayout> + ); +} + +export default function ResetPasswordPage() { + return ( + <Suspense + fallback={ + <AuthLayout title="Reset password" description="Choose a new password for your account."> + <p role="status">Checking your reset link…</p> + </AuthLayout> + } + > + <ResetPasswordPageContent /> + </Suspense> + ); +} diff --git a/frontend/app/setup/page.tsx b/frontend/app/setup/page.tsx new file mode 100644 index 0000000..cba20fb --- /dev/null +++ b/frontend/app/setup/page.tsx @@ -0,0 +1,623 @@ +"use client"; + +import { useEffect, useState, type FormEvent } from "react"; +import { apiUrl, requestJson } from "../lib/api-client"; +import { authFetch, ForbiddenError, logout, setToken, UnauthorizedError } from "../lib/auth"; +import MagentMark from "../ui/MagentMark"; +import { serviceStatusLabel } from "../admin/configNavigation"; +import { + ALL_FIELDS, + APPS, + PREFERENCES, + bootstrapApplicationUrl, + configuredApp, + settingsPayload, + settingsValues, + type AppDefinition, + type Field, + type Setting, + type SetupState, + type SetupStatus, + type SetupStep, + type Values, +} from "./setup-model"; +import styles from "./setup.module.css"; + +type Check = { status: string; message?: string }; +type CollectorOptions = { rootFolders: { path: string }[]; qualityProfiles: { id: number; name: string }[] }; +const steps: { id: SetupStep; label: string }[] = [ + { id: "administrator", label: "Administrator" }, + { id: "apps", label: "Apps" }, + { id: "preferences", label: "Preferences" }, + { id: "review", label: "Review" }, +]; +const json = (body: unknown, method = "POST"): RequestInit => ({ + method, + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(body), +}); +const message = (error: unknown) => + error instanceof Error ? error.message : "Something went wrong. Please try again."; + +export default function SetupPage() { + const [status, setStatus] = useState<SetupStatus | null>(null); + const [state, setState] = useState<SetupState | null>(null); + const [step, setStep] = useState<SetupStep>("administrator"); + const [settings, setSettings] = useState<Setting[]>([]); + const [draft, setDraft] = useState<Values>({}); + const [ready, setReady] = useState(false); + const [admin, setAdmin] = useState(false); + const [forbidden, setForbidden] = useState(false); + const [busy, setBusy] = useState(""); + const [error, setError] = useState(""); + const [notice, setNotice] = useState(""); + const [username, setUsername] = useState("admin"); + const [password, setPassword] = useState(""); + const [confirmation, setConfirmation] = useState(""); + const [setupToken, setSetupToken] = useState(""); + const [applicationUrl, setApplicationUrl] = useState(""); + const [checks, setChecks] = useState<Record<string, Check>>({}); + const [options, setOptions] = useState<Record<string, CollectorOptions>>({}); + const [accepted, setAccepted] = useState(false); + const values = { ...settingsValues(settings), ...draft }; + + useEffect(() => { + setApplicationUrl(window.location.origin); + const controller = new AbortController(); + const load = async () => { + try { + const current = await requestJson<SetupStatus>( + "/setup/status", + { signal: controller.signal, cache: "no-store" }, + authFetch, + ); + setStatus(current); + if (current.needs_admin) return; + const response = await authFetch(apiUrl("/auth/me"), { signal: controller.signal }); + if (!response.ok) return; + const user = await response.json(); + if (user.role !== "admin") { + setForbidden(true); + return; + } + const [progress, config] = await Promise.all([ + requestJson<SetupState>("/setup/state", { signal: controller.signal }), + requestJson<{ settings: Setting[] }>("/admin/settings", { signal: controller.signal }), + ]); + setAdmin(true); + setState(progress); + setStep(progress.completed || progress.step === "administrator" ? "apps" : progress.step); + setSettings(config.settings); + } catch (failure) { + if (!controller.signal.aborted) setError(message(failure)); + } finally { + if (!controller.signal.aborted) setReady(true); + } + }; + void load(); + return () => controller.abort(); + }, []); + + useEffect(() => { + if (!Object.keys(draft).length) return; + const warn = (event: BeforeUnloadEvent) => { + event.preventDefault(); + event.returnValue = ""; + }; + window.addEventListener("beforeunload", warn); + return () => window.removeEventListener("beforeunload", warn); + }, [draft]); + + const run = async (name: string, action: () => Promise<void>) => { + if (busy) return; + setBusy(name); + setError(""); + setNotice(""); + try { + await action(); + } catch (failure) { + if (failure instanceof UnauthorizedError) { + setAdmin(false); + setForbidden(false); + setAccepted(false); + setPassword(""); + setError("Your session expired. Sign in to continue; your unsaved changes are still here."); + } else if (failure instanceof ForbiddenError) { + setAdmin(false); + setForbidden(true); + setAccepted(false); + } else setError(message(failure)); + } finally { + setBusy(""); + } + }; + + const signIn = async (loginPassword = password) => { + const result = await requestJson<{ authenticated: boolean; user?: { role: string } }>( + "/auth/login", + { + method: "POST", + headers: { "Content-Type": "application/x-www-form-urlencoded" }, + body: new URLSearchParams({ username: username.trim(), password: loginPassword }), + }, + authFetch, + ); + if (!result.authenticated) throw new Error("Could not sign in. Try your administrator credentials again."); + setToken("cookie"); + setPassword(""); + setConfirmation(""); + const user = await requestJson<{ role: string }>("/auth/me"); + if (user.role !== "admin") { + setForbidden(true); + return; + } + const [progress, config] = await Promise.all([ + requestJson<SetupState>("/setup/state"), + requestJson<{ settings: Setting[] }>("/admin/settings"), + ]); + setAdmin(true); + setForbidden(false); + setNotice(""); + setState(progress); + setSettings(config.settings); + setStep(progress.completed || progress.step === "administrator" ? "apps" : progress.step); + }; + + const authenticate = (event: FormEvent) => { + event.preventDefault(); + void run("account", async () => { + let loginPassword = password; + if (status?.needs_admin) { + const confirmedApplicationUrl = bootstrapApplicationUrl(applicationUrl, window.location.origin); + if (password !== confirmation) throw new Error("The passwords do not match."); + loginPassword = password.trim(); + if (loginPassword.length < 12) + throw new Error("Password must be at least 12 characters, excluding leading and trailing spaces."); + await requestJson( + "/setup/bootstrap", + json({ + setup_token: setupToken, + username: username.trim(), + password, + application_url: confirmedApplicationUrl, + }), + authFetch, + ); + setPassword(loginPassword); + setSetupToken(""); + setStatus({ setup_required: true, needs_admin: false }); + setNotice("Administrator created. Signing in..."); + } + await signIn(loginPassword); + }); + }; + + const switchAccount = () => + void run("switch-account", async () => { + await logout(); + setAdmin(false); + setForbidden(false); + setAccepted(false); + setUsername(""); + setPassword(""); + setConfirmation(""); + setDraft({}); + setSettings([]); + setChecks({}); + setOptions({}); + setNotice("Sign in with a Magent administrator account to continue setup."); + }); + + const save = async (fields: Field[] = ALL_FIELDS) => { + const payload = settingsPayload(draft, fields); + if (!Object.keys(payload).length) return; + if (values.site_login_show_local_login === false && values.site_login_show_jellyfin_login === false) { + throw new Error("Keep at least one sign-in method enabled."); + } + if (values.magent_notify_email_use_tls === true && values.magent_notify_email_use_ssl === true) { + throw new Error("Choose STARTTLS or implicit TLS, not both."); + } + await requestJson("/admin/settings", json(payload, "PUT")); + const config = await requestJson<{ settings: Setting[] }>("/admin/settings"); + setSettings(config.settings); + setDraft((previous) => + Object.fromEntries(Object.entries(previous).filter(([key]) => !fields.some((field) => field.key === key))), + ); + }; + + const go = (next: SetupStep) => + void run("save", async () => { + await save(); + if (!state?.completed) setState(await requestJson<SetupState>("/setup/state", json({ step: next }, "PUT"))); + setStep(next); + setNotice("Settings saved. You can return to finish setup later."); + }); + + const test = (app: AppDefinition) => + void run(app.id, async () => { + await save(app.fields); + const check = await requestJson<Check>(`/status/services/${app.id}/test`, { method: "POST" }); + setChecks((previous) => ({ ...previous, [app.id]: check })); + setNotice(`${app.name}: ${serviceStatusLabel(check.status)}${check.message ? ` — ${check.message}` : ""}`); + if ((app.id === "sonarr" || app.id === "radarr") && check.status === "up") { + const choices = await requestJson<CollectorOptions>(`/admin/${app.id}/options`); + setOptions((previous) => ({ ...previous, [app.id]: choices })); + } + }); + + const update = (field: Field, value: string | boolean) => { + setDraft((previous) => ({ ...previous, [field.key]: value })); + setAccepted(false); + setNotice(""); + const app = APPS.find((candidate) => candidate.fields.some((item) => item.key === field.key)); + if (app) setChecks((previous) => ({ ...previous, [app.id]: { status: "unchecked" } })); + }; + + const fieldControl = (field: Field) => { + const saved = settings.some((setting) => setting.key === field.key && setting.isSet); + const collectorId = field.key.startsWith("sonarr_") ? "sonarr" : "radarr"; + const choices = options[collectorId]; + const profile = field.key.endsWith("_quality_profile_id") && choices?.qualityProfiles.length; + const folders = field.key.endsWith("_root_folder") && choices?.rootFolders.length; + return ( + <div key={field.key} className={`${styles.field} ${field.type === "checkbox" ? styles.toggle : ""}`}> + <label htmlFor={`setup-${field.key}`}> + {field.label} + {field.type === "password" && saved && <small>Saved securely</small>} + </label> + {field.type === "checkbox" ? ( + <input + id={`setup-${field.key}`} + type="checkbox" + checked={values[field.key] === true} + onChange={(event) => update(field, event.target.checked)} + disabled={!!busy} + /> + ) : field.type === "textarea" ? ( + <textarea + id={`setup-${field.key}`} + value={String(values[field.key] ?? "")} + onChange={(event) => update(field, event.target.value)} + disabled={!!busy} + rows={3} + /> + ) : profile ? ( + <select + id={`setup-${field.key}`} + value={String(values[field.key] ?? "")} + onChange={(event) => update(field, event.target.value)} + disabled={!!busy} + > + <option value="">Choose a profile</option> + {choices.qualityProfiles.map((choice) => ( + <option key={choice.id} value={choice.id}> + {choice.name} + </option> + ))} + </select> + ) : ( + <input + id={`setup-${field.key}`} + type={field.type || "text"} + value={String(values[field.key] ?? "")} + onChange={(event) => update(field, event.target.value)} + disabled={!!busy} + autoComplete={field.type === "password" ? "new-password" : "off"} + min={field.min} + max={field.max} + placeholder={ + field.type === "password" && saved ? "Leave blank to keep saved credential" : field.placeholder + } + list={folders ? `options-${field.key}` : undefined} + /> + )} + {folders ? ( + <datalist id={`options-${field.key}`}> + {choices.rootFolders.map((folder) => ( + <option key={folder.path} value={folder.path} /> + ))} + </datalist> + ) : null} + {field.hint && <p>{field.hint}</p>} + </div> + ); + }; + + return ( + <main className={styles.setup}> + <header className={styles.heading}> + <div className={styles.brand}> + <MagentMark /> + <span>Magent / Installation</span> + </div> + <h1>Set up Magent</h1> + <p>Connect your media apps, choose your settings and make yourself at home.</p> + </header> + {!ready ? ( + <p role="status">Checking installation...</p> + ) : ( + <> + {error && ( + <p className={styles.error} role="alert"> + {error} + </p> + )} + {notice && ( + <p className={styles.notice} role="status"> + {notice} + </p> + )} + {!status ? ( + <button type="button" onClick={() => window.location.reload()}> + Retry + </button> + ) : forbidden ? ( + <section className={styles.panel}> + <h2>Administrator access required</h2> + <p>Ask an administrator to finish installation.</p> + <button type="button" disabled={!!busy} onClick={switchAccount}> + {busy === "switch-account" ? "Signing out..." : "Sign in with an administrator account"} + </button> + </section> + ) : !admin ? ( + <section className={styles.panel}> + <h2>{status.needs_admin ? "Create your administrator" : "Sign in to continue"}</h2> + <p> + {status.needs_admin ? ( + <> + Enter the SETUP_TOKEN from your deployment environment. For a managed Portainer install, open the + Magent container console and run <code>python -m app.container_bootstrap setup-token</code> to + retrieve it. Only the server operator can create the first administrator; the console command stops + returning the token after that account exists. + </> + ) : ( + "Use your local Magent administrator account. Settings are never available to unauthenticated visitors." + )} + </p> + <form onSubmit={authenticate} className={styles.account}> + {status.needs_admin && ( + <div className={styles.field}> + <label htmlFor="setup-application-url">Public Magent URL</label> + <input + id="setup-application-url" + type="url" + autoComplete="url" + required + maxLength={2048} + value={applicationUrl} + onChange={(event) => setApplicationUrl(event.target.value)} + aria-describedby="setup-application-url-hint" + disabled={!!busy} + /> + <p id="setup-application-url-hint"> + Confirm the address your users will open. Use HTTPS for internet-facing installs. This must match + the address currently open in your browser; if you plan to use another domain, open Magent there + before creating your administrator. Managed installs use this address for links and sign-in + security. + </p> + </div> + )} + {status.needs_admin && ( + <div className={styles.field}> + <label htmlFor="setup-token">Setup token</label> + <input + id="setup-token" + type="password" + autoComplete="off" + required + minLength={32} + maxLength={1024} + value={setupToken} + onChange={(event) => setSetupToken(event.target.value)} + disabled={!!busy} + /> + </div> + )} + <div className={styles.field}> + <label htmlFor="setup-username">Username</label> + <input + id="setup-username" + autoComplete="username" + required + maxLength={100} + value={username} + onChange={(event) => setUsername(event.target.value)} + disabled={!!busy} + /> + </div> + <div className={styles.field}> + <label htmlFor="setup-password">Password</label> + <input + id="setup-password" + type="password" + autoComplete={status.needs_admin ? "new-password" : "current-password"} + required + minLength={status.needs_admin ? 12 : undefined} + maxLength={1024} + value={password} + onChange={(event) => setPassword(event.target.value)} + disabled={!!busy} + /> + </div> + {status.needs_admin && ( + <div className={styles.field}> + <label htmlFor="setup-confirm">Confirm password</label> + <input + id="setup-confirm" + type="password" + autoComplete="new-password" + required + minLength={12} + maxLength={1024} + value={confirmation} + onChange={(event) => setConfirmation(event.target.value)} + disabled={!!busy} + /> + <p>Use at least 12 characters and a unique password.</p> + </div> + )} + <button type="submit" disabled={!!busy}> + {busy ? "Working..." : status.needs_admin ? "Create administrator" : "Sign in to continue"} + </button> + </form> + {!status.setup_required && <a href="/login?next=/setup">Use Jellyfin sign-in instead</a>} + </section> + ) : ( + <> + {state?.completed ? ( + <p className={styles.notice}> + This installation is already set up. You can use this guide to update its connections.{" "} + <a href="/admin">Back to settings</a> + </p> + ) : ( + <p className={styles.notice}> + Your administrator is ready. Background imports and automation are paused until you finish. Already + have a backup? <a href="/admin/backups">Restore it here</a>. + </p> + )} + <nav aria-label="Setup steps" className={styles.steps}> + {steps.map((item, index) => ( + <button + key={item.id} + type="button" + aria-current={step === item.id ? "step" : undefined} + disabled={!!busy || item.id === "administrator"} + onClick={() => go(item.id)} + > + <span>{index + 1}</span> + {item.id === "administrator" ? "Administrator ready" : item.label} + </button> + ))} + </nav> + <form + onSubmit={(event) => { + event.preventDefault(); + go(step === "apps" ? "preferences" : "review"); + }} + > + {step === "apps" && ( + <section aria-labelledby="apps-title"> + <h2 id="apps-title">Connect your apps</h2> + <p> + Each app is optional. Expand the apps you use, save and test their connections, then continue. In + Docker, localhost means the Magent container itself. + </p> + <div className={styles.apps}> + {APPS.map((app) => ( + <details key={app.id} className={styles.panel}> + <summary> + <span> + <strong>{app.name}</strong> + <small>{app.description}</small> + </span> + <span className={styles.badge}> + {checks[app.id] + ? serviceStatusLabel(checks[app.id].status) + : configuredApp(app, settings) + ? "Configured" + : "Optional / not set up"} + </span> + </summary> + <div className={styles.fields}>{app.fields.map(fieldControl)}</div> + <button type="button" disabled={!!busy} onClick={() => test(app)}> + {busy === app.id ? "Testing..." : `Save & test ${app.name}`} + </button> + {checks[app.id]?.message && <p role="status">{checks[app.id].message}</p>} + </details> + ))} + </div> + </section> + )} + {step === "preferences" && ( + <section aria-labelledby="preferences-title"> + <h2 id="preferences-title">Choose your preferences</h2> + <p> + Defaults are loaded from your installation. Advanced notification channels, branding and invite + policies are available in Settings afterwards. + </p> + {PREFERENCES.map((group) => ( + <section key={group.title} className={styles.panel}> + <h3>{group.title}</h3> + <div className={styles.fields}>{group.fields.map(fieldControl)}</div> + </section> + ))} + </section> + )} + {step === "review" && ( + <section className={styles.panel} aria-labelledby="review-title"> + <h2 id="review-title">Ready to finish?</h2> + <p>Unconfigured apps remain disconnected. You can change every connection later in Settings.</p> + <ul className={styles.review}> + {APPS.map((app) => ( + <li key={app.id}> + <span>{app.name}</span> + <span> + {checks[app.id] + ? serviceStatusLabel(checks[app.id].status) + : configuredApp(app, settings) + ? "Configured (not tested this session)" + : "Not configured"} + </span> + </li> + ))} + </ul> + <p> + Finishing starts the configured background imports and automation, unless disabled in your + deployment. Save an encrypted backup once you have checked the installation. + </p> + <label className={styles.confirm}> + <input + type="checkbox" + checked={accepted} + onChange={(event) => setAccepted(event.target.checked)} + disabled={!!busy} + /> + I have reviewed the connections and want to finish setup. + </label> + <p className={styles.hint}> + You may remove a manually configured SETUP_TOKEN from your environment after completion. Managed + installs keep their generated keys in the data volume; do not remove that file or volume. Existing + users and invites are preserved. + </p> + </section> + )} + <div className={styles.actions}> + {step !== "apps" && ( + <button + type="button" + className="ghost-button" + disabled={!!busy} + onClick={() => go(step === "review" ? "preferences" : "apps")} + > + Back + </button> + )} + <span>{Object.keys(draft).length ? "Unsaved changes" : "Progress is saved"}</span> + {step !== "review" ? ( + <button type="submit" disabled={!!busy}> + {busy === "save" ? "Saving..." : "Save & continue"} + </button> + ) : ( + <button + type="button" + disabled={!!busy || !accepted} + onClick={() => + void run("finish", async () => { + await save(); + await requestJson("/setup/complete", { method: "POST" }); + window.location.assign("/admin"); + }) + } + > + {busy === "finish" ? "Finishing..." : "Finish setup"} + </button> + )} + </div> + </form> + </> + )} + </> + )} + </main> + ); +} diff --git a/frontend/app/setup/setup-model.test.ts b/frontend/app/setup/setup-model.test.ts new file mode 100644 index 0000000..3491793 --- /dev/null +++ b/frontend/app/setup/setup-model.test.ts @@ -0,0 +1,125 @@ +import { describe, expect, it } from "vitest"; +import { APPS, bootstrapApplicationUrl, configuredApp, settingsPayload, settingsValues } from "./setup-model"; + +describe("first administrator application URL confirmation", () => { + it.each([ + ["https://magent.example.com", "https://magent.example.com"], + [" https://MAGENT.example.com:443/ ", "https://magent.example.com"], + ["http://192.0.2.10:3000", "http://192.0.2.10:3000"], + ["http://[fd00::10]:3000/", "http://[fd00::10]:3000"], + ])("confirms a canonical same-origin address %s", (value, browserOrigin) => { + expect(bootstrapApplicationUrl(value, browserOrigin)).toBe(browserOrigin); + }); + + it.each([ + "", + "magent.example.com", + "//magent.example.com", + "https:/magent.example.com", + "ftp://magent.example.com", + "javascript:alert(1)", + "https://user:password@magent.example.com", + "https://magent.example.com/setup", + "https://magent.example.com/../", + "https://magent.example.com?query=1", + "https://magent.example.com?", + "https://magent.example.com#fragment", + "https://magent.example.com#", + "https://magent.example.com\\path", + "https://magent.\texample.com", + ])("rejects a non-origin or unsafe URL %j", (value) => { + expect(() => bootstrapApplicationUrl(value, "https://magent.example.com")).toThrow("Public Magent URL must"); + }); + + it.each(["https://other.example.com", "http://magent.example.com", "https://magent.example.com:8443"])( + "requires the intended browser origin before claiming %s", + (value) => { + expect(() => bootstrapApplicationUrl(value, "https://magent.example.com")).toThrow( + "Open Magent at your intended address", + ); + }, + ); +}); + +describe("installation settings", () => { + it("offers every supported media integration", () => { + expect(APPS.map((app) => app.id).sort()).toEqual([ + "bazarr", + "jellyfin", + "jellystat", + "prowlarr", + "qbittorrent", + "radarr", + "seerr", + "sonarr", + ]); + }); + it("never copies saved secrets into the form or overwrites them with a blank", () => { + expect(settingsValues([{ key: "sonarr_api_key", value: "secret", sensitive: true, isSet: true }])).toEqual({ + sonarr_api_key: "", + }); + expect(settingsPayload({ sonarr_api_key: "", sonarr_base_url: "http://sonarr:8989" })).toEqual({ + sonarr_base_url: "http://sonarr:8989", + }); + }); + it("sends only editable fields and validates numeric settings", () => { + expect( + settingsPayload({ jwt_secret: "no", requests_cleanup_days: "90", site_login_show_signup_link: false }), + ).toEqual({ requests_cleanup_days: 90, site_login_show_signup_link: false }); + expect(() => settingsPayload({ requests_cleanup_days: "-1" })).toThrow("whole number"); + expect(() => settingsPayload({ sonarr_quality_profile_id: "1.5" })).toThrow("whole number"); + }); + it("can save just one app without accidentally saving another draft", () => { + expect( + settingsPayload( + { sonarr_base_url: "http://sonarr:8989", radarr_api_key: "draft-secret" }, + APPS.find((app) => app.id === "sonarr")?.fields, + ), + ).toEqual({ sonarr_base_url: "http://sonarr:8989" }); + }); + it("validates URL drafts even when app testing bypasses browser form validation", () => { + for (const value of [ + "sonarr:8989", + "/sonarr", + "ftp://sonarr:8989", + "javascript:alert(1)", + "http://sonarr/my library", + ]) { + expect(() => settingsPayload({ sonarr_base_url: value })).toThrow("HTTP or HTTPS URL"); + } + expect(() => settingsPayload({ sonarr_base_url: "https://user:secret@sonarr.test" })).toThrow("credential fields"); + expect( + settingsPayload({ + sonarr_base_url: " http://sonarr:8989 ", + magent_application_url: "https://magent.example.test", + }), + ).toEqual({ sonarr_base_url: "http://sonarr:8989", magent_application_url: "https://magent.example.test" }); + expect(settingsPayload({ sonarr_base_url: "" })).toEqual({ sonarr_base_url: "" }); + }); + it("validates sender email and sync time before step navigation saves", () => { + for (const value of ["not-an-email", "two@@example.test", "name@example test", "Name <name@example.test>"]) { + expect(() => settingsPayload({ magent_notify_email_from_address: value })).toThrow("valid email address"); + } + for (const value of ["24:00", "12:60", "2:30", "02:30:00"]) { + expect(() => settingsPayload({ requests_full_sync_time: value })).toThrow("HH:MM"); + } + expect( + settingsPayload({ + magent_notify_email_from_address: " alerts+admin@example.test ", + requests_full_sync_time: "23:59", + }), + ).toEqual({ magent_notify_email_from_address: "alerts+admin@example.test", requests_full_sync_time: "23:59" }); + expect(settingsPayload({ magent_notify_email_from_address: "", requests_full_sync_time: "" })).toEqual({ + magent_notify_email_from_address: "", + requests_full_sync_time: "", + }); + }); + it("does not call a URL-only app configured", () => { + const app = APPS[0]; + const url = { key: "jellyfin_base_url", value: "http://jellyfin:8096", sensitive: false, isSet: true }; + expect(configuredApp(app, [url])).toBe(false); + expect(configuredApp(app, [url, { key: "jellyfin_api_key", value: null, sensitive: true, isSet: true }])).toBe( + true, + ); + }); +}); diff --git a/frontend/app/setup/setup-model.ts b/frontend/app/setup/setup-model.ts new file mode 100644 index 0000000..19a4088 --- /dev/null +++ b/frontend/app/setup/setup-model.ts @@ -0,0 +1,294 @@ +export type SetupStep = "administrator" | "apps" | "preferences" | "review"; +export type SetupState = { completed: boolean; step: SetupStep; completed_at: string | null }; +export type SetupStatus = { setup_required: boolean; needs_admin: boolean }; +export type Setting = { key: string; value: unknown; sensitive: boolean; isSet: boolean }; +export type Values = Record<string, string | boolean>; +export type Field = { + key: string; + label: string; + type?: "password" | "url" | "number" | "checkbox" | "email" | "time" | "textarea"; + hint?: string; + placeholder?: string; + min?: number; + max?: number; +}; +export type AppDefinition = { id: string; name: string; description: string; fields: Field[] }; + +const connection = (prefix: string, placeholder: string): Field[] => [ + { + key: `${prefix}_base_url`, + label: "Server URL", + type: "url", + placeholder, + hint: "Use an address reachable from the Magent server, not your browser.", + }, + { key: `${prefix}_api_key`, label: "API key", type: "password" }, +]; +const collector = (prefix: string): Field[] => [ + { + key: `${prefix}_quality_profile_id`, + label: "Quality profile ID", + type: "number", + min: 1, + hint: "Save and test the connection to load available profiles.", + }, + { + key: `${prefix}_root_folder`, + label: "Root folder", + hint: "The library path as seen by this app, for example /tv or /movies.", + }, + { + key: `${prefix}_qbittorrent_category`, + label: "Download category", + hint: "Match the category configured in the app's download client.", + }, +]; + +export const APPS: AppDefinition[] = [ + { + id: "jellyfin", + name: "Jellyfin", + description: "Playback, library availability and Jellyfin sign-in.", + fields: [ + ...connection("jellyfin", "http://jellyfin:8096"), + { + key: "jellyfin_public_url", + label: "Public playback URL", + type: "url", + hint: "The address your users open to watch media.", + }, + { + key: "jellyfin_sync_to_arr", + label: "Sync Jellyfin library into Sonarr / Radarr", + type: "checkbox", + hint: "Optional automation. Only enable if you want Magent to reconcile these libraries.", + }, + ], + }, + { + id: "seerr", + name: "Seerr", + description: "Requests, approvals and request history (including Jellyseerr).", + fields: connection("jellyseerr", "http://seerr:5055"), + }, + { + id: "sonarr", + name: "Sonarr", + description: "TV requests, seasons and collection progress.", + fields: [...connection("sonarr", "http://sonarr:8989"), ...collector("sonarr")], + }, + { + id: "radarr", + name: "Radarr", + description: "Movie requests and collection progress.", + fields: [...connection("radarr", "http://radarr:7878"), ...collector("radarr")], + }, + { + id: "prowlarr", + name: "Prowlarr", + description: "Indexer searches and release discovery.", + fields: connection("prowlarr", "http://prowlarr:9696"), + }, + { + id: "qbittorrent", + name: "qBittorrent", + description: "Download progress and recovery actions.", + fields: [ + { key: "qbittorrent_base_url", label: "Web UI URL", type: "url", placeholder: "http://qbittorrent:8080" }, + { key: "qbittorrent_username", label: "Username" }, + { key: "qbittorrent_password", label: "Password", type: "password" }, + ], + }, + { + id: "bazarr", + name: "Bazarr", + description: "Optional subtitle searches and repairs.", + fields: [ + ...connection("bazarr", "http://bazarr:6767"), + { key: "bazarr_default_language", label: "Default subtitle language", placeholder: "en" }, + ], + }, + { + id: "jellystat", + name: "Jellystat", + description: "Optional personal viewing statistics.", + fields: connection("jellystat", "http://jellystat:3000"), + }, +]; + +export const PREFERENCES: { title: string; fields: Field[] }[] = [ + { + title: "Site & access", + fields: [ + { + key: "magent_application_url", + label: "Public Magent URL", + type: "url", + hint: "Used in invite and notification links. Managed installs also use this address for CORS and sign-in; changing it changes the allowed browser origin. Manual installs keep their environment-configured CORS policy.", + }, + { key: "site_login_message", label: "Login page message", type: "textarea" }, + { + key: "site_login_show_local_login", + label: "Show Magent account sign-in", + type: "checkbox", + hint: "Keep this enabled for local administrator access.", + }, + { key: "site_login_show_jellyfin_login", label: "Show Jellyfin sign-in", type: "checkbox" }, + { + key: "site_login_show_signup_link", + label: "Show invite signup link", + type: "checkbox", + hint: "Account creation still requires a valid invite. This does not open public registration.", + }, + ], + }, + { + title: "Request updates", + fields: [ + { key: "requests_poll_interval_seconds", label: "Request polling interval (seconds)", type: "number", min: 1 }, + { + key: "requests_delta_sync_interval_minutes", + label: "Incremental sync interval (minutes)", + type: "number", + min: 1, + }, + { key: "requests_full_sync_time", label: "Daily full sync time (server timezone)", type: "time" }, + { key: "requests_cleanup_days", label: "History retention (days)", type: "number", min: 1 }, + ], + }, + { + title: "Email (optional)", + fields: [ + { key: "magent_notify_enabled", label: "Enable notifications", type: "checkbox" }, + { + key: "magent_notify_email_enabled", + label: "Enable email delivery", + type: "checkbox", + hint: "Used for invites, password resets and issue updates. Configure SMTP before enabling.", + }, + { key: "magent_notify_email_smtp_host", label: "SMTP hostname" }, + { key: "magent_notify_email_smtp_port", label: "SMTP port", type: "number", min: 1, max: 65535 }, + { key: "magent_notify_email_smtp_username", label: "SMTP username" }, + { key: "magent_notify_email_smtp_password", label: "SMTP password", type: "password" }, + { key: "magent_notify_email_from_address", label: "Sender email", type: "email" }, + { key: "magent_notify_email_from_name", label: "Sender name" }, + { key: "magent_notify_email_use_tls", label: "Use STARTTLS (usually port 587)", type: "checkbox" }, + { + key: "magent_notify_email_use_ssl", + label: "Use implicit TLS (usually port 465)", + type: "checkbox", + hint: "Choose either STARTTLS or implicit TLS, not both.", + }, + ], + }, +]; + +export const ALL_FIELDS = [...APPS.flatMap((app) => app.fields), ...PREFERENCES.flatMap((group) => group.fields)]; + +export function bootstrapApplicationUrl(value: string, browserOrigin: string): string { + const configured = value.trim(); + let url: URL; + try { + url = new URL(configured); + } catch { + throw new Error("Public Magent URL must be a full HTTP or HTTPS origin, for example https://magent.example.com."); + } + if ( + !/^https?:\/\/[^/?#]+\/?$/i.test(configured) || + /[\s\\]/.test(configured) || + !["http:", "https:"].includes(url.protocol) || + !url.hostname || + url.username || + url.password || + url.pathname !== "/" || + url.search || + url.hash + ) { + throw new Error( + "Public Magent URL must be an HTTP or HTTPS origin without credentials, a path, query or fragment.", + ); + } + if (url.origin !== browserOrigin) { + throw new Error( + "Public Magent URL must match the address open in this browser. Open Magent at your intended address, then confirm it and create the administrator there.", + ); + } + return url.origin; +} + +export function settingsValues(settings: Setting[]): Values { + const values: Values = {}; + for (const field of ALL_FIELDS) { + const setting = settings.find((candidate) => candidate.key === field.key); + if (!setting) continue; + values[field.key] = + field.type === "password" || setting.sensitive + ? "" + : field.type === "checkbox" + ? setting.value === true || setting.value === "true" || setting.value === "1" + : String(setting.value ?? ""); + } + return values; +} + +// Only explicitly edited fields are sent. A blank password never clears a saved +// secret (masked values from the settings endpoint are not actual credentials). +export function settingsPayload( + draft: Values, + fields: Field[] = ALL_FIELDS, +): Record<string, string | boolean | number> { + const payload: Record<string, string | boolean | number> = {}; + for (const field of fields) { + const value = draft[field.key]; + if (value === undefined || (field.type === "password" && !String(value).trim())) continue; + if (field.type === "url" || field.type === "email" || field.type === "time") { + const text = String(value).trim(); + if (text && field.type === "url") { + let url: URL; + try { + url = new URL(text); + } catch { + throw new Error(`${field.label} must be a full HTTP or HTTPS URL.`); + } + if ( + !/^https?:\/\//i.test(text) || + !["http:", "https:"].includes(url.protocol) || + !url.hostname || + /\s/.test(text) + ) { + throw new Error(`${field.label} must be a full HTTP or HTTPS URL.`); + } + if (url.username || url.password) + throw new Error(`${field.label} must not include a username or password. Use the credential fields instead.`); + } + if ( + text && + field.type === "email" && + !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test( + text, + ) + ) { + throw new Error(`${field.label} must be a valid email address.`); + } + if (text && field.type === "time" && !/^(?:[01]\d|2[0-3]):[0-5]\d$/.test(text)) { + throw new Error(`${field.label} must be a valid time in HH:MM format.`); + } + payload[field.key] = text; + } else if (field.type === "number" && value !== "") { + const number = Number(value); + if (!Number.isInteger(number) || number < (field.min ?? 0) || number > (field.max ?? Number.MAX_SAFE_INTEGER)) { + throw new Error( + `${field.label} must be a whole number between ${field.min ?? 0} and ${field.max ?? Number.MAX_SAFE_INTEGER}.`, + ); + } + payload[field.key] = number; + } else payload[field.key] = value; + } + return payload; +} + +export function configuredApp(app: AppDefinition, settings: Setting[]): boolean { + return app.fields + .filter((field) => field.key.endsWith("_base_url") || field.type === "password") + .every((field) => settings.some((setting) => setting.key === field.key && setting.isSet)); +} diff --git a/frontend/app/setup/setup.module.css b/frontend/app/setup/setup.module.css new file mode 100644 index 0000000..479c5c1 --- /dev/null +++ b/frontend/app/setup/setup.module.css @@ -0,0 +1,49 @@ +.setup { max-width: 1020px; margin: 36px auto 72px; padding: 0 20px; color: var(--ops-text); } +.heading { margin-bottom: 30px; } +.heading h1 { font-size: clamp(28px, 4vw, 42px); margin: 18px 0 10px; } +.setup p { color: var(--ops-muted); line-height: 1.6; } +.brand { display: flex; align-items: center; gap: 12px; color: var(--ops-primary-2); font-size: 13px; } +.brand svg { width: 38px; height: 38px; } +.panel { padding: 24px; margin: 16px 0; border: 1px solid var(--ops-line); border-radius: 12px; background: var(--ops-panel); min-width: 0; } +.panel h2, .panel h3 { margin-top: 0; } +.panel summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; } +.panel summary::after { content: "+"; color: var(--ops-primary-2); } +.panel[open] summary::after { content: "−"; } +.panel summary > span:first-child { flex: 1; } +.panel summary strong { display: block; font-size: 17px; } +.panel summary small { display: block; margin-top: 6px; color: var(--ops-muted); line-height: 1.5; } +.panel[open] summary { margin-bottom: 24px; } +.badge { font-size: 12px; color: var(--ops-primary-2); } +.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; } +.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } +.field label { color: var(--ops-text); font-size: 13px; } +.field label small { margin-left: 8px; color: var(--ops-green); } +.field p, .hint { font-size: 12px; margin: 0; } +.field input:not([type=checkbox]), .field textarea, .field select { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--ops-line); background: var(--ops-bg-2); color: var(--ops-text); border-radius: 8px; font: inherit; font-size: 14px; } +.field textarea { resize: vertical; } +.toggle { display: grid; grid-template-columns: 1fr auto; align-content: start; align-items: center; } +.toggle p { grid-column: 1 / -1; } +.toggle input, .confirm input { width: 18px; height: 18px; accent-color: var(--ops-primary-2); flex-shrink: 0; } +.account { display: grid; gap: 20px; max-width: 440px; margin: 24px 0; } +.steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 30px; } +.steps button { flex: 1; display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--ops-panel); color: var(--ops-muted); border: 1px solid var(--ops-line); box-shadow: none; } +.steps button[aria-current=step] { border-color: var(--ops-primary-2); color: var(--ops-primary-2); } +.steps button span { font-size: 12px; } +.actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ops-line); } +.actions > span { flex: 1; color: var(--ops-muted); font-size: 12px; } +.error, .notice { padding: 16px 18px; border: 1px solid var(--ops-line); border-radius: 10px; background: var(--ops-bg-2); overflow-wrap: anywhere; } +.setup .error { border-color: var(--ops-red); color: var(--ops-red); } +.review { list-style: none; padding: 0; margin: 24px 0; } +.review li { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--ops-line); } +.review li span:last-child { font-size: 13px; color: var(--ops-muted); text-align: right; } +.confirm { display: flex; align-items: center; gap: 12px; margin: 24px 0; } +.setup :is(button, input, textarea, select, a, summary):focus-visible { outline: 2px solid var(--ops-primary-2); outline-offset: 3px; } +.setup button:disabled { opacity: .6; cursor: not-allowed; } +@media (max-width: 640px) { + .setup { margin-top: 20px; padding: 0 4px; } + .fields { grid-template-columns: 1fr; gap: 20px; } + .panel { padding: 18px; } + .steps button { flex-basis: 42%; font-size: 12px; } + .badge { max-width: 100px; text-align: right; } + .panel summary { gap: 10px; } +} diff --git a/frontend/app/signup/page.tsx b/frontend/app/signup/page.tsx new file mode 100644 index 0000000..d3f8b63 --- /dev/null +++ b/frontend/app/signup/page.tsx @@ -0,0 +1,265 @@ +"use client"; + +import { Suspense, useCallback, useEffect, useMemo, useState } from "react"; +import { useRouter, useSearchParams } from "next/navigation"; +import AuthLayout from "../ui/AuthLayout"; +import { clearToken, getApiBase, setToken } from "../lib/auth"; + +type InviteInfo = { + code: string; + email_bound?: boolean; + label?: string | null; + description?: string | null; + enabled: boolean; + is_expired?: boolean; + is_usable?: boolean; + expires_at?: string | null; + max_uses?: number | null; + use_count?: number | null; + remaining_uses?: number | null; + profile?: { + id: number; + name: string; + description?: string | null; + } | null; +}; + +const formatDate = (value?: string | null) => { + if (!value) return "Never"; + const date = new Date(value); + if (Number.isNaN(date.valueOf())) return value; + return date.toLocaleString(); +}; + +function SignupPageContent() { + const router = useRouter(); + const searchParams = useSearchParams(); + const [inviteCode, setInviteCode] = useState(searchParams.get("code") ?? ""); + const [invite, setInvite] = useState<InviteInfo | null>(null); + const [inviteLoading, setInviteLoading] = useState(false); + const [loading, setLoading] = useState(false); + const [username, setUsername] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [error, setError] = useState<string | null>(null); + const [status, setStatus] = useState<string | null>(null); + + const canSubmit = useMemo(() => { + return Boolean( + invite?.is_usable && + (invite.email_bound || email.trim()) && + username.trim() && + password && + !loading && + !inviteLoading, + ); + }, [invite, email, username, password, loading, inviteLoading]); + + const lookupInvite = useCallback(async (code: string) => { + const trimmed = code.trim(); + if (!trimmed) { + setInvite(null); + return; + } + setInviteLoading(true); + setError(null); + setStatus(null); + try { + const baseUrl = getApiBase(); + const response = await fetch(`${baseUrl}/auth/invites/${encodeURIComponent(trimmed)}`); + if (!response.ok) { + const text = await response.text(); + throw new Error(text || "Invite not found"); + } + const data = await response.json(); + setInvite(data?.invite ?? null); + setStatus("Invite loaded."); + } catch (err) { + console.error(err); + setInvite(null); + setError("Invite code not found or unavailable."); + } finally { + setInviteLoading(false); + } + }, []); + + useEffect(() => { + const initialCode = searchParams.get("code") ?? ""; + if (initialCode) { + setInviteCode(initialCode); + void lookupInvite(initialCode); + } + }, [lookupInvite, searchParams]); + + const submit = async (event: React.FormEvent) => { + event.preventDefault(); + if (password !== confirmPassword) { + setError("Passwords do not match."); + return; + } + if (!inviteCode.trim()) { + setError("Invite code is required."); + return; + } + if (!invite?.is_usable) { + setError("Invite is not usable. Refresh invite details or ask an admin for a new code."); + return; + } + setLoading(true); + setError(null); + setStatus(null); + try { + clearToken(); + const baseUrl = getApiBase(); + const response = await fetch(`${baseUrl}/auth/signup`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + credentials: "include", + body: JSON.stringify({ + invite_code: inviteCode, + username: username.trim(), + ...(!invite.email_bound ? { email: email.trim() } : {}), + password, + }), + }); + if (!response.ok) { + const text = await response.text(); + throw new Error(text || "Sign-up failed"); + } + const data = await response.json(); + if (data?.authenticated) { + setToken("cookie"); + window.location.href = "/welcome"; + return; + } + throw new Error("Sign-up did not complete"); + } catch (err) { + console.error(err); + setError(err instanceof Error ? err.message : "Unable to create account."); + } finally { + setLoading(false); + } + }; + + return ( + <AuthLayout title="Create account" description="Your invite is the first step to your media library."> + <form onSubmit={submit} className="account-form login-form auth-flow-form"> + <label> + Invite code + <div className="invite-lookup-row"> + <input + value={inviteCode} + onChange={(e) => { + setInviteCode(e.target.value); + setInvite(null); + setEmail(""); + }} + placeholder="Paste your invite code" + autoCapitalize="characters" + /> + <button + type="button" + className="ghost-button" + disabled={inviteLoading} + onClick={() => void lookupInvite(inviteCode)} + > + {inviteLoading ? "Checking…" : "Check invite"} + </button> + </div> + </label> + {invite && ( + <div className={`invite-summary ${invite.is_usable ? "" : "is-disabled"}`}> + <div className="invite-summary-row"> + <strong>{invite.label || invite.code}</strong> + <span className={`small-pill ${invite.is_usable ? "" : "is-muted"}`}> + {invite.is_usable ? "Ready" : "Unavailable"} + </span> + </div> + {invite.description && <p>{invite.description}</p>} + <details className="auth-invite-details"> + <summary>Invite details</summary> + <div className="admin-meta-row"> + <span>Code: {invite.code}</span> + <span>Expires: {formatDate(invite.expires_at)}</span> + <span>Remaining uses: {invite.remaining_uses ?? "Unlimited"}</span> + <span>Profile: {invite.profile?.name || "None"}</span> + </div> + </details> + </div> + )} + {invite?.email_bound ? ( + <p className="account-hint"> + Your account will use the email address this invitation was sent to. This invitation can be used once. + </p> + ) : ( + <label> + Email address + <input + type="email" + required + value={email} + onChange={(e) => setEmail(e.target.value)} + autoComplete="email" + placeholder="you@example.com" + /> + </label> + )} + <label> + Username + <input value={username} onChange={(e) => setUsername(e.target.value)} autoComplete="username" /> + </label> + <label> + Password + <input + type="password" + value={password} + onChange={(e) => setPassword(e.target.value)} + autoComplete="new-password" + /> + </label> + <label> + Confirm password + <input + type="password" + value={confirmPassword} + onChange={(e) => setConfirmPassword(e.target.value)} + autoComplete="new-password" + /> + </label> + {error && ( + <div className="account-notice is-error" role="alert"> + {error} + </div> + )} + {status && ( + <div className="account-notice is-status" role="status"> + {status} + </div> + )} + <div className="auth-actions"> + <button type="submit" className="account-primary" disabled={!canSubmit}> + {loading ? "Creating account…" : "Create account"} + </button> + </div> + <button type="button" className="ghost-button" disabled={loading} onClick={() => router.push("/login")}> + Back to sign in + </button> + </form> + </AuthLayout> + ); +} + +export default function SignupPage() { + return ( + <Suspense + fallback={ + <AuthLayout title="Create account" description="Your invite is the first step to your media library."> + <p role="status">Loading sign-up…</p> + </AuthLayout> + } + > + <SignupPageContent /> + </Suspense> + ); +} diff --git a/frontend/app/styles/tokens.css b/frontend/app/styles/tokens.css new file mode 100644 index 0000000..1ccf34d --- /dev/null +++ b/frontend/app/styles/tokens.css @@ -0,0 +1,48 @@ +:root, +[data-theme='dark'], +[data-theme='light'] { + color-scheme: dark; + --ops-bg: #131315; + --ops-bg-2: #0e0e10; + --ops-panel: #1c1b1d; + --ops-panel-2: #201f21; + --ops-panel-3: #2a2a2c; + --ops-line: #46464d; + --ops-line-soft: rgba(145, 144, 152, 0.24); + --ops-text: #e5e1e4; + --ops-muted: #c7c5ce; + --ops-faint: #919098; + --ops-primary: #090d25; + --ops-primary-2: #c2c4e5; + --ops-cyan: #22d3ee; + --ops-cyan-2: #3b82f6; + --ops-coral: #ffb5a0; + --ops-green: #14b8a6; + --ops-red: #ef4444; + --ops-warn: #f59e0b; + --ops-radius-sm: 4px; + --ops-radius: 8px; + --ops-radius-lg: 12px; + --workspace-width: 1440px; + --workspace-gutter: 32px; + --workspace-gap: 24px; + --ink: var(--ops-text); + --ink-muted: var(--ops-muted); + --paper: var(--ops-bg); + --paper-strong: var(--ops-panel); + --accent: var(--ops-coral); + --accent-2: var(--ops-primary); + --accent-3: var(--ops-cyan); + --border: var(--ops-line-soft); + --shadow: transparent; + --glow: 0 0 0 1px rgba(126, 215, 255, 0.16); + --input-bg: #0e0e10; + --input-ink: var(--ops-text); + --line: var(--ops-line-soft); + --panel: var(--ops-panel); + --panel-soft: rgba(255, 255, 255, 0.035); + --text: var(--ops-text); + --muted: var(--ops-muted); + --error-bg: rgba(122, 36, 53, 0.44); + --error-ink: #ffd6d6; +} diff --git a/frontend/app/ui/AdminDiagnosticsPanel.tsx b/frontend/app/ui/AdminDiagnosticsPanel.tsx new file mode 100644 index 0000000..f0f6787 --- /dev/null +++ b/frontend/app/ui/AdminDiagnosticsPanel.tsx @@ -0,0 +1,530 @@ +"use client"; + +import { useCallback, useEffect, useMemo, useState } from "react"; +import { useRouter } from "next/navigation"; +import { authFetch, clearToken, getApiBase, getToken } from "../lib/auth"; + +type DiagnosticCatalogItem = { + key: string; + label: string; + category: string; + description: string; + live_safe: boolean; + target: string | null; + configured: boolean; + config_status: string; + config_detail: string; +}; + +type DiagnosticResult = { + key: string; + label: string; + category: string; + description: string; + target: string | null; + live_safe: boolean; + configured: boolean; + status: string; + message: string; + detail?: unknown; + checked_at?: string; + duration_ms?: number; +}; + +type DiagnosticsResponse = { + checks: DiagnosticCatalogItem[]; + categories: string[]; + generated_at: string; +}; + +type RunDiagnosticsResponse = { + results: DiagnosticResult[]; + summary: { + total: number; + up: number; + down: number; + degraded: number; + not_configured: number; + disabled: number; + }; + checked_at: string; +}; + +type RunMode = "safe" | "all" | "single"; + +type AdminDiagnosticsPanelProps = { + embedded?: boolean; +}; + +type DatabaseDiagnosticDetail = { + integrity_check?: string; + database_path?: string; + database_size_bytes?: number; + wal_size_bytes?: number; + shm_size_bytes?: number; + page_size_bytes?: number; + page_count?: number; + freelist_pages?: number; + allocated_bytes?: number; + free_bytes?: number; + row_counts?: Record<string, number>; + timings_ms?: Record<string, number>; +}; + +const REFRESH_INTERVAL_MS = 30000; + +const STATUS_LABELS: Record<string, string> = { + idle: "Ready", + up: "Up", + down: "Down", + degraded: "Degraded", + disabled: "Disabled", + not_configured: "Not configured", +}; + +function formatCheckedAt(value?: string) { + if (!value) return "Not yet run"; + const parsed = new Date(value); + if (Number.isNaN(parsed.getTime())) return value; + return parsed.toLocaleString(); +} + +function formatDuration(value?: number) { + if (typeof value !== "number" || Number.isNaN(value) || value <= 0) { + return "Pending"; + } + return `${value.toFixed(1)} ms`; +} + +function statusLabel(status: string) { + return STATUS_LABELS[status] ?? status; +} + +function formatBytes(value?: number) { + if (typeof value !== "number" || Number.isNaN(value) || value < 0) { + return "0 B"; + } + if (value >= 1024 * 1024 * 1024) { + return `${(value / (1024 * 1024 * 1024)).toFixed(2)} GB`; + } + if (value >= 1024 * 1024) { + return `${(value / (1024 * 1024)).toFixed(2)} MB`; + } + if (value >= 1024) { + return `${(value / 1024).toFixed(1)} KB`; + } + return `${value} B`; +} + +function formatDetailLabel(value: string) { + return value.replace(/_/g, " ").replace(/\b\w/g, (character) => character.toUpperCase()); +} + +function asDatabaseDiagnosticDetail(detail: unknown): DatabaseDiagnosticDetail | null { + if (!detail || typeof detail !== "object" || Array.isArray(detail)) { + return null; + } + return detail as DatabaseDiagnosticDetail; +} + +function renderDatabaseMetricGroup(title: string, values: Array<[string, string]>) { + if (values.length === 0) { + return null; + } + return ( + <div className="diagnostic-detail-group"> + <h4>{title}</h4> + <div className="diagnostic-detail-grid"> + {values.map(([label, value]) => ( + <div key={`${title}-${label}`} className="diagnostic-detail-item"> + <span>{label}</span> + <strong>{value}</strong> + </div> + ))} + </div> + </div> + ); +} + +export default function AdminDiagnosticsPanel({ embedded = false }: AdminDiagnosticsPanelProps) { + const router = useRouter(); + const [loading, setLoading] = useState(true); + const [authorized, setAuthorized] = useState(false); + const [checks, setChecks] = useState<DiagnosticCatalogItem[]>([]); + const [resultsByKey, setResultsByKey] = useState<Record<string, DiagnosticResult>>({}); + const [runningKeys, setRunningKeys] = useState<string[]>([]); + const [autoRefresh, setAutoRefresh] = useState(true); + const [pageError, setPageError] = useState(""); + const [lastRunAt, setLastRunAt] = useState<string | null>(null); + const [lastRunMode, setLastRunMode] = useState<RunMode | null>(null); + const [emailRecipient, setEmailRecipient] = useState(""); + + const liveSafeKeys = useMemo(() => checks.filter((check) => check.live_safe).map((check) => check.key), [checks]); + + const runDiagnostics = useCallback( + async (keys?: string[], mode: RunMode = "single") => { + const baseUrl = getApiBase(); + const effectiveKeys = keys && keys.length > 0 ? keys : checks.map((check) => check.key); + if (effectiveKeys.length === 0) { + return; + } + setRunningKeys((current) => Array.from(new Set([...current, ...effectiveKeys]))); + setPageError(""); + try { + const response = await authFetch(`${baseUrl}/admin/diagnostics/run`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + keys: effectiveKeys, + ...(emailRecipient.trim() ? { recipient_email: emailRecipient.trim() } : {}), + }), + }); + if (response.status === 401) { + clearToken(); + router.push("/login"); + return; + } + if (!response.ok) { + const text = await response.text(); + throw new Error(text || `Diagnostics run failed: ${response.status}`); + } + const data = (await response.json()) as { status: string } & RunDiagnosticsResponse; + const nextResults: Record<string, DiagnosticResult> = {}; + for (const result of data.results ?? []) { + nextResults[result.key] = result; + } + setResultsByKey((current) => ({ ...current, ...nextResults })); + setLastRunAt(data.checked_at ?? new Date().toISOString()); + setLastRunMode(mode); + } catch (error) { + console.error(error); + setPageError(error instanceof Error ? error.message : "Diagnostics run failed."); + } finally { + setRunningKeys((current) => current.filter((key) => !effectiveKeys.includes(key))); + } + }, + [checks, emailRecipient, router], + ); + + // biome-ignore lint/correctness/useExhaustiveDependencies: Authorization bootstrap runs once for each router instance. + useEffect(() => { + let active = true; + + const loadPage = async () => { + if (!getToken()) { + router.push("/login"); + return; + } + try { + const baseUrl = getApiBase(); + const authResponse = await authFetch(`${baseUrl}/auth/me`); + if (!authResponse.ok) { + if (authResponse.status === 401) { + clearToken(); + router.push("/login"); + return; + } + router.push("/"); + return; + } + const me = await authResponse.json(); + if (!active) return; + if (me?.role !== "admin") { + router.push("/"); + return; + } + + const diagnosticsResponse = await authFetch(`${baseUrl}/admin/diagnostics`); + if (!diagnosticsResponse.ok) { + const text = await diagnosticsResponse.text(); + throw new Error(text || `Diagnostics load failed: ${diagnosticsResponse.status}`); + } + const data = (await diagnosticsResponse.json()) as { status: string } & DiagnosticsResponse; + if (!active) return; + setChecks(data.checks ?? []); + setAuthorized(true); + setLoading(false); + const safeKeys = (data.checks ?? []).filter((check) => check.live_safe).map((check) => check.key); + if (safeKeys.length > 0) { + void runDiagnostics(safeKeys, "safe"); + } + } catch (error) { + console.error(error); + if (!active) return; + setPageError(error instanceof Error ? error.message : "Unable to load diagnostics."); + setLoading(false); + } + }; + + void loadPage(); + + return () => { + active = false; + }; + }, [router]); + + useEffect(() => { + if (!authorized || !autoRefresh || liveSafeKeys.length === 0) { + return; + } + const interval = window.setInterval(() => { + void runDiagnostics(liveSafeKeys, "safe"); + }, REFRESH_INTERVAL_MS); + return () => { + window.clearInterval(interval); + }; + }, [authorized, autoRefresh, liveSafeKeys, runDiagnostics]); + + if (loading) { + return <div className="admin-panel">Loading diagnostics...</div>; + } + + if (!authorized) { + return null; + } + + const orderedCategories: string[] = []; + for (const check of checks) { + if (!orderedCategories.includes(check.category)) { + orderedCategories.push(check.category); + } + } + + const mergedResults = checks.map((check) => { + const result = resultsByKey[check.key]; + if (result) { + return result; + } + return { + key: check.key, + label: check.label, + category: check.category, + description: check.description, + target: check.target, + live_safe: check.live_safe, + configured: check.configured, + status: check.configured ? "idle" : check.config_status, + message: check.configured ? "Ready to test." : check.config_detail, + checked_at: undefined, + duration_ms: undefined, + } satisfies DiagnosticResult; + }); + + const summary = { + total: mergedResults.length, + up: 0, + down: 0, + degraded: 0, + disabled: 0, + not_configured: 0, + idle: 0, + }; + for (const result of mergedResults) { + const key = result.status as keyof typeof summary; + if (key in summary) { + summary[key] += 1; + } + } + + return ( + <div className={`diagnostics-page${embedded ? " diagnostics-page-embedded" : ""}`}> + <div className="admin-panel diagnostics-control-panel"> + <div className="diagnostics-control-copy"> + <h2>{embedded ? "Connectivity diagnostics" : "Control center"}</h2> + <p className="lede"> + Check Magent and your connected services. Automatic refresh runs health checks only. Test messages are + managed in Notifications below. + </p> + </div> + <div className="diagnostics-control-actions"> + <button + type="button" + className={autoRefresh ? "is-active" : ""} + onClick={() => setAutoRefresh((current) => !current)} + > + {autoRefresh ? "Disable auto refresh" : "Enable auto refresh"} + </button> + <button + type="button" + onClick={() => { + void runDiagnostics(liveSafeKeys, "safe"); + }} + disabled={runningKeys.length > 0 || liveSafeKeys.length === 0} + > + Run live checks + </button> + + <span className={`small-pill ${autoRefresh ? "is-positive" : ""}`}> + {autoRefresh ? "Auto refresh on" : "Auto refresh off"} + </span> + <span className="small-pill">{lastRunMode ? `Last run: ${lastRunMode}` : "No run yet"}</span> + </div> + </div> + + <div className="admin-panel diagnostics-inline-summary"> + <div className="diagnostics-inline-metric"> + <span>Total</span> + <strong>{summary.total}</strong> + </div> + <div className="diagnostics-inline-metric"> + <span>Up</span> + <strong>{summary.up}</strong> + </div> + <div className="diagnostics-inline-metric"> + <span>Degraded</span> + <strong>{summary.degraded}</strong> + </div> + <div className="diagnostics-inline-metric"> + <span>Down</span> + <strong>{summary.down}</strong> + </div> + <div className="diagnostics-inline-metric"> + <span>Disabled</span> + <strong>{summary.disabled}</strong> + </div> + <div className="diagnostics-inline-metric"> + <span>Not configured</span> + <strong>{summary.not_configured}</strong> + </div> + <div className="diagnostics-inline-last-run">Last completed run: {formatCheckedAt(lastRunAt ?? undefined)}</div> + </div> + + {pageError ? <div className="admin-panel diagnostics-error">{pageError}</div> : null} + + {orderedCategories.map((category) => { + const categoryChecks = mergedResults.filter((check) => check.category === category); + return ( + <div key={category} className="admin-panel diagnostics-category-panel"> + <div className="diagnostics-category-header"> + <div> + <h2>{category}</h2> + <p> + {category === "Notifications" ? "These tests can emit real messages." : "Safe live health checks."} + </p> + </div> + <span className="small-pill">{categoryChecks.length} checks</span> + </div> + + {category === "Notifications" && ( + <div className="diagnostics-notification-controls"> + <label className="diagnostics-email-recipient"> + <span>Test email recipient</span> + <input + type="email" + placeholder="Leave blank to use configured sender" + value={emailRecipient} + onChange={(event) => setEmailRecipient(event.target.value)} + /> + </label> + <p>Choose where the test email goes. Other channels use their configured destinations.</p> + <button + type="button" + disabled={runningKeys.length > 0 || categoryChecks.length === 0} + onClick={() => + void runDiagnostics( + categoryChecks.map((check) => check.key), + "all", + ) + } + > + Test all notification channels + </button> + </div> + )} + + <div className="diagnostics-grid"> + {categoryChecks.map((check) => { + const isRunning = runningKeys.includes(check.key); + return ( + <article key={check.key} className={`diagnostic-card diagnostic-card-${check.status}`}> + <div className="diagnostic-card-top"> + <div className="diagnostic-card-copy"> + <div className="diagnostic-card-title-row"> + <h3>{check.label}</h3> + <span className={`system-pill system-pill-${check.status}`}>{statusLabel(check.status)}</span> + </div> + <p>{check.description}</p> + </div> + <button + type="button" + className="system-test" + onClick={() => { + void runDiagnostics([check.key], "single"); + }} + disabled={isRunning} + > + {check.live_safe ? "Ping" : "Send test"} + </button> + </div> + + <div className="diagnostic-meta-grid"> + <div className="diagnostic-meta-item"> + <span>Target</span> + <strong>{check.target || "Not set"}</strong> + </div> + <div className="diagnostic-meta-item"> + <span>Latency</span> + <strong>{formatDuration(check.duration_ms)}</strong> + </div> + <div className="diagnostic-meta-item"> + <span>Mode</span> + <strong>{check.live_safe ? "Live safe" : "Manual only"}</strong> + </div> + <div className="diagnostic-meta-item"> + <span>Last checked</span> + <strong>{formatCheckedAt(check.checked_at)}</strong> + </div> + </div> + + <div className={`diagnostic-message diagnostic-message-${check.status}`}> + <span className="system-dot" /> + <span>{isRunning ? "Running diagnostic..." : check.message}</span> + </div> + + {check.key === "database" + ? (() => { + const detail = asDatabaseDiagnosticDetail(check.detail); + if (!detail) { + return null; + } + return ( + <details className="diagnostic-detail-panel"> + <summary>Database storage, tables and timings</summary> + {renderDatabaseMetricGroup("Storage", [ + ["Database file", formatBytes(detail.database_size_bytes)], + ["WAL file", formatBytes(detail.wal_size_bytes)], + ["Shared memory", formatBytes(detail.shm_size_bytes)], + ["Allocated bytes", formatBytes(detail.allocated_bytes)], + ["Free bytes", formatBytes(detail.free_bytes)], + ["Page size", formatBytes(detail.page_size_bytes)], + ["Page count", `${detail.page_count?.toLocaleString() ?? 0}`], + ["Freelist pages", `${detail.freelist_pages?.toLocaleString() ?? 0}`], + ])} + {renderDatabaseMetricGroup( + "Tables", + Object.entries(detail.row_counts ?? {}).map(([key, value]) => [ + formatDetailLabel(key), + value.toLocaleString(), + ]), + )} + {renderDatabaseMetricGroup( + "Timings", + Object.entries(detail.timings_ms ?? {}).map(([key, value]) => [ + formatDetailLabel(key), + `${value.toFixed(1)} ms`, + ]), + )} + </details> + ); + })() + : null} + </article> + ); + })} + </div> + </div> + ); + })} + </div> + ); +} diff --git a/frontend/app/ui/AdminShell.tsx b/frontend/app/ui/AdminShell.tsx new file mode 100644 index 0000000..9214fb1 --- /dev/null +++ b/frontend/app/ui/AdminShell.tsx @@ -0,0 +1,31 @@ +"use client"; + +import type { ReactNode } from "react"; +import SettingsNavigation from "./SettingsNavigation"; +import PageHeading from "./PageHeading"; + +type AdminShellProps = { + title: string; + subtitle?: string; + actions?: ReactNode; + rail?: ReactNode; + children: ReactNode; +}; + +export default function AdminShell({ title, subtitle, actions, rail, children }: AdminShellProps) { + return ( + <div className="admin-shell admin-shell--top-nav"> + <SettingsNavigation /> + <main className="card admin-card"> + <PageHeading title={title} description={subtitle} actions={actions} /> + {children} + {rail && ( + <details className="admin-supplemental"> + <summary>Additional information</summary> + {rail} + </details> + )} + </main> + </div> + ); +} diff --git a/frontend/app/ui/AdminViewGate.tsx b/frontend/app/ui/AdminViewGate.tsx new file mode 100644 index 0000000..1850afc --- /dev/null +++ b/frontend/app/ui/AdminViewGate.tsx @@ -0,0 +1,33 @@ +"use client"; + +import { usePathname } from "next/navigation"; +import type { ReactNode } from "react"; +import { isAdminPage } from "../lib/user-view-policy"; +import { setUserViewPreview, useUserViewState } from "../lib/viewMode"; + +export default function AdminViewGate({ children }: { children: ReactNode }) { + const pathname = usePathname(); + const { enabled, ready } = useUserViewState(); + if (!isAdminPage(pathname)) return children; + if (!ready) + return ( + <main className="card" role="status"> + Checking view mode... + </main> + ); + if (!enabled) return children; + + return ( + <main className="card"> + <h1>Administrator tools are hidden</h1> + <p>Configuration, user management and other admin tools are unavailable while previewing user view.</p> + <p>Your account is unchanged. Exit the preview to return to this page.</p> + <div className="config-inline-controls"> + <a href="/">Go to My Requests</a> + <button type="button" onClick={() => setUserViewPreview(false)}> + Exit user view + </button> + </div> + </main> + ); +} diff --git a/frontend/app/ui/ApplicationChrome.tsx b/frontend/app/ui/ApplicationChrome.tsx new file mode 100644 index 0000000..8444940 --- /dev/null +++ b/frontend/app/ui/ApplicationChrome.tsx @@ -0,0 +1,53 @@ +"use client"; + +import { usePathname } from "next/navigation"; +import BrandingLogo from "./BrandingLogo"; +import HeaderActions from "./HeaderActions"; +import HeaderIdentity from "./HeaderIdentity"; +import GlobalSearch from "./GlobalSearch"; +import SiteStatus from "./SiteStatus"; +import UserViewBanner from "./UserViewBanner"; +import WorkspaceNavigation from "./WorkspaceNavigation"; + +export default function ApplicationChrome() { + const pathname = usePathname(); + if ( + [ + "/welcome", + "/coming-soon", + "/login", + "/setup", + "/forgot-password", + "/reset-password", + "/signup", + "/email-recaps", + "/newsletter-subscription", + ].includes(pathname) + ) + return null; + return ( + <> + <header className="header"> + <div className="header-left"> + <a className="brand-link" href="/"> + <BrandingLogo className="brand-logo brand-logo--header" /> + <div className="brand-stack"> + <div className="brand">Magent</div> + <div className="tagline">Your media operations</div> + </div> + </a> + </div> + <div className="header-right"> + <HeaderIdentity /> + </div> + <div className="header-nav"> + <GlobalSearch /> + <HeaderActions /> + </div> + </header> + <WorkspaceNavigation /> + <UserViewBanner /> + <SiteStatus /> + </> + ); +} diff --git a/frontend/app/ui/AuthLayout.tsx b/frontend/app/ui/AuthLayout.tsx new file mode 100644 index 0000000..5bacd81 --- /dev/null +++ b/frontend/app/ui/AuthLayout.tsx @@ -0,0 +1,34 @@ +import type { ReactNode } from "react"; +import MagentMark from "./MagentMark"; + +export default function AuthLayout({ + title, + description, + children, + footer, +}: { + title: string; + description: string; + children: ReactNode; + footer?: ReactNode; +}) { + return ( + <main className="login-page"> + <section className="login-card" aria-labelledby="login-title"> + <div className="login-brand"> + <a href="/login" aria-label="Magent sign in"> + <MagentMark /> + <span>Magent</span> + </a> + </div> + <header> + <h1 id="login-title">{title}</h1> + <p>{description}</p> + </header> + {children} + {footer && <footer>{footer}</footer>} + </section> + <p className="login-credit">Magent · Request. Watch. Enjoy.</p> + </main> + ); +} diff --git a/frontend/app/ui/BrandingFavicon.tsx b/frontend/app/ui/BrandingFavicon.tsx new file mode 100644 index 0000000..cfb6463 --- /dev/null +++ b/frontend/app/ui/BrandingFavicon.tsx @@ -0,0 +1,18 @@ +"use client"; + +import { useEffect } from "react"; + +export default function BrandingFavicon() { + useEffect(() => { + const href = "/api/branding/favicon.ico"; + let link = document.querySelector("link[rel='icon']") as HTMLLinkElement | null; + if (!link) { + link = document.createElement("link"); + link.rel = "icon"; + document.head.appendChild(link); + } + link.href = href; + }, []); + + return null; +} diff --git a/frontend/app/ui/BrandingLogo.tsx b/frontend/app/ui/BrandingLogo.tsx new file mode 100644 index 0000000..7860a52 --- /dev/null +++ b/frontend/app/ui/BrandingLogo.tsx @@ -0,0 +1,41 @@ +"use client"; + +import { useState } from "react"; + +type BrandingLogoProps = { + className?: string; + alt?: string; +}; + +export default function BrandingLogo({ className, alt = "Magent logo" }: BrandingLogoProps) { + const [loaded, setLoaded] = useState(false); + const [failed, setFailed] = useState(false); + + return ( + <span className={`${className ?? ""} branding-logo-shell`} role="img" aria-label={alt}> + {!failed ? ( + <img + className={loaded ? "is-loaded" : undefined} + src="/api/branding/logo.png" + alt="" + aria-hidden="true" + onLoad={() => setLoaded(true)} + onError={() => setFailed(true)} + /> + ) : null} + {!loaded ? ( + <svg aria-hidden="true" viewBox="0 0 64 64" focusable="false"> + <defs> + <linearGradient id="magentLogoGlow" x1="0" y1="0" x2="1" y2="1"> + <stop offset="0%" stopColor="#7ed7ff" /> + <stop offset="100%" stopColor="#c6c1ff" /> + </linearGradient> + </defs> + <rect width="64" height="64" rx="12" fill="#0b1328" /> + <rect x="6" y="6" width="52" height="52" rx="9" fill="#111a33" /> + <path d="M16 48V16h8l8 13 8-13h8v32h-8V30l-8 12-8-12v18h-8z" fill="url(#magentLogoGlow)" /> + </svg> + ) : null} + </span> + ); +} diff --git a/frontend/app/ui/FeatureGate.tsx b/frontend/app/ui/FeatureGate.tsx new file mode 100644 index 0000000..a522476 --- /dev/null +++ b/frontend/app/ui/FeatureGate.tsx @@ -0,0 +1,71 @@ +"use client"; + +import { usePathname } from "next/navigation"; +import { useEffect, useState, type ReactNode } from "react"; +import { authFetch, getApiBase, getToken } from "../lib/auth"; +import { canAccess, featureForPath, type FeatureAccess } from "../lib/features"; +import { useEffectiveRole } from "../lib/viewMode"; +import { isAdminPage } from "../lib/user-view-policy"; + +export function useFeatureUser() { + const pathname = usePathname(); + const [state, setState] = useState<{ + path: string; + user: { role?: string; features?: FeatureAccess; invite_management_enabled?: boolean } | null; + }>({ path: "", user: null }); + const role = useEffectiveRole(state.user?.role); + useEffect(() => { + let active = true; + const load = async () => { + if (!getToken()) { + if (active) setState({ path: pathname, user: null }); + return; + } + try { + const response = await authFetch(`${getApiBase()}/auth/me`); + const user = response.ok ? await response.json() : null; + if (active) setState({ path: pathname, user }); + } catch { + if (active) setState({ path: pathname, user: null }); + } + }; + void load(); + window.addEventListener("focus", load); + return () => { + active = false; + window.removeEventListener("focus", load); + }; + }, [pathname]); + return { user: state.user ? { ...state.user, role: role ?? undefined } : null, ready: state.path === pathname }; +} + +export default function FeatureGate({ children }: { children: ReactNode }) { + const pathname = usePathname(); + const { user, ready } = useFeatureUser(); + const feature = featureForPath(pathname); + if (isAdminPage(pathname, false)) { + if (!ready) return <main className="card">Checking administrator access...</main>; + if (user?.role !== "admin") { + return ( + <main className="card"> + <h1>Administrator access required</h1> + <p>Sign in with an administrator account to use configuration and administration tools.</p> + <a href="/login">Sign in</a> + </main> + ); + } + return children; + } + if (!feature) return children; + if (!ready) return <main className="card">Loading account access...</main>; + if (!getToken()) return children; + if (!canAccess(user, feature)) + return ( + <main className="card"> + <h1>Feature unavailable</h1> + <p>Your account does not have access to this feature. Ask an administrator if you need it enabled.</p> + <a href="/profile">Go to my profile</a> + </main> + ); + return children; +} diff --git a/frontend/app/ui/GlobalSearch.tsx b/frontend/app/ui/GlobalSearch.tsx new file mode 100644 index 0000000..33cc208 --- /dev/null +++ b/frontend/app/ui/GlobalSearch.tsx @@ -0,0 +1,179 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import { useEffect, useRef, useState } from "react"; +import { authFetch, getApiBase } from "../lib/auth"; +import { canAccess } from "../lib/features"; +import { useFeatureUser } from "./FeatureGate"; + +type SearchResult = { + title: string; + year?: number | null; + type: "movie" | "tv"; + tmdbId: number; + requestId?: number | null; + statusLabel?: string | null; +}; + +export default function GlobalSearch() { + const router = useRouter(); + const { user, ready } = useFeatureUser(); + const root = useRef<HTMLDivElement>(null); + const requestVersion = useRef(0); + const [query, setQuery] = useState(""); + const [results, setResults] = useState<SearchResult[]>([]); + const [open, setOpen] = useState(false); + const [searching, setSearching] = useState(false); + const [message, setMessage] = useState<string | null>(null); + const canSearch = canAccess(user, "new_requests") || canAccess(user, "issues"); + const canOpenRequests = canAccess(user, "requests"); + const canCreateRequests = canAccess(user, "new_requests"); + + useEffect(() => { + const close = (event: PointerEvent) => { + if (!root.current?.contains(event.target as Node)) setOpen(false); + }; + document.addEventListener("pointerdown", close); + return () => document.removeEventListener("pointerdown", close); + }, []); + + useEffect(() => { + const term = query.trim(); + requestVersion.current += 1; + const version = requestVersion.current; + if (term.length < 2 || !canSearch) { + setResults([]); + setSearching(false); + setMessage(null); + return; + } + setSearching(true); + setMessage(null); + const controller = new AbortController(); + const timer = window.setTimeout(async () => { + try { + const params = new URLSearchParams({ query: term }); + const response = await authFetch(`${getApiBase()}/requests/search?${params.toString()}`, { + signal: controller.signal, + cache: "no-store", + }); + if (!response.ok) throw new Error("Search is unavailable right now."); + const payload = await response.json(); + if (version !== requestVersion.current) return; + const mapped = (Array.isArray(payload?.results) ? payload.results : []) + .filter( + (item: Record<string, unknown>) => + typeof item.type === "string" && ["movie", "tv"].includes(item.type) && Number(item.tmdbId) > 0, + ) + .slice(0, 7) + .map( + (item: Record<string, unknown>): SearchResult => ({ + title: String(item?.title || "Untitled"), + year: typeof item?.year === "number" ? item.year : null, + type: item.type === "tv" ? "tv" : "movie", + tmdbId: Number(item.tmdbId), + requestId: typeof item?.requestId === "number" ? item.requestId : null, + statusLabel: typeof item?.statusLabel === "string" ? item.statusLabel : null, + }), + ); + setResults(mapped); + setMessage(mapped.length ? null : "No matching titles found."); + } catch (error) { + if (controller.signal.aborted || version !== requestVersion.current) return; + console.error(error); + setResults([]); + setMessage("Search is unavailable right now."); + } finally { + if (version === requestVersion.current) setSearching(false); + } + }, 280); + return () => { + window.clearTimeout(timer); + controller.abort(); + }; + }, [query, canSearch]); + + if (!ready || !user || !canSearch) return null; + + const openResult = (result: SearchResult) => { + setOpen(false); + setQuery(""); + if (result.requestId && canOpenRequests) { + router.push(`/requests/${result.requestId}`); + return; + } + if (canCreateRequests) { + const params = new URLSearchParams({ type: result.type, query: result.title }); + router.push(`/new-requests?${params.toString()}`); + return; + } + router.push("/portal/issues"); + }; + + const showResults = open && query.trim().length >= 2; + return ( + <div className="global-search" ref={root}> + <search> + <form + onSubmit={(event) => { + event.preventDefault(); + if (results[0]) openResult(results[0]); + }} + > + <svg viewBox="0 0 24 24" aria-hidden="true"> + <circle cx="11" cy="11" r="7" /> + <path d="m16 16 4 4" /> + </svg> + <input + type="search" + role="combobox" + value={query} + placeholder="Search titles or requests" + aria-label="Search titles or requests" + aria-autocomplete="list" + aria-expanded={showResults} + aria-controls="global-search-results" + onFocus={() => setOpen(true)} + onKeyDown={(event) => { + if (event.key === "Escape") setOpen(false); + }} + onChange={(event) => { + setQuery(event.target.value); + setOpen(true); + }} + /> + {searching && <i className="global-search-spinner" aria-hidden="true" />} + </form> + </search> + {showResults && ( + <div className="global-search-results" id="global-search-results" role="listbox"> + {results.map((result) => ( + <button + type="button" + role="option" + aria-selected="false" + key={`${result.type}:${result.tmdbId}`} + onClick={() => openResult(result)} + > + <span> + <strong>{result.title}</strong> + <small> + {result.type === "tv" ? "TV show" : "Movie"} + {result.year ? ` · ${result.year}` : ""} + </small> + </span> + <b> + {result.requestId && canOpenRequests + ? result.statusLabel || "View request" + : canCreateRequests + ? "New request" + : "Report issue"} + </b> + </button> + ))} + {!searching && message && <p role="status">{message}</p>} + </div> + )} + </div> + ); +} diff --git a/frontend/app/ui/HeaderActions.tsx b/frontend/app/ui/HeaderActions.tsx new file mode 100644 index 0000000..81ccfc8 --- /dev/null +++ b/frontend/app/ui/HeaderActions.tsx @@ -0,0 +1,79 @@ +"use client"; + +import { usePathname } from "next/navigation"; +import { canAccess, featureForPath } from "../lib/features"; +import { useFeatureUser } from "./FeatureGate"; + +export default function HeaderActions() { + const pathname = usePathname(); + const { user, ready } = useFeatureUser(); + const role = user?.role ?? null; + const showRequestsNav = canAccess(user, "new_requests"); + if (!ready || !user) return null; + + const roleItems = + role === null + ? [] + : role === "admin" + ? [ + { + href: "/profile/invites", + label: "Invites", + match: (path: string) => path.startsWith("/profile/invites"), + }, + { + href: "/admin", + label: "Config", + match: (path: string) => path.startsWith("/admin") || path.startsWith("/users"), + }, + ] + : [ + { + href: "/profile/invites", + label: "Invites", + match: (path: string) => path.startsWith("/profile/invites"), + }, + ]; + + const commonItems = [ + ...(showRequestsNav + ? [ + { + href: "/new-requests", + label: "New Requests", + match: (path: string) => path === "/new-requests", + }, + ] + : []), + { + href: "/", + label: "My Requests", + match: (path: string) => path === "/" || path.startsWith("/requests/"), + }, + { + href: "/insights", + label: "My Stats", + match: (path: string) => path === "/insights" || path.startsWith("/insights/"), + }, + { + href: "/portal/issues", + label: "Issues", + match: (path: string) => path === "/portal/issues" || path === "/admin/issues", + }, + ]; + + const items = [...commonItems, ...roleItems].filter((item) => canAccess(user, featureForPath(item.href))); + + return ( + <nav className="header-actions" aria-label="Primary"> + {items.map((item) => { + const active = item.match(pathname); + return ( + <a key={item.href} href={item.href} className={active ? "is-active" : undefined}> + {item.label} + </a> + ); + })} + </nav> + ); +} diff --git a/frontend/app/ui/HeaderIdentity.tsx b/frontend/app/ui/HeaderIdentity.tsx new file mode 100644 index 0000000..4605256 --- /dev/null +++ b/frontend/app/ui/HeaderIdentity.tsx @@ -0,0 +1,121 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { authFetch, clearToken, getApiBase, getToken, logout } from "../lib/auth"; +import { setUserViewPreview, useEffectiveRole, useUserViewPreview } from "../lib/viewMode"; + +export default function HeaderIdentity() { + const [identity, setIdentity] = useState<{ username: string; role?: string } | null>(null); + const [buildNumber, setBuildNumber] = useState<string | null>(null); + const [open, setOpen] = useState(false); + const viewAsUser = useUserViewPreview(); + const visibleRole = useEffectiveRole(identity?.role); + + useEffect(() => { + const token = getToken(); + if (!token) { + setIdentity(null); + setBuildNumber(null); + return; + } + const load = async () => { + try { + const baseUrl = getApiBase(); + const response = await authFetch(`${baseUrl}/auth/me`); + if (!response.ok) { + clearToken(); + setIdentity(null); + return; + } + const data = await response.json(); + if (data?.username) { + setIdentity({ username: data.username, role: data.role }); + if (data.role !== "admin") { + setUserViewPreview(false); + } + } + const siteResponse = await fetch(`${baseUrl}/site/public`); + if (siteResponse.ok) { + const siteInfo = await siteResponse.json(); + if (siteInfo?.buildNumber) { + setBuildNumber(siteInfo.buildNumber); + } + } + } catch (err) { + console.error(err); + setIdentity(null); + } + }; + void load(); + }, []); + + if (!identity) { + return null; + } + + const label = `${identity.username}${identity.role ? ` (${identity.role})` : ""}`; + const initial = identity.username.slice(0, 1).toUpperCase(); + const signOut = async () => { + setUserViewPreview(false); + await logout().catch(() => undefined); + clearToken(); + if (typeof window !== "undefined") { + window.location.href = "/login"; + } + }; + + return ( + <div className="signed-in-context"> + {identity.role === "admin" ? ( + <button + type="button" + className={`user-view-toggle ${viewAsUser ? "is-active" : ""}`} + aria-pressed={viewAsUser} + onClick={() => setUserViewPreview(!viewAsUser)} + > + {viewAsUser ? "Exit user view" : "View as user"} + </button> + ) : null} + <div className="signed-in-menu"> + <button + type="button" + className="avatar-button" + onClick={() => setOpen((prev) => !prev)} + aria-haspopup="true" + aria-expanded={open} + title={label} + > + {initial} + </button> + {open && ( + <div className="signed-in-dropdown"> + <div className="signed-in-header"> + Signed in as {label} + {viewAsUser ? <span>Previewing user view</span> : null} + </div> + <div className="signed-in-actions"> + <a href="/welcome" onClick={() => setOpen(false)}> + Welcome page + </a> + <a href="/how-it-works" onClick={() => setOpen(false)}> + How it works + </a> + <a href="/profile" onClick={() => setOpen(false)}> + My profile + </a> + {visibleRole === "admin" ? ( + <a href="/admin" onClick={() => setOpen(false)}> + Settings + </a> + ) : null} + <button type="button" className="signed-in-signout" onClick={() => void signOut()}> + Sign out + </button> + </div> + {buildNumber ? <div className="signed-in-build">Build {buildNumber}</div> : null} + </div> + )} + </div> + </div> + ); +} diff --git a/frontend/app/ui/InviteDeliveryChoice.tsx b/frontend/app/ui/InviteDeliveryChoice.tsx new file mode 100644 index 0000000..90a3d3b --- /dev/null +++ b/frontend/app/ui/InviteDeliveryChoice.tsx @@ -0,0 +1,55 @@ +"use client"; + +import "./invite-delivery.css"; + +export default function InviteDeliveryChoice({ + value, + onChange, +}: { + value: "manual" | "email" | "" | null; + onChange: (method: "manual" | "email") => void; +}) { + return ( + <fieldset className="invite-delivery-options"> + <legend className="sr-only">Invite delivery method</legend> + {(["manual", "email"] as const).map((method) => ( + <button key={method} type="button" aria-pressed={value === method} onClick={() => onChange(method)}> + <span className="delivery-choice-icon" aria-hidden="true"> + <svg + aria-hidden="true" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + strokeWidth="1.7" + strokeLinecap="round" + strokeLinejoin="round" + > + {method === "manual" ? ( + <> + <path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-2 2" /> + <path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l2-2" /> + </> + ) : ( + <> + <rect x="3" y="5" width="18" height="14" rx="3" /> + <path d="m3 7 9 6 9-6" /> + </> + )} + </svg> + </span> + <span className="delivery-choice-copy"> + <strong>{method === "manual" ? "Copy a link" : "Send an email"}</strong> + <small> + {method === "manual" + ? "They add their email when signing up." + : "One use, tied to the recipient’s email. You get the link too."} + </small> + </span> + <span className="delivery-choice-check" aria-hidden="true"> + {value === method ? "✓" : ""} + </span> + </button> + ))} + </fieldset> + ); +} diff --git a/frontend/app/ui/MagentMark.tsx b/frontend/app/ui/MagentMark.tsx new file mode 100644 index 0000000..de1cedc --- /dev/null +++ b/frontend/app/ui/MagentMark.tsx @@ -0,0 +1,8 @@ +export default function MagentMark() { + return ( + <svg className="magent-mark" viewBox="0 0 40 40" fill="none" aria-hidden="true"> + <rect x=".5" y=".5" width="39" height="39" rx="11" fill="#242329" stroke="#45434f" /> + <path d="M10 29V11h4l6 9 6-9h4v18h-4V18l-6 8-6-8v11h-4Z" fill="#dedaff" /> + </svg> + ); +} diff --git a/frontend/app/ui/PageHeading.tsx b/frontend/app/ui/PageHeading.tsx new file mode 100644 index 0000000..7d90d61 --- /dev/null +++ b/frontend/app/ui/PageHeading.tsx @@ -0,0 +1,26 @@ +import type { ReactNode } from "react"; + +type PageHeadingProps = { + title: string; + description?: string; + eyebrow?: string; + leading?: ReactNode; + actions?: ReactNode; +}; + +/** A flat, shared page title. Panels belong to the content below it. */ +export default function PageHeading({ title, description, eyebrow, leading, actions }: PageHeadingProps) { + return ( + <header className="page-heading"> + <div className="page-heading-main"> + {leading && <div className="page-heading-leading">{leading}</div>} + <div className="page-heading-copy"> + {eyebrow && <span className="page-heading-eyebrow">{eyebrow}</span>} + <h1>{title}</h1> + {description && <p>{description}</p>} + </div> + </div> + {actions && <div className="page-heading-actions">{actions}</div>} + </header> + ); +} diff --git a/frontend/app/ui/RequestStageFilter.tsx b/frontend/app/ui/RequestStageFilter.tsx new file mode 100644 index 0000000..c86a2e8 --- /dev/null +++ b/frontend/app/ui/RequestStageFilter.tsx @@ -0,0 +1,33 @@ +export type RequestStage = "all" | "pending" | "in_progress" | "working" | "ready"; + +const REQUEST_STAGE_OPTIONS: ReadonlyArray<{ value: RequestStage; label: string }> = [ + { value: "all", label: "All" }, + { value: "pending", label: "Waiting" }, + { value: "in_progress", label: "In progress" }, + { value: "working", label: "Working" }, + { value: "ready", label: "Ready" }, +]; + +export default function RequestStageFilter({ + value, + onChange, +}: { + value: RequestStage; + onChange: (stage: RequestStage) => void; +}) { + return ( + <nav className="request-filter-chips" aria-label="Filter requests by stage"> + {REQUEST_STAGE_OPTIONS.map((option) => ( + <button + type="button" + key={option.value} + className={value === option.value ? "is-active" : undefined} + onClick={() => onChange(option.value)} + > + {option.value === "working" ? <i aria-hidden="true" /> : null} + {option.label} + </button> + ))} + </nav> + ); +} diff --git a/frontend/app/ui/ResolutionChoice.tsx b/frontend/app/ui/ResolutionChoice.tsx new file mode 100644 index 0000000..35ce072 --- /dev/null +++ b/frontend/app/ui/ResolutionChoice.tsx @@ -0,0 +1,33 @@ +"use client"; + +import "./resolution-choice.css"; + +export default function ResolutionChoice({ + title, + busy, + onAnswer, +}: { + title: string; + busy: boolean; + onAnswer: (resolved: boolean) => void; +}) { + return ( + <section className="resolution-choice" aria-labelledby="resolution-question" aria-busy={busy}> + <span className="section-kicker">Your answer is needed</span> + <h2 id="resolution-question">Is it fixed?</h2> + <p>{title}</p> + <p>Try the affected content in Jellyfin, then choose:</p> + <div className="resolution-choice-buttons"> + <button id="yes" type="button" className="resolution-yes" disabled={busy} onClick={() => onAnswer(true)}> + <strong>YES</strong> + <span>It works — close this issue</span> + </button> + <button id="no" type="button" className="resolution-no" disabled={busy} onClick={() => onAnswer(false)}> + <strong>NO</strong> + <span>Still broken — keep it open</span> + </button> + </div> + {busy && <p role="status">Saving your answer…</p>} + </section> + ); +} diff --git a/frontend/app/ui/SettingsNavigation.tsx b/frontend/app/ui/SettingsNavigation.tsx new file mode 100644 index 0000000..df7f255 --- /dev/null +++ b/frontend/app/ui/SettingsNavigation.tsx @@ -0,0 +1,35 @@ +"use client"; + +import { usePathname, useRouter } from "next/navigation"; +import { CONFIG_GROUPS } from "../admin/configNavigation"; + +export default function SettingsNavigation() { + const pathname = usePathname(); + const router = useRouter(); + const current = CONFIG_GROUPS.flatMap((group) => group.items).find((item) => item.href === pathname); + if (pathname === "/admin") return null; + return ( + <nav className="settings-top-navigation" aria-label="Settings navigation"> + <a href="/admin">← All settings</a> + <label> + <span>Jump to</span> + <select + aria-label="Settings section" + value={current?.href ?? "/admin"} + onChange={(event) => router.push(event.target.value)} + > + <option value="/admin">Settings overview</option> + {CONFIG_GROUPS.map((group) => ( + <optgroup label={group.title} key={group.title}> + {group.items.map((item) => ( + <option key={item.href} value={item.href}> + {item.label} + </option> + ))} + </optgroup> + ))} + </select> + </label> + </nav> + ); +} diff --git a/frontend/app/ui/SetupGate.tsx b/frontend/app/ui/SetupGate.tsx new file mode 100644 index 0000000..ab27b2a --- /dev/null +++ b/frontend/app/ui/SetupGate.tsx @@ -0,0 +1,42 @@ +"use client"; + +import { usePathname, useRouter } from "next/navigation"; +import { useEffect, useState, type ReactNode } from "react"; +import { requestJson } from "../lib/api-client"; +import { authFetch } from "../lib/auth"; + +// Backup access stays available so a fresh installation can be restored before +// connecting any apps. This is navigation only; the API enforces admin access. +export default function SetupGate({ children }: { children: ReactNode }) { + const pathname = usePathname(); + const router = useRouter(); + const bypass = pathname === "/setup" || pathname === "/admin/backups"; + const [checked, setChecked] = useState(false); + + useEffect(() => { + if (bypass) return; + const controller = new AbortController(); + void requestJson<{ setup_required: boolean }>( + "/setup/status", + { signal: controller.signal, cache: "no-store" }, + authFetch, + ) + .then((status) => { + if (controller.signal.aborted) return; + if (status.setup_required) router.replace("/setup"); + else setChecked(true); + }) + .catch(() => { + // Never hide an existing installation during an API outage or rollout. + if (!controller.signal.aborted) setChecked(true); + }); + return () => controller.abort(); + }, [bypass, router]); + + if (bypass || checked) return children; + return ( + <main className="card" role="status"> + Checking installation... + </main> + ); +} diff --git a/frontend/app/ui/SiteStatus.tsx b/frontend/app/ui/SiteStatus.tsx new file mode 100644 index 0000000..dc481e3 --- /dev/null +++ b/frontend/app/ui/SiteStatus.tsx @@ -0,0 +1,70 @@ +"use client"; + +import { useEffect, useState, type CSSProperties } from "react"; +import { authFetch, clearToken, getApiBase, getToken } from "../lib/auth"; + +type BannerInfo = { + enabled: boolean; + message: string; + tone?: string; + backgroundColor?: string | null; + borderColor?: string | null; +}; + +type SiteInfo = { + buildNumber?: string; + banner?: BannerInfo; +}; + +const buildRequest = () => { + const token = getToken(); + const baseUrl = getApiBase(); + const url = token ? `${baseUrl}/site/info` : `${baseUrl}/site/public`; + const fetcher = token ? authFetch : fetch; + return { token, url, fetcher }; +}; + +export default function SiteStatus() { + const [info, setInfo] = useState<SiteInfo | null>(null); + + useEffect(() => { + let active = true; + const load = async () => { + try { + const { token, url, fetcher } = buildRequest(); + const response = await fetcher(url); + if (!response.ok) { + if (response.status === 401 && token) { + clearToken(); + } + return; + } + const data = await response.json(); + if (!active) return; + setInfo(data); + } catch (err) { + console.error(err); + } + }; + void load(); + return () => { + active = false; + }; + }, []); + + const banner = info?.banner; + const tone = banner?.tone || "info"; + const bannerStyle = { + "--site-banner-background-color": banner?.backgroundColor || undefined, + "--site-banner-border-color": banner?.borderColor || undefined, + } as CSSProperties; + return ( + <> + {banner?.enabled && banner.message ? ( + <div className={`site-banner site-banner--${tone}`} style={bannerStyle}> + {banner.message} + </div> + ) : null} + </> + ); +} diff --git a/frontend/app/ui/UserViewBanner.tsx b/frontend/app/ui/UserViewBanner.tsx new file mode 100644 index 0000000..4569c93 --- /dev/null +++ b/frontend/app/ui/UserViewBanner.tsx @@ -0,0 +1,23 @@ +"use client"; + +import { setUserViewPreview, useUserViewPreview } from "../lib/viewMode"; + +export default function UserViewBanner() { + const enabled = useUserViewPreview(); + + if (!enabled) return null; + + return ( + <div className="user-view-banner" role="status"> + <div> + <strong>User view</strong> + <span> + Admin controls are hidden. You are still using your own account and data; backend permissions are unchanged. + </span> + </div> + <button type="button" onClick={() => setUserViewPreview(false)}> + Exit user view + </button> + </div> + ); +} diff --git a/frontend/app/ui/WorkspaceNavigation.tsx b/frontend/app/ui/WorkspaceNavigation.tsx new file mode 100644 index 0000000..c5becd2 --- /dev/null +++ b/frontend/app/ui/WorkspaceNavigation.tsx @@ -0,0 +1,136 @@ +"use client"; + +import { usePathname } from "next/navigation"; +import { getToken } from "../lib/auth"; +import { canAccess, featureForPath } from "../lib/features"; +import { useFeatureUser } from "./FeatureGate"; + +type NavigationItem = { + href: string; + label: string; + shortLabel: string; + icon: "dashboard" | "media" | "issues" | "invites" | "settings" | "stats"; + adminOnly?: boolean; + match: (path: string) => boolean; +}; + +const NAVIGATION: NavigationItem[] = [ + { + href: "/new-requests", + label: "New Request", + shortLabel: "New", + icon: "media", + match: (path) => path === "/new-requests", + }, + { + href: "/", + label: "My Requests", + shortLabel: "Requests", + icon: "dashboard", + match: (path) => path === "/" || path.startsWith("/requests/"), + }, + { + href: "/insights", + label: "My Stats", + shortLabel: "Stats", + icon: "stats", + match: (path) => path === "/insights" || path.startsWith("/insights/"), + }, + { + href: "/portal/issues", + label: "Issues", + shortLabel: "Issues", + icon: "issues", + match: (path) => path.startsWith("/portal/issues"), + }, + { + href: "/profile/invites", + label: "Invites", + shortLabel: "Invites", + icon: "invites", + match: (path) => path.startsWith("/profile/invites"), + }, + { + href: "/admin", + label: "Configuration", + shortLabel: "Config", + icon: "settings", + adminOnly: true, + match: (path) => path.startsWith("/admin") || path.startsWith("/users"), + }, +]; + +const HIDDEN_ROUTES = ["/login", "/signup", "/forgot-password", "/reset-password", "/how-it-works"]; + +function NavigationIcon({ name }: { name: NavigationItem["icon"] }) { + const paths: Record<NavigationItem["icon"], React.ReactNode> = { + stats: ( + <> + <path d="M4 20h16M6 16v-5m6 5V4m6 12V8" /> + </> + ), + dashboard: ( + <> + <rect x="3" y="3" width="7" height="7" rx="1" /> + <rect x="14" y="3" width="7" height="7" rx="1" /> + <rect x="3" y="14" width="7" height="7" rx="1" /> + <rect x="14" y="14" width="7" height="7" rx="1" /> + </> + ), + media: ( + <> + <rect x="3" y="5" width="18" height="15" rx="2" /> + <path d="m8 3 2 4m4-4 2 4M3 10h18" /> + <path d="m10 13 5 3-5 3z" /> + </> + ), + issues: ( + <> + <path d="M12 3 2.8 19h18.4L12 3Z" /> + <path d="M12 9v4m0 3h.01" /> + </> + ), + invites: ( + <> + <circle cx="9" cy="8" r="3" /> + <path d="M3.5 20v-2.2A4.8 4.8 0 0 1 8.3 13h1.4a4.8 4.8 0 0 1 3.8 1.9M17 8v6m-3-3h6" /> + </> + ), + settings: ( + <> + <circle cx="12" cy="12" r="3" /> + <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1a1.7 1.7 0 0 0 1.9.3A1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" /> + </> + ), + }; + return ( + <svg viewBox="0 0 24 24" aria-hidden="true"> + {paths[name]} + </svg> + ); +} + +export default function WorkspaceNavigation() { + const pathname = usePathname(); + const { user, ready } = useFeatureUser(); + const role = user?.role; + + if (!ready || !getToken() || HIDDEN_ROUTES.some((route) => pathname.startsWith(route))) { + return null; + } + + const items = NAVIGATION.filter( + (item) => (!item.adminOnly || role === "admin") && canAccess(user, featureForPath(item.href)), + ); + + return ( + <nav className="workspace-mobile-nav" aria-label="Mobile navigation"> + {items.map((item) => ( + <a key={item.href} href={item.href} className={item.match(pathname) ? "is-active" : undefined}> + <NavigationIcon name={item.icon} /> + <span>{item.shortLabel}</span> + </a> + ))} + </nav> + ); +} diff --git a/frontend/app/ui/branding.test.tsx b/frontend/app/ui/branding.test.tsx new file mode 100644 index 0000000..bcd89a2 --- /dev/null +++ b/frontend/app/ui/branding.test.tsx @@ -0,0 +1,37 @@ +import { renderToStaticMarkup } from "react-dom/server"; +import { describe, expect, it } from "vitest"; +import ComingSoonPage from "../coming-soon/page"; +import HowItWorksPage from "../how-it-works/page"; +import AuthLayout from "./AuthLayout"; + +describe("portable default branding", () => { + it("uses Magent branding without replacing the supplied sign-in content", () => { + const html = renderToStaticMarkup( + <AuthLayout title="Welcome to our library" description="Use your account" footer="Local help"> + <p>A custom message</p> + </AuthLayout>, + ); + + expect(html).toContain("Magent · Request. Watch. Enjoy."); + expect(html).toContain("Welcome to our library"); + expect(html).toContain("A custom message"); + expect(html).toContain("Local help"); + expect(html).not.toMatch(/grizzlyflix/i); + expect(html).not.toContain(">Beta<"); + }); + + it("shows a generic coming-soon page", () => { + const html = renderToStaticMarkup(<ComingSoonPage />); + + expect(html).toContain("MAGENT"); + expect(html).toContain("Your media member portal"); + expect(html).not.toMatch(/grizzlyflix/i); + }); + + it("explains the Jellyfin integration without a deployment-specific service name", () => { + const html = renderToStaticMarkup(<HowItWorksPage />); + + expect(html).toContain("Jellyfin is where you watch them."); + expect(html).not.toMatch(/grizzlyflix/i); + }); +}); diff --git a/frontend/app/ui/invite-delivery.css b/frontend/app/ui/invite-delivery.css new file mode 100644 index 0000000..8c234c3 --- /dev/null +++ b/frontend/app/ui/invite-delivery.css @@ -0,0 +1,15 @@ +.invite-delivery-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } +.page .invite-delivery-options > button { display: flex; align-items: center; justify-content: flex-start; gap: 14px; min-height: 96px; padding: 18px; text-align: left; border-radius: 12px; background: var(--ops-panel-2, #202023) !important; border: 1px solid var(--ops-line, #444) !important; color: var(--ops-text, #eee) !important; text-transform: none; } +.page .invite-delivery-options > button[aria-pressed='true'] { background: #302d3e !important; border-color: #c7bdff !important; box-shadow: inset 0 0 0 1px #c7bdff; } +.invite-delivery-options > button:focus-visible { outline: 2px solid #c7bdff; outline-offset: 3px; } +.invite-delivery-options .delivery-choice-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; background: #ffffff09; color: #c7bdff; } +.delivery-choice-icon svg { width: 24px; height: 24px; } +.invite-delivery-options .delivery-choice-copy { display: grid; gap: 6px; min-width: 0; flex: 1; } +.delivery-choice-copy strong { font-size: .95rem; color: var(--ops-text, #eee); } +.delivery-choice-copy small { font-size: .8rem; font-weight: 400; line-height: 1.45; color: var(--ops-muted, #bbb); } +.invite-delivery-options .delivery-choice-check { flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid var(--ops-line, #666); border-radius: 50%; display: grid; place-items: center; color: #c7bdff; font-size: .8rem; } +.invite-delivery-fields { align-items: start; } +.invite-delivery-fields > label { display: grid; align-content: start; gap: 8px; } +.invite-delivery-fields input { min-height: 48px; } +.invite-delivery-fields textarea { min-height: 88px; resize: vertical; } +@media (max-width: 640px) { .invite-delivery-options { grid-template-columns: 1fr; } } diff --git a/frontend/app/ui/resolution-choice.css b/frontend/app/ui/resolution-choice.css new file mode 100644 index 0000000..7bb1976 --- /dev/null +++ b/frontend/app/ui/resolution-choice.css @@ -0,0 +1,13 @@ +.resolution-choice { padding: clamp(20px, 4vw, 36px); border: 1px solid var(--ops-border, #555); border-radius: 18px; background: var(--ops-surface, #202023); margin-bottom: 20px; } +.resolution-choice h2 { margin: 10px 0; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; } +.resolution-choice p { line-height: 1.5; overflow-wrap: anywhere; } +.resolution-choice-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; } +.resolution-choice-buttons button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 130px; padding: 20px; border-radius: 14px; border: 2px solid transparent; text-transform: none; } +.resolution-choice-buttons button strong { font-size: 2.75rem; line-height: 1; color: inherit; } +.resolution-choice-buttons button span { color: inherit; opacity: 1; font-size: .9rem; } +/* Scoped overrides for the legacy global !important button palette. */ +.page .resolution-choice-buttons button.resolution-yes { background: #b4f4d2 !important; color: #10261b !important; border-color: #b4f4d2 !important; } +.page .resolution-choice-buttons button.resolution-no { background: #ffc1c5 !important; color: #391318 !important; border-color: #ffc1c5 !important; } +.resolution-choice-buttons button:focus-visible { outline: 3px solid var(--ops-accent, #c7baff); outline-offset: 4px; } +.resolution-response-page { width: min(760px, 100%); margin: 20px auto; } +@media (max-width: 520px) { .resolution-choice-buttons { grid-template-columns: 1fr; } .resolution-choice-buttons button { min-height: 104px; } } diff --git a/frontend/app/users/FeatureControls.tsx b/frontend/app/users/FeatureControls.tsx new file mode 100644 index 0000000..270d7d5 --- /dev/null +++ b/frontend/app/users/FeatureControls.tsx @@ -0,0 +1,119 @@ +"use client"; + +import { useCallback, useEffect, useState } from "react"; +import { authFetch, getApiBase } from "../lib/auth"; +import { FEATURES, type Feature, type FeatureAccess } from "../lib/features"; + +type Account = { username: string; role: string; features: FeatureAccess }; + +export default function FeatureControls({ username, onSaved }: { username?: string; onSaved: () => void }) { + const [accounts, setAccounts] = useState<Account[] | null>(null); + const [changes, setChanges] = useState<Partial<FeatureAccess>>({}); + const [busy, setBusy] = useState(false); + const [message, setMessage] = useState(""); + const [error, setError] = useState(""); + const load = useCallback(async () => { + const response = await authFetch( + `${getApiBase()}/admin/users/${username ? encodeURIComponent(username) : "summary"}`, + ); + if (!response.ok) throw new Error("Could not load feature permissions."); + const data = await response.json(); + setAccounts(username ? [data.user] : data.users.filter((user: Account) => user.role !== "admin")); + }, [username]); + useEffect(() => { + void load().catch((err) => setError(err.message)); + }, [load]); + const save = async () => { + setBusy(true); + setError(""); + setMessage(""); + try { + const response = await authFetch( + `${getApiBase()}/admin/users/${username ? `${encodeURIComponent(username)}/features` : "features/bulk"}`, + { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(changes), + }, + ); + if (!response.ok) throw new Error((await response.json()).detail || "Could not save permissions."); + const result = await response.json(); + setChanges({}); + setMessage(username ? "Feature access saved." : `Feature access saved for ${result.updated} non-admin accounts.`); + await load(); + onSaved(); + } catch (err) { + setError(err instanceof Error ? err.message : "Could not save permissions."); + } finally { + setBusy(false); + } + }; + const admin = accounts?.some((account) => account.role === "admin"); + return ( + <section className="user-management-panel feature-controls"> + <h3>Feature access</h3> + <p> + {username + ? "Choose which features this person can use in Magent." + : "Apply feature access to every existing non-admin account, including users outside the current search. Only the checkboxes you change will be applied."} + </p> + <p> + {admin + ? "Administrators always have access to all features." + : "Changes take effect on the next page or API request. These permissions control Magent access; linked services keep their own permissions."} + </p> + {!accounts && !error && <p>Loading permissions...</p>} + {FEATURES.map(({ key, label, description }) => { + const enabled = accounts?.filter((account) => account.features?.[key]).length ?? 0; + const mixed = !!accounts?.length && enabled > 0 && enabled < accounts.length; + const changed = Object.hasOwn(changes, key); + return ( + <label key={key} className="feature-access-row"> + <input + type="checkbox" + ref={(input) => { + if (input) input.indeterminate = !changed && mixed; + }} + checked={changes[key] ?? (!!accounts?.length && enabled === accounts.length)} + disabled={busy || !accounts?.length || admin} + onChange={(event) => setChanges((previous) => ({ ...previous, [key as Feature]: event.target.checked }))} + /> + <span> + <strong>{label}</strong> + <small>{description}</small> + {!username && ( + <small> + {enabled} of {accounts?.length ?? 0} enabled{mixed && !changed ? " · Mixed access" : ""} + {changed ? ` · Will ${changes[key] ? "enable" : "disable"} for everyone` : ""} + </small> + )} + </span> + </label> + ); + })} + {error && ( + <p className="error-banner" role="alert"> + {error} + </p> + )} + {message && ( + <p className="status-banner" role="status"> + {message} + </p> + )} + <div className="admin-inline-actions"> + <button type="button" disabled={busy || !Object.keys(changes).length} onClick={() => void save()}> + {busy ? "Saving..." : username ? "Save feature access" : "Apply changed features to all users"} + </button> + <button + type="button" + className="ghost-button" + disabled={busy || !Object.keys(changes).length} + onClick={() => setChanges({})} + > + Reset changes + </button> + </div> + </section> + ); +} diff --git a/frontend/app/users/[id]/page.tsx b/frontend/app/users/[id]/page.tsx new file mode 100644 index 0000000..28b1b62 --- /dev/null +++ b/frontend/app/users/[id]/page.tsx @@ -0,0 +1,809 @@ +"use client"; + +import { useCallback, useEffect, useRef, useState } from "react"; +import { useParams, useRouter } from "next/navigation"; +import { authFetch, clearToken, getApiBase, getToken } from "../../lib/auth"; +import FeatureControls from "../FeatureControls"; +import "../users.css"; +import AdminShell from "../../ui/AdminShell"; + +type UserStats = { + total: number; + ready: number; + pending: number; + approved: number; + working: number; + partial: number; + declined: number; + in_progress: number; + last_request_at?: string | null; +}; + +type AdminUser = { + id?: number; + username: string; + email?: string | null; + role: string; + auth_provider?: string | null; + last_login_at?: string | null; + is_blocked?: boolean; + auto_search_enabled?: boolean; + invite_management_enabled?: boolean; + jellyseerr_user_id?: number | null; + profile_id?: number | null; + expires_at?: string | null; + is_expired?: boolean; + invited_by_code?: string | null; + invited_at?: string | null; +}; + +type UserLineage = { + invite_code?: string | null; + invited_by?: string | null; + invite?: { + id?: number; + code?: string; + label?: string | null; + created_by?: string | null; + created_at?: string | null; + enabled?: boolean; + is_usable?: boolean; + } | null; +} | null; + +type UserProfileOption = { + id: number; + name: string; + is_active?: boolean; +}; + +const formatDateTime = (value?: string | null) => { + if (!value) return "Never"; + const date = new Date(value); + if (Number.isNaN(date.valueOf())) return value; + return date.toLocaleString(); +}; + +const toLocalDateTimeInput = (value?: string | null) => { + if (!value) return ""; + const date = new Date(value); + if (Number.isNaN(date.valueOf())) return ""; + const offsetMs = date.getTimezoneOffset() * 60_000; + const local = new Date(date.getTime() - offsetMs); + return local.toISOString().slice(0, 16); +}; + +const fromLocalDateTimeInput = (value: string) => { + if (!value.trim()) return null; + const date = new Date(value); + if (Number.isNaN(date.valueOf())) return null; + return date.toISOString(); +}; + +const normalizeStats = (stats: Record<string, unknown> | null | undefined): UserStats => ({ + total: Number(stats?.total ?? 0), + ready: Number(stats?.ready ?? 0), + pending: Number(stats?.pending ?? 0), + approved: Number(stats?.approved ?? 0), + working: Number(stats?.working ?? 0), + partial: Number(stats?.partial ?? 0), + declined: Number(stats?.declined ?? 0), + in_progress: Number(stats?.in_progress ?? 0), + last_request_at: typeof stats?.last_request_at === "string" ? stats.last_request_at : null, +}); + +export default function UserDetailPage() { + const [manageOpen, setManageOpen] = useState(false); + const managementDialog = useRef<HTMLDialogElement>(null); + const manageTrigger = useRef<HTMLButtonElement>(null); + useEffect(() => { + if (!manageOpen) return; + const dialog = managementDialog.current; + if (!dialog) return; + const overflow = document.body.style.overflow; + document.body.style.overflow = "hidden"; + dialog.showModal(); + return () => { + dialog.close(); + document.body.style.overflow = overflow; + manageTrigger.current?.focus(); + }; + }, [manageOpen]); + const params = useParams(); + const router = useRouter(); + const idParam = Array.isArray(params?.id) ? params.id[0] : params?.id; + const [user, setUser] = useState<AdminUser | null>(null); + const [stats, setStats] = useState<UserStats | null>(null); + const [error, setError] = useState<string | null>(null); + const [loading, setLoading] = useState(true); + const [profiles, setProfiles] = useState<UserProfileOption[]>([]); + const [profileSelection, setProfileSelection] = useState(""); + const [expiryInput, setExpiryInput] = useState(""); + const [emailInput, setEmailInput] = useState(""); + const [savingProfile, setSavingProfile] = useState(false); + const [savingExpiry, setSavingExpiry] = useState(false); + const [savingEmail, setSavingEmail] = useState(false); + const [systemActionBusy, setSystemActionBusy] = useState(false); + const [actionStatus, setActionStatus] = useState<string | null>(null); + const [lineage, setLineage] = useState<UserLineage>(null); + + const loadProfiles = useCallback(async () => { + try { + const baseUrl = getApiBase(); + const response = await authFetch(`${baseUrl}/admin/profiles`); + if (!response.ok) { + return; + } + const data = await response.json(); + if (!Array.isArray(data?.profiles)) { + setProfiles([]); + return; + } + setProfiles( + data.profiles.map((profile: Record<string, unknown>) => ({ + id: Number(profile.id ?? 0), + name: String(profile.name ?? "Unnamed profile"), + is_active: Boolean(profile.is_active ?? true), + })), + ); + } catch (err) { + console.error(err); + } + }, []); + + const loadUser = useCallback(async () => { + if (!idParam) return; + try { + const baseUrl = getApiBase(); + const response = await authFetch(`${baseUrl}/admin/users/id/${encodeURIComponent(idParam)}`); + if (!response.ok) { + if (response.status === 401) { + clearToken(); + router.push("/login"); + return; + } + if (response.status === 403) { + router.push("/"); + return; + } + if (response.status === 404) { + setError("User not found."); + return; + } + throw new Error("Could not load user."); + } + const data = await response.json(); + const nextUser = data?.user ?? null; + setUser(nextUser); + setStats(normalizeStats(data?.stats)); + setLineage((data?.lineage ?? null) as UserLineage); + setProfileSelection( + nextUser?.profile_id == null || Number.isNaN(Number(nextUser?.profile_id)) ? "" : String(nextUser.profile_id), + ); + setExpiryInput(toLocalDateTimeInput(nextUser?.expires_at)); + setEmailInput(nextUser?.email ?? ""); + setError(null); + } catch (err) { + console.error(err); + setError("Could not load user."); + } finally { + setLoading(false); + } + }, [idParam, router]); + + const toggleUserBlock = async (blocked: boolean) => { + if (!user) return; + try { + setActionStatus(null); + const baseUrl = getApiBase(); + const response = await authFetch( + `${baseUrl}/admin/users/${encodeURIComponent(user.username)}/${blocked ? "block" : "unblock"}`, + { method: "POST" }, + ); + if (!response.ok) { + throw new Error("Update failed"); + } + await loadUser(); + setActionStatus(blocked ? "User blocked." : "User unblocked."); + } catch (err) { + console.error(err); + setError("Could not update user access."); + } + }; + + const updateUserRole = async (role: string) => { + if (!user) return; + try { + setActionStatus(null); + const baseUrl = getApiBase(); + const response = await authFetch(`${baseUrl}/admin/users/${encodeURIComponent(user.username)}/role`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ role }), + }); + if (!response.ok) { + throw new Error("Update failed"); + } + await loadUser(); + setActionStatus(`Role updated to ${role}.`); + } catch (err) { + console.error(err); + setError("Could not update user role."); + } + }; + + const saveUserEmail = async (clear = false) => { + if (!user) return; + const email = clear ? "" : emailInput.trim(); + if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { + setError("Enter a valid email address."); + setActionStatus(null); + return; + } + setSavingEmail(true); + setError(null); + setActionStatus(null); + try { + const response = await authFetch(`${getApiBase()}/admin/users/${encodeURIComponent(user.username)}/email`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ email: email || null }), + }); + const text = await response.text(); + let data: { detail?: string; user?: { email?: string | null } } | null = null; + try { + data = text ? JSON.parse(text) : null; + } catch { + data = null; + } + if (!response.ok) { + throw new Error(data?.detail || text || "Email update failed"); + } + setEmailInput(data?.user?.email ?? ""); + await loadUser(); + setActionStatus(email ? "Contact email saved." : "Contact email removed."); + } catch (err) { + console.error(err); + setError(err instanceof Error ? err.message : "Could not update the contact email."); + } finally { + setSavingEmail(false); + } + }; + + const updateAutoSearchEnabled = async (enabled: boolean) => { + if (!user) return; + try { + setActionStatus(null); + const baseUrl = getApiBase(); + const response = await authFetch(`${baseUrl}/admin/users/${encodeURIComponent(user.username)}/auto-search`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ enabled }), + }); + if (!response.ok) { + throw new Error("Update failed"); + } + await loadUser(); + setActionStatus(`Auto search/download ${enabled ? "enabled" : "disabled"}.`); + } catch (err) { + console.error(err); + setError("Could not update auto search access."); + } + }; + + const applyProfileToUser = async (profileOverride?: string | null) => { + if (!user) return; + const profileValue = profileOverride ?? profileSelection; + setSavingProfile(true); + setError(null); + setActionStatus(null); + try { + const baseUrl = getApiBase(); + const response = await authFetch(`${baseUrl}/admin/users/${encodeURIComponent(user.username)}/profile`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ profile_id: profileValue || null }), + }); + if (!response.ok) { + const text = await response.text(); + throw new Error(text || "Profile update failed"); + } + await loadUser(); + setActionStatus(profileValue ? "Profile applied to user." : "Profile assignment cleared."); + } catch (err) { + console.error(err); + setError("Could not update user profile."); + } finally { + setSavingProfile(false); + } + }; + + const saveUserExpiry = async () => { + if (!user) return; + const expiresAt = fromLocalDateTimeInput(expiryInput); + if (expiryInput.trim() && !expiresAt) { + setError("Invalid expiry date/time."); + return; + } + setSavingExpiry(true); + setError(null); + setActionStatus(null); + try { + const baseUrl = getApiBase(); + const response = await authFetch(`${baseUrl}/admin/users/${encodeURIComponent(user.username)}/expiry`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ expires_at: expiresAt }), + }); + if (!response.ok) { + const text = await response.text(); + throw new Error(text || "Expiry update failed"); + } + await loadUser(); + setActionStatus(expiresAt ? "User expiry updated." : "User expiry cleared."); + } catch (err) { + console.error(err); + setError("Could not update user expiry."); + } finally { + setSavingExpiry(false); + } + }; + + const clearUserExpiry = async () => { + if (!user) return; + setSavingExpiry(true); + setError(null); + setActionStatus(null); + try { + const baseUrl = getApiBase(); + const response = await authFetch(`${baseUrl}/admin/users/${encodeURIComponent(user.username)}/expiry`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ clear: true }), + }); + if (!response.ok) { + const text = await response.text(); + throw new Error(text || "Expiry clear failed"); + } + setExpiryInput(""); + await loadUser(); + setActionStatus("User expiry cleared."); + } catch (err) { + console.error(err); + setError("Could not clear user expiry."); + } finally { + setSavingExpiry(false); + } + }; + + const runSystemAction = async (action: "ban" | "unban" | "remove") => { + if (!user) return; + if (action === "remove") { + const confirmed = window.confirm( + `Permanently delete ${user.username} from Magent, the same-name Jellyfin account and linked Seerr account, disable their invitations and attempt a notification email? This cannot be undone. Media files and Jellystat history are kept.`, + ); + if (!confirmed) return; + } + if (action === "ban") { + const confirmed = window.confirm( + `Block ${user.username} in Magent, disable their same-name Jellyfin account and issued invitations, and attempt a notification email? Seerr relies on Jellyfin sign-in and is not directly banned.`, + ); + if (!confirmed) return; + } + setSystemActionBusy(true); + setError(null); + setActionStatus(null); + try { + const baseUrl = getApiBase(); + const response = await authFetch(`${baseUrl}/admin/users/${encodeURIComponent(user.username)}/system-action`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ action }), + }); + const text = await response.text(); + let data: { detail?: string; status?: string } | null = null; + try { + data = text ? JSON.parse(text) : null; + } catch { + data = null; + } + if (!response.ok) { + throw new Error(data?.detail || text || "Cross-system action failed"); + } + const state = data?.status === "partial" ? "partial" : "complete"; + if (action === "remove") { + setActionStatus(`User removed (${state}).`); + router.push("/users"); + return; + } + await loadUser(); + setActionStatus(`${action === "ban" ? "Ban" : "Unban"} completed (${state}).`); + } catch (err) { + console.error(err); + setError(err instanceof Error ? err.message : "Could not run cross-system action."); + } finally { + setSystemActionBusy(false); + } + }; + + useEffect(() => { + if (!getToken()) { + router.push("/login"); + return; + } + void loadUser(); + void loadProfiles(); + }, [loadProfiles, loadUser, router]); + + if (loading) { + return <main className="card">Loading user...</main>; + } + + return ( + <AdminShell + title={user?.username || "User"} + subtitle="User overview and request stats." + actions={ + <> + <button type="button" onClick={() => router.push("/users")}> + Back to users + </button> + <button + ref={manageTrigger} + type="button" + disabled={!user} + aria-haspopup="dialog" + onClick={() => setManageOpen(true)} + > + Manage this user + </button> + </> + } + > + <section className="admin-section"> + {error && <div className="error-banner">{error}</div>} + {actionStatus && <div className="status-banner">{actionStatus}</div>} + {!user ? ( + <div className="status-banner">No user data found.</div> + ) : ( + <div className="user-detail-page-grid user-detail-centered"> + <div className="user-detail-main-column"> + <div className="admin-panel user-detail-panel"> + <div className="user-detail-panel-header"> + <div className="user-detail-title-row"> + <strong className="user-detail-name">{user.username}</strong> + <span className={`user-grid-pill ${user.is_blocked ? "is-blocked" : ""}`}> + {user.is_blocked ? "Blocked" : "Active"} + </span> + <span className={`user-grid-pill ${user.is_expired ? "is-blocked" : ""}`}> + {user.is_expired ? "Expired" : user.expires_at ? "Expiry set" : "No expiry"} + </span> + </div> + <p className="lede">User identity, access state, and request history for this account.</p> + </div> + <div className="user-detail-meta-grid"> + <div className="user-detail-meta-item"> + <span className="label">Email</span> + <strong>{user.email || "Not set"}</strong> + </div> + <div className="user-detail-meta-item"> + <span className="label">Seerr ID</span> + <strong>{user.jellyseerr_user_id ?? "Not linked"}</strong> + </div> + <div className="user-detail-meta-item"> + <span className="label">Role</span> + <strong>{user.role}</strong> + </div> + <div className="user-detail-meta-item"> + <span className="label">Login type</span> + <strong>{user.auth_provider || "local"}</strong> + </div> + <div className="user-detail-meta-item"> + <span className="label">Assigned profile</span> + <strong>{user.profile_id ?? "None"}</strong> + </div> + <div className="user-detail-meta-item"> + <span className="label">Invited by</span> + <strong>{lineage?.invited_by || "Direct / unknown"}</strong> + </div> + <div className="user-detail-meta-item"> + <span className="label">Invite code used</span> + <strong>{lineage?.invite_code || user.invited_by_code || "None"}</strong> + </div> + <div className="user-detail-meta-item"> + <span className="label">Last login</span> + <strong>{formatDateTime(user.last_login_at)}</strong> + </div> + <div className="user-detail-meta-item"> + <span className="label">Account expiry</span> + <strong>{user.expires_at ? formatDateTime(user.expires_at) : "Never"}</strong> + </div> + </div> + </div> + + <div className="admin-panel user-detail-panel"> + <div className="user-detail-panel-header"> + <h2>Request statistics</h2> + <p className="lede">Snapshot of request states and recent activity for this user.</p> + </div> + <div className="user-detail-grid"> + <div className="user-detail-stat"> + <span className="label">Total</span> + <span className="value">{stats?.total ?? 0}</span> + </div> + <div className="user-detail-stat"> + <span className="label">Ready</span> + <span className="value">{stats?.ready ?? 0}</span> + </div> + <div className="user-detail-stat"> + <span className="label">Pending</span> + <span className="value">{stats?.pending ?? 0}</span> + </div> + <div className="user-detail-stat"> + <span className="label">Approved</span> + <span className="value">{stats?.approved ?? 0}</span> + </div> + <div className="user-detail-stat"> + <span className="label">Working</span> + <span className="value">{stats?.working ?? 0}</span> + </div> + <div className="user-detail-stat"> + <span className="label">Partial</span> + <span className="value">{stats?.partial ?? 0}</span> + </div> + <div className="user-detail-stat"> + <span className="label">Declined</span> + <span className="value">{stats?.declined ?? 0}</span> + </div> + <div className="user-detail-stat"> + <span className="label">In progress</span> + <span className="value">{stats?.in_progress ?? 0}</span> + </div> + <div className="user-detail-stat user-detail-stat--wide"> + <span className="label">Last request</span> + <span className="value">{formatDateTime(stats?.last_request_at)}</span> + </div> + </div> + </div> + </div> + + <dialog + ref={managementDialog} + className="user-management-dialog" + aria-labelledby="manage-this-user-title" + onCancel={() => setManageOpen(false)} + onClose={() => setManageOpen(false)} + > + <div className="user-management-content"> + <header className="user-management-heading"> + <div> + <h2 id="manage-this-user-title">Manage {user.username}</h2> + <p>Feature access, account settings and account restrictions.</p> + </div> + <button type="button" className="ghost-button" onClick={() => setManageOpen(false)}> + Close + </button> + </header> + {error && ( + <p className="error-banner" role="alert"> + {error} + </p> + )} + {actionStatus && ( + <p className="status-banner" role="status"> + {actionStatus} + </p> + )} + <p> + <a className="ghost-button" href={`/users?view=identities&user=${encodeURIComponent(user.username)}`}> + Review service links & duplicate accounts + </a> + </p> + {manageOpen && ( + <FeatureControls key={user.role} username={user.username} onSaved={() => void loadUser()} /> + )} + <div className="user-management-grid"> + <div className="admin-panel user-detail-panel"> + <div className="user-detail-panel-header"> + <h2>Contact email</h2> + <p className="lede">Used by Magent for account recovery and issue updates.</p> + </div> + <form + className="user-detail-actions user-detail-actions--stacked" + onSubmit={(event) => { + event.preventDefault(); + void saveUserEmail(); + }} + > + <label> + <span className="user-bulk-label">Email address</span> + <input + type="email" + value={emailInput} + onChange={(event) => setEmailInput(event.target.value)} + placeholder="person@example.com" + autoComplete="off" + disabled={savingEmail} + /> + </label> + <div className="user-detail-helper"> + This updates Magent only. It does not change the user's Jellyfin or Seerr account. + </div> + <div className="admin-inline-actions"> + <button + type="submit" + disabled={savingEmail || !emailInput.trim() || emailInput.trim() === (user.email ?? "")} + > + {savingEmail ? "Saving..." : user.email ? "Save email" : "Add email"} + </button> + {user.email && ( + <button + type="button" + className="ghost-button" + onClick={() => void saveUserEmail(true)} + disabled={savingEmail} + > + Remove email + </button> + )} + </div> + </form> + </div> + + <div className="admin-panel user-detail-panel"> + <div className="user-detail-panel-header"> + <h2>Access controls</h2> + <p className="lede">Role, login access, and auto-download behavior.</p> + </div> + <div className="user-detail-control-stack"> + <label className="toggle"> + <input + type="checkbox" + checked={user.role === "admin"} + onChange={(event) => updateUserRole(event.target.checked ? "admin" : "user")} + /> + <span>Make admin</span> + </label> + <label className="toggle"> + <input + type="checkbox" + checked={Boolean(user.auto_search_enabled ?? true)} + disabled={user.role === "admin"} + onChange={(event) => updateAutoSearchEnabled(event.target.checked)} + /> + <span>Allow auto search/download</span> + </label> + {user.role === "admin" && ( + <div className="user-detail-helper"> + Admins always have automatic search/download and all features. + </div> + )} + </div> + </div> + + <div className="admin-panel user-detail-panel"> + <div className="user-detail-panel-header"> + <h2>Profile defaults</h2> + <p className="lede">Assign or clear an invite profile for this user.</p> + </div> + <div className="user-detail-actions user-detail-actions--stacked"> + <label className="admin-select"> + <span>Assigned profile</span> + <select + value={profileSelection} + onChange={(event) => setProfileSelection(event.target.value)} + disabled={savingProfile} + > + <option value="">None</option> + {profiles.map((profile) => ( + <option key={profile.id} value={profile.id}> + {profile.name} + {profile.is_active === false ? " (disabled)" : ""} + </option> + ))} + </select> + </label> + <div className="admin-inline-actions"> + <button type="button" onClick={() => void applyProfileToUser()} disabled={savingProfile}> + {savingProfile ? "Applying..." : "Apply profile defaults"} + </button> + <button + type="button" + className="ghost-button" + onClick={() => { + setProfileSelection(""); + void applyProfileToUser(""); + }} + disabled={savingProfile} + > + Clear profile + </button> + </div> + </div> + </div> + + <div className="admin-panel user-detail-panel"> + <div className="user-detail-panel-header"> + <h2>Account expiry</h2> + <p className="lede">Set a specific expiry date/time for this user account.</p> + </div> + <div className="user-detail-actions user-detail-actions--stacked"> + <label> + <span className="user-bulk-label">Account expiry</span> + <input + type="datetime-local" + value={expiryInput} + onChange={(event) => setExpiryInput(event.target.value)} + disabled={savingExpiry} + /> + </label> + <div className="admin-inline-actions"> + <button type="button" onClick={saveUserExpiry} disabled={savingExpiry}> + {savingExpiry ? "Saving..." : "Save expiry"} + </button> + <button + type="button" + className="ghost-button" + onClick={clearUserExpiry} + disabled={savingExpiry} + > + Clear expiry + </button> + </div> + </div> + </div> + </div> + <section className="user-management-panel user-management-danger"> + <h3>Restrict access or delete accounts</h3> + <p> + Blocking Magent prevents sign-in here and keeps the account. It does not block Jellyfin or Seerr. + </p> + <button + type="button" + className="ghost-button" + onClick={() => toggleUserBlock(!user.is_blocked)} + disabled={systemActionBusy || user.role === "admin"} + > + {user.is_blocked ? "Restore Magent access" : "Block Magent access"} + </button> + <p> + Disable access also disables invitations this user created and attempts an account notification + email. Jellyfin is matched by username. Seerr relies on Jellyfin sign-in; its account is not + directly banned. Restoring access does not reactivate invitations. + </p> + <div className="admin-inline-actions"> + <button + type="button" + className="ghost-button" + onClick={() => void runSystemAction(user.is_blocked ? "unban" : "ban")} + disabled={systemActionBusy || user.role === "admin"} + > + {systemActionBusy + ? "Working..." + : user.is_blocked + ? "Restore Magent and Jellyfin access" + : "Disable Magent and Jellyfin access"} + </button> + <button + type="button" + className="ghost-button" + onClick={() => void runSystemAction("remove")} + disabled={systemActionBusy || user.role === "admin"} + > + Delete Magent, Jellyfin and Seerr accounts + </button> + </div> + <p> + Deletion removes the Magent account and local login activity, attempts to delete the same-name + Jellyfin account and linked Seerr account, and disables issued invitations. It cannot be undone + here. Media files and Jellystat history are not deleted. External actions can partially fail. + </p> + </section> + </div> + </dialog> + </div> + )} + </section> + </AdminShell> + ); +} diff --git a/frontend/app/users/page.tsx b/frontend/app/users/page.tsx new file mode 100644 index 0000000..86d766a --- /dev/null +++ b/frontend/app/users/page.tsx @@ -0,0 +1,604 @@ +"use client"; + +import { useCallback, useEffect, useRef, useState } from "react"; +import { useRouter } from "next/navigation"; +import Link from "next/link"; +import { authFetch, clearToken, getApiBase, getToken } from "../lib/auth"; +import AdminShell from "../ui/AdminShell"; +import "./users.css"; +import FeatureControls from "./FeatureControls"; +import IdentityReviewPanel from "../admin/identities/IdentityReviewPanel"; + +type AdminUser = { + id: number; + username: string; + email?: string | null; + role: string; + authProvider?: string | null; + lastLoginAt?: string | null; + isBlocked?: boolean; + autoSearchEnabled?: boolean; + inviteManagementEnabled?: boolean; + profileId?: number | null; + expiresAt?: string | null; + isExpired?: boolean; + stats?: UserStats; +}; + +type UserStats = { + total: number; + ready: number; + pending: number; + approved: number; + working: number; + partial: number; + declined: number; + in_progress: number; + last_request_at?: string | null; +}; + +const formatLastLogin = (value?: string | null) => { + if (!value) return "Never"; + const date = new Date(value); + if (Number.isNaN(date.valueOf())) return value; + return date.toLocaleString(); +}; + +const formatLastRequest = (value?: string | null) => { + if (!value) return "—"; + const date = new Date(value); + if (Number.isNaN(date.valueOf())) return value; + return date.toLocaleString(); +}; + +const formatExpiry = (value?: string | null) => { + if (!value) return "Never"; + const date = new Date(value); + if (Number.isNaN(date.valueOf())) return value; + return date.toLocaleString(); +}; + +const normalizeStats = (stats: Record<string, unknown> | null | undefined): UserStats => ({ + total: Number(stats?.total ?? 0), + ready: Number(stats?.ready ?? 0), + pending: Number(stats?.pending ?? 0), + approved: Number(stats?.approved ?? 0), + working: Number(stats?.working ?? 0), + partial: Number(stats?.partial ?? 0), + declined: Number(stats?.declined ?? 0), + in_progress: Number(stats?.in_progress ?? 0), + last_request_at: typeof stats?.last_request_at === "string" ? stats.last_request_at : null, +}); + +export default function UsersPage() { + const router = useRouter(); + const [view, setView] = useState("directory"); + useEffect(() => { + const update = () => + setView(new URLSearchParams(window.location.search).get("view") === "identities" ? "identities" : "directory"); + update(); + window.addEventListener("popstate", update); + return () => window.removeEventListener("popstate", update); + }, []); + const changeView = (next: string) => { + setView(next); + window.history.pushState(null, "", next === "identities" ? "/users?view=identities" : "/users"); + }; + const [controlsOpen, setControlsOpen] = useState(false); + const controlsDialog = useRef<HTMLDialogElement>(null); + const controlsTrigger = useRef<HTMLButtonElement>(null); + const controlsClose = useRef<HTMLButtonElement>(null); + const [refreshing, setRefreshing] = useState(false); + const [users, setUsers] = useState<AdminUser[]>([]); + const [error, setError] = useState<string | null>(null); + const [loading, setLoading] = useState(true); + const [query, setQuery] = useState(""); + const [jellyseerrSyncStatus, setJellyseerrSyncStatus] = useState<string | null>(null); + const [jellyseerrSyncBusy, setJellyseerrSyncBusy] = useState(false); + const [jellyseerrResyncBusy, setJellyseerrResyncBusy] = useState(false); + const [bulkAutoSearchBusy, setBulkAutoSearchBusy] = useState(false); + + const loadUsers = useCallback(async () => { + setRefreshing(true); + try { + const baseUrl = getApiBase(); + const response = await authFetch(`${baseUrl}/admin/users/summary`); + if (!response.ok) { + if (response.status === 401) { + clearToken(); + router.push("/login"); + return; + } + if (response.status === 403) { + router.push("/"); + return; + } + throw new Error("Could not load users."); + } + const data = await response.json(); + if (Array.isArray(data?.users)) { + setUsers( + data.users.map((user: Record<string, unknown>) => ({ + username: typeof user.username === "string" ? user.username : "Unknown", + email: typeof user.email === "string" ? user.email : null, + role: typeof user.role === "string" ? user.role : "user", + authProvider: typeof user.auth_provider === "string" ? user.auth_provider : "local", + lastLoginAt: typeof user.last_login_at === "string" ? user.last_login_at : null, + isBlocked: Boolean(user.is_blocked), + autoSearchEnabled: Boolean(user.auto_search_enabled ?? true), + inviteManagementEnabled: Boolean(user.invite_management_enabled), + profileId: + user.profile_id == null || Number.isNaN(Number(user.profile_id)) ? null : Number(user.profile_id), + expiresAt: typeof user.expires_at === "string" ? user.expires_at : null, + isExpired: Boolean(user.is_expired), + id: Number(user.id ?? 0), + stats: normalizeStats( + user.stats && typeof user.stats === "object" ? (user.stats as Record<string, unknown>) : null, + ), + })), + ); + } else { + setUsers([]); + } + setError(null); + } catch (err) { + console.error(err); + setError("Could not load user list."); + } finally { + setLoading(false); + setRefreshing(false); + } + }, [router]); + + const syncJellyseerrUsers = async () => { + setJellyseerrSyncStatus(null); + setJellyseerrSyncBusy(true); + try { + const baseUrl = getApiBase(); + const response = await authFetch(`${baseUrl}/admin/jellyseerr/users/sync`, { + method: "POST", + }); + if (!response.ok) { + const text = await response.text(); + throw new Error(text || "Sync failed"); + } + const data = await response.json(); + setJellyseerrSyncStatus( + `Checked ${data?.total ?? 0} Seerr records against Jellyfin IDs. Added ${data?.imported ?? 0} users; existing settings retained.`, + ); + await loadUsers(); + } catch (err) { + console.error(err); + setJellyseerrSyncStatus("Could not sync Seerr users."); + } finally { + setJellyseerrSyncBusy(false); + } + }; + + const resyncJellyseerrUsers = async () => { + setJellyseerrSyncStatus(null); + setJellyseerrResyncBusy(true); + try { + const baseUrl = getApiBase(); + const response = await authFetch(`${baseUrl}/admin/jellyseerr/users/resync`, { + method: "POST", + }); + if (!response.ok) { + const text = await response.text(); + throw new Error(text || "Resync failed"); + } + const data = await response.json(); + setJellyseerrSyncStatus( + `Reconciled service identities. Added ${data?.imported ?? 0} new users; existing accounts and settings were retained.`, + ); + await loadUsers(); + } catch (err) { + console.error(err); + setJellyseerrSyncStatus("Could not resync Seerr users."); + } finally { + setJellyseerrResyncBusy(false); + } + }; + + const bulkUpdateAutoSearch = async (enabled: boolean) => { + setBulkAutoSearchBusy(true); + setJellyseerrSyncStatus(null); + try { + const baseUrl = getApiBase(); + const response = await authFetch(`${baseUrl}/admin/users/auto-search/bulk`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ enabled }), + }); + if (!response.ok) { + const text = await response.text(); + throw new Error(text || "Bulk update failed"); + } + const data = await response.json(); + setJellyseerrSyncStatus( + `${enabled ? "Enabled" : "Disabled"} auto search/download for ${data?.updated ?? 0} non-admin users.`, + ); + await loadUsers(); + } catch (err) { + console.error(err); + setError("Could not update auto search/download for all users."); + } finally { + setBulkAutoSearchBusy(false); + } + }; + + useEffect(() => { + if (!getToken()) { + router.push("/login"); + return; + } + void loadUsers(); + }, [loadUsers, router]); + + useEffect(() => { + if (!controlsOpen) return; + const dialog = controlsDialog.current; + dialog?.showModal(); + controlsClose.current?.focus(); + const previous = document.body.style.overflow; + document.body.style.overflow = "hidden"; + return () => { + dialog?.close(); + document.body.style.overflow = previous; + controlsTrigger.current?.focus(); + }; + }, [controlsOpen]); + + const controlsBusy = refreshing || jellyseerrSyncBusy || jellyseerrResyncBusy || bulkAutoSearchBusy; + + if (loading) { + return <main className="card">Loading users...</main>; + } + + const nonAdminUsers = users.filter((user) => user.role !== "admin"); + const autoSearchEnabledCount = nonAdminUsers.filter((user) => user.autoSearchEnabled !== false).length; + const blockedCount = users.filter((user) => user.isBlocked).length; + const expiredCount = users.filter((user) => user.isExpired).length; + const adminCount = users.filter((user) => user.role === "admin").length; + const normalizedQuery = query.trim().toLowerCase(); + const filteredUsers = normalizedQuery + ? users.filter((user) => { + const fields = [ + user.username, + user.email || "", + user.role, + user.authProvider || "", + user.profileId != null ? String(user.profileId) : "", + ]; + return fields.some((field) => field.toLowerCase().includes(normalizedQuery)); + }) + : users; + const filteredCountLabel = + filteredUsers.length === users.length + ? `${users.length} users` + : `${filteredUsers.length} of ${users.length} users`; + const usersRail = ( + <div className="admin-rail-stack"> + <div className="admin-rail-card users-rail-summary"> + <div className="user-directory-panel-header"> + <div> + <h2>Directory summary</h2> + <p className="lede">A quick view of user access and account state.</p> + </div> + </div> + <div className="users-summary-grid"> + <div className="users-summary-card"> + <div className="users-summary-row"> + <span className="users-summary-label">Total users</span> + <strong className="users-summary-value">{users.length}</strong> + </div> + <p className="users-summary-meta">{adminCount} admin accounts</p> + </div> + <div className="users-summary-card"> + <div className="users-summary-row"> + <span className="users-summary-label">Auto search</span> + <strong className="users-summary-value">{autoSearchEnabledCount}</strong> + </div> + <p className="users-summary-meta">of {nonAdminUsers.length} non-admin users enabled</p> + </div> + <div className="users-summary-card"> + <div className="users-summary-row"> + <span className="users-summary-label">Blocked</span> + <strong className="users-summary-value">{blockedCount}</strong> + </div> + <p className="users-summary-meta">{blockedCount ? "Accounts currently blocked" : "No blocked users"}</p> + </div> + <div className="users-summary-card"> + <div className="users-summary-row"> + <span className="users-summary-label">Expired</span> + <strong className="users-summary-value">{expiredCount}</strong> + </div> + <p className="users-summary-meta">{expiredCount ? "Accounts with expired access" : "No expiries"}</p> + </div> + </div> + </div> + </div> + ); + + return ( + <AdminShell + title="User management" + subtitle="Accounts, access, request activity and verified service links." + actions={ + <button + ref={controlsTrigger} + type="button" + className="ghost-button" + aria-haspopup="dialog" + aria-expanded={controlsOpen} + aria-controls="user-management-dialog" + onClick={() => setControlsOpen(true)} + > + Manage users + </button> + } + > + <dialog + id="user-management-dialog" + ref={controlsDialog} + className="user-management-dialog" + aria-labelledby="user-management-title" + onCancel={() => setControlsOpen(false)} + onClose={() => setControlsOpen(false)} + > + <div className="user-management-content"> + <header className="user-management-heading"> + <div> + <span className="users-page-toolbar-label">Directory tools</span> + <h2 id="user-management-title">Manage users</h2> + <p>Account links, service sync and permissions for your user directory.</p> + </div> + <button ref={controlsClose} type="button" className="ghost-button" onClick={() => setControlsOpen(false)}> + Close + </button> + </header> + {error && ( + <p className="error-banner" role="alert"> + {error} + </p> + )} + {jellyseerrSyncStatus && ( + <p className="status-banner" role="status"> + {jellyseerrSyncStatus} + </p> + )} + <div className="user-management-grid"> + <section className="user-management-panel"> + <h3>Directory actions</h3> + <p>Review linked accounts, manage invitations or refresh the list.</p> + <div className="user-management-action"> + <Link className="ghost-button" href="/users?view=identities" aria-describedby="identity-help"> + Review account links ↗ + </Link> + <p id="identity-help">Compare and confirm each user's Magent, Jellyfin, Jellystat and Seerr IDs.</p> + </div> + <div className="user-management-action"> + <Link className="ghost-button" href="/admin/invites" aria-describedby="invitation-help"> + Manage invitations ↗ + </Link> + <p id="invitation-help">Create invitations, review issued links and set invitation defaults.</p> + </div> + <div className="user-management-action"> + <button + type="button" + className="ghost-button" + onClick={() => void loadUsers()} + disabled={controlsBusy} + aria-describedby="reload-help" + > + {refreshing ? "Refreshing…" : "Refresh user list"} + </button> + <p id="reload-help"> + Reload account status and request totals from Magent. Your search stays in place. + </p> + </div> + </section> + <section className="user-management-panel"> + <h3>Seerr sync</h3> + <p>Connect existing Magent accounts to their Seerr request accounts.</p> + <div className="user-management-action"> + <button + type="button" + onClick={() => void syncJellyseerrUsers()} + disabled={controlsBusy} + aria-describedby="sync-help" + > + {jellyseerrSyncBusy ? "Matching accounts…" : "Match unlinked Seerr accounts"} + </button> + <p id="sync-help"> + Match users without a saved Seerr ID by their account name, then copy the matching Seerr ID and + available email into Magent. Already-linked users are skipped. + </p> + </div> + <details className="user-management-advanced"> + <summary>Reconcile service identities</summary> + <p id="resync-help"> + Refreshes Jellyfin and Seerr accounts using their shared Jellyfin ID. Preserves account settings and + history. Duplicate or conflicting links stay available for reviewed repair. + </p> + <button + type="button" + className="ghost-button" + onClick={() => void resyncJellyseerrUsers()} + disabled={controlsBusy} + aria-describedby="resync-help" + > + {jellyseerrResyncBusy ? "Reconciling identities…" : "Reconcile Jellyfin and Seerr"} + </button> + </details> + </section> + <section className="user-management-panel"> + <h3>Automatic search & download</h3> + <p>Allow users to trigger automatic searches and downloads for their requests.</p> + <span className="user-management-count"> + {autoSearchEnabledCount} of {nonAdminUsers.length} non-admin users enabled + </span> + <p id="auto-search-help"> + Applies to every existing non-admin account, including accounts outside your search results. Use an + individual user's page to change just their access. + </p> + <div className="user-management-buttons"> + <button + type="button" + onClick={() => void bulkUpdateAutoSearch(true)} + disabled={controlsBusy || !nonAdminUsers.length || autoSearchEnabledCount === nonAdminUsers.length} + aria-describedby="auto-search-help" + > + Enable for all non-admin users + </button> + <button + type="button" + className="ghost-button" + onClick={() => void bulkUpdateAutoSearch(false)} + disabled={controlsBusy || !autoSearchEnabledCount} + aria-describedby="auto-search-help" + > + Disable for all non-admin users + </button> + </div> + </section> + <FeatureControls onSaved={() => void loadUsers()} /> + </div> + <details className="user-management-summary"> + <summary>Directory totals</summary> + {usersRail} + </details> + </div> + </dialog> + <nav className="identity-selection" aria-label="User management sections"> + <button + type="button" + className="ghost-button" + aria-pressed={view === "directory"} + onClick={() => changeView("directory")} + > + User directory + </button> + <button + type="button" + className="ghost-button" + aria-pressed={view === "identities"} + onClick={() => changeView("identities")} + > + Account links & repairs + </button> + </nav> + {view === "identities" ? ( + <IdentityReviewPanel /> + ) : ( + <section className="admin-section users-directory-centered"> + {!controlsOpen && error && ( + <p className="error-banner" role="alert"> + {error} + </p> + )} + {!controlsOpen && jellyseerrSyncStatus && ( + <p className="status-banner" role="status"> + {jellyseerrSyncStatus} + </p> + )} + <div className="admin-panel user-directory-search-panel"> + <div className="user-directory-panel-header"> + <div> + <h2>Directory search</h2> + <p className="lede"> + Find an account by username, email, role, login provider or profile ID. Select a user to manage their + access. + </p> + </div> + <span className="small-pill">{filteredCountLabel}</span> + </div> + <div className="user-directory-toolbar"> + <div className="user-directory-search"> + <label> + <span className="user-bulk-label">Search users</span> + <input + value={query} + onChange={(event) => setQuery(event.target.value)} + placeholder="Search username, email, role, login provider or profile ID…" + /> + </label> + </div> + </div> + </div> + {filteredUsers.length === 0 ? ( + <div className="status-banner" role="status"> + {normalizedQuery + ? "No users match your search. Try another name or email." + : "No users found yet. Open Manage users to review the directory tools."} + </div> + ) : ( + <div className="user-directory-list"> + <div className="user-directory-header"> + <span>User</span> + <span>Access</span> + <span>Requests</span> + <span>Activity</span> + </div> + {filteredUsers.map((user) => ( + <Link key={user.username} className="user-directory-row" href={`/users/${user.id}`}> + <div className="user-directory-cell user-directory-cell--identity"> + <div className="user-directory-title-row"> + <strong>{user.username}</strong> + <span className="user-grid-meta">{user.role}</span> + </div> + <div className="user-directory-subtext">{user.email || "No email on file"}</div> + <div className="user-directory-subtext"> + Login: {user.authProvider || "local"} • Profile: {user.profileId ?? "None"} + </div> + </div> + <div className="user-directory-cell"> + <div className="user-directory-pill-row"> + <span className={`user-grid-pill ${user.isBlocked ? "is-blocked" : ""}`}> + {user.isBlocked ? "Blocked" : "Active"} + </span> + <span className={`user-grid-pill ${user.autoSearchEnabled === false ? "is-disabled" : ""}`}> + Auto {user.autoSearchEnabled === false ? "Off" : "On"} + </span> + <span className={`user-grid-pill ${user.isExpired ? "is-blocked" : ""}`}> + {user.expiresAt ? (user.isExpired ? "Expired" : "Expiry set") : "No expiry"} + </span> + </div> + <div className="user-directory-subtext"> + {user.expiresAt ? `Expires: ${formatExpiry(user.expiresAt)}` : "No account expiry"} + </div> + </div> + <div className="user-directory-cell"> + <div className="user-directory-stats-inline"> + <span> + <strong>{user.stats?.total ?? 0}</strong> total + </span> + <span> + <strong>{user.stats?.ready ?? 0}</strong> ready + </span> + <span> + <strong>{user.stats?.pending ?? 0}</strong> pending + </span> + <span> + <strong>{user.stats?.in_progress ?? 0}</strong> in progress + </span> + </div> + </div> + <div className="user-directory-cell"> + <div className="user-directory-subtext">Last login: {formatLastLogin(user.lastLoginAt)}</div> + <div className="user-directory-subtext"> + Last request: {formatLastRequest(user.stats?.last_request_at)} + </div> + </div> + <div className="user-directory-row-chevron" aria-hidden="true"> + Open + </div> + </Link> + ))} + </div> + )} + </section> + )} + </AdminShell> + ); +} diff --git a/frontend/app/users/users.css b/frontend/app/users/users.css new file mode 100644 index 0000000..1e7a851 --- /dev/null +++ b/frontend/app/users/users.css @@ -0,0 +1,52 @@ +.users-directory-centered { width: 100%; max-width: 1280px; margin: 0 auto; min-width: 0; } +.user-management-dialog { position: fixed; inset: 0; width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; padding: 0; margin: auto; border: 1px solid var(--ops-line); border-radius: 16px; background: var(--ops-panel, #1c1b1d); color: var(--ops-text, #eee8f2); box-shadow: 0 24px 90px #0009; } +.user-management-dialog::backdrop { background: #000a; backdrop-filter: blur(4px); } +.user-management-content { padding: 28px; } +.user-management-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding-bottom: 12px; background: var(--ops-panel, #1c1b1d); box-shadow: 0 -28px 0 var(--ops-panel, #1c1b1d); } +.user-management-heading h2 { margin: 8px 0; font-size: 26px; } +.user-management-heading > button { flex-shrink: 0; } +.user-management-dialog p { color: var(--ops-muted, #bdb6c3); font-size: 13px; line-height: 1.7; margin: 8px 0 16px; } +.user-management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } +.user-management-panel { min-width: 0; padding: 22px; border: 1px solid var(--ops-line); border-radius: 12px; background: #ffffff02; } +.user-management-panel h3 { margin: 0 0 10px; font-size: 17px; } +.user-management-action + .user-management-action { border-top: 1px solid var(--ops-line); padding-top: 16px; } +.user-management-action p { margin-top: 10px; font-size: 12px; } +.user-management-action a { display: inline-flex; text-decoration: none; } +.user-management-buttons { display: flex; flex-wrap: wrap; gap: 10px; } +.user-management-dialog button, .user-management-dialog a.ghost-button { max-width: 100%; white-space: normal; line-height: 1.5; } +.user-management-count { display: block; font-size: 12px; color: #c7bdff; margin: 14px 0; } +.user-management-advanced { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--ops-line); } +.user-management-advanced summary, .user-management-summary > summary { cursor: pointer; font-size: 13px; color: var(--ops-text); padding: 8px 0; } +.user-management-advanced button { border-color: #d4a38f70; color: #edc7b8; } +.user-management-summary { border-top: 1px solid var(--ops-line); margin-top: 24px; padding-top: 12px; } +.user-management-summary .admin-rail-stack { margin-top: 14px; } +@media (min-width: 1000px) { + .users-directory-centered .user-directory-header, .users-directory-centered .user-directory-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.1fr) 64px; } + .users-directory-centered .user-directory-row-chevron { justify-self: end; } +} +@media (max-width: 700px) { + .user-management-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); } + .user-management-content { padding: 20px 16px; } + .user-management-grid { grid-template-columns: 1fr; } + .user-management-panel { padding: 18px; } + .user-management-heading h2 { font-size: 22px; } +} + +/* Individual profiles use the directory's modal management pattern. */ +.user-detail-page-grid.user-detail-centered { display: block; width: min(100%, 1100px); margin-inline: auto; } +.user-detail-centered .user-detail-main-column { display: flex; flex-direction: column; gap: 24px; } +.user-detail-centered .user-detail-main-column > :nth-child(2) { order: -1; } +.user-detail-centered .user-detail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } +.feature-controls { margin-bottom: 20px; } +.feature-access-row { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--border, #34343c); cursor: pointer; } +.feature-access-row input { flex: 0 0 auto; margin-top: 4px; width: 18px; height: 18px; accent-color: #c4b5fd; } +.feature-access-row span { display: grid; gap: 5px; } +.feature-access-row small { color: var(--text-muted, #a9a9ba); line-height: 1.5; } +.feature-controls .admin-inline-actions { margin-top: 20px; } +.user-management-panel.user-management-danger { margin-top: 24px; border: 1px solid #a84049; background: #321b2080; } +.user-management-danger h3 { color: #ff9ca6; } +.user-management-danger button { border-color: #a84049; color: #ffb6bd; background: #441e27; } +.user-management-danger p { margin-block: 16px; line-height: 1.6; } +@media (max-width: 640px) { + .user-detail-centered .user-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} diff --git a/frontend/app/welcome.css b/frontend/app/welcome.css new file mode 100644 index 0000000..6d62da8 --- /dev/null +++ b/frontend/app/welcome.css @@ -0,0 +1,21 @@ +.welcome-page, .friendly-guide { width: min(100%, 1040px); margin: 40px auto; color: var(--ops-text); } +.welcome-page > header { text-align: center; margin-bottom: 32px; } +.welcome-kicker { color: var(--ops-cyan); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } +.welcome-page h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.15; margin: 16px 0; } +.welcome-page p, .friendly-guide p { color: var(--ops-muted); line-height: 1.65; } +.welcome-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } +.welcome-choice { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; gap: 16px; background: var(--ops-panel); border: 1px solid var(--ops-line); border-radius: 16px; text-decoration: none; color: inherit; } +.welcome-choice h2, .welcome-choice p { margin: 0; } +.welcome-choice strong { color: var(--ops-primary-2); margin-top: auto; padding-top: 16px; } +a.welcome-choice:hover { border-color: var(--ops-cyan); background: var(--ops-panel-2); } +.welcome-icon { color: var(--ops-cyan); font-size: 36px; line-height: 1; } +.welcome-page footer { text-align: center; margin-top: 28px; color: var(--ops-muted); } +.welcome-page a:focus-visible, .friendly-guide a:focus-visible, .friendly-guide summary:focus-visible { outline: 3px solid var(--ops-cyan); outline-offset: 5px; } +.friendly-guide > nav { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; } +.friendly-guide details { border: 1px solid var(--ops-line); border-radius: 12px; background: var(--ops-panel); margin: 12px 0; padding: 20px 24px; } +.friendly-guide summary { font-weight: 700; font-size: 19px; cursor: pointer; } +.friendly-guide ol { padding-left: 24px; } +.friendly-guide li { padding: 8px 0 8px 8px; line-height: 1.6; } +.friendly-guide li p { margin: 4px 0; } +.friendly-guide > footer { padding: 20px 0; } +@media (max-width: 640px) { .welcome-choices { grid-template-columns: 1fr; } .welcome-page, .friendly-guide { margin: 24px auto; } .welcome-choice { padding: 24px; } } diff --git a/frontend/app/welcome/page.tsx b/frontend/app/welcome/page.tsx new file mode 100644 index 0000000..5f84b46 --- /dev/null +++ b/frontend/app/welcome/page.tsx @@ -0,0 +1,89 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { authFetch, clearToken, getApiBase } from "../lib/auth"; +import "../welcome.css"; + +export default function WelcomePage() { + const [ready, setReady] = useState(false); + const [url, setUrl] = useState<string | null>(null); + const [error, setError] = useState(""); + useEffect(() => { + const controller = new AbortController(); + void (async () => { + try { + const response = await authFetch(`${getApiBase()}/site/info`, { signal: controller.signal }); + if (response.status === 401) { + clearToken(); + window.location.replace("/login"); + return; + } + if (!response.ok) throw new Error("Unavailable"); + const data = await response.json(); + const candidate = data.mediaServerUrl ? new URL(data.mediaServerUrl) : null; + if (candidate && ["https:", "http:"].includes(candidate.protocol) && !candidate.username && !candidate.password) + setUrl(candidate.href); + setReady(true); + } catch { + if (!controller.signal.aborted) setError("We couldn’t load your welcome page. Please try again."); + } + })(); + return () => controller.abort(); + }, []); + return ( + <main className="welcome-page"> + <header> + <span className="welcome-kicker">Your media + Magent</span> + <h1>Make yourself at home.</h1> + <p>Something to watch, or something to sort out?</p> + </header> + {error ? ( + <div role="alert"> + <p>{error}</p> + <button type="button" onClick={() => window.location.reload()}> + Try again + </button>{" "} + <a href="/login">Back to sign in</a> + </div> + ) : !ready ? ( + <p role="status">Getting things ready…</p> + ) : ( + <div className="welcome-choices"> + {url ? ( + <a className="welcome-choice" href={url}> + <span className="welcome-icon" aria-hidden="true"> + ▷ + </span> + <h2>Open Jellyfin</h2> + <p>Find your next favourite. Watch movies and TV shows.</p> + <strong> + Let’s watch <span aria-hidden="true">→</span> + </strong> + </a> + ) : ( + <section className="welcome-choice"> + <span className="welcome-icon" aria-hidden="true"> + ▷ + </span> + <h2>Open Jellyfin</h2> + <p>The watch link hasn’t been set up yet. Please ask an admin to add the public playback URL.</p> + </section> + )} + <a className="welcome-choice" href="/"> + <span className="welcome-icon" aria-hidden="true"> + ☷ + </span> + <h2>View stats & requests</h2> + <p>Check your viewing stats, follow your requests, or make a new one.</p> + <strong> + Open Magent <span aria-hidden="true">→</span> + </strong> + </a> + </div> + )} + <footer> + First time here? <a href="/how-it-works">Here’s how it works</a>. + </footer> + </main> + ); +} diff --git a/frontend/app/workspace.css b/frontend/app/workspace.css new file mode 100644 index 0000000..124c4b4 --- /dev/null +++ b/frontend/app/workspace.css @@ -0,0 +1,168 @@ +/* Shared page rhythm. Feature styles own their content, not the outer shell. */ +.page > main:not(.login-page), +.admin-shell.admin-shell--top-nav { + width: calc(100% - var(--workspace-gutter) * 2); + max-width: var(--workspace-width) !important; + margin: 32px auto 0; + padding: 0; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; + animation: none; +} +.page > main:not(.login-page) { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: var(--workspace-gap); + align-content: start; +} +.admin-shell.admin-shell--top-nav { display: block; } +.admin-shell--top-nav > .admin-card { grid-template-columns: minmax(0, 1fr); gap: var(--workspace-gap); border-radius: 0 !important; animation: none; } +.admin-card > * { min-width: 0; } +.admin-card .admin-section, .invite-admin-stack { grid-template-columns: minmax(0, 1fr); min-width: 0; } +.admin-section > *, .invite-admin-stack > * { min-width: 0; } +.page > .site-banner, .page > .user-view-banner { + width: calc(100% - var(--workspace-gutter) * 2); + max-width: var(--workspace-width); + margin: 16px auto 0; + border-radius: 8px; +} +.header { border-radius: 0 !important; } + +/* A single, calm heading treatment across every workspace page. */ +.page-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + min-width: 0; + margin: 0; + padding: 0 0 24px; + border: 0; + border-bottom: 1px solid var(--ops-line-soft); + border-radius: 0; + background: transparent; + box-shadow: none; +} +.page-heading-main { display: flex; align-items: center; gap: 18px; min-width: 0; } +.page-heading-copy { display: grid; gap: 8px; min-width: 0; } +.page-heading h1 { + margin: 0; + color: var(--ops-text); + font: 700 clamp(26px, 2.5vw, 32px)/1.2 "DM Sans", "Segoe UI", sans-serif; + text-transform: none; + overflow-wrap: anywhere; +} +.page-heading-copy > p { margin: 0; max-width: 64ch; color: var(--ops-muted); font-size: 14px; line-height: 1.6; } +.page-heading-eyebrow { color: var(--ops-faint); font: 11px "JetBrains Mono", monospace; } +.page-heading-leading { flex-shrink: 0; } +.page-heading-leading .request-poster { display: block; width: 60px; height: 90px; margin: 0; border-radius: 8px; object-fit: cover; } +.page-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; min-width: 0; flex-shrink: 0; max-width: 50%; } +.page-heading-actions .lede { margin: 0; } +.page-heading { grid-column: 1 / -1; } +.page > main.issue-portal-page { grid-template-columns: minmax(0, 1fr) minmax(310px, 360px); } +.issue-reports-column { top: 80px; height: calc(100dvh - 104px); } +.page-heading-meta { color: var(--ops-faint); font-size: 13px; } +.page-heading .home-search { width: min(440px, 100%); } +.page-heading .home-search > label { font: 500 12px "DM Sans", sans-serif; text-transform: none; } +.page-heading .home-search-row { grid-template-columns: minmax(0, 1fr) auto; } + +/* Keep small forms readable without moving their page title off the shared grid. */ +.account-page > .account-tabs, .account-page > .account-panel { width: 100%; max-width: 920px; margin: 0; } +.feedback-form { width: 100%; max-width: 760px; } +.feedback-form label:not(:first-child) { margin-top: 12px; } +.feedback-form :is(select, textarea) { width: 100%; min-width: 0; padding: 12px; border-radius: 8px; font-size: 14px; } +.feedback-form button[type=submit] { justify-self: start; margin-top: 12px; } +.how-page > .how-flow, .changelog-page > .changelog-groups { width: 100%; max-width: 1120px; } +.how-flow > h2 { margin: 0 0 16px; font-size: 20px; } +.how-card { background: var(--ops-panel); border-color: var(--ops-line); border-radius: 12px; box-shadow: none; } +.how-card p { margin: 0; color: var(--ops-muted); line-height: 1.7; } +.changelog-group { padding: 24px; border: 1px solid var(--ops-line); border-radius: 12px; background: var(--ops-panel); } +.changelog-group:first-child { padding-top: 24px; border-top: 1px solid var(--ops-line); } +.changelog-group h2 { font-size: 18px; } +.changelog-list { margin-bottom: 0; color: var(--ops-muted); line-height: 1.7; } + +/* Shared hierarchy: readable form labels, restrained section titles and corners. */ +:is(.request-flow-heading, .issue-flow-heading, .invite-flow-heading, .home-section-heading, .request-journey-heading) h2 { font-size: 21px; line-height: 1.3; } +:is(.request-flow-stage, .issue-flow, .issue-reports-column, .invite-flow-step, .profile-invites-list, .account-panel) { border-radius: 12px; } +.invites-page > .profile-invites-section { margin: 0; padding: 0; border: 0; background: transparent !important; } +.invites-page .invite-flow-heading > div > .eyebrow { display: none; } +.invites-page .profile-invites-list { margin-top: 12px; padding: 20px; border: 1px solid var(--ops-line); } +.invite-flow-fields label > span:first-child, .invite-flow-field-grid label > span:first-child { font-size: 13px; text-transform: none; } +.invite-admin-tabbar .admin-segmented { flex-wrap: wrap; width: auto; max-width: 100%; } +.invite-admin-tabbar .admin-segmented { padding: 0; gap: 4px 18px; border: 0; border-bottom: 1px solid var(--ops-line-soft); border-radius: 0; background: transparent; } +.invite-admin-tabbar .admin-segmented button { min-height: 44px; padding: 10px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0 !important; background: transparent !important; color: var(--ops-muted); } +.invite-admin-tabbar .admin-segmented button[aria-selected=true] { border-bottom-color: #c7bdff; color: #dedaff; } +.invite-operations-strip > button { justify-content: stretch; justify-items: start; border-color: var(--ops-line) !important; background: var(--ops-panel) !important; } +.invite-operations-strip > button:hover { border-color: var(--ops-primary-2) !important; } +.request-stage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } +.request-stage-grid > .request-stage { grid-column: auto; } +:is(.request-flow-stage, .issue-flow, .profile-invites-section, .admin-card) label:not(.setting-switch) { + font-family: "DM Sans", "Segoe UI", sans-serif; + font-size: 13px; + text-transform: none; +} +:is(.request-flow-stage, .issue-flow, .profile-invites-section, .admin-card) label > span { text-transform: none; } +:is(.request-flow-stage, .issue-flow, .profile-invites-section) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { border-radius: 8px; font: 14px/1.5 "DM Sans", sans-serif; } +:is(.request-flow-stage, .issue-flow, .profile-invites-section) input:not([type=checkbox]):not([type=radio]), +:is(.request-flow-stage, .issue-flow, .profile-invites-section) select { min-height: 44px; } +.auth-flow-form > label { display: grid; gap: 8px; } +.auth-flow-form > label:not(:first-child) { margin-top: 10px; } +.auth-flow-form .auth-actions { display: grid; margin-top: 12px; } +.auth-flow-form .invite-lookup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } +.auth-flow-form .invite-lookup-row button { font-size: 12px; padding: 10px; } +.auth-flow-form .invite-summary { background: var(--ops-panel-2); padding: 14px; border: 1px solid var(--ops-line); border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; } +.auth-invite-details { font-size: 12px; color: var(--ops-muted); margin-top: 10px; } +.auth-invite-details summary { cursor: pointer; } +.auth-invite-details .admin-meta-row { margin-top: 10px; } +.page main button[type=submit]:not(.ghost-button), +.page .request-submit-bar > button, +.page .issue-resolution-card > button { + min-height: 42px; + padding: 11px 18px; + border-color: #c7bdff !important; + border-radius: 8px; + background: #c7bdff !important; + color: #1c172c !important; + font: 700 13px "DM Sans", sans-serif; + text-transform: none; + box-shadow: none; +} +.page main button[type=submit]:disabled { opacity: .4; } +.page button.danger-button { border-color: #86464f !important; background: #361f25 !important; color: #ffc0c5 !important; } +.page :is(button, input, select, textarea) { font-family: "DM Sans", "Segoe UI", sans-serif; } +.page :focus-visible { outline: 2px solid #c7bdff; outline-offset: 3px; } +.login-card { border-radius: 12px; } +.login-card header p { line-height: 1.6; } +.login-card .status-banner { font-size: 13px; line-height: 1.6; } + +@media (max-width: 1100px) { + .page > main.issue-portal-page { grid-template-columns: minmax(0, 1fr); } + .issue-reports-column { height: auto; } + .request-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} + +@media (max-width: 980px) { + .page-heading { flex-wrap: wrap; align-items: flex-start; gap: 18px; } + .page-heading-actions { justify-content: flex-start; max-width: 100%; } + .home-page .page-heading-actions { width: 100%; } + .page-heading .home-search { width: 100%; } +} +@media (max-width: 680px) { + .workspace-mobile-nav { padding-inline: 4px; gap: 0; } + .workspace-mobile-nav a { min-width: 0; flex: 1; padding-inline: 3px; } + :root { --workspace-gutter: 16px; --workspace-gap: 20px; } + .page > main:not(.login-page), .admin-shell.admin-shell--top-nav { margin-top: 24px; } + .page-heading { padding-bottom: 20px; } + .page-heading-copy > p { font-size: 13px; } + .page-heading-main { gap: 14px; } + .page-heading-leading .request-poster { width: 48px; height: 72px; } + .page-heading-actions > .admin-inline-actions { flex-wrap: wrap; } + .changelog-group { padding: 20px; } + .request-stage-grid { grid-template-columns: minmax(0, 1fr); } + .invite-operations-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} +@media (prefers-reduced-motion: reduce) { + .page *, .page *::before, .page *::after { animation: none !important; scroll-behavior: auto !important; } +} diff --git a/frontend/biome.json b/frontend/biome.json new file mode 100644 index 0000000..1b7d97b --- /dev/null +++ b/frontend/biome.json @@ -0,0 +1,29 @@ +{ + "$schema": "https://biomejs.dev/schemas/2.5.6/schema.json", + "files": { + "includes": ["app/**/*.{ts,tsx}", "next.config.js", "!node_modules", "!.next"] + }, + "formatter": { + "enabled": true, + "indentStyle": "space", + "indentWidth": 2, + "lineWidth": 120 + }, + "linter": { + "enabled": true, + "rules": { + "preset": "recommended", + "correctness": { + "useExhaustiveDependencies": "error" + }, + "performance": { + "noImgElement": "off" + }, + "suspicious": { + "noArrayIndexKey": "off", + "noDocumentCookie": "off", + "noExplicitAny": "error" + } + } + } +} diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts new file mode 100644 index 0000000..ce4e94a --- /dev/null +++ b/frontend/next-env.d.ts @@ -0,0 +1,7 @@ +/// <reference types="next" /> +/// <reference types="next/image-types/global" /> +import "./.next/types/routes.d.ts"; +import "./.next/types/root-params.d.ts"; + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/frontend/next.config.js b/frontend/next.config.js new file mode 100644 index 0000000..da1ce3f --- /dev/null +++ b/frontend/next.config.js @@ -0,0 +1,43 @@ +const backendUrl = process.env.BACKEND_INTERNAL_URL || "http://backend:8000"; + +/** @type {import('next').NextConfig} */ +const nextConfig = { + output: "standalone", + poweredByHeader: false, + compress: true, + // API rewrites clone bodies even when excluded from proxy.ts's matcher. + // Match the backend restore envelope cap (32 MiB backup + multipart margin). + experimental: { proxyTimeout: 180000, proxyClientMaxBodySize: 34 * 1024 * 1024 }, + async headers() { + return [ + { + source: "/:path*", + headers: [ + { key: "Strict-Transport-Security", value: "max-age=31536000; includeSubDomains" }, + { key: "X-Content-Type-Options", value: "nosniff" }, + { key: "X-Frame-Options", value: "DENY" }, + { key: "Referrer-Policy", value: "no-referrer" }, + { key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" }, + ], + }, + { + source: "/login", + headers: [{ key: "Cache-Control", value: "private, no-store, max-age=0" }], + }, + ]; + }, + async rewrites() { + return [ + { + source: "/favicon.ico", + destination: `${backendUrl}/branding/favicon.ico`, + }, + { + source: "/api/:path*", + destination: `${backendUrl}/:path*`, + }, + ]; + }, +}; + +module.exports = nextConfig; diff --git a/frontend/package-lock.json b/frontend/package-lock.json new file mode 100644 index 0000000..cec6d4b --- /dev/null +++ b/frontend/package-lock.json @@ -0,0 +1,2326 @@ +{ + "name": "magent-frontend", + "version": "0803262237", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "magent-frontend", + "version": "0803262237", + "dependencies": { + "next": "16.3.5", + "react": "19.2.4", + "react-dom": "19.2.4" + }, + "devDependencies": { + "@biomejs/biome": "2.5.6", + "@types/node": "24.11.0", + "@types/react": "19.2.14", + "@types/react-dom": "19.2.3", + "typescript": "5.9.3", + "vitest": "5.0.1" + } + }, + "node_modules/@biomejs/biome": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.5.6.tgz", + "integrity": "sha512-lxVNjv7UF6KfhMJfL9gaUHbWdJdHbsAj6OSmwSYNdhRuG67NxNQ4Xdvh3TUxsSK9sBzJBQhEJj3AopmmNJ5pSA==", + "dev": true, + "license": "MIT OR Apache-2.0", + "bin": { + "biome": "bin/biome" + }, + "engines": { + "node": ">=14.21.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/biome" + }, + "optionalDependencies": { + "@biomejs/cli-darwin-arm64": "2.5.6", + "@biomejs/cli-darwin-x64": "2.5.6", + "@biomejs/cli-linux-arm64": "2.5.6", + "@biomejs/cli-linux-arm64-musl": "2.5.6", + "@biomejs/cli-linux-x64": "2.5.6", + "@biomejs/cli-linux-x64-musl": "2.5.6", + "@biomejs/cli-win32-arm64": "2.5.6", + "@biomejs/cli-win32-x64": "2.5.6" + } + }, + "node_modules/@biomejs/cli-darwin-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.5.6.tgz", + "integrity": "sha512-zMOLZP4oMrjh6m1zcSj1ud2awUPgTuMVbmQhYYWL7J8HwCnbHHBvTm7VBTRuY7epT5bez76IpKYQ11ZAqHFlnw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-darwin-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.5.6.tgz", + "integrity": "sha512-JAC1VqzvO7Th5ZplU0G2uGfkZbxEe9uDDektPAhF0JLusoz1w+T4okp2bkykI0bbaO2vslKiRfj4gU43JaGreA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-linux-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.5.6.tgz", + "integrity": "sha512-6XsYwCFkp5sMxl85ffhgeGpGgs6A7dRYFnkceZ7WVxvycuTnGdD5xa534Z3xfrBQ0JCMK/mujT6ZNPJoghedwg==", + "cpu": [ + "arm64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-linux-arm64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.5.6.tgz", + "integrity": "sha512-eUa3jeeYvfMt19LBeh6E5PUZpxnTC4JqNWo+EDjTtQjAr2xLGnWaxACtVU1DQqmHYbvThlJzLX+ZsYgrqh2qVw==", + "cpu": [ + "arm64" + ], + "dev": true, + "libc": [ + "musl" + ], + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-linux-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.5.6.tgz", + "integrity": "sha512-Pop9VXCFUhFTMfFefZ39S+u2rOPyNp5iHlxbZRwXGACHLy2r0jjiRgJHmaEKJzL3SyxlVeGShXhvvElvWowonA==", + "cpu": [ + "x64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-linux-x64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.5.6.tgz", + "integrity": "sha512-2Vp13QdKysH3HIWLaYLhUUwbK+jbZonJD1K+Lr0d0RO4wH7mkYd43vJixEDm8cUWrowoRz4UUHF1nm9Ae7ym8A==", + "cpu": [ + "x64" + ], + "dev": true, + "libc": [ + "musl" + ], + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-win32-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.5.6.tgz", + "integrity": "sha512-tDGshcm6BdkZOCGnTDX0Y8/U4IfBSlnUU7T56nNDuPEfed+aHg+u8G36NB43fJVl0Os6+QURXIE1yuD7AaEofA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-win32-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.5.6.tgz", + "integrity": "sha512-WN05KwXnTO/2J45RQPvzZMXf7tZUIofHoR35xIPfCo7pQ2RFidxI8sfb5mGsaTxdMmEOzHzOPRCdA5/fCpc7xQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@emnapi/runtime": { + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.3.tgz", + "integrity": "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==", + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@img/colour": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz", + "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==", + "license": "MIT", + "optional": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/@img/sharp-darwin-arm64": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.4.tgz", + "integrity": "sha512-Uhfl4V4lhP2nbUVF9+hyH1+luj86f1gUFeo8ALYxFoULoU+G87D43BfeMP8XHsk9boxAnCY/bf2EHwhA7MuGsA==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-darwin-arm64": "1.3.3" + } + }, + "node_modules/@img/sharp-darwin-x64": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.4.tgz", + "integrity": "sha512-hWniXY3bG5qKpkKrAwPe4y+VTPmf086YQAnkxWh7uA1YrlRouWGa0M0Mxj3ZjnXFkv7/TD1bTy9lGUK26vRvWw==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-darwin-x64": "1.3.3" + } + }, + "node_modules/@img/sharp-freebsd-wasm32": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.4.tgz", + "integrity": "sha512-lIsKw/BU+kjB4eZjxrYrZmwOJYi3Ajrv66iAlBmUPyKc3HpnloevB1g3wxGD9P/5BbQ1brBGl65VRRrCvQDEqA==", + "license": "Apache-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "dependencies": { + "@img/sharp-wasm32": "0.35.4" + }, + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-darwin-arm64": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.3.tgz", + "integrity": "sha512-suTBPTDGrI9WodccaDdwZItTSaBYASlBk1NSfElSHrUfzu3szG6lvIF58+WiFvnfzuK8ZBFS5zE00PxqxnRiPg==", + "cpu": [ + "arm64" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "darwin" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-darwin-x64": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.3.tgz", + "integrity": "sha512-FVJZ5mITMobmXIz/hPDTw0EintTW5H3WfrxwLqEqjiIihlu+hVRyGrFQ60xl0Lxn7Bt3zdpevPaQi0HEzqz9fw==", + "cpu": [ + "x64" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "darwin" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-arm": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.3.tgz", + "integrity": "sha512-3rbU4vqXXc3hY/OiXdl52xZvT0F1yEngWfvqudtPJg/KkyiaQw2DRsFrNzpmLvfavbwOq3qXn36GP8obHRULQA==", + "cpu": [ + "arm" + ], + "libc": [ + "glibc" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-arm64": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.3.tgz", + "integrity": "sha512-0DaL0A6Xu6sQSQFwe4iVCrKWU2cCTItnRsYsCdxAMm9NF6twAA9BKnoqy4hqz4+azQ0JHuA26qiUKsf1XJ/v5A==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-ppc64": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.3.tgz", + "integrity": "sha512-cdn1OvUBwsXhbC0zSzJnNzf5MZ/mTrobawDvNXBTxe8VtqKAm0sRuEY2Evzovb/w9JMk4TvRxqt1mekSuJz64w==", + "cpu": [ + "ppc64" + ], + "libc": [ + "glibc" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-riscv64": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.3.tgz", + "integrity": "sha512-HjPVx7yKz+0lqdhDlTw1tt90wamBoxhiXpvl1XZpJLiHH4RCJ5yDTqH+VlYPv2fwFs89JFw4c1IexYOcQUi4IQ==", + "cpu": [ + "riscv64" + ], + "libc": [ + "glibc" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-s390x": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.3.tgz", + "integrity": "sha512-neWLh+3yCNThxnfy3c4BbVBeGgt9aftno+XbT56iK28RgeDs3UOFWviLWlUu0bArYVYJaFDK+RRohbicUNCm8Q==", + "cpu": [ + "s390x" + ], + "libc": [ + "glibc" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linux-x64": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.3.tgz", + "integrity": "sha512-4vKmvAst9nrowcqquKFAyZJUDolUaIp8uRiN0mWFguJ1IplC9/pitXtlnnlU4aa/eJw3J7i67V+pwUL+wZGdsA==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linuxmusl-arm64": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.3.tgz", + "integrity": "sha512-Y9kQaLMuNoB0bPYOOdcZMaseNrFpPodIWWMrx+CZyydf2xn68j9WYc6sWWRrDwNkzCQjKYfc68L7jKjGlHMibw==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-libvips-linuxmusl-x64": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.3.tgz", + "integrity": "sha512-fj8Mv0HHfD1Rr+4I68+3agJynxDWtBFgicTbSOb9Bke6pIwzGcJ+RX/yHjmiEGFMCavY/dxvem7MyNaJF+wDiw==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "LGPL-3.0-or-later", + "optional": true, + "os": [ + "linux" + ], + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-linux-arm": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.4.tgz", + "integrity": "sha512-7OAS8gI0EReKGVN2HssHlM6umJgxF5VI3xN0p9FA91p/YO+ou5hiNghLdZ5BEHztwaaK5+bLKRf8x/o2L2nk9A==", + "cpu": [ + "arm" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-arm": "1.3.3" + } + }, + "node_modules/@img/sharp-linux-arm64": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.4.tgz", + "integrity": "sha512-De4jpEnAU8Hd5oT0j1G3uL4ZvTuipVMn7YC6vPaJhy6/7EwEae0SVAoBrUMYQbkLGDm85taVWwuPc1a44LTzCQ==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-arm64": "1.3.3" + } + }, + "node_modules/@img/sharp-linux-ppc64": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.4.tgz", + "integrity": "sha512-2oYZJeIl4kCcMGk4ouZVjnkCtFrpQFlNEtJ6GbxzhHQchwH0NH/qEb9ykmOl29dqwMq+JhFdZn+1ak2FKhI9fQ==", + "cpu": [ + "ppc64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-ppc64": "1.3.3" + } + }, + "node_modules/@img/sharp-linux-riscv64": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.4.tgz", + "integrity": "sha512-cPbNChoRURAWdebDIHSenxRpgEdy7JkPydSnUxRm9VvKD7m0/xVaR/8Fzlu81pk5nHEvHH87UZUA7cTtwnbJSA==", + "cpu": [ + "riscv64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-riscv64": "1.3.3" + } + }, + "node_modules/@img/sharp-linux-s390x": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.4.tgz", + "integrity": "sha512-RY0JFY8Fd6RonCBtHz+DvadaPkXDSI1AUn6yWL9TipqkZ1vY8w8evqdgyDFnkm4/K1ve1TvZiaePP5oSd4+WVQ==", + "cpu": [ + "s390x" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-s390x": "1.3.3" + } + }, + "node_modules/@img/sharp-linux-x64": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.4.tgz", + "integrity": "sha512-9qvvEAuk8k89TfWUoX2htWjbAMX8p+NxCppjpcg5k6xMsjhBQPTsoIh36h9Qde4WRuGpJeYnOjdosDn/cnv+OA==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linux-x64": "1.3.3" + } + }, + "node_modules/@img/sharp-linuxmusl-arm64": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.4.tgz", + "integrity": "sha512-KB5jxpfWQTr0nc3xdHtWChdbifHrBGsd2SM62Eyxrl8afikm+f5qGBU75SJIZBT/S1MC8XyacdlXBMSWq6OURA==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linuxmusl-arm64": "1.3.3" + } + }, + "node_modules/@img/sharp-linuxmusl-x64": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.4.tgz", + "integrity": "sha512-f+eZJZIQNEEd26RPSW+76chwOf1XtA2Y/O+5ocVyLliHkeih3e+jhLVBdNTd2rS3IbNXK8+ug93Vf5ZXtF5Lxg==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-libvips-linuxmusl-x64": "1.3.3" + } + }, + "node_modules/@img/sharp-wasm32": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.35.4.tgz", + "integrity": "sha512-zQnl4Kwp7Q6NHsENtU2T/00Zi+w3AQNwz3+UaTyVBy2FpXrzXzGjndpK61onhZjRtRpQXxCTeqw19bVyXOh7jA==", + "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT", + "optional": true, + "dependencies": { + "@emnapi/runtime": "^1.11.3" + }, + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-webcontainers-wasm32": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.4.tgz", + "integrity": "sha512-ESfNkywmCfPNyaZjxooddJQiQ+l/nTpGEOGthxiLnIHXC/CmcBixnfwUleX9mCz9ovrUUvKMap/pm8RYbzfwaA==", + "cpu": [ + "wasm32" + ], + "license": "Apache-2.0", + "optional": true, + "dependencies": { + "@img/sharp-wasm32": "0.35.4" + }, + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-win32-arm64": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.4.tgz", + "integrity": "sha512-iNdlBX9gLVvqe2I3uIJSIKTq6wckP/DYxZtcqxm09x5Gi24DnFBmPAWZmr60ZyYMG0xlzo6goG3670ar+RXvRw==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0 AND LGPL-3.0-or-later", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-win32-ia32": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.4.tgz", + "integrity": "sha512-kqRsbaa5CS6KHlpxnN7WhE6vAAugXyZButpRdvDWetlv6Qv4N9WTcrWzF7tXfB9T7MsoadqdI8hmwLq6UlLvtw==", + "cpu": [ + "ia32" + ], + "license": "Apache-2.0 AND LGPL-3.0-or-later", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@img/sharp-win32-x64": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.4.tgz", + "integrity": "sha512-XtmnYhBcrORsJ4XJngyzr/EWP0hRZLAZRFaApdKuviyqF78+ylxh2y06ZmtULAMOnObJ3ucpN0AcwSWnMowTRg==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0 AND LGPL-3.0-or-later", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz", + "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", + "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@next/env": { + "version": "16.3.5", + "resolved": "https://registry.npmjs.org/@next/env/-/env-16.3.5.tgz", + "integrity": "sha512-NWEXVDMqoEo0ktmU6u0sE2Vg0LOcsD7NnOTJNo3/fEaTfsg+F1bMIxuDmQbda4e3yTIQwVdUREF2yIuMOusKtg==", + "license": "MIT" + }, + "node_modules/@next/swc-darwin-arm64": { + "version": "16.3.5", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.3.5.tgz", + "integrity": "sha512-pMmGgETfKvElucLHtVaeiMRbp2zUbvKx7b1yGko0liBz3cw1mKSggWN/Rp/wPz8z+E1O82u3r4L1Co+ZS5hokQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-darwin-x64": { + "version": "16.3.5", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.3.5.tgz", + "integrity": "sha512-76VaGYvf6HPa5/w12yLkE3dXTn9AfdEviI79oEL3aZoAmRLc9rWitjWqyjViVysK/ht/y9YKzFkBrUdi/wGkow==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "16.3.5", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.3.5.tgz", + "integrity": "sha512-zKDELJ5jSQMHeO/hmXUQsAzagX4bQD4OiMi3pQ5FbUj+yK506oLVHnKA2YXMlbg1EHHqJYtyePOgByIDXD1lqw==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "16.3.5", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.3.5.tgz", + "integrity": "sha512-7Vql0pgzCoHagv6+FNOZoqmJqA52c6zeVbhtS/47qFozO1MSx4ms7x7GHiciY8R5CDsSMKMQjJEryoJLcsBIbA==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "16.3.5", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.3.5.tgz", + "integrity": "sha512-NH/xzehyHEFWE2nlcZon7TB/0+H4shfWCi7S1zka815XCOhJDYZhoeJtOYy0dh0WVRWACVXSyGNFFytoMxUhRg==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "16.3.5", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.3.5.tgz", + "integrity": "sha512-lV4+EhWMfS8jcC+EH2nn/Cm5cn6XsgbE07bU9tMH8fCo0tNAqhyzi1b5wQ/Tn6NGFTvKDY65w3ZH95EjwBRAnQ==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "16.3.5", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.3.5.tgz", + "integrity": "sha512-/wKzAREX2RF++MhicjDbg8tGn2AiBIM0+EFeTFKoUEUbW5D6amCJehd5Z5G1H5/gxNdgnwoXMcHz24H/c2tGkQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "16.3.5", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.3.5.tgz", + "integrity": "sha512-LNdCHzgLFc+UeqMS84LzXPaeBRKyqDN9OMyFAr1OrB0XrNw78IRrEVtZvvA7245W/HsaoeVOQX9jPjPk8jojwA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@oxc-project/types": { + "version": "0.150.0", + "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.150.0.tgz", + "integrity": "sha512-rDS5/31E9HfPl/CIzGrn0DOlvBbXFseQ5URJ9sYMfstbKLD/c6Gm9vmRzRGDdAXyOIL4zmO37lc9RIwYqVruZw==", + "dev": true, + "license": "MIT", + "peer": true, + "funding": { + "url": "https://github.com/sponsors/oxc-project" + } + }, + "node_modules/@rolldown/binding-android-arm-eabi": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.9.tgz", + "integrity": "sha512-tNISae1QEf/vkb3xkRcjV5SEdzPE97We5IVaa2Z8jSszQPZ8U60B/YCYpw4QI7VidYsBtKavczXf+DyDs9WGxw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-android-arm64": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.9.tgz", + "integrity": "sha512-YC8YsI30o606GTZi0VyzYlsDKFP8W61i/QzayHDkLbNEz/IShqAmTa+hsJRj13xTHA0H+6fk4b2UmGn+Q/cMlg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-darwin-arm64": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.9.tgz", + "integrity": "sha512-IwhlH3qK5urrY8hZiEgGkHKEFN901p/p2bjxCxJlr4GyNnF7wYpUvK+Y43uaRYuC4hpfjzbR3SJC3arX1jGvmw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-darwin-x64": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.9.tgz", + "integrity": "sha512-XxpJfVzFh+jilRxIXUqcfYAYcunIc/XEzIizsOL1fcJee5Sf7H3mH8WlLmfHfluz5amqR88QQo9izKtmMlavAw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-freebsd-x64": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.9.tgz", + "integrity": "sha512-kSfvhmgeWyfkbT3p/1s5vSgboogoah2zkm9fX2zjg2hHxSV7T4KhMWRUUaRk4OXNqoD3QAUeRqLcs1aZOK4U1g==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm-gnueabihf": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.9.tgz", + "integrity": "sha512-1RVzG17pxqbTfYLC352JlLt6kKLG+6Hr30n8DlIJqsnV5luUDd2Qdx9Ayw1Cabfyb1K9k0jXEZ7evxkRoT+uiw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm64-gnu": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.9.tgz", + "integrity": "sha512-BXqPvZ2drqVD+/Z8UpKwcs4Mp7grM+eGFku4CAEKrEtcbAsUpzREphK1sogCRZGreVPiMkiiBtw0n3TPteuqvw==", + "cpu": [ + "arm64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm64-musl": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.9.tgz", + "integrity": "sha512-11vWvo8YDwLzukt27J3aYDWU+gg2P7J+ZOmiJ0hkF5BXZDW7pVya7r40MXDy6ya0i9KamoENSVKIugvJNgFXIA==", + "cpu": [ + "arm64" + ], + "dev": true, + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-ppc64-gnu": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.9.tgz", + "integrity": "sha512-a1tijMkdwsIARtc0F39ApURROkf3NwqinI6TOiSSWCTR7dT96dffNvMUtDHnq64wKNTIZOIlzKrFvvFUznJiyw==", + "cpu": [ + "ppc64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-s390x-gnu": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.9.tgz", + "integrity": "sha512-x6SQNdAvv4c3hWqTMaWuawzMX9myaCs/yEmlGsxJzkdClnHW7FbrjQuSiRDhuSYzEYoEMhsaJy9qHG/XNemJPQ==", + "cpu": [ + "s390x" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-x64-gnu": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.9.tgz", + "integrity": "sha512-9s0AZ8BFK5/n7B/TBoa2yJE3gI3KURrbXcPBlsAsvjU4VeJKgE90y1YtNxyEUIcHPQkg6/yfF3qihUrcM/Kf0Q==", + "cpu": [ + "x64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-x64-musl": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.9.tgz", + "integrity": "sha512-P7VWAmV+WdJluH7ovnRGoiv2i8To7GAZ+kGzfGup635cyL7SyYl3lSUaA3Gp5THf0n/Co5EyEqb2zbqq+nMOHQ==", + "cpu": [ + "x64" + ], + "dev": true, + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-openharmony-arm64": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.9.tgz", + "integrity": "sha512-1qixtsE4BK8h+yS3BfmZ09UhA7O/N4IACva6YBr7EBvCJraByTuRcgOTaiA62Tm0vey3UcKXLOaoGHtYmNGEVg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-win32-arm64-msvc": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.9.tgz", + "integrity": "sha512-ok8IQjcEPs1AKZfuEUznVBrJw+gK4soq+bx8b1X2XoMqVClarc1q5JDmVtWXY1xfr6ZuHTAsPXHTgTrqKTZeww==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-win32-x64-msvc": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.9.tgz", + "integrity": "sha512-Ip2mXoU0hM0boq3Rf+ekuT653OROSo6aSYcPT1VHE4q52KvyxgFkQgrgb/IEsxOuvQ2fZZbs8khJAyCEPM24/g==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/pluginutils": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz", + "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==", + "dev": true, + "license": "MIT", + "peer": true + }, + "node_modules/@swc/helpers": { + "version": "0.5.23", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz", + "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.8.0" + } + }, + "node_modules/@types/chai": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz", + "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/deep-eql": "*", + "assertion-error": "^2.0.1" + } + }, + "node_modules/@types/deep-eql": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz", + "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/estree": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/node": { + "version": "24.11.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.11.0.tgz", + "integrity": "sha512-fPxQqz4VTgPI/IQ+lj9r0h+fDR66bzoeMGHp8ASee+32OSGIkeASsoZuJixsQoVef1QJbeubcPBxKk22QVoWdw==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": "~7.16.0" + } + }, + "node_modules/@types/react": { + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", + "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", + "dev": true, + "license": "MIT", + "dependencies": { + "csstype": "^3.2.2" + } + }, + "node_modules/@types/react-dom": { + "version": "19.2.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", + "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "^19.2.0" + } + }, + "node_modules/@vitest/mocker": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-5.0.1.tgz", + "integrity": "sha512-6K1DoBNAPGvuOcSsGA4D6x+5zEEff/KmOOP3uetT2TrGpVfI+HRHRnJJfKi5ib/g1vx8IYHQD8s0pbJz8WQI7Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/trace-mapping": "0.3.31", + "@vitest/spy": "5.0.1", + "estree-walker": "^3.0.3", + "magic-string": "^1.2.3" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "msw": "^2.4.9", + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "msw": { + "optional": true + }, + "vite": { + "optional": true + } + } + }, + "node_modules/@vitest/spy": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-5.0.1.tgz", + "integrity": "sha512-rbto/mF/SGERxEgYOek7Xm6B9b+y+mVoo+f4b2LymYO8zM1b7uB5nHuhVMTP2hxdzgxvGiZYGxGIaMvL5y180Q==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/assertion-error": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz", + "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + } + }, + "node_modules/baseline-browser-mapping": { + "version": "2.11.24", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.24.tgz", + "integrity": "sha512-hYrgxie335U08WqICoGqKRzV1HFXv6zdxwJE4ekCb80CM9a0SVVsN4QPwT67RraRo+9h8IATk6uxHJw7QSkdOg==", + "license": "Apache-2.0", + "bin": { + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001806", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001806.tgz", + "integrity": "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "CC-BY-4.0" + }, + "node_modules/chai": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz", + "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/client-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", + "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", + "license": "MIT" + }, + "node_modules/csstype": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", + "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "devOptional": true, + "license": "Apache-2.0", + "engines": { + "node": ">=8" + } + }, + "node_modules/es-module-lexer": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.2.tgz", + "integrity": "sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==", + "dev": true, + "license": "MIT" + }, + "node_modules/estree-walker": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", + "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "^1.0.0" + } + }, + "node_modules/expect-type": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz", + "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/lightningcss": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz", + "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==", + "dev": true, + "license": "MPL-2.0", + "peer": true, + "dependencies": { + "detect-libc": "^2.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-android-arm64": "1.33.0", + "lightningcss-darwin-arm64": "1.33.0", + "lightningcss-darwin-x64": "1.33.0", + "lightningcss-freebsd-x64": "1.33.0", + "lightningcss-linux-arm-gnueabihf": "1.33.0", + "lightningcss-linux-arm64-gnu": "1.33.0", + "lightningcss-linux-arm64-musl": "1.33.0", + "lightningcss-linux-x64-gnu": "1.33.0", + "lightningcss-linux-x64-musl": "1.33.0", + "lightningcss-win32-arm64-msvc": "1.33.0", + "lightningcss-win32-x64-msvc": "1.33.0" + } + }, + "node_modules/lightningcss-android-arm64": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz", + "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz", + "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz", + "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz", + "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz", + "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz", + "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==", + "cpu": [ + "arm64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz", + "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "libc": [ + "musl" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz", + "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==", + "cpu": [ + "x64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz", + "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==", + "cpu": [ + "x64" + ], + "dev": true, + "libc": [ + "musl" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz", + "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz", + "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/magic-string": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.4.1.tgz", + "integrity": "sha512-8lyCu36ErXR0J9uaGKlKQoiLZKmtI63YGLE8G2o9jyRPdr4X47LusSOwgOJOzcVtp81fTAAjxR7BwKz682Jhow==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.6.0" + } + }, + "node_modules/nanoid": { + "version": "3.3.18", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz", + "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/next": { + "version": "16.3.5", + "resolved": "https://registry.npmjs.org/next/-/next-16.3.5.tgz", + "integrity": "sha512-MdtsTgzyfCPRLC6uJ1mN8ao7lyJ4BB0U6Inhnx3gta1UcCIdHK3yxLG0E8OWQteWD8/Q0qb8A5o7wJaL8M9y2w==", + "license": "MIT", + "dependencies": { + "@next/env": "16.3.5", + "@swc/helpers": "0.5.23", + "baseline-browser-mapping": "^2.9.19", + "caniuse-lite": "^1.0.30001579", + "postcss": "8.5.23", + "styled-jsx": "5.1.6" + }, + "bin": { + "next": "dist/bin/next" + }, + "engines": { + "node": ">=20.9.0" + }, + "optionalDependencies": { + "@next/swc-darwin-arm64": "16.3.5", + "@next/swc-darwin-x64": "16.3.5", + "@next/swc-linux-arm64-gnu": "16.3.5", + "@next/swc-linux-arm64-musl": "16.3.5", + "@next/swc-linux-x64-gnu": "16.3.5", + "@next/swc-linux-x64-musl": "16.3.5", + "@next/swc-win32-arm64-msvc": "16.3.5", + "@next/swc-win32-x64-msvc": "16.3.5", + "sharp": "^0.35.4" + }, + "peerDependencies": { + "@opentelemetry/api": "^1.1.0", + "@playwright/test": "^1.51.1", + "babel-plugin-react-compiler": "*", + "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", + "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", + "sass": "^1.3.0" + }, + "peerDependenciesMeta": { + "@opentelemetry/api": { + "optional": true + }, + "@playwright/test": { + "optional": true + }, + "babel-plugin-react-compiler": { + "optional": true + }, + "sass": { + "optional": true + } + } + }, + "node_modules/obug": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/obug/-/obug-2.2.1.tgz", + "integrity": "sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q==", + "dev": true, + "funding": [ + "https://github.com/sponsors/sxzz", + "https://opencollective.com/debug" + ], + "license": "MIT", + "engines": { + "node": ">=12.20.0" + } + }, + "node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz", + "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/postcss": { + "version": "8.5.28", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz", + "integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.18", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/react": { + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", + "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", + "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", + "license": "MIT", + "dependencies": { + "scheduler": "^0.27.0" + }, + "peerDependencies": { + "react": "^19.2.4" + } + }, + "node_modules/rolldown": { + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.9.tgz", + "integrity": "sha512-hx/Pv0N1haXRb11qkfnK5MXB/iqr7i0yjWQqmO9uHqZpBgQSqzc8UsSnEpalsh+j1I8qQ2CkXAkJC8Br3dKSlg==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "@oxc-project/types": "=0.150.0", + "@rolldown/pluginutils": "^1.0.0" + }, + "bin": { + "rolldown": "bin/cli.mjs" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "optionalDependencies": { + "@rolldown/binding-android-arm-eabi": "1.2.9", + "@rolldown/binding-android-arm64": "1.2.9", + "@rolldown/binding-darwin-arm64": "1.2.9", + "@rolldown/binding-darwin-x64": "1.2.9", + "@rolldown/binding-freebsd-x64": "1.2.9", + "@rolldown/binding-linux-arm-gnueabihf": "1.2.9", + "@rolldown/binding-linux-arm64-gnu": "1.2.9", + "@rolldown/binding-linux-arm64-musl": "1.2.9", + "@rolldown/binding-linux-ppc64-gnu": "1.2.9", + "@rolldown/binding-linux-s390x-gnu": "1.2.9", + "@rolldown/binding-linux-x64-gnu": "1.2.9", + "@rolldown/binding-linux-x64-musl": "1.2.9", + "@rolldown/binding-openharmony-arm64": "1.2.9", + "@rolldown/binding-win32-arm64-msvc": "1.2.9", + "@rolldown/binding-win32-x64-msvc": "1.2.9" + } + }, + "node_modules/scheduler": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "license": "MIT" + }, + "node_modules/semver": { + "version": "7.8.5", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz", + "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==", + "license": "ISC", + "optional": true, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/sharp": { + "version": "0.35.4", + "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.4.tgz", + "integrity": "sha512-n++8XWcj+jCOr2IOl7h8LbKnGBDY4aPbmprMONBNFdn0ImXqpGVv5zliDs0V9HbmbCQLpbuo2ej9rAoOQTvMDA==", + "license": "Apache-2.0", + "optional": true, + "dependencies": { + "@img/colour": "^1.1.0", + "detect-libc": "^2.1.2", + "semver": "^7.8.5" + }, + "engines": { + "node": ">=20.9.0" + }, + "funding": { + "url": "https://opencollective.com/libvips" + }, + "optionalDependencies": { + "@img/sharp-darwin-arm64": "0.35.4", + "@img/sharp-darwin-x64": "0.35.4", + "@img/sharp-freebsd-wasm32": "0.35.4", + "@img/sharp-libvips-darwin-arm64": "1.3.3", + "@img/sharp-libvips-darwin-x64": "1.3.3", + "@img/sharp-libvips-linux-arm": "1.3.3", + "@img/sharp-libvips-linux-arm64": "1.3.3", + "@img/sharp-libvips-linux-ppc64": "1.3.3", + "@img/sharp-libvips-linux-riscv64": "1.3.3", + "@img/sharp-libvips-linux-s390x": "1.3.3", + "@img/sharp-libvips-linux-x64": "1.3.3", + "@img/sharp-libvips-linuxmusl-arm64": "1.3.3", + "@img/sharp-libvips-linuxmusl-x64": "1.3.3", + "@img/sharp-linux-arm": "0.35.4", + "@img/sharp-linux-arm64": "0.35.4", + "@img/sharp-linux-ppc64": "0.35.4", + "@img/sharp-linux-riscv64": "0.35.4", + "@img/sharp-linux-s390x": "0.35.4", + "@img/sharp-linux-x64": "0.35.4", + "@img/sharp-linuxmusl-arm64": "0.35.4", + "@img/sharp-linuxmusl-x64": "0.35.4", + "@img/sharp-webcontainers-wasm32": "0.35.4", + "@img/sharp-win32-arm64": "0.35.4", + "@img/sharp-win32-ia32": "0.35.4", + "@img/sharp-win32-x64": "0.35.4" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/siginfo": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz", + "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==", + "dev": true, + "license": "ISC" + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/stackback": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", + "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==", + "dev": true, + "license": "MIT" + }, + "node_modules/std-env": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz", + "integrity": "sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==", + "dev": true, + "license": "MIT" + }, + "node_modules/styled-jsx": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz", + "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==", + "license": "MIT", + "dependencies": { + "client-only": "0.0.1" + }, + "engines": { + "node": ">= 12.0.0" + }, + "peerDependencies": { + "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "babel-plugin-macros": { + "optional": true + } + } + }, + "node_modules/tinybench": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-6.1.4.tgz", + "integrity": "sha512-9APumHG7r4yOk4X4WlkmE71aZcv1gvin1czO3OQ1U9iJcFA5Ja/ygyb0vPOVHTthFozUYs8CLoLUlM8grb2lTQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20.0.0" + } + }, + "node_modules/tinyexec": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.3.0.tgz", + "integrity": "sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/tinyglobby": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, + "node_modules/typescript": { + "version": "5.9.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", + "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/undici-types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz", + "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==", + "dev": true, + "license": "MIT" + }, + "node_modules/vite": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/vite/-/vite-8.3.0.tgz", + "integrity": "sha512-lhZBVvEHefgE+HQZC9O7EBJgCU/nVzFNl7vkS4RE0APtWLP02/8QVIkQtzBxPquh7lq5/78NHipTj7ODQ6XuyQ==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "lightningcss": "^1.33.0", + "picomatch": "^4.0.7", + "postcss": "^8.5.28", + "rolldown": "~1.2.6", + "tinyglobby": "^0.2.17" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^20.19.0 || >=22.12.0", + "@vitejs/devtools": "^0.7.1", + "esbuild": "^0.27.0 || ^0.28.0", + "jiti": ">=1.21.0", + "less": "^4.0.0", + "sass": "^1.70.0", + "sass-embedded": "^1.70.0", + "stylus": ">=0.54.8", + "sugarss": "^5.0.0", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "@vitejs/devtools": { + "optional": true + }, + "esbuild": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/vitest": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-5.0.1.tgz", + "integrity": "sha512-iA95lQbKEkvrtTkdAgnWbXfbipWiiWe/hDl2P5tMi6WFwD76G0NxXAGp/M9EOcYupeGJRr6wppMc7CoA41TQjg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/chai": "^5.2.2", + "@vitest/mocker": "5.0.1", + "chai": "^6.2.2", + "es-module-lexer": "^2.3.2", + "expect-type": "^1.4.0", + "magic-string": "^1.2.3", + "obug": "^2.1.4", + "picomatch": "^4.0.7", + "std-env": "^4.2.0", + "tinybench": "6.1.4", + "tinyexec": "1.3.0", + "tinyglobby": "^0.2.17", + "why-is-node-running": "^2.3.0" + }, + "bin": { + "vitest": "vitest.mjs" + }, + "engines": { + "node": "^22.12.0 || ^24.0.0 || >=26.0.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "@edge-runtime/vm": "*", + "@opentelemetry/api": "^1.9.0", + "@types/node": "^22.0.0 || >=24.0.0", + "@vitest/browser-playwright": "5.0.1", + "@vitest/browser-preview": "5.0.1", + "@vitest/browser-webdriverio": "^5.0.0-beta.5 || >=5.0.0", + "@vitest/coverage-istanbul": "5.0.1", + "@vitest/coverage-v8": "5.0.1", + "@vitest/ui": "5.0.1", + "happy-dom": "*", + "jsdom": "*", + "vite": "^6.4.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "@edge-runtime/vm": { + "optional": true + }, + "@opentelemetry/api": { + "optional": true + }, + "@types/node": { + "optional": true + }, + "@vitest/browser-playwright": { + "optional": true + }, + "@vitest/browser-preview": { + "optional": true + }, + "@vitest/browser-webdriverio": { + "optional": true + }, + "@vitest/coverage-istanbul": { + "optional": true + }, + "@vitest/coverage-v8": { + "optional": true + }, + "@vitest/ui": { + "optional": true + }, + "happy-dom": { + "optional": true + }, + "jsdom": { + "optional": true + }, + "vite": { + "optional": false + } + } + }, + "node_modules/why-is-node-running": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz", + "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==", + "dev": true, + "license": "MIT", + "dependencies": { + "siginfo": "^2.0.0", + "stackback": "0.0.2" + }, + "bin": { + "why-is-node-running": "cli.js" + }, + "engines": { + "node": ">=8" + } + } + } +} diff --git a/frontend/package.json b/frontend/package.json new file mode 100644 index 0000000..76c55fa --- /dev/null +++ b/frontend/package.json @@ -0,0 +1,33 @@ +{ + "name": "magent-frontend", + "private": true, + "version": "0803262237", + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "biome lint .", + "typecheck": "tsc --noEmit", + "test": "vitest run", + "format": "biome format --write .", + "format:check": "biome format ." + }, + "dependencies": { + "next": "16.3.5", + "react": "19.2.4", + "react-dom": "19.2.4" + }, + "devDependencies": { + "@biomejs/biome": "2.5.6", + "@types/node": "24.11.0", + "@types/react": "19.2.14", + "@types/react-dom": "19.2.3", + "typescript": "5.9.3", + "vitest": "5.0.1" + }, + "overrides": { + "nanoid": "3.3.18", + "postcss": "8.5.28", + "sharp": "0.35.4" + } +} diff --git a/frontend/proxy.test.ts b/frontend/proxy.test.ts new file mode 100644 index 0000000..1685ef2 --- /dev/null +++ b/frontend/proxy.test.ts @@ -0,0 +1,101 @@ +import { NextRequest } from "next/server"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { proxy } from "./proxy"; + +function response(headers: Record<string, string> = {}) { + return proxy(new NextRequest("http://localhost:3000/setup", { headers })); +} + +describe("deployment-aware content security policy", () => { + beforeEach(() => { + vi.stubEnv("NODE_ENV", "production"); + vi.stubEnv("MAGENT_APPLICATION_URL", undefined); + vi.stubEnv("MAGENT_RUNTIME_MANAGED", undefined); + }); + + afterEach(() => vi.unstubAllEnvs()); + + it("keeps HTTPS upgrades enabled by default", () => { + expect(response().headers.get("Content-Security-Policy")).toContain("upgrade-insecure-requests"); + }); + + it("keeps HTTPS upgrades for an explicitly configured HTTPS site", () => { + vi.stubEnv("MAGENT_APPLICATION_URL", "https://magent.example.com"); + expect(response().headers.get("Content-Security-Policy")).toContain("upgrade-insecure-requests"); + }); + + it("allows an unclaimed managed install to load its wizard on HTTP", () => { + vi.stubEnv("MAGENT_RUNTIME_MANAGED", "1"); + expect(response().headers.get("Content-Security-Policy")).not.toContain("upgrade-insecure-requests"); + }); + + it.each(["0", "true", "false", ""])('does not activate managed setup for flag "%s"', (flag) => { + vi.stubEnv("MAGENT_RUNTIME_MANAGED", flag); + expect(response().headers.get("Content-Security-Policy")).toContain("upgrade-insecure-requests"); + }); + + it.each(["https://magent.example.com", "not-a-url", "http://magent.lan/path"])( + "does not let managed mode bypass configured HTTPS or invalid origins: %s", + (origin) => { + vi.stubEnv("MAGENT_RUNTIME_MANAGED", "1"); + vi.stubEnv("MAGENT_APPLICATION_URL", origin); + expect(response().headers.get("Content-Security-Policy")).toContain("upgrade-insecure-requests"); + }, + ); + + it("does not accept a caller-provided managed-mode header", () => { + expect(response({ MAGENT_RUNTIME_MANAGED: "1" }).headers.get("Content-Security-Policy")).toContain( + "upgrade-insecure-requests", + ); + }); + + it.each(["http://192.0.2.10:3000", "http://magent.lan:3000/", "http://[fd00::10]:3000"])( + "supports the operator's explicit HTTP origin %s without upgrading its assets", + (origin) => { + vi.stubEnv("MAGENT_APPLICATION_URL", origin); + expect(response().headers.get("Content-Security-Policy")).not.toContain("upgrade-insecure-requests"); + }, + ); + + it.each([ + "", + "not-a-url", + "http:/magent.lan", + "//magent.lan", + "ftp://magent.lan", + "http://user:password@magent.lan", + "http://magent.lan/path", + "http://magent.lan?query=1", + "http://magent.lan#fragment", + "http://magent.lan\\path", + "http://magent.\tlan", + ])("does not relax HTTPS upgrades for invalid or non-origin configuration %j", (origin) => { + vi.stubEnv("MAGENT_APPLICATION_URL", origin); + expect(response().headers.get("Content-Security-Policy")).toContain("upgrade-insecure-requests"); + }); + + it("does not trust caller-controlled host or forwarding headers to disable upgrades", () => { + const policy = response({ + Host: "magent.lan:3000", + "X-Forwarded-Host": "magent.lan:3000", + "X-Forwarded-Proto": "http", + Forwarded: "host=magent.lan:3000;proto=http", + }).headers.get("Content-Security-Policy"); + expect(policy).toContain("upgrade-insecure-requests"); + }); + + it("preserves nonce propagation and strict production script rules on HTTP", () => { + vi.stubEnv("MAGENT_APPLICATION_URL", "http://magent.lan:3000"); + const first = response(); + const policy = first.headers.get("Content-Security-Policy"); + const nonce = first.headers.get("x-middleware-request-x-nonce"); + expect(nonce).toBeTruthy(); + expect(policy).toContain(`script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`); + expect(policy).not.toContain("'unsafe-eval'"); + expect(policy).toContain("frame-ancestors 'none'"); + expect(policy).toContain("form-action 'self'"); + expect(policy).toContain("connect-src 'self'"); + expect(first.headers.get("x-middleware-request-content-security-policy")).toBe(policy); + expect(response().headers.get("x-middleware-request-x-nonce")).not.toBe(nonce); + }); +}); diff --git a/frontend/proxy.ts b/frontend/proxy.ts new file mode 100644 index 0000000..7e0f48e --- /dev/null +++ b/frontend/proxy.ts @@ -0,0 +1,57 @@ +import { NextRequest, NextResponse } from 'next/server' + +function hasExplicitHttpOrigin(): boolean { + // Allow initial managed setup on a private LAN before the operator claims its + // origin. The entrypoint owns this flag; it is never derived from the request. + // Otherwise only an operator-provided origin may opt into HTTP for a private LAN. + // Never derive this decision from caller-controlled Host/forwarded headers. + const configured = (process.env.MAGENT_APPLICATION_URL || '').trim() + if (!configured && process.env.MAGENT_RUNTIME_MANAGED === '1') return true + if (!/^http:\/\//i.test(configured) || /[\s\\]/.test(configured)) return false + try { + const url = new URL(configured) + return url.protocol === 'http:' && !!url.hostname && !url.username && !url.password + && url.pathname === '/' && !url.search && !url.hash + } catch { + return false + } +} + +export function proxy(request: NextRequest) { + const nonce = Buffer.from(crypto.randomUUID()).toString('base64') + const developmentEval = process.env.NODE_ENV === 'development' ? " 'unsafe-eval'" : '' + const csp = [ + "default-src 'self'", + "base-uri 'self'", + "object-src 'none'", + "frame-ancestors 'none'", + "form-action 'self'", + `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'${developmentEval}`, + "style-src 'self' 'unsafe-inline'", + "img-src 'self' data: blob: https:", + "font-src 'self' data:", + "connect-src 'self'", + "worker-src 'self' blob:", + "manifest-src 'self'", + ...(hasExplicitHttpOrigin() ? [] : ['upgrade-insecure-requests']), + ].join('; ') + + const requestHeaders = new Headers(request.headers) + requestHeaders.set('x-nonce', nonce) + requestHeaders.set('Content-Security-Policy', csp) + const response = NextResponse.next({ request: { headers: requestHeaders } }) + response.headers.set('Content-Security-Policy', csp) + return response +} + +export const config = { + matcher: [ + { + source: '/((?!api|_next/static|_next/image|favicon.ico|branding/).*)', + missing: [ + { type: 'header', key: 'next-router-prefetch' }, + { type: 'header', key: 'purpose', value: 'prefetch' }, + ], + }, + ], +} diff --git a/frontend/public/branding-icon.svg b/frontend/public/branding-icon.svg new file mode 100644 index 0000000..a21a07f --- /dev/null +++ b/frontend/public/branding-icon.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> + <defs> + <linearGradient id="magentIconGlow" x1="0" y1="0" x2="1" y2="1"> + <stop offset="0%" stop-color="#ff6b2b"/> + <stop offset="100%" stop-color="#ffa84b"/> + </linearGradient> + </defs> + <rect width="64" height="64" rx="14" fill="#0e1624"/> + <path + d="M18 50V14h8l6 11 6-11h8v36h-8V32l-6 10-6-10v18h-8z" + fill="url(#magentIconGlow)" + /> +</svg> diff --git a/frontend/public/branding-logo.svg b/frontend/public/branding-logo.svg new file mode 100644 index 0000000..802dca7 --- /dev/null +++ b/frontend/public/branding-logo.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"> + <defs> + <linearGradient id="magentGlow" x1="0" y1="0" x2="1" y2="1"> + <stop offset="0%" stop-color="#ff6b2b"/> + <stop offset="100%" stop-color="#ffa84b"/> + </linearGradient> + </defs> + <rect width="300" height="300" rx="56" fill="#0e1624"/> + <rect x="24" y="24" width="252" height="252" rx="44" fill="#121d31"/> + <path + d="M80 220V80h28l42 70 42-70h28v140h-28v-88l-42 66-42-66v88H80z" + fill="url(#magentGlow)" + /> +</svg> diff --git a/frontend/public/service-icons/radarr.svg b/frontend/public/service-icons/radarr.svg new file mode 100644 index 0000000..1ee8b33 --- /dev/null +++ b/frontend/public/service-icons/radarr.svg @@ -0,0 +1,7 @@ +<svg width="1024" height="1024" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> + <g transform="translate(70 21.00012)"> + <path d="M105.302 154.943L112.824 869.492C52.651 877.014 7.52158 846.927 7.52158 786.755L0 192.55C0 4.51106 172.996-40.6184 278.298 34.5974L812.33 342.982C887.546 395.633 902.589 493.413 864.981 561.107 857.46 508.456 834.895 478.37 789.765 448.284L188.039 109.813C142.91 79.7268 105.302 87.2484 105.302 154.943Z" fill="#24292E"/> + <path d="M0 376.079C45.1295 391.122 90.259 383.6 127.867 361.036L744.636 0C782.244 52.651 774.723 105.302 729.593 135.388L210.604 436.251C135.388 473.859 37.6079 436.251 0 376.079Z" transform="translate(60.17249 531.0214)" fill="#24292E"/> + <path d="M0 413.687L368.557 203.083 7.52157 0 0 413.687Z" transform="translate(240.6902 282.8092)" fill="#FFC230"/> + </g> +</svg> diff --git a/frontend/public/service-icons/sonarr.svg b/frontend/public/service-icons/sonarr.svg new file mode 100644 index 0000000..563b44f --- /dev/null +++ b/frontend/public/service-icons/sonarr.svg @@ -0,0 +1,9 @@ +<svg height="216.9" viewBox="0 0 216.7 216.9" width="216.7" xmlns="http://www.w3.org/2000/svg"> + <path clip-rule="evenodd" d="M216.7 108.45c0 29.833-10.533 55.4-31.6 76.7-.7.833-1.483 1.6-2.35 2.3-3.466 3.4-7.133 6.484-11 9.25-18.267 13.467-39.367 20.2-63.3 20.2-23.967 0-45.033-6.733-63.2-20.2-4.8-3.4-9.3-7.25-13.5-11.55-16.367-16.266-26.417-35.167-30.15-56.7-.733-4.2-1.217-8.467-1.45-12.8-.1-2.4-.15-4.8-.15-7.2 0-2.533.05-4.95.15-7.25 0-.233.066-.467.2-.7 1.567-26.6 12.033-49.583 31.4-68.95C53.05 10.517 78.617 0 108.45 0c29.933 0 55.484 10.517 76.65 31.55 21.067 21.433 31.6 47.067 31.6 76.9z" fill="#EEE" fill-rule="evenodd"/> + <path clip-rule="evenodd" d="M194.65 42.5l-22.4 22.4C159.152 77.998 158 89.4 158 109.5c0 17.934 2.852 34.352 16.2 47.7 9.746 9.746 19 18.95 19 18.95-2.5 3.067-5.2 6.067-8.1 9-.7.833-1.483 1.6-2.35 2.3-2.533 2.5-5.167 4.817-7.9 6.95l-17.55-17.55c-15.598-15.6-27.996-17.1-48.6-17.1-19.77 0-33.223 1.822-47.7 16.3-8.647 8.647-18.55 18.6-18.55 18.6-3.767-2.867-7.333-6.034-10.7-9.5-2.8-2.8-5.417-5.667-7.85-8.6 0 0 9.798-9.848 19.15-19.2 13.852-13.853 16.1-29.916 16.1-47.85 0-17.5-2.874-33.823-15.6-46.55-8.835-8.836-21.05-21-21.05-21 2.833-3.6 5.917-7.067 9.25-10.4 2.934-2.867 5.934-5.55 9-8.05L61.1 43.85C74.102 56.852 90.767 60.2 108.7 60.2c18.467 0 35.077-3.577 48.6-17.1 8.32-8.32 19.3-19.25 19.3-19.25 2.9 2.367 5.733 4.933 8.5 7.7 3.467 3.533 6.65 7.183 9.55 10.95z" fill="#3A3F51" fill-rule="evenodd"/> + <g clip-rule="evenodd"> + <path d="M78.7 114c-.2-1.167-.332-2.35-.4-3.55-.032-.667-.05-1.333-.05-2 0-.7.018-1.367.05-2 0-.067.018-.133.05-.2.435-7.367 3.334-13.733 8.7-19.1 5.9-5.833 12.984-8.75 21.25-8.75 8.3 0 15.384 2.917 21.25 8.75 5.834 5.934 8.75 13.033 8.75 21.3 0 8.267-2.916 15.35-8.75 21.25-.2.233-.416.45-.65.65-.966.933-1.982 1.783-3.05 2.55-5.065 3.733-10.916 5.6-17.55 5.6s-12.466-1.866-17.5-5.6c-1.332-.934-2.582-2-3.75-3.2-4.532-4.5-7.316-9.734-8.35-15.7z" fill="#0CF" fill-rule="evenodd"/> + <path d="M157.8 59.75l-15 14.65M30.785 32.526L71.65 73.25m84.6 84.25l27.808 28.78m1.855-153.894L157.8 59.75m-125.45 126l27.35-27.4" fill="none" stroke="#0CF" stroke-miterlimit="1" stroke-width="2"/> + <path d="M157.8 59.75l-16.95 17.2M58.97 60.604l17.2 17.15M59.623 158.43l16.75-17.4m61.928-1.396l18.028 17.945" fill="none" stroke="#0CF" stroke-miterlimit="1" stroke-width="7"/> + </g> +</svg> diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json new file mode 100644 index 0000000..3a213e9 --- /dev/null +++ b/frontend/tsconfig.json @@ -0,0 +1,30 @@ +{ + "compilerOptions": { + "target": "ES2019", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": false, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "react-jsx", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] + }, + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts", + ".next/dev/types/**/*.ts" + ], + "exclude": ["node_modules"] +} diff --git a/pyproject.toml b/pyproject.toml new file mode 100644 index 0000000..8c5aa5e --- /dev/null +++ b/pyproject.toml @@ -0,0 +1,15 @@ +[tool.ruff] +target-version = "py314" +line-length = 120 + +[tool.ruff.lint] +select = ["E4", "E7", "E9", "F"] + +[tool.coverage.run] +branch = true +source = ["backend/app"] + +[tool.coverage.report] +show_missing = true +skip_covered = true +fail_under = 45 diff --git a/scripts/check_environment_docs.py b/scripts/check_environment_docs.py new file mode 100644 index 0000000..4ee53e2 --- /dev/null +++ b/scripts/check_environment_docs.py @@ -0,0 +1,132 @@ +"""Check the environment reference against source without importing application settings. + +Only tracked-source locations are inspected. Deployment .env files, process +environment values and runtime data are never opened or evaluated. +""" + +import ast +from dataclasses import dataclass +import json +from pathlib import Path +import re +import sys + + +ROOT = Path(__file__).resolve().parents[1] +ENV_NAME = re.compile(r"[A-Z][A-Z0-9_]*\Z") + + +@dataclass(frozen=True) +class Setting: + names: tuple[str, ...] + default: str + + +def settings_inventory(source: str) -> list[Setting]: + tree = ast.parse(source.lstrip("\ufeff")) + settings = next(node for node in tree.body if isinstance(node, ast.ClassDef) and node.name == "Settings") + result = [] + for node in settings.body: + if not isinstance(node, ast.AnnAssign) or not isinstance(node.target, ast.Name): + continue + name = node.target.id + names = (name.upper(),) + default = node.value + if isinstance(default, ast.Call): + arguments = {keyword.arg: keyword.value for keyword in default.keywords} + alias = arguments.get("validation_alias") + if isinstance(alias, ast.Constant): + names = (alias.value,) + elif isinstance(alias, ast.Call): + names = tuple(ast.literal_eval(argument) for argument in alias.args) + default = arguments.get("default") + if isinstance(default, ast.Name): + value = "@" + default.id + else: + value = json.dumps(ast.literal_eval(default), ensure_ascii=True) + result.append(Setting(names, value)) + return result + + +def python_environment_names(source: str) -> set[str]: + names = set() + for node in ast.walk(ast.parse(source.lstrip("\ufeff"))): + argument = None + if isinstance(node, ast.Call) and isinstance(node.func, ast.Attribute) and node.args: + receiver = ast.unparse(node.func.value) + if (node.func.attr == "getenv" and receiver == "os") or ( + node.func.attr == "get" and receiver in {"os.environ", "environ", "environment", "prepared"} + ): + argument = node.args[0] + elif isinstance(node, ast.Subscript) and ast.unparse(node.value) in { + "os.environ", "environ", "environment", "prepared" + }: + argument = node.slice + if isinstance(argument, ast.Constant) and isinstance(argument.value, str) and ENV_NAME.fullmatch(argument.value): + names.add(argument.value) + return names + + +def runtime_environment_names(root: Path) -> set[str]: + names = set() + sources = [*root.glob("backend/app/**/*.py"), *root.glob("scripts/*.py")] + for path in sources: + names.update(python_environment_names(path.read_text(encoding="utf-8"))) + + javascript = [*root.glob("frontend/app/**/*.ts"), *root.glob("frontend/app/**/*.tsx"), + *root.glob("scripts/*.cjs"), root / "frontend/proxy.ts", root / "frontend/next.config.js"] + for path in javascript: + if ".test." not in path.name: + names.update(re.findall(r"process\.env\.([A-Z][A-Z0-9_]*)", path.read_text(encoding="utf-8"))) + + deployment = [*root.glob("*compose*.yml"), *root.glob("scripts/*.sh"), *root.glob("scripts/*.ps1"), + *root.glob(".gitea/workflows/*.yml")] + for path in deployment: + source = path.read_text(encoding="utf-8") + names.update(re.findall(r"\$\{([A-Z][A-Z0-9_]*)", source)) + names.update(re.findall(r"\$env:([A-Z][A-Z0-9_]*)", source)) + names.update(re.findall(r"secrets\.([A-Z][A-Z0-9_]*)", source)) + # These are shell syntax/builtins, not Magent configuration options. + names.difference_update({"BASH_SOURCE", "HOME", "RANDOM"}) + + dockerfile = (root / "Dockerfile").read_text(encoding="utf-8").replace("\\\n", " ") + for line in dockerfile.splitlines(): + if line.startswith(("ENV ", "ARG ")): + names.update(re.findall(r"\b([A-Z][A-Z0-9_]*)=", line)) + supervisor = (root / "docker/supervisord.conf").read_text(encoding="utf-8") + for line in supervisor.splitlines(): + if line.startswith("environment="): + names.update(re.findall(r"\b([A-Z][A-Z0-9_]*)=", line)) + return names + + +def check_documentation(root: Path = ROOT) -> tuple[list[str], int]: + document = (root / "docs/ENVIRONMENT.md").read_text(encoding="utf-8") + documented = set(re.findall(r"`([A-Z][A-Z0-9_]*)`", document)) + settings = settings_inventory((root / "backend/app/config.py").read_text(encoding="utf-8")) + required = runtime_environment_names(root) | {name for setting in settings for name in setting.names} + errors = [f"Undocumented environment variable: {name}" for name in sorted(required - documented)] + defaults = {} + for line in document.splitlines(): + cells = line.split("|") + if len(cells) >= 4 and cells[1].strip().startswith("`"): + for name in re.findall(r"`([A-Z][A-Z0-9_]*)`", cells[1]): + defaults[name] = cells[2].strip().strip("`") + for setting in settings: + for name in setting.names: + if name in documented and defaults.get(name) != setting.default: + errors.append(f"Stale source default for {name}: expected {setting.default!r}, documented {defaults.get(name)!r}") + return errors, len(required) + + +def main() -> int: + errors, count = check_documentation() + if errors: + print("\n".join(errors), file=sys.stderr) + return 1 + print(f"Environment documentation covers {count} source-declared variables; Settings defaults match.") + return 0 + + +if __name__ == "__main__": + raise SystemExit(main()) diff --git a/scripts/ci_backend_quality_gate.sh b/scripts/ci_backend_quality_gate.sh new file mode 100644 index 0000000..f070906 --- /dev/null +++ b/scripts/ci_backend_quality_gate.sh @@ -0,0 +1,27 @@ +#!/usr/bin/env bash +set -euo pipefail + +repo_root="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)" +cd "$repo_root" + +python_bin="${PYTHON_BIN:-python3}" + +echo "Installing backend Python requirements and quality tools" +"$python_bin" -m pip install -r backend/requirements-dev.txt + +echo "Running Python dependency integrity check" +"$python_bin" -m pip check + +echo "Auditing Python production dependencies" +"$python_bin" -m pip_audit -r backend/requirements.txt --progress-spinner off +"$python_bin" -m pip_audit -r docker/requirements-runtime.txt --progress-spinner off + +echo "Linting backend application code" +"$python_bin" -m ruff check backend/app scripts/container_smoke.py scripts/check_environment_docs.py backend/tests/test_container_packaging.py backend/tests/test_container_bootstrap.py backend/tests/test_managed_setup_origin.py backend/tests/test_environment_docs.py + +echo "Running backend unit tests with coverage" +"$python_bin" -m coverage erase +"$python_bin" -m coverage run -m unittest discover -s backend/tests -p "test_*.py" -v +"$python_bin" -m coverage report + +echo "Backend quality gate passed" diff --git a/scripts/ci_container_smoke.sh b/scripts/ci_container_smoke.sh new file mode 100644 index 0000000..08509a5 --- /dev/null +++ b/scripts/ci_container_smoke.sh @@ -0,0 +1,141 @@ +#!/usr/bin/env bash +# No argument preserves the CI build-and-test entry point. Pass an image tag to +# test an already-built release without building, pulling, or publishing it. +set -euo pipefail + +if [ "$#" -gt 1 ]; then + echo "Usage: $0 [existing-image]" >&2 + exit 2 +fi +script_directory="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd)" +repository_directory="$(cd -- "$script_directory/.." && pwd)" +image="${1:-magent:ci}" +size_limit_mb="${MAGENT_IMAGE_MAX_MB:-350}" +managed_mode="${MAGENT_SMOKE_MANAGED:-false}" +if [[ "$managed_mode" != true && "$managed_mode" != false ]]; then + echo "MAGENT_SMOKE_MANAGED must be true or false." >&2 + exit 2 +fi +if ! [[ "$size_limit_mb" =~ ^[1-9][0-9]*$ ]]; then + echo "MAGENT_IMAGE_MAX_MB must be a positive integer (MiB)." >&2 + exit 2 +fi + +container_name="magent-ci-${GITHUB_RUN_ID:-local}-$$-${RANDOM}" +volume_name="${container_name}-data" +network_name="${container_name}-isolated" +container_created=false +volume_created=false +network_created=false +cleanup() { + result=$? + trap - EXIT + if [ "$result" -ne 0 ] && [ "$container_created" = true ]; then + # Only synthetic credentials/data enter this test container. + docker logs --tail 100 "$container_name" >&2 || true + fi + if [ "$container_created" = true ]; then + docker rm -f "$container_name" >/dev/null 2>&1 || true + fi + if [ "$volume_created" = true ]; then + docker volume rm "$volume_name" >/dev/null 2>&1 || true + fi + if [ "$network_created" = true ]; then + docker network rm "$network_name" >/dev/null 2>&1 || true + fi + exit "$result" +} +trap cleanup EXIT + +if [ "$#" -eq 0 ]; then + docker build --tag "$image" "$repository_directory" +fi +image_size="$(docker image inspect --format '{{.Size}}' "$image")" +image_id="$(docker image inspect --format '{{.Id}}' "$image")" +if [ "$image_size" -gt "$((size_limit_mb * 1024 * 1024))" ]; then + echo "Image exceeds ${size_limit_mb} MiB unpacked budget: ${image_size} bytes" >&2 + exit 1 +fi +echo "Image size: ${image_size} bytes (budget ${size_limit_mb} MiB unpacked)" + +# Inspect the image's original filesystem before tmpfs or volume mounts could +# hide accidentally shipped build caches or private files. +docker run --rm --pull never --network none --read-only \ + --cap-drop ALL --security-opt no-new-privileges:true \ + --entrypoint python -i "$image_id" - packaging < "$script_directory/container_smoke.py" + +# An internal network prevents accidental external integration calls. No host +# files, existing volumes, host credentials, or host ports are used. +docker network create --internal "$network_name" >/dev/null +network_created=true +docker volume create "$volume_name" >/dev/null +volume_created=true + +start_container() { + local -a secret_environment + if [ "$managed_mode" = true ]; then + # Exercise the image defaults: no keys, origin or managed-mode variables. + secret_environment=() + else + secret_environment=( + --env JWT_SECRET=ci-only-secret-with-at-least-32-characters + --env SETTINGS_ENCRYPTION_KEY=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA= + --env SETUP_TOKEN=ci-only-setup-token-with-at-least-32-characters + --env AUTH_COOKIE_SECURE=true + --env MAGENT_APPLICATION_URL=https://magent-ci.example.test + ) + fi + docker run --detach --name "$container_name" --pull never \ + --network "$network_name" \ + --read-only --cap-drop ALL --security-opt no-new-privileges:true \ + --pids-limit 256 --memory 1g --cpus 2 \ + --tmpfs /tmp:rw,noexec,nosuid,size=64m,uid=1000,gid=1000 \ + --tmpfs /app/frontend/.next/cache:rw,noexec,nosuid,size=128m,uid=1000,gid=1000 \ + --volume "$volume_name:/app/data" \ + "${secret_environment[@]}" \ + --env ADMIN_PASSWORD= \ + --env AUTH_COOKIE_SAMESITE=strict \ + --env BACKGROUND_TASKS_ENABLED=false \ + --env MAGENT_METRICS_ENABLED=false \ + "$image_id" >/dev/null + container_created=true +} + +wait_for_health() { + local deadline=$((SECONDS + 150)) + local status + while true; do + status="$(docker inspect --format '{{if .State.Health}}{{.State.Health.Status}}{{else}}missing{{end}}' "$container_name")" + if [ "$status" = healthy ]; then + return + fi + if [ "$status" = missing ] || [ "$SECONDS" -ge "$deadline" ]; then + echo "Container did not become healthy within 150 seconds (status: $status)" >&2 + return 1 + fi + if [ "$(docker inspect --format '{{.State.Running}}' "$container_name")" != true ]; then + echo "Container exited before becoming healthy" >&2 + return 1 + fi + sleep 2 + done +} + +# Deliberately no root/chown helper: the image must initialize a fresh named +# volume with correct ownership for its normal non-root runtime user. +start_container +wait_for_health +docker exec -i "$container_name" python - fresh < "$script_directory/container_smoke.py" + +docker restart --time 15 "$container_name" >/dev/null +wait_for_health +docker exec -i "$container_name" python - persisted < "$script_directory/container_smoke.py" + +# Recreation proves database/configuration are in the volume, not merely in the +# container's writable layer. Both test instances use the same immutable image. +docker rm -f "$container_name" >/dev/null +container_created=false +start_container +wait_for_health +docker exec -i "$container_name" python - persisted < "$script_directory/container_smoke.py" +echo "Container smoke passed: fresh install, security headers, assets, login, backup/restore, restart, recreation." diff --git a/scripts/container_smoke.py b/scripts/container_smoke.py new file mode 100644 index 0000000..b90c8fa --- /dev/null +++ b/scripts/container_smoke.py @@ -0,0 +1,340 @@ +"""Disposable-image checks, streamed into the container by ci_container_smoke.sh. + +Uses only Python's standard library. All credentials and configuration below +are synthetic and the caller disables network egress and background workers. +This checks script/asset delivery and CSP compatibility, not browser execution. +""" + +from html.parser import HTMLParser +import hashlib +from http.cookies import SimpleCookie +import json +import os +from pathlib import Path +import re +import secrets +import shutil +import sqlite3 +import subprocess +import sys +from urllib import error, parse, request + + +ORIGIN = "https://magent-ci.example.test" +FRONTEND = "http://127.0.0.1:3000" +SETUP_TOKEN = "ci-only-setup-token-with-at-least-32-characters" +ADMIN_USERNAME = "container-smoke-admin" +ADMIN_PASSWORD = "Container-smoke-owner-password-123456789!" +INTEGRATION_SECRET = "synthetic-container-smoke-integration-key" +LOGIN_MESSAGE = "Welcome to an independent Magent installation" +BACKUP_PASSPHRASE = "Synthetic container backup passphrase only" +CACHE_FIXTURE = Path("/app/data/artwork/tmdb/w342/container-smoke.jpg") +CACHE_CONTENT = b"synthetic artwork cache fixture" + + +def managed_installation() -> bool: + return os.environ.get("MAGENT_MANAGED_SECRETS") in {"true", "auto"} and not os.environ.get("JWT_SECRET") + + +def check(condition: bool, message: str) -> None: + if not condition: + raise AssertionError(message) + + +def http( + path: str, + *, + expected: int = 200, + method: str = "GET", + payload: dict | None = None, + form: dict | None = None, + raw: bytes | None = None, + headers: dict | None = None, + base: str = FRONTEND, +) -> tuple[bytes, object]: + outgoing_headers = {"Origin": ORIGIN, **(headers or {})} + check(sum(value is not None for value in (payload, form, raw)) <= 1, + "HTTP body must use only one encoding") + data = raw + if payload is not None: + data = json.dumps(payload).encode() + outgoing_headers["Content-Type"] = "application/json" + elif form is not None: + data = parse.urlencode(form).encode() + outgoing_headers["Content-Type"] = "application/x-www-form-urlencoded" + probe = request.Request(base + path, data=data, headers=outgoing_headers, method=method) + try: + response = request.urlopen(probe, timeout=30) + except error.HTTPError as exc: + response = exc + with response: + check(response.status == expected, f"{method} {path}: expected {expected}, got {response.status}") + return response.read(), response.headers + + +def api(path: str, **kwargs) -> dict: + body, _ = http("/api" + path, **kwargs) + return json.loads(body) + + +class PageAssets(HTMLParser): + def __init__(self) -> None: + super().__init__() + self.scripts: list[dict] = [] + self.assets: set[str] = set() + + def handle_starttag(self, tag: str, attributes: list) -> None: + values = dict(attributes) + if tag == "script": + self.scripts.append(values) + if values.get("src"): + self.assets.add(values["src"]) + if tag == "link" and values.get("href", "").startswith("/_next/static/"): + self.assets.add(values["href"]) + + +def check_page(path: str, asset_cache: set[str]) -> str: + body, headers = http(path) + check("text/html" in headers.get("Content-Type", ""), f"{path} is not HTML") + policy = headers.get("Content-Security-Policy", "") + match = re.search(r"script-src [^;]*'nonce-([^']+)'", policy) + check(match is not None, f"{path} missing script nonce policy") + nonce = match.group(1) + check("'strict-dynamic'" in policy, f"{path} lost strict-dynamic") + check("'unsafe-eval'" not in policy, f"{path} enables development eval") + check(headers.get("X-Content-Type-Options") == "nosniff", "Missing nosniff header") + check(headers.get("X-Frame-Options") == "DENY", "Missing anti-framing header") + check(headers.get("X-Powered-By") is None, "Frontend exposes its framework") + parsed = PageAssets() + parsed.feed(body.decode()) + executable_scripts = [ + script for script in parsed.scripts + if script.get("type", "").lower() in ("", "module", "text/javascript", "application/javascript") + ] + check(bool(executable_scripts), f"{path} contains no frontend bootstrap scripts") + for script in executable_scripts: + check(script.get("nonce") == nonce, f"{path} contains a script blocked by its CSP nonce") + check(any(asset.startswith("/_next/static/") and ".js" in asset for asset in parsed.assets), + f"{path} contains no static JavaScript assets") + for asset in sorted(parsed.assets - asset_cache): + check(asset.startswith("/_next/static/"), f"Unexpected external executable asset on {path}") + content, asset_headers = http(asset) + check(bool(content), f"Empty static asset: {asset}") + check("text/html" not in asset_headers.get("Content-Type", ""), f"Asset returned HTML: {asset}") + asset_cache.add(asset) + return nonce + + +def check_packaging() -> None: + check(os.getuid() == 1000 and os.getgid() == 1000, "Runtime is not the default non-root UID/GID 1000") + check(Path("/app/frontend/server.js").is_file(), "Missing standalone frontend server") + check(shutil.which("node") == "/usr/local/bin/node", "Node is not the standalone runtime binary") + check(shutil.which("supervisord") == "/usr/local/bin/supervisord", "Missing Python supervisor") + check(shutil.which("curl") is not None, "curl compatibility for existing healthchecks was removed") + for executable in ("npm", "npx", "yarn", "pnpm", "pip", "pip3", "gcc", "g++", "make", "git", "gpg"): + check(shutil.which(executable) is None, f"Unnecessary runtime development tool: {executable}") + for forbidden in ( + "/app/.git", "/app/tests", "/app/app/tests", "/app/backend/tests", + "/app/frontend/app", "/app/frontend/tsconfig.json", "/app/frontend/proxy.ts", + "/app/frontend/node_modules/typescript", "/app/frontend/node_modules/eslint", + "/app/frontend/node_modules/vitest", "/app/frontend/node_modules/@playwright", + "/app/frontend/node_modules/@biomejs", + "/app/frontend/node_modules/@next/swc-linux-x64-gnu", + "/app/frontend/node_modules/@next/swc-linux-arm64-gnu", + "/app/frontend/node_modules/@next/swc-linux-x64-musl", + "/app/frontend/node_modules/@next/swc-linux-arm64-musl", + "/root/.npm", "/root/.cache/pip", "/usr/local/lib/node_modules/npm", + ): + check(not Path(forbidden).exists(), f"Unnecessary build/private artifact: {forbidden}") + for directory in (Path("/app"), Path("/app/frontend")): + check(not any(directory.glob(".env*")), f"Private environment file in {directory}") + check(not Path("/app/data/bootstrap-secrets.json").exists(), "Managed secrets baked into image") + check(not any(Path("/app/frontend/.next/cache").iterdir()), "Frontend build cache shipped in runtime") + check(Path("/usr/share/licenses/magent/LICENSE").is_file(), "Magent license is missing") + check(Path("/usr/local/share/doc/nodejs/LICENSE").is_file(), "Node distribution license is missing") + check(Path("/usr/share/licenses/magent/frontend/dependencies.json").is_file(), + "Frontend dependency inventory is missing") + print("Standalone packaging, non-root runtime and absent development tools/private files: PASS") + + +def check_runtime() -> None: + check(os.getuid() == 1000 and os.getgid() == 1000, "Runtime is not the default non-root UID/GID 1000") + check(Path("/app/data").stat().st_uid == os.getuid(), "Fresh data volume is not owned by runtime user") + check(os.access("/app/data", os.W_OK), "Data volume is not writable") + for path in ("/api/health", "/api/setup/status"): + http(path) + http("/health", base="http://127.0.0.1:8000") + asset_cache: set[str] = set() + first_nonce = check_page("/login", asset_cache) + second_nonce = check_page("/login", asset_cache) + check(first_nonce != second_nonce, "CSP nonce is reused between requests") + check_page("/setup", asset_cache) + # Check the retained curl command because some deployed stacks override the + # image HEALTHCHECK with this exact runtime dependency. + subprocess.run(["curl", "--fail", "--silent", "--show-error", FRONTEND + "/api/health"], + check=True, stdout=subprocess.DEVNULL) + print(f"Runtime, API rewrite, CSP nonce consistency and {len(asset_cache)} static assets: PASS") + + +def check_origin_guards() -> None: + # MAGENT_APPLICATION_URL must permit the public origin even while CORS uses + # its localhost default. Test both direct backend and Next's API rewrite. + for base, prefix in ((FRONTEND, "/api"), ("http://127.0.0.1:8000", "")): + for endpoint in ("/auth/login", "/auth/jellyfin/login"): + for origin, expected in ((ORIGIN, 422), ("https://untrusted.example.test", 403)): + http(prefix + endpoint, base=base, method="POST", form={}, expected=expected, + headers={"Origin": origin}) + print("Both login Origin guards, directly and via frontend: PASS") + + +def sign_in() -> dict: + _, headers = http("/api/auth/login", method="POST", form={ + "username": ADMIN_USERNAME, "password": ADMIN_PASSWORD, + }) + cookies = SimpleCookie() + for raw_cookie in headers.get_all("Set-Cookie", []): + cookies.load(raw_cookie) + check("magent_auth" in cookies, "Local login did not issue an authentication cookie") + auth_cookie = cookies["magent_auth"] + check(bool(auth_cookie["httponly"]), "Authentication cookie missing HttpOnly") + check(bool(auth_cookie["secure"]), "Authentication cookie missing Secure") + check(auth_cookie["samesite"].lower() == "strict", "Authentication cookie missing SameSite=strict") + # These requests traverse HTTP loopback behind the simulated HTTPS public + # origin. Forward only our synthetic cookie explicitly; never print tokens. + authenticated_headers = {"Cookie": "magent_auth=" + auth_cookie.value} + identity = api("/auth/me", headers=authenticated_headers) + check(identity["username"] == ADMIN_USERNAME and identity["role"] == "admin", + "Local administrator identity did not survive login") + return authenticated_headers + + +def check_persisted_settings(headers: dict) -> None: + values = {item["key"]: item for item in api("/admin/settings", headers=headers)["settings"]} + check(values["site_login_message"]["value"] == LOGIN_MESSAGE, "Public configuration did not persist") + check(values["jellyfin_api_key"]["value"] is None and values["jellyfin_api_key"]["isSet"], + "Integration secret is missing or exposed by settings API") + with sqlite3.connect("file:/app/data/magent.db?mode=ro", uri=True) as connection: + check(connection.execute("PRAGMA quick_check").fetchone()[0] == "ok", "SQLite integrity failure") + check(connection.execute("SELECT COUNT(*) FROM users").fetchone()[0] == 1, + "Fresh smoke instance has unexpected users") + stored = connection.execute("SELECT value FROM settings WHERE key = 'jellyfin_api_key'").fetchone() + check(stored is not None and INTEGRATION_SECRET not in str(stored[0]), + "Integration secret was stored without encryption") + + +def backup_restore_upload(content: bytes, passphrase: str) -> tuple[bytes, str]: + boundary = "magent-smoke-" + secrets.token_hex(24) + parts = [] + for name, value in (("passphrase", passphrase), ("confirmation", "RESTORE")): + parts.append((f'--{boundary}\r\nContent-Disposition: form-data; name="{name}"\r\n' + f'\r\n{value}\r\n').encode()) + parts.extend([ + (f'--{boundary}\r\nContent-Disposition: form-data; name="file"; filename="smoke.magent-backup"\r\n' + 'Content-Type: application/octet-stream\r\n\r\n').encode(), + content, + f"\r\n--{boundary}--\r\n".encode(), + ]) + return b"".join(parts), f"multipart/form-data; boundary={boundary}" + + +def stage_backup_roundtrip(headers: dict) -> None: + # All paths and values belong to this disposable CI volume, never real data. + CACHE_FIXTURE.parent.mkdir(parents=True, exist_ok=True) + CACHE_FIXTURE.write_bytes(CACHE_CONTENT) + content, response_headers = http("/api/admin/backups/export", method="POST", headers=headers, + payload={"passphrase": BACKUP_PASSPHRASE, "include_cache": True}) + check(content.startswith(b"MAGENT-BACKUP\x00\x01"), "Backup is not the encrypted portable format") + check(INTEGRATION_SECRET.encode() not in content, "Backup exposed plaintext integration credentials") + check(response_headers.get("Cache-Control") == "no-store", "Backup download is cacheable") + api("/admin/settings", method="PUT", headers=headers, + payload={"site_login_message": "Changed after backup"}) + CACHE_FIXTURE.write_bytes(b"changed after backup") + body, content_type = backup_restore_upload(content, BACKUP_PASSPHRASE) + restored = api("/admin/backups/restore", method="POST", expected=202, raw=body, + headers={**headers, "Content-Type": content_type}) + check(restored["restart_required"], "Restore did not require a restart") + status = api("/admin/backups", headers=headers) + check(status["pending_restore"] is not None, "Backup was not staged") + check(CACHE_FIXTURE.read_bytes() == b"changed after backup", "Restore applied before restart") + print("Encrypted config/database/cache backup and authenticated restore staging: PASS") + + +def fresh_install() -> None: + check(api("/setup/status") == {"setup_required": True, "needs_admin": True}, + "Fresh volume did not open authorized first-install setup") + api("/setup/state", expected=401) + api("/admin/settings", expected=401) + token = SETUP_TOKEN + if managed_installation(): + # docker exec does not inherit the entrypoint's generated environment: + # the console command must read persistent state, not rely on getenv. + token = subprocess.check_output( + [sys.executable, "-m", "app.container_bootstrap", "setup-token"], text=True, + ).strip() + check(len(token) == 64 and token != SETUP_TOKEN, "Managed setup token was not generated") + state_file = Path("/app/data/bootstrap-secrets.json") + check(state_file.stat().st_mode & 0o777 == 0o600, "Managed secrets file is not private") + Path("/app/data/.smoke-managed-digest").write_text(hashlib.sha256(state_file.read_bytes()).hexdigest()) + bootstrap = {"setup_token": token, "username": ADMIN_USERNAME, "password": ADMIN_PASSWORD, + "application_url": ORIGIN} + api("/setup/bootstrap", method="POST", payload=bootstrap, expected=403, + headers={"Origin": "https://untrusted.example.test"}) + api("/setup/bootstrap", method="POST", payload={**bootstrap, "setup_token": "wrong-token"}, expected=403) + api("/setup/bootstrap", method="POST", payload=bootstrap, expected=201) + api("/setup/bootstrap", method="POST", payload=bootstrap, expected=409) + headers = sign_in() + check(api("/setup/state", headers=headers)["step"] == "apps", "Setup did not advance to apps") + updated = api("/admin/settings", method="PUT", headers=headers, payload={ + "site_login_message": LOGIN_MESSAGE, + "jellyfin_api_key": INTEGRATION_SECRET, + }) + check(updated["updated"] == 2, "Setup configuration was not saved") + api("/setup/state", method="PUT", payload={"step": "review"}, headers=headers) + check(api("/setup/complete", method="POST", headers=headers)["completed"], "Setup did not complete") + check(api("/setup/status") == {"setup_required": False, "needs_admin": False}, "Setup remained public") + check_persisted_settings(headers) + print("Token-authorized setup, local admin login, secure cookies and encrypted settings: PASS") + stage_backup_roundtrip(headers) + + +def persisted_install() -> None: + check(api("/setup/status") == {"setup_required": False, "needs_admin": False}, + "Setup reopened after restart/recreation") + api("/setup/bootstrap", method="POST", payload={ + "setup_token": SETUP_TOKEN, "username": "must-not-exist", "password": ADMIN_PASSWORD, + }, expected=409) + headers = sign_in() + check_persisted_settings(headers) + status = api("/admin/backups", headers=headers) + check(status["pending_restore"] is None, "Restore remained pending after restart") + check(status["last_restore"] and status["last_restore"]["status"] == "restored", + "Backup restore did not complete") + check(CACHE_FIXTURE.read_bytes() == CACHE_CONTENT, "Artwork cache was not restored") + if managed_installation(): + state_file = Path("/app/data/bootstrap-secrets.json") + check(hashlib.sha256(state_file.read_bytes()).hexdigest() + == Path("/app/data/.smoke-managed-digest").read_text(), "Managed keys changed on restart/restore") + result = subprocess.run([sys.executable, "-m", "app.container_bootstrap", "setup-token"], + capture_output=True, text=True, check=False) + check(result.returncode != 0 and not result.stdout, "Setup token remains available after admin creation") + print("Generated keys persisted unchanged; initial setup token is no longer available: PASS") + print("Persistent setup state, administrator login, encrypted settings and database integrity: PASS") + print("Restored configuration, database and artwork cache: PASS") + + +def main() -> None: + check(len(sys.argv) == 2 and sys.argv[1] in ("packaging", "fresh", "persisted"), + "Expected packaging, fresh or persisted mode") + if sys.argv[1] == "packaging": + check_packaging() + return + check_runtime() + if sys.argv[1] == "fresh": + fresh_install() + else: + persisted_install() + check_origin_guards() + + +if __name__ == "__main__": + main()

Kind	{_clean_text(payload.get('kind'))}
Status	{_clean_text(payload.get('status'))}
Priority	{_clean_text(payload.get('priority'))}
Requested by	{_clean_text(payload.get('requested_by'))}

Ready to try again?

Is it fixed?

{heading}

{esc(entry['title'])}

{title}

{esc(title)}

{heading}

Your most watched

+ {submitting ? "Sending your request" : success ? "Request received" : "Your request needs attention"} +

What are you looking for?

Search for the title

{results.length ? "Select the right title" : "No matches found"}

+ {selected.requestId + ? "This title is already in the pipeline" + : selected.type === "tv" + ? "Choose seasons and request" + : "Review and request"} +

{selected.title}

Choose your audio language

+ {title} +

{workflow?.headline ?? formatIssueStatus(item.status)}

Is it fixed?

Search and request content

+ {mediaServerChecking + ? "Checking Jellyfin now..." + : (mediaServerStatus?.headline ?? "Server check unavailable")} +

+ {issueOptions?.can_act === false + ? "The selected details will be sent to support." + : selectedIssueDefinition.outcome} +

{workspace === "request" ? "Create request item" : "Create issue item"}