feat: Add encrypted info tooltip and icons

.github/workflows/quality_checks.yml

@@ -0,0 +1,35 @@
+name: Quality Checks
+
+on:
+  workflow_dispatch:
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  quality_checks:
+    name: Quality Checks
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Setup Node
+      uses: actions/setup-node@v3
+      with:
+        node-version: '16.15.0'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Lint
+      run : npm run lint
+
+    - name: Test
+      run: |
+        cd apps/browser/
+        yarn test

apps/browser/src/_locales/en/messages.json

@@ -2411,5 +2411,17 @@
   },
   "profileMigrationAction": {
     "message": "More details"
+  },
+  "encryptedInfoTitle": {
+    "message": "End-to-end encryption"
+  },
+  "encryptedInfoContent": {
+    "message": "Don't lose your Cozy password. Your logins and passwords are encrypted from end-to-end. No one but you can access them, not even Cozy Cloud."
+  },
+  "encryptedInfoMoreDetails": {
+    "message": "More details"
+  },
+  "encryptedInfoDismiss": {
+    "message": "I understand"
   }
 }

apps/browser/src/_locales/fr/messages.json

@@ -2459,5 +2459,17 @@
   },
   "profileMigrationAction": {
     "message": "En savoir plus"
+  },
+  "encryptedInfoTitle": {
+    "message": "Chiffré de bout en bout"
+  },
+  "encryptedInfoContent": {
+    "message": "Attention, ne perdez pas votre mot de passe Cozy. Vos identifiants et mots de passe sont chiffrés de bout en bout. Personne d’autre que vous ne peut y accéder, pas même Cozy Cloud."
+  },
+  "encryptedInfoMoreDetails": {
+    "message": "En savoir plus"
+  },
+  "encryptedInfoDismiss": {
+    "message": "J'ai compris"
   }
 }

apps/browser/src/cozy/components/encrypted-info/encrypted-info.component.html

@@ -0,0 +1,17 @@
+<div class="encryptedInfo" *ngIf="!tooltipDismissed">
+  <div class="alert info">
+    <div class="alert-icon icon-encrypted"></div>
+    <div class="alert-message">
+      <div class="alert-title">{{ "encryptedInfoTitle" | i18n }}</div>
+      <div>{{ "encryptedInfoContent" | i18n }}</div>
+    </div>
+    <div class="alert-action">
+      <button type="button" class="btn link" (click)="moreInfo()">
+        {{ "encryptedInfoMoreDetails" | i18n }}
+      </button>
+      <button type="button" class="btn link" (click)="dismiss()">
+        {{ "encryptedInfoDismiss" | i18n }}
+      </button>
+    </div>
+  </div>
+</div>

apps/browser/src/cozy/components/encrypted-info/encrypted-info.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from "@angular/core";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { StateService } from "@bitwarden/common/abstractions/state.service";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+
+import { CozyClientService } from "../../../popup/services/cozyClient.service";
+
+const TOOLTIP_EXPLAIN_ENCRYPTION_DISMISSED = "tooltip_explain_encryption_dismissed";
+
+@Component({
+  selector: "app-encrypted-info",
+  templateUrl: "encrypted-info.component.html",
+})
+export class EncryptedInfoComponent implements OnInit {
+  tooltipDismissed = true;
+
+  constructor(
+    protected cipherService: CipherService,
+    protected i18nService: I18nService,
+    protected stateService: StateService,
+    protected cozyClientService: CozyClientService
+  ) {}
+
+  async ngOnInit() {
+    const client = await this.cozyClientService.getClientInstance();
+    const settings = await client.getSettings("passwords", [TOOLTIP_EXPLAIN_ENCRYPTION_DISMISSED]);
+    this.tooltipDismissed = settings.tooltip_explain_encryption_dismissed;
+  }
+
+  async moreInfo() {
+    const infoUrl =
+      "https://support.cozy.io/394-comment-puis-je-parametrer-mon-gestionnaire-de-mot-de-passe/";
+    window.open(infoUrl);
+  }
+
+  async dismiss() {
+    const client = await this.cozyClientService.getClientInstance();
+    await client.saveAfterFetchSettings("passwords", {
+      tooltip_explain_encryption_dismissed: true,
+    });
+
+    this.tooltipDismissed = true;
+  }
+}

