From 8b204cac9918fd47e9663ee8fe2688d2d5f3957e Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 7 Dec 2022 15:46:52 -0800
Subject: [PATCH] disable document form components when no object permissions

---
 src-ui/src/app/app.module.ts                  |  2 +
 .../correspondent-edit-dialog.component.html  |  2 +-
 .../document-type-edit-dialog.component.html  |  2 +-
 .../storage-path-edit-dialog.component.html   |  2 +-
 .../tag-edit-dialog.component.html            |  2 +-
 .../common/input/date/date.component.html     |  4 +-
 .../common/input/number/number.component.html |  4 +-
 .../common/input/select/select.component.html |  2 +-
 .../common/input/tags/tags.component.html     |  3 +-
 .../common/input/tags/tags.component.ts       |  1 +
 .../common/input/text/text.component.html     |  2 +-
 .../document-detail.component.html            | 12 +++--
 .../document-detail.component.ts              | 11 ++++
 .../if-object-permissions.directive.ts        | 54 +++++++++++++++++++
 .../src/app/directives/if-owner.directive.ts  |  9 ++--
 .../src/app/services/permissions.service.ts   | 19 ++++++-
 src-ui/src/app/services/settings.service.ts   |  5 +-
 src-ui/src/styles.scss                        |  1 +
 18 files changed, 116 insertions(+), 21 deletions(-)
 create mode 100644 src-ui/src/app/directives/if-object-permissions.directive.ts

diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index 183a6ad25..60a6f4844 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -106,6 +106,7 @@ import localeTr from '@angular/common/locales/tr'
 import localeZh from '@angular/common/locales/zh'
 import { ShareUserComponent } from './components/common/input/share-user/share-user.component'
 import { IfOwnerDirective } from './directives/if-owner.directive'
+import { IfObjectPermissionsDirective } from './directives/if-object-permissions.directive'
 
 registerLocaleData(localeBe)
 registerLocaleData(localeCs)
