[MS] Implementation of multi-org on Electron only

client/src/components/organizations/OrganizationSwitchPopover.vue

@@ -0,0 +1,220 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+
+<template>
+  <div class="popover-switch">
+    <ion-title class="popover-switch-title body">{{ $t('OrganizationSwitch.loggedInOrgs') }}</ion-title>
+    <ion-list class="orga-list">
+      <ion-item
+        class="orga-list__item body"
+        button
+        lines="none"
+        v-for="org in connectedOrgs"
+        :key="org.handle"
+        :disabled="org.active"
+        @click="onOrganizationClick(org)"
+      >
+        <div class="orga">
+          <ion-avatar class="orga-avatar">
+            <span>{{ org.id.substring(0, 2) }}</span>
+          </ion-avatar>
+          <div class="orga-text-content">
+            <ion-label class="orga-text-content__name">
+              <span class="body">
+                {{ org.id }}
+              </span>
+            </ion-label>
+            <ion-label class="orga-text-content__email">
+              <span class="body-sm">
+                {{ org.userLabel }}
+              </span>
+            </ion-label>
+          </div>
+
+          <ion-text
+            class="badge caption-caption"
+            v-show="org.active"
+            :outline="true"
+          >
+            {{ $t('OrganizationSwitch.active') }}
+          </ion-text>
+        </div>
+      </ion-item>
+
+      <ion-item
+        class="orga-list__item body"
+        button
+        lines="none"
+        @click="onAllOrganizationClick"
+      >
+        <div class="orga">
+          <ion-avatar class="orga-avatar ellipsis">
+            <ion-icon :icon="ellipsisHorizontal" />
+          </ion-avatar>
+          <div class="orga-text-content">
+            <ion-label class="orga-text-content__name">
+              <span class="body">
+                {{ $t('OrganizationSwitch.myOrgs') }}
+              </span>
+            </ion-label>
+          </div>
+        </div>
+      </ion-item>
+    </ion-list>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ConnectionHandle, OrganizationID, getLoggedInDevices } from '@/parsec';
+import { getConnectionHandle } from '@/router';
+import { IonAvatar, IonIcon, IonItem, IonLabel, IonList, IonText, IonTitle, popoverController } from '@ionic/vue';
+import { ellipsisHorizontal } from 'ionicons/icons';
+import { Ref, onMounted, ref } from 'vue';
+
+interface ConnectedOrganization {
+  id: OrganizationID;
+  userLabel: string;
+  active: boolean;
+  handle: ConnectionHandle;
+}
+
+const connectedOrgs: Ref<Array<ConnectedOrganization>> = ref([]);
+
+onMounted(async () => {
+  const result = await getLoggedInDevices();
+  connectedOrgs.value = result.map((info) => {
+    return {
+      id: info.device.organizationId,
+      active: getConnectionHandle() === info.handle,
+      handle: info.handle,
+      userLabel: info.device.humanHandle.label,
+    };
+  });
+});
+
+async function onOrganizationClick(org: ConnectedOrganization): Promise<void> {
+  if (org.handle !== getConnectionHandle()) {
+    await popoverController.dismiss({
+      handle: org.handle,
+    });
+  }
+}
+
+async function onAllOrganizationClick(): Promise<void> {
+  await popoverController.dismiss({ handle: null });
+}
+</script>
+
+<style lang="scss" scoped>
+.popover-switch {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+
+  &-title {
+    color: var(--parsec-color-light-secondary-grey);
+    padding: 0;
+  }
+}
+
+.orga-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0;
+
+  &__item {
+    --background: none;
+    --background-hover: var(--parsec-color-light-primary-50);
+    --background-hover-opacity: 1;
+    border-radius: var(--parsec-radius-6);
+    --inner-padding-end: 0;
+    --padding-start: 0;
+    position: relative;
+    z-index: 2;
+    pointer-events: auto;
+
+    &::part(native) {
+      padding: 0;
+    }
+
+    &:hover {
+      .orga-avatar {
+        background-color: var(--parsec-color-light-secondary-white);
+      }
+    }
+  }
+}
+
+.orga {
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+
+  &-avatar {
+    background-color: var(--parsec-color-light-secondary-premiere);
+    color: var(--parsec-color-light-primary-600);
+    width: 2.5rem;
+    height: 2.5rem;
+    margin: 0;
+    border-radius: var(--parsec-radius-circle);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 1;
+
+    &:not(.ellipsis)::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: -4px;
+      height: 0.625rem;
+      width: 0.625rem;
+      border-radius: 50%;
+      border: var(--parsec-color-light-secondary-white) solid 0.25rem;
+      background-color: var(--parsec-color-light-success-500);
+    }
+  }
+
+  &-text-content {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+
+    &::part(native) {
+      padding: 0;
+    }
+
+    &__name {
+      color: var(--parsec-color-light-secondary-text);
+
+      .body {
+        font-size: 0.875rem;
+      }
+    }
+
+    &__email {
+      color: var(--parsec-color-light-secondary-grey);
+    }
+  }
+}
+
+// eslint-disable-next-line vue-scoped-css/no-unused-selector
+.item-disabled {
+  opacity: 1;
+  pointer-events: none;
+
+  .badge {
+    color: var(--parsec-color-light-success-500);
+    background: var(--parsec-color-light-success-100);
+    margin-left: auto;
+    border-radius: var(--parsec-radius-12);
+    padding: 0.25rem 0.5rem;
+  }
+}
+</style>

client/src/locales/en-US.json

@@ -85,7 +85,8 @@
             "sortByUserName": "User Name",
             "sortByLastLogin": "Last login",
             "labelSortBy": "Sort by",
