From 47e24e2241acdfd56ed9848c2f9bc302403b37cd Mon Sep 17 00:00:00 2001 From: "aditya.chandel" <8075870+adityachandelgit@users.noreply.github.com> Date: Mon, 1 Sep 2025 15:38:28 -0600 Subject: [PATCH] Add "OPDS Server Enabled" button to OPDS v2 settings --- .../src/app/core/model/app-settings.model.ts | 1 - .../koreader-settings-component.scss | 6 +- .../opds-settings-v2/opds-settings-v2.html | 283 +++++++++-------- .../opds-settings-v2/opds-settings-v2.scss | 288 +++++++++++------- .../opds-settings-v2/opds-settings-v2.ts | 53 +++- .../opds-settings.component.html | 115 ++++--- .../opds-settings.component.scss | 129 +++++--- .../src/app/settings/settings.component.html | 2 +- 8 files changed, 552 insertions(+), 325 deletions(-) diff --git a/booklore-ui/src/app/core/model/app-settings.model.ts b/booklore-ui/src/app/core/model/app-settings.model.ts index 288989bc2..809626925 100644 --- a/booklore-ui/src/app/core/model/app-settings.model.ts +++ b/booklore-ui/src/app/core/model/app-settings.model.ts @@ -125,7 +125,6 @@ export interface AppSettings { export enum AppSettingKey { QUICK_BOOK_MATCH = 'QUICK_BOOK_MATCH', AUTO_BOOK_SEARCH = 'AUTO_BOOK_SEARCH', - COVER_IMAGE_RESOLUTION = 'COVER_IMAGE_RESOLUTION', SIMILAR_BOOK_RECOMMENDATION = 'SIMILAR_BOOK_RECOMMENDATION', UPLOAD_FILE_PATTERN = 'UPLOAD_FILE_PATTERN', OPDS_SERVER_ENABLED = 'OPDS_SERVER_ENABLED', diff --git a/booklore-ui/src/app/settings/device-settings-component/koreader-settings-component/koreader-settings-component.scss b/booklore-ui/src/app/settings/device-settings-component/koreader-settings-component/koreader-settings-component.scss index 5957b33f9..53666979b 100644 --- a/booklore-ui/src/app/settings/device-settings-component/koreader-settings-component/koreader-settings-component.scss +++ b/booklore-ui/src/app/settings/device-settings-component/koreader-settings-component/koreader-settings-component.scss @@ -89,7 +89,7 @@ border: 1px solid var(--p-content-border-color); border-radius: 8px; background: var(--p-content-background); - padding: 1rem 2rem 2rem 2rem; + padding: 1rem 1.5rem 1.5rem 1.5rem; margin-left: 1rem; margin-right: 1rem; display: flex; @@ -107,7 +107,7 @@ display: flex; align-items: flex-start; gap: 2rem; - padding: 0.75rem 0; + padding: 0.5rem 0; &:last-child { border-bottom: none; @@ -117,7 +117,7 @@ @media (max-width: 768px) { flex-direction: column; gap: 1rem; - padding: 0.75rem 0; + padding: 0.5rem 0; } } diff --git a/booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.html b/booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.html index cda5db39f..a73a91354 100644 --- a/booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.html +++ b/booklore-ui/src/app/settings/opds-settings-v2/opds-settings-v2.html @@ -2,7 +2,7 @@

- OPDS Settings + OPDS Settings v2

Manage your OPDS credentials and control how your book collection is shared with reading apps. @@ -12,134 +12,177 @@ @if (hasPermission) {

-
-

- - OPDS Endpoint -

-
-
- - - -
-
-
- -
+
-
+

+ + Server Control +

+
+ +
+
+
+
+ + + +
+

+ + Enable or disable the OPDS server to control access to your book collection through reading apps. +

+
+
+
+
+ + @if (opdsEnabled) { +
+

- - OPDS Users + + OPDS Endpoint

- - +
+ +
+
+
+
+ +
+ + + +
+
+

+ + Use this URL to connect your reading apps to your OPDS catalog. +

+
+
-
- - - - -
- - Username -
- - -
- - Password -
- - -
- - Actions -
- - - - - - - + }
this.hasPermission), - tap(() => this.loadUsers()) + tap(() => this.loadAppSettings()) ).subscribe(); } + private loadAppSettings(): void { + this.appSettingsService.appSettings$ + .pipe( + filter((settings): settings is NonNullable => settings != null), + take(1) + ) + .subscribe(settings => { + this.opdsEnabled = settings.opdsServerEnabled ?? false; + if (this.opdsEnabled) { + this.loadUsers(); + } else { + this.loading = false; + } + }); + } + private loadUsers(): void { this.opdsService.getUser().pipe( takeUntil(this.destroy$), @@ -135,6 +157,29 @@ export class OpdsSettingsV2 implements OnInit, OnDestroy { }); } + toggleOpdsServer(): void { + this.saveSetting(AppSettingKey.OPDS_SERVER_ENABLED, this.opdsEnabled); + if (this.opdsEnabled) { + this.loadUsers(); + } else { + this.users = []; + } + } + + private saveSetting(key: string, value: unknown): void { + this.appSettingsService.saveSettings([{key, newValue: value}]).subscribe({ + next: () => { + const successMessage = (value === true) + ? 'OPDS Server Enabled.' + : 'OPDS Server Disabled.'; + this.showMessage('success', 'Settings Saved', successMessage); + }, + error: () => { + this.showMessage('error', 'Error', 'There was an error saving the settings.'); + } + }); + } + private resetCreateUserDialog(): void { this.showCreateUserDialog = false; this.newUser = {username: '', password: ''}; diff --git a/booklore-ui/src/app/settings/opds-settings/opds-settings.component.html b/booklore-ui/src/app/settings/opds-settings/opds-settings.component.html index c727d6391..3eeefabae 100644 --- a/booklore-ui/src/app/settings/opds-settings/opds-settings.component.html +++ b/booklore-ui/src/app/settings/opds-settings/opds-settings.component.html @@ -2,16 +2,10 @@

- OPDS Settings (v1) + OPDS Settings v1 (Legacy)

Legacy OPDS server settings for managing your book collection access. - -

@@ -19,7 +13,7 @@

Deprecated:

- OPDS (v1) support will be removed in a future release. + OPDS v1 support will be removed in a future release. Please migrate to OPDS v2 for continued support and improvements.

@@ -27,56 +21,79 @@
-
-

- - Server Control -

-
- - - +
+
+

+ + Server Control +

+
+ +
+
+
+
+ + + +
+

+ + Enable or disable the OPDS server to control access to your book collection through reading apps. +

+
+
@if (opdsEnabled) { -
-

- - OPDS Endpoint -

-
-
- - - +
+
+

+ + OPDS Endpoint +

+
+ +
+
+
+
+ +
+ + + +
+
+

+ + Use this URL to connect your reading apps to your OPDS catalog. +

+
-
+
-
-

- - OPDS Users -

-
+

+ + OPDS Users +

diff --git a/booklore-ui/src/app/settings/opds-settings/opds-settings.component.scss b/booklore-ui/src/app/settings/opds-settings/opds-settings.component.scss index e2a886195..b3988b5b8 100644 --- a/booklore-ui/src/app/settings/opds-settings/opds-settings.component.scss +++ b/booklore-ui/src/app/settings/opds-settings/opds-settings.component.scss @@ -82,15 +82,16 @@ gap: 2rem; } -.server-section { - background: var(--p-content-background); - border-radius: 8px; - +.preferences-section { @media (min-width: 768px) { - padding: 0 1rem 0 1rem; + padding: 0 1rem; } } +.section-header { + margin-bottom: 1rem; +} + .section-title { display: flex; align-items: center; @@ -98,58 +99,110 @@ font-size: 1.125rem; font-weight: 600; color: var(--p-text-color); - margin-bottom: 1rem; + margin: 0; .pi { color: var(--p-primary-color); } } -.server-control { - display: flex; - align-items: center; - gap: 1rem; -} - -.control-label { - font-weight: 500; - color: var(--p-text-color); -} - -.endpoint-section { - background: var(--p-content-background); +.settings-card { + border: 1px solid var(--p-content-border-color); border-radius: 8px; + background: var(--p-content-background); + padding: 1.5rem; + display: flex; + flex-direction: column; + gap: 1.5rem; +} - @media (min-width: 768px) { - padding: 0 1rem 0 1rem; +.setting-item { + display: flex; + align-items: flex-start; + gap: 2rem; + + &:last-child { + border-bottom: none; + padding-bottom: 0; + } + + @media (max-width: 768px) { + flex-direction: column; + gap: 1rem; } } -.endpoint-form { - margin-top: 1rem; +.setting-info { + flex: 1; + min-width: 0; + + .setting-label { + display: block; + font-weight: 600; + color: var(--p-text-color); + font-size: 1rem; + margin-bottom: 0.5rem; + } + + .setting-label-row { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 0.5rem; + flex-wrap: wrap; + + .setting-label { + margin-bottom: 0; + flex-shrink: 0; + min-width: 180px; + } + + .input-group { + display: flex; + align-items: center; + gap: 0.75rem; + + @media (max-width: 768px) { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + } + } + + .setting-description { + display: flex; + align-items: flex-start; + gap: 0.5rem; + color: var(--p-text-muted-color); + font-size: 0.875rem; + line-height: 1.5; + margin: 0; + + .pi { + color: var(--p-primary-color); + margin-top: 0.125rem; + flex-shrink: 0; + } + } } -.endpoint-field { +.input-group { display: flex; align-items: center; - gap: 0.5rem; + gap: 0.75rem; + + @media (max-width: 768px) { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } } .endpoint-input { min-width: 9rem; - max-width: 50rem; -} - -.users-section { - @media (min-width: 768px) { - padding: 0 1rem; - } - - .section-title-group { - display: flex; - align-items: center; - justify-content: space-between; - } + max-width: 30rem; + width: 100%; } .table-card { diff --git a/booklore-ui/src/app/settings/settings.component.html b/booklore-ui/src/app/settings/settings.component.html index b8520f465..d15648a48 100644 --- a/booklore-ui/src/app/settings/settings.component.html +++ b/booklore-ui/src/app/settings/settings.component.html @@ -33,7 +33,7 @@ } - OPDS V2 + OPDS v2 Devices