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
cozy · Apr 10, 2024 · 7e7c257 · 7e7c257
1 parent 1891c1f
commit 7e7c257
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 13 deletions.
diff --git a/apps/browser/src/popup/images/icon-unencrypted.svg b/apps/browser/src/popup/images/icon-unencrypted.svg
diff --git 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
@@ -51,7 +51,8 @@
         <span class="text">
           <span class="truncate-box">
             <span class="truncate">{{ cipher.name }}</span>
-            <!-- Cozy custo
+            <!-- Cozy custo, Show shared info on details lines instead of on title's side -->
+            <!--
             <ng-container *ngIf="cipher.organizationId">
               <i
                 class="bwi bwi-collection text-muted"
@@ -60,6 +61,9 @@
               ></i>
               <span class="sr-only">{{ "shared" | i18n }}</span>
             </ng-container>
+            -->
+            <!-- Cozy custo, Disable attachments -->
+            <!--
             <ng-container *ngIf="cipher.hasAttachments">
               <i
                 class="bwi bwi-paperclip text-muted"
@@ -69,21 +73,25 @@
               <span class="sr-only">{{ "attachments" | i18n }}</span>
             </ng-container>
             -->
-            <ng-container *ngIf="cipher.organizationId && !isKonnector">
-              <i class="icon-cozy icon-share" title="{{ 'shared' | i18n }}" aria-hidden="true"></i>
-            </ng-container>
-            <ng-container *ngIf="cipher.organizationId && isKonnector">
-              <i
-                class="icon-cozy icon-cozy-sync"
-                title="{{ 'sharedWithKonnector' | i18n }}"
-                aria-hidden="true"
-              >
-              </i>
-            </ng-container>
-            <!-- end custo -->
           </span>
         </span>
+        <!-- Cozy customization, Show shared and unencrypted info on details lines -->
+        <!--
         <span class="detail">{{ getSubtitle(cipher) }}</span>
+        -->
+        <!---->
+        <span class="detail" *ngIf="getSubtitle(cipher)"><i
+          *ngIf="cipher.organizationId && !isKonnector"
+          class="icon-cozy icon-cozy-details icon-share"
+          title="{{ 'shared' | i18n }}"
+          aria-hidden="true"
+          ></i> {{ getSubtitle(cipher) }}</span>
+        <span class="detail" *ngIf="cipher.organizationId && isKonnector"><i
+          class="icon-cozy icon-cozy-details icon-unencrypted"
+          title="{{ 'sharedWithKonnector' | i18n }}"
+          aria-hidden="true"
+          ></i> {{ 'sharedWithKonnector' | i18n }}</span>
+          <!---->
       </div>
     </button>
     <app-action-buttons