Merge branch 'dev' into feature-global-ui-permissions

diff --cc src-ui/src/app/app-routing.module.ts
index c95d1ea7e206f8cd6ff943837957e051e461ffca,084bc4a0b3fc88ce60ecf382bff5709dead7ed59..10a4ca301213d94e8cd1e8c30eb748c021b7cead
--- 1/src-ui/src/app/app-routing.module.ts
--- 2/src-ui/src/app/app-routing.module.ts
+++ b/src-ui/src/app/app-routing.module.ts
@@@ -135,37 -46,12 +135,42 @@@ const routes: Routes = 
          path: 'settings',
          component: SettingsComponent,
          canDeactivate: [DirtyFormGuard],
 +        canActivate: [PermissionsGuard],
 +        data: {
 +          requiredPermission: {
 +            action: PermissionAction.View,
 +            type: PermissionType.UISettings,
 +          },
 +        },
 +      },
 +      {
 +        path: 'tasks',
 +        component: TasksComponent,
 +        canActivate: [PermissionsGuard],
 +        data: {
 +          requiredPermission: {
 +            action: PermissionAction.View,
 +            type: PermissionType.PaperlessTask,
 +          },
 +        },
 +      },
 +      {
 +        path: 'settings/:section',
 +        component: SettingsComponent,
 +        canDeactivate: [DirtyFormGuard],
 +        canActivate: [PermissionsGuard],
 +        data: {
 +          requiredPermission: {
 +            action: PermissionAction.View,
 +            type: PermissionType.UISettings,
 +          },
 +        },
        },
+       {
+         path: 'settings/:section',
+         component: SettingsComponent,
+         canDeactivate: [DirtyFormGuard],
+       },
        { path: 'tasks', component: TasksComponent },
      ],
    },

diff --cc src-ui/src/app/components/manage/settings/settings.component.html
index 72a995fe93ee29c9876c15fba9c6b9ecc8c9e997,0286e3561bb62b8dec96efe1b52068b47a4dcb2f..36ef37704718b88ec1af9ba2f971aab3a4495ce9
--- 1/src-ui/src/app/components/manage/settings/settings.component.html
--- 2/src-ui/src/app/components/manage/settings/settings.component.html
+++ b/src-ui/src/app/components/manage/settings/settings.component.html
@@@ -227,179 -227,89 +227,263 @@@
        </ng-template>
      </li>
  
