@dxos/plugin-client 0.7.5-labs.e27f9b9 → 0.7.5-labs.f400bbc

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/dist/lib/browser/{app-graph-builder-6LOTDB4T.mjs → app-graph-builder-ON64R7SO.mjs} +2 -2
  2. package/dist/lib/browser/{chunk-E3OUNOEL.mjs → chunk-7DPLXOMO.mjs} +14 -2
  3. package/dist/lib/browser/chunk-7DPLXOMO.mjs.map +7 -0
  4. package/dist/lib/browser/chunk-EYBZZHSM.mjs +271 -0
  5. package/dist/lib/browser/chunk-EYBZZHSM.mjs.map +7 -0
  6. package/dist/lib/browser/{chunk-MSK3TLIH.mjs → chunk-GHEQL2E6.mjs} +1 -2
  7. package/dist/lib/browser/{chunk-MSK3TLIH.mjs.map → chunk-GHEQL2E6.mjs.map} +3 -3
  8. package/dist/lib/browser/{client-BEJK55IM.mjs → client-A7YSVURS.mjs} +3 -8
  9. package/dist/lib/browser/client-A7YSVURS.mjs.map +7 -0
  10. package/dist/lib/browser/index.mjs +17 -10
  11. package/dist/lib/browser/index.mjs.map +3 -3
  12. package/dist/lib/browser/{intent-resolver-E6TL7E24.mjs → intent-resolver-XZ2FBRQN.mjs} +113 -7
  13. package/dist/lib/browser/intent-resolver-XZ2FBRQN.mjs.map +7 -0
  14. package/dist/lib/browser/meta.json +1 -1
  15. package/dist/lib/browser/{react-context-PHX2CVI7.mjs → react-context-R3SG55F5.mjs} +2 -2
  16. package/dist/lib/browser/{react-surface-K5NKVCIB.mjs → react-surface-XGOUHVIH.mjs} +20 -4
  17. package/dist/lib/browser/react-surface-XGOUHVIH.mjs.map +7 -0
  18. package/dist/lib/browser/{schema-AL34NY2M.mjs → schema-J4MJIXRP.mjs} +3 -13
  19. package/dist/lib/browser/schema-J4MJIXRP.mjs.map +7 -0
  20. package/dist/lib/browser/types.mjs +1 -1
  21. package/dist/lib/node/{app-graph-builder-JCND3P6G.cjs → app-graph-builder-RW7ESEX3.cjs} +6 -6
  22. package/dist/lib/node/chunk-7LVBFGKQ.cjs +299 -0
  23. package/dist/lib/node/chunk-7LVBFGKQ.cjs.map +7 -0
  24. package/dist/lib/node/{chunk-NVYWMDF3.cjs → chunk-TREVKZCJ.cjs} +17 -5
  25. package/dist/lib/node/chunk-TREVKZCJ.cjs.map +7 -0
  26. package/dist/lib/node/{chunk-ZI7AV5RP.cjs → chunk-UHIGZJQL.cjs} +4 -5
  27. package/dist/lib/node/{chunk-ZI7AV5RP.cjs.map → chunk-UHIGZJQL.cjs.map} +3 -3
  28. package/dist/lib/node/{client-AHIW24VM.cjs → client-2RQATBB6.cjs} +7 -12
  29. package/dist/lib/node/client-2RQATBB6.cjs.map +7 -0
  30. package/dist/lib/node/index.cjs +18 -11
  31. package/dist/lib/node/index.cjs.map +3 -3
  32. package/dist/lib/node/intent-resolver-MKNGTBJU.cjs +273 -0
  33. package/dist/lib/node/intent-resolver-MKNGTBJU.cjs.map +7 -0
  34. package/dist/lib/node/meta.json +1 -1
  35. package/dist/lib/node/{react-context-WMOFXPT4.cjs → react-context-TD6VGBVA.cjs} +6 -6
  36. package/dist/lib/node/{react-surface-YQ2PKXNV.cjs → react-surface-IY7GXEGU.cjs} +27 -15
  37. package/dist/lib/node/react-surface-IY7GXEGU.cjs.map +7 -0
  38. package/dist/lib/node/{schema-HW4W3QYU.cjs → schema-JXJS75HQ.cjs} +8 -18
  39. package/dist/lib/node/schema-JXJS75HQ.cjs.map +7 -0
  40. package/dist/lib/node/types.cjs +2 -2
  41. package/dist/lib/node/types.cjs.map +1 -1
  42. package/dist/lib/node-esm/{app-graph-builder-ZLGKFBLY.mjs → app-graph-builder-TDYRWNI7.mjs} +2 -2
  43. package/dist/lib/node-esm/chunk-CRF22MJJ.mjs +272 -0
  44. package/dist/lib/node-esm/chunk-CRF22MJJ.mjs.map +7 -0
  45. package/dist/lib/node-esm/{chunk-74T33KTB.mjs → chunk-QJMF2MWP.mjs} +14 -2
  46. package/dist/lib/node-esm/chunk-QJMF2MWP.mjs.map +7 -0
  47. package/dist/lib/node-esm/{chunk-B73LKPGU.mjs → chunk-T35SFKK3.mjs} +1 -2
  48. package/dist/lib/node-esm/{chunk-B73LKPGU.mjs.map → chunk-T35SFKK3.mjs.map} +3 -3
  49. package/dist/lib/node-esm/{client-FY7IDNRL.mjs → client-36DKBSB7.mjs} +3 -8
  50. package/dist/lib/node-esm/client-36DKBSB7.mjs.map +7 -0
  51. package/dist/lib/node-esm/index.mjs +17 -10
  52. package/dist/lib/node-esm/index.mjs.map +3 -3
  53. package/dist/lib/node-esm/{intent-resolver-QUQH2LS2.mjs → intent-resolver-M72XLGTY.mjs} +113 -7
  54. package/dist/lib/node-esm/intent-resolver-M72XLGTY.mjs.map +7 -0
  55. package/dist/lib/node-esm/meta.json +1 -1
  56. package/dist/lib/node-esm/{react-context-EEGDXBWA.mjs → react-context-ZOGDOWJ2.mjs} +2 -2
  57. package/dist/lib/node-esm/{react-surface-H34XQPWC.mjs → react-surface-F3PDFJMV.mjs} +20 -4
  58. package/dist/lib/node-esm/react-surface-F3PDFJMV.mjs.map +7 -0
  59. package/dist/lib/node-esm/{schema-74LVJ3EU.mjs → schema-XM4HBLIX.mjs} +3 -13
  60. package/dist/lib/node-esm/schema-XM4HBLIX.mjs.map +7 -0
  61. package/dist/lib/node-esm/types.mjs +1 -1
  62. package/dist/types/src/capabilities/app-graph-builder.d.ts +110 -110
  63. package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
  64. package/dist/types/src/capabilities/capabilities.d.ts +0 -1
  65. package/dist/types/src/capabilities/capabilities.d.ts.map +1 -1
  66. package/dist/types/src/capabilities/client.d.ts.map +1 -1
  67. package/dist/types/src/capabilities/index.d.ts +112 -111
  68. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  69. package/dist/types/src/capabilities/intent-resolver.d.ts +2 -1
  70. package/dist/types/src/capabilities/intent-resolver.d.ts.map +1 -1
  71. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
  72. package/dist/types/src/capabilities/schema.d.ts.map +1 -1
  73. package/dist/types/src/components/IdentityDialog.d.ts +1 -2
  74. package/dist/types/src/components/IdentityDialog.d.ts.map +1 -1
  75. package/dist/types/src/components/JoinDialog.d.ts +1 -2
  76. package/dist/types/src/components/JoinDialog.d.ts.map +1 -1
  77. package/dist/types/src/components/ManageCredentialsDialog.d.ts +3 -0
  78. package/dist/types/src/components/ManageCredentialsDialog.d.ts.map +1 -0
  79. package/dist/types/src/components/ManageCredentialsDialog.stories.d.ts +8 -0
  80. package/dist/types/src/components/ManageCredentialsDialog.stories.d.ts.map +1 -0
  81. package/dist/types/src/components/RecoveryCodeDialog.d.ts +1 -2
  82. package/dist/types/src/components/RecoveryCodeDialog.d.ts.map +1 -1
  83. package/dist/types/src/components/RecoverySetupDialog.d.ts +3 -0
  84. package/dist/types/src/components/RecoverySetupDialog.d.ts.map +1 -0
  85. package/dist/types/src/components/RecoverySetupDialog.stories.d.ts +8 -0
  86. package/dist/types/src/components/RecoverySetupDialog.stories.d.ts.map +1 -0
  87. package/dist/types/src/components/index.d.ts +1 -0
  88. package/dist/types/src/components/index.d.ts.map +1 -1
  89. package/dist/types/src/translations.d.ts +7 -0
  90. package/dist/types/src/translations.d.ts.map +1 -1
  91. package/dist/types/src/types.d.ts +17 -1
  92. package/dist/types/src/types.d.ts.map +1 -1
  93. package/package.json +21 -16
  94. package/src/ClientPlugin.ts +2 -2
  95. package/src/capabilities/capabilities.ts +0 -2
  96. package/src/capabilities/client.ts +1 -3
  97. package/src/capabilities/intent-resolver.ts +74 -1
  98. package/src/capabilities/react-surface.tsx +15 -0
  99. package/src/capabilities/schema.ts +3 -13
  100. package/src/components/IdentityDialog.tsx +12 -0
  101. package/src/components/ManageCredentialsDialog.stories.tsx +57 -0
  102. package/src/components/ManageCredentialsDialog.tsx +64 -0
  103. package/src/components/RecoveryCodeDialog.stories.tsx +4 -4
  104. package/src/components/RecoveryCodeDialog.tsx +2 -1
  105. package/src/components/RecoverySetupDialog.stories.tsx +77 -0
  106. package/src/components/RecoverySetupDialog.tsx +52 -0
  107. package/src/components/index.ts +1 -0
  108. package/src/translations.ts +10 -1
  109. package/src/types.ts +11 -1
  110. package/dist/lib/browser/chunk-E3OUNOEL.mjs.map +0 -7
  111. package/dist/lib/browser/chunk-PDSHZE3P.mjs +0 -162
  112. package/dist/lib/browser/chunk-PDSHZE3P.mjs.map +0 -7
  113. package/dist/lib/browser/client-BEJK55IM.mjs.map +0 -7
  114. package/dist/lib/browser/intent-resolver-E6TL7E24.mjs.map +0 -7
  115. package/dist/lib/browser/react-surface-K5NKVCIB.mjs.map +0 -7
  116. package/dist/lib/browser/schema-AL34NY2M.mjs.map +0 -7
  117. package/dist/lib/node/chunk-NVYWMDF3.cjs.map +0 -7
  118. package/dist/lib/node/chunk-VUJ3ZPK3.cjs +0 -190
  119. package/dist/lib/node/chunk-VUJ3ZPK3.cjs.map +0 -7
  120. package/dist/lib/node/client-AHIW24VM.cjs.map +0 -7
  121. package/dist/lib/node/intent-resolver-DUPICQ3F.cjs +0 -167
  122. package/dist/lib/node/intent-resolver-DUPICQ3F.cjs.map +0 -7
  123. package/dist/lib/node/react-surface-YQ2PKXNV.cjs.map +0 -7
  124. package/dist/lib/node/schema-HW4W3QYU.cjs.map +0 -7
  125. package/dist/lib/node-esm/chunk-74T33KTB.mjs.map +0 -7
  126. package/dist/lib/node-esm/chunk-WS4CKCUR.mjs +0 -163
  127. package/dist/lib/node-esm/chunk-WS4CKCUR.mjs.map +0 -7
  128. package/dist/lib/node-esm/client-FY7IDNRL.mjs.map +0 -7
  129. package/dist/lib/node-esm/intent-resolver-QUQH2LS2.mjs.map +0 -7
  130. package/dist/lib/node-esm/react-surface-H34XQPWC.mjs.map +0 -7
  131. package/dist/lib/node-esm/schema-74LVJ3EU.mjs.map +0 -7
  132. /package/dist/lib/browser/{app-graph-builder-6LOTDB4T.mjs.map → app-graph-builder-ON64R7SO.mjs.map} +0 -0
  133. /package/dist/lib/browser/{react-context-PHX2CVI7.mjs.map → react-context-R3SG55F5.mjs.map} +0 -0
  134. /package/dist/lib/node/{app-graph-builder-JCND3P6G.cjs.map → app-graph-builder-RW7ESEX3.cjs.map} +0 -0
  135. /package/dist/lib/node/{react-context-WMOFXPT4.cjs.map → react-context-TD6VGBVA.cjs.map} +0 -0
  136. /package/dist/lib/node-esm/{app-graph-builder-ZLGKFBLY.mjs.map → app-graph-builder-TDYRWNI7.mjs.map} +0 -0
  137. /package/dist/lib/node-esm/{react-context-EEGDXBWA.mjs.map → react-context-ZOGDOWJ2.mjs.map} +0 -0
