Cleanup login page, custom button text

UI/Web/src/app/admin/_models/oidc-config.ts

@@ -7,6 +7,7 @@ export interface OidcConfig {
   provisionUserSettings: boolean;
   autoLogin: boolean;
   disablePasswordAuthentication: boolean;
+  providerName: string;
 }
 
 export interface OidcPublicConfig {
@@ -14,4 +15,5 @@ export interface OidcPublicConfig {
   clientId: string;
   autoLogin: boolean;
   disablePasswordAuthentication: boolean;
+  providerName: string;
 }

UI/Web/src/app/admin/manage-open-idconnect/manage-open-idconnect.component.html

@@ -10,6 +10,7 @@
     </div>
 
     <h4>{{t('provider')}}</h4>
+    <div class="text-muted">{{t('manual-save')}}</div>
     <ng-container>
       <div class="row g-0 mt-4 mb-4">
         @if (settingsForm.get('authority'); as formControl) {
@@ -62,8 +63,22 @@
 
     <div class="setting-section-break"></div>
     <h4>{{t('behaviour')}}</h4>
-
     <ng-container>
+      <div class="row g-0 mt-4 mb-4">
+        @if (settingsForm.get('providerName'); as formControl) {
+          <app-setting-item [title]="t('providerName')" [subtitle]="t('providerName-tooltip')">
+            <ng-template #view>
+              {{formControl.value}}
+            </ng-template>
+            <ng-template #edit>
+              <input id="oid-providerName" aria-describedby="oidc-providerName-validations" class="form-control"
+                     formControlName="providerName" type="text"
+                     [class.is-invalid]="formControl.invalid && !formControl.untouched">
+            </ng-template>
+          </app-setting-item>
+        }
+      </div>
+
       <div class="row g-0 mt-4 mb-4">
         @if(settingsForm.get('provisionAccounts'); as formControl) {
           <app-setting-switch [title]="t('provisionAccounts')" [subtitle]="t('provisionAccounts-tooltip')">

UI/Web/src/app/admin/manage-open-idconnect/manage-open-idconnect.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, DestroyRef, OnInit} from '@angular/core';
 import {TranslocoDirective} from "@jsverse/transloco";
 import {ServerSettings} from "../_models/server-settings";
 import {
@@ -14,7 +14,8 @@ import {SettingsService} from "../settings.service";
 import {OidcConfig} from "../_models/oidc-config";
 import {SettingItemComponent} from "../../settings/_components/setting-item/setting-item.component";
 import {SettingSwitchComponent} from "../../settings/_components/setting-switch/setting-switch.component";
-import {map, of} from "rxjs";
+import {debounceTime, distinctUntilChanged, filter, map, of, switchMap, tap} from "rxjs";
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 
 @Component({
   selector: 'app-manage-open-idconnect',
@@ -36,6 +37,7 @@ export class ManageOpenIDConnectComponent implements OnInit {
   constructor(
     private settingsService: SettingsService,
     private cdRef: ChangeDetectorRef,
+    private destroyRef: DestroyRef,
   ) {
   }
 
@@ -52,12 +54,27 @@ export class ManageOpenIDConnectComponent implements OnInit {
         this.settingsForm.addControl('provisionUserSettings', new FormControl(this.oidcSettings.provisionUserSettings, []));
         this.settingsForm.addControl('autoLogin', new FormControl(this.oidcSettings.autoLogin, []));
         this.settingsForm.addControl('disablePasswordAuthentication', new FormControl(this.oidcSettings.disablePasswordAuthentication, []));
+        this.settingsForm.addControl('providerName', new FormControl(this.oidcSettings.providerName, []));
         this.cdRef.markForCheck();
+
+        this.settingsForm.valueChanges.pipe(
+          debounceTime(300),
+          distinctUntilChanged(),
+          takeUntilDestroyed(this.destroyRef),
+          filter(() => {
+            // Do not auto save when provider settings have changed
+            const settings: OidcConfig = this.settingsForm.getRawValue();
+            return settings.authority == this.oidcSettings.authority && settings.clientId == this.oidcSettings.clientId;
+          }),
+          tap(() => this.save())
+        ).subscribe();
       }
-    })
+    });
   }
 
   save() {
+    if (!this.settingsForm.valid) return;
+
     const data = this.settingsForm.getRawValue();
     const newSettings = Object.assign({}, this.serverSettings);
     newSettings.oidcConfig = data as OidcConfig;

UI/Web/src/app/registration/user-login/user-login.component.html

@@ -42,16 +42,9 @@
               class="d-inline-block"
               style="object-fit: contain;"
             />
-            {{t('oidc')}}
+            {{oidcService.settings()?.providerName || t('oidc')}}
           </button>
         }
-
-        @if (!showPasswordLogin()) {
-          <div class="text-muted mt-2">
-            {{t('bypass')}}
-            <span class="text-muted clickable" (click)="forceShowPasswordLogin.set(true)">{{t('here')}}</span>
-          </div>
-        }
       }
     </ng-container>
   </app-splash-container>

UI/Web/src/app/registration/user-login/user-login.component.ts

@@ -59,9 +59,9 @@ export class UserLoginComponent implements OnInit {
    * undefined until query params are read
    */
   skipAutoLogin = signal<boolean | undefined>(undefined);
-
   /**
    * Display the login form, regardless if the password authentication is disabled (admins can still log in)
+   * Set from query
    */
   forceShowPasswordLogin = signal(false);
   /**
@@ -121,6 +121,7 @@ export class UserLoginComponent implements OnInit {
       }
 
       this.skipAutoLogin.set(params.get('skipAutoLogin') === 'true')
+      this.forceShowPasswordLogin.set(params.get('forceShowPassword') === 'true');
     });
   }
 

UI/Web/src/assets/langs/en.json

@@ -6,9 +6,7 @@
         "password-validation": "{{validation.password-validation}}",
         "forgot-password": "Forgot Password?",
         "submit": "Sign in",
-        "oidc": "Log in with OpenID Connect",
-        "bypass": "Password login has been disabled. Bypass ",
-        "here": "here"
+        "oidc": "OpenID Connect"
     },
 
     "oidc": {
@@ -18,11 +16,12 @@
         "settings": {
             "save": "{{common.save}}",
             "notice": "Notice",
-            "restart-required": "Changing OpenID Connect Authority requires a restart",
+            "restart-required": "Changing Authority, or Client ID requires a manual restart of Kavita to take effect.",
             "provider": "Provider",
             "behaviour": "Behaviour",
             "field-required": "{{name}} is required when {{other}} is set",
             "invalidUri": "The provider URL is not valid",
+            "manual-save": "Changing provider settings requires a manual save",
 
             "authority": "Authority",
             "authority-tooltip": "The URL to your OpenID Connect provider",
@@ -37,7 +36,9 @@
             "autoLogin": "Auto login",
             "autoLogin-tooltip": "Auto redirect to OpenID Connect provider when opening the login screen",
             "disablePasswordAuthentication": "Disable password authentication",
-            "disablePasswordAuthentication-tooltip": "Users with the admin role can bypass this restriction"
+            "disablePasswordAuthentication-tooltip": "Users with the admin role can bypass this restriction",
+            "providerName": "Provider name",
+            "providerName-tooltip": "Name show on the login screen"
         }
     },