Feature: update user profile (#4678)

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

@@ -39,6 +39,11 @@
           <p class="small mb-0 px-3 text-muted" i18n>Logged in as {{this.settingsService.displayName}}</p>
           <div class="dropdown-divider"></div>
         </div>
+        <button ngbDropdownItem class="nav-link" (click)="editProfile()">
+          <svg class="sidebaricon me-2" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#person"/>
+          </svg><ng-container i18n>My Profile</ng-container>
+        </button>
         <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }">
           <svg class="sidebaricon me-2" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#gear"/>

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

@@ -9,7 +9,7 @@ import {
   fakeAsync,
   tick,
 } from '@angular/core/testing'
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModal, NgbModalModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { BrowserModule } from '@angular/platform-browser'
 import { RouterTestingModule } from '@angular/router/testing'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -32,6 +32,7 @@ import { routes } from 'src/app/app-routing.module'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop'
 import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
+import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
 
 const saved_views = [
   {
@@ -86,6 +87,7 @@ describe('AppFrameComponent', () => {
   let documentListViewService: DocumentListViewService
   let router: Router
   let savedViewSpy
+  let modalService: NgbModal
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -98,6 +100,7 @@ describe('AppFrameComponent', () => {
         FormsModule,
         ReactiveFormsModule,
         DragDropModule,
+        NgbModalModule,
       ],
       providers: [
         SettingsService,
@@ -120,6 +123,7 @@ describe('AppFrameComponent', () => {
         ToastService,
         OpenDocumentsService,
         SearchService,
+        NgbModal,
         {
           provide: ActivatedRoute,
           useValue: {
@@ -148,6 +152,7 @@ describe('AppFrameComponent', () => {
     openDocumentsService = TestBed.inject(OpenDocumentsService)
     searchService = TestBed.inject(SearchService)
     documentListViewService = TestBed.inject(DocumentListViewService)
+    modalService = TestBed.inject(NgbModal)
     router = TestBed.inject(Router)
 
     jest
@@ -363,4 +368,12 @@ describe('AppFrameComponent', () => {
     >)
     expect(toastSpy).toHaveBeenCalled()
   })
+
+  it('should support edit profile', () => {
+    const modalSpy = jest.spyOn(modalService, 'open')
+    component.editProfile()
+    expect(modalSpy).toHaveBeenCalledWith(ProfileEditDialogComponent, {
+      backdrop: 'static',
+    })
+  })
 })

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

@@ -39,6 +39,8 @@ import {
   CdkDragDrop,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
 
 @Component({
   selector: 'pngx-app-frame',
@@ -69,6 +71,7 @@ export class AppFrameComponent
     public settingsService: SettingsService,
     public tasksService: TasksService,
     private readonly toastService: ToastService,
+    private modalService: NgbModal,
     permissionsService: PermissionsService
   ) {
     super()
@@ -121,6 +124,13 @@ export class AppFrameComponent
     this.isMenuCollapsed = true
   }
 
+  editProfile() {
+    this.modalService.open(ProfileEditDialogComponent, {
+      backdrop: 'static',
+    })
+    this.closeMenu()
+  }
+
   get openDocuments(): PaperlessDocument[] {
     return this.openDocumentsService.getOpenDocuments()
   }