@@ -11,6 +11,4 @@ import { CLIENT_PLUGIN } from '../meta';
11
11
  export namespace ClientCapabilities {
12
12
  export const Client = defineCapability<Client>(`${CLIENT_PLUGIN}/capability/client`);
13
13
  export const Schema = defineCapability<TypedObject[]>(`${CLIENT_PLUGIN}/capability/schema`);
14
- // TODO(wittjosiah): Rename this. Reserve "system" nomenclature for internal use.
15
- export const SystemSchema = defineCapability<TypedObject[]>(`${CLIENT_PLUGIN}/capability/system-schema`);
16
14
  }
@@ -3,7 +3,6 @@
3
3
  //
4
4
 
5
5
  import { contributes, type PluginsContext } from '@dxos/app-framework';
6
- import { Config, Defaults, Envs, Local, Storage } from '@dxos/config';
7
6
  import { Client } from '@dxos/react-client';
8
7
 
9
8
  import { ClientCapabilities } from './capabilities';
@@ -15,8 +14,7 @@ type ClientCapabilityOptions = Omit<ClientPluginOptions, 'appKey' | 'invitationU
15
14
  };
16
15
 
17
16
  export default async ({ context, onClientInitialized, ...options }: ClientCapabilityOptions) => {
18
- const config = new Config(await Storage(), Envs(), Local(), Defaults());
19
- const client = new Client({ config, ...options });
17
+ const client = new Client(options);
20
18
  await client.initialize();
21
19
  await onClientInitialized?.(context, client);
22
20
 
@@ -12,6 +12,7 @@ import {
12
12
  } from '@dxos/app-framework';
13
13
  import { invariant } from '@dxos/invariant';
14
14
  import { ObservabilityAction } from '@dxos/plugin-observability/types';
15
+ import { PublicKey } from '@dxos/react-client';
15
16
  import { type JoinPanelProps } from '@dxos/shell/react';
16
17
 
17
18
  import { ClientCapabilities } from './capabilities';
@@ -21,9 +22,10 @@ import { ClientAction, type ClientPluginOptions } from '../types';
21
22
 
22
23
  type IntentResolverOptions = Pick<ClientPluginOptions, 'onReset'> & {
23
24
  context: PluginsContext;
25
+ appName?: string;
24
26
  };
25
27
 
26
- export default ({ context, onReset }: IntentResolverOptions) =>
28
+ export default ({ context, appName = 'Composer', onReset }: IntentResolverOptions) =>
27
29
  contributes(Capabilities.IntentResolver, [
28
30
  createResolver({
29
31
  intent: ClientAction.CreateIdentity,
@@ -127,4 +129,75 @@ export default ({ context, onReset }: IntentResolverOptions) =>
127
129
  };
128
130
  },
129
131
  }),
132
+ createResolver({
133
+ intent: ClientAction.CreatePasskey,
134
+ resolve: async () => {
135
+ const client = context.requestCapability(ClientCapabilities.Client);
136
+ const identity = client.halo.identity.get();
137
+ invariant(identity, 'Identity not available');
138
+
139
+ // TODO(wittjosiah): Consider factoring out passkey creation to the halo api.
140
+ const lookupKey = PublicKey.random();
141
+ const credential = await navigator.credentials.create({
142
+ publicKey: {
143
+ challenge: new Uint8Array(),
144
+ rp: { id: location.hostname, name: appName },
145
+ user: {
146
+ id: lookupKey.asUint8Array(),
147
+ name: identity.did,
148
+ displayName: identity.profile?.displayName ?? '',
149
+ },
150
+ pubKeyCredParams: [
151
+ { type: 'public-key', alg: -8 }, // Ed25519 (not yet supported across all browsers)
152
+ { type: 'public-key', alg: -7 }, // ES256
153
+ ],
154
+ // https://web.dev/articles/webauthn-discoverable-credentials#resident-key
155
+ authenticatorSelection: {
156
+ residentKey: 'required',
157
+ requireResidentKey: true,
158
+ },
159
+ },
160
+ });
161
+
162
+ invariant(credential, 'Credential not available');
163
+ const recoveryKey = PublicKey.from(new Uint8Array((credential as any).response.getPublicKey()));
164
+ const algorithm = (credential as any).response.getPublicKeyAlgorithm() === -7 ? 'ES256' : 'ED25519';
165
+
166
+ // TODO(wittjosiah): This needs a proper api.
167
+ invariant(client.services.services.IdentityService, 'IdentityService not available');
168
+ await client.services.services.IdentityService.createRecoveryCredential({
169
+ recoveryKey,
170
+ algorithm,
171
+ lookupKey,
172
+ });
173
+ },
174
+ }),
175
+ createResolver({
176
+ intent: ClientAction.RedeemPasskey,
177
+ resolve: async () => {
178
+ const client = context.requestCapability(ClientCapabilities.Client);
179
+ // TODO(wittjosiah): This needs a proper api.
180
+ invariant(client.services.services.IdentityService, 'IdentityService not available');
181
+ const { deviceKey, controlFeedKey, challenge } =
182
+ await client.services.services.IdentityService.requestRecoveryChallenge();
183
+ const credential = await navigator.credentials.get({
184
+ publicKey: {
185
+ challenge: Buffer.from(challenge, 'base64'),
186
+ rpId: location.hostname,
187
+ userVerification: 'required',
188
+ },
189
+ });
190
+ const lookupKey = PublicKey.from(new Uint8Array((credential as any).response.userHandle));
191
+ await client.services.services.IdentityService.recoverIdentity({
192
+ external: {
193
+ lookupKey,
194
+ deviceKey,
195
+ controlFeedKey,
196
+ signature: Buffer.from((credential as any).response.signature),
197
+ clientDataJson: Buffer.from((credential as any).response.clientDataJSON),
198
+ authenticatorData: Buffer.from((credential as any).response.authenticatorData),
199
+ },
200
+ });
201
+ },
202
+ }),
130
203
  ]);
