Cleanup login page, custom button text

API/DTOs/Settings/OidcConfigDto.cs

@@ -3,12 +3,8 @@ using API.Entities.Enums;
 
 namespace API.DTOs.Settings;
 
-public class OidcConfigDto
+public record OidcConfigDto: OidcPublicConfigDto
 {
-    /// <inheritdoc cref="ServerSettingKey.OidcAuthority"/>
-    public string? Authority { get; set; }
-    /// <inheritdoc cref="ServerSettingKey.OidcClientId"/>
-    public string? ClientId { get; set; }
     /// <inheritdoc cref="ServerSettingKey.OidcProvisionAccounts"/>
     public bool ProvisionAccounts { get; set; }
     /// <inheritdoc cref="ServerSettingKey.OidcRequireVerifiedEmail"/>
@@ -16,12 +12,9 @@ public class OidcConfigDto
     /// <inheritdoc cref="ServerSettingKey.OidcProvisionUserSettings"/>
     public bool ProvisionUserSettings { get; set; }
     /// <inheritdoc cref="ServerSettingKey.OidcAutoLogin"/>
-    public bool AutoLogin { get; set; }
-    /// <inheritdoc cref="ServerSettingKey.DisablePasswordAuthentication"/>
-    public bool DisablePasswordAuthentication { get; set; }
 
     /// <summary>
-    /// Returns true if the <see cref="Authority"/> has been set
+    /// Returns true if the <see cref="OidcPublicConfigDto.Authority"/> has been set
     /// </summary>
     public bool Enabled => Authority != "";
 }

API/DTOs/Settings/OidcPublicConfigDto.cs

@@ -1,14 +1,18 @@
 #nullable enable
+using API.Entities.Enums;
+
 namespace API.DTOs.Settings;
 
-public sealed record OidcPublicConfigDto
+public record OidcPublicConfigDto
 {
-    /// <inheritdoc cref="OidcConfigDto.Authority"/>
+    /// <inheritdoc cref="ServerSettingKey.OidcAuthority"/>
     public string? Authority { get; set; }
-    /// <inheritdoc cref="OidcConfigDto.ClientId"/>
+    /// <inheritdoc cref="ServerSettingKey.OidcClientId"/>
     public string? ClientId { get; set; }
-    /// <inheritdoc cref="OidcConfigDto.AutoLogin"/>
+    /// <inheritdoc cref="ServerSettingKey.OidcAutoLogin"/>
     public bool AutoLogin { get; set; }
-    /// <inheritdoc cref="OidcConfigDto.DisablePasswordAuthentication"/>
+    /// <inheritdoc cref="ServerSettingKey.DisablePasswordAuthentication"/>
     public bool DisablePasswordAuthentication { get; set; }
+    /// <inheritdoc cref="ServerSettingKey.OidcProviderName"/>
+    public string ProviderName { get; set; } = string.Empty;
 }

API/Data/Seed.cs

@@ -259,6 +259,7 @@ public static class Seed
             new() { Key = ServerSettingKey.OidcRequireVerifiedEmail, Value = "true"},
             new() { Key = ServerSettingKey.OidcProvisionUserSettings, Value = "false"},
             new() { Key = ServerSettingKey.DisablePasswordAuthentication, Value = "false"},
+            new() { Key = ServerSettingKey.OidcProviderName, Value = "OpenID Connect"},
 
             new() {Key = ServerSettingKey.EmailHost, Value = string.Empty},
             new() {Key = ServerSettingKey.EmailPort, Value = string.Empty},

API/Entities/Enums/ServerSettingKey.cs

@@ -232,4 +232,10 @@ public enum ServerSettingKey
     /// </summary>
     [Description("DisablePasswordAuthentication")]
     DisablePasswordAuthentication = 46,
+    /// <summary>
+    /// Name of your provider, used to display on the login screen
+    /// </summary>
+    /// <remarks>Default to OpenID Connect</remarks>
+    [Description("OidcProviderName")]
+    OidcProviderName = 47,
 }

API/Helpers/Converters/ServerSettingConverter.cs

@@ -157,6 +157,10 @@ public class ServerSettingConverter : ITypeConverter<IEnumerable<ServerSetting>,
                     destination.OidcConfig ??= new OidcConfigDto();
                     destination.OidcConfig.DisablePasswordAuthentication = bool.Parse(row.Value);
                     break;
+                case ServerSettingKey.OidcProviderName:
+                    destination.OidcConfig ??= new OidcConfigDto();
+                    destination.OidcConfig.ProviderName = row.Value;
+                    break;
                 case ServerSettingKey.LicenseKey:
                 case ServerSettingKey.EnableAuthentication:
                 case ServerSettingKey.EmailServiceUrl:

API/Services/SettingsService.cs

@@ -464,6 +464,13 @@ public class SettingsService : ISettingsService
             _unitOfWork.SettingsRepository.Update(setting);
         }
 
+        if (setting.Key == ServerSettingKey.OidcProviderName &&
+            updateSettingsDto.OidcConfig.ProviderName + string.Empty != setting.Value)
+        {
+            setting.Value = updateSettingsDto.OidcConfig.ProviderName + string.Empty;
+            _unitOfWork.SettingsRepository.Update(setting);
+        }
+
     }
 
     private void UpdateEmailSettings(ServerSetting setting, ServerSettingDto updateSettingsDto)

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",
+        "oidc": "OpenID Connect"
-        "bypass": "Password login has been disabled. Bypass ",
-        "here": "here"
     },
 
     "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"
         }
     },