apps/browser/src/cozy/components/profiles-migration/profiles-migration.component.html

@@ -1,5 +1,5 @@
 <div class="profileMigration" *ngIf="ready && profilesCount > 0">
-  <div class="alert">
+  <div class="alert warning">
     <div class="alert-icon cozy-icon-info"></div>
     <div class="alert-message">
       <div class="alert-title">{{ "profileMigrationTitle" | i18n }}</div>

apps/browser/src/popup/app.module.ts

@@ -84,6 +84,7 @@ import { AddGenericComponent } from "../cozy/components/add-generic/add-generic.
 import { ViewExpirationDateComponent } from "../vault/popup/components/vault/view-expiration-date.component";
 import { ContactAvatarComponent } from "../vault/popup/components/vault/contact-avatar.component";
 import { ProfilesMigrationComponent } from "../cozy/components/profiles-migration/profiles-migration.component";
+import { EncryptedInfoComponent } from "../cozy/components/encrypted-info/encrypted-info.component";
 /* eslint-enable */
 /* end Cozy imports */
 
@@ -171,6 +172,7 @@ import { ProfilesMigrationComponent } from "../cozy/components/profiles-migratio
     ViewExpirationDateComponent,
     ContactAvatarComponent,
     ProfilesMigrationComponent,
+    EncryptedInfoComponent,
     /* end Cozy components */
   ],
   providers: [CurrencyPipe, DatePipe],

apps/browser/src/popup/scss/box.scss

@@ -918,4 +918,8 @@ select:focus-visible {
     outline: 1px solid themed("boxBackgroundHoverColor");
   }
 }
+
+.box.list .box-content .box-content-row .no-white-space {
+  white-space: normal !important;
+}
 /* end custo */

apps/browser/src/popup/scss/cozy-alert.scss

@@ -0,0 +1,109 @@
+.alert {
+  &.warning {
+    @include themify($themes) {
+      background-color: change-color(themed("warningColor"), $alpha: 0.12);
+    }
+    .alert-icon {
+      @include themify($themes) {
+        background-color: themed("warningColor");
+        color: themed("warningColor");
+      }
+    }
+    .alert-action {
+      .btn.link {
+        @include themify($themes) {
+          color: themed("warningColor") !important;
+        }
+      }
+    }
+  }
+  &.info {
+    @include themify($themes) {
+      background-color: change-color(themed("primaryColor"), $alpha: 0.12);
+    }
+    .alert-icon {
+      @include themify($themes) {
+        background-color: themed("primaryColor");
+        color: themed("primaryColor");
+      }
+    }
+    .alert-action {
+      .btn.link {
+        @include themify($themes) {
+          color: themed("primaryColor") !important;
+        }
+      }
+    }
+  }
+  display: flex;
+  flex-wrap: wrap;
+
+  padding: 8px 16px;
+
+  border-radius: 8px;
+
+  .alert-icon {
+    display: flex;
+
+    height: 16px;
+    width: 16px;
+
+    margin-right: 12px;
+    margin-top: 9px;
+    padding: 7px 0;
+
+    font-size: 22px;
+
+    @include themify($themes) {
+      background-color: themed("warningColor");
+      color: themed("warningColor");
+    }
+  }
+
+  .alert-message {
+    display: flex;
+    flex-wrap: wrap;
+    flex: auto;
+    align-items: center;
+
+    max-width: calc(100% - 28px);
+
+    padding: 8px 0;
+
+    .alert-title {
+      width: 100%;
+
+      margin-bottom: 0.35em;
+      margin-top: -2px;
+
+      font-weight: bold;
+    }
+  }
+
+  .alert-action {
+    display: block;
+
+    width: 100%;
+
+    margin-left: auto;
+    margin-right: -6px;
+    padding-left: 0;
+
+    text-align: right;
+    text-transform: uppercase;
+
+    .btn.link {
+      @include themify($themes) {
+        color: themed("warningColor") !important;
+      }
+    }
+  }
+}
+
+.profileMigration,
+.encryptedInfo {
+  @include themify($themes) {
+    background-color: themed("backgroundColorAlt");
+  }
+  padding: 16px;
+}