@dxos/react-ui 0.1.23 → 0.1.24-next.6b1f434

package/src/panels/JoinPanel/JoinHeading.tsx

@@ -0,0 +1,85 @@
+//
+// Copyright 2023 DXOS.org
+//
+import { ProhibitInset } from 'phosphor-react';
+import React, { cloneElement, ForwardedRef, forwardRef } from 'react';
+
+import { AuthenticatingInvitationObservable } from '@dxos/client';
+import { useSpace } from '@dxos/react-client';
+import { Avatar, Button, getSize, Heading, mx, Trans, useId, useTranslation } from '@dxos/react-components';
+
+import { subduedSurface } from '../../styles';
+import { JoinPanelMode } from './JoinPanelProps';
+
+export interface JoinSpaceHeadingProps {
+  mode?: JoinPanelMode;
+  titleId: string;
+  invitation?: AuthenticatingInvitationObservable;
+  onExit?: () => void;
+  exitActionParent?: Parameters<typeof cloneElement>[0];
+  preventExit?: boolean;
+}
+
+export const JoinHeading = forwardRef(
+  (
+    { mode, titleId, invitation, onExit, exitActionParent, preventExit }: JoinSpaceHeadingProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const { t } = useTranslation('os');
+
+    const space = useSpace(invitation?.invitation?.spaceKey);
+    const name = mode === 'halo-only' ? '(Unknown identity)' : space?.properties.name ?? '(Space name not available)';
+    const nameId = useId(mode === 'halo-only' ? 'identityDisplayName' : 'spaceDisplayName');
+
+    const invitationKey =
+      mode === 'halo-only'
+        ? invitation?.invitation?.identityKey?.toHex()
+        : invitation?.invitation?.identityKey?.toHex();
+
+    const exitButton = (
+      <Button
+        compact
+        variant='ghost'
+        {...(onExit && { onClick: onExit })}
+        className='grow-0 shrink-0'
+        data-testid='join-exit'
+      >
+        <ProhibitInset className={getSize(5)} />
+        <span className='sr-only'>{t('exit label')}</span>
+      </Button>
+    );
+
+    return (
+      <div role='none' className={mx(subduedSurface, 'p-2 rounded-bs-md')} ref={ref}>
+        <div role='group' className='flex items-center gap-2'>
+          {invitationKey ? (
+            <Avatar fallbackValue={invitationKey} labelId={nameId} />
+          ) : (
+            <span role='none' className={mx(getSize(10), 'bg-neutral-300 dark:bg-neutral-700 rounded-full')} />
+          )}
+          <Heading level={1} className='font-body font-normal text-base grow' id={titleId}>
+            {invitation ? (
+              <Trans
+                {...{
+                  defaults: t('joining heading'),
+                  components: {
+                    small: <span className='block leading-none mbe-1 font-system-medium text-sm' />,
+                    large: <span className='block leading-none' id={nameId} />
+                  },
+                  values: { name }
+                }}
+              />
+            ) : (
+              <span className='block leading-none font-system-medium text-sm'>
+                {mode === 'halo-only' ? t('halo heading') : t('join space heading')}
+              </span>
+            )}
+          </Heading>
+          {!preventExit &&
+            mode !== 'halo-only' &&
+            (exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton)}
+        </div>
+      </div>
+    );
+  }
+);

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -0,0 +1,319 @@
+//
+// Copyright 2023 DXOS.org
+//
+import React, { useEffect, useReducer } from 'react';
+
+import { InvitationEncoder } from '@dxos/client';
+import { log } from '@dxos/log';
+import { useClient, useIdentity } from '@dxos/react-client';
+import { useId } from '@dxos/react-components';
+
+import { JoinHeading } from './JoinHeading';
+import { JoinAction, JoinPanelProps, JoinState } from './JoinPanelProps';
+import {
+  AdditionMethodSelector,
+  IdentitySelector,
+  IdentityInput,
+  IdentityAdded,
+  InvitationAuthenticator,
+  InvitationRescuer,
+  InvitationInput,
+  InvitationAccepted
+} from './view-states';
+
+export const JoinPanel = ({
+  mode,
+  initialInvitationCode,
+  titleId: propsTitleId,
+  exitActionParent,
+  onExit,
+  doneActionParent,
+  onDone,
+  preventExit
+}: JoinPanelProps) => {
+  const client = useClient();
+  const internalTitleId = useId('joinPanel__title');
+  const titleId = propsTitleId ?? internalTitleId;
+  const identity = useIdentity();
+
+  const availableIdentities = identity ? [identity] : [];
+
+  const reducer = (state: JoinState, action: JoinAction) => {
+    const nextState = { ...state };
+    switch (action.type) {
+      case 'added identity':
+        nextState.activeView = 'identity added';
+        nextState.selectedIdentity = action.identity;
+        break;
+      case 'add identity':
+        nextState.activeView = 'addition method selector';
+        break;
+      case 'select addition method':
+        if (action.method === 'accept device invitation') {
+          nextState.activeView = 'halo invitation acceptor';
+          if (state.unredeemedHaloInvitationCode) {
+            nextState.haloInvitation = client.halo.acceptInvitation(
+              InvitationEncoder.decode(state.unredeemedHaloInvitationCode)
+            );
+            nextState.unredeemedHaloInvitationCode = undefined;
+            nextState.haloViewState = 'invitation authenticator';
+          } else {
+            nextState.haloViewState = 'invitation input';
+          }
+        } else {
+          nextState.activeView = 'identity input';
+          nextState.additionMethod = action.method;
+        }
+        break;
+      case 'select identity':
+        nextState.selectedIdentity = action.identity;
+        nextState.activeView = 'space invitation acceptor';
+        if (state.unredeemedSpaceInvitationCode) {
+          nextState.spaceInvitation = client.echo.acceptInvitation(
+            InvitationEncoder.decode(state.unredeemedSpaceInvitationCode)
+          );
+          nextState.unredeemedSpaceInvitationCode = undefined;
+          nextState.spaceViewState = 'invitation authenticator';
+        } else {
+          nextState.spaceViewState = 'invitation input';
+        }
+        break;
+      case 'deselect identity':
+        nextState.selectedIdentity = undefined;
+        nextState.activeView = 'identity selector';
+        break;
+      case 'cancel invitation':
+        if (action.from === 'space' && state.spaceInvitation?.invitation) {
+          void state.spaceInvitation?.cancel();
+        }
+        if (action.from === 'halo' && state.haloInvitation?.invitation) {
+          void state.haloInvitation?.cancel();
+        }
+        break;
+      case 'authenticating invitation':
+        nextState[action.from === 'halo' ? 'haloInvitationAnnotation' : 'spaceInvitationAnnotation'] = 'authenticating';
+        break;
+      case 'connecting invitation':
+        nextState[action.from === 'halo' ? 'haloInvitation' : 'spaceInvitation'] = action.invitation;
+      // eslint-disable-next-line no-fallthrough
+      case 'cancelled invitation':
+      case 'fail invitation':
+      case 'timeout invitation':
+        nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation rescuer';
+        break;
+      case 'connect invitation':
+      case 'authenticate invitation':
+        if (action.from === 'halo' && state.haloInvitationAnnotation === 'authenticating') {
+          nextState.haloInvitationAnnotation = 'authentication failed';
+        }
+        if (action.from === 'space' && state.spaceInvitationAnnotation === 'authenticating') {
+          nextState.spaceInvitationAnnotation = 'authentication failed';
+        }
+        nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation authenticator';
+        break;
+      case 'accepted invitation':
+        nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation accepted';
+        break;
+      case 'reset invitation':
+        nextState[action.from === 'halo' ? 'haloInvitation' : 'spaceInvitation'] = undefined;
+        nextState[action.from === 'halo' ? 'haloInvitationAnnotation' : 'spaceInvitationAnnotation'] = undefined;
+        nextState[action.from === 'halo' ? 'unredeemedHaloInvitationCode' : 'unredeemedSpaceInvitationCode'] =
+          undefined;
+        nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation input';
+        break;
+    }
+    log('[join panel reducer]', { action, nextState });
+    return nextState;
+  };
+
+  const unredeemedHaloInvitationCode = mode === 'halo-only' ? initialInvitationCode : undefined;
+  const [joinState, dispatch] = useReducer(reducer, {
+    unredeemedHaloInvitationCode,
+    unredeemedSpaceInvitationCode: mode === 'halo-only' ? undefined : initialInvitationCode,
+    spaceInvitation: undefined,
+    haloInvitation: undefined,
+    activeView: availableIdentities.length > 0 ? 'identity selector' : 'addition method selector',
+    selectedIdentity: undefined,
+    additionMethod: undefined,
+    spaceViewState: 'invitation input',
+    haloViewState: 'invitation input'
+  });
+
+  useEffect(() => {
+    if (unredeemedHaloInvitationCode) {
+      dispatch({ type: 'select addition method', method: 'accept device invitation' });
+    }
+  }, [unredeemedHaloInvitationCode]);
+
+  useEffect(() => {
+    // TODO (thure): Validate if this is sufficiently synchronous for iOS to move focus. It might not be!
+    const attrValue =
+      joinState.activeView === 'identity input'
+        ? `${joinState.activeView}; ${joinState.additionMethod}`
+        : joinState.activeView === 'space invitation acceptor'
+        ? `${joinState.activeView}; ${joinState.spaceViewState}`
+        : joinState.activeView === 'halo invitation acceptor'
+        ? `${joinState.activeView}; ${joinState.haloViewState}`
+        : joinState.activeView;
+    log('[autofocus value]', { attrValue });
+    const $nextAutofocus: HTMLElement | null = document.querySelector(`[data-autofocus="${attrValue}"]`);
+    if ($nextAutofocus) {
+      $nextAutofocus.focus();
+    }
+  }, [joinState.activeView, joinState.spaceViewState, joinState.haloViewState]);
+
+  useEffect(() => {
+    return joinState.spaceInvitation?.subscribe({
+      onAuthenticating: () => dispatch({ type: 'authenticate invitation', from: 'space' }),
+      onCancelled: () => dispatch({ type: 'cancelled invitation', from: 'space' }),
+      onConnected: () => dispatch({ type: 'connect invitation', from: 'space' }),
+      onError: () => dispatch({ type: 'fail invitation', from: 'space' }),
+      onSuccess: () => dispatch({ type: 'accepted invitation', from: 'space' }),
+      onTimeout: () => dispatch({ type: 'timeout invitation', from: 'space' })
+    });
+  }, [joinState.spaceInvitation]);
+
+  useEffect(() => {
+    return joinState.haloInvitation?.subscribe({
+      onAuthenticating: () => dispatch({ type: 'authenticate invitation', from: 'halo' }),
+      onCancelled: () => dispatch({ type: 'cancelled invitation', from: 'halo' }),
+      onConnected: () => dispatch({ type: 'connect invitation', from: 'halo' }),
+      onError: () => dispatch({ type: 'fail invitation', from: 'halo' }),
+      onSuccess: () => dispatch({ type: 'accepted invitation', from: 'halo' }),
+      onTimeout: () => dispatch({ type: 'timeout invitation', from: 'halo' })
+    });
+  }, [joinState.haloInvitation]);
+
+  return (
+    <>
+      <JoinHeading
+        {...{ mode, titleId, invitation: joinState.spaceInvitation, onExit, exitActionParent, preventExit }}
+      />
+      <div role='none' className='is-full overflow-hidden'>
+        <div role='none' className='flex is-[1300%]' aria-live='polite'>
+          <IdentitySelector
+            {...{ dispatch, availableIdentities, active: joinState.activeView === 'identity selector' }}
+          />
+          <AdditionMethodSelector
+            {...{
+              dispatch,
+              availableIdentities,
+              active: joinState.activeView === 'addition method selector'
+            }}
+          />
+          <IdentityInput
+            {...{
+              dispatch,
+              active: joinState.activeView === 'identity input' && joinState.additionMethod === 'create identity',
+              method: 'create identity'
+            }}
+          />
+          <IdentityInput
+            {...{
+              dispatch,
+              active: joinState.activeView === 'identity input' && joinState.additionMethod === 'recover identity',
+              method: 'recover identity'
+            }}
+          />
+          <InvitationInput
+            {...{
+              dispatch,
+              activeInvitation: joinState.haloInvitation || true,
+              active:
+                joinState.activeView === 'halo invitation acceptor' && joinState.haloViewState === 'invitation input',
+              invitationType: 'halo'
+            }}
+          />
+          <InvitationRescuer
+            {...{
+              dispatch,
+              activeInvitation: joinState.haloInvitation || true,
+              active:
+                joinState.activeView === 'halo invitation acceptor' && joinState.haloViewState === 'invitation rescuer',
+              invitationType: 'halo'
+            }}
+          />
+          <InvitationAuthenticator
+            {...{
+              dispatch,
+              activeInvitation: joinState.haloInvitation || true,
+              active:
+                joinState.activeView === 'halo invitation acceptor' &&
+                joinState.haloViewState === 'invitation authenticator',
+              invitationType: 'halo',
+              ...(joinState.spaceInvitationAnnotation === 'authentication failed' && { failed: true })
+            }}
+          />
+          <InvitationAccepted
+            {...{
+              dispatch,
+              activeInvitation: joinState.haloInvitation || true,
+              active:
+                joinState.activeView === 'halo invitation acceptor' &&
+                joinState.haloViewState === 'invitation accepted',
+              invitationType: 'halo',
+              doneActionParent,
+              onDone
+            }}
+          />
+          <IdentityAdded
+            {...{
+              mode,
+              dispatch,
+              addedIdentity: joinState.selectedIdentity,
+              active: joinState.activeView === 'identity added',
+              doneActionParent,
+              onDone
+            }}
+          />
+          <InvitationInput
+            {...{
+              dispatch,
+              activeInvitation: joinState.spaceInvitation || true,
+              selectedIdentity: joinState.selectedIdentity,
+              active:
+                joinState.activeView === 'space invitation acceptor' && joinState.spaceViewState === 'invitation input',
+              invitationType: 'space'
+            }}
+          />
+          <InvitationRescuer
+            {...{
+              dispatch,
+              activeInvitation: joinState.spaceInvitation || true,
+              selectedIdentity: joinState.selectedIdentity,
+              active:
+                joinState.activeView === 'space invitation acceptor' &&
+                joinState.spaceViewState === 'invitation rescuer',
+              invitationType: 'space'
+            }}
+          />
+          <InvitationAuthenticator
+            {...{
+              dispatch,
+              activeInvitation: joinState.spaceInvitation || true,
+              selectedIdentity: joinState.selectedIdentity,
+              active:
+                joinState.activeView === 'space invitation acceptor' &&
+                joinState.spaceViewState === 'invitation authenticator',
+              invitationType: 'space',
+              ...(joinState.spaceInvitationAnnotation === 'authentication failed' && { failed: true })
+            }}
+          />
+          <InvitationAccepted
+            {...{
+              dispatch,
+              activeInvitation: joinState.spaceInvitation || true,
+              selectedIdentity: joinState.selectedIdentity,
+              active:
+                joinState.activeView === 'space invitation acceptor' &&
+                joinState.spaceViewState === 'invitation accepted',
+              invitationType: 'space',
+              doneActionParent,
+              onDone
+            }}
+          />
+        </div>
+      </div>
+    </>
+  );
+};

