Apply Prettier (#2238)

src/popup/components/action-buttons.component.html

@@ -1,41 +1,87 @@
-<span class="row-btn" (click)="view()" appStopClick appStopProp appA11yTitle="{{'view' | i18n}}" *ngIf="showView">
-    <i class="fa fa-lg fa-list-alt" aria-hidden="true"></i>
+<span
+  class="row-btn"
+  (click)="view()"
+  appStopClick
+  appStopProp
+  appA11yTitle="{{ 'view' | i18n }}"
+  *ngIf="showView"
+>
+  <i class="fa fa-lg fa-list-alt" aria-hidden="true"></i>
 </span>
 <ng-container *ngIf="cipher.type === cipherType.Login">
-    <span class="row-btn" appStopClick appStopProp appA11yTitle="{{'launch' | i18n}}" (click)="launchCipher()"
-        *ngIf="!showView" [ngClass]="{disabled: !cipher.login.canLaunch}">
-        <i class="fa fa-lg fa-share-square-o" aria-hidden="true"></i>
-    </span>
-    <span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copyUsername' | i18n}}"
-        (click)="copy(cipher, cipher.login.username, 'username', 'Username')"
-        [ngClass]="{disabled: !cipher.login.username}">
-        <i class="fa fa-lg fa-user" aria-hidden="true"></i>
-    </span>
-    <span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copyPassword' | i18n}}"
-        (click)="copy(cipher, cipher.login.password, 'password', 'Password')"
-        [ngClass]="{disabled: (!cipher.login.password || !cipher.viewPassword)}">
-        <i class="fa fa-lg fa-key" aria-hidden="true"></i>
-    </span>
-    <span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copyVerificationCode' | i18n}}"
-        (click)="copy(cipher, cipher.login.totp, 'verificationCodeTotp', 'TOTP')"
-        [ngClass]="{disabled: (!displayTotpCopyButton(cipher))}">
-        <i class="fa fa-lg fa-clock-o" aria-hidden="true"></i>
-    </span>
+  <span
+    class="row-btn"
+    appStopClick
+    appStopProp
+    appA11yTitle="{{ 'launch' | i18n }}"
+    (click)="launchCipher()"
+    *ngIf="!showView"
+    [ngClass]="{ disabled: !cipher.login.canLaunch }"
+  >
+    <i class="fa fa-lg fa-share-square-o" aria-hidden="true"></i>
+  </span>
+  <span
+    class="row-btn"
+    appStopClick
+    appStopProp
+    appA11yTitle="{{ 'copyUsername' | i18n }}"
+    (click)="copy(cipher, cipher.login.username, 'username', 'Username')"
+    [ngClass]="{ disabled: !cipher.login.username }"
+  >
+    <i class="fa fa-lg fa-user" aria-hidden="true"></i>
+  </span>
+  <span
+    class="row-btn"
+    appStopClick
+    appStopProp
+    appA11yTitle="{{ 'copyPassword' | i18n }}"
+    (click)="copy(cipher, cipher.login.password, 'password', 'Password')"
+    [ngClass]="{ disabled: !cipher.login.password || !cipher.viewPassword }"
+  >
+    <i class="fa fa-lg fa-key" aria-hidden="true"></i>
+  </span>
+  <span
+    class="row-btn"
+    appStopClick
+    appStopProp
+    appA11yTitle="{{ 'copyVerificationCode' | i18n }}"
+    (click)="copy(cipher, cipher.login.totp, 'verificationCodeTotp', 'TOTP')"
+    [ngClass]="{ disabled: !displayTotpCopyButton(cipher) }"
+  >
+    <i class="fa fa-lg fa-clock-o" aria-hidden="true"></i>
+  </span>
 </ng-container>
 <ng-container *ngIf="cipher.type === cipherType.Card">
-    <span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copyNumber' | i18n}}"
-        (click)="copy(cipher, cipher.card.number, 'number', 'Card Number')" [ngClass]="{disabled: !cipher.card.number}">
-        <i class="fa fa-lg fa-hashtag" aria-hidden="true"></i>
-    </span>
-    <span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copySecurityCode' | i18n}}"
-        (click)="copy(cipher, cipher.card.code, 'securityCode', 'Security Code')"
-        [ngClass]="{disabled: !cipher.card.code}">
-        <i class="fa fa-lg fa-key" aria-hidden="true"></i>
-    </span>
+  <span
+    class="row-btn"
+    appStopClick
+    appStopProp
+    appA11yTitle="{{ 'copyNumber' | i18n }}"
+    (click)="copy(cipher, cipher.card.number, 'number', 'Card Number')"
+    [ngClass]="{ disabled: !cipher.card.number }"
+  >
+    <i class="fa fa-lg fa-hashtag" aria-hidden="true"></i>
+  </span>
+  <span
+    class="row-btn"
+    appStopClick
+    appStopProp
+    appA11yTitle="{{ 'copySecurityCode' | i18n }}"
+    (click)="copy(cipher, cipher.card.code, 'securityCode', 'Security Code')"
+    [ngClass]="{ disabled: !cipher.card.code }"
+  >
+    <i class="fa fa-lg fa-key" aria-hidden="true"></i>
+  </span>
 </ng-container>
 <ng-container *ngIf="cipher.type === cipherType.SecureNote">
-    <span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copyNote' | i18n}}"
-        (click)="copy(cipher, cipher.notes, 'note', 'Note')" [ngClass]="{disabled: !cipher.notes}">
-        <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
-    </span>
+  <span
+    class="row-btn"
+    appStopClick
+    appStopProp
+    appA11yTitle="{{ 'copyNote' | i18n }}"
+    (click)="copy(cipher, cipher.notes, 'note', 'Note')"
+    [ngClass]="{ disabled: !cipher.notes }"
+  >
+    <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+  </span>
 </ng-container>

src/popup/components/action-buttons.component.ts

@@ -1,82 +1,88 @@
-import {
-    Component,
-    EventEmitter,
-    Input,
-    Output,
-} from '@angular/core';
+import { Component, EventEmitter, Input, Output } from "@angular/core";
 
-import { CipherRepromptType } from 'jslib-common/enums/cipherRepromptType';
-import { CipherType } from 'jslib-common/enums/cipherType';
-import { EventType } from 'jslib-common/enums/eventType';
+import { CipherRepromptType } from "jslib-common/enums/cipherRepromptType";
+import { CipherType } from "jslib-common/enums/cipherType";
+import { EventType } from "jslib-common/enums/eventType";
 
-import { CipherView } from 'jslib-common/models/view/cipherView';
+import { CipherView } from "jslib-common/models/view/cipherView";
 
-import { EventService } from 'jslib-common/abstractions/event.service';
-import { I18nService } from 'jslib-common/abstractions/i18n.service';
-import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
-import { TotpService } from 'jslib-common/abstractions/totp.service';
-import { UserService } from 'jslib-common/abstractions/user.service';
+import { EventService } from "jslib-common/abstractions/event.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { PasswordRepromptService } from "jslib-common/abstractions/passwordReprompt.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { TotpService } from "jslib-common/abstractions/totp.service";
+import { UserService } from "jslib-common/abstractions/user.service";
 
 @Component({
-    selector: 'app-action-buttons',
-    templateUrl: 'action-buttons.component.html',
+  selector: "app-action-buttons",
+  templateUrl: "action-buttons.component.html",
 })
 export class ActionButtonsComponent {
-    @Output() onView = new EventEmitter<CipherView>();
-    @Output() launchEvent = new EventEmitter<CipherView>();
-    @Input() cipher: CipherView;
-    @Input() showView = false;
+  @Output() onView = new EventEmitter<CipherView>();
+  @Output() launchEvent = new EventEmitter<CipherView>();
+  @Input() cipher: CipherView;
+  @Input() showView = false;
 
-    cipherType = CipherType;
-    userHasPremiumAccess = false;
+  cipherType = CipherType;
+  userHasPremiumAccess = false;
 
-    constructor(private i18nService: I18nService,
-        private platformUtilsService: PlatformUtilsService, private eventService: EventService,
-        private totpService: TotpService, private userService: UserService,
-        private passwordRepromptService: PasswordRepromptService) { }
+  constructor(
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService,
+    private eventService: EventService,
+    private totpService: TotpService,
+    private userService: UserService,
+    private passwordRepromptService: PasswordRepromptService
+  ) {}
 
-    async ngOnInit() {
-        this.userHasPremiumAccess = await this.userService.canAccessPremium();
+  async ngOnInit() {
+    this.userHasPremiumAccess = await this.userService.canAccessPremium();
+  }
+
+  launchCipher() {
+    this.launchEvent.emit(this.cipher);
+  }
+
+  async copy(cipher: CipherView, value: string, typeI18nKey: string, aType: string) {
+    if (
+      this.cipher.reprompt !== CipherRepromptType.None &&
+      this.passwordRepromptService.protectedFields().includes(aType) &&
+      !(await this.passwordRepromptService.showPasswordPrompt())
+    ) {
+      return;
     }
 
-    launchCipher() {
-        this.launchEvent.emit(this.cipher);
+    if (value == null || (aType === "TOTP" && !this.displayTotpCopyButton(cipher))) {
+      return;
+    } else if (value === cipher.login.totp) {
+      value = await this.totpService.getCode(value);
     }
 
-    async copy(cipher: CipherView, value: string, typeI18nKey: string, aType: string) {
-        if (this.cipher.reprompt !== CipherRepromptType.None && this.passwordRepromptService.protectedFields().includes(aType) &&
-            !await this.passwordRepromptService.showPasswordPrompt()) {
-            return;
-        }
-
-        if (value == null || aType === 'TOTP' && !this.displayTotpCopyButton(cipher)) {
-            return;
-        } else if (value === cipher.login.totp) {
-            value = await this.totpService.getCode(value);
-        }
-
-        if (!cipher.viewPassword) {
-            return;
-        }
-
-        this.platformUtilsService.copyToClipboard(value, { window: window });
-        this.platformUtilsService.showToast('info', null,
-            this.i18nService.t('valueCopied', this.i18nService.t(typeI18nKey)));
-
-        if (typeI18nKey === 'password' || typeI18nKey === 'verificationCodeTotp') {
-            this.eventService.collect(EventType.Cipher_ClientToggledHiddenFieldVisible, cipher.id);
-        } else if (typeI18nKey === 'securityCode') {
-            this.eventService.collect(EventType.Cipher_ClientCopiedCardCode, cipher.id);
-        }
+    if (!cipher.viewPassword) {
+      return;
     }
 
-    displayTotpCopyButton(cipher: CipherView) {
-        return (cipher?.login?.hasTotp ?? false) &&
-            (cipher.organizationUseTotp || this.userHasPremiumAccess);
-    }
+    this.platformUtilsService.copyToClipboard(value, { window: window });
+    this.platformUtilsService.showToast(
+      "info",
+      null,
+      this.i18nService.t("valueCopied", this.i18nService.t(typeI18nKey))
+    );
 
-    view() {
-        this.onView.emit(this.cipher);
+    if (typeI18nKey === "password" || typeI18nKey === "verificationCodeTotp") {
+      this.eventService.collect(EventType.Cipher_ClientToggledHiddenFieldVisible, cipher.id);
+    } else if (typeI18nKey === "securityCode") {
+      this.eventService.collect(EventType.Cipher_ClientCopiedCardCode, cipher.id);
     }
+  }
+
+  displayTotpCopyButton(cipher: CipherView) {
+    return (
+      (cipher?.login?.hasTotp ?? false) && (cipher.organizationUseTotp || this.userHasPremiumAccess)
+    );
+  }
+
+  view() {
+    this.onView.emit(this.cipher);
+  }
 }

src/popup/components/cipher-row.component.html

@@ -1,23 +1,38 @@
-<button type="button" (click)="selectCipher(cipher)" (dblclick)="launchCipher(cipher)" appStopClick
-    title="{{title}} - {{cipher.name}}" class="box-content-row box-content-row-flex virtual-scroll-item">
-    <div class="row-main">
-        <app-vault-icon [cipher]="cipher"></app-vault-icon>
-        <div class="row-main-content">
-            <span class="text">
-                {{cipher.name}}
-                <ng-container *ngIf="cipher.organizationId">
-                    <i class="fa fa-cube text-muted" title="{{'shared' | i18n}}" aria-hidden="true"></i>
-                    <span class="sr-only">{{'shared' | i18n}}</span>
-                </ng-container>
-                <ng-container *ngIf="cipher.hasAttachments">
-                    <i class="fa fa-paperclip text-muted" title="{{'attachments' | i18n}}" aria-hidden="true"></i>
-                    <span class="sr-only">{{'attachments' | i18n}}</span>
-                </ng-container>
-            </span>
-            <span class="detail">{{cipher.subTitle}}</span>
-        </div>
+<button
+  type="button"
+  (click)="selectCipher(cipher)"
+  (dblclick)="launchCipher(cipher)"
+  appStopClick
+  title="{{ title }} - {{ cipher.name }}"
+  class="box-content-row box-content-row-flex virtual-scroll-item"
+>
+  <div class="row-main">
+    <app-vault-icon [cipher]="cipher"></app-vault-icon>
+    <div class="row-main-content">
+      <span class="text">
+        {{ cipher.name }}
+        <ng-container *ngIf="cipher.organizationId">
+          <i class="fa fa-cube text-muted" title="{{ 'shared' | i18n }}" aria-hidden="true"></i>
+          <span class="sr-only">{{ "shared" | i18n }}</span>
+        </ng-container>
+        <ng-container *ngIf="cipher.hasAttachments">
+          <i
+            class="fa fa-paperclip text-muted"
+            title="{{ 'attachments' | i18n }}"
+            aria-hidden="true"
+          ></i>
+          <span class="sr-only">{{ "attachments" | i18n }}</span>
+        </ng-container>
+      </span>
+      <span class="detail">{{ cipher.subTitle }}</span>
     </div>
-    <app-action-buttons [cipher]="cipher" [showView]="showView" (onView)="viewCipher(cipher)" (launchEvent)="launchCipher(cipher)" 
-        class="action-buttons">
-    </app-action-buttons>
+  </div>
+  <app-action-buttons
+    [cipher]="cipher"
+    [showView]="showView"
+    (onView)="viewCipher(cipher)"
+    (launchEvent)="launchCipher(cipher)"
+    class="action-buttons"
+  >
+  </app-action-buttons>
 </button>

src/popup/components/cipher-row.component.ts

@@ -1,33 +1,28 @@
-import {
-    Component,
-    EventEmitter,
-    Input,
-    Output,
-} from '@angular/core';
+import { Component, EventEmitter, Input, Output } from "@angular/core";
 
-import { CipherView } from 'jslib-common/models/view/cipherView';
+import { CipherView } from "jslib-common/models/view/cipherView";
 
 @Component({
-    selector: 'app-cipher-row',
-    templateUrl: 'cipher-row.component.html',
+  selector: "app-cipher-row",
+  templateUrl: "cipher-row.component.html",
 })
 export class CipherRowComponent {
-    @Output() onSelected = new EventEmitter<CipherView>();
-    @Output() launchEvent = new EventEmitter<CipherView>();
-    @Output() onView = new EventEmitter<CipherView>();
-    @Input() cipher: CipherView;
-    @Input() showView = false;
-    @Input() title: string;
+  @Output() onSelected = new EventEmitter<CipherView>();
+  @Output() launchEvent = new EventEmitter<CipherView>();
+  @Output() onView = new EventEmitter<CipherView>();
+  @Input() cipher: CipherView;
+  @Input() showView = false;
+  @Input() title: string;
 
-    selectCipher(c: CipherView) {
-        this.onSelected.emit(c);
-    }
+  selectCipher(c: CipherView) {
+    this.onSelected.emit(c);
+  }
 
-    launchCipher(c: CipherView) {
-        this.launchEvent.emit(c);
-    }
+  launchCipher(c: CipherView) {
+    this.launchEvent.emit(c);
+  }
 
-    viewCipher(c: CipherView) {
-        this.onView.emit(c);
-    }
+  viewCipher(c: CipherView) {
+    this.onView.emit(c);
+  }
 }

src/popup/components/password-reprompt.component.html

@@ -1,38 +1,56 @@
 <div class="modal fade" role="dialog" aria-modal="true">
-    <div class="modal-dialog modal-dialog-scrollable" role="document">
-        <form class="modal-content" #form (ngSubmit)="submit()">
-            <div class="modal-body">
-                <div class="box">
-                    <h1 class="box-header">{{'passwordConfirmation' | i18n}}</h1>
-                    <div class="box-content">
-                        <div class="box-content-row box-content-row-flex" appBoxRow>
-                            <div class="row-main">
-                                <label for="masterPassword">{{'masterPass' | i18n}}</label>
-                                <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
-                                    class="monospaced" [(ngModel)]="masterPassword" required appAutofocus>
-                            </div>
-                            <div class="action-buttons">
-                                <button type="button" class="row-btn" appStopClick appBlurClick role="button"
-                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()" [attr.aria-pressed]="showPassword">
-                                    <i class="fa fa-lg" aria-hidden="true"
-                                        [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="box-footer">
-                        {{'passwordConfirmationDesc' | i18n}}
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="submit" class="btn btn-primary btn-submit" appBlurClick>
-                    <span>{{'ok' | i18n}}</span>
-                </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-                    {{'cancel' | i18n}}
+  <div class="modal-dialog modal-dialog-scrollable" role="document">
+    <form class="modal-content" #form (ngSubmit)="submit()">
+      <div class="modal-body">
+        <div class="box">
+          <h1 class="box-header">{{ "passwordConfirmation" | i18n }}</h1>
+          <div class="box-content">
+            <div class="box-content-row box-content-row-flex" appBoxRow>
+              <div class="row-main">
+                <label for="masterPassword">{{ "masterPass" | i18n }}</label>
+                <input
+                  id="masterPassword"
+                  type="{{ showPassword ? 'text' : 'password' }}"
+                  name="MasterPassword"
+                  class="monospaced"
+                  [(ngModel)]="masterPassword"
+                  required
+                  appAutofocus
+                />
+              </div>
+              <div class="action-buttons">
+                <button
+                  type="button"
+                  class="row-btn"
+                  appStopClick
+                  appBlurClick
+                  role="button"
+                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
+                  (click)="togglePassword()"
+                  [attr.aria-pressed]="showPassword"
+                >
+                  <i
+                    class="fa fa-lg"
+                    aria-hidden="true"
+                    [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                  ></i>
                 </button>
+              </div>
             </div>
-        </form>
-    </div>
+          </div>
+          <div class="box-footer">
+            {{ "passwordConfirmationDesc" | i18n }}
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-submit" appBlurClick>
+          <span>{{ "ok" | i18n }}</span>
+        </button>
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+          {{ "cancel" | i18n }}
+        </button>
+      </div>
+    </form>
+  </div>
 </div>

src/popup/components/password-reprompt.component.ts

@@ -1,8 +1,8 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
-import { PasswordRepromptComponent as BasePasswordRepromptComponent } from 'jslib-angular/components/password-reprompt.component';
+import { PasswordRepromptComponent as BasePasswordRepromptComponent } from "jslib-angular/components/password-reprompt.component";
 
 @Component({
-    templateUrl: 'password-reprompt.component.html',
+  templateUrl: "password-reprompt.component.html",
 })
 export class PasswordRepromptComponent extends BasePasswordRepromptComponent {}

src/popup/components/pop-out.component.html

@@ -1,5 +1,5 @@
 <ng-container>
-    <button type="button" (click)="expand()" appA11yTitle="{{'popOutNewWindow' | i18n}}">
-        <i class="fa fa-external-link fa-rotate-270 fa-lg fa-fw" aria-hidden="true"></i>
-    </button>
+  <button type="button" (click)="expand()" appA11yTitle="{{ 'popOutNewWindow' | i18n }}">
+    <i class="fa fa-external-link fa-rotate-270 fa-lg fa-fw" aria-hidden="true"></i>
+  </button>
 </ng-container>

src/popup/components/pop-out.component.ts

@@ -1,32 +1,30 @@
-import {
-    Component,
-    Input,
-    OnInit,
-} from '@angular/core';
+import { Component, Input, OnInit } from "@angular/core";
 
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 
-import { PopupUtilsService } from '../services/popup-utils.service';
+import { PopupUtilsService } from "../services/popup-utils.service";
 
 @Component({
-    selector: 'app-pop-out',
-    templateUrl: 'pop-out.component.html',
+  selector: "app-pop-out",
+  templateUrl: "pop-out.component.html",
 })
 export class PopOutComponent implements OnInit {
-    @Input() show = true;
+  @Input() show = true;
 
-    constructor(private platformUtilsService: PlatformUtilsService,
-        private popupUtilsService: PopupUtilsService) { }
+  constructor(
+    private platformUtilsService: PlatformUtilsService,
+    private popupUtilsService: PopupUtilsService
+  ) {}
 
-    ngOnInit() {
-        if (this.show) {
-            if (this.popupUtilsService.inSidebar(window) && this.platformUtilsService.isFirefox()) {
-                this.show = false;
-            }
-        }
+  ngOnInit() {
+    if (this.show) {
+      if (this.popupUtilsService.inSidebar(window) && this.platformUtilsService.isFirefox()) {
+        this.show = false;
+      }
     }
+  }
 
-    expand() {
-        this.popupUtilsService.popOut(window);
-    }
+  expand() {
+    this.popupUtilsService.popOut(window);
+  }
 }

src/popup/components/send-list.component.html

@@ -1,50 +1,90 @@
-<button type="button" *ngFor="let s of sends" (click)="selectSend(s)" appStopClick title="{{title}} - {{s.name}}"
-    class="box-content-row box-content-row-flex">
-    <div class="row-main">
-        <div class="app-vault-icon">
-            <div class="icon" aria-hidden="true">
-                <i class="fa fa-fw fa-lg fa-file-text-o" *ngIf="s.type === sendType.Text"></i>
-                <i class="fa fa-fw fa-lg fa-file-o" *ngIf="s.type === sendType.File"></i>
-            </div>
-        </div>
-        <div class="row-main-content">
-            <span class="text">
-                {{s.name}}
-                <ng-container *ngIf="s.disabled">
-                    <i class="fa fa-warning text-muted" title="{{'disabled' | i18n}}" aria-hidden="true"></i>
-                    <span class="sr-only">{{'disabled' | i18n}}</span>
-                </ng-container>
-                <ng-container *ngIf="s.password">
-                    <i class="fa fa-key text-muted" title="{{'passwordProtected' | i18n}}" aria-hidden="true"></i>
-                    <span class="sr-only">{{'passwordProtected' | i18n}}</span>
-                </ng-container>
-                <ng-container *ngIf="s.maxAccessCountReached">
-                    <i class="fa fa-ban text-muted" title="{{'maxAccessCountReached' | i18n}}" aria-hidden="true"></i>
-                    <span class="sr-only">{{'maxAccessCountReached' | i18n}}</span>
-                </ng-container>
-                <ng-container *ngIf="s.expired">
-                    <i class="fa fa-clock-o text-muted" title="{{'expired' | i18n}}" aria-hidden="true"></i>
-                    <span class="sr-only">{{'expired' | i18n}}</span>
-                </ng-container>
-                <ng-container *ngIf="s.pendingDelete">
-                    <i class="fa fa-trash text-muted" title="{{'pendingDeletion' | i18n}}" aria-hidden="true"></i>
-                    <span class="sr-only">{{'pendingDeletion' | i18n}}</span>
-                </ng-container>
-            </span>
-            <span class="detail">{{s.deletionDate | date:'medium'}}</span>
-        </div>
+<button
+  type="button"
+  *ngFor="let s of sends"
+  (click)="selectSend(s)"
+  appStopClick
+  title="{{ title }} - {{ s.name }}"
+  class="box-content-row box-content-row-flex"
+>
+  <div class="row-main">
+    <div class="app-vault-icon">
+      <div class="icon" aria-hidden="true">
+        <i class="fa fa-fw fa-lg fa-file-text-o" *ngIf="s.type === sendType.Text"></i>
+        <i class="fa fa-fw fa-lg fa-file-o" *ngIf="s.type === sendType.File"></i>
+      </div>
     </div>
-    <div class="action-buttons">
-        <span class="row-btn" appStopClick appStopProp appA11yTitle="{{'copySendLink' | i18n}}"
-            (click)="copySendLink(s)">
-            <i class="fa fa-lg fa-copy" aria-hidden="true"></i>
-        </span>
-        <span class="row-btn" [ngClass]="{'disabled' : disabledByPolicy}" appStopClick appStopProp
-            appA11yTitle="{{'removePassword' | i18n}}" (click)="removePassword(s)" *ngIf="s.password">
-            <i class="fa fa-lg fa-undo" aria-hidden="true"></i>
-        </span>
-        <span class="row-btn" appStopClick appStopProp appA11yTitle="{{'delete' | i18n}}" (click)="delete(s)">
-            <i class="fa fa-lg fa-trash-o" aria-hidden="true"></i>
-        </span>
+    <div class="row-main-content">
+      <span class="text">
+        {{ s.name }}
+        <ng-container *ngIf="s.disabled">
+          <i
+            class="fa fa-warning text-muted"
+            title="{{ 'disabled' | i18n }}"
+            aria-hidden="true"
+          ></i>
+          <span class="sr-only">{{ "disabled" | i18n }}</span>
+        </ng-container>
+        <ng-container *ngIf="s.password">
+          <i
+            class="fa fa-key text-muted"
+            title="{{ 'passwordProtected' | i18n }}"
+            aria-hidden="true"
+          ></i>
+          <span class="sr-only">{{ "passwordProtected" | i18n }}</span>
+        </ng-container>
+        <ng-container *ngIf="s.maxAccessCountReached">
+          <i
+            class="fa fa-ban text-muted"
+            title="{{ 'maxAccessCountReached' | i18n }}"
+            aria-hidden="true"
+          ></i>
+          <span class="sr-only">{{ "maxAccessCountReached" | i18n }}</span>
+        </ng-container>
+        <ng-container *ngIf="s.expired">
+          <i class="fa fa-clock-o text-muted" title="{{ 'expired' | i18n }}" aria-hidden="true"></i>
+          <span class="sr-only">{{ "expired" | i18n }}</span>
+        </ng-container>
+        <ng-container *ngIf="s.pendingDelete">
+          <i
+            class="fa fa-trash text-muted"
+            title="{{ 'pendingDeletion' | i18n }}"
+            aria-hidden="true"
+          ></i>
+          <span class="sr-only">{{ "pendingDeletion" | i18n }}</span>
+        </ng-container>
+      </span>
+      <span class="detail">{{ s.deletionDate | date: "medium" }}</span>
     </div>
+  </div>
+  <div class="action-buttons">
+    <span
+      class="row-btn"
+      appStopClick
+      appStopProp
+      appA11yTitle="{{ 'copySendLink' | i18n }}"
+      (click)="copySendLink(s)"
+    >
+      <i class="fa fa-lg fa-copy" aria-hidden="true"></i>
+    </span>
+    <span
+      class="row-btn"
+      [ngClass]="{ disabled: disabledByPolicy }"
+      appStopClick
+      appStopProp
+      appA11yTitle="{{ 'removePassword' | i18n }}"
+      (click)="removePassword(s)"
+      *ngIf="s.password"
+    >
+      <i class="fa fa-lg fa-undo" aria-hidden="true"></i>
+    </span>
+    <span
+      class="row-btn"
+      appStopClick
+      appStopProp
+      appA11yTitle="{{ 'delete' | i18n }}"
+      (click)="delete(s)"
+    >
+      <i class="fa fa-lg fa-trash-o" aria-hidden="true"></i>
+    </span>
+  </div>
 </button>

src/popup/components/send-list.component.ts

@@ -1,42 +1,37 @@
-import {
-    Component,
-    EventEmitter,
-    Input,
-    Output,
-} from '@angular/core';
+import { Component, EventEmitter, Input, Output } from "@angular/core";
 
-import { SendView } from 'jslib-common/models/view/sendView';
+import { SendView } from "jslib-common/models/view/sendView";
 
-import { SendType } from 'jslib-common/enums/sendType';
+import { SendType } from "jslib-common/enums/sendType";
 
 @Component({
-    selector: 'app-send-list',
-    templateUrl: 'send-list.component.html',
+  selector: "app-send-list",
+  templateUrl: "send-list.component.html",
 })
 export class SendListComponent {
-    @Input() sends: SendView[];
-    @Input() title: string;
-    @Input() disabledByPolicy = false;
-    @Output() onSelected = new EventEmitter<SendView>();
-    @Output() onCopySendLink = new EventEmitter<SendView>();
-    @Output() onRemovePassword = new EventEmitter<SendView>();
-    @Output() onDeleteSend = new EventEmitter<SendView>();
+  @Input() sends: SendView[];
+  @Input() title: string;
+  @Input() disabledByPolicy = false;
+  @Output() onSelected = new EventEmitter<SendView>();
+  @Output() onCopySendLink = new EventEmitter<SendView>();
+  @Output() onRemovePassword = new EventEmitter<SendView>();
+  @Output() onDeleteSend = new EventEmitter<SendView>();
 
-    sendType = SendType;
+  sendType = SendType;
 
-    selectSend(s: SendView) {
-        this.onSelected.emit(s);
-    }
+  selectSend(s: SendView) {
+    this.onSelected.emit(s);
+  }
 
-    copySendLink(s: SendView) {
-        this.onCopySendLink.emit(s);
-    }
+  copySendLink(s: SendView) {
+    this.onCopySendLink.emit(s);
+  }
 
-    removePassword(s: SendView) {
-        this.onRemovePassword.emit(s);
-    }
+  removePassword(s: SendView) {
+    this.onRemovePassword.emit(s);
+  }
 
-    delete(s: SendView) {
-        this.onDeleteSend.emit(s);
-    }
+  delete(s: SendView) {
+    this.onDeleteSend.emit(s);
+  }
 }

src/popup/components/set-pin.component.html

@@ -1,44 +1,65 @@
 <div class="modal fade" role="dialog" aria-modal="true">
-    <div class="modal-dialog modal-dialog-scrollable" role="document">
-        <form class="modal-content" #form (ngSubmit)="submit()">
-            <div class="modal-body">
-                <div>
-                    {{'setYourPinCode' | i18n}}
-                </div>
-                <div class="box">
-                    <div class="box-content">
-                        <div class="box-content-row box-content-row-flex" appBoxRow>
-                            <div class="row-main">
-                                <label for="pin">{{'pin' | i18n}}</label>
-                                <input id="pin" type="{{showPin ? 'text' : 'password'}}" name="Pin"
-                                    class="monospaced" [(ngModel)]="pin" required appInputVerbatim>
-                            </div>
-                            <div class="action-buttons">
-                                <button type="button" class="row-btn" appStopClick appBlurClick appA11yTitle="{{'toggleVisibility' | i18n}}"
-                                    (click)="toggleVisibility()" [attr.aria-pressed]="showPin">
-                                    <i class="fa fa-lg" aria-hidden="true"
-                                        [ngClass]="{'fa-eye': !showPin, 'fa-eye-slash': showPin}"></i>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="checkbox" *ngIf="showMasterPassOnRestart">
-                    <label for="masterPasswordOnRestart">
-                        <input type="checkbox" id="masterPasswordOnRestart" name="MasterPasswordOnRestart"
-                            [(ngModel)]="masterPassOnRestart">
-                        <span>{{'lockWithMasterPassOnRestart' | i18n}}</span>
-                    </label>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="submit" class="btn btn-primary btn-submit" appBlurClick>
-                    <span>{{'ok' | i18n}}</span>
-                </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-                    {{'cancel' | i18n}}
+  <div class="modal-dialog modal-dialog-scrollable" role="document">
+    <form class="modal-content" #form (ngSubmit)="submit()">
+      <div class="modal-body">
+        <div>
+          {{ "setYourPinCode" | i18n }}
+        </div>
+        <div class="box">
+          <div class="box-content">
+            <div class="box-content-row box-content-row-flex" appBoxRow>
+              <div class="row-main">
+                <label for="pin">{{ "pin" | i18n }}</label>
+                <input
+                  id="pin"
+                  type="{{ showPin ? 'text' : 'password' }}"
+                  name="Pin"
+                  class="monospaced"
+                  [(ngModel)]="pin"
+                  required
+                  appInputVerbatim
+                />
+              </div>
+              <div class="action-buttons">
+                <button
+                  type="button"
+                  class="row-btn"
+                  appStopClick
+                  appBlurClick
+                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
+                  (click)="toggleVisibility()"
+                  [attr.aria-pressed]="showPin"
+                >
+                  <i
+                    class="fa fa-lg"
+                    aria-hidden="true"
+                    [ngClass]="{ 'fa-eye': !showPin, 'fa-eye-slash': showPin }"
+                  ></i>
                 </button>
+              </div>
             </div>
-        </form>
-    </div>
+          </div>
+        </div>
+        <div class="checkbox" *ngIf="showMasterPassOnRestart">
+          <label for="masterPasswordOnRestart">
+            <input
+              type="checkbox"
+              id="masterPasswordOnRestart"
+              name="MasterPasswordOnRestart"
+              [(ngModel)]="masterPassOnRestart"
+            />
+            <span>{{ "lockWithMasterPassOnRestart" | i18n }}</span>
+          </label>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-submit" appBlurClick>
+          <span>{{ "ok" | i18n }}</span>
+        </button>
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+          {{ "cancel" | i18n }}
+        </button>
+      </div>
+    </form>
+  </div>
 </div>

src/popup/components/set-pin.component.ts

@@ -1,8 +1,8 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
-import { SetPinComponent as BaseSetPinComponent } from 'jslib-angular/components/set-pin.component';
+import { SetPinComponent as BaseSetPinComponent } from "jslib-angular/components/set-pin.component";
 
 @Component({
-    templateUrl: 'set-pin.component.html',
+  templateUrl: "set-pin.component.html",
 })
 export class SetPinComponent extends BaseSetPinComponent {}

src/popup/components/verify-master-password.component.html

@@ -1,25 +1,46 @@
 <ng-container *ngIf="!usesKeyConnector">
-    <div class="box-content-row" appBoxRow>
-        <label for="masterPassword">{{'masterPass' | i18n}}</label>
-        <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
-            [formControl]="secret" required appAutofocus appInputVerbatim>
-    </div>
+  <div class="box-content-row" appBoxRow>
+    <label for="masterPassword">{{ "masterPass" | i18n }}</label>
+    <input
+      id="masterPassword"
+      type="password"
+      name="MasterPasswordHash"
+      class="form-control"
+      [formControl]="secret"
+      required
+      appAutofocus
+      appInputVerbatim
+    />
+  </div>
 </ng-container>
 <ng-container *ngIf="usesKeyConnector">
-    <div class="box-content-row" appBoxRow>
-        <label class="d-block">{{'sendVerificationCode' | i18n}}</label>
-        <button type="button" class="btn btn-outline-secondary" (click)="requestOTP()" [disabled]="disableRequestOTP">
-            {{'sendCode' | i18n}}
-        </button>
-        <span class="ml-2 text-success" role="alert" @sent *ngIf="sentCode">
-            <i class="fa fa-check-circle-o" aria-hidden="true"></i>
-            {{'codeSent' | i18n}}
-        </span>
-    </div>
+  <div class="box-content-row" appBoxRow>
+    <label class="d-block">{{ "sendVerificationCode" | i18n }}</label>
+    <button
+      type="button"
+      class="btn btn-outline-secondary"
+      (click)="requestOTP()"
+      [disabled]="disableRequestOTP"
+    >
+      {{ "sendCode" | i18n }}
+    </button>
+    <span class="ml-2 text-success" role="alert" @sent *ngIf="sentCode">
+      <i class="fa fa-check-circle-o" aria-hidden="true"></i>
+      {{ "codeSent" | i18n }}
+    </span>
+  </div>
 
-    <div class="box-content-row" appBoxRow>
-        <label for="verificationCode">{{'verificationCode' | i18n}}</label>
-        <input id="verificationCode" type="input" name="verificationCode" class="form-control"
-            [formControl]="secret" required appAutofocus appInputVerbatim>
-    </div>
+  <div class="box-content-row" appBoxRow>
+    <label for="verificationCode">{{ "verificationCode" | i18n }}</label>
+    <input
+      id="verificationCode"
+      type="input"
+      name="verificationCode"
+      class="form-control"
+      [formControl]="secret"
+      required
+      appAutofocus
+      appInputVerbatim
+    />
+  </div>
 </ng-container>

src/popup/components/verify-master-password.component.ts

@@ -1,31 +1,23 @@
-import {
-    animate,
-    style,
-    transition,
-    trigger,
-} from '@angular/animations';
-import { Component } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { animate, style, transition, trigger } from "@angular/animations";
+import { Component } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
-import { VerifyMasterPasswordComponent as BaseComponent } from 'jslib-angular/components/verify-master-password.component';
+import { VerifyMasterPasswordComponent as BaseComponent } from "jslib-angular/components/verify-master-password.component";
 
 @Component({
-    selector: 'app-verify-master-password',
-    templateUrl: 'verify-master-password.component.html',
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: VerifyMasterPasswordComponent,
-        },
-    ],
-    animations: [
-        trigger('sent', [
-            transition(':enter', [
-                style({ opacity: 0 }),
-                animate('100ms', style({ opacity: 1 })),
-            ]),
-        ]),
-    ],
+  selector: "app-verify-master-password",
+  templateUrl: "verify-master-password.component.html",
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: VerifyMasterPasswordComponent,
+    },
+  ],
+  animations: [
+    trigger("sent", [
+      transition(":enter", [style({ opacity: 0 }), animate("100ms", style({ opacity: 1 }))]),
+    ]),
+  ],
 })
-export class VerifyMasterPasswordComponent extends BaseComponent { }
+export class VerifyMasterPasswordComponent extends BaseComponent {}