@dxos/shell 0.5.1-next.f040be1 → 0.5.2-main.16cd857

package/src/panels/JoinPanel/steps/InvitationAuthenticator.tsx

@@ -7,7 +7,7 @@ import React, { type ChangeEvent, useState } from 'react';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { hexToEmoji } from '@dxos/util';
 
-import { Actions, Action, Emoji, StepHeading } from '../../../components';
+import { Actions, Action, Emoji, StepHeading, Label } from '../../../components';
 import { type JoinStepProps } from '../JoinPanelProps';
 
 const pinLength = 6;
@@ -44,8 +44,7 @@ export const InvitationAuthenticator = ({
 
   return (
     <>
-      <div role='none' className='grow flex flex-col justify-center'>
-        {invitationId && <Emoji text={hexToEmoji(invitationId)} />}
+      <div role='none' className='grow flex flex-col justify-center gap-4'>
         <Input.Root
           {...(failed && {
             validationValence: 'error',
@@ -74,6 +73,15 @@ export const InvitationAuthenticator = ({
             </Input.DescriptionAndValidation>
           )}
         </Input.Root>
+
+        {invitationId && (
+          <>
+            <Label>{t('auth other device emoji message')}</Label>
+            <div className='flex justify-center'>
+              <Emoji text={hexToEmoji(invitationId)} />
+            </div>
+          </>
+        )}
       </div>
       <Actions>
         <Action

package/src/panels/Panels.stories.tsx

@@ -10,6 +10,7 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import * as IdentityPanels from './IdentityPanel/IdentityPanel.stories';
 import * as SpacePanels from './SpacePanel/SpacePanel.stories';
+import { osTranslations } from '../translations';
 
 const getComponentNames = (module: any): string[] =>
   module?.__namedExportsOrder ??
@@ -55,5 +56,5 @@ export default {
   title: 'react-shell/All',
   decorators: [withTheme],
   component: StoryRow,
-  parameters: { chromatic: { disableSnapshot: false } },
+  parameters: { chromatic: { disableSnapshot: false }, translations: [osTranslations] },
 };

package/src/steps/ConfirmReset.tsx

@@ -86,7 +86,7 @@ export const ConfirmResetImpl = ({
           }
           disabled={disabled}
           data-testid={`${testIdAffix}.reset-identity-input`}
-          placeholder={confirmationValue}
+          placeholder={t('confirmation placeholder', { confirmationValue })}
           onChange={({ target: { value } }) => setInputValue(value)}
         />
       </div>

package/src/steps/InvitationManager.tsx

@@ -98,7 +98,7 @@ export const InvitationManager = ({
           <InvitationManagerView id='showing auth code'>
             <Label>{t('auth code message')}</Label>
             <AuthCode code={authCode} large classNames='text-black dark:text-white' />
-            <Label>Be sure the other device is showing this symbol:</Label>
+            <Label>{t('auth other device emoji message')}</Label>
             {emoji && <Emoji text={emoji} />}
           </InvitationManagerView>
           <InvitationManagerView id='showing final'>

package/src/testing/shell-manager.ts

@@ -10,6 +10,8 @@ import { ScopedShellManager } from './scoped-shell-manager';
 
 // TODO(wittjosiah): Normalize data-testids between snake and camel case.
 
+const CONFIRM_INPUT = 'RESET';
+
 export class ShellManager extends ScopedShellManager {
   private _invitationCode = new Trigger<string>();
   private _authCode = new Trigger<string>();
@@ -67,14 +69,14 @@ export class ShellManager extends ScopedShellManager {
     this.page.on('dialog', handleDialog);
     await this.shell.getByTestId('device-list-item-current.options').click();
     await this.shell.getByTestId('device-list-item-current.reset').click();
-    await this.shell.getByTestId('reset-storage.reset-identity-input').fill('CONFIRM');
+    await this.shell.getByTestId('reset-storage.reset-identity-input').fill(CONFIRM_INPUT);
     await this.shell.getByTestId('reset-storage.reset-identity-confirm').click();
   }
 
   async joinNewIdentity(invitationCode: string) {
     await this.shell.getByTestId('device-list-item-current.options').click();
     await this.shell.getByTestId('device-list-item-current.join-existing').click();
-    await this.shell.getByTestId('join-new-identity.reset-identity-input').fill('CONFIRM');
+    await this.shell.getByTestId('join-new-identity.reset-identity-input').fill(CONFIRM_INPUT);
     await this.shell.getByTestId('join-new-identity.reset-identity-confirm').click();
     await this.inputInvitation('device', invitationCode, this.shell);
   }

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

@@ -83,25 +83,27 @@ export const os = {
   'space member list heading': 'Members',
   'space panel heading': 'Space membership',
   'auth code message': 'Enter the following auth code on the joining device.',
+  'auth other device emoji message': 'Be sure the other device shows the following symbol:',
   'display name input label': 'Display name',
   'display name input placeholder': 'Enter a display name',
   'invite one label': 'Single-use invitation',
   'invite one description': 'Only one user may join.',
   'invite one qr label': 'Single-use invitation',
   'invite one list item label': 'Active single-use invitation',
-  'invite many label': 'Standing invitation',
+  'invite many label': 'Multi-use invitation',
   'invite many description': 'Anyone with the link can join.',
-  'invite many qr label': 'Standing invitation',
-  'invite many list item label': 'Active standing invitation',
+  'invite many qr label': 'Multi-use invitation',
+  'invite many list item label': 'Active multi-use invitation',
   'invite options label': 'Change the active invite option.',
   'reset in progress label': 'Resetting...',
   'confirm label': 'Confirm',
   'reset storage input label':
-    'This will clear this device and all associated data. Type {{confirmationValue}} and confirm to continue.',
+    'WARNING: This will delete all data on this device. Type {{confirmationValue}} to continue.',
   'join new identity input label':
-    'In order to join an existing device, storage on this device must be cleared first. Type {{confirmationValue}} to continue.',
+    'WARNING: To join an existing device all data on this device will be deleted. Type {{confirmationValue}} to continue.',
   'failed to reset identity message': 'Failed to reset identity.',
-  'confirmation value': 'CONFIRM',
+  'confirmation value': 'RESET',
+  'confirmation placeholder': 'Enter {{confirmationValue}} to continue.',
   'sign out chooser title': 'Danger zone',
   'sign out chooser message': 'Proceeding with the action below will erase all data on this device.',
   'join new identity label': 'Join a new identity',
@@ -111,7 +113,7 @@ export const os = {
   'clear label': 'Use default',
   'select emoji label': 'Choose an emoji to use in your avatar',
   'select hue label': 'Choose a hue to use in your avatar',
-  'resetting message': 'One moment while things are reset…',
+  'resetting message': 'One moment while the device is reset…',
   'red label': 'Red',
   'orange label': 'Orange',
   'amber label': 'Amber',