@dxos/shell 0.3.11-main.4feb9c9 → 0.3.11-main.5960564

package/src/panels/IdentityPanel/identityMachine.ts

@@ -19,7 +19,7 @@ type IdentityMachineContext = {
 };
 
 type IdentityChooseActionEvent = {
-  type: 'chooseDevices' | 'chooseAgent' | 'chooseProfile' | /* 'chooseSignOut' | */ 'unchooseAction';
+  type: 'chooseDevices' | 'chooseAgent' | 'chooseProfile' | 'chooseSignOut' | 'sigingOut' | 'unchooseAction';
 };
 
 type IdentitySelectDeviceInvitationEvent = {
@@ -77,7 +77,7 @@ const identityMachine = createMachine<IdentityMachineContext, IdentityEvent>(
           updateProfile: { target: '.pending', actions: 'log' },
         },
       },
-      // signingOut: {},
+      signingOut: {},
     },
     on: {
       unchooseAction: { target: '.choosingAction', actions: ['unsetInvitation', 'log'] },
@@ -85,8 +85,8 @@ const identityMachine = createMachine<IdentityMachineContext, IdentityEvent>(
       selectInvitation: { target: '.managingDeviceInvitation', actions: ['setInvitation', 'log'] },
       chooseDevices: { target: '.managingDevices', actions: 'log' },
       chooseProfile: { target: '.managingProfile', actions: 'log' },
+      chooseSignOut: { target: '.signingOut', actions: 'log' },
       chooseAgent: { target: '.managingAgent', actions: 'log' },
-      // chooseSignOut: { target: '.signingOut', actions: 'log' },
     },
   },
   {

package/src/panels/IdentityPanel/steps/IdentityActionChooser.tsx

@@ -88,12 +88,7 @@ export const IdentityActionChooserImpl = ({
             <span className='grow mli-3'>{t('choose profile label')}</span>
             <CaretRight weight='bold' className={getSize(4)} />
           </Action>
-          <Action
-            disabled
-            data-testid='sign-out'
-            onClick={() => {} /* send({ type: 'chooseSignOut' }) */}
-            classNames='plb-4'
-          >
+          <Action data-testid='sign-out' onClick={() => send?.({ type: 'chooseSignOut' })} classNames='plb-4'>
             <Power className={getSize(6)} />
             <span className='grow mli-3'>{t('choose sign out label')}</span>
             <CaretRight weight='bold' className={getSize(4)} />

package/src/panels/IdentityPanel/steps/SignOutChooser.tsx

@@ -0,0 +1,82 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Warning } from '@phosphor-icons/react';
+import React from 'react';
+import { type Event, type SingleOrArray } from 'xstate';
+
+import { Message, useTranslation } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { Action, Actions } from '../../../components';
+import { type IdentityPanelStepProps } from '../IdentityPanelProps';
+import { type IdentityEvent } from '../identityMachine';
+
+export interface SignOutChooserProps extends Omit<IdentityPanelStepProps, 'send'> {
+  send?: (event: SingleOrArray<Event<IdentityEvent>>) => void;
+  onResetDevice?: () => Promise<void>;
+  onJoinNewIdentity?: () => void;
+}
+
+export const SignOutChooser = (props: SignOutChooserProps) => {
+  const { t } = useTranslation('os');
+  const onResetDevice = () => {
+    if (window.confirm(t('reset device confirm message'))) {
+      void props.onResetDevice?.();
+    }
+  };
+  return (
+    <SignOutChooserImpl
+      disabled={!props.active}
+      onBack={() => props.send?.({ type: 'unchooseAction' })}
+      onResetDevice={onResetDevice}
+      onJoinNewIdentity={props.onJoinNewIdentity}
+    />
+  );
+};
+
+export type SignOutChooserImplProps = {
+  disabled?: boolean;
+  onResetDevice?: () => void;
+  onJoinNewIdentity?: () => void;
+  onBack?: () => void;
+};
+
+const SignOutChooserImpl = ({ disabled, onResetDevice, onJoinNewIdentity, onBack }: SignOutChooserImplProps) => {
+  const { t } = useTranslation('os');
+  return (
+    <>
+      <div role='none' className='grow flex flex-col justify-center'>
+        <Message.Root valence='error'>
+          <Message.Title>
+            <Warning className={mx(getSize(6), 'inline mie-2')} />
+            {t('sign out chooser title')}
+          </Message.Title>
+          <Message.Body>{t('sign out chooser message')}</Message.Body>
+        </Message.Root>
+      </div>
+      <Actions>
+        <Action disabled={disabled} onClick={onBack}>
+          {t('back label')}
+        </Action>
+        <Action
+          variant='primary'
+          classNames='!bg-error-500 hover:!bg-error-550'
+          disabled={disabled}
+          onClick={onJoinNewIdentity}
+        >
+          {t('join new identity label')}
+        </Action>
+        <Action
+          variant='primary'
+          classNames='!bg-error-500 hover:!bg-error-550'
+          disabled={disabled}
+          onClick={onResetDevice}
+        >
+          {t('reset device label')}
+        </Action>
+      </Actions>
+    </>
+  );
+};

package/src/panels/IdentityPanel/steps/index.ts

@@ -2,7 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './AgentPanel';
 export * from './DeviceManager';
 export * from './IdentityActionChooser';
 export * from './ProfileForm';
-export * from './AgentPanel';
+export * from './SignOutChooser';

package/src/translations/locales/en-US.ts

@@ -99,4 +99,9 @@ export const os = {
     'This will clear this device and all associated data. Type {{confirmationValue}} and confirm to continue.',
   'failed to reset identity message': 'Failed to reset identity.',
   'confirmation value': 'CONFIRM',
+  'sign out chooser title': 'DANGER ZONE',
+  'sign out chooser message': 'Proceeding with either action below will erase all data on this device.',
+  'join new identity label': 'Join a new identity',
+  'reset device label': 'Reset device',
+  'reset device confirm message': 'Are you sure you want to reset your device? All data will be lost.',
 };