[MS] Update Profile pages

client/src/components/devices/DeviceCard.vue

@@ -5,33 +5,36 @@
     class="card"
     :class="isCurrent ? 'device-active' : ''"
   >
-    <ion-icon
-      class="icon-device"
-      :icon="desktopOutline"
-    />
-    <div class="card-text">
-      <div class="card-text-info">
-        <ion-text class="device-name body">
-          {{ device.deviceLabel }}
-        </ion-text>
-        <ion-text class="join-date body-sm">
-          {{ $msTranslate('DevicesPage.joinedOn') }}
-          <span>{{ $msTranslate(formatTimeSince(device.createdOn, '--', 'short', true)) }}</span>
-        </ion-text>
-      </div>
-      <technical-id
-        v-show="showId"
-        :id="device.id"
+    <div class="card-content">
+      <ion-icon
+        class="icon-device"
+        :icon="desktopOutline"
       />
+      <div class="card-text">
+        <div class="card-text-info">
+          <ion-text class="device-name subtitles-sm">
+            {{ device.deviceLabel }}
+          </ion-text>
+          <ion-text class="join-date body-sm">
+            {{ $msTranslate('DevicesPage.joinedOn') }}
+            <span>{{ $msTranslate(formatTimeSince(device.createdOn, '--', 'short', true)) }}</span>
+          </ion-text>
+        </div>
+      </div>
+
+      <ion-text
+        class="badge button-medium"
+        v-show="isCurrent"
+        :outline="true"
+      >
+        {{ $msTranslate('DevicesPage.activeDeviceBadge') }}
+      </ion-text>
     </div>
 
-    <ion-text
-      class="badge button-medium"
-      v-show="isCurrent"
-      :outline="true"
-    >
-      {{ $msTranslate('DevicesPage.activeDeviceBadge') }}
-    </ion-text>
+    <technical-id
+      v-show="showId"
+      :id="device.id"
+    />
   </div>
 </template>
 