@@ -199,6 +200,7 @@ function initializeApp(settings: SettingsService) {
     MailRuleEditDialogComponent,
     ShareUserComponent,
     IfOwnerDirective,
+    IfObjectPermissionsDirective,
   ],
   imports: [
     BrowserModule,
diff --git a/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html
index 857bd2f1c..83f24812f 100644
--- a/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html
@@ -11,7 +11,7 @@
     <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></app-input-text>
     <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></app-input-check>
 
-    <div *ifOwner="object.owner">
+    <div *ifOwner="object?.owner">
       <h5 i18n>Permissions</h5>
       <div formGroupName="set_permissions">
         <app-share-user type="view" formControlName="view"></app-share-user>
diff --git a/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html
index b7d7f1335..3aa196f31 100644
--- a/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html
@@ -11,7 +11,7 @@
       <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></app-input-text>
       <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>
 
-      <div *ifOwner="object.owner">
+      <div *ifOwner="object?.owner">
         <h5 i18n>Permissions</h5>
         <div formGroupName="set_permissions">
           <app-share-user type="view" formControlName="view"></app-share-user>
diff --git a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
index e122b8c00..a0e141907 100644
--- a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
@@ -16,7 +16,7 @@
     <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></app-input-text>
     <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>
 
-    <div *ifOwner="object.owner">
+    <div *ifOwner="object?.owner">
       <h5 i18n>Permissions</h5>
       <div formGroupName="set_permissions">
         <app-share-user type="view" formControlName="view"></app-share-user>
diff --git a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
index a4a7fbbf5..4e6d0e22f 100644
--- a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
@@ -14,7 +14,7 @@
       <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></app-input-text>
       <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>
 
-      <div *ifOwner="object.owner">
+      <div *ifOwner="object?.owner">
         <h5 i18n>Permissions</h5>
         <div formGroupName="set_permissions">
           <app-share-user type="view" formControlName="view"></app-share-user>
diff --git a/src-ui/src/app/components/common/input/date/date.component.html b/src-ui/src/app/components/common/input/date/date.component.html
index 926429a8d..dfc3950aa 100644
--- a/src-ui/src/app/components/common/input/date/date.component.html
+++ b/src-ui/src/app/components/common/input/date/date.component.html
@@ -3,8 +3,8 @@
   <div class="input-group" [class.is-invalid]="error">
     <input class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
           (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
-          name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel">
-    <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button">
+          name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled">
+    <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
         <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
       </svg>
diff --git a/src-ui/src/app/components/common/input/number/number.component.html b/src-ui/src/app/components/common/input/number/number.component.html
index ceff40250..85b1012aa 100644
--- a/src-ui/src/app/components/common/input/number/number.component.html
+++ b/src-ui/src/app/components/common/input/number/number.component.html
@@ -1,8 +1,8 @@
 <div class="mb-3">
   <label class="form-label" [for]="inputId">{{title}}</label>
   <div class="input-group" [class.is-invalid]="error">
-    <input type="number" class="form-control" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [class.is-invalid]="error">
-    <button *ngIf="showAdd" class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="nextAsn()" [disabled]="value">+1</button>
+    <input type="number" class="form-control" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [class.is-invalid]="error" [disabled]="disabled">
+    <button *ngIf="showAdd" class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="nextAsn()" [disabled]="disabled">+1</button>
   </div>
   <div class="invalid-feedback">
     {{error}}
diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index d775f4ffa..6bb5f5036 100644
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -20,7 +20,7 @@
         (clear)="clearLastSearchTerm()"
         (blur)="onBlur()">
       </ng-select>
-      <button *ngIf="allowCreateNew" class="btn btn-outline-secondary" type="button" (click)="addItem()">
+      <button *ngIf="allowCreateNew" class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled">
         <svg class="buttonicon" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#plus" />
         </svg>
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index 14de0f98a..ad0a6868b 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -3,6 +3,7 @@
 
   <div class="input-group flex-nowrap">
     <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="value"
+      [disabled]="disabled"
       [multiple]="true"
       [closeOnSelect]="false"
       [clearSearchOnAdd]="true"
@@ -31,7 +32,7 @@
       </ng-template>
     </ng-select>
 
-    <button *ngIf="allowCreate" class="btn btn-outline-secondary" type="button" (click)="createTag()">
+    <button *ngIf="allowCreate" class="btn btn-outline-secondary" type="button" (click)="createTag()" [disabled]="disabled">
       <svg class="buttonicon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#plus" />
       </svg>
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.ts b/src-ui/src/app/components/common/input/tags/tags.component.ts
index b6cd1413d..3f606e03a 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.ts
@@ -74,6 +74,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   }
 
   removeTag(id) {
+    if (this.disabled) return
     let index = this.value.indexOf(id)
     if (index > -1) {
       let oldValue = this.value
diff --git a/src-ui/src/app/components/common/input/text/text.component.html b/src-ui/src/app/components/common/input/text/text.component.html
index 41f02df64..92925efc3 100644
--- a/src-ui/src/app/components/common/input/text/text.component.html
+++ b/src-ui/src/app/components/common/input/text/text.component.html
@@ -1,6 +1,6 @@
 <div class="mb-3">
   <label class="form-label" [for]="inputId">{{title}}</label>
-  <input #inputField type="text" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)">
+  <input #inputField type="text" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled">
   <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
   <div class="invalid-feedback">
     {{error}}
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index 96a4e471f..6b729ee4c 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -5,7 +5,7 @@
       <div class="input-group-text" i18n>of {{previewNumPages}}</div>
     </div>
 
-    <button type="button" class="btn btn-sm btn-outline-danger me-2 ms-auto" (click)="delete()" *ifPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
+    <button *ifOwner="document?.owner" type="button" class="btn btn-sm btn-outline-danger me-2 ms-auto" (click)="delete()">
         <svg class="buttonicon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#trash" />
         </svg><span class="d-none d-lg-inline ps-1" i18n>Delete</span>
@@ -28,7 +28,7 @@
 
     </div>
 
-    <button type="button" class="btn btn-sm btn-outline-primary me-2" (click)="redoOcr()">
+    <button *ifOwner="document?.owner" type="button" class="btn btn-sm btn-outline-primary me-2" (click)="redoOcr()">
         <svg class="buttonicon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#arrow-counterclockwise" />
         </svg><span class="d-none d-lg-inline ps-1" i18n>Redo OCR</span>
@@ -191,9 +191,11 @@
 
             <div [ngbNavOutlet]="nav" class="mt-2"></div>
 
-            <button type="button" class="btn btn-outline-secondary" (click)="discard()" i18n [disabled]="networkActive || !(isDirty$ | async)">Discard</button>&nbsp;
-            <button type="button" class="btn btn-outline-primary" (click)="saveEditNext()" *ngIf="hasNext()" i18n [disabled]="networkActive || !(isDirty$ | async) || error">Save & next</button>&nbsp;
-            <button type="submit" class="btn btn-primary" *ifPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }" i18n [disabled]="networkActive || !(isDirty$ | async) || error">Save</button>&nbsp;
+            <ng-container action="PermissionAction.Change" *ifObjectPermissions="document">
+                <button type="button" class="btn btn-outline-secondary" (click)="discard()" i18n [disabled]="networkActive || !(isDirty$ | async)">Discard</button>&nbsp;
+                <button type="button" class="btn btn-outline-primary" (click)="saveEditNext()" *ngIf="hasNext()" i18n [disabled]="networkActive || !(isDirty$ | async) || error">Save & next</button>&nbsp;
+                <button type="submit" class="btn btn-primary" *ifPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }" i18n [disabled]="networkActive || !(isDirty$ | async) || error">Save</button>&nbsp;
+            </ng-container>
         </form>
     </div>
 
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index 07f03ece6..8d564f4b5 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -306,6 +306,7 @@ export class DocumentDetailComponent
         .map((p) => p[0]),
     }
     this.documentForm.patchValue(doc)
+    if (!this.userCanEdit) this.documentForm.disable()
   }
 
   createDocumentType(newName: string) {
@@ -591,4 +592,14 @@ export class DocumentDetailComponent
       })
     )
   }
+
+  get userCanEdit(): boolean {
+    return (
+      !this.document ||
+      this.permissionsService.currentUserHasObjectPermissions(
+        PermissionAction.Change,
+        this.document
+      )
+    )
+  }
 }
diff --git a/src-ui/src/app/directives/if-object-permissions.directive.ts b/src-ui/src/app/directives/if-object-permissions.directive.ts
new file mode 100644
index 000000000..c897b848d
--- /dev/null
+++ b/src-ui/src/app/directives/if-object-permissions.directive.ts
@@ -0,0 +1,54 @@
+import {
+  Directive,
+  Input,
+  OnChanges,
+  OnInit,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core'
+import { ObjectWithPermissions } from '../data/object-with-permissions'
+import {
+  PermissionAction,
+  PermissionsService,
+} from '../services/permissions.service'
+
+@Directive({
+  selector: '[ifObjectPermissions]',
+})
+export class IfObjectPermissionsDirective implements OnInit, OnChanges {
+  // The role the user must have
+  @Input()
+  ifObjectPermissions: ObjectWithPermissions
+
+  @Input()
+  action: PermissionAction
+
+  /**
+   * @param {ViewContainerRef} viewContainerRef -- The location where we need to render the templateRef
+   * @param {TemplateRef<any>} templateRef -- The templateRef to be potentially rendered
+   * @param {PermissionsService} permissionsService -- Will give us access to the permissions a user has
+   */
+  constructor(
+    private viewContainerRef: ViewContainerRef,
+    private templateRef: TemplateRef<any>,
+    private permissionsService: PermissionsService
+  ) {}
+
+  public ngOnInit(): void {
+    if (
+      !this.ifObjectPermissions ||
+      this.permissionsService.currentUserHasObjectPermissions(
+        this.action,
+        this.ifObjectPermissions
+      )
+    ) {
+      this.viewContainerRef.createEmbeddedView(this.templateRef)
+    } else {
+      this.viewContainerRef.clear()
+    }
+  }
+
+  public ngOnChanges(): void {
+    this.ngOnInit()
+  }
+}
diff --git a/src-ui/src/app/directives/if-owner.directive.ts b/src-ui/src/app/directives/if-owner.directive.ts
index 51a2c910f..86fcd3457 100644
--- a/src-ui/src/app/directives/if-owner.directive.ts
+++ b/src-ui/src/app/directives/if-owner.directive.ts
@@ -7,7 +7,7 @@ import {
   ViewContainerRef,
 } from '@angular/core'
 import { PaperlessUser } from '../data/paperless-user'
-import { SettingsService } from '../services/settings.service'
+import { PermissionsService } from '../services/permissions.service'
 
 @Directive({
   selector: '[ifOwner]',
@@ -25,11 +25,14 @@ export class IfOwnerDirective implements OnInit, OnChanges {
   constructor(
     private viewContainerRef: ViewContainerRef,
     private templateRef: TemplateRef<any>,
-    private settings: SettingsService
+    private permissionsService: PermissionsService
   ) {}
 
   public ngOnInit(): void {
-    if (!this.ifOwner || this.ifOwner?.id === this.settings.currentUser.id) {
+    if (
+      !this.ifOwner ||
+      this.permissionsService.currentUserIsOwner(this.ifOwner)
+    ) {
       this.viewContainerRef.createEmbeddedView(this.templateRef)
     } else {
       this.viewContainerRef.clear()
diff --git a/src-ui/src/app/services/permissions.service.ts b/src-ui/src/app/services/permissions.service.ts
index 4302f1b27..0f7edee22 100644
--- a/src-ui/src/app/services/permissions.service.ts
+++ b/src-ui/src/app/services/permissions.service.ts
@@ -1,4 +1,6 @@
 import { Injectable } from '@angular/core'
+import { ObjectWithPermissions } from '../data/object-with-permissions'
+import { PaperlessUser } from '../data/paperless-user'
 
 export enum PermissionAction {
   Add = 'add',
@@ -33,15 +35,30 @@ export interface PaperlessPermission {
 })
 export class PermissionsService {
   private permissions: string[]
+  private currentUser: PaperlessUser
 
-  public initialize(permissions: string[]) {
+  public initialize(permissions: string[], currentUser: PaperlessUser) {
     this.permissions = permissions
+    this.currentUser = currentUser
   }
 
   public currentUserCan(permission: PaperlessPermission): boolean {
     return this.permissions.includes(this.getPermissionCode(permission))
   }
 
+  public currentUserIsOwner(owner: PaperlessUser): boolean {
+    return owner?.id === this.currentUser.id
+  }
+
+  public currentUserHasObjectPermissions(
+    action: string,
+    object: ObjectWithPermissions
+  ): boolean {
+    return (object.permissions[action] as Array<number>)?.includes(
+      this.currentUser.id
+    )
+  }
+
   public getPermissionCode(permission: PaperlessPermission): string {
     return permission.type.replace('%s', permission.action)
   }
diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts
index fbf8b9320..72a34ea15 100644
--- a/src-ui/src/app/services/settings.service.ts
+++ b/src-ui/src/app/services/settings.service.ts
@@ -79,7 +79,10 @@ export class SettingsService {
           id: uisettings['user_id'],
           username: uisettings['username'],
         }
-        this.permissionsService.initialize(uisettings.permissions)
+        this.permissionsService.initialize(
+          uisettings.permissions,
+          this.currentUser
+        )
       })
     )
   }
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index ab62dff25..a9169f038 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -255,6 +255,7 @@ a, a:hover,
 .paperless-input-tags {
   .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
     background-color: transparent;
+    border-color: transparent;
   }
 
   .ng-select.ng-select-multiple .ng-select-container .ng-value-container {