package/src/panels/JoinPanel/JoinPanelProps.ts

@@ -0,0 +1,90 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { cloneElement, Dispatch } from 'react';
+
+import type { AuthenticatingInvitationObservable, Profile } from '@dxos/client';
+import { InvitationResult } from '@dxos/react-client';
+
+export type JoinPanelMode = 'default' | 'halo-only';
+
+export interface JoinPanelProps {
+  mode?: JoinPanelMode;
+  initialInvitationCode?: string;
+  titleId?: string;
+  exitActionParent?: Parameters<typeof cloneElement>[0];
+  onExit?: () => void;
+  preventExit?: boolean;
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: (result: InvitationResult | null) => void;
+  parseInvitationCodeInput?: (invitationCodeInput: string) => string;
+}
+
+export interface IdentityAction {
+  type: 'select identity' | 'added identity';
+  identity: Profile;
+}
+
+export interface EmptyJoinAction {
+  type: 'deselect identity' | 'cancel addition' | 'add identity';
+}
+
+export interface EmptyInvitationAction {
+  type:
+    | 'authenticating invitation'
+    | 'authenticate invitation'
+    | 'cancel invitation'
+    | 'cancelled invitation'
+    | 'connect invitation'
+    | 'fail invitation'
+    | 'accepted invitation'
+    | 'timeout invitation'
+    | 'reset invitation';
+  from: 'space' | 'halo';
+}
+
+export interface InvitationCodeAction {
+  type: 'connecting invitation';
+  from: 'space' | 'halo';
+  invitation: AuthenticatingInvitationObservable;
+}
+
+export type InvitationAction = EmptyInvitationAction | InvitationCodeAction;
+
+export interface AdditionMethodAction {
+  type: 'select addition method';
+  method: 'recover identity' | 'accept device invitation' | 'create identity';
+}
+
+export type JoinAction = IdentityAction | EmptyJoinAction | AdditionMethodAction | InvitationAction;
+
+export type JoinDispatch = Dispatch<JoinAction>;
+
+export type InvitationView =
+  | 'invitation input'
+  | 'invitation rescuer'
+  | 'invitation authenticator'
+  | 'invitation accepted';
+
+export type JoinView =
+  | 'identity selector'
+  | 'addition method selector'
+  | 'identity input'
+  | 'identity added'
+  | 'space invitation acceptor'
+  | 'halo invitation acceptor';
+
+export interface JoinState {
+  activeView: JoinView;
+  unredeemedSpaceInvitationCode?: string;
+  spaceInvitation?: AuthenticatingInvitationObservable;
+  spaceViewState: InvitationView;
+  spaceInvitationAnnotation?: 'authenticating' | 'authentication failed';
+  unredeemedHaloInvitationCode?: string;
+  haloInvitation?: AuthenticatingInvitationObservable;
+  haloViewState: InvitationView;
+  haloInvitationAnnotation?: 'authenticating' | 'authentication failed';
+  selectedIdentity?: Profile;
+  additionMethod?: AdditionMethodAction['method'];
+}