@@ -13,9 +13,12 @@ import {
13
13
  JOIN_DIALOG,
14
14
  JoinDialog,
15
15
  RECOVER_CODE_DIALOG,
16
+ RECOVER_SETUP_DIALOG,
16
17
  RecoveryCodeDialog,
18
+ RecoverySetupDialog,
17
19
  type RecoveryCodeDialogProps,
18
20
  } from '../components';
21
+ import { MANAGE_CREDENTIALS_DIALOG, ManageCredentialsDialog } from '../components/ManageCredentialsDialog';
19
22
 
20
23
  type ReactSurfaceOptions = {
21
24
  createInvitationUrl: (invitationCode: string) => string;
@@ -41,4 +44,16 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
41
44
  filter: (data): data is { props: RecoveryCodeDialogProps } => data.component === RECOVER_CODE_DIALOG,
42
45
  component: ({ data }) => <RecoveryCodeDialog {...data.props} />,
43
46
  }),
47
+ createSurface({
48
+ id: RECOVER_SETUP_DIALOG,
49
+ role: 'dialog',
50
+ filter: (data): data is any => data.component === RECOVER_SETUP_DIALOG,
51
+ component: () => <RecoverySetupDialog />,
52
+ }),
53
+ createSurface({
54
+ id: MANAGE_CREDENTIALS_DIALOG,
55
+ role: 'dialog',
56
+ filter: (data): data is any => data.component === MANAGE_CREDENTIALS_DIALOG,
57
+ component: () => <ManageCredentialsDialog />,
58
+ }),
44
59
  ]);
