Documentation: OIDC token_auth_method setting for v3 (#12398)

docs/configuration.md

@@ -674,6 +674,9 @@ See the corresponding [django-allauth documentation](https://docs.allauth.org/en
 for a list of provider configurations. You will also need to include the relevant Django 'application' inside the
 [PAPERLESS_APPS](#PAPERLESS_APPS) setting to activate that specific authentication provider (e.g. `allauth.socialaccount.providers.openid_connect` for the [OIDC Connect provider](https://docs.allauth.org/en/latest/socialaccount/providers/openid_connect.html)).
 
+: For OpenID Connect providers, set `settings.token_auth_method` if your identity provider
+requires a specific token endpoint authentication method.
+
     Defaults to None, which does not enable any third party authentication systems.
 
 #### [`PAPERLESS_SOCIAL_AUTO_SIGNUP=<bool>`](#PAPERLESS_SOCIAL_AUTO_SIGNUP) {#PAPERLESS_SOCIAL_AUTO_SIGNUP}

docs/migration-v3.md

@@ -103,3 +103,30 @@ Multiple options are combined in a single value:
 ```bash
 PAPERLESS_DB_OPTIONS="sslmode=require;sslrootcert=/certs/ca.pem;pool.max_size=10"
 ```
+
+## OpenID Connect Token Endpoint Authentication
+
+Some existing OpenID Connect setups may require an explicit token endpoint authentication method after upgrading to v3.
+
+#### Action Required
+
+If OIDC login fails at the callback with an `invalid_client` error, add `token_auth_method` to the provider `settings` in
+[`PAPERLESS_SOCIALACCOUNT_PROVIDERS`](configuration.md#PAPERLESS_SOCIALACCOUNT_PROVIDERS).
+
+For example:
+
+```json
+{
+  "openid_connect": {
+    "APPS": [
+      {
+        ...
+        "settings": {
+          "server_url": "https://login.example.com",
+          "token_auth_method": "client_secret_basic"
+        }
+      }
+    ]
+  }
+}
+```

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -1,7 +1,7 @@
 <nav class="navbar navbar-dark fixed-top bg-primary flex-md-nowrap p-0 shadow-sm">
   <button class="navbar-toggler d-md-none collapsed border-0" type="button" data-toggle="collapse"
     data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
-    (click)="mobileSearchHidden = false; isMenuCollapsed = !isMenuCollapsed">
+    (click)="isMenuCollapsed = !isMenuCollapsed">
     <span class="navbar-toggler-icon"></span>
   </button>
   <a class="navbar-brand d-flex align-items-center me-0 px-3 py-3 order-sm-0"
@@ -24,8 +24,7 @@
       }
     </div>
   </a>
-  <div class="search-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1"
-    [class.mobile-hidden]="mobileSearchHidden">
+  <div class="search-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1">
     <div class="col-12 col-md-7">
       <pngx-global-search></pngx-global-search>
     </div>
@@ -379,7 +378,7 @@
       </div>
     </nav>
 
-    <main role="main" class="ms-sm-auto px-md-4" [class.mobile-search-hidden]="mobileSearchHidden"
+    <main role="main" class="ms-sm-auto px-md-4"
       [ngClass]="slimSidebarEnabled ? 'col-slim' : 'col-md-9 col-lg-10 col-xxxl-11'">
       <router-outlet></router-outlet>
     </main>

src-ui/src/app/components/app-frame/app-frame.component.scss

@@ -44,23 +44,6 @@
   .sidebar {
     top: 3.5rem;
   }
-
-  .search-container {
-    max-height: 4.5rem;
-    overflow: hidden;
-    transition: max-height .2s ease, opacity .2s ease, padding-top .2s ease, padding-bottom .2s ease;
-
-    &.mobile-hidden {
-      max-height: 0;
-      opacity: 0;
-      padding-top: 0 !important;
-      padding-bottom: 0 !important;
-    }
-  }
-
-  main.mobile-search-hidden {
-    padding-top: 56px;
-  }
 }
 
 main {

src-ui/src/app/components/app-frame/app-frame.component.spec.ts

@@ -293,58 +293,6 @@ describe('AppFrameComponent', () => {
     expect(component.isMenuCollapsed).toBeTruthy()
   })
 
-  it('should hide mobile search when scrolling down and show it when scrolling up', () => {
-    Object.defineProperty(window, 'innerWidth', {
-      configurable: true,
-      value: 767,
-    })
-
-    component.ngOnInit()
-
-    Object.defineProperty(window, 'scrollY', {
-      configurable: true,
-      value: 40,
-    })
-    component.onWindowScroll()
-    expect(component.mobileSearchHidden).toBe(true)
-
-    Object.defineProperty(window, 'scrollY', {
-      configurable: true,
-      value: 0,
-    })
-    component.onWindowScroll()
-    expect(component.mobileSearchHidden).toBe(false)
-  })
-
-  it('should keep mobile search visible on desktop scroll', () => {
-    Object.defineProperty(window, 'innerWidth', {
-      configurable: true,
-      value: 768,
-    })
-    component.mobileSearchHidden = true
-
-    component.onWindowScroll()
-
-    expect(component.mobileSearchHidden).toBe(false)
-  })
-
-  it('should keep mobile search visible while the mobile menu is expanded', () => {
-    Object.defineProperty(window, 'innerWidth', {
-      configurable: true,
-      value: 767,
-    })
-    component.ngOnInit()
-    component.isMenuCollapsed = false
-
-    Object.defineProperty(window, 'scrollY', {
-      configurable: true,
-      value: 40,
-    })
-    component.onWindowScroll()
-
-    expect(component.mobileSearchHidden).toBe(false)
-  })
-
   it('should support close document & navigate on close current doc', () => {
     const closeSpy = jest.spyOn(openDocumentsService, 'closeDocument')
     closeSpy.mockReturnValue(of(true))

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -94,14 +94,6 @@ export class AppFrameComponent
 
   slimSidebarAnimating: boolean = false
 
-  mobileSearchHidden: boolean = false
-
-  private lastScrollY: number = 0
-
-  private readonly mobileBreakpoint = 768
-
-  private readonly mobileSearchHideThreshold = 16
-
   constructor() {
     super()
     const permissionsService = this.permissionsService
@@ -119,8 +111,6 @@ export class AppFrameComponent
   }
 
   ngOnInit(): void {
-    this.lastScrollY = window.scrollY
-
     if (this.settingsService.get(SETTINGS_KEYS.UPDATE_CHECKING_ENABLED)) {
       this.checkForUpdates()
     }
@@ -273,37 +263,6 @@ export class AppFrameComponent
     return this.settingsService.get(SETTINGS_KEYS.AI_ENABLED)
   }
 
-  @HostListener('window:resize')
-  onWindowResize(): void {
-    if (!this.isMobileViewport()) {
-      this.mobileSearchHidden = false
-    }
-  }
-
-  @HostListener('window:scroll')
-  onWindowScroll(): void {
-    const currentScrollY = window.scrollY
-
-    if (!this.isMobileViewport() || this.isMenuCollapsed === false) {
-      this.mobileSearchHidden = false
-      this.lastScrollY = currentScrollY
-      return
-    }
-
-    const delta = currentScrollY - this.lastScrollY
-
-    if (currentScrollY <= 0 || delta < -this.mobileSearchHideThreshold) {
-      this.mobileSearchHidden = false
-    } else if (
-      currentScrollY > this.mobileSearchHideThreshold &&
-      delta > this.mobileSearchHideThreshold
-    ) {
-      this.mobileSearchHidden = true
-    }
-
-    this.lastScrollY = currentScrollY
-  }
-
   closeMenu() {
     this.isMenuCollapsed = true
   }
@@ -425,8 +384,4 @@ export class AppFrameComponent
       !this.settingsService.organizingSidebarSavedViews
     )
   }
-
-  private isMobileViewport(): boolean {
-    return window.innerWidth < this.mobileBreakpoint
-  }
 }

src-ui/src/app/components/document-list/document-list.component.scss

@@ -56,20 +56,13 @@ $paperless-card-breakpoints: (
 
 .sticky-top {
   z-index: 990; // below main navbar
-  top: calc(7rem - 2px); // height of navbar + search row (mobile)
-  transition: top 0.2s ease;
+  top: calc(7rem - 2px); // height of navbar (mobile)
 
   @media (min-width: 580px) {
     top: 3.5rem; // height of navbar
   }
 }
 
-@media (max-width: 579.98px) {
-  :host-context(main.mobile-search-hidden) .sticky-top {
-    top: calc(3.5rem - 2px);
-  }
-}
-
 .table .form-check {
   padding: 0.2rem;
   min-height: 0;