package/src/panels/JoinPanel/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './JoinPanel';
+export * from './JoinPanelProps';

package/src/panels/JoinPanel/view-states/AdditionMethodSelector.tsx

@@ -0,0 +1,73 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, CaretRight, Plus, QrCode, Textbox } from 'phosphor-react';
+import React from 'react';
+
+import type { Profile } from '@dxos/client';
+import { Button, CompoundButton, getSize, mx, useTranslation } from '@dxos/react-components';
+
+import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
+
+export interface AdditionMethodSelectorProps extends ViewStateProps {
+  availableIdentities: Profile[];
+}
+
+export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps }: AdditionMethodSelectorProps) => {
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+
+  const { t } = useTranslation('os');
+
+  const sharedButtonProps = {
+    disabled,
+    after: <CaretRight className={getSize(4)} weight='bold' />,
+    slots: { label: { className: 'text-sm' } }
+  };
+
+  return (
+    <ViewState {...viewStateProps}>
+      <ViewStateHeading>{t('addition method selector title')}</ViewStateHeading>
+      <div role='none' className='flex flex-col gap-1 grow'>
+        <CompoundButton
+          {...sharedButtonProps}
+          description={t('create identity description')}
+          before={<Plus className={getSize(6)} />}
+          onClick={() => dispatch({ type: 'select addition method', method: 'create identity' })}
+          data-autofocus='addition method selector'
+          data-testid='create-identity'
+        >
+          {t('create identity label')}
+        </CompoundButton>
+        <CompoundButton
+          {...sharedButtonProps}
+          description={t('join identity description')}
+          before={<QrCode className={getSize(6)} />}
+          onClick={() => dispatch({ type: 'select addition method', method: 'accept device invitation' })}
+          data-testid='join-identity'
+        >
+          {t('join identity label')}
+        </CompoundButton>
+        <CompoundButton
+          {...sharedButtonProps}
+          description={t('recover identity description')}
+          before={<Textbox className={getSize(6)} />}
+          onClick={() => dispatch({ type: 'select addition method', method: 'recover identity' })}
+          data-testid='recover-identity'
+        >
+          {t('recover identity label')}
+        </CompoundButton>
+      </div>
+      <Button
+        disabled={disabled || availableIdentities.length < 1}
+        onClick={() => dispatch({ type: 'deselect identity' })}
+        data-testid='deselect-identity'
+      >
+        <CaretLeft className={getSize(4)} weight='bold' />
+        <span className='grow'>{t('deselect identity label')}</span>
+        <CaretRight className={mx(getSize(4), 'invisible')} weight='bold' />
+      </Button>
+    </ViewState>
+  );
+};

