From 1134e34e699256c26ec8a5173bda65fff3e41356 Mon Sep 17 00:00:00 2001 From: Ldoppea Date: Fri, 19 Apr 2024 16:16:03 +0200 Subject: [PATCH 1/7] chore: Add Github Action CI workflow for testing the app --- .github/workflows/quality_checks.yml | 35 ++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 .github/workflows/quality_checks.yml diff --git a/.github/workflows/quality_checks.yml b/.github/workflows/quality_checks.yml new file mode 100644 index 000000000000..5c96e861342c --- /dev/null +++ b/.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 From a76b5baeddd0d2e616cf3062f91c96ab87a86e22 Mon Sep 17 00:00:00 2001 From: Ldoppea Date: Fri, 19 Apr 2024 16:06:04 +0200 Subject: [PATCH 2/7] chore: Remove Travis CI workflow --- .travis.yml | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 .travis.yml diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 7e37e62d8165..000000000000 --- a/.travis.yml +++ /dev/null @@ -1,16 +0,0 @@ -language: node_js -node_js: - - "16.15.0" -services: - - xvfb -cache: - npm: true - directories: - - node_modules -script: - - npm ci - - cd apps/browser/ - - npm run build - - npm run test - - cd ../.. - - npm run lint From b0d3f2f13033a67a6d04d4a813fe2d471e6612ff Mon Sep 17 00:00:00 2001 From: Ldoppea Date: Tue, 9 Apr 2024 17:35:12 +0200 Subject: [PATCH 3/7] refactor: Move ProfileMigration's alert CSS into dedicated file --- .../profiles-migration.component.html | 2 +- apps/browser/src/popup/scss/cozy-alert.scss | 90 +++++++++++++++++++ .../popup/scss/cozy-profiles-migration.scss | 75 ---------------- apps/browser/src/popup/scss/popup.scss | 2 +- 4 files changed, 92 insertions(+), 77 deletions(-) create mode 100644 apps/browser/src/popup/scss/cozy-alert.scss delete mode 100644 apps/browser/src/popup/scss/cozy-profiles-migration.scss diff --git a/apps/browser/src/cozy/components/profiles-migration/profiles-migration.component.html b/apps/browser/src/cozy/components/profiles-migration/profiles-migration.component.html index aa68f67c3959..ed4a91ddf899 100644 --- a/apps/browser/src/cozy/components/profiles-migration/profiles-migration.component.html +++ b/apps/browser/src/cozy/components/profiles-migration/profiles-migration.component.html @@ -1,5 +1,5 @@
-
+
{{ "profileMigrationTitle" | i18n }}
diff --git a/apps/browser/src/popup/scss/cozy-alert.scss b/apps/browser/src/popup/scss/cozy-alert.scss new file mode 100644 index 000000000000..02d03b7fa9fa --- /dev/null +++ b/apps/browser/src/popup/scss/cozy-alert.scss @@ -0,0 +1,90 @@ +.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; + } + } + } + } + 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 { + @include themify($themes) { + background-color: themed("backgroundColorAlt"); + } + padding: 16px; +} diff --git a/apps/browser/src/popup/scss/cozy-profiles-migration.scss b/apps/browser/src/popup/scss/cozy-profiles-migration.scss deleted file mode 100644 index c98f278675b9..000000000000 --- a/apps/browser/src/popup/scss/cozy-profiles-migration.scss +++ /dev/null @@ -1,75 +0,0 @@ -.profileMigration { - @include themify($themes) { - background-color: themed("backgroundColorAlt"); - } - padding: 16px; - - .alert { - @include themify($themes) { - background-color: change-color(themed("warningColor"), $alpha: 0.12); - } - 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; - } - } - } - } -} diff --git a/apps/browser/src/popup/scss/popup.scss b/apps/browser/src/popup/scss/popup.scss index 21af2d1306e7..8853339fc120 100644 --- a/apps/browser/src/popup/scss/popup.scss +++ b/apps/browser/src/popup/scss/popup.scss @@ -13,6 +13,6 @@ @import "pages.scss"; // Cozy Customization, Profile migration //* -@import "cozy-profiles-migration.scss"; +@import "cozy-alert.scss"; //*/ @import "@angular/cdk/overlay-prebuilt.css"; From 1b093643934901e020e93cf762557764da8d7d5f Mon Sep 17 00:00:00 2001 From: Ldoppea Date: Fri, 19 Apr 2024 15:15:28 +0200 Subject: [PATCH 4/7] feat: Upgrade cozy-client to 46.9.1 `cozy-client` has been upgraded to `46.9.1` to retrieve the new `getSettings()` and `saveAfterFetchSettings()` methods Related PR: cozy/cozy-client#1460 --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index afd84f122235..76d0d605072c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,7 @@ "chalk": "^4.1.0", "commander": "^7.2.0", "core-js": "^3.11.0", - "cozy-client": "46.5.0", + "cozy-client": "46.9.1", "cozy-device-helper": ">1.12.0", "cozy-flags": ">2.8.6", "cozy-logger": ">1.7.0", @@ -20975,9 +20975,9 @@ } }, "node_modules/cozy-client": { - "version": "46.5.0", - "resolved": "https://registry.npmjs.org/cozy-client/-/cozy-client-46.5.0.tgz", - "integrity": "sha512-YzKvIDEHRNPEOGAKQkRVy42Hstp8OlIKK1rL5hKoBM7AUd3uzaOS71MHohMKamO3FkryIZjndmMRfQOuitZkxw==", + "version": "46.9.1", + "resolved": "https://registry.npmjs.org/cozy-client/-/cozy-client-46.9.1.tgz", + "integrity": "sha512-v7Cm/aFLg4YH9t9W3PYMHRL/4cOELfNYRYO6yTEpG0cCmdvWxT7bNAVvJnYLop7HNrYMXSdu+eXDTqQDF9wTOg==", "dependencies": { "@cozy/minilog": "1.0.0", "@types/jest": "^26.0.20", @@ -64898,9 +64898,9 @@ } }, "cozy-client": { - "version": "46.5.0", - "resolved": "https://registry.npmjs.org/cozy-client/-/cozy-client-46.5.0.tgz", - "integrity": "sha512-YzKvIDEHRNPEOGAKQkRVy42Hstp8OlIKK1rL5hKoBM7AUd3uzaOS71MHohMKamO3FkryIZjndmMRfQOuitZkxw==", + "version": "46.9.1", + "resolved": "https://registry.npmjs.org/cozy-client/-/cozy-client-46.9.1.tgz", + "integrity": "sha512-v7Cm/aFLg4YH9t9W3PYMHRL/4cOELfNYRYO6yTEpG0cCmdvWxT7bNAVvJnYLop7HNrYMXSdu+eXDTqQDF9wTOg==", "requires": { "@cozy/minilog": "1.0.0", "@types/jest": "^26.0.20", diff --git a/package.json b/package.json index ef729065cc94..146591f9d99b 100644 --- a/package.json +++ b/package.json @@ -164,7 +164,7 @@ "chalk": "^4.1.0", "commander": "^7.2.0", "core-js": "^3.11.0", - "cozy-client": "46.5.0", + "cozy-client": "46.9.1", "cozy-device-helper": ">1.12.0", "cozy-flags": ">2.8.6", "cozy-logger": ">1.7.0", From 47c9b3b261bbbbcd5d4cc8975665f98673fa7f84 Mon Sep 17 00:00:00 2001 From: Ldoppea Date: Fri, 19 Apr 2024 16:10:22 +0200 Subject: [PATCH 5/7] feat: Add encrypted info tooltip In #155 and #168 we added Cozy's Papers and Contacts in the vault Contrary to other vault's items, Papers and Contacts are not end-to-end encrypted so we want to display a tooltip to the user to help them distinguish what is encrypted or not --- apps/browser/src/_locales/en/messages.json | 12 +++++ apps/browser/src/_locales/fr/messages.json | 12 +++++ .../encrypted-info.component.html | 17 +++++++ .../encrypted-info.component.ts | 45 +++++++++++++++++++ apps/browser/src/popup/app.module.ts | 2 + .../src/popup/images/icon-encrypted.svg | 4 ++ apps/browser/src/popup/scss/cozy-alert.scss | 21 ++++++++- apps/browser/src/popup/scss/misc.scss | 8 ++++ .../vault/vault-items.component.html | 4 ++ 9 files changed, 124 insertions(+), 1 deletion(-) create mode 100644 apps/browser/src/cozy/components/encrypted-info/encrypted-info.component.html create mode 100644 apps/browser/src/cozy/components/encrypted-info/encrypted-info.component.ts create mode 100644 apps/browser/src/popup/images/icon-encrypted.svg diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index ad200a0ffdbf..0b153ee06ee1 100755 --- a/apps/browser/src/_locales/en/messages.json +++ b/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" } } diff --git a/apps/browser/src/_locales/fr/messages.json b/apps/browser/src/_locales/fr/messages.json index cb57030a93be..f7dec8f9a042 100755 --- a/apps/browser/src/_locales/fr/messages.json +++ b/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" } } diff --git a/apps/browser/src/cozy/components/encrypted-info/encrypted-info.component.html b/apps/browser/src/cozy/components/encrypted-info/encrypted-info.component.html new file mode 100644 index 000000000000..9279227370ae --- /dev/null +++ b/apps/browser/src/cozy/components/encrypted-info/encrypted-info.component.html @@ -0,0 +1,17 @@ +
+
+
+
+
{{ "encryptedInfoTitle" | i18n }}
+
{{ "encryptedInfoContent" | i18n }}
+
+
+ + +
+
+
diff --git a/apps/browser/src/cozy/components/encrypted-info/encrypted-info.component.ts b/apps/browser/src/cozy/components/encrypted-info/encrypted-info.component.ts new file mode 100644 index 000000000000..14933ed6d6b7 --- /dev/null +++ b/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; + } +} diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts index 5715a7a9c5ed..fef6311e79b1 100755 --- a/apps/browser/src/popup/app.module.ts +++ b/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], diff --git a/apps/browser/src/popup/images/icon-encrypted.svg b/apps/browser/src/popup/images/icon-encrypted.svg new file mode 100644 index 000000000000..6417494d445c --- /dev/null +++ b/apps/browser/src/popup/images/icon-encrypted.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/browser/src/popup/scss/cozy-alert.scss b/apps/browser/src/popup/scss/cozy-alert.scss index 02d03b7fa9fa..461b09b2a01d 100644 --- a/apps/browser/src/popup/scss/cozy-alert.scss +++ b/apps/browser/src/popup/scss/cozy-alert.scss @@ -17,6 +17,24 @@ } } } + &.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; @@ -82,7 +100,8 @@ } } -.profileMigration { +.profileMigration, +.encryptedInfo { @include themify($themes) { background-color: themed("backgroundColorAlt"); } diff --git a/apps/browser/src/popup/scss/misc.scss b/apps/browser/src/popup/scss/misc.scss index a7ef10829435..a1dcb258e2e1 100755 --- a/apps/browser/src/popup/scss/misc.scss +++ b/apps/browser/src/popup/scss/misc.scss @@ -533,6 +533,14 @@ li.active .icon-cozy-inline > svg { height: 24px; } +.icon-encrypted { + mask-image: url("../images/icon-encrypted.svg"); + -webkit-mask-image: url("../images/icon-encrypted.svg"); + @include themify($themes) { + background-color: themed("mutedColor"); + } +} + .icon-identity { background-image: url("../images/icons-identity.svg"); width: 24px; diff --git a/apps/browser/src/vault/popup/components/vault/vault-items.component.html b/apps/browser/src/vault/popup/components/vault/vault-items.component.html index 68c284595145..c01e83b0d12d 100644 --- a/apps/browser/src/vault/popup/components/vault/vault-items.component.html +++ b/apps/browser/src/vault/popup/components/vault/vault-items.component.html @@ -180,6 +180,10 @@

{{ groupingTitle }} {{ isSearching() ? ciphers.length : "" }}

+ +
Date: Fri, 19 Apr 2024 15:54:43 +0200 Subject: [PATCH 6/7] feat: Add encrypted info into Login and Card sections In #155 and #168 we added Cozy's Papers and Contacts in the vault Contrary to other vault's items, Papers and Contacts are not end-to-end encrypted so we want to display a shield icon to encrypted sections to help the user distinguish what is encrypted or not --- apps/browser/src/popup/scss/box.scss | 4 ++++ apps/browser/src/popup/scss/misc.scss | 6 +++++ .../vault/vault-filter.component.html | 24 +++++++++++++++++-- 3 files changed, 32 insertions(+), 2 deletions(-) diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss index 724abdd1853e..eacd591b5ab2 100755 --- a/apps/browser/src/popup/scss/box.scss +++ b/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 */ diff --git a/apps/browser/src/popup/scss/misc.scss b/apps/browser/src/popup/scss/misc.scss index a1dcb258e2e1..75f94573ea6c 100755 --- a/apps/browser/src/popup/scss/misc.scss +++ b/apps/browser/src/popup/scss/misc.scss @@ -541,6 +541,12 @@ li.active .icon-cozy-inline > svg { } } +.icon-cozy-details { + width: 10px; + height: 10px; + mask-size: 10px; +} + .icon-identity { background-image: url("../images/icons-identity.svg"); width: 24px; diff --git a/apps/browser/src/vault/popup/components/vault/vault-filter.component.html b/apps/browser/src/vault/popup/components/vault/vault-filter.component.html index fd7e3993c688..ed1cb3b51a11 100644 --- a/apps/browser/src/vault/popup/components/vault/vault-filter.component.html +++ b/apps/browser/src/vault/popup/components/vault/vault-filter.component.html @@ -108,7 +108,17 @@

>
- {{ "typeLogin" | i18n }} +
+ {{ "typeLogin" | i18n }} + + + {{ "encryptedInfoTitle" | i18n }} + +
{{ this.typeCounts.get(cipherType.Login) || 0 }} @@ -122,7 +132,17 @@

>
- {{ "typeCard" | i18n }} +
+ {{ "typeCard" | i18n }} + + + {{ "encryptedInfoTitle" | i18n }} + +
{{ this.typeCounts.get(cipherType.Card) || 0 }} From e7872350dfa1b50d15b960e4074a43c91753ed31 Mon Sep 17 00:00:00 2001 From: Ldoppea Date: Fri, 19 Apr 2024 15:54:36 +0200 Subject: [PATCH 7/7] feat: Add unencrypted info to Cozy Connectors ciphers In #155 and #168 we added Cozy's Papers and Contacts in the vault Contrary to other vault's items, Papers and Contacts are not end-to-end encrypted so we want to display a strikethrough shield icon to Cozy Konnector ciphers that are not end-to-end encrypted to help the user realizing this --- .../src/popup/images/icon-unencrypted.svg | 15 +++++++ apps/browser/src/popup/scss/misc.scss | 8 ++++ .../components/cipher-row.component.html | 40 +++++++++++++------ 3 files changed, 50 insertions(+), 13 deletions(-) create mode 100644 apps/browser/src/popup/images/icon-unencrypted.svg diff --git a/apps/browser/src/popup/images/icon-unencrypted.svg b/apps/browser/src/popup/images/icon-unencrypted.svg new file mode 100644 index 000000000000..ada372dc7a12 --- /dev/null +++ b/apps/browser/src/popup/images/icon-unencrypted.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/apps/browser/src/popup/scss/misc.scss b/apps/browser/src/popup/scss/misc.scss index 75f94573ea6c..d63af3b22717 100755 --- a/apps/browser/src/popup/scss/misc.scss +++ b/apps/browser/src/popup/scss/misc.scss @@ -541,6 +541,14 @@ li.active .icon-cozy-inline > svg { } } +.icon-unencrypted { + mask-image: url("../images/icon-unencrypted.svg"); + -webkit-mask-image: url("../images/icon-unencrypted.svg"); + @include themify($themes) { + background-color: themed("mutedColor"); + } +} + .icon-cozy-details { width: 10px; height: 10px; diff --git a/apps/browser/src/vault/popup/components/cipher-row.component.html b/apps/browser/src/vault/popup/components/cipher-row.component.html index a7aa494dac42..36b698ffb4fc 100644 --- a/apps/browser/src/vault/popup/components/cipher-row.component.html +++ b/apps/browser/src/vault/popup/components/cipher-row.component.html @@ -51,7 +51,8 @@ {{ cipher.name }} - + + + - - - - - - - + + + + + + {{ getSubtitle(cipher) }} + + + + {{ "sharedWithKonnector" | i18n }} + +