Properly get username & display name

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

@@ -21,17 +21,17 @@
   </div>
   <ul ngbNav class="order-sm-3">
     <li ngbDropdown class="nav-item dropdown">
-      <button class="btn text-light" id="userDropdown" ngbDropdownToggle>
-        <span *ngIf="displayName" class="navbar-text small me-2 text-light d-none d-sm-inline">
-          {{displayName}}
+      <button class="btn" id="userDropdown" ngbDropdownToggle>
+        <span class="small me-2 d-none d-sm-inline">
+          {{this.settingsService.displayName}}
         </span>
         <svg width="1.3em" height="1.3em" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#person-circle"/>
         </svg>
       </button>
       <div ngbDropdownMenu class="dropdown-menu-end shadow me-2" aria-labelledby="userDropdown">
-        <div *ngIf="displayName" class="d-sm-none">
-          <p class="small mb-0 px-3 text-muted" i18n>Logged in as {{displayName}}</p>
+        <div class="d-sm-none">
+          <p class="small mb-0 px-3 text-muted" i18n>Logged in as {{this.settingsService.displayName}}</p>
           <div class="dropdown-divider"></div>
         </div>
         <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()">

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

@@ -23,6 +23,7 @@ import {
   AppRemoteVersion,
 } from 'src/app/services/rest/remote-version.service'
 import { QueryParamsService } from 'src/app/services/query-params.service'
+import { SettingsService } from 'src/app/services/settings.service'
 
 @Component({
   selector: 'app-app-frame',
@@ -36,10 +37,9 @@ export class AppFrameComponent {
     private openDocumentsService: OpenDocumentsService,
     private searchService: SearchService,
     public savedViewService: SavedViewService,
-    private list: DocumentListViewService,
-    private meta: Meta,
     private remoteVersionService: RemoteVersionService,
-    private queryParamsService: QueryParamsService
+    private queryParamsService: QueryParamsService,
+    public settingsService: SettingsService
   ) {
     this.remoteVersionService
       .checkForUpdates()
@@ -143,17 +143,4 @@ export class AppFrameComponent {
         }
       })
   }
-
-  get displayName() {
-    // TODO: taken from dashboard component, is this the best way to pass around username?
-    let tagFullName = this.meta.getTag('name=full_name')
-    let tagUsername = this.meta.getTag('name=username')
-    if (tagFullName && tagFullName.content) {
-      return tagFullName.content
-    } else if (tagUsername && tagUsername.content) {
-      return tagUsername.content
-    } else {
-      return null
-    }
-  }
 }

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { Meta } from '@angular/platform-browser'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
+import { SettingsService } from 'src/app/services/settings.service'
 
 @Component({
   selector: 'app-dashboard',
@@ -8,23 +9,14 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service'
   styleUrls: ['./dashboard.component.scss'],
 })
 export class DashboardComponent {
-  constructor(public savedViewService: SavedViewService, private meta: Meta) {}
-
-  get displayName() {
-    let tagFullName = this.meta.getTag('name=full_name')
-    let tagUsername = this.meta.getTag('name=username')
-    if (tagFullName && tagFullName.content) {
-      return tagFullName.content
-    } else if (tagUsername && tagUsername.content) {
-      return tagUsername.content
-    } else {
-      return null
-    }
-  }
+  constructor(
+    public savedViewService: SavedViewService,
+    public settingsService: SettingsService
+  ) {}
 
   get subtitle() {
-    if (this.displayName) {
-      return $localize`Hello ${this.displayName}, welcome to Paperless-ngx!`
+    if (this.settingsService.displayName) {
+      return $localize`Hello ${this.settingsService.displayName}, welcome to Paperless-ngx!`
     } else {
       return $localize`Welcome to Paperless-ngx!`
     }

src-ui/src/app/services/settings.service.ts

@@ -44,6 +44,8 @@ export class SettingsService {
 
   private settings: Object = {}
 
+  public displayName: string
+
   constructor(
     rendererFactory: RendererFactory2,
     @Inject(DOCUMENT) private document,
@@ -62,6 +64,7 @@ export class SettingsService {
     settings$.pipe(first()).subscribe((uisettings) => {
       Object.assign(this.settings, uisettings.settings)
       this.maybeMigrateSettings()
+      this.displayName = uisettings.display_name.trim()
     })
     return settings$
   }

src/documents/templates/index.html

@@ -9,8 +9,6 @@
   <title>Paperless-ngx</title>
   <base href="{% url 'base' %}">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name="username" content="{{username}}">
-	<meta name="full_name" content="{{full_name}}">
 	<meta name="cookie_prefix" content="{{cookie_prefix}}">
 	<meta name="robots" content="noindex,nofollow">
   	<link rel="icon" type="image/x-icon" href="favicon.ico">

src/documents/views.py

@@ -729,12 +729,17 @@ class UiSettingsView(GenericAPIView):
         serializer.is_valid(raise_exception=True)
 
         user = User.objects.get(pk=request.user.id)
+        displayname = user.username
+        if user.first_name or user.last_name:
+            displayname = " ".join([user.first_name, user.last_name])
         settings = []
         if hasattr(user, "ui_settings"):
             settings = user.ui_settings.settings
         return Response(
             {
                 "user_id": user.id,
+                "username": user.username,
+                "display_name": displayname,
                 "settings": settings,
             },
         )