package/src/panels/JoinPanel/view-states/IdentityAdded.tsx

@@ -0,0 +1,99 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, CaretRight, Check } from 'phosphor-react';
+import React, { cloneElement } from 'react';
+
+import type { Profile } from '@dxos/client';
+import { InvitationResult } from '@dxos/react-client';
+import { Avatar, Button, getSize, mx, useTranslation } from '@dxos/react-components';
+
+import { JoinPanelMode } from '../JoinPanelProps';
+import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
+
+export interface IdentityAddedProps extends ViewStateProps, DoneProps {
+  mode?: JoinPanelMode;
+  addedIdentity?: Profile;
+}
+
+export interface DoneProps extends ViewStateProps {
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: (result: InvitationResult | null) => void;
+}
+
+const Done = ({ onDone, doneActionParent, active }: DoneProps) => {
+  const disabled = !active;
+  const { t } = useTranslation('os');
+
+  const doneButton = (
+    <Button
+      {...(onDone && { onClick: () => onDone(null) })}
+      disabled={disabled}
+      className='grow flex items-center gap-2 pli-2'
+      data-autofocus='identity added'
+      data-testid='identity-added-done'
+    >
+      <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+      <span className='grow'>{t('done label')}</span>
+      <Check weight='bold' className={getSize(4)} />
+    </Button>
+  );
+
+  return doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton;
+};
+
+export const IdentityAdded = ({
+  mode,
+  addedIdentity,
+  onDone,
+  doneActionParent,
+  ...viewStateProps
+}: IdentityAddedProps) => {
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+  const { t } = useTranslation('os');
+
+  return (
+    <ViewState {...viewStateProps}>
+      <ViewStateHeading>{t('identity added label')}</ViewStateHeading>
+      <div role='none' className='grow flex flex-col items-center justify-center text-center gap-2'>
+        <Avatar
+          size={20}
+          fallbackValue={addedIdentity?.identityKey.toHex() ?? ''}
+          label={
+            <p className={mx('text-lg', !addedIdentity?.displayName && 'font-mono')}>
+              {addedIdentity?.displayName ?? addedIdentity?.identityKey.truncate() ?? ' '}
+            </p>
+          }
+          variant='circle'
+          status='active'
+        />
+      </div>
+      {mode === 'halo-only' ? (
+        <Done onDone={onDone} doneActionParent={doneActionParent} {...viewStateProps} />
+      ) : (
+        <div className='flex gap-2'>
+          <Button
+            disabled={disabled || !addedIdentity}
+            className='grow flex items-center gap-2 pli-2 order-2'
+            onClick={() => addedIdentity && dispatch({ type: 'select identity', identity: addedIdentity })}
+            data-autofocus='identity added'
+          >
+            <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+            <span className='grow'>{t('continue label')}</span>
+            <CaretRight weight='bold' className={getSize(4)} />
+          </Button>
+          <Button
+            disabled={disabled}
+            onClick={() => dispatch({ type: 'deselect identity' })}
+            className='flex items-center gap-2 pis-2 pie-4'
+          >
+            <CaretLeft weight='bold' className={getSize(4)} />
+            <span>{t('deselect identity label')}</span>
+          </Button>
+        </div>
+      )}
+    </ViewState>
+  );
+};