@ory/elements-react 0.0.0-pr.4a28a8f → 0.0.0-pr.6a36702c
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.
- package/CHANGELOG.md +151 -0
- package/README.md +253 -4
- package/dist/client/frontendClient.d.mts +5 -2
- package/dist/client/frontendClient.d.ts +5 -2
- package/dist/client/frontendClient.js +25 -2
- package/dist/client/frontendClient.js.map +1 -1
- package/dist/client/frontendClient.mjs +25 -2
- package/dist/client/frontendClient.mjs.map +1 -1
- package/dist/client/index.js +3 -3
- package/dist/index.d.mts +113 -51
- package/dist/index.d.ts +113 -51
- package/dist/index.js +978 -418
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +975 -418
- package/dist/index.mjs.map +1 -1
- package/dist/theme/default/index.css +60 -10
- package/dist/theme/default/index.css.map +1 -1
- package/dist/theme/default/index.d.mts +15 -3
- package/dist/theme/default/index.d.ts +15 -3
- package/dist/theme/default/index.js +3767 -2963
- package/dist/theme/default/index.js.map +1 -1
- package/dist/theme/default/index.mjs +3800 -2973
- package/dist/theme/default/index.mjs.map +1 -1
- package/package.json +17 -15
- package/tailwind/generated/default-variables.css +1 -1
- package/tsconfig.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,154 @@
|
|
|
1
|
+
## 1.0.0-rc.3 (2025-05-09)
|
|
2
|
+
|
|
3
|
+
### 🩹 Fixes
|
|
4
|
+
|
|
5
|
+
- captcha reloading and duplication ([#518](https://github.com/ory/elements/pull/518))
|
|
6
|
+
- ⚠️ rework configuration management ([#515](https://github.com/ory/elements/pull/515))
|
|
7
|
+
- add missing testids to method selector and checkbox ([#517](https://github.com/ory/elements/pull/517))
|
|
8
|
+
|
|
9
|
+
### ⚠️ Breaking Changes
|
|
10
|
+
|
|
11
|
+
- ⚠️ rework configuration management ([#515](https://github.com/ory/elements/pull/515))
|
|
12
|
+
|
|
13
|
+
### ❤️ Thank You
|
|
14
|
+
|
|
15
|
+
- hackerman @aeneasr
|
|
16
|
+
- Jonas Hungershausen
|
|
17
|
+
|
|
18
|
+
## 1.0.0-rc.2 (2025-04-30)
|
|
19
|
+
|
|
20
|
+
### 🚀 Features
|
|
21
|
+
|
|
22
|
+
- method translation for totp, code, webauthn ([#500](https://github.com/ory/elements/pull/500))
|
|
23
|
+
- add all missing stories ([#480](https://github.com/ory/elements/pull/480))
|
|
24
|
+
- preview deployments for example apps ([#488](https://github.com/ory/elements/pull/488))
|
|
25
|
+
- add back button to settings page ([#464](https://github.com/ory/elements/pull/464))
|
|
26
|
+
|
|
27
|
+
### 🩹 Fixes
|
|
28
|
+
|
|
29
|
+
- ⚠️ align configuration types to Ory Network APIs ([#423](https://github.com/ory/elements/pull/423))
|
|
30
|
+
- sort captcha before submit button ([#507](https://github.com/ory/elements/pull/507))
|
|
31
|
+
- cors credentials in default client ([#508](https://github.com/ory/elements/pull/508))
|
|
32
|
+
- back button should return to application ([#465](https://github.com/ory/elements/pull/465))
|
|
33
|
+
- adjust design of generic OIDC provider ([#492](https://github.com/ory/elements/pull/492))
|
|
34
|
+
- use proper id for react element arrays ([#495](https://github.com/ory/elements/pull/495))
|
|
35
|
+
- add test id to header messages ([#489](https://github.com/ory/elements/pull/489))
|
|
36
|
+
- re-add missing error message when no methods provided ([#460](https://github.com/ory/elements/pull/460))
|
|
37
|
+
- resend not working for registration ([#468](https://github.com/ory/elements/pull/468))
|
|
38
|
+
- add missing color class to registration footer ([#473](https://github.com/ory/elements/pull/473))
|
|
39
|
+
- resend not working for registration ([#467](https://github.com/ory/elements/pull/467))
|
|
40
|
+
|
|
41
|
+
### ⚠️ Breaking Changes
|
|
42
|
+
|
|
43
|
+
- ⚠️ align configuration types to Ory Network APIs ([#423](https://github.com/ory/elements/pull/423))
|
|
44
|
+
|
|
45
|
+
### ❤️ Thank You
|
|
46
|
+
|
|
47
|
+
- hackerman @aeneasr
|
|
48
|
+
- Jonas Hungershausen
|
|
49
|
+
|
|
50
|
+
## 1.0.0-rc.1 (2025-04-21)
|
|
51
|
+
|
|
52
|
+
### 🩹 Fixes
|
|
53
|
+
|
|
54
|
+
- re-add missing error message when no methods provided ([#460](https://github.com/ory/elements/pull/460))
|
|
55
|
+
- resend not working for registration ([#468](https://github.com/ory/elements/pull/468))
|
|
56
|
+
- add missing color class to registration footer ([#473](https://github.com/ory/elements/pull/473))
|
|
57
|
+
- resend not working for registration ([#467](https://github.com/ory/elements/pull/467))
|
|
58
|
+
|
|
59
|
+
### ❤️ Thank You
|
|
60
|
+
|
|
61
|
+
- hackerman @aeneasr
|
|
62
|
+
- Jonas Hungershausen
|
|
63
|
+
|
|
64
|
+
## 1.0.0-rc.0 (2025-04-17)
|
|
65
|
+
|
|
66
|
+
### 🚀 Features
|
|
67
|
+
|
|
68
|
+
- add missing translations for de, es and fr ([#456](https://github.com/ory/elements/pull/456))
|
|
69
|
+
|
|
70
|
+
### 🩹 Fixes
|
|
71
|
+
|
|
72
|
+
- correctly set input field value ([#447](https://github.com/ory/elements/pull/447))
|
|
73
|
+
- add missing settings padding ([#446](https://github.com/ory/elements/pull/446))
|
|
74
|
+
- always omit conflicting keys ([#444](https://github.com/ory/elements/pull/444))
|
|
75
|
+
|
|
76
|
+
### ❤️ Thank You
|
|
77
|
+
|
|
78
|
+
- hackerman @aeneasr
|
|
79
|
+
- Jonas Hungershausen
|
|
80
|
+
|
|
81
|
+
## 1.0.0-next.46 (2025-04-16)
|
|
82
|
+
|
|
83
|
+
### 🩹 Fixes
|
|
84
|
+
|
|
85
|
+
- missing hidden field regression ([#439](https://github.com/ory/elements/pull/439))
|
|
86
|
+
- use correct testid ([#438](https://github.com/ory/elements/pull/438))
|
|
87
|
+
|
|
88
|
+
### ❤️ Thank You
|
|
89
|
+
|
|
90
|
+
- hackerman @aeneasr
|
|
91
|
+
|
|
92
|
+
## 1.0.0-next.45 (2025-04-15)
|
|
93
|
+
|
|
94
|
+
### 🩹 Fixes
|
|
95
|
+
|
|
96
|
+
- add missing test id to scope checkbox label ([#437](https://github.com/ory/elements/pull/437))
|
|
97
|
+
- add missing captcha group to all methods ([#432](https://github.com/ory/elements/pull/432))
|
|
98
|
+
|
|
99
|
+
### ❤️ Thank You
|
|
100
|
+
|
|
101
|
+
- hackerman @aeneasr
|
|
102
|
+
- Jonas Hungershausen
|
|
103
|
+
|
|
104
|
+
## 1.0.0-next.44 (2025-04-10)
|
|
105
|
+
|
|
106
|
+
### 🩹 Fixes
|
|
107
|
+
|
|
108
|
+
- use currentColor in eye icons ([#433](https://github.com/ory/elements/pull/433))
|
|
109
|
+
|
|
110
|
+
### ❤️ Thank You
|
|
111
|
+
|
|
112
|
+
- Jonas Hungershausen
|
|
113
|
+
|
|
114
|
+
## 1.0.0-next.43 (2025-04-10)
|
|
115
|
+
|
|
116
|
+
### 🚀 Features
|
|
117
|
+
|
|
118
|
+
- add missing French translations ([#401](https://github.com/ory/elements/pull/401))
|
|
119
|
+
|
|
120
|
+
### 🩹 Fixes
|
|
121
|
+
|
|
122
|
+
- two-step registration back button ([#428](https://github.com/ory/elements/pull/428))
|
|
123
|
+
- resolve wcag2aa color contrast issues ([#367](https://github.com/ory/elements/pull/367))
|
|
124
|
+
|
|
125
|
+
### ❤️ Thank You
|
|
126
|
+
|
|
127
|
+
- hackerman @aeneasr
|
|
128
|
+
- Jonas Hungershausen
|
|
129
|
+
- Jordan Labrosse
|
|
130
|
+
|
|
131
|
+
## 1.0.0-next.41 (2025-04-07)
|
|
132
|
+
|
|
133
|
+
### 🩹 Fixes
|
|
134
|
+
|
|
135
|
+
- resolve wcag2aa color contrast issues ([#367](https://github.com/ory/elements/pull/367))
|
|
136
|
+
|
|
137
|
+
### ❤️ Thank You
|
|
138
|
+
|
|
139
|
+
- Jonas Hungershausen
|
|
140
|
+
- Jordan Labrosse
|
|
141
|
+
|
|
142
|
+
## 1.0.0-next.40 (2025-04-02)
|
|
143
|
+
|
|
144
|
+
### 🚀 Features
|
|
145
|
+
|
|
146
|
+
- support SAML-native ([#395](https://github.com/ory/elements/pull/395))
|
|
147
|
+
|
|
148
|
+
### ❤️ Thank You
|
|
149
|
+
|
|
150
|
+
- hackerman @aeneasr
|
|
151
|
+
|
|
1
152
|
## 1.0.0-next.39 (2025-03-25)
|
|
2
153
|
|
|
3
154
|
### 🚀 Features
|
package/README.md
CHANGED
|
@@ -202,16 +202,243 @@ import "@ory/elements-react/theme/styles.css"
|
|
|
202
202
|
|
|
203
203
|
### Theming
|
|
204
204
|
|
|
205
|
-
|
|
205
|
+
The styling for specific elements or groups of elements in the UI can be
|
|
206
|
+
overwritten by providing your own custom CSS variables. For more complex
|
|
207
|
+
customizations see the [Component System](#component-system).
|
|
206
208
|
|
|
207
209
|
```css
|
|
208
210
|
:root {
|
|
209
|
-
/*
|
|
210
|
-
|
|
211
|
+
/* primitives */
|
|
212
|
+
/* Overriding these may affect more variables "down stream" */
|
|
213
|
+
--ui-100: #f1f5f9;
|
|
214
|
+
--ui-200: #e2e8f0;
|
|
215
|
+
--ui-300: #cbd5e1;
|
|
216
|
+
--ui-400: #94a3b8;
|
|
217
|
+
--ui-50: #f8fafc;
|
|
218
|
+
--ui-500: #64748b;
|
|
219
|
+
--ui-600: #475569;
|
|
220
|
+
--ui-700: #334155;
|
|
221
|
+
--ui-800: #1e293b;
|
|
222
|
+
--ui-900: #0f172a;
|
|
223
|
+
--ui-950: #020617;
|
|
224
|
+
--ui-black: #000000;
|
|
225
|
+
--ui-danger: #dc2626;
|
|
226
|
+
--ui-success: #22c55e;
|
|
227
|
+
--ui-transparent: #ffffff00;
|
|
228
|
+
--ui-warning: #eab308;
|
|
229
|
+
--ui-white: #ffffff;
|
|
230
|
+
/* primitives end */
|
|
231
|
+
|
|
232
|
+
/* brand */
|
|
233
|
+
--brand-100: var(--ui-100);
|
|
234
|
+
--brand-200: var(--ui-300);
|
|
235
|
+
--brand-300: var(--ui-500);
|
|
236
|
+
--brand-400: var(--ui-700);
|
|
237
|
+
--brand-50: var(--ui-50);
|
|
238
|
+
--brand-500: var(--ui-900);
|
|
239
|
+
--brand-600: var(--ui-white);
|
|
240
|
+
--brand-700: var(--ui-200);
|
|
241
|
+
--brand-800: var(--ui-400);
|
|
242
|
+
--brand-900: var(--ui-600);
|
|
243
|
+
--brand-950: var(--ui-800);
|
|
244
|
+
/* brand end */
|
|
245
|
+
|
|
246
|
+
/* interface */
|
|
247
|
+
/* These variables affect "groups" of variables, and are re-used in the more specific variables below */
|
|
248
|
+
--interface-background-brand-primary: var(--brand-500);
|
|
249
|
+
--interface-background-brand-primary-hover: var(--brand-400);
|
|
250
|
+
--interface-background-brand-secondary: var(--brand-50);
|
|
251
|
+
--interface-background-brand-secondary-hover: var(--brand-100);
|
|
252
|
+
--interface-background-default-inverted: var(--ui-900);
|
|
253
|
+
--interface-background-default-inverted-hover: var(--ui-800);
|
|
254
|
+
--interface-background-default-none: var(--ui-transparent);
|
|
255
|
+
--interface-background-default-primary: var(--ui-white);
|
|
256
|
+
--interface-background-default-primary-hover: var(--ui-50);
|
|
257
|
+
--interface-background-default-secondary: var(--ui-50);
|
|
258
|
+
--interface-background-default-secondary-hover: var(--ui-200);
|
|
259
|
+
--interface-background-default-tertiary: var(--ui-200);
|
|
260
|
+
--interface-background-default-tertiary-hover: var(--ui-300);
|
|
261
|
+
--interface-background-disabled-disabled: var(--ui-200);
|
|
262
|
+
--interface-background-validation-danger: var(--ui-danger);
|
|
263
|
+
--interface-background-validation-success: var(--ui-success);
|
|
264
|
+
--interface-background-validation-warning: var(--ui-warning);
|
|
265
|
+
--interface-border-brand-brand: var(--brand-500);
|
|
266
|
+
--interface-border-default-inverted: var(--ui-700);
|
|
267
|
+
--interface-border-default-none: var(--ui-transparent);
|
|
268
|
+
--interface-border-default-primary: var(--ui-300);
|
|
269
|
+
--interface-border-disabled-disabled: var(--ui-300);
|
|
270
|
+
--interface-border-validation-danger: var(--ui-danger);
|
|
271
|
+
--interface-border-validation-success: var(--ui-success);
|
|
272
|
+
--interface-border-validation-warning: var(--ui-warning);
|
|
273
|
+
--interface-foreground-brand-on-primary: var(--brand-50);
|
|
274
|
+
--interface-foreground-brand-on-secondary: var(--brand-950);
|
|
275
|
+
--interface-foreground-brand-primary: var(--brand-500);
|
|
276
|
+
--interface-foreground-brand-secondary: var(--brand-50);
|
|
277
|
+
--interface-foreground-default-inverted: var(--ui-white);
|
|
278
|
+
--interface-foreground-default-primary: var(--ui-900);
|
|
279
|
+
--interface-foreground-default-secondary: var(--ui-700);
|
|
280
|
+
--interface-foreground-default-tertiary: var(--ui-500);
|
|
281
|
+
--interface-foreground-disabled-disabled: var(--ui-300);
|
|
282
|
+
--interface-foreground-disabled-on-disabled: var(--ui-400);
|
|
283
|
+
--interface-foreground-validation-danger: var(--ui-danger);
|
|
284
|
+
--interface-foreground-validation-success: var(--ui-success);
|
|
285
|
+
--interface-foreground-validation-warning: var(--ui-warning);
|
|
286
|
+
/* interface end */
|
|
287
|
+
|
|
288
|
+
/* Specific elements */
|
|
289
|
+
--button-identifier-background-default: var(
|
|
290
|
+
--interface-background-brand-secondary
|
|
291
|
+
);
|
|
292
|
+
--button-identifier-background-hover: var(
|
|
293
|
+
--interface-background-brand-secondary-hover
|
|
294
|
+
);
|
|
295
|
+
--button-identifier-border-border-default: var(
|
|
296
|
+
--interface-border-brand-brand
|
|
297
|
+
);
|
|
298
|
+
--button-identifier-border-border-hover: var(--interface-border-brand-brand);
|
|
299
|
+
--button-identifier-foreground-default: var(
|
|
300
|
+
--interface-foreground-brand-on-secondary
|
|
301
|
+
);
|
|
302
|
+
--button-identifier-foreground-hover: var(
|
|
303
|
+
--interface-foreground-brand-on-secondary
|
|
304
|
+
);
|
|
305
|
+
--button-link-brand-brand: var(--interface-foreground-brand-primary);
|
|
306
|
+
--button-link-brand-brand-hover: var(--interface-foreground-default-primary);
|
|
307
|
+
--button-link-default-primary: var(--interface-foreground-default-primary);
|
|
308
|
+
--button-link-default-primary-hover: var(
|
|
309
|
+
--interface-foreground-brand-primary
|
|
310
|
+
);
|
|
311
|
+
--button-link-default-secondary: var(
|
|
312
|
+
--interface-foreground-default-secondary
|
|
313
|
+
);
|
|
314
|
+
--button-link-default-secondary-hover: var(
|
|
315
|
+
--interface-foreground-default-tertiary
|
|
316
|
+
);
|
|
317
|
+
--button-link-disabled-disabled: var(
|
|
318
|
+
--interface-foreground-disabled-disabled
|
|
319
|
+
);
|
|
320
|
+
--button-primary-background-default: var(
|
|
321
|
+
--interface-background-brand-primary
|
|
322
|
+
);
|
|
323
|
+
--button-primary-background-disabled: var(
|
|
324
|
+
--interface-background-disabled-disabled
|
|
325
|
+
);
|
|
326
|
+
--button-primary-background-hover: var(
|
|
327
|
+
--interface-background-brand-primary-hover
|
|
328
|
+
);
|
|
329
|
+
--button-primary-border-default: var(--interface-border-default-none);
|
|
330
|
+
--button-primary-border-disabled: var(--interface-border-disabled-disabled);
|
|
331
|
+
--button-primary-border-hover: var(--interface-border-default-none);
|
|
332
|
+
--button-primary-foreground-default: var(
|
|
333
|
+
--interface-foreground-brand-on-primary
|
|
334
|
+
);
|
|
335
|
+
--button-primary-foreground-disabled: var(
|
|
336
|
+
--interface-foreground-disabled-on-disabled
|
|
337
|
+
);
|
|
338
|
+
--button-primary-foreground-hover: var(
|
|
339
|
+
--interface-foreground-brand-on-primary
|
|
340
|
+
);
|
|
341
|
+
--button-secondary-background-default: var(
|
|
342
|
+
--interface-background-default-primary
|
|
343
|
+
);
|
|
344
|
+
--button-secondary-background-disabled: var(
|
|
345
|
+
--interface-background-disabled-disabled
|
|
346
|
+
);
|
|
347
|
+
--button-secondary-background-hover: var(
|
|
348
|
+
--interface-background-default-primary-hover
|
|
349
|
+
);
|
|
350
|
+
--button-secondary-border-default: var(--interface-border-default-primary);
|
|
351
|
+
--button-secondary-border-disabled: var(--interface-border-disabled-disabled);
|
|
352
|
+
--button-secondary-border-hover: var(--interface-border-default-primary);
|
|
353
|
+
--button-secondary-foreground-default: var(
|
|
354
|
+
--interface-foreground-default-primary
|
|
355
|
+
);
|
|
356
|
+
--button-secondary-foreground-disabled: var(
|
|
357
|
+
--interface-foreground-disabled-on-disabled
|
|
358
|
+
);
|
|
359
|
+
--button-secondary-foreground-hover: var(
|
|
360
|
+
--interface-foreground-default-secondary
|
|
361
|
+
);
|
|
362
|
+
--button-social-background-default: var(
|
|
363
|
+
--interface-background-default-primary
|
|
364
|
+
);
|
|
365
|
+
--button-social-background-disabled: var(
|
|
366
|
+
--interface-background-disabled-disabled
|
|
367
|
+
);
|
|
368
|
+
--button-social-background-generic-provider: var(
|
|
369
|
+
--interface-background-default-inverted
|
|
370
|
+
);
|
|
371
|
+
--button-social-background-hover: var(
|
|
372
|
+
--interface-background-default-primary-hover
|
|
373
|
+
);
|
|
374
|
+
--button-social-border-default: var(--interface-border-default-primary);
|
|
375
|
+
--button-social-border-disabled: var(--interface-border-disabled-disabled);
|
|
376
|
+
--button-social-border-generic-provider: var(--interface-border-default-none);
|
|
377
|
+
--button-social-border-hover: var(--interface-border-default-primary);
|
|
378
|
+
--button-social-foreground-default: var(
|
|
379
|
+
--interface-foreground-default-primary
|
|
380
|
+
);
|
|
381
|
+
--button-social-foreground-disabled: var(
|
|
382
|
+
--interface-foreground-disabled-on-disabled
|
|
383
|
+
);
|
|
384
|
+
--button-social-foreground-generic-provider: var(
|
|
385
|
+
--interface-foreground-default-inverted
|
|
386
|
+
);
|
|
387
|
+
--button-social-foreground-hover: var(
|
|
388
|
+
--interface-foreground-default-secondary
|
|
389
|
+
);
|
|
390
|
+
--checkbox-background-checked: var(--interface-background-brand-primary);
|
|
391
|
+
--checkbox-background-default: var(--interface-background-default-secondary);
|
|
392
|
+
--checkbox-border-checkbox-border-checked: var(
|
|
393
|
+
--interface-border-brand-brand
|
|
394
|
+
);
|
|
395
|
+
--checkbox-border-checkbox-border-default: var(
|
|
396
|
+
--interface-border-default-primary
|
|
397
|
+
);
|
|
398
|
+
--checkbox-foreground-checked: var(--interface-foreground-brand-on-primary);
|
|
399
|
+
--checkbox-foreground-default: var(--interface-foreground-default-primary);
|
|
400
|
+
--form-background-default: var(--interface-background-default-primary);
|
|
401
|
+
--form-border-default: var(--interface-border-default-primary);
|
|
402
|
+
--input-background-default: var(--interface-background-default-primary);
|
|
403
|
+
--input-background-disabled: var(--interface-background-disabled-disabled);
|
|
404
|
+
--input-background-hover: var(--interface-background-default-primary-hover);
|
|
405
|
+
--input-border-default: var(--interface-border-default-primary);
|
|
406
|
+
--input-border-disabled: var(--interface-border-disabled-disabled);
|
|
407
|
+
--input-border-focus: var(--interface-border-brand-brand);
|
|
408
|
+
--input-border-hover: var(--interface-border-default-primary);
|
|
409
|
+
--input-foreground-disabled: var(--interface-foreground-disabled-on-disabled);
|
|
410
|
+
--input-foreground-primary: var(--interface-foreground-default-primary);
|
|
411
|
+
--input-foreground-secondary: var(--interface-foreground-default-secondary);
|
|
412
|
+
--input-foreground-tertiary: var(--interface-foreground-default-tertiary);
|
|
413
|
+
--ory-background-default: var(--interface-background-default-primary);
|
|
414
|
+
--ory-border-default: var(--interface-border-default-primary);
|
|
415
|
+
--ory-foreground-default: var(--interface-foreground-default-primary);
|
|
416
|
+
--radio-background-checked: var(--interface-background-brand-primary);
|
|
417
|
+
--radio-background-default: var(--interface-background-default-secondary);
|
|
418
|
+
--radio-border-checked: var(--interface-border-brand-brand);
|
|
419
|
+
--radio-border-default: var(--interface-border-default-primary);
|
|
420
|
+
--radio-foreground-checked: var(--interface-foreground-brand-on-primary);
|
|
421
|
+
--radio-foreground-default: var(--interface-foreground-default-primary);
|
|
422
|
+
--toggle-background-checked: var(--interface-background-brand-primary);
|
|
423
|
+
--toggle-background-default: var(--interface-background-default-secondary);
|
|
424
|
+
--toggle-border-checked: var(--interface-border-default-none);
|
|
425
|
+
--toggle-border-default: var(--interface-border-default-primary);
|
|
426
|
+
--toggle-foreground-checked: var(--interface-foreground-brand-on-primary);
|
|
427
|
+
--toggle-foreground-default: var(--interface-foreground-brand-primary);
|
|
428
|
+
/* Specific elements end */
|
|
429
|
+
|
|
430
|
+
/* border radius */
|
|
431
|
+
--border-radius-buttons: 0.25rem;
|
|
432
|
+
--border-radius-forms: 0.25rem;
|
|
433
|
+
--border-radius-general: 0.25rem;
|
|
434
|
+
--border-radius-branding: 0.5rem;
|
|
435
|
+
--border-radius-cards: 0.75rem;
|
|
436
|
+
--border-radius-identifier: 62.4375rem;
|
|
437
|
+
/* border radius end*/
|
|
211
438
|
}
|
|
212
439
|
```
|
|
213
440
|
|
|
214
|
-
### Component
|
|
441
|
+
### Component system
|
|
215
442
|
|
|
216
443
|
Many components in Ory Elements can be overriden with your own implementation.
|
|
217
444
|
Ory Elements also provides useful hooks that be used inside of your custom
|
|
@@ -249,6 +476,28 @@ export default async function RegistrationPage({ searchParams }: PageProps) {
|
|
|
249
476
|
}
|
|
250
477
|
```
|
|
251
478
|
|
|
479
|
+
### internationalization (i18n)
|
|
480
|
+
|
|
481
|
+
`@ory/elements-react` comes with default translations for many languages.
|
|
482
|
+
Additionally, it provides a way to override the default messages, through the
|
|
483
|
+
`locale` property of the `OryClientConfiguration`.
|
|
484
|
+
|
|
485
|
+
```ts
|
|
486
|
+
const config = {
|
|
487
|
+
intl: {
|
|
488
|
+
locale: "en", // Or any of the other supported locales.
|
|
489
|
+
customTranslations: {
|
|
490
|
+
en: {
|
|
491
|
+
"identities.messages.1040006": "This is a custom translation",
|
|
492
|
+
},
|
|
493
|
+
},
|
|
494
|
+
},
|
|
495
|
+
}
|
|
496
|
+
```
|
|
497
|
+
|
|
498
|
+
For a full list of messages, see
|
|
499
|
+
[en.json](https://github.com/ory/elements/blob/main/packages/elements-react/src/locales/en.json).
|
|
500
|
+
|
|
252
501
|
## Development
|
|
253
502
|
|
|
254
503
|
See [DEVELOPMENT.md](./DEVELOPMENT.md).
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import { ConfigurationParameters, FrontendApi } from '@ory/client-fetch';
|
|
1
|
+
import { ConfigurationParameters, FrontendApi, OAuth2Api } from '@ory/client-fetch';
|
|
2
2
|
|
|
3
3
|
declare function frontendClient({ forceBaseUrl, ...opts }?: Partial<ConfigurationParameters & {
|
|
4
4
|
forceBaseUrl?: string;
|
|
5
5
|
}>): FrontendApi;
|
|
6
|
+
declare function oauth2Client({ forceBaseUrl, ...opts }?: Partial<ConfigurationParameters & {
|
|
7
|
+
forceBaseUrl?: string;
|
|
8
|
+
}>): OAuth2Api;
|
|
6
9
|
|
|
7
|
-
export { frontendClient };
|
|
10
|
+
export { frontendClient, oauth2Client };
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import { ConfigurationParameters, FrontendApi } from '@ory/client-fetch';
|
|
1
|
+
import { ConfigurationParameters, FrontendApi, OAuth2Api } from '@ory/client-fetch';
|
|
2
2
|
|
|
3
3
|
declare function frontendClient({ forceBaseUrl, ...opts }?: Partial<ConfigurationParameters & {
|
|
4
4
|
forceBaseUrl?: string;
|
|
5
5
|
}>): FrontendApi;
|
|
6
|
+
declare function oauth2Client({ forceBaseUrl, ...opts }?: Partial<ConfigurationParameters & {
|
|
7
|
+
forceBaseUrl?: string;
|
|
8
|
+
}>): OAuth2Api;
|
|
6
9
|
|
|
7
|
-
export { frontendClient };
|
|
10
|
+
export { frontendClient, oauth2Client };
|
|
@@ -19,7 +19,8 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
19
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
20
|
var frontendClient_exports = {};
|
|
21
21
|
__export(frontendClient_exports, {
|
|
22
|
-
frontendClient: () => frontendClient
|
|
22
|
+
frontendClient: () => frontendClient,
|
|
23
|
+
oauth2Client: () => oauth2Client
|
|
23
24
|
});
|
|
24
25
|
module.exports = __toCommonJS(frontendClient_exports);
|
|
25
26
|
var import_client_fetch = require("@ory/client-fetch");
|
|
@@ -45,8 +46,30 @@ function frontendClient({
|
|
|
45
46
|
});
|
|
46
47
|
return new import_client_fetch.FrontendApi(config);
|
|
47
48
|
}
|
|
49
|
+
function oauth2Client({
|
|
50
|
+
forceBaseUrl,
|
|
51
|
+
...opts
|
|
52
|
+
} = {
|
|
53
|
+
credentials: "include"
|
|
54
|
+
}) {
|
|
55
|
+
var _a;
|
|
56
|
+
const basePath = forceBaseUrl != null ? forceBaseUrl : (0, import_config.guessPotentiallyProxiedOrySdkUrl)({
|
|
57
|
+
knownProxiedUrl: window.location.origin
|
|
58
|
+
});
|
|
59
|
+
const config = new import_client_fetch.Configuration({
|
|
60
|
+
...opts,
|
|
61
|
+
basePath: basePath == null ? void 0 : basePath.replace(/\/$/, ""),
|
|
62
|
+
credentials: (_a = opts.credentials) != null ? _a : "include",
|
|
63
|
+
headers: {
|
|
64
|
+
Accept: "application/json",
|
|
65
|
+
...opts.headers
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
return new import_client_fetch.OAuth2Api(config);
|
|
69
|
+
}
|
|
48
70
|
// Annotate the CommonJS export names for ESM import in node:
|
|
49
71
|
0 && (module.exports = {
|
|
50
|
-
frontendClient
|
|
72
|
+
frontendClient,
|
|
73
|
+
oauth2Client
|
|
51
74
|
});
|
|
52
75
|
//# sourceMappingURL=frontendClient.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/client/frontendClient.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\nimport {\n Configuration,\n ConfigurationParameters,\n FrontendApi,\n} from \"@ory/client-fetch\"\nimport { guessPotentiallyProxiedOrySdkUrl } from \"./config\"\n\nexport function frontendClient(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new FrontendApi(config)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,
|
|
1
|
+
{"version":3,"sources":["../../src/client/frontendClient.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\nimport {\n Configuration,\n ConfigurationParameters,\n FrontendApi,\n OAuth2Api,\n} from \"@ory/client-fetch\"\nimport { guessPotentiallyProxiedOrySdkUrl } from \"./config\"\n\nexport function frontendClient(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new FrontendApi(config)\n}\n\nexport function oauth2Client(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new OAuth2Api(config)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAKO;AACP,oBAAiD;AAE1C,SAAS,eACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;AAlBF;AAmBE,QAAM,WACJ,0CACA,gDAAiC;AAAA,IAC/B,iBAAiB,OAAO,SAAS;AAAA,EACnC,CAAC;AAEH,QAAM,SAAS,IAAI,kCAAc;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,qCAAU,QAAQ,OAAO;AAAA,IACnC,cAAa,UAAK,gBAAL,YAAoB;AAAA,IACjC,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF,CAAC;AACD,SAAO,IAAI,gCAAY,MAAM;AAC/B;AAEO,SAAS,aACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;AA5CF;AA6CE,QAAM,WACJ,0CACA,gDAAiC;AAAA,IAC/B,iBAAiB,OAAO,SAAS;AAAA,EACnC,CAAC;AAEH,QAAM,SAAS,IAAI,kCAAc;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,qCAAU,QAAQ,OAAO;AAAA,IACnC,cAAa,UAAK,gBAAL,YAAoB;AAAA,IACjC,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF,CAAC;AACD,SAAO,IAAI,8BAAU,MAAM;AAC7B;","names":[]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
Configuration,
|
|
4
|
-
FrontendApi
|
|
4
|
+
FrontendApi,
|
|
5
|
+
OAuth2Api
|
|
5
6
|
} from "@ory/client-fetch";
|
|
6
7
|
import { guessPotentiallyProxiedOrySdkUrl } from "./config";
|
|
7
8
|
function frontendClient({
|
|
@@ -25,7 +26,29 @@ function frontendClient({
|
|
|
25
26
|
});
|
|
26
27
|
return new FrontendApi(config);
|
|
27
28
|
}
|
|
29
|
+
function oauth2Client({
|
|
30
|
+
forceBaseUrl,
|
|
31
|
+
...opts
|
|
32
|
+
} = {
|
|
33
|
+
credentials: "include"
|
|
34
|
+
}) {
|
|
35
|
+
var _a;
|
|
36
|
+
const basePath = forceBaseUrl != null ? forceBaseUrl : guessPotentiallyProxiedOrySdkUrl({
|
|
37
|
+
knownProxiedUrl: window.location.origin
|
|
38
|
+
});
|
|
39
|
+
const config = new Configuration({
|
|
40
|
+
...opts,
|
|
41
|
+
basePath: basePath == null ? void 0 : basePath.replace(/\/$/, ""),
|
|
42
|
+
credentials: (_a = opts.credentials) != null ? _a : "include",
|
|
43
|
+
headers: {
|
|
44
|
+
Accept: "application/json",
|
|
45
|
+
...opts.headers
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
return new OAuth2Api(config);
|
|
49
|
+
}
|
|
28
50
|
export {
|
|
29
|
-
frontendClient
|
|
51
|
+
frontendClient,
|
|
52
|
+
oauth2Client
|
|
30
53
|
};
|
|
31
54
|
//# sourceMappingURL=frontendClient.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/client/frontendClient.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\nimport {\n Configuration,\n ConfigurationParameters,\n FrontendApi,\n} from \"@ory/client-fetch\"\nimport { guessPotentiallyProxiedOrySdkUrl } from \"./config\"\n\nexport function frontendClient(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new FrontendApi(config)\n}\n"],"mappings":";AAGA;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AACP,SAAS,wCAAwC;AAE1C,SAAS,eACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;
|
|
1
|
+
{"version":3,"sources":["../../src/client/frontendClient.ts"],"sourcesContent":["// Copyright © 2024 Ory Corp\n// SPDX-License-Identifier: Apache-2.0\n\"use client\"\nimport {\n Configuration,\n ConfigurationParameters,\n FrontendApi,\n OAuth2Api,\n} from \"@ory/client-fetch\"\nimport { guessPotentiallyProxiedOrySdkUrl } from \"./config\"\n\nexport function frontendClient(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new FrontendApi(config)\n}\n\nexport function oauth2Client(\n {\n forceBaseUrl,\n ...opts\n }: Partial<ConfigurationParameters & { forceBaseUrl?: string }> = {\n credentials: \"include\",\n },\n) {\n const basePath =\n forceBaseUrl ??\n guessPotentiallyProxiedOrySdkUrl({\n knownProxiedUrl: window.location.origin,\n })\n\n const config = new Configuration({\n ...opts,\n basePath: basePath?.replace(/\\/$/, \"\"),\n credentials: opts.credentials ?? \"include\",\n headers: {\n Accept: \"application/json\",\n ...opts.headers,\n },\n })\n return new OAuth2Api(config)\n}\n"],"mappings":";AAGA;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wCAAwC;AAE1C,SAAS,eACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;AAlBF;AAmBE,QAAM,WACJ,sCACA,iCAAiC;AAAA,IAC/B,iBAAiB,OAAO,SAAS;AAAA,EACnC,CAAC;AAEH,QAAM,SAAS,IAAI,cAAc;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,qCAAU,QAAQ,OAAO;AAAA,IACnC,cAAa,UAAK,gBAAL,YAAoB;AAAA,IACjC,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF,CAAC;AACD,SAAO,IAAI,YAAY,MAAM;AAC/B;AAEO,SAAS,aACd;AAAA,EACE;AAAA,EACA,GAAG;AACL,IAAkE;AAAA,EAChE,aAAa;AACf,GACA;AA5CF;AA6CE,QAAM,WACJ,sCACA,iCAAiC;AAAA,IAC/B,iBAAiB,OAAO,SAAS;AAAA,EACnC,CAAC;AAEH,QAAM,SAAS,IAAI,cAAc;AAAA,IAC/B,GAAG;AAAA,IACH,UAAU,qCAAU,QAAQ,OAAO;AAAA,IACnC,cAAa,UAAK,gBAAL,YAAoB;AAAA,IACjC,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,GAAG,KAAK;AAAA,IACV;AAAA,EACF,CAAC;AACD,SAAO,IAAI,UAAU,MAAM;AAC7B;","names":[]}
|
package/dist/client/index.js
CHANGED
|
@@ -17,12 +17,12 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
return to;
|
|
18
18
|
};
|
|
19
19
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
-
var
|
|
21
|
-
__export(
|
|
20
|
+
var index_exports = {};
|
|
21
|
+
__export(index_exports, {
|
|
22
22
|
SessionProvider: () => import_session_provider.SessionProvider,
|
|
23
23
|
useSession: () => import_useSession.useSession
|
|
24
24
|
});
|
|
25
|
-
module.exports = __toCommonJS(
|
|
25
|
+
module.exports = __toCommonJS(index_exports);
|
|
26
26
|
var import_session_provider = require("./session-provider");
|
|
27
27
|
var import_useSession = require("./useSession");
|
|
28
28
|
// Annotate the CommonJS export names for ESM import in node:
|