[MS] Update organization recovery page

Author: fabienSvtr

client/src/assets/images/person-circle.svg

@@ -23,7 +23,7 @@
       </div>
 
       <ion-text
-        class="badge button-medium"
+        class="badge-active button-medium"
         v-show="isCurrent"
         :outline="true"
       >
@@ -129,12 +129,15 @@ defineProps<{
   }
 }
 
-.badge {
-  font-size: 0.8125rem;
-  margin: auto 0 auto auto;
-  border-radius: var(--parsec-radius-32);
-  padding: 0.25em 0.5em;
-  color: var(--parsec-color-light-primary-600);
-  background: var(--parsec-color-light-primary-100);
+.badge-active {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: var(--parsec-color-light-primary-50);
+  color: var(--parsec-color-light-primary-500);
+  flex-shrink: 0;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--parsec-radius-12);
+  white-space: nowrap;
 }
 </style>

client/src/assets/images/recovery-device-icon.svg

@@ -1,50 +1,64 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
-  <div
-    class="profile-info-card"
-    :class="{ 'profile-info-card--center': centerContent }"
-  >
-    <ion-text class="profile-info-card__name title-h2">
-      {{ label }}
-    </ion-text>
-    <ion-text class="profile-info-card__email body">
-      {{ email }}
-    </ion-text>
-    <user-profile-tag :profile="currentProfile" />
+  <div class="profile-info-card">
+    <ms-image
+      :image="PersonCircle"
+      class="profile-info-card__avatar"
+    />
+    <div class="profile-info-card-content">
+      <div class="profile-info-card-item">
+        <ion-text class="item-text title-h3">
+          {{ label }}
+        </ion-text>
+        <user-profile-tag :profile="currentProfile" />
+      </div>
+
+      <div class="profile-info-card-item">
+        <ion-text class="item-text body-lg">
+          {{ email }}
+        </ion-text>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import PersonCircle from '@/assets/images/person-circle.svg?raw';
 import UserProfileTag from '@/components/users/UserProfileTag.vue';
 import { UserProfile } from '@/parsec';
 import { IonText } from '@ionic/vue';
+import { MsImage } from 'megashark-lib';
 
 defineProps<{
   label: string;
   email: string;
   currentProfile: UserProfile;
-  centerContent?: boolean;
 }>();
 </script>
 
 <style lang="scss" scoped>
 .profile-info-card {
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  align-items: center;
+  gap: 1rem;
 
-  &--center {
-    align-items: center;
+  &__avatar {
+    height: 3rem;
+    color: var(--parsec-color-light-secondary-text);
   }
 
-  &__name {
-    color: var(--parsec-color-light-secondary-text);
+  &-content {
+    display: flex;
+    flex-direction: column;
   }
 
-  &__email {
-    margin-bottom: 0.5rem;
-    color: var(--parsec-color-light-secondary-soft-text);
+  &-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    justify-content: space-between;
+    color: var(--parsec-color-light-secondary-text);
   }
 }
 </style>

client/src/assets/images/recovery-file-icon.svg

@@ -245,6 +245,7 @@ onUnmounted(async (): Promise<void> => {
   padding-top: 0px;
   padding-bottom: 0px;
   gap: 2rem;
+  contain: initial;
 
   &-container {
     display: flex;
@@ -256,7 +257,10 @@ onUnmounted(async (): Promise<void> => {
     background: var(--parsec-color-light-secondary-white);
     border-radius: var(--parsec-radius-12);
     padding: 1.5rem 0 0;
-    box-shadow: var(--parsec-shadow-input);
+    box-shadow:
+      0 1px 1px 0 rgba(0, 0, 0, 0.05),
+      0 1px 4px 0 rgba(0, 0, 0, 0.03),
+      0 0 1px 0 rgba(0, 0, 0, 0.2);
 
     &__title {
       color: var(--parsec-color-light-primary-700);

client/src/assets/images/recovery-trusted-user-icon.svg

@@ -3,7 +3,7 @@
 <template>
   <div class="settings-option">
     <div class="settings-option__content">
-      <ion-text class="button-medium title">
+      <ion-text class="button-large title">
         {{ $msTranslate(title) }}
       </ion-text>
       <ion-text class="body-sm description">
@@ -43,7 +43,7 @@ defineProps<{
     }
 
     .description {
-      color: var(--parsec-color-light-secondary-grey);
+      color: var(--parsec-color-light-secondary-hard-grey);
     }
   }
 }

client/src/components/devices/DeviceCard.vue

@@ -188,7 +188,7 @@
             "devices": "My devices",
             "authentication": "Authentication",
             "account": "Account",
-            "recovery": "Recovery file",
+            "recovery": "Access recovery",
             "contactUs": "Contact us",
             "documentation": "Documentation",
             "logout": "Log out",
@@ -2097,6 +2097,10 @@
         "title": "Changes"
     },
     "MyProfilePage": {
+        "settings": {
+            "title": "Settings",
+            "description": "Access language, theme and privacy settings for the application."
+        },
         "titleCurrentPassword": "Enter your current password",
         "titleCurrentOpenBao": "Connect to your SSO provider",
         "titleNewAuthentication": "Change authentication method",
@@ -2114,7 +2118,7 @@
                 "settings": "Settings",
                 "devices": "My devices",
                 "authentication": "Authentication",
-                "recovery": "Recovery files"
+                "recovery": "Access recovery"
             },
             "support": {
                 "title": "Support",
@@ -2133,16 +2137,37 @@
         }
     },
     "OrganizationRecovery": {
-        "title": "Organization recovery files",
-        "recoveryFile": "Recovery Files",
-        "recoveryKey": "Secret Key",
+        "title": "Access recovery",
+        "description": "Set up recovery options in case you lose your access (forgotten password, lost login details, etc.) from a device or browser.",
         "advice": "We strongly recommend creating recovery files for each organization.",
-        "adviceDone": "You have already created recovery files.",
+        "file": {
+            "title": "Recovery files",
+            "description": "A recovery file combined with a secret key allow you to restore access to your data once assembled.",
+            "info": "You need to save this recovery file and this secret key in a secure place, if possible in separate places, as both are needed to recover a device's access to an organization.",
+            "downloaded": "Files downloaded",
+            "action": "Create recovery files"
+        },
+        "device": {
+            "title": "Trusted devices or browsers",
+            "description": "Add secondary devices or browsers (Chrome or Firefox) as backup accesses to this organization.",
+            "activeDevices": "1 other active device/browser | {count} other active devices/browsers",
+            "action": "Add a device"
+        },
+        "trustedUser": {
+            "title": "People of trust",
+            "description": "Designate trusted people who can help you recover your account in case of lost access (minimum {minUsers} people).",
+            "action": "Manage my people of trust",
+            "actionSecondary": "Help recover a person"
+        },
+        "state": {
+            "active": "Active",
+            "inactive": "Inactive"
+        },
+        "modal": {
+            "title": "Recovery files",
+            "confirmation": "I confirm that I have copied my secret key and downloaded my recovery file."
+        },
         "done": {
-            "subtitle": "Recovery files allow you to regain access to this organization if you forgot your password or lose your devices.",
-            "subtitle2": "Without recovery files, you will not be able to recover your account in such a case, and you will need to be re-invited to the organization.",
-            "subtitle3": "They consist of a recovery file and a recovery key. You need to save both in a secure place, if possible in separate places, as both are needed to recover a device's access to an organization.",
-            "button": "Download file",
             "recreateQuestionTitle": "Create new recovery files?",
             "recreateQuestionMessage": "You have already created recovery files in the past. Do you want to create new ones?",
             "recreateYes": "Create new recovery files",