Merge pull request #88 from Benibur/small_UI_improvements

src/_locales/en/messages.json

@@ -125,7 +125,7 @@
     "message": "Account"
   },
   "changeMasterPassword": {
-    "message": "Change Master Password"
+    "message": "The modification of your password must be done from your Cozy. Do you want to open it now ?"
   },
   "fingerprintPhrase": {
     "message": "Fingerprint Phrase",
@@ -302,6 +302,9 @@
   "rateExtensionDesc": {
     "message": "Please consider helping us out with a good review!"
   },
+  "connectedCozy": {
+    "message": "Connected to:"
+  },
   "browserNotSupportClipboard": {
     "message": "Your web browser does not support easy clipboard copying. Copy it manually instead."
   },
@@ -458,7 +461,7 @@
     "message": "Change Master Password"
   },
   "changeMasterPasswordConfirmation": {
-    "message": "You can change your master password on the bitwarden.com web vault. Do you want to visit the website now?"
+    "message": "To change your password, you need to go on your Cozy. Do you want to visit the website now?"
   },
   "twoStepLoginConfirmation": {
     "message": "Two-step login makes your account more secure by requiring you to verify your login with another device such as a security key, authenticator app, SMS, phone call, or email. Two-step login can be enabled on the bitwarden.com web vault. Do you want to visit the website now?"

src/_locales/fr/messages.json

@@ -125,7 +125,7 @@
     "message": "Compte"
   },
   "changeMasterPassword": {
-    "message": "Changer le mot de passe maître"
+    "message": "Changer le mot de passe mon Cozy"
   },
   "fingerprintPhrase": {
     "message": "Phrase d'empreinte",
@@ -299,6 +299,9 @@
   "rateExtensionDesc": {
     "message": "Merci de nous aider en mettant une bonne note !"
   },
+  "connectedCozy": {
+    "message": "Connecté à :"
+  },
   "browserNotSupportClipboard": {
     "message": "Votre navigateur web ne supporte pas la copie facilitée du presse-papier. Copiez-le manuellement à la place."
   },
@@ -455,7 +458,7 @@
     "message": "Modifier le mot de passe maître"
   },
   "changeMasterPasswordConfirmation": {
-    "message": "Vous pouvez modifier votre mot de passe maître depuis le coffre web sur bitwarden.com. Souhaitez-vous visiter le site maintenant ?"
+    "message": "Modifier votre mot de passe doit se faire directement depuis votre Cozy. Voulez vous l'ouvrir maintenant ?"
   },
   "editedFolder": {
     "message": "Dossier modifié"

src/popup/scss/box.scss

@@ -9,6 +9,11 @@
         margin-top: 0;
     }
 
+    &.box-uri { // snap the box-ui to the previous block
+      margin-top: -11px;
+      z-index: 1;
+    }
+
     .box-header {
         margin: 15px 10px 5px 10px;
         display: flex;
@@ -59,6 +64,10 @@
         @include themify($themes) {
             color: themed('mutedColor');
         }
+        &.in-flex-row-full-width {
+          flex : 0 0 100%;
+          margin: 5px 0;
+        }
     }
 
     &.list {
@@ -251,6 +260,12 @@
         //word-break: break-all;
     }
 
