paperless-ngx/src-ui/src/app/components/manage/settings/settings.component.html

<app-page-header title="Settings" i18n-title>
  <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()"><ng-container i18n>Start tour</ng-container></button>
  <a *appIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }" class="btn btn-sm btn-primary ms-3" href="admin/" target="_blank">
      <ng-container i18n>Open Django Admin</ng-container>
      <svg class="sidebaricon ms-1" fill="currentColor">
        <use xlink:href="assets/bootstrap-icons.svg#arrow-up-right"/>
      </svg>
  </a>
</app-page-header>

<form [formGroup]="settingsForm" (ngSubmit)="saveSettings()">

  <ul ngbNav #nav="ngbNav" (navChange)="onNavChange($event)" [(activeId)]="activeNavID" class="nav-tabs">
    <li [ngbNavItem]="SettingsNavIDs.General">
      <a ngbNavLink i18n>General</a>
      <ng-template ngbNavContent>

        <h4 i18n>Appearance</h4>

        <div class="row mb-3">
          <div class="col-md-3 col-form-label">
            <span i18n>Display language</span>
          </div>
          <div class="col">

            <select class="form-select" formControlName="displayLanguage">
              <option *ngFor="let lang of displayLanguageOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code && currentLocale !== 'en-US'"> - {{lang.englishName}}</span></option>
            </select>

            <small *ngIf="displayLanguageIsDirty" class="form-text text-primary" i18n>You need to reload the page after applying a new language.</small>

          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-3 col-form-label">
            <span i18n>Date display</span>
          </div>
          <div class="col">

            <select class="form-select" formControlName="dateLocale">
              <option *ngFor="let lang of dateLocaleOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code"> - {{today | customDate:'shortDate':null:lang.code}}</span></option>
            </select>

          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-3 col-form-label">
            <span i18n>Date format</span>
          </div>
          <div class="col">

            <div class="form-check">
              <input type="radio" id="dateFormatShort" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="shortDate">
              <label class="form-check-label" for="dateFormatShort" i18n>Short: {{today | customDate:'shortDate':null:computedDateLocale}}</label>
            </div>
            <div class="form-check">
              <input type="radio" id="dateFormatMedium" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="mediumDate">
              <label class="form-check-label" for="dateFormatMedium" i18n>Medium: {{today | customDate:'mediumDate':null:computedDateLocale}}</label>
            </div>
            <div class="form-check">
              <input type="radio" id="dateFormatLong" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="longDate">
              <label class="form-check-label" for="dateFormatLong" i18n>Long: {{today | customDate:'longDate':null:computedDateLocale}}</label>
            </div>

          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-3 col-form-label">
            <span i18n>Items per page</span>
          </div>
          <div class="col">

            <select class="form-select" formControlName="documentListItemPerPage">
              <option [ngValue]="10">10</option>
              <option [ngValue]="25">25</option>
              <option [ngValue]="50">50</option>
              <option [ngValue]="100">100</option>
            </select>

          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-3 col-form-label">
            <span i18n>Document editor</span>
          </div>
          <div class="col">

            <app-input-check i18n-title title="Use PDF viewer provided by the browser" i18n-hint hint="This is usually faster for displaying large PDF documents, but it might not work on some browsers." formControlName="useNativePdfViewer"></app-input-check>

          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-3 col-form-label">
            <span i18n>Sidebar</span>
          </div>
          <div class="col">

            <app-input-check i18n-title title="Use 'slim' sidebar (icons only)" formControlName="slimSidebarEnabled"></app-input-check>

          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-3 col-form-label">
            <span i18n>Dark mode</span>
          </div>
          <div class="col">
            <app-input-check i18n-title title="Use system settings" formControlName="darkModeUseSystem"></app-input-check>
            <app-input-check [hidden]="settingsForm.value.darkModeUseSystem" i18n-title title="Enable dark mode" formControlName="darkModeEnabled"></app-input-check>
            <app-input-check i18n-title title="Invert thumbnails in dark mode" formControlName="darkModeInvertThumbs"></app-input-check>
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-3 col-form-label">
            <span i18n>Theme Color</span>
          </div>
          <div class="col col-md-3">
            <app-input-color i18n-title formControlName="themeColor" [error]="error?.color"></app-input-color>
          </div>
          <div class="col-2">
            <button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
              <svg fill="currentColor" class="buttonicon-sm me-1">
                <use xlink:href="assets/bootstrap-icons.svg#x"/>
              </svg><ng-container i18n>Reset</ng-container>
            </button>
          </div>
        </div>

        <h4 class="mt-4" id="update-checking" i18n>Update checking</h4>

        <div class="row mb-3">
          <div class="offset-md-3 col">
            <p i18n>
              Update checking works by pinging the public <a href="https://api.github.com/repos/paperless-ngx/paperless-ngx/releases/latest" target="_blank" rel="noopener noreferrer">Github API</a> for the latest release to determine whether a new version is available.<br/>
              Actual updating of the app must still be performed manually.
            </p>
            <p i18n>
              <em>No tracking data is collected by the app in any way.</em>
            </p>
            <app-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled" i18n-hint hint="Note that for users of third-party containers e.g. linuxserver.io this notification may be 'ahead' of the current third-party release."></app-input-check>
          </div>
        </div>

        <h4 class="mt-4" i18n>Bulk editing</h4>

        <div class="row mb-3">
          <div class="offset-md-3 col">
            <app-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></app-input-check>
            <app-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></app-input-check>
          </div>
        </div>

        <h4 class="mt-4" i18n>Notes</h4>

        <div class="row mb-3">
          <div class="offset-md-3 col">
            <app-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></app-input-check>
          </div>
        </div>

      </ng-template>
    </li>

    <li [ngbNavItem]="SettingsNavIDs.Notifications">
      <a ngbNavLink i18n>Notifications</a>
      <ng-template ngbNavContent>

        <h4 i18n>Document processing</h4>

        <div class="row mb-3">
          <div class="offset-md-3 col">
            <app-input-check i18n-title title="Show notifications when new documents are detected" formControlName="notificationsConsumerNewDocument"></app-input-check>
            <app-input-check i18n-title title="Show notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess"></app-input-check>
            <app-input-check i18n-title title="Show notifications when document processing fails" formControlName="notificationsConsumerFailed"></app-input-check>
            <app-input-check i18n-title title="Suppress notifications on dashboard" formControlName="notificationsConsumerSuppressOnDashboard" i18n-hint hint="This will suppress all messages about document processing status on the dashboard."></app-input-check>
          </div>
        </div>

      </ng-template>
    </li>

    <li [ngbNavItem]="SettingsNavIDs.SavedViews" (mouseover)="maybeInitializeTab(SettingsNavIDs.SavedViews)" (focusin)="maybeInitializeTab(SettingsNavIDs.SavedViews)">
      <a ngbNavLink i18n>Saved views</a>
      <ng-template ngbNavContent>

        <h4 i18n>Settings</h4>
        <div class="row mb-3">
          <div class="offset-md-3 col">
            <app-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></app-input-check>
          </div>
        </div>

        <h4 i18n>Views</h4>
        <div formGroupName="savedViews">

            <div *ngFor="let view of savedViews" [formGroupName]="view.id" class="row">
              <div class="mb-3 col">
                <label class="form-label" for="name_{{view.id}}" i18n>Name</label>
                <input type="text" class="form-control" formControlName="name" id="name_{{view.id}}">
              </div>

              <div class="mb-2 col">
                <label class="form-label" for="show_on_dashboard_{{view.id}}" i18n>Appears on</label>
                <div class="form-check form-switch">
                  <input type="checkbox" class="form-check-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
                  <label class="form-check-label" for="show_on_dashboard_{{view.id}}" i18n>Show on dashboard</label>
                </div>
                <div class="form-check form-switch">
                  <input type="checkbox" class="form-check-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
                  <label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
                </div>
              </div>

              <div class="mb-2 col-auto">
                <label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
                <button type="button" class="btn btn-sm btn-outline-danger form-control" (click)="deleteSavedView(view)" *appIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }" i18n>Delete</button>
              </div>
            </div>

            <div *ngIf="savedViews && savedViews.length === 0" i18n>No saved views defined.</div>

            <div *ngIf="!savedViews">
              <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
              <div class="visually-hidden" i18n>Loading...</div>
            </div>

        </div>

      </ng-template>
    </li>

    <li *appIfPermissions="{ 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 *appIfPermissions="{ 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 *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" class="btn btn-sm btn-primary" type="button" (click)="editMailAccount(account)" i18n>Edit</button>
                        <button *appIfPermissions="{ 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 *appIfPermissions="{ 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 *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" class="btn btn-sm btn-primary" type="button" (click)="editMailRule(rule)" i18n>Edit</button>
                        <button *appIfPermissions="{ 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" *appIfPermissions="{ 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>

  <button type="submit" class="btn btn-primary mb-2" *appIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
</form>