@@ -9,28 +9,18 @@ import { type TypedObject } from '@dxos/echo-schema';
9
9
 
10
10
  import { ClientCapabilities } from './capabilities';
11
11
 
12
- // TODO(wittjosiah): Remove types?
13
12
  export default (context: PluginsContext) => {
14
13
  const client = context.requestCapability(ClientCapabilities.Client);
15
14
 
16
- let previousSystem: TypedObject[] = [];
17
- const unsubscribeSystem = effect(() => {
18
- const systemSchemas = Array.from(new Set(context.requestCapabilities(ClientCapabilities.SystemSchema).flat()));
19
- const newSchemas = systemSchemas.filter((schema) => !previousSystem.includes(schema));
20
- previousSystem = systemSchemas;
21
- client.addTypes(newSchemas);
22
- });
23
-
15
+ // TODO(wittjosiah): Unregister schemas when they are disabled.
24
16
  let previous: TypedObject[] = [];
25
17
  const unsubscribe = effect(() => {
26
18
  const schemas = Array.from(new Set(context.requestCapabilities(ClientCapabilities.Schema).flat()));
19
+ // TODO(wittjosiah): Filter out schemas which the client has already registered.
27
20
  const newSchemas = schemas.filter((schema) => !previous.includes(schema));
28
21
  previous = schemas;
29
22
  client.addTypes(newSchemas);
30
23
  });
31
24
 
32
- return contributes(Capabilities.Null, null, () => {
33
- unsubscribeSystem();
34
- unsubscribe();
35
- });
25
+ return contributes(Capabilities.Null, null, () => unsubscribe());
36
26
  };
@@ -9,6 +9,7 @@ import { useClient } from '@dxos/react-client';
9
9
  import { Clipboard, Dialog } from '@dxos/react-ui';
10
10
  import { IdentityPanel, type IdentityPanelProps } from '@dxos/shell/react';
11
11
 
12
+ import { MANAGE_CREDENTIALS_DIALOG } from './ManageCredentialsDialog';
12
13
  import { CLIENT_PLUGIN } from '../meta';
13
14
  import { ClientAction } from '../types';
14
15
 
@@ -44,6 +45,16 @@ export const IdentityDialog = (props: IdentityPanelProps) => {
44
45
  await dispatch(createIntent(ClientAction.ResetStorage, { target: 'deviceInvitation' }));
45
46
  }, [dispatch]);
