@dxos/plugin-client 0.7.3-staging.cc8dd3e → 0.7.3

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',
       },
     },
   },