-            "search": "Search"
+            "search": "Search",
+            "loggedIn": "Logged in"
         },
         "noExistingOrganization": {
             "title": "Need to create or join an organization?",
@@ -1187,5 +1188,10 @@
             "missingToken": "Link doesn't include a token.",
             "invalidToken": "Link contains an invalid token."
         }
+    },
+    "OrganizationSwitch": {
+        "loggedInOrgs": "Connected organizations",
+        "myOrgs": "My organizations",
+        "active": "Active"
     }
 }

client/src/locales/fr-FR.json

@@ -85,7 +85,8 @@
             "sortByUserName": "Nom d'utilisateur",
             "sortByLastLogin": "Dernière connexion",
             "labelSortBy": "Trier par",
-            "search": "Rechercher"
+            "search": "Rechercher",
+            "loggedIn": "Connecté"
         },
         "noExistingOrganization": {
             "title": "Besoin de créer ou rejoindre une organisation ?",
@@ -1187,5 +1188,10 @@
             "missingToken": "Le lien n'inclut pas de jeton.",
             "invalidToken": "Le lien contient un jeton invalide."
         }
+    },
+    "OrganizationSwitch": {
+        "loggedInOrgs": "Organisations connectées",
+        "myOrgs": "Mes organisations",
+        "active": "Active"
     }
 }

client/src/parsec/invitation.ts

@@ -68,8 +68,9 @@ export async function listUserInvitations(): Promise<Result<Array<UserInvitation
     });
     return result as any;
   } else {
-    return new Promise<Result<Array<UserInvitation>, ListInvitationsError>>((resolve, _reject) => {
-      const ret: Array<UserInvitation> = [
+    return {
+      ok: true,
+      value: [
         {
           tag: InviteListItemTag.User,
           addr: 'parsec://parsec.example.com/MyOrg?action=claim_device&token=12346565645645654645645645645645',
@@ -86,9 +87,8 @@ export async function listUserInvitations(): Promise<Result<Array<UserInvitation
           claimerEmail: '[email protected]',
           status: InvitationStatus.Ready,
         },
-      ];
-      resolve({ ok: true, value: ret });
-    });
+      ],
+    };
   }
 }
 

client/src/parsec/login.ts

@@ -25,6 +25,29 @@ import {
   UserProfile,
 } from '@/parsec/types';
 
+export interface LoggedInDeviceInfo {
+  handle: ConnectionHandle;
+  device: AvailableDevice;
+}
+
+const loggedInDevices: Array<LoggedInDeviceInfo> = [];
+
+export async function getLoggedInDevices(): Promise<Array<LoggedInDeviceInfo>> {
+  return loggedInDevices;
+}
+
+export function isDeviceLoggedIn(device: AvailableDevice): boolean {
+  return loggedInDevices.find((info) => info.device.slug === device.slug) !== undefined;
+}
+
+export function getDeviceHandle(device: AvailableDevice): ConnectionHandle | null {
+  const info = loggedInDevices.find((info) => info.device.slug === device.slug);
+  if (info) {
+    return info.handle;
+  }
+  return null;
+}
+
 export async function listAvailableDevices(): Promise<Array<AvailableDevice>> {
   return await libparsec.listAvailableDevices(window.getConfigDir());
 }
@@ -34,16 +57,26 @@ export async function login(device: AvailableDevice, password: string): Promise<
     console.log('Event received', event);
   }
 
+  const info = loggedInDevices.find((info) => info.device.slug === device.slug);
+  if (info !== undefined) {
+    return { ok: true, value: info.handle };
+  }
+
   if (!needsMocks()) {
     const clientConfig = getClientConfig();
     const strategy: DeviceAccessStrategyPassword = {
       tag: DeviceAccessStrategyTag.Password,
       password: password,
       keyFile: device.keyFilePath,
     };
-    return await libparsec.clientStart(clientConfig, parsecEventCallback, strategy);
+    const result = await libparsec.clientStart(clientConfig, parsecEventCallback, strategy);
+    if (result.ok) {
+      loggedInDevices.push({ handle: result.value, device: device });
+    }
+    return result;
   } else {
     if (password === 'P@ssw0rd.' || password === 'AVeryL0ngP@ssw0rd') {
+      loggedInDevices.push({ handle: DEFAULT_HANDLE, device: device });
       return { ok: true, value: DEFAULT_HANDLE };
     }
     return {
@@ -60,8 +93,19 @@ export async function logout(): Promise<Result<null, ClientStopError>> {
   const handle = getParsecHandle();
 
   if (handle !== null && !needsMocks()) {
-    return await libparsec.clientStop(handle);
+    const result = await libparsec.clientStop(handle);
+    if (result.ok) {
+      const index = loggedInDevices.findIndex((info) => info.handle === handle);
+      if (index !== -1) {
+        loggedInDevices.splice(index, 1);
+      }
+    }
+    return result;
   } else {
+    const index = loggedInDevices.findIndex((info) => info.handle === handle);
+    if (index !== -1) {
+      loggedInDevices.splice(index, 1);
+    }
     return { ok: true, value: null };
   }
 }

client/src/router/index.ts

@@ -3,6 +3,7 @@
 export * from '@/router/checks';
 export * from '@/router/navigation';
 export {
+  getConnectionHandle,
   getCurrentRouteName,
   getCurrentRouteParams,
   getCurrentRouteQuery,
@@ -12,3 +13,4 @@ export {
   getWorkspaceId,
 } from '@/router/params';
 export * from '@/router/types';
+export { watchOrganizationSwitch, watchRoute } from '@/router/watchers';