+    &.box-content-row-multi-wrap {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
     &.options-row label:first-child {
       @include themify($themes) {
           color: themed('textColor');

src/popup/services/cozyClient.service.ts

@@ -72,6 +72,7 @@ export class CozyClientService {
     }
 
     getAppURL(appName: string, hash: string) {
+        if (!appName) return (new URL(this.getCozyURL())).toString();
         const url = new URL(this.getCozyURL());
         const hostParts = url.host.split('.');
         url.host = [

src/popup/settings/settings.component.html

@@ -43,18 +43,25 @@
         <div class="box-content box-content-settings single-line">
             <a class="box-content-row settings-row" href="#" (click)="premium()" *ngIf="isPremiumEnabled()">
                 <div class="row-main">
-                    <div class="icon text-primary"><i class="fa fa-fw fa-lg fa-star" aria-hidden="true"></i></div>
+                    <div class="icon text-primary">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 2 32 32" style="overflow: visible;">
+                            <g fill="none" fill-rule="evenodd">
+                                <circle cx="16" cy="16" r="16" fill="#297EF1" fill-rule="nonzero"/>
+                                <path fill="#FFF" d="M19.314 17.561a.555.555 0 0 1-.82.12 4.044 4.044 0 0 1-2.499.862 4.04 4.04 0 0 1-2.494-.86.557.557 0 0 1-.815-.12.547.547 0 0 1 .156-.748c.214-.14.229-.421.229-.424a.555.555 0 0 1 .176-.385.504.504 0 0 1 .386-.145.544.544 0 0 1 .528.553c0 .004 0 .153-.054.36a2.954 2.954 0 0 0 3.784-.008 1.765 1.765 0 0 1-.053-.344.546.546 0 0 1 .536-.561h.01c.294 0 .538.237.545.532 0 0 .015.282.227.422a.544.544 0 0 1 .158.746m2.322-6.369a5.94 5.94 0 0 0-1.69-3.506A5.651 5.651 0 0 0 15.916 6a5.648 5.648 0 0 0-4.029 1.687 5.936 5.936 0 0 0-1.691 3.524 5.677 5.677 0 0 0-3.433 1.737 5.966 5.966 0 0 0-1.643 4.137C5.12 20.347 7.704 23 10.882 23h10.236c3.176 0 5.762-2.653 5.762-5.915 0-3.083-2.31-5.623-5.244-5.893"/>
+                            </g>
+                        </svg>
+                    </div>
                     <span class="text text-primary"><b>{{'premiumMembership' | i18n}}</b></span>
                 </div>
                 <span><i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i></span>
             </a>
             <!-- TODO: enable this with Cozy's password change
+          -->
             <a class="box-content-row settings-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                 (click)="changePassword()">
                 <div class="row-main">{{'changeMasterPassword' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
             </a>
-            -->
             <a class="box-content-row settings-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                 (click)="logOut()">
                 <div class="row-main">{{'logOut' | i18n}}</div>
@@ -94,15 +101,13 @@
                 <div class="row-main">{{'helpFeedback' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
             </a>
-            <!--
-            TODO: enable this when add-on is published
-            <a class="box-content-row settings-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
+            <a class="box-content-row settings-row box-content-row-multi-wrap text-default" href="#" appStopClick appBlurClick
                 (click)="rate()">
                 <div class="row-main">{{'rateExtension' | i18n}}</div>
                 <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+                <div class="box-footer in-flex-row-full-width">{{'rateExtensionDesc' | i18n}}</div>
             </a>
-            -->
         </div>
-        <div class="box-footer">{{'rateExtensionDesc' | i18n}}</div>
+        <div class="box-footer">{{'connectedCozy' | i18n}} {{getCozyURL()}}</div>
     </div>
 </content>

src/popup/settings/settings.component.ts

@@ -182,15 +182,19 @@ export class SettingsComponent implements OnInit {
 
     // TODO: redirect to the Cozy settings
     async changePassword() {
-        this.analytics.eventTrack.next({ action: 'Clicked Change Password' });
+      this.analytics.eventTrack.next({ action: 'Clicked Change Password' });
         const confirmed = await this.platformUtilsService.showDialog(
             this.i18nService.t('changeMasterPasswordConfirmation'), this.i18nService.t('changeMasterPassword'),
             this.i18nService.t('yes'), this.i18nService.t('cancel'));
         if (confirmed) {
-            BrowserApi.createNewTab('https://help.bitwarden.com/article/change-your-master-password/');
+            BrowserApi.createNewTab(this.cozyClientService.getAppURL('settings', '/profile/password'));
         }
     }
 
+    getCozyURL() {
+        return this.cozyClientService.getAppURL('', '');
+    }
+
     // TODO: Add a Cozy help
     import() {
         const url = this.cozyClientService.getAppURL('passwords', '/installation/import');

src/popup/vault/add-edit.component.html

@@ -198,7 +198,7 @@
                 </div>
             </div>
         </div>
-        <div class="box" *ngIf="cipher.type === cipherType.Login">
+        <div class="box box-uri" *ngIf="cipher.type === cipherType.Login">
             <div class="box-content">
                 <ng-container *ngIf="cipher.login.hasUris">
                     <div class="box-content-row box-content-row-multi" appBoxRow

src/popup/vault/view.component.html

@@ -179,7 +179,7 @@
             </div>
         </div>
     </div>
-    <div class="box" *ngIf="cipher.login && cipher.login.hasUris">
+    <div class="box box-uri" *ngIf="cipher.login && cipher.login.hasUris">
         <div class="box-content">
             <div class="box-content-row box-content-row-flex" *ngFor="let u of cipher.login.uris; let i = index">
                 <div class="row-main">