@dxos/plugin-client 0.7.2 → 0.7.3-staging.0905f03

package/src/ClientPlugin.tsx

@@ -5,7 +5,6 @@
 import React from 'react';
 
 import {
-  filterPlugins,
   LayoutAction,
   parseIntentPlugin,
   resolvePlugin,
@@ -17,14 +16,13 @@ import {
   type TranslationsProvides,
 } from '@dxos/app-framework';
 import { Config, Defaults, Envs, Local, Storage } from '@dxos/config';
-import { type AbstractTypedObject } from '@dxos/echo-schema';
 import { registerSignalsRuntime } from '@dxos/echo-signals/react';
-import { log } from '@dxos/log';
+import { invariant } from '@dxos/invariant';
 import { createExtension, type Node } from '@dxos/plugin-graph';
 import { Client, type ClientOptions, ClientProvider } from '@dxos/react-client';
 import { type IdentityPanelProps, type JoinPanelProps } from '@dxos/shell/react';
 
-import { IdentityDialog, JoinDialog } from './components';
+import { IdentityDialog, JoinDialog, RecoveryCodeDialog, type RecoveryCodeDialogProps } from './components';
 import meta, { CLIENT_PLUGIN, ClientAction, OBSERVABILITY_ACTION } from './meta';
 import translations from './translations';
 
@@ -71,15 +69,6 @@ export type ClientPluginProvides = IntentResolverProvides &
 export const parseClientPlugin = (plugin?: Plugin) =>
   (plugin?.provides as any).client instanceof Client ? (plugin as Plugin<ClientPluginProvides>) : undefined;
 
-export type SchemaProvides = {
-  echo: {
-    schema: AbstractTypedObject[];
-  };
-};
-
-export const parseSchemaPlugin = (plugin?: Plugin) =>
-  Array.isArray((plugin?.provides as any).echo?.schema) ? (plugin as Plugin<SchemaProvides>) : undefined;
-
 export const ClientPlugin = ({
   appKey,
   invitationUrl = window.location.origin,
@@ -136,11 +125,6 @@ export const ClientPlugin = ({
       }
 
       await onReady?.(client, plugins);
-
-      filterPlugins(plugins, parseSchemaPlugin).forEach((plugin) => {
-        log('ready', { id: plugin.meta.id });
-        client.addTypes(plugin.provides.echo.schema);
-      });
     },
     unload: async () => {
       await client.destroy();
@@ -160,6 +144,8 @@ export const ClientPlugin = ({
                 );
               } else if (data.component === 'dxos.org/plugin/client/JoinDialog') {
                 return <JoinDialog {...(data.subject as JoinPanelProps)} />;
+              } else if (data.component === 'dxos.org/plugin/client/RecoveryCodeDialog') {
+                return <RecoveryCodeDialog {...(data.subject as RecoveryCodeDialogProps)} />;
               }
               break;
           }
@@ -292,6 +278,36 @@ export const ClientPlugin = ({
               await onReset?.({ target: intent.data?.target });
               return { data: true };
             }
+
+            case ClientAction.CREATE_AGENT: {
+              invariant(client.services.services.EdgeAgentService, 'Missing EdgeAgentService');
+              await client.services.services.EdgeAgentService.createAgent(null as any, { timeout: 10_000 });
+              return { data: true };
+            }
+
+            case ClientAction.CREATE_RECOVERY_CODE: {
+              invariant(client.services.services.IdentityService, 'IdentityService not available');
+              // TODO(wittjosiah): This needs a proper api. Rename property.
+              const { seedphrase } = await client.services.services.IdentityService.createRecoveryPhrase();
+              return {
+                data: true,
+                intents: [
+                  [
+                    {
+                      action: LayoutAction.SET_LAYOUT,
+                      data: {
+                        element: 'dialog',
+                        dialogBlockAlign: 'start',
+                        dialogType: 'alert',
+                        state: true,
+                        component: 'dxos.org/plugin/client/RecoveryCodeDialog',
+                        subject: { code: seedphrase },
+                      },
+                    },
+                  ],
+                ],
+              };
+            }
           }
         },
       },

package/src/components/IdentityDialog.tsx

@@ -6,8 +6,8 @@ import React, { useCallback } from 'react';
 
 import { LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
-import { Dialog } from '@dxos/react-ui';
-import { ClipboardProvider, IdentityPanel, type IdentityPanelProps } from '@dxos/shell/react';
+import { Clipboard, Dialog } from '@dxos/react-ui';
+import { IdentityPanel, type IdentityPanelProps } from '@dxos/shell/react';
 
 import { ClientAction } from '../meta';
 
@@ -44,7 +44,7 @@ export const IdentityDialog = (props: IdentityPanelProps) => {
 
   return (
     <Dialog.Content>
-      <ClipboardProvider>
+      <Clipboard.Provider>
         <IdentityPanel
           {...props}
           doneActionParent={<Dialog.Close asChild />}
@@ -53,7 +53,7 @@ export const IdentityDialog = (props: IdentityPanelProps) => {
           onRecover={handleRecover}
           onJoinNewIdentity={handleJoinNewIdentity}
         />
-      </ClipboardProvider>
+      </Clipboard.Provider>
     </Dialog.Content>
   );
 };

package/src/components/RecoveryCodeDialog.tsx

@@ -0,0 +1,58 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback, useState } from 'react';
+
+import { AlertDialog, Button, Clipboard, Input, useTranslation } from '@dxos/react-ui';
+
+import { CLIENT_PLUGIN } from '../meta';
+
+export type RecoveryCodeDialogProps = {
+  code: string;
+};
+
+export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
+  const { t } = useTranslation(CLIENT_PLUGIN);
+  const [confirmation, setConfirmation] = useState(false);
+
+  const handleConfirmation = useCallback((checked: boolean) => setConfirmation(checked), []);
+
+  return (
+    <AlertDialog.Content classNames='bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
+      <AlertDialog.Title classNames=''>{t('recovery code dialog title')}</AlertDialog.Title>
+      <p className='py-4'>{t('recovery code dialog description')}</p>
+      <Clipboard.Provider>
+        <Code value={code} />
+      </Clipboard.Provider>
+      <p className='py-4'>{t('recovery code dialog warning')}</p>
+      <div className='flex items-center gap-2 pbe-4'>
+        <Input.Root>
+          <Input.Checkbox
+            data-testid='recoveryCode.confirm'
+            checked={confirmation}
+            onCheckedChange={handleConfirmation}
+          />
+          <Input.Label>{t('recovery code confirmation label')}</Input.Label>
+        </Input.Root>
+      </div>
+      <div className='flex justify-end'>
+        <AlertDialog.Action asChild>
+          <Button data-testid='recoveryCode.continue' variant='primary' disabled={!confirmation}>
+            {t('continue label')}
+          </Button>
+        </AlertDialog.Action>
+      </div>
+    </AlertDialog.Content>
+  );
+};
+
+// TODO(wittjosiah): Factor out.
+const Code = ({ value }: { value: string }) => {
+  return (
+    <div className='relative p-2 border border-separator rounded group'>
+      <Clipboard.IconButton value={value} classNames='absolute top-2 right-2 invisible group-hover:visible' />
+      <code className='whitespace-pre-wrap'>{value}</code>
+    </div>
+  );
+};

package/src/components/index.ts

@@ -4,3 +4,4 @@
 
 export * from './IdentityDialog';
 export * from './JoinDialog';
+export * from './RecoveryCodeDialog';

package/src/meta.ts

@@ -18,6 +18,8 @@ export enum ClientAction {
   SHARE_IDENTITY = `${CLIENT_ACTION}/SHARE_IDENTITY`,
   RECOVER_IDENTITY = `${CLIENT_ACTION}/RECOVER_IDENTITY`,
   RESET_STORAGE = `${CLIENT_ACTION}/RESET_STORAGE`,
+  CREATE_AGENT = `${CLIENT_ACTION}/CREATE_AGENT`,
+  CREATE_RECOVERY_CODE = `${CLIENT_ACTION}/CREATE_RECOVERY_CODE`,
 }
 
 // NOTE: This action is hardcoded to avoid circular dependency with observability plugin.

package/src/translations.ts

@@ -9,6 +9,13 @@ export default [
     'en-US': {
       [CLIENT_PLUGIN]: {
         'open shell label': 'Open HALO',
+        'recovery code dialog title': 'Recovery Code',
+        'recovery code dialog description':
+          'This is your identity recovery code, store it in a safe place. You can use it to recover your identity if you ever lose access to your devices.',
+        'recovery code dialog warning':
+          'Please note: This code will not be displayed again and cannot be replaced. It is your private key for recovering DXOS data. Anyone with this key will also be able to gain access to your account.',
+        'recovery code confirmation label': 'Confirm the code has been saved',
+        'continue label': 'Continue',
       },
     },
   },