+     <li [ngbNavItem]="SettingsNavIDs.Mail" (mouseover)="maybeInitializeTab(SettingsNavIDs.Mail)" (focusin)="maybeInitializeTab(SettingsNavIDs.Mail)">
+       <a ngbNavLink i18n>Mail</a>
+       <ng-template ngbNavContent>
+ 
+         <ng-container *ngIf="mailAccounts && mailRules">
+           <h4>
+             <ng-container i18n>Mail accounts</ng-container>
+             <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editMailAccount()">
+               <svg class="sidebaricon me-1" fill="currentColor">
+                 <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
+               </svg>
+               <ng-container i18n>Add Account</ng-container>
+             </button>
+           </h4>
+           <ul class="list-group" formGroupName="mailAccounts">
+ 
+               <li class="list-group-item">
+                 <div class="row">
+                   <div class="col" i18n>Name</div>
+                   <div class="col" i18n>Server</div>
+                   <div class="col" i18n>Actions</div>
+                 </div>
+               </li>
+ 
+               <li *ngFor="let account of mailAccounts" class="list-group-item" [formGroupName]="account.id">
+                 <div class="row">
+                   <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editMailAccount(account)">{{account.name}}</button></div>
+                   <div class="col d-flex align-items-center">{{account.imap_server}}</div>
+                   <div class="col">
+                     <div class="btn-group">
+                       <button class="btn btn-sm btn-primary" type="button" (click)="editMailAccount(account)" i18n>Edit</button>
+                       <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailAccount(account)" i18n>Delete</button>
+                     </div>
+                   </div>
+                 </div>
+               </li>
+ 
+               <div *ngIf="mailAccounts.length == 0" i18n>No mail accounts defined.</div>
+           </ul>
+ 
+           <h4 class="mt-4">
+             <ng-container i18n>Mail rules</ng-container>
+             <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editMailRule()">
+               <svg class="sidebaricon me-1" fill="currentColor">
+                 <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
+               </svg>
+               <ng-container i18n>Add Rule</ng-container>
+             </button>
+           </h4>
+           <ul class="list-group" formGroupName="mailRules">
+ 
+               <li class="list-group-item">
+                 <div class="row">
+                   <div class="col" i18n>Name</div>
+                   <div class="col" i18n>Account</div>
+                   <div class="col" i18n>Actions</div>
+                 </div>
+               </li>
+ 
+               <li *ngFor="let rule of mailRules" class="list-group-item" [formGroupName]="rule.id">
+                 <div class="row">
+                   <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editMailRule(rule)">{{rule.name}}</button></div>
+                   <div class="col d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>
+                   <div class="col">
+                     <div class="btn-group">
+                       <button class="btn btn-sm btn-primary" type="button" (click)="editMailRule(rule)" i18n>Edit</button>
+                       <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailRule(rule)" i18n>Delete</button>
+                     </div>
+                   </div>
+                 </div>
+               </li>
+ 
+               <div *ngIf="mailRules.length == 0" i18n>No mail rules defined.</div>
+           </ul>
+         </ng-container>
+ 
+         <div *ngIf="!mailAccounts || !mailRules">
+           <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+           <div class="visually-hidden" i18n>Loading...</div>
+         </div>
+ 
+       </ng-template>
+     </li>
++
 +    <li *ifPermissions="{ action: PermissionAction.View, type: PermissionType.MailRule }" [ngbNavItem]="SettingsNavIDs.Mail" (mouseover)="maybeInitializeTab(SettingsNavIDs.Mail)" (focusin)="maybeInitializeTab(SettingsNavIDs.Mail)">
 +      <a ngbNavLink i18n>Mail</a>
 +      <ng-template ngbNavContent>
 +
 +        <ng-container *ngIf="mailAccounts && mailRules">
 +          <ng-container *ifPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }">
 +            <h4>
 +              <ng-container i18n>Mail accounts</ng-container>
 +              <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editMailAccount()">
 +                <svg class="sidebaricon me-1" fill="currentColor">
 +                  <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
 +                </svg>
 +                <ng-container i18n>Add Account</ng-container>
 +              </button>
 +            </h4>
 +            <ul class="list-group" formGroupName="mailAccounts">
 +
 +                <li class="list-group-item">
 +                  <div class="row">
 +                    <div class="col" i18n>Name</div>
 +                    <div class="col" i18n>Server</div>
 +                    <div class="col" i18n>Actions</div>
 +                  </div>
 +                </li>
 +
 +                <li *ngFor="let account of mailAccounts" class="list-group-item" [formGroupName]="account.id">
 +                  <div class="row">
 +                    <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editMailAccount(account)">{{account.name}}</button></div>
 +                    <div class="col d-flex align-items-center">{{account.imap_server}}</div>
 +                    <div class="col">
 +                      <div class="btn-group">
 +                        <button *ifPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" class="btn btn-sm btn-primary" type="button" (click)="editMailAccount(account)" i18n>Edit</button>
 +                        <button *ifPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailAccount(account)" i18n>Delete</button>
 +                      </div>
 +                    </div>
 +                  </div>
 +                </li>
 +
 +                <div *ngIf="mailAccounts.length == 0" i18n>No mail accounts defined.</div>
 +            </ul>
 +          </ng-container>
 +
 +          <ng-container *ifPermissions="{ action: PermissionAction.View, type: PermissionType.MailRule }">
 +            <h4 class="mt-4">
 +              <ng-container i18n>Mail rules</ng-container>
 +              <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editMailRule()">
 +                <svg class="sidebaricon me-1" fill="currentColor">
 +                  <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
 +                </svg>
 +                <ng-container i18n>Add Rule</ng-container>
 +              </button>
 +            </h4>
 +            <ul class="list-group" formGroupName="mailRules">
 +
 +                <li class="list-group-item">
 +                  <div class="row">
 +                    <div class="col" i18n>Name</div>
 +                    <div class="col" i18n>Account</div>
 +                    <div class="col" i18n>Actions</div>
 +                  </div>
 +                </li>
 +
 +                <li *ngFor="let rule of mailRules" class="list-group-item" [formGroupName]="rule.id">
 +                  <div class="row">
 +                    <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editMailRule(rule)">{{rule.name}}</button></div>
 +                    <div class="col d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>
 +                    <div class="col">
 +                      <div class="btn-group">
 +                        <button *ifPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" class="btn btn-sm btn-primary" type="button" (click)="editMailRule(rule)" i18n>Edit</button>
 +                        <button *ifPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailRule(rule)" i18n>Delete</button>
 +                      </div>
 +                    </div>
 +                  </div>
 +                </li>
 +
 +                <div *ngIf="mailRules.length == 0" i18n>No mail rules defined.</div>
 +            </ul>
 +          </ng-container>
 +        </ng-container>
 +
 +        <div *ngIf="!mailAccounts || !mailRules">
 +          <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
 +          <div class="visually-hidden" i18n>Loading...</div>
 +        </div>
 +
 +      </ng-template>
 +    </li>
 +
 +    <li [ngbNavItem]="SettingsNavIDs.UsersGroups" *ifPermissions="{ action: PermissionAction.Add, type: PermissionType.User }" (mouseover)="maybeInitializeTab(SettingsNavIDs.UsersGroups)" (focusin)="maybeInitializeTab(SettingsNavIDs.UsersGroups)">
 +      <a ngbNavLink i18n>Users & Groups</a>
 +      <ng-template ngbNavContent>
 +
 +      <ng-container *ngIf="users && groups">
 +        <h4 class="d-flex">
 +          <ng-container i18n>Users</ng-container>
 +          <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editUser()">
 +            <svg class="sidebaricon me-1" fill="currentColor">
 +              <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
 +            </svg>
 +            <ng-container i18n>Add User</ng-container>
 +          </button>
 +        </h4>
 +        <ul class="list-group" formGroupName="usersGroup">
 +
 +          <li class="list-group-item">
 +            <div class="row">
 +              <div class="col" i18n>Username</div>
 +              <div class="col" i18n>Name</div>
 +              <div class="col" i18n>Groups</div>
 +              <div class="col" i18n>Actions</div>
 +            </div>
 +          </li>
 +
 +          <li *ngFor="let user of users" class="list-group-item" [formGroupName]="user.id">
 +            <div class="row">
 +              <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editUser(user)">{{user.username}}</button></div>
 +              <div class="col d-flex align-items-center">{{user.first_name}} {{user.last_name}}</div>
 +              <div class="col d-flex align-items-center">{{user.groups?.map(getGroupName, this).join(', ')}}</div>
 +              <div class="col">
 +                <div class="btn-group">
 +                  <button class="btn btn-sm btn-primary" type="button" (click)="editUser(user)" i18n>Edit</button>
 +                  <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" i18n>Delete</button>
 +                </div>
 +              </div>
 +            </div>
 +          </li>
 +        </ul>
 +
 +        <h4 class="mt-4 d-flex">
 +          <ng-container i18n>Groups</ng-container>
 +          <button type="button" class="btn btn-sm btn-primary ms-4" (click)="editGroup()">
 +            <svg class="sidebaricon me-1" fill="currentColor">
 +              <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
 +            </svg>
 +            <ng-container i18n>Add Group</ng-container>
 +          </button>
 +        </h4>
 +        <ul *ngIf="groups.length > 0" class="list-group" formGroupName="groupsGroup">
 +
 +          <li class="list-group-item">
 +            <div class="row">
 +              <div class="col" i18n>Name</div>
 +              <div class="col"></div>
 +              <div class="col"></div>
 +              <div class="col" i18n>Actions</div>
 +            </div>
 +          </li>
 +
 +          <li *ngFor="let group of groups" class="list-group-item" [formGroupName]="group.id">
 +            <div class="row">
 +              <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editGroup(group)">{{group.name}}</button></div>
 +              <div class="col"></div>
 +              <div class="col"></div>
 +              <div class="col">
 +                <div class="btn-group">
 +                  <button class="btn btn-sm btn-primary" type="button" (click)="editGroup(group)" i18n>Edit</button>
 +                  <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" i18n>Delete</button>
 +                </div>
 +              </div>
 +            </div>
 +          </li>
 +        </ul>
 +
 +        <div *ngIf="groups.length == 0">No groups defined</div>
 +      </ng-container>
 +
 +      <div *ngIf="!users || !groups">
 +        <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
 +        <div class="visually-hidden" i18n>Loading...</div>
 +      </div>
 +
 +      </ng-template>
 +    </li>
    </ul>
  
    <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>