46
47
 
48
+ const handleManageCredentials = useCallback(async () => {
49
+ await dispatch(
50
+ createIntent(LayoutAction.UpdateDialog, {
51
+ part: 'dialog',
52
+ subject: MANAGE_CREDENTIALS_DIALOG,
53
+ options: { state: true, blockAlign: 'start' },
54
+ }),
55
+ );
56
+ }, [dispatch]);
57
+
47
58
  return (
48
59
  <Dialog.Content>
49
60
  <Clipboard.Provider>
@@ -54,6 +65,7 @@ export const IdentityDialog = (props: IdentityPanelProps) => {
54
65
  onResetStorage={handleResetStorage}
55
66
  onRecover={handleRecover}
56
67
  onJoinNewIdentity={handleJoinNewIdentity}
68
+ onManageCredentials={handleManageCredentials}
57
69
  />
58
70
  </Clipboard.Provider>
59
71
  </Dialog.Content>
@@ -0,0 +1,57 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import '@dxos-theme';
6
+
7
+ import { type StoryObj, type Meta } from '@storybook/react';
8
+ import React from 'react';
9
+
10
+ import { IntentPlugin } from '@dxos/app-framework';
11
+ import { withPluginManager } from '@dxos/app-framework/testing';
12
+ import { AlertDialog } from '@dxos/react-ui';
13
+ import { withTheme, withLayout } from '@dxos/storybook-utils';
14
+
15
+ import { ManageCredentialsDialog } from './ManageCredentialsDialog';
16
+ import { ClientPlugin } from '../ClientPlugin';
17
+ import translations from '../translations';
18
+
19
+ const Render = () => {
20
+ return (
21
+ <AlertDialog.Root open>
22
+ <AlertDialog.Overlay>
23
+ <ManageCredentialsDialog />
24
+ </AlertDialog.Overlay>
25
+ </AlertDialog.Root>
26
+ );
27
+ };
28
+
29
+ const meta: Meta = {
30
+ title: 'plugins/plugin-client/ManageCredentialsDialog',
31
+ component: ManageCredentialsDialog,
32
+ render: Render,
33
+ decorators: [
34
+ withPluginManager({
35
+ plugins: [
36
+ IntentPlugin(),
37
+ ClientPlugin({
38
+ onClientInitialized: async (_, client) => {
39
+ await client.halo.createIdentity();
40
+ },
41
+ }),
42
+ ],
43
+ }),
44
+ withTheme,
45
+ withLayout({ tooltips: true }),
46
+ ],
47
+ parameters: {
48
+ layout: 'fullscreen',
49
+ translations,
50
+ },
51
+ };
52
+
53
+ export default meta;
54
+
55
+ type Story = StoryObj<typeof ManageCredentialsDialog>;
56
+
57
+ export const Default: Story = {};
@@ -0,0 +1,64 @@
1
+ //
2
+ // Copyright 2024 DXOS.org
3
+ //
4
+
5
+ import { Receipt, Key } from '@phosphor-icons/react';
6
+ import React, { useMemo } from 'react';
7
+
8
+ import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
9
+ import { useCredentials } from '@dxos/react-client/halo';
10
+ import { Dialog, Icon, List, ListItem, useTranslation } from '@dxos/react-ui';
11
+ import { BifurcatedAction, type ActionMenuItem } from '@dxos/shell/react';
12
+
13
+ import { CLIENT_PLUGIN } from '../meta';
14
+ import { ClientAction } from '../types';
15
+
16
+ export const MANAGE_CREDENTIALS_DIALOG = `${CLIENT_PLUGIN}/ManageCredentialsDialog`;
17
+
18
+ // TODO(wittjosiah): Factor panel out to @dxos/shell.
19
+ export const ManageCredentialsDialog = () => {
20
+ const { t } = useTranslation(CLIENT_PLUGIN);
21
+ const { dispatchPromise: dispatch } = useIntentDispatcher();
22
+ const credentials = useCredentials();
23
+ const recoveryCredentials = credentials.filter(
24
+ (credential) => credential.subject.assertion['@type'] === 'dxos.halo.credentials.IdentityRecovery',
25
+ );
26
+
27
+ // TODO(wittjosiah): Reconsile w/ RecoverySetupDialog actions.
28
+ const actions: Record<string, ActionMenuItem> = useMemo(
29
+ () => ({
30
+ createPasskey: {
31
+ label: t('create passkey label'),
32
+ description: t('create passkey description'),
33
+ // TODO(wittjosiah): Ideally this would be a `user-key` icon.
34
+ icon: Key,
35
+ onClick: () => dispatch(createIntent(ClientAction.CreatePasskey)),
36
+ },
37
+ createRecoveryCode: {
38
+ label: t('create recovery code label'),
39
+ description: t('create recovery code description'),
40
+ icon: Receipt,
41
+ onClick: () => dispatch(createIntent(ClientAction.CreateRecoveryCode)),
42
+ },
43
+ }),
44
+ [t],
45
+ );
46
+
47
+ return (
48
+ <Dialog.Content classNames='bs-content min-bs-[15rem] max-bs-full md:max-is-[25rem] overflow-hidden'>
49
+ <Dialog.Title>{t('manage credentials dialog title')}</Dialog.Title>
50
+ <List classNames='py-4'>
51
+ {recoveryCredentials.map((credential) => (
52
+ <ListItem.Root key={credential.id?.toHex()}>
53
+ <ListItem.Endcap>
54
+ <Icon icon='ph--key--regular' size={5} />
55
+ </ListItem.Endcap>
56
+ <ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>
57
+ </ListItem.Root>
58
+ ))}
59
+ </List>
60
+ <div className='grow' />
61
+ <BifurcatedAction actions={actions} />
62
+ </Dialog.Content>
63
+ );
64
+ };
@@ -17,16 +17,16 @@ import translations from '../translations';
17
17
 
18
18
  const Render = () => {
19
19
  const client = useClient();
20
- const [seedphrase, setSeedphrase] = useState<string>();
20
+ const [recoveryCode, setRecoveryCode] = useState<string>();
21
21
  useAsyncEffect(async () => {
22
22
  const { recoveryCode } = (await client.services.services.IdentityService?.createRecoveryCredential({})) ?? {};
23
- setSeedphrase(recoveryCode);
23
+ setRecoveryCode(recoveryCode);
24
24
  }, [client]);
25
25
 
26
26
  return (
27
- <AlertDialog.Root open={!!seedphrase}>
27
+ <AlertDialog.Root open={!!recoveryCode}>
28
28
  <AlertDialog.Overlay>
29
- <RecoveryCodeDialog code={seedphrase ?? ''} />
29
+ <RecoveryCodeDialog code={recoveryCode ?? ''} />
30
30
  </AlertDialog.Overlay>
31
31
  </AlertDialog.Root>
32
32
  );
@@ -14,6 +14,7 @@ export type RecoveryCodeDialogProps = {
14
14
  code: string;
15
15
  };
16
16
 
17
+ // TODO(wittjosiah): Factor panel out to @dxos/shell.
17
18
  export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
18
19
  const { t } = useTranslation(CLIENT_PLUGIN);
19
20
  const [confirmation, setConfirmation] = useState(false);
@@ -59,7 +60,7 @@ const Code = ({ code }: { code: string }) => {
59
60
  <Clipboard.IconButton value={code} classNames='absolute top-2 right-2 invisible group-hover:visible' />
60
61
  <div className='grid grid-cols-4'>
61
62
  {words.map((word, i) => (
62
- <div key={i} className='flex items-center p-2 gap-2 items-center'>
63
+ <div key={i} className='flex items-center p-2 gap-2'>
63
64
  <div className='w-4 text-xs text-center text-subdued'>{i + 1}</div>
64
65
  <div className='text-sm'>{word}</div>
65
66
  </div>
@@ -0,0 +1,77 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import '@dxos-theme';
6
+
7
+ import { type StoryObj, type Meta } from '@storybook/react';
8
+ import React from 'react';
9
+
10
+ import { createResolver, contributes, Capabilities, IntentPlugin, LayoutAction } from '@dxos/app-framework';
11
+ import { withPluginManager } from '@dxos/app-framework/testing';
12
+ import { S } from '@dxos/echo-schema';
13
+ import { create } from '@dxos/live-object';
14
+ import { AlertDialog } from '@dxos/react-ui';
15
+ import { withTheme, withLayout } from '@dxos/storybook-utils';
16
+
17
+ import { RECOVER_CODE_DIALOG, RecoveryCodeDialog } from './RecoveryCodeDialog';
18
+ import { RecoverySetupDialog } from './RecoverySetupDialog';
19
+ import { ClientPlugin } from '../ClientPlugin';
20
+ import translations from '../translations';
21
+
22
+ const state = create<{ recoveryCode?: string }>({});
23
+
24
+ const Render = () => {
25
+ return (
26
+ <AlertDialog.Root open>
27
+ <AlertDialog.Overlay>
28
+ {state.recoveryCode ? <RecoveryCodeDialog code={state.recoveryCode} /> : <RecoverySetupDialog />}
29
+ </AlertDialog.Overlay>
30
+ </AlertDialog.Root>
31
+ );
32
+ };
33
+
34
+ const meta: Meta = {
35
+ title: 'plugins/plugin-client/RecoverySetupDialog',
36
+ component: RecoverySetupDialog,
37
+ render: Render,
38
+ decorators: [
39
+ withPluginManager({
40
+ plugins: [
41
+ IntentPlugin(),
42
+ ClientPlugin({
43
+ onClientInitialized: async (_, client) => {
44
+ await client.halo.createIdentity();
45
+ },
46
+ }),
47
+ ],
48
+ capabilities: [
49
+ contributes(
50
+ Capabilities.IntentResolver,
51
+ createResolver({
52
+ intent: LayoutAction.UpdateLayout,
53
+ filter: (data): data is S.Schema.Type<typeof LayoutAction.UpdateDialog.fields.input> =>
54
+ S.is(LayoutAction.UpdateDialog.fields.input)(data),
55
+ resolve: (data) => {
56
+ if (data.subject === RECOVER_CODE_DIALOG) {
57
+ state.recoveryCode = data.options?.props?.code;
58
+ }
59
+ },
60
+ }),
61
+ ),
62
+ ],
63
+ }),
64
+ withTheme,
65
+ withLayout({ tooltips: true }),
66
+ ],
67
+ parameters: {
68
+ layout: 'fullscreen',
69
+ translations,
70
+ },
71
+ };
72
+
73
+ export default meta;
74
+
75
+ type Story = StoryObj<typeof RecoverySetupDialog>;
76
+
77
+ export const Default: Story = {};
@@ -0,0 +1,52 @@
1
+ //
2
+ // Copyright 2024 DXOS.org
3
+ //
4
+
5
+ import { Key, Receipt } from '@phosphor-icons/react';
6
+ import React, { useMemo } from 'react';
7
+
8
+ import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
9
+ import { AlertDialog, useTranslation } from '@dxos/react-ui';
10
+ import { type ActionMenuItem, BifurcatedAction } from '@dxos/shell/react';
11
+
12
+ import { CLIENT_PLUGIN } from '../meta';
13
+ import { ClientAction } from '../types';
14
+
15
+ export const RECOVER_SETUP_DIALOG = `${CLIENT_PLUGIN}/RecoverySetupDialog`;
16
+
17
+ // TODO(wittjosiah): Factor panel out to @dxos/shell.
18
+ export const RecoverySetupDialog = () => {
19
+ const { t } = useTranslation(CLIENT_PLUGIN);
20
+ const { dispatchPromise: dispatch } = useIntentDispatcher();
21
+
22
+ const actions: Record<string, ActionMenuItem> = useMemo(
23
+ () => ({
24
+ createPasskey: {
25
+ label: t('create passkey label'),
26
+ description: t('create passkey description'),
27
+ // TODO(wittjosiah): Ideally this would be a `user-key` icon.
28
+ icon: Key,
29
+ onClick: async () => {
30
+ await dispatch(createIntent(ClientAction.CreatePasskey));
31
+ await dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
32
+ },
33
+ },
34
+ createRecoveryCode: {
35
+ label: t('create recovery code label'),
36
+ description: t('create recovery code description'),
37
+ icon: Receipt,
38
+ onClick: () => dispatch(createIntent(ClientAction.CreateRecoveryCode)),
39
+ },
40
+ }),
41
+ [t],
42
+ );
43
+
44
+ return (
45
+ <AlertDialog.Content classNames='bs-content min-bs-[15rem] max-bs-full md:max-is-[25rem] overflow-hidden'>
46
+ <AlertDialog.Title>{t('recovery setup dialog title')}</AlertDialog.Title>
47
+ <p className='py-4'>{t('recovery setup dialog description')}</p>
48
+ <div className='grow' />
49
+ <BifurcatedAction actions={actions} />
50
+ </AlertDialog.Content>
51
+ );
52
+ };
@@ -5,3 +5,4 @@
5
5
  export * from './IdentityDialog';
6
6
  export * from './JoinDialog';
7
7
  export * from './RecoveryCodeDialog';
8
+ export * from './RecoverySetupDialog';
@@ -9,7 +9,16 @@ export default [
9
9
  'en-US': {
10
10
  [CLIENT_PLUGIN]: {
11
11
  'open shell label': 'Open HALO',
12
- 'recovery code dialog title': 'Account Recovery',
12
+ 'manage credentials dialog title': 'Manage Account Recovery',
13
+ 'recovery setup dialog title': 'Account Recovery',
14
+ 'recovery setup dialog description':
15
+ 'In order to recover your account you need to register a recovery credential. Passkeys are the recommended way to do this, they can be stored in your browser or in a password manager.',
16
+ 'create passkey label': 'Create Passkey',
17
+ 'create passkey description':
18
+ 'A passkey is a secure and easy to use credential that can be used to recover your account.',
19
+ 'create recovery code label': 'Create Recovery Code',
20
+ 'create recovery code description': 'A recovery code is 12 word phrase representing a private key.',
21
+ 'recovery code dialog title': 'Recovery Code',
13
22
  'recovery code dialog description':
14
23
  '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.',
15
24
  'recovery code dialog warning 1': 'NOTE: This code will not be displayed again.',
package/src/types.ts CHANGED
@@ -33,7 +33,7 @@ export namespace ClientAction {
33
33
 
34
34
  export class JoinIdentity extends S.TaggedClass<JoinIdentity>()(`${CLIENT_ACTION}/join-identity`, {
35
35
  input: S.Struct({
36
- invitationCode: S.String,
36
+ invitationCode: S.optional(S.String),
37
37
  }),
38
38
  output: S.Void,
39
39
  }) {}
@@ -64,6 +64,16 @@ export namespace ClientAction {
64
64
  input: S.Void,
65
65
  output: S.Void,
66
66
  }) {}
67
+
68
+ export class CreatePasskey extends S.TaggedClass<CreatePasskey>()(`${CLIENT_ACTION}/create-passkey`, {
69
+ input: S.Void,
70
+ output: S.Void,
71
+ }) {}
72
+
73
+ export class RedeemPasskey extends S.TaggedClass<RedeemPasskey>()(`${CLIENT_ACTION}/redeem-passkey`, {
74
+ input: S.Void,
75
+ output: S.Void,
76
+ }) {}
67
77
  }
68
78
 
69
79
  export type ClientPluginOptions = ClientOptions & {
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/types.ts"],
4
- "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type PluginsContext } from '@dxos/app-framework';\nimport { S } from '@dxos/echo-schema';\nimport { type Client, PublicKey, type ClientOptions } from '@dxos/react-client';\nimport { type MaybePromise } from '@dxos/util';\n\nimport { CLIENT_PLUGIN } from './meta';\n\n// TODO(wittjosiah): Factor out. Generate?\nconst IdentitySchema = S.Struct({\n identityKey: S.instanceOf(PublicKey),\n spaceKey: S.optional(S.instanceOf(PublicKey)),\n profile: S.optional(\n S.Struct({\n displayName: S.optional(S.String),\n avatarCid: S.optional(S.String),\n data: S.optional(S.Record({ key: S.String, value: S.Any })),\n }),\n ),\n});\n\nconst CLIENT_ACTION = `${CLIENT_PLUGIN}/action`;\nexport namespace ClientAction {\n export class CreateIdentity extends S.TaggedClass<CreateIdentity>()(`${CLIENT_ACTION}/create-identity`, {\n input: S.Struct({\n displayName: S.optional(S.String),\n }),\n output: IdentitySchema,\n }) {}\n\n export class JoinIdentity extends S.TaggedClass<JoinIdentity>()(`${CLIENT_ACTION}/join-identity`, {\n input: S.Struct({\n invitationCode: S.String,\n }),\n output: S.Void,\n }) {}\n\n export class ShareIdentity extends S.TaggedClass<ShareIdentity>()(`${CLIENT_ACTION}/share-identity`, {\n input: S.Void,\n output: S.Void,\n }) {}\n\n export class RecoverIdentity extends S.TaggedClass<RecoverIdentity>()(`${CLIENT_ACTION}/recover-identity`, {\n input: S.Void,\n output: S.Void,\n }) {}\n\n export class ResetStorage extends S.TaggedClass<ResetStorage>()(`${CLIENT_ACTION}/reset-storage`, {\n input: S.Struct({\n target: S.optional(S.String),\n }),\n output: S.Void,\n }) {}\n\n export class CreateAgent extends S.TaggedClass<CreateAgent>()(`${CLIENT_ACTION}/create-agent`, {\n input: S.Void,\n output: S.Void,\n }) {}\n\n export class CreateRecoveryCode extends S.TaggedClass<CreateRecoveryCode>()(`${CLIENT_ACTION}/create-recovery-code`, {\n input: S.Void,\n output: S.Void,\n }) {}\n}\n\nexport type ClientPluginOptions = ClientOptions & {\n /**\n * Base URL for the invitation link.\n */\n invitationUrl?: string;\n\n /**\n * Query parameter for the invitation code.\n */\n invitationParam?: string;\n\n /**\n * Run after the client has been initialized.\n */\n onClientInitialized?: (context: PluginsContext, client: Client) => MaybePromise<void>;\n\n /**\n * Called when the client is reset.\n */\n onReset?: (params: { target?: string }) => MaybePromise<void>;\n};\n"],
5
- "mappings": ";;;;;AAKA,SAASA,SAAS;AAClB,SAAsBC,iBAAqC;AAM3D,IAAMC,iBAAiBC,EAAEC,OAAO;EAC9BC,aAAaF,EAAEG,WAAWC,SAAAA;EAC1BC,UAAUL,EAAEM,SAASN,EAAEG,WAAWC,SAAAA,CAAAA;EAClCG,SAASP,EAAEM,SACTN,EAAEC,OAAO;IACPO,aAAaR,EAAEM,SAASN,EAAES,MAAM;IAChCC,WAAWV,EAAEM,SAASN,EAAES,MAAM;IAC9BE,MAAMX,EAAEM,SAASN,EAAEY,OAAO;MAAEC,KAAKb,EAAES;MAAQK,OAAOd,EAAEe;IAAI,CAAA,CAAA;EAC1D,CAAA,CAAA;AAEJ,CAAA;AAEA,IAAMC,gBAAgB,GAAGC,aAAAA;;UACRC,eAAAA;EACR,MAAMC,uBAAuBnB,EAAEoB,YAAW,EAAmB,GAAGJ,aAAAA,oBAAiC;IACtGK,OAAOrB,EAAEC,OAAO;MACdO,aAAaR,EAAEM,SAASN,EAAES,MAAM;IAClC,CAAA;IACAa,QAAQvB;EACV,CAAA,EAAA;EAAI;gBALSoB,iBAAAA;EAON,MAAMI,qBAAqBvB,EAAEoB,YAAW,EAAiB,GAAGJ,aAAAA,kBAA+B;IAChGK,OAAOrB,EAAEC,OAAO;MACduB,gBAAgBxB,EAAES;IACpB,CAAA;IACAa,QAAQtB,EAAEyB;EACZ,CAAA,EAAA;EAAI;gBALSF,eAAAA;EAON,MAAMG,sBAAsB1B,EAAEoB,YAAW,EAAkB,GAAGJ,aAAAA,mBAAgC;IACnGK,OAAOrB,EAAEyB;IACTH,QAAQtB,EAAEyB;EACZ,CAAA,EAAA;EAAI;gBAHSC,gBAAAA;EAKN,MAAMC,wBAAwB3B,EAAEoB,YAAW,EAAoB,GAAGJ,aAAAA,qBAAkC;IACzGK,OAAOrB,EAAEyB;IACTH,QAAQtB,EAAEyB;EACZ,CAAA,EAAA;EAAI;gBAHSE,kBAAAA;EAKN,MAAMC,qBAAqB5B,EAAEoB,YAAW,EAAiB,GAAGJ,aAAAA,kBAA+B;IAChGK,OAAOrB,EAAEC,OAAO;MACd4B,QAAQ7B,EAAEM,SAASN,EAAES,MAAM;IAC7B,CAAA;IACAa,QAAQtB,EAAEyB;EACZ,CAAA,EAAA;EAAI;gBALSG,eAAAA;EAON,MAAME,oBAAoB9B,EAAEoB,YAAW,EAAgB,GAAGJ,aAAAA,iBAA8B;IAC7FK,OAAOrB,EAAEyB;IACTH,QAAQtB,EAAEyB;EACZ,CAAA,EAAA;EAAI;gBAHSK,cAAAA;EAKN,MAAMC,2BAA2B/B,EAAEoB,YAAW,EAAuB,GAAGJ,aAAAA,yBAAsC;IACnHK,OAAOrB,EAAEyB;IACTH,QAAQtB,EAAEyB;EACZ,CAAA,EAAA;EAAI;gBAHSM,qBAAAA;AAIf,GAzCiBb,iBAAAA,eAAAA,CAAAA,EAAAA;",
6
- "names": ["S", "PublicKey", "IdentitySchema", "S", "Struct", "identityKey", "instanceOf", "PublicKey", "spaceKey", "optional", "profile", "displayName", "String", "avatarCid", "data", "Record", "key", "value", "Any", "CLIENT_ACTION", "CLIENT_PLUGIN", "ClientAction", "CreateIdentity", "TaggedClass", "input", "output", "JoinIdentity", "invitationCode", "Void", "ShareIdentity", "RecoverIdentity", "ResetStorage", "target", "CreateAgent", "CreateRecoveryCode"]
7
- }