@@ -57,15 +60,18 @@ defineProps<{
   width: 100%;
   border-radius: var(--parsec-radius-8);
   display: flex;
-  align-items: center;
-  gap: 1.5rem;
+  flex-direction: column;
+  gap: 1rem;
 
-  &.device-active {
-    background-color: var(--parsec-color-light-secondary-background);
+  &-content {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
   }
 
   .icon-device {
     font-size: 1.5rem;
+    flex-shrink: 0;
     padding: 0.5rem;
     border-radius: var(--parsec-radius-circle);
     color: var(--parsec-color-light-secondary-grey);
@@ -76,6 +82,7 @@ defineProps<{
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    overflow: hidden;
 
     &-info {
       display: flex;
@@ -84,7 +91,10 @@ defineProps<{
     }
 
     .device-name {
-      color: var(--parsec-color-light-secondary-text);
+      color: var(--parsec-color-light-primary-700);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
 
     .join-date {
@@ -108,9 +118,19 @@ defineProps<{
       }
     }
   }
+
+  &.device-active {
+    background-color: var(--parsec-color-light-secondary-background);
+
+    .icon-device {
+      color: var(--parsec-color-light-secondary-hard-grey);
+      background-color: var(--parsec-color-light-secondary-medium);
+    }
+  }
 }
 
 .badge {
+  font-size: 0.8125rem;
   margin: auto 0 auto auto;
   border-radius: var(--parsec-radius-32);
   padding: 0.25em 0.5em;

client/src/components/profile/AuthentificationCard.vue

@@ -0,0 +1,60 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+<template>
+  <div
+    class="authentification-card"
+    v-show="showCard"
+  >
+    <img
+      :src="imageSrc"
+      :alt="imageAlt"
+      class="authentification-card__image"
+    />
+    <ion-text class="authentification-card__text subtitles-normal">{{ $msTranslate(methodName) }}</ion-text>
+    <ion-icon
+      :icon="checkmarkCircle"
+      class="authentification-card__icon"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IonText, IonIcon } from '@ionic/vue';
+import { checkmarkCircle } from 'ionicons/icons';
+import { Translatable } from 'megashark-lib';
+
+defineProps<{
+  imageSrc: string;
+  imageAlt: string;
+  methodName: Translatable;
+  showCard?: boolean;
+}>();
+</script>
+
+<style scoped lang="scss">
+.authentification-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding-right: 1rem;
+  border: 1px solid var(--parsec-color-light-secondary-disabled);
+  border-radius: var(--parsec-radius-8);
+  box-shadow: var(--parsec-shadow-1);
+  overflow: hidden;
+
+  &__image {
+    padding: 1.5rem;
+    background: var(--parsec-color-light-secondary-background);
+  }
+
+  &__text {
+    color: var(--parsec-color-light-primary-700);
+    width: 100%;
+  }
+
+  &__icon {
+    font-size: 1.25rem;
+    flex-shrink: 0;
+    color: var(--parsec-color-light-primary-600);
+  }
+}
+</style>

client/src/locales/en-US.json

@@ -361,6 +361,7 @@
     },
     "SettingsModal": {
         "pageTitle": "Settings",
+        "description": "Access all language, theme and privacy settings for the application.",
         "general": "General",
         "advanced": "Advanced",
         "enableTelemetry": {
@@ -737,30 +738,13 @@
         }
     },
     "DevicesPage": {
-        "addDevice": "Add",
+        "title": "My devices",
+        "description": "You can preview and add new devices to your profile to access this organization.",
+        "addDevice": "Add a new device",
         "noDevices": "No devices.",
         "activeDeviceBadge": "Current",
         "joinedOn": "Joined:",
         "now": "Now",
-        "restorePassword": {
-            "title": "Create a recovery file",
-            "done": {
-                "label": "Recovery file already created",
-                "subtitle": "A recovery file allows you to get back access to your data in case your forgot your password or lose your devices.",
-                "subtitle2": "Without a recovery file, your account cannot be recovered and you will need to be re-invited to join the organization.",
-                "button": "Create a recovery file",
-                "recreateQuestionTitle": "Create a new recovery file?",
-                "recreateQuestionMessage": "You have already created a recovery file in the past. Do you want to create a new one?",
-                "recreateYes": "Create a new recovery file",
-                "recreateNo": "Cancel"
-            },
-            "notDone": {
-                "label": "Action required",
-                "subtitle": "A recovery file allows you to get back access to your data in case your forgot your password or lose your devices.",
-                "subtitle2": "Without a recovery file, your account cannot be recovered and you will need to be re-invited to join the organization.",
-                "button": "Create a recovery file"
-            }
-        },
         "greet": {
             "steps": {
                 "hostCode": "Host code",
@@ -833,10 +817,17 @@
         "noMatch": "Do not match"
     },
     "Authentication": {
+        "title": "Authentication",
+        "description": "You can change your authentication method at any time.",
         "keyringInfo": "Authentication will be handled through your system, so you do not have to remember an additional password. Just do not forget to lock your session when you are not in front of your computer!",
+        "method": {
+            "system": "Authentication system",
+            "password": "Password"
+        },
+        "changeAuthenticationButton": "Change method",
         "useKeyring": "Use System Authentication",
         "usePassword": "Use Password",
-        "description": "Authentication method",
+        "label": "Authentication method",
         "keyringUnavailableOnSystem": "Unavailable on your system",
         "keyringUnavailableOnWeb": "Unavailable on web"
     },
@@ -891,6 +882,7 @@
             "fileDownloaded": "File downloaded"
         },
         "actions": {
+            "createRecoveryButton": "Create a recovery file",
             "download": "Download",
             "downloadAgain": "Download again",
             "backToDevices": "Back to my devices"
@@ -1181,6 +1173,8 @@
         }
     },
     "AboutPage": {
+        "title": "About",
+        "description": "Get application information and latest changes.",
         "appInfo": {
             "version": "Version",
             "developer": "Developer",
@@ -1257,15 +1251,48 @@
         "changeAuthenticationButton": "Update",
         "authenticationUpdated": "Authentication has been updated.",
         "tabs": {
-            "devices": "My devices",
-            "authentication": "Authentication"
+            "account": {
+                "title": "My account",
+                "settings": "Settings",
+                "devices": "My devices",
+                "authentication": "Authentication",
+                "recovery": "Organization recovery"
+            },
+            "support": {
+                "title": "Support",
+                "documentation": "Documentation",
+                "help": "Feedback",
+                "about": "About"
+            }
         },
+        "logout": "Log out",
         "errors": {
             "wrongPassword": "Wrong password. Please try again.",
             "cannotChangeAuthentication": "Failed to update authentication",
             "failedToRetrieveInformation": "Failed to retrieve information. Please make sure you are online."
         }
     },
+    "OrganizationRecovery": {
+        "title": "Organization recovery files",
+        "recoveryFile": "Recovery File",
+        "recoveryKey": "Secret Key",
+        "done": {
+            "label": "Recovery file already created",
+            "subtitle": "A recovery file allows you to get back access to your data in case your forgot your password or lose your devices.",
+            "subtitle2": "Without a recovery file, your account cannot be recovered and you will need to be re-invited to join the organization.",
+            "button": "Download file",
+            "recreateQuestionTitle": "Create a new recovery file?",
+            "recreateQuestionMessage": "You have already created a recovery file in the past. Do you want to create a new one?",
+            "recreateYes": "Create a new recovery file",
+            "recreateNo": "Cancel"
+        },
+        "notDone": {
+            "label": "Action required",
+            "subtitle": "A recovery file allows you to get back access to your data in case your forgot your password or lose your devices.",
+            "subtitle2": "Without a recovery file, your account cannot be recovered and you will need to be re-invited to join the organization.",
+            "button": "Create a recovery file"
+        }
+    },
     "validators": {
         "invalidProtocol": "Link should start with 'parsec3://'.",
         "organizationName": {
@@ -1410,7 +1437,7 @@
                 "customOrderProcessing": "Order tracking",
                 "orders": "Orders"
             },
-            "preferences": "Preferences"
+            "settings": "Settings"
         },
         "personalDataPage": {
             "personalInfo": {