diff --cc src-ui/src/app/components/manage/settings/settings.component.ts
index 917dbf4a0ac762b813511c1a5d6f45e94f6fcc5a,2d23874fd7518211340e08969d775466bd8b62b8..dded419c7c5b7ca2552a3f0ab5fd3edd2db6a152
--- 1/src-ui/src/app/components/manage/settings/settings.component.ts
--- 2/src-ui/src/app/components/manage/settings/settings.component.ts
+++ b/src-ui/src/app/components/manage/settings/settings.component.ts
@@@ -29,16 -29,6 +29,15 @@@ import { SETTINGS_KEYS } from 'src/app/
  import { ActivatedRoute, Router } from '@angular/router'
  import { ViewportScroller } from '@angular/common'
  import { TourService } from 'ngx-ui-tour-ng-bootstrap'
- import { Results } from 'src/app/data/results'
 +import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 +import { NgbModal, NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap'
 +import { UserService } from 'src/app/services/rest/user.service'
 +import { GroupService } from 'src/app/services/rest/group.service'
 +import { PaperlessUser } from 'src/app/data/paperless-user'
 +import { PaperlessGroup } from 'src/app/data/paperless-group'
 +import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
 +import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 +import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
  import { PaperlessMailAccount } from 'src/app/data/paperless-mail-account'
  import { PaperlessMailRule } from 'src/app/data/paperless-mail-rule'
  import { MailAccountService } from 'src/app/services/rest/mail-account.service'