-
Notifications
You must be signed in to change notification settings - Fork 453
Expand file tree
/
Copy pathtemplate.html
More file actions
466 lines (463 loc) · 21.7 KB
/
template.html
File metadata and controls
466 lines (463 loc) · 21.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
<!doctype html>
<html class="h-full">
<head>
<title>clerk-js Sandbox</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1"
/>
<script>
if (localStorage.getItem('clerk-js-sandbox-tailwind') !== 'off') {
document.write('<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"><\/script>');
} else {
document.documentElement.setAttribute('data-no-tailwind', '');
document.write(
'<style>' +
'html[data-no-tailwind] { height: 100% }' +
'html[data-no-tailwind] body { display: flex; min-height: 100%; margin: 0; font-family: system-ui, sans-serif; background: #f9fafb }' +
'html[data-no-tailwind] [data-sidebar] { position: fixed; top: 0; bottom: 0; width: 18rem; overflow-y: auto; background: #fff; border: 1px solid #eee; padding: 0.5rem; font-size: 13px }' +
'html[data-no-tailwind] body > [data-sidebar]:nth-child(1) { left: 0 }' +
'html[data-no-tailwind] body > [data-sidebar]:nth-child(2) { right: 0 }' +
'html[data-no-tailwind] body:has([data-sidebar]:not(.hidden)) { padding: 0 18rem }' +
'html[data-no-tailwind] main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem }' +
'html[data-no-tailwind] main > div { width: 100% }' +
'html[data-no-tailwind] fieldset { margin-top: 1rem }' +
'html[data-no-tailwind] legend { font-size: 14px; font-weight: 500 }' +
'html[data-no-tailwind] [data-sidebar] label { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-top: 1px solid #f3f4f6 }' +
'html[data-no-tailwind] nav ul { list-style: none; padding: 0 }' +
'html[data-no-tailwind] nav a { display: block; padding: 0.3rem 0.5rem; text-decoration: none; color: inherit; font-size: 14px }' +
'html[data-no-tailwind] nav a:hover { background: #f9fafb }' +
'<\/style>',
);
}
</script>
</head>
<body class="flex min-h-full flex-col overflow-x-hidden bg-gray-50 lg:has-[*[data-sidebar]:not(.hidden)]:px-72">
<div
data-sidebar
class="fixed inset-y-0 left-0 w-72 overflow-y-auto border-r border-gray-100 bg-white px-2 py-4 max-lg:hidden"
>
<header class="mb-2 flex items-center justify-center gap-x-2 border-b border-gray-100 pb-4">
<svg
viewBox="0 0 62 18"
fill="none"
aria-hidden="true"
class="h-[1.125rem] text-gray-950"
>
<ellipse
cx="8.99999"
cy="9"
rx="2.81249"
ry="2.8125"
class="fill-current"
></ellipse>
<path
d="M14.0674 15.6591C14.3067 15.8984 14.2827 16.2945 14.0015 16.4829C12.571 17.4411 10.8504 17.9999 8.9993 17.9999C7.14818 17.9999 5.42758 17.4411 3.99704 16.4829C3.71589 16.2945 3.69186 15.8984 3.93115 15.6591L5.98648 13.6037C6.17225 13.418 6.46042 13.3886 6.69424 13.5084C7.3856 13.8626 8.16911 14.0624 8.9993 14.0624C9.82948 14.0624 10.613 13.8626 11.3044 13.5084C11.5382 13.3886 11.8263 13.418 12.0121 13.6037L14.0674 15.6591Z"
class="fill-current"
></path>
<path
d="M14.0022 1.51706C14.2834 1.70539 14.3074 2.10155 14.0681 2.34084L12.0128 4.39619C11.827 4.58195 11.5388 4.61129 11.305 4.49151C10.6136 4.13733 9.83014 3.9375 8.99996 3.9375C6.20403 3.9375 3.93748 6.20406 3.93748 9C3.93748 9.83018 4.13731 10.6137 4.49149 11.3051C4.61127 11.5389 4.58193 11.827 4.39617 12.0128L2.34083 14.0682C2.10154 14.3074 1.70538 14.2834 1.51705 14.0023C0.558857 12.5717 0 10.8511 0 9C0 4.02944 4.02942 0 8.99996 0C10.8511 0 12.5717 0.55886 14.0022 1.51706Z"
fill-opacity="0.5"
class="fill-current"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M29.3906 1.82813C29.3906 1.75046 29.4535 1.6875 29.5312 1.6875H31.6406C31.7182 1.6875 31.7812 1.75046 31.7812 1.82813V16.1719C31.7812 16.2495 31.7182 16.3125 31.6406 16.3125H29.5312C29.4535 16.3125 29.3906 16.2495 29.3906 16.1719V1.82813ZM26.4137 13.2701C26.3577 13.2217 26.2739 13.2253 26.2201 13.2761C25.8913 13.5864 25.5063 13.8347 25.0843 14.0078C24.6215 14.1979 24.1239 14.2936 23.622 14.2891C23.1982 14.3016 22.7762 14.2291 22.3821 14.076C21.988 13.9229 21.63 13.6925 21.3303 13.3989C20.7859 12.8431 20.4726 12.0496 20.4726 11.1037C20.4726 9.2101 21.7324 7.91491 23.622 7.91491C24.1289 7.90793 24.631 8.01058 25.0926 8.21543C25.5111 8.40122 25.8869 8.66683 26.1982 8.99629C26.2514 9.05264 26.3398 9.05916 26.3985 9.00842L27.8225 7.7762C27.8807 7.72586 27.8877 7.63797 27.8364 7.58065C26.7653 6.38368 25.0872 5.76563 23.4914 5.76563C20.2783 5.76563 18 7.93299 18 11.1217C18 12.6988 18.5662 14.0268 19.5211 14.9645C20.476 15.9023 21.8363 16.4531 23.4059 16.4531C25.3741 16.4531 26.9582 15.6984 27.8869 14.7302C27.9414 14.6734 27.9354 14.583 27.8758 14.5315L26.4137 13.2701ZM43.401 11.8056C43.3931 11.876 43.3332 11.9287 43.2623 11.9287H35.8731C35.7833 11.9287 35.7164 12.012 35.7398 12.0986C36.1074 13.4614 37.2035 14.286 38.6995 14.286C39.2038 14.2966 39.7037 14.1928 40.1605 13.9827C40.5862 13.787 40.9639 13.5038 41.2682 13.1528C41.305 13.1104 41.3691 13.1041 41.4122 13.1401L42.8978 14.4335C42.9547 14.483 42.9626 14.5687 42.9138 14.6262C42.0169 15.6843 40.5637 16.4531 38.5695 16.4531C35.5016 16.4531 33.1874 14.3286 33.1874 11.1009C33.1874 9.51732 33.7326 8.18944 34.6412 7.25179C35.1209 6.76963 35.6959 6.38911 36.3307 6.13368C36.9656 5.87826 37.6469 5.75332 38.3327 5.76658C41.4422 5.76658 43.453 7.95343 43.453 10.973C43.4491 11.2512 43.4317 11.5291 43.401 11.8056ZM35.7842 9.84589C35.7581 9.93268 35.8251 10.0172 35.9158 10.0172H40.829C40.9198 10.0172 40.9869 9.93217 40.9617 9.84491C40.6268 8.68592 39.7772 7.91244 38.4577 7.91244C38.0696 7.90013 37.6834 7.97039 37.3254 8.11832C36.9675 8.26633 36.6462 8.48856 36.3836 8.76977C36.1075 9.08283 35.9034 9.44988 35.7842 9.84589ZM50.7639 5.76717C50.8422 5.76632 50.9061 5.82952 50.9061 5.90779V8.26951C50.9061 8.35135 50.8365 8.41586 50.7548 8.40981C50.5269 8.39291 50.3114 8.37856 50.1701 8.37856C48.3301 8.37856 47.2499 9.67359 47.2499 11.3735V16.1719C47.2499 16.2495 47.1869 16.3125 47.1092 16.3125H44.9999C44.9222 16.3125 44.8592 16.2495 44.8592 16.1719V6.05379C44.8592 5.97613 44.9222 5.91317 44.9999 5.91317H47.1092C47.1869 5.91317 47.2499 5.97613 47.2499 6.05379V7.47394C47.2499 7.48196 47.2563 7.48845 47.2644 7.48845C47.2689 7.48845 47.2733 7.48627 47.276 7.48261C48.1006 6.38146 49.3176 5.76892 50.6033 5.76892L50.7639 5.76717ZM56.4778 11.9525C56.4864 11.9432 56.4985 11.938 56.5112 11.938C56.5269 11.938 56.5415 11.9461 56.5498 11.9595L59.217 16.2462C59.2426 16.2874 59.2878 16.3125 59.3364 16.3125L61.7342 16.3125C61.8445 16.3125 61.9118 16.1915 61.8538 16.0978L58.1947 10.1939C58.1616 10.1406 58.1679 10.0719 58.21 10.0254L61.7355 6.13573C61.8174 6.04534 61.7533 5.90066 61.6313 5.90066H59.1298C59.0904 5.90066 59.0528 5.91719 59.0261 5.94622L54.9472 10.3925C54.8605 10.487 54.7029 10.4257 54.7029 10.2974V1.82812C54.7029 1.75046 54.64 1.6875 54.5623 1.6875H52.453C52.3753 1.6875 52.3123 1.75046 52.3123 1.82812V16.1719C52.3123 16.2495 52.3753 16.3125 52.453 16.3125L54.5623 16.3125C54.64 16.3125 54.7029 16.2495 54.7029 16.1719V13.9147C54.7029 13.8792 54.7164 13.8449 54.7406 13.8189L56.4778 11.9525Z"
class="fill-current"
></path>
</svg>
<div
class="bg-gray-25 mt-0.5 rounded-full px-2 py-1 text-[0.625rem]/3 font-medium text-gray-600 ring-1 ring-inset ring-gray-100"
>
Sandbox
</div>
</header>
<nav>
<ul role="list">
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/"
>Home</a
>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/sign-in"
>Sign In</a
>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/sign-up"
>Sign Up</a
>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/user-avatar"
>User Avatar</a
>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/user-button"
>User Button</a
>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/user-profile"
>User Profile</a
>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/create-organization"
>Create Organization</a
>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/organization-list"
>Organization List</a
>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/organization-profile"
>Organization Profile</a
>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/organization-switcher"
>Organization Switcher</a
>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/waitlist"
>Waitlist</a
>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/keyless"
>
Keyless
</a>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/pricing-table"
>
PricingTable
</a>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/api-keys"
>
API Keys
</a>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/configure-sso"
>
ConfigureSSO
</a>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/oauth-consent"
>
OAuthConsent
</a>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/task-choose-organization"
>
TaskChooseOrganization
</a>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/task-setup-mfa"
>
TaskSetupMFA
</a>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/open-sign-in"
>
Open sign in
</a>
</li>
<li class="relative">
<a
class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
href="/open-sign-up"
>
Open sign up
</a>
</li>
</ul>
</nav>
</div>
<div
data-sidebar
class="fixed inset-y-0 right-0 w-72 overflow-y-auto border-l border-gray-100 bg-white px-2 py-4 max-lg:hidden"
>
<fieldset>
<div class="mb-2 flex items-center justify-between">
<legend class="block text-sm">Variables</legend>
<button
id="resetVariablesBtn"
class="text-sm"
>
Reset
</button>
</div>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">colorPrimary</span>
<input
class="border border-gray-200"
type="color"
id="colorPrimary"
value="#2F3037"
/>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">colorNeutral</span>
<input
class="border border-gray-200"
type="color"
id="colorNeutral"
value="#000000"
/>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">colorBackground</span>
<input
class="border border-gray-200"
type="color"
id="colorBackground"
value="#ffffff"
/>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">colorPrimaryForeground</span>
<input
class="border border-gray-200"
type="color"
id="colorPrimaryForeground"
value="#ffffff"
/>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">colorDanger</span>
<input
class="border border-gray-200"
type="color"
id="colorDanger"
value="#EF4444"
/>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">colorSuccess</span>
<input
class="border border-gray-200"
type="color"
id="colorSuccess"
value="#22C543"
/>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">colorWarning</span>
<input
class="border border-gray-200"
type="color"
id="colorWarning"
value="#F36B16"
/>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">colorForeground</span>
<input
class="border border-gray-200"
type="color"
id="colorForeground"
value="#212126"
/>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">colorMutedForeground</span>
<input
class="border border-gray-200"
type="color"
id="colorMutedForeground"
value="#747686"
/>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">colorInputForeground</span>
<input
class="border border-gray-200"
type="color"
id="colorInputForeground"
value="#000000"
/>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">colorInput</span>
<input
class="border border-gray-200"
type="color"
id="colorInput"
value="#ffffff"
/>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">colorShimmer</span>
<input
class="border border-gray-200"
type="color"
id="colorShimmer"
value="#ffffff"
/>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">spacing</span>
<input
type="text"
id="spacing"
value="1rem"
class="text-sm outline-none [field-sizing:content]"
/>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">borderRadius</span>
<input
type="text"
id="borderRadius"
value="0.375rem"
class="text-sm outline-none [field-sizing:content]"
/>
</label>
</fieldset>
<fieldset>
<div class="mb-2 mt-4 flex items-center justify-between">
<legend class="block text-sm">Theme</legend>
</div>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">baseTheme</span>
<select
id="themeSelect"
class="text-sm"
>
<option value="">default</option>
<option value="dark">dark</option>
<option value="shadesOfPurple">shadesOfPurple</option>
<option value="neobrutalism">neobrutalism</option>
<option value="shadcn">shadcn</option>
</select>
</label>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">preset</span>
<select
id="presetSelect"
class="text-sm"
>
<option value="">none</option>
</select>
</label>
</fieldset>
<fieldset>
<div class="mb-2 mt-4 flex items-center justify-between">
<legend class="block text-sm">Page</legend>
</div>
<label
class="flex items-center justify-between border-t border-gray-100 py-2"
style="font-size: 12px; font-family: monospace"
>
<span>Tailwind CSS</span>
<input
type="checkbox"
id="tailwindToggle"
/>
</label>
<script>
(function () {
var cb = document.getElementById('tailwindToggle');
cb.checked = localStorage.getItem('clerk-js-sandbox-tailwind') !== 'off';
cb.addEventListener('change', function () {
localStorage.setItem('clerk-js-sandbox-tailwind', cb.checked ? 'on' : 'off');
location.reload();
});
})();
</script>
</fieldset>
<fieldset>
<div class="mb-2 mt-4 flex items-center justify-between">
<legend class="block text-sm">Other options</legend>
<button
id="resetOtherOptionsBtn"
class="text-sm"
>
Reset
</button>
</div>
<label class="flex items-center justify-between border-t border-gray-100 py-2">
<span class="font-mono text-xs">localization</span>
<select id="localizationSelect"></select>
</label>
</fieldset>
</div>
<main class="flex h-full min-w-px flex-1 items-center justify-center overflow-y-auto overflow-x-hidden py-12">
<div
id="app"
class="container w-full p-12"
></div>
</main>
<!-- This app is in the Team SDK organization. -->
<!-- Load the UI bundle first, so window.__internal_ClerkUICtor is available -->
<script
type="text/javascript"
src="<%= uiScriptUrl %>"
crossorigin="anonymous"
></script>
<script
type="text/javascript"
src="/<%= htmlRspackPlugin.files.js[0] %>"
data-clerk-publishable-key="pk_test_c3VtbWFyeS1tYW4tOTkuY2xlcmsuYWNjb3VudHNzdGFnZS5kZXYk"
></script>
<script
type="text/javascript"
src="/<%= htmlRspackPlugin.files.js[1] %>"
></script>
</body>
</html>