@insforge/react 0.3.4 → 0.4.0
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/README.md +485 -604
- package/dist/atoms.cjs +818 -0
- package/dist/atoms.cjs.map +1 -0
- package/dist/atoms.d.cts +222 -0
- package/dist/atoms.d.ts +72 -237
- package/dist/atoms.js +382 -456
- package/dist/atoms.js.map +1 -1
- package/dist/components.cjs +2254 -0
- package/dist/components.cjs.map +1 -0
- package/dist/{components.d.mts → components.d.cts} +10 -32
- package/dist/components.d.ts +9 -31
- package/dist/components.js +1049 -1183
- package/dist/components.js.map +1 -1
- package/dist/forms.cjs +1287 -0
- package/dist/forms.cjs.map +1 -0
- package/dist/forms.d.cts +138 -0
- package/dist/forms.d.ts +115 -162
- package/dist/forms.js +728 -921
- package/dist/forms.js.map +1 -1
- package/dist/{hooks.mjs → hooks.cjs} +15 -13
- package/dist/hooks.cjs.map +1 -0
- package/dist/{hooks.d.mts → hooks.d.cts} +1 -1
- package/dist/hooks.js +9 -15
- package/dist/hooks.js.map +1 -1
- package/dist/index.cjs +2674 -0
- package/dist/index.cjs.map +1 -0
- package/dist/{index.d.mts → index.d.cts} +10 -10
- package/dist/index.d.ts +4 -4
- package/dist/index.js +1096 -1238
- package/dist/index.js.map +1 -1
- package/dist/{lib.mjs → lib.cjs} +13 -11
- package/dist/lib.cjs.map +1 -0
- package/dist/{lib.d.mts → lib.d.cts} +1 -8
- package/dist/lib.d.ts +1 -8
- package/dist/lib.js +4 -17
- package/dist/lib.js.map +1 -1
- package/dist/{router.mjs → router.cjs} +14 -16
- package/dist/router.cjs.map +1 -0
- package/dist/router.js +10 -16
- package/dist/router.js.map +1 -1
- package/dist/styles.css +655 -2
- package/dist/types.cjs +4 -0
- package/dist/{types.mjs.map → types.cjs.map} +1 -1
- package/dist/{types.d.mts → types.d.cts} +2 -2
- package/dist/types.d.ts +2 -2
- package/dist/types.js +0 -1
- package/package.json +106 -98
- package/dist/atoms.d.mts +0 -387
- package/dist/atoms.mjs +0 -861
- package/dist/atoms.mjs.map +0 -1
- package/dist/components.mjs +0 -2327
- package/dist/components.mjs.map +0 -1
- package/dist/forms.d.mts +0 -185
- package/dist/forms.mjs +0 -1468
- package/dist/forms.mjs.map +0 -1
- package/dist/hooks.mjs.map +0 -1
- package/dist/index.mjs +0 -2724
- package/dist/index.mjs.map +0 -1
- package/dist/lib.mjs.map +0 -1
- package/dist/router.mjs.map +0 -1
- package/dist/types.mjs +0 -3
- package/src/styles.css +0 -15
- /package/dist/{router.d.mts → router.d.cts} +0 -0
package/dist/index.js
CHANGED
|
@@ -5,26 +5,20 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
|
|
|
5
5
|
if (!document.getElementById(styleId)) {
|
|
6
6
|
const style = document.createElement('style');
|
|
7
7
|
style.id = styleId;
|
|
8
|
-
style.textContent = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n@import \"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap\";@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-content:\"\"}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-green-100:oklch(96.2% .044 156.743);--color-green-400:oklch(79.2% .209 151.711);--color-green-600:oklch(62.7% .194 149.214);--color-green-900:oklch(39.3% .095 152.535);--color-blue-50:oklch(97% .014 254.604);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-900:oklch(37.9% .146 265.522);--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-purple-300:oklch(82.7% .119 306.383);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-700:oklch(49.6% .265 301.924);--color-purple-800:oklch(43.8% .218 303.724);--color-purple-900:oklch(38.1% .176 304.987);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-neutral-100:oklch(97% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-manrope:\"Manrope\",sans-serif}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.top-1\\/2{top:50%}.top-full{top:100%}.right-0{right:calc(var(--spacing)*0)}.right-2{right:calc(var(--spacing)*2)}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-\\[18px\\]{height:18px}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-16{width:calc(var(--spacing)*16)}.w-\\[18px\\]{width:18px}.w-full{width:100%}.max-w-\\[400px\\]{max-width:400px}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.min-w-40{min-width:calc(var(--spacing)*40)}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-0{gap:calc(var(--spacing)*0)}.gap-0\\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\\.5{gap:calc(var(--spacing)*2.5)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-none{--tw-border-style:none;border-style:none}.border-\\[\\#D4D4D4\\]{border-color:#d4d4d4}.border-\\[\\#E0E0E0\\]{border-color:#e0e0e0}.border-\\[\\#E4E4E7\\]{border-color:#e4e4e7}.border-black{border-color:var(--color-black)}.border-blue-500{border-color:var(--color-blue-500)}.border-blue-600{border-color:var(--color-blue-600)}.border-gray-200{border-color:var(--color-gray-200)}.border-neutral-400{border-color:var(--color-neutral-400)}.border-purple-300{border-color:var(--color-purple-300)}.border-red-600{border-color:var(--color-red-600)}.border-transparent{border-color:#0000}.bg-\\[\\#059669\\]{background-color:#059669}.bg-\\[\\#FAFAFA\\]{background-color:#fafafa}.bg-black{background-color:var(--color-black)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-100{background-color:var(--color-green-100)}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-neutral-100{background-color:var(--color-neutral-100)}.bg-purple-600{background-color:var(--color-purple-600)}.bg-red-50{background-color:var(--color-red-50)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-blue-50{--tw-gradient-from:var(--color-blue-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-indigo-50{--tw-gradient-from:var(--color-indigo-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-white{--tw-gradient-to:var(--color-white);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.pt-4{padding-top:calc(var(--spacing)*4)}.pr-2{padding-right:calc(var(--spacing)*2)}.pr-8{padding-right:calc(var(--spacing)*8)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pl-3{padding-left:calc(var(--spacing)*3)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-manrope{font-family:var(--font-manrope)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-4{--tw-leading:calc(var(--spacing)*4);line-height:calc(var(--spacing)*4)}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.leading-8{--tw-leading:calc(var(--spacing)*8);line-height:calc(var(--spacing)*8)}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-\\[\\#09090B\\]{color:#09090b}.text-\\[\\#525252\\]{color:#525252}.text-\\[\\#737373\\]{color:#737373}.text-\\[\\#828282\\]{color:#828282}.text-\\[\\#A3A3A3\\]{color:#a3a3a3}.text-\\[\\#A6A6A6\\]{color:#a6a6a6}.text-black{color:var(--color-black)}.text-blue-500{color:var(--color-blue-500)}.text-blue-900{color:var(--color-blue-900)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-neutral-600{color:var(--color-neutral-600)}.text-purple-600{color:var(--color-purple-600)}.text-purple-700{color:var(--color-purple-700)}.text-purple-900{color:var(--color-purple-900)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\\[0_1px_2px_0_rgba\\(0\\,0\\,0\\,0\\.10\\)\\]{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.placeholder\\:font-normal::placeholder{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.placeholder\\:text-\\[\\#A3A3A3\\]::placeholder{color:#a3a3a3}.before\\:h-px:before{content:var(--tw-content);height:1px}.before\\:flex-1:before{content:var(--tw-content);flex:1}.before\\:bg-\\[\\#E5E5E5\\]:before{content:var(--tw-content);background-color:#e5e5e5}.before\\:content-\\[\\'\\'\\]:before{--tw-content:\"\";content:var(--tw-content)}.after\\:h-px:after{content:var(--tw-content);height:1px}.after\\:flex-1:after{content:var(--tw-content);flex:1}.after\\:bg-\\[\\#E5E5E5\\]:after{content:var(--tw-content);background-color:#e5e5e5}.after\\:content-\\[\\'\\'\\]:after{--tw-content:\"\";content:var(--tw-content)}@media (hover:hover){.hover\\:border-\\[\\#9ca3af\\]:hover{border-color:#9ca3af}.hover\\:bg-\\[\\#f9fafb\\]:hover{background-color:#f9fafb}.hover\\:bg-black\\/5:hover{background-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-black\\/5:hover{background-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.hover\\:bg-blue-50:hover{background-color:var(--color-blue-50)}.hover\\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\\:bg-gray-800:hover{background-color:var(--color-gray-800)}.hover\\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}.hover\\:bg-purple-700:hover{background-color:var(--color-purple-700)}.hover\\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\\:bg-white\\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-white\\/10:hover{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.hover\\:text-gray-600:hover{color:var(--color-gray-600)}.hover\\:text-purple-800:hover{color:var(--color-purple-800)}.hover\\:underline:hover{text-decoration-line:underline}}.focus\\:border-black:focus{border-color:var(--color-black)}.focus\\:border-purple-500:focus{border-color:var(--color-purple-500)}.focus\\:shadow-\\[0_0_0_2px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]:focus{--tw-shadow:0 0 0 2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:bg-\\[\\#F5F5F5\\]:disabled{background-color:#f5f5f5}.disabled\\:no-underline:disabled{text-decoration-line:none}.disabled\\:opacity-50:disabled{opacity:.5}.disabled\\:opacity-60:disabled{opacity:.6}@media (prefers-color-scheme:dark){.dark\\:border-white{border-color:var(--color-white)}.dark\\:bg-green-900{background-color:var(--color-green-900)}.dark\\:bg-neutral-800{background-color:var(--color-neutral-800)}.dark\\:text-gray-400{color:var(--color-gray-400)}.dark\\:text-green-400{color:var(--color-green-400)}.dark\\:text-neutral-400{color:var(--color-neutral-400)}.dark\\:text-white{color:var(--color-white)}}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:\"*\";inherits:false}@property --tw-gradient-from{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:\"*\";inherits:false}@property --tw-gradient-via-stops{syntax:\"*\";inherits:false}@property --tw-gradient-from-position{syntax:\"<length-percentage>\";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:\"<length-percentage>\";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:\"<length-percentage>\";inherits:false;initial-value:100%}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@keyframes spin{to{transform:rotate(360deg)}}";
|
|
8
|
+
style.textContent = "/**\n * InsForge React Component Library Styles\n * Traditional CSS with scoped class names (no Tailwind)\n */\n\n/* ============================================\n FONTS\n ============================================ */\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');\n\n/* ============================================\n CSS VARIABLES\n ============================================ */\n:root {\n /* Colors */\n --if-color-primary: #000000;\n --if-color-primary-hover: #1f1f1f;\n --if-color-text: #000000;\n --if-color-text-secondary: #828282;\n --if-color-text-muted: #a3a3a3;\n --if-color-border: #d4d4d4;\n --if-color-border-focus: #000000;\n --if-color-bg-white: #ffffff;\n --if-color-bg-light: #fafafa;\n --if-color-bg-hover: #f9fafb;\n --if-color-error: #dc2626;\n --if-color-error-bg: #fee2e2;\n --if-color-success: #16a34a;\n\n /* Spacing */\n --if-space-1: 0.25rem; /* 4px */\n --if-space-2: 0.5rem; /* 8px */\n --if-space-3: 0.75rem; /* 12px */\n --if-space-4: 1rem; /* 16px */\n --if-space-6: 1.5rem; /* 24px */\n --if-space-8: 2rem; /* 32px */\n\n /* Border Radius */\n --if-radius-xs: 0.125rem; /* 2px */\n --if-radius-sm: 0.25rem; /* 4px */\n --if-radius-md: 0.375rem; /* 6px */\n --if-radius-lg: 0.5rem; /* 8px */\n --if-radius-xl: 0.75rem; /* 12px */\n\n /* Typography */\n --if-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n --if-font-family-manrope:\n 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n --if-font-size-xs: 0.75rem; /* 12px */\n --if-font-size-sm: 0.875rem; /* 14px */\n --if-font-size-base: 1rem; /* 16px */\n --if-font-size-lg: 1.125rem; /* 18px */\n --if-font-size-xl: 1.25rem; /* 20px */\n --if-font-size-2xl: 1.5rem; /* 24px */\n\n /* Shadows */\n --if-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --if-shadow-md: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n --if-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n\n /* Transitions */\n --if-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);\n --if-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* ============================================\n AUTH CONTAINER\n ============================================ */\n.if-authContainer {\n width: 100%;\n max-width: 400px;\n border-radius: var(--if-radius-xl);\n overflow: hidden;\n box-shadow: var(--if-shadow-lg);\n}\n\n.if-authCard {\n background-color: var(--if-color-bg-white);\n padding: var(--if-space-6);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: stretch;\n gap: var(--if-space-6);\n}\n\n/* ============================================\n AUTH HEADER\n ============================================ */\n.if-authHeader {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n gap: var(--if-space-2);\n}\n\n.if-authHeader-title {\n font-size: var(--if-font-size-2xl);\n font-weight: 600;\n color: var(--if-color-text);\n line-height: 2rem;\n margin: 0;\n font-family: var(--if-font-family);\n}\n\n.if-authHeader-subtitle {\n font-size: var(--if-font-size-sm);\n font-weight: 400;\n color: var(--if-color-text-secondary);\n line-height: 1.5rem;\n margin: 0;\n font-family: var(--if-font-family);\n}\n\n/* ============================================\n FORM FIELD\n ============================================ */\n.if-formField {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: stretch;\n gap: var(--if-space-1);\n}\n\n.if-formField-label {\n font-size: var(--if-font-size-sm);\n font-weight: 400;\n color: var(--if-color-text);\n line-height: 1.5rem;\n font-family: var(--if-font-family);\n}\n\n.if-formField-input {\n width: 100%;\n display: flex;\n align-items: center;\n gap: var(--if-space-2);\n align-self: stretch;\n padding: var(--if-space-2) var(--if-space-3);\n border-radius: var(--if-radius-sm);\n border: 1px solid var(--if-color-border);\n background-color: var(--if-color-bg-white);\n font-size: var(--if-font-size-sm);\n font-weight: 400;\n line-height: 1.25rem;\n color: var(--if-color-text);\n font-family: var(--if-font-family);\n transition: border-color var(--if-transition-base);\n}\n\n.if-formField-input::placeholder {\n color: var(--if-color-text-muted);\n font-size: var(--if-font-size-sm);\n font-weight: 400;\n}\n\n.if-formField-input:focus {\n outline: none;\n border-color: var(--if-color-border-focus);\n}\n\n/* ============================================\n PASSWORD FIELD\n ============================================ */\n.if-passwordField {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: stretch;\n gap: var(--if-space-1);\n}\n\n.if-passwordField-labelRow {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.if-passwordField-label {\n font-size: var(--if-font-size-sm);\n font-weight: 400;\n color: var(--if-color-text);\n line-height: 1.5rem;\n font-family: var(--if-font-family);\n}\n\n.if-passwordField-forgotLink {\n font-size: var(--if-font-size-sm);\n font-weight: 400;\n color: var(--if-color-text-secondary);\n text-decoration: none;\n transition: color var(--if-transition-fast);\n font-family: var(--if-font-family);\n}\n\n.if-passwordField-inputWrapper {\n position: relative;\n width: 100%;\n}\n\n.if-passwordField-input {\n width: 100%;\n display: flex;\n align-items: center;\n align-self: stretch;\n padding: var(--if-space-2) var(--if-space-3);\n padding-right: 2.5rem; /* Space for toggle button */\n border-radius: var(--if-radius-sm);\n border: 1px solid var(--if-color-border);\n background-color: var(--if-color-bg-white);\n font-size: var(--if-font-size-sm);\n font-weight: 400;\n line-height: 1.25rem;\n color: var(--if-color-text);\n font-family: var(--if-font-family);\n transition: border-color var(--if-transition-base);\n}\n\n.if-passwordField-input::placeholder {\n color: var(--if-color-text-muted);\n}\n\n.if-passwordField-input:focus {\n outline: none;\n border-color: var(--if-color-border-focus);\n}\n\n.if-passwordField-toggleButton {\n position: absolute;\n right: var(--if-space-1);\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n cursor: pointer;\n padding: var(--if-space-1);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--if-color-text-secondary);\n transition: color var(--if-transition-fast);\n}\n\n/* ============================================\n SUBMIT BUTTON\n ============================================ */\n.if-submitButton {\n border-radius: var(--if-radius-sm);\n background-color: var(--if-color-primary);\n height: 2.5rem;\n width: 100%;\n display: flex;\n margin-top: var(--if-space-4);\n padding: var(--if-space-2) var(--if-space-4);\n justify-content: center;\n align-items: center;\n gap: 0.625rem;\n align-self: stretch;\n color: var(--if-color-bg-white);\n font-weight: 600;\n font-family: var(--if-font-family-manrope);\n font-size: var(--if-font-size-base);\n line-height: normal;\n border: none;\n cursor: pointer;\n transition: background-color var(--if-transition-base);\n}\n\n.if-submitButton:hover:not(:disabled) {\n background-color: var(--if-color-primary-hover);\n}\n\n.if-submitButton:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.if-submitButton-icon {\n width: 1.25rem;\n height: 1.25rem;\n}\n\n/* Spinner animation */\n@keyframes if-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.if-submitButton-spinner {\n animation: if-spin 1s linear infinite;\n}\n\n/* ============================================\n OAUTH BUTTON\n ============================================ */\n.if-oauthButton {\n display: flex;\n width: 100%;\n height: 2.25rem;\n padding: var(--if-space-2) var(--if-space-3);\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: var(--if-space-3);\n border-radius: var(--if-radius-md);\n border: 1px solid #e4e4e7;\n background-color: var(--if-color-bg-white);\n box-shadow: var(--if-shadow-md);\n color: #09090b;\n text-align: center;\n font-size: var(--if-font-size-sm);\n font-weight: 500;\n line-height: 1.25rem;\n cursor: pointer;\n transition: all var(--if-transition-base);\n font-family: var(--if-font-family);\n}\n\n.if-oauthButton:hover:not(:disabled) {\n background-color: var(--if-color-bg-hover);\n border-color: #9ca3af;\n}\n\n.if-oauthButton:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.if-oauthButton-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.125rem;\n height: 1.125rem;\n}\n\n.if-oauthButton-full {\n justify-content: center;\n}\n\n.if-oauthButton-short {\n justify-content: center;\n padding: var(--if-space-2);\n gap: var(--if-space-2);\n}\n\n.if-oauthButton-icon-only {\n justify-content: center;\n gap: 0;\n}\n\n/* ============================================\n OAUTH PROVIDERS CONTAINER\n ============================================ */\n.if-oauthProviders {\n display: flex;\n flex-direction: column;\n gap: var(--if-space-3);\n width: 100%;\n}\n\n/* ============================================\n AUTH LINK\n ============================================ */\n.if-authLink {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: var(--if-space-1);\n font-size: var(--if-font-size-sm);\n color: var(--if-color-text-secondary);\n font-family: var(--if-font-family);\n}\n\n.if-authLink-text {\n font-weight: 400;\n}\n\n.if-authLink-link {\n font-weight: 600;\n color: var(--if-color-text);\n text-decoration: none;\n transition: opacity var(--if-transition-fast);\n}\n\n/* ============================================\n AUTH DIVIDER\n ============================================ */\n.if-authDivider {\n display: flex;\n align-items: center;\n text-align: center;\n width: 100%;\n gap: var(--if-space-3);\n}\n\n.if-authDivider-line {\n flex: 1;\n border-top: 1px solid var(--if-color-border);\n}\n\n.if-authDivider-text {\n font-size: var(--if-font-size-sm);\n color: var(--if-color-text-secondary);\n font-weight: 400;\n font-family: var(--if-font-family-manrope);\n}\n\n/* ============================================\n ERROR BANNER\n ============================================ */\n.if-errorBanner {\n padding: var(--if-space-3);\n background-color: var(--if-color-error-bg);\n border-radius: var(--if-radius-md);\n border: 1px solid var(--if-color-error);\n}\n\n.if-errorBanner-text {\n font-size: var(--if-font-size-sm);\n color: var(--if-color-error);\n font-weight: 400;\n font-family: var(--if-font-family);\n margin: 0;\n}\n\n/* ============================================\n AUTH BRANDING\n ============================================ */\n.if-authBranding {\n background-color: var(--if-color-bg-light);\n padding: var(--if-space-4) var(--if-space-2);\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: var(--if-space-1);\n}\n\n.if-authBranding-text {\n font-size: var(--if-font-size-xs);\n font-weight: 500;\n color: var(--if-color-text);\n font-family: var(--if-font-family-manrope);\n margin: 0;\n}\n\n/* ============================================\n VERIFICATION CODE INPUT\n ============================================ */\n.if-verificationCode {\n display: flex;\n flex-direction: column;\n gap: var(--if-space-4);\n}\n\n.if-verificationCode-description {\n font-size: var(--if-font-size-sm);\n color: var(--if-color-text-secondary);\n text-align: center;\n font-family: var(--if-font-family);\n}\n\n.if-verificationCode-email {\n font-weight: 600;\n color: var(--if-color-text);\n}\n\n.if-verificationCode-inputContainer {\n display: flex;\n gap: var(--if-space-2);\n justify-content: center;\n}\n\n.if-verificationCode-input {\n width: 3rem;\n height: 3rem;\n text-align: center;\n font-size: var(--if-font-size-xl);\n font-weight: 600;\n border: 2px solid var(--if-color-border);\n border-radius: var(--if-radius-md);\n transition: border-color var(--if-transition-base);\n font-family: var(--if-font-family);\n}\n\n.if-verificationCode-input:focus {\n outline: none;\n border-color: var(--if-color-border-focus);\n}\n\n/* ============================================\n PASSWORD STRENGTH INDICATOR\n ============================================ */\n.if-passwordStrength {\n margin-top: var(--if-space-2);\n}\n\n.if-passwordStrength-bar {\n height: 4px;\n background-color: #e5e7eb;\n border-radius: 2px;\n overflow: hidden;\n margin-bottom: var(--if-space-2);\n}\n\n.if-passwordStrength-fill {\n height: 100%;\n transition:\n width var(--if-transition-base),\n background-color var(--if-transition-base);\n}\n\n.if-passwordStrength-fill.weak {\n background-color: #ef4444;\n width: 33%;\n}\n\n.if-passwordStrength-fill.medium {\n background-color: #f59e0b;\n width: 66%;\n}\n\n.if-passwordStrength-fill.strong {\n background-color: var(--if-color-success);\n width: 100%;\n}\n\n.if-passwordStrength-text {\n font-size: var(--if-font-size-xs);\n color: var(--if-color-text-secondary);\n font-family: var(--if-font-family);\n}\n\n.if-passwordStrength-requirements {\n margin-top: var(--if-space-2);\n font-size: var(--if-font-size-xs);\n color: var(--if-color-text-secondary);\n font-family: var(--if-font-family);\n}\n\n.if-passwordStrength-requirement {\n display: flex;\n align-items: center;\n gap: var(--if-space-1);\n margin-bottom: var(--if-space-1);\n}\n\n.if-passwordStrength-requirement.met {\n color: var(--if-color-success);\n}\n\n.if-passwordStrength-requirement.unmet {\n color: var(--if-color-text-muted);\n}\n\n/* ============================================\n FORM CONTAINER\n ============================================ */\n.if-form {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: center;\n gap: var(--if-space-6);\n}\n\n/* ============================================\n USER BUTTON\n ============================================ */\n.if-userButton {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--if-space-2);\n border-radius: 9999px;\n background-color: var(--if-color-bg-white);\n border: 1px solid var(--if-color-border);\n cursor: pointer;\n transition: all var(--if-transition-base);\n}\n\n.if-userButton:hover {\n background-color: var(--if-color-bg-light);\n}\n\n.if-userButton-avatar {\n width: 2rem;\n height: 2rem;\n border-radius: 9999px;\n background-color: var(--if-color-primary);\n color: var(--if-color-bg-white);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n font-size: var(--if-font-size-sm);\n font-family: var(--if-font-family);\n}\n\n.if-userButton-menu {\n position: absolute;\n margin-top: var(--if-space-2);\n background-color: var(--if-color-bg-white);\n border: 1px solid var(--if-color-border);\n border-radius: var(--if-radius-md);\n box-shadow: var(--if-shadow-lg);\n padding: var(--if-space-2);\n min-width: 200px;\n z-index: 50;\n}\n\n.if-userButton-menuItem {\n display: flex;\n align-items: center;\n gap: var(--if-space-2);\n padding: var(--if-space-2);\n border-radius: var(--if-radius-sm);\n cursor: pointer;\n transition: background-color var(--if-transition-fast);\n font-size: var(--if-font-size-sm);\n color: var(--if-color-text);\n font-family: var(--if-font-family);\n}\n\n.if-userButton-menuItem:hover {\n background-color: var(--if-color-bg-light);\n}\n\n/* ============================================\n UTILITY CLASSES\n ============================================ */\n.if-hidden {\n display: none;\n}\n\n.if-visuallyHidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n";
|
|
9
9
|
if (document.head) {
|
|
10
10
|
document.head.appendChild(style);
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
import { createContext, useState, useRef, useCallback, useEffect, useContext } from 'react';
|
|
16
|
+
import { createClient } from '@insforge/sdk';
|
|
17
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
18
|
+
import { AlertTriangle, Check, EyeOff, Eye, Loader2, CircleCheck, LogOut } from 'lucide-react';
|
|
19
|
+
import { z } from 'zod';
|
|
16
20
|
|
|
17
|
-
var
|
|
18
|
-
var sdk = require('@insforge/sdk');
|
|
19
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
20
|
-
var clsx = require('clsx');
|
|
21
|
-
var tailwindMerge = require('tailwind-merge');
|
|
22
|
-
var lucideReact = require('lucide-react');
|
|
23
|
-
var zod = require('zod');
|
|
24
|
-
|
|
25
|
-
var InsforgeContext = react.createContext(
|
|
26
|
-
void 0
|
|
27
|
-
);
|
|
21
|
+
var InsforgeContext = createContext(void 0);
|
|
28
22
|
function InsforgeProvider({
|
|
29
23
|
children,
|
|
30
24
|
baseUrl,
|
|
@@ -32,11 +26,11 @@ function InsforgeProvider({
|
|
|
32
26
|
syncTokenToCookie,
|
|
33
27
|
clearCookie
|
|
34
28
|
}) {
|
|
35
|
-
const [user, setUser] =
|
|
36
|
-
const [isLoaded, setIsLoaded] =
|
|
37
|
-
const refreshIntervalRef =
|
|
38
|
-
const [insforge] =
|
|
39
|
-
const loadAuthState =
|
|
29
|
+
const [user, setUser] = useState(null);
|
|
30
|
+
const [isLoaded, setIsLoaded] = useState(false);
|
|
31
|
+
const refreshIntervalRef = useRef(null);
|
|
32
|
+
const [insforge] = useState(() => createClient({ baseUrl }));
|
|
33
|
+
const loadAuthState = useCallback(async () => {
|
|
40
34
|
try {
|
|
41
35
|
const sessionResult = insforge.auth.getCurrentSession();
|
|
42
36
|
const session = sessionResult.data?.session;
|
|
@@ -70,6 +64,9 @@ function InsforgeProvider({
|
|
|
70
64
|
try {
|
|
71
65
|
await clearCookie();
|
|
72
66
|
} catch (error) {
|
|
67
|
+
if (error instanceof Error) {
|
|
68
|
+
console.error("[InsforgeProvider] Error clearing cookie:", error.message);
|
|
69
|
+
}
|
|
73
70
|
}
|
|
74
71
|
}
|
|
75
72
|
setUser(null);
|
|
@@ -86,6 +83,9 @@ function InsforgeProvider({
|
|
|
86
83
|
try {
|
|
87
84
|
await clearCookie();
|
|
88
85
|
} catch (error2) {
|
|
86
|
+
if (error2 instanceof Error) {
|
|
87
|
+
console.error("[InsforgeProvider] Error clearing cookie:", error2.message);
|
|
88
|
+
}
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
setUser(null);
|
|
@@ -95,19 +95,20 @@ function InsforgeProvider({
|
|
|
95
95
|
setIsLoaded(true);
|
|
96
96
|
return {
|
|
97
97
|
success: false,
|
|
98
|
-
error: error instanceof Error ? error.message : "
|
|
98
|
+
error: error instanceof Error ? error.message : "Authentication failed"
|
|
99
99
|
};
|
|
100
100
|
}
|
|
101
|
-
}, [insforge, onAuthChange,
|
|
102
|
-
|
|
101
|
+
}, [insforge, onAuthChange, clearCookie]);
|
|
102
|
+
useEffect(() => {
|
|
103
103
|
loadAuthState();
|
|
104
|
+
const intervalId = refreshIntervalRef.current;
|
|
104
105
|
return () => {
|
|
105
|
-
if (
|
|
106
|
-
clearInterval(
|
|
106
|
+
if (intervalId) {
|
|
107
|
+
clearInterval(intervalId);
|
|
107
108
|
}
|
|
108
109
|
};
|
|
109
|
-
}, []);
|
|
110
|
-
const getPublicAuthConfig =
|
|
110
|
+
}, [loadAuthState]);
|
|
111
|
+
const getPublicAuthConfig = useCallback(async () => {
|
|
111
112
|
try {
|
|
112
113
|
const result = await insforge.auth.getPublicAuthConfig();
|
|
113
114
|
if (result.data) {
|
|
@@ -117,14 +118,11 @@ function InsforgeProvider({
|
|
|
117
118
|
return null;
|
|
118
119
|
}
|
|
119
120
|
} catch (error) {
|
|
120
|
-
console.error(
|
|
121
|
-
"[InsforgeProvider] Failed to get public auth config:",
|
|
122
|
-
error
|
|
123
|
-
);
|
|
121
|
+
console.error("[InsforgeProvider] Failed to get public auth config:", error);
|
|
124
122
|
return null;
|
|
125
123
|
}
|
|
126
124
|
}, [insforge]);
|
|
127
|
-
const handleAuthSuccess =
|
|
125
|
+
const handleAuthSuccess = useCallback(
|
|
128
126
|
async (authToken, fallbackUser) => {
|
|
129
127
|
const userResult = await insforge.auth.getCurrentUser();
|
|
130
128
|
if (userResult.data) {
|
|
@@ -143,6 +141,9 @@ function InsforgeProvider({
|
|
|
143
141
|
try {
|
|
144
142
|
await syncTokenToCookie(authToken);
|
|
145
143
|
} catch (error) {
|
|
144
|
+
if (error instanceof Error) {
|
|
145
|
+
console.error("[InsforgeProvider] Error syncing token to cookie:", error.message);
|
|
146
|
+
}
|
|
146
147
|
}
|
|
147
148
|
}
|
|
148
149
|
} else if (fallbackUser) {
|
|
@@ -160,7 +161,7 @@ function InsforgeProvider({
|
|
|
160
161
|
},
|
|
161
162
|
[insforge, onAuthChange, syncTokenToCookie]
|
|
162
163
|
);
|
|
163
|
-
const signIn =
|
|
164
|
+
const signIn = useCallback(
|
|
164
165
|
async (email, password) => {
|
|
165
166
|
const sdkResult = await insforge.auth.signInWithPassword({
|
|
166
167
|
email,
|
|
@@ -186,7 +187,7 @@ function InsforgeProvider({
|
|
|
186
187
|
},
|
|
187
188
|
[insforge, handleAuthSuccess]
|
|
188
189
|
);
|
|
189
|
-
const signUp =
|
|
190
|
+
const signUp = useCallback(
|
|
190
191
|
async (email, password) => {
|
|
191
192
|
const sdkResult = await insforge.auth.signUp({ email, password });
|
|
192
193
|
if (sdkResult.data) {
|
|
@@ -211,12 +212,15 @@ function InsforgeProvider({
|
|
|
211
212
|
},
|
|
212
213
|
[insforge, handleAuthSuccess]
|
|
213
214
|
);
|
|
214
|
-
const signOut =
|
|
215
|
+
const signOut = useCallback(async () => {
|
|
215
216
|
await insforge.auth.signOut();
|
|
216
217
|
if (clearCookie) {
|
|
217
218
|
try {
|
|
218
219
|
await clearCookie();
|
|
219
220
|
} catch (error) {
|
|
221
|
+
if (error instanceof Error) {
|
|
222
|
+
console.error("[InsforgeProvider] Error clearing cookie:", error.message);
|
|
223
|
+
}
|
|
220
224
|
}
|
|
221
225
|
}
|
|
222
226
|
if (refreshIntervalRef.current) {
|
|
@@ -227,9 +231,11 @@ function InsforgeProvider({
|
|
|
227
231
|
onAuthChange(null);
|
|
228
232
|
}
|
|
229
233
|
}, [insforge, onAuthChange, clearCookie]);
|
|
230
|
-
const updateUser =
|
|
234
|
+
const updateUser = useCallback(
|
|
231
235
|
async (data) => {
|
|
232
|
-
if (!user)
|
|
236
|
+
if (!user) {
|
|
237
|
+
throw new Error("No user signed in");
|
|
238
|
+
}
|
|
233
239
|
const profileUpdate = {
|
|
234
240
|
nickname: data.name,
|
|
235
241
|
avatarUrl: data.avatarUrl
|
|
@@ -254,14 +260,14 @@ function InsforgeProvider({
|
|
|
254
260
|
},
|
|
255
261
|
[user, onAuthChange, insforge]
|
|
256
262
|
);
|
|
257
|
-
const sendResetPasswordEmail =
|
|
263
|
+
const sendResetPasswordEmail = useCallback(
|
|
258
264
|
async (email) => {
|
|
259
265
|
const sdkResult = await insforge.auth.sendResetPasswordEmail({ email });
|
|
260
266
|
return sdkResult.data;
|
|
261
267
|
},
|
|
262
268
|
[insforge]
|
|
263
269
|
);
|
|
264
|
-
const resetPassword =
|
|
270
|
+
const resetPassword = useCallback(
|
|
265
271
|
async (token, newPassword) => {
|
|
266
272
|
const sdkResult = await insforge.auth.resetPassword({
|
|
267
273
|
newPassword,
|
|
@@ -271,14 +277,14 @@ function InsforgeProvider({
|
|
|
271
277
|
},
|
|
272
278
|
[insforge]
|
|
273
279
|
);
|
|
274
|
-
const verifyEmail =
|
|
280
|
+
const verifyEmail = useCallback(
|
|
275
281
|
async (token) => {
|
|
276
282
|
const sdkResult = await insforge.auth.verifyEmail({ otp: token });
|
|
277
283
|
return sdkResult.data;
|
|
278
284
|
},
|
|
279
285
|
[insforge]
|
|
280
286
|
);
|
|
281
|
-
return /* @__PURE__ */
|
|
287
|
+
return /* @__PURE__ */ jsx(
|
|
282
288
|
InsforgeContext.Provider,
|
|
283
289
|
{
|
|
284
290
|
value: {
|
|
@@ -302,7 +308,7 @@ function InsforgeProvider({
|
|
|
302
308
|
);
|
|
303
309
|
}
|
|
304
310
|
function useInsforge() {
|
|
305
|
-
const context =
|
|
311
|
+
const context = useContext(InsforgeContext);
|
|
306
312
|
if (!context) {
|
|
307
313
|
throw new Error("useInsforge must be used within InsforgeProvider");
|
|
308
314
|
}
|
|
@@ -310,9 +316,9 @@ function useInsforge() {
|
|
|
310
316
|
}
|
|
311
317
|
function usePublicAuthConfig() {
|
|
312
318
|
const { getPublicAuthConfig } = useInsforge();
|
|
313
|
-
const [authConfig, setAuthConfig] =
|
|
314
|
-
const [isLoaded, setIsLoaded] =
|
|
315
|
-
|
|
319
|
+
const [authConfig, setAuthConfig] = useState(null);
|
|
320
|
+
const [isLoaded, setIsLoaded] = useState(false);
|
|
321
|
+
useEffect(() => {
|
|
316
322
|
async function fetchConfig() {
|
|
317
323
|
const result = await getPublicAuthConfig();
|
|
318
324
|
if (result) {
|
|
@@ -328,236 +334,179 @@ function usePublicAuthConfig() {
|
|
|
328
334
|
return { authConfig, isLoaded };
|
|
329
335
|
}
|
|
330
336
|
function AuthBranding() {
|
|
331
|
-
return /* @__PURE__ */
|
|
332
|
-
/* @__PURE__ */
|
|
333
|
-
/* @__PURE__ */
|
|
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
|
-
|
|
337
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-authBranding if-internal-ab4k9w", children: [
|
|
338
|
+
/* @__PURE__ */ jsx("p", { className: "if-authBranding-text", children: "Secured by" }),
|
|
339
|
+
/* @__PURE__ */ jsx("a", { href: "https://insforge.dev", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(
|
|
340
|
+
"svg",
|
|
341
|
+
{
|
|
342
|
+
width: "83",
|
|
343
|
+
height: "20",
|
|
344
|
+
viewBox: "0 0 83 20",
|
|
345
|
+
fill: "none",
|
|
346
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
347
|
+
children: [
|
|
348
|
+
/* @__PURE__ */ jsx(
|
|
349
|
+
"path",
|
|
350
|
+
{
|
|
351
|
+
d: "M2.16783 8.46797C1.9334 8.23325 1.9334 7.85269 2.16783 7.61797L8.11049 1.66797L16.6 1.66797L6.41259 11.868C6.17815 12.1027 5.79807 12.1027 5.56363 11.868L2.16783 8.46797Z",
|
|
352
|
+
fill: "url(#paint0_linear_2976_9475)"
|
|
353
|
+
}
|
|
354
|
+
),
|
|
355
|
+
/* @__PURE__ */ jsx(
|
|
356
|
+
"path",
|
|
357
|
+
{
|
|
358
|
+
d: "M12.8858 6.44922L16.6 10.168V18.668L8.64108 10.6992L12.8858 6.44922Z",
|
|
359
|
+
fill: "url(#paint1_linear_2976_9475)"
|
|
360
|
+
}
|
|
361
|
+
),
|
|
362
|
+
/* @__PURE__ */ jsx(
|
|
363
|
+
"path",
|
|
364
|
+
{
|
|
365
|
+
d: "M67.5439 6.48828C68.2894 6.48828 68.9145 6.67064 69.418 7.03516C69.5229 7.10943 69.6214 7.1907 69.7158 7.27637V6.70703H71.248V14.959C71.248 15.1583 71.2381 15.3485 71.2188 15.5283C71.2042 15.7129 71.1774 15.8925 71.1387 16.0674C71.0225 16.5776 70.7998 16.9957 70.4707 17.3213C70.1415 17.6518 69.7321 17.8972 69.2432 18.0576C68.7592 18.2179 68.2222 18.2988 67.6318 18.2988C67.1962 18.2988 66.7768 18.2308 66.375 18.0947C65.9782 17.9587 65.6202 17.7614 65.3008 17.5039C64.9813 17.2512 64.7199 16.9446 64.5166 16.585L66.1289 15.7832C66.2789 16.0698 66.4888 16.2819 66.7598 16.418C67.0356 16.5589 67.3289 16.6289 67.6387 16.6289C68.0016 16.6289 68.3258 16.5628 68.6113 16.4316C68.8969 16.3053 69.1176 16.116 69.2725 15.8633C69.4321 15.6155 69.5077 15.3047 69.498 14.9307V14.1797C69.4665 14.2037 69.4359 14.229 69.4033 14.252C68.8855 14.6164 68.2441 14.7988 67.4795 14.7988C66.7582 14.7988 66.1281 14.6165 65.5908 14.252C65.0537 13.8875 64.637 13.3915 64.3418 12.7646C64.0467 12.1378 63.8994 11.4307 63.8994 10.6436C63.8994 9.84651 64.0465 9.13673 64.3418 8.51465C64.6419 7.88768 65.0663 7.39481 65.6133 7.03516C66.1601 6.67077 66.8036 6.48836 67.5439 6.48828ZM37.5 6.48828C38.1099 6.48828 38.6496 6.58294 39.1191 6.77246C39.5935 6.96201 39.9762 7.2321 40.2666 7.58203C40.5569 7.93184 40.7359 8.34227 40.8037 8.81348L39.0176 9.13477C38.974 8.79951 38.8218 8.53424 38.5605 8.33984C38.304 8.14547 37.96 8.03605 37.5293 8.01172C37.1178 7.98742 36.7859 8.05051 36.5342 8.20117C36.2825 8.34698 36.1562 8.55398 36.1562 8.82129C36.1563 8.97184 36.208 9.10017 36.3096 9.20703C36.4112 9.31394 36.614 9.42141 36.9189 9.52832C37.2288 9.63524 37.6889 9.76635 38.2988 9.92188C38.9232 10.0823 39.4222 10.2666 39.7949 10.4756C40.1722 10.6796 40.4428 10.9254 40.6074 11.2119C40.7768 11.4987 40.8623 11.8466 40.8623 12.2549C40.8623 13.047 40.574 13.6691 39.998 14.1211C39.4268 14.5731 38.6348 14.7988 37.623 14.7988C36.6551 14.7988 35.8687 14.5799 35.2637 14.1426C34.6587 13.7052 34.2909 13.0908 34.1602 12.2988L35.9463 12.0215C36.0383 12.4102 36.2411 12.7169 36.5557 12.9404C36.8703 13.164 37.2678 13.2754 37.7471 13.2754C38.1681 13.2754 38.4922 13.1926 38.7197 13.0273C38.9521 12.8572 39.0684 12.6266 39.0684 12.335C39.0684 12.1552 39.0245 12.0122 38.9375 11.9053C38.8552 11.7935 38.6713 11.686 38.3857 11.584C38.1001 11.4819 37.6618 11.3528 37.0713 11.1973C36.4131 11.0223 35.8901 10.8359 35.5029 10.6367C35.1158 10.4327 34.8374 10.192 34.668 9.91504C34.4985 9.63801 34.4141 9.30188 34.4141 8.9082C34.4141 8.41746 34.5423 7.98943 34.7988 7.625C35.0553 7.26073 35.4135 6.98146 35.873 6.78711C36.3329 6.58784 36.8755 6.48828 37.5 6.48828ZM53.3047 6.48828C54.0937 6.48828 54.7815 6.66572 55.3672 7.02051C55.9527 7.37528 56.4072 7.86634 56.7314 8.49316C57.0558 9.11525 57.2187 9.83193 57.2188 10.6436C57.2188 11.46 57.0537 12.1817 56.7246 12.8086C56.4003 13.4307 55.9451 13.9196 55.3594 14.2744C54.7737 14.6242 54.0888 14.7988 53.3047 14.7988C52.5205 14.7988 51.8357 14.6214 51.25 14.2666C50.6643 13.9118 50.2091 13.4238 49.8848 12.8018C49.5653 12.1748 49.4053 11.4552 49.4053 10.6436C49.4053 9.81735 49.5703 9.09279 49.8994 8.4707C50.2286 7.8488 50.6859 7.36255 51.2715 7.0127C51.8572 6.66281 52.5351 6.48828 53.3047 6.48828ZM76.7471 6.48828C77.5603 6.48828 78.25 6.68053 78.8164 7.06445C79.3876 7.44351 79.812 7.97991 80.0879 8.6748C80.3638 9.36976 80.4672 10.189 80.3994 11.1318H74.7256C74.7843 11.6972 74.949 12.1516 75.2227 12.4951C75.5711 12.9325 76.0792 13.1513 76.7471 13.1514C77.1779 13.1514 77.5486 13.0567 77.8584 12.8672C78.173 12.6728 78.4146 12.3928 78.584 12.0283L80.3125 12.5537C80.0124 13.2633 79.5473 13.8153 78.918 14.209C78.2936 14.6025 77.6036 14.7988 76.8486 14.7988C76.0549 14.7988 75.358 14.6263 74.7578 14.2812C74.1576 13.9362 73.6875 13.458 73.3486 12.8457C73.0147 12.2334 72.8477 11.5284 72.8477 10.7314C72.8477 9.87126 73.0127 9.12495 73.3418 8.49316C73.671 7.85651 74.1282 7.36263 74.7139 7.0127C75.2995 6.6628 75.9775 6.48832 76.7471 6.48828ZM23.3301 14.5801H21.5801V4.08203H23.3301V14.5801ZM29.6152 6.48047C30.1959 6.48052 30.6753 6.5781 31.0527 6.77246C31.4301 6.96681 31.7305 7.21443 31.9531 7.51562C32.1758 7.81695 32.3398 8.13831 32.4463 8.47852C32.5528 8.81873 32.6213 9.14205 32.6504 9.44824C32.6843 9.74946 32.7012 9.99508 32.7012 10.1846V14.5801H30.9287V10.7891C30.9287 10.5413 30.9118 10.2669 30.8779 9.96582C30.844 9.66449 30.7645 9.37469 30.6387 9.09766C30.5177 8.81592 30.3337 8.58503 30.0869 8.40527C29.8449 8.22551 29.5157 8.13579 29.0996 8.13574C28.8769 8.13574 28.6563 8.17221 28.4385 8.24512C28.2206 8.31802 28.0219 8.4442 27.8428 8.62402C27.6685 8.79899 27.5284 9.04249 27.4219 9.35352C27.3154 9.65965 27.2617 10.0532 27.2617 10.5342V14.5801H25.4902V6.70703H27.0518V7.58301C27.2521 7.34675 27.486 7.14172 27.7559 6.96973C28.2593 6.64409 28.8794 6.48047 29.6152 6.48047ZM48.748 5.83887H44.2021V8.45605H47.876V10.2061H44.2021V14.5801H42.4521V4.08203H48.748V5.83887ZM62.5137 6.67773C62.7606 6.65829 63.001 6.66815 63.2334 6.70703V8.34766C63.001 8.27961 62.7317 8.25695 62.4268 8.28125C62.1267 8.30557 61.8553 8.39134 61.6133 8.53711C61.3715 8.66829 61.1733 8.83606 61.0186 9.04004C60.8686 9.24404 60.7572 9.47701 60.6846 9.73926C60.612 9.99685 60.5752 10.2768 60.5752 10.5781V14.5801H58.8184V6.70703H60.3652V7.96582C60.4243 7.85986 60.4888 7.75824 60.5605 7.66211C60.7251 7.4434 60.9219 7.26302 61.1494 7.12207C61.3429 6.99098 61.5559 6.88926 61.7881 6.81641C62.0251 6.73869 62.267 6.69235 62.5137 6.67773ZM67.8057 8.0625C67.3362 8.06252 66.9485 8.17982 66.6436 8.41309C66.3389 8.64144 66.1139 8.95232 65.9688 9.3457C65.8235 9.7345 65.751 10.1673 65.751 10.6436C65.751 11.1247 65.8215 11.5624 65.9619 11.9561C66.1071 12.3447 66.3269 12.6535 66.6221 12.8818C66.9174 13.1103 67.293 13.2246 67.748 13.2246C68.2174 13.2246 68.5953 13.1171 68.8809 12.9033C69.1711 12.6846 69.3811 12.3808 69.5117 11.9922C69.6473 11.6034 69.7158 11.1539 69.7158 10.6436C69.7158 10.1284 69.6473 9.67886 69.5117 9.29492C69.381 8.90617 69.1753 8.60445 68.8945 8.39062C68.6138 8.17213 68.2508 8.0625 67.8057 8.0625ZM53.3047 8.13574C52.8351 8.13574 52.4475 8.24222 52.1426 8.45605C51.8425 8.66504 51.6198 8.95977 51.4746 9.33887C51.3295 9.71303 51.2568 10.148 51.2568 10.6436C51.2568 11.4066 51.4288 12.0168 51.7725 12.4736C52.121 12.9256 52.6318 13.1514 53.3047 13.1514C54.0017 13.1514 54.5196 12.9177 54.8584 12.4512C55.1971 11.9846 55.3672 11.3822 55.3672 10.6436C55.3672 9.8807 55.1951 9.27324 54.8516 8.82129C54.5079 8.36444 53.9921 8.13575 53.3047 8.13574ZM76.8203 8.02637C76.1039 8.02637 75.5712 8.25013 75.2227 8.69727C74.9987 8.98144 74.8476 9.35094 74.7676 9.80566H78.6221C78.5589 9.29301 78.4236 8.89686 78.2139 8.61719C77.9186 8.22359 77.4543 8.02645 76.8203 8.02637Z",
|
|
366
|
+
fill: "black"
|
|
367
|
+
}
|
|
368
|
+
),
|
|
369
|
+
/* @__PURE__ */ jsxs("defs", { children: [
|
|
370
|
+
/* @__PURE__ */ jsxs(
|
|
371
|
+
"linearGradient",
|
|
372
|
+
{
|
|
373
|
+
id: "paint0_linear_2976_9475",
|
|
374
|
+
x1: "1.85883",
|
|
375
|
+
y1: "1.92425",
|
|
376
|
+
x2: "24.3072",
|
|
377
|
+
y2: "9.64016",
|
|
378
|
+
gradientUnits: "userSpaceOnUse",
|
|
379
|
+
children: [
|
|
380
|
+
/* @__PURE__ */ jsx("stop", {}),
|
|
381
|
+
/* @__PURE__ */ jsx("stop", { offset: "1", stopOpacity: "0.4" })
|
|
382
|
+
]
|
|
383
|
+
}
|
|
384
|
+
),
|
|
385
|
+
/* @__PURE__ */ jsxs(
|
|
386
|
+
"linearGradient",
|
|
387
|
+
{
|
|
388
|
+
id: "paint1_linear_2976_9475",
|
|
389
|
+
x1: "25.6475",
|
|
390
|
+
y1: "8.65468",
|
|
391
|
+
x2: "10.7901",
|
|
392
|
+
y2: "8.65468",
|
|
393
|
+
gradientUnits: "userSpaceOnUse",
|
|
394
|
+
children: [
|
|
395
|
+
/* @__PURE__ */ jsx("stop", {}),
|
|
396
|
+
/* @__PURE__ */ jsx("stop", { offset: "1", stopOpacity: "0.4" })
|
|
397
|
+
]
|
|
398
|
+
}
|
|
399
|
+
)
|
|
400
|
+
] })
|
|
401
|
+
]
|
|
402
|
+
}
|
|
403
|
+
) })
|
|
388
404
|
] });
|
|
389
405
|
}
|
|
390
|
-
function
|
|
391
|
-
return
|
|
392
|
-
}
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
"div",
|
|
396
|
-
{
|
|
397
|
-
className: cn(
|
|
398
|
-
"w-full max-w-[400px] rounded-xl overflow-hidden shadow-lg",
|
|
399
|
-
appearance.containerClassName
|
|
400
|
-
),
|
|
401
|
-
children: [
|
|
402
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
|
|
403
|
-
"bg-white p-6 flex flex-col justify-center items-stretch gap-6",
|
|
404
|
-
appearance.cardClassName
|
|
405
|
-
), children }),
|
|
406
|
-
/* @__PURE__ */ jsxRuntime.jsx(AuthBranding, {})
|
|
407
|
-
]
|
|
408
|
-
}
|
|
409
|
-
);
|
|
406
|
+
function AuthContainer({ children }) {
|
|
407
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-authContainer if-internal-a8f3d2", children: [
|
|
408
|
+
/* @__PURE__ */ jsx("div", { className: "if-authCard if-internal-b2k9x1", children }),
|
|
409
|
+
/* @__PURE__ */ jsx(AuthBranding, {})
|
|
410
|
+
] });
|
|
410
411
|
}
|
|
411
|
-
function AuthHeader({
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
}) {
|
|
416
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
417
|
-
"flex flex-col justify-start items-start gap-2",
|
|
418
|
-
appearance.containerClassName
|
|
419
|
-
), children: [
|
|
420
|
-
/* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn(
|
|
421
|
-
"text-2xl font-semibold text-black leading-8",
|
|
422
|
-
appearance.titleClassName
|
|
423
|
-
), children: title }),
|
|
424
|
-
subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(
|
|
425
|
-
"text-sm font-normal text-[#828282] leading-6",
|
|
426
|
-
appearance.subtitleClassName
|
|
427
|
-
), children: subtitle })
|
|
412
|
+
function AuthHeader({ title, subtitle }) {
|
|
413
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
|
|
414
|
+
/* @__PURE__ */ jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: title }),
|
|
415
|
+
subtitle && /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", children: subtitle })
|
|
428
416
|
] });
|
|
429
417
|
}
|
|
430
|
-
function AuthErrorBanner({ error
|
|
431
|
-
if (!error)
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
}
|
|
444
|
-
);
|
|
418
|
+
function AuthErrorBanner({ error }) {
|
|
419
|
+
if (!error) {
|
|
420
|
+
return null;
|
|
421
|
+
}
|
|
422
|
+
return /* @__PURE__ */ jsx("div", { className: "if-errorBanner if-internal-eb2m7k", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
423
|
+
/* @__PURE__ */ jsx(
|
|
424
|
+
AlertTriangle,
|
|
425
|
+
{
|
|
426
|
+
style: { width: "1.5rem", height: "1.5rem", flexShrink: 0, color: "#dc2626" }
|
|
427
|
+
}
|
|
428
|
+
),
|
|
429
|
+
/* @__PURE__ */ jsx("span", { className: "if-errorBanner-text", children: error })
|
|
430
|
+
] }) });
|
|
445
431
|
}
|
|
446
432
|
function AuthFormField({
|
|
447
433
|
label,
|
|
448
434
|
id,
|
|
449
|
-
appearance = {},
|
|
450
435
|
...props
|
|
451
436
|
}) {
|
|
452
|
-
return /* @__PURE__ */
|
|
453
|
-
"
|
|
454
|
-
|
|
455
|
-
), children: [
|
|
456
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
457
|
-
"label",
|
|
458
|
-
{
|
|
459
|
-
htmlFor: id,
|
|
460
|
-
className: cn(
|
|
461
|
-
"text-sm font-normal text-black leading-6",
|
|
462
|
-
appearance.labelClassName
|
|
463
|
-
),
|
|
464
|
-
children: label
|
|
465
|
-
}
|
|
466
|
-
),
|
|
467
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
468
|
-
"input",
|
|
469
|
-
{
|
|
470
|
-
id,
|
|
471
|
-
className: cn(
|
|
472
|
-
"w-full flex items-center gap-2 self-stretch",
|
|
473
|
-
"pl-3 pr-2 py-2 rounded-sm border border-[#D4D4D4] bg-white",
|
|
474
|
-
"text-sm font-normal leading-5",
|
|
475
|
-
"placeholder:text-[#A3A3A3] placeholder:font-sm placeholder:font-normal",
|
|
476
|
-
"focus:outline-none focus:border-black",
|
|
477
|
-
appearance.inputClassName
|
|
478
|
-
),
|
|
479
|
-
...props
|
|
480
|
-
}
|
|
481
|
-
)
|
|
437
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-formField if-internal-f9n6p2", children: [
|
|
438
|
+
/* @__PURE__ */ jsx("label", { htmlFor: id, className: "if-formField-label if-internal-l3k8m1", children: label }),
|
|
439
|
+
/* @__PURE__ */ jsx("input", { id, className: "if-formField-input if-internal-i2v8k4", ...props })
|
|
482
440
|
] });
|
|
483
441
|
}
|
|
484
442
|
function AuthPasswordStrengthIndicator({
|
|
485
443
|
password,
|
|
486
|
-
config
|
|
487
|
-
appearance = {}
|
|
444
|
+
config
|
|
488
445
|
}) {
|
|
489
446
|
const requirements = createRequirements(config);
|
|
490
|
-
return /* @__PURE__ */
|
|
447
|
+
return /* @__PURE__ */ jsx("div", { className: "if-passwordStrength if-internal-ps6w3k", children: /* @__PURE__ */ jsx("div", { className: "if-passwordStrength-requirements", children: requirements.map((req) => /* @__PURE__ */ jsxs(
|
|
491
448
|
"div",
|
|
492
449
|
{
|
|
493
|
-
className:
|
|
494
|
-
children:
|
|
495
|
-
/* @__PURE__ */
|
|
450
|
+
className: `if-passwordStrength-requirement ${req.test(password) ? "met" : "unmet"}`,
|
|
451
|
+
children: [
|
|
452
|
+
/* @__PURE__ */ jsx(
|
|
496
453
|
"div",
|
|
497
454
|
{
|
|
498
|
-
|
|
499
|
-
"flex
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
455
|
+
style: {
|
|
456
|
+
display: "flex",
|
|
457
|
+
alignItems: "center",
|
|
458
|
+
justifyContent: "center",
|
|
459
|
+
width: "1rem",
|
|
460
|
+
height: "1rem",
|
|
461
|
+
borderRadius: "50%",
|
|
462
|
+
border: "2px solid",
|
|
463
|
+
borderColor: req.test(password) ? "transparent" : "#9ca3af",
|
|
464
|
+
backgroundColor: req.test(password) ? "#059669" : "white",
|
|
465
|
+
transition: "all 0.2s"
|
|
466
|
+
},
|
|
467
|
+
children: req.test(password) && /* @__PURE__ */ jsx(Check, { style: { width: "0.75rem", height: "0.75rem", color: "white" } })
|
|
503
468
|
}
|
|
504
469
|
),
|
|
505
|
-
/* @__PURE__ */
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
appearance.requirementClassName
|
|
511
|
-
),
|
|
512
|
-
children: req.label
|
|
513
|
-
}
|
|
514
|
-
)
|
|
515
|
-
] }, req.label))
|
|
516
|
-
}
|
|
517
|
-
);
|
|
470
|
+
/* @__PURE__ */ jsx("span", { children: req.label })
|
|
471
|
+
]
|
|
472
|
+
},
|
|
473
|
+
req.label
|
|
474
|
+
)) }) });
|
|
518
475
|
}
|
|
519
476
|
function createRequirements(config) {
|
|
520
477
|
const requirements = [];
|
|
521
|
-
|
|
522
|
-
const requireUppercase = config.requireUppercase;
|
|
523
|
-
const requireLowercase = config.requireLowercase;
|
|
524
|
-
const requireNumber = config.requireNumber;
|
|
525
|
-
const requireSpecialChar = config.requireSpecialChar;
|
|
526
|
-
if (requireUppercase) {
|
|
478
|
+
if (config.passwordMinLength) {
|
|
527
479
|
requirements.push({
|
|
528
|
-
label:
|
|
529
|
-
test: (
|
|
480
|
+
label: `At least ${config.passwordMinLength} characters`,
|
|
481
|
+
test: (password) => password.length >= config.passwordMinLength
|
|
530
482
|
});
|
|
531
483
|
}
|
|
532
|
-
if (requireLowercase) {
|
|
484
|
+
if (config.requireLowercase) {
|
|
533
485
|
requirements.push({
|
|
534
|
-
label: "
|
|
535
|
-
test: (
|
|
486
|
+
label: "Contains lowercase letter",
|
|
487
|
+
test: (password) => /[a-z]/.test(password)
|
|
536
488
|
});
|
|
537
489
|
}
|
|
538
|
-
if (
|
|
490
|
+
if (config.requireUppercase) {
|
|
539
491
|
requirements.push({
|
|
540
|
-
label: "
|
|
541
|
-
test: (
|
|
492
|
+
label: "Contains uppercase letter",
|
|
493
|
+
test: (password) => /[A-Z]/.test(password)
|
|
542
494
|
});
|
|
543
495
|
}
|
|
544
|
-
if (
|
|
496
|
+
if (config.requireNumber) {
|
|
497
|
+
requirements.push({
|
|
498
|
+
label: "Contains number",
|
|
499
|
+
test: (password) => /\d/.test(password)
|
|
500
|
+
});
|
|
501
|
+
}
|
|
502
|
+
if (config.requireSpecialChar) {
|
|
545
503
|
requirements.push({
|
|
546
|
-
label: "
|
|
547
|
-
test: (
|
|
504
|
+
label: "Contains special character",
|
|
505
|
+
test: (password) => /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password)
|
|
548
506
|
});
|
|
549
507
|
}
|
|
550
|
-
requirements.push({
|
|
551
|
-
label: `${minLength} characters or more`,
|
|
552
|
-
test: (pwd) => pwd.length >= minLength
|
|
553
|
-
});
|
|
554
508
|
return requirements;
|
|
555
509
|
}
|
|
556
|
-
function validatePasswordStrength(password, config) {
|
|
557
|
-
if (!password) return false;
|
|
558
|
-
const requirements = createRequirements(config);
|
|
559
|
-
return requirements.every((req) => req.test(password));
|
|
560
|
-
}
|
|
561
510
|
function AuthPasswordField({
|
|
562
511
|
label,
|
|
563
512
|
id,
|
|
@@ -565,121 +514,78 @@ function AuthPasswordField({
|
|
|
565
514
|
authConfig,
|
|
566
515
|
forgotPasswordLink,
|
|
567
516
|
value,
|
|
568
|
-
appearance = {},
|
|
569
517
|
onFocus,
|
|
570
518
|
...props
|
|
571
519
|
}) {
|
|
572
|
-
const [showPassword, setShowPassword] =
|
|
573
|
-
const [showStrength, setShowStrength] =
|
|
520
|
+
const [showPassword, setShowPassword] = useState(false);
|
|
521
|
+
const [showStrength, setShowStrength] = useState(false);
|
|
574
522
|
const handleFocus = (e) => {
|
|
575
523
|
if (showStrengthIndicator) {
|
|
576
524
|
setShowStrength(true);
|
|
577
525
|
}
|
|
578
526
|
onFocus?.(e);
|
|
579
527
|
};
|
|
580
|
-
return /* @__PURE__ */
|
|
581
|
-
"div",
|
|
582
|
-
|
|
583
|
-
className:
|
|
584
|
-
|
|
585
|
-
|
|
528
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-passwordField if-internal-p5w9m7", children: [
|
|
529
|
+
(label || forgotPasswordLink) && /* @__PURE__ */ jsxs("div", { className: "if-passwordField-labelRow", children: [
|
|
530
|
+
/* @__PURE__ */ jsx("label", { htmlFor: id, className: "if-passwordField-label", children: label }),
|
|
531
|
+
forgotPasswordLink && /* @__PURE__ */ jsx("a", { href: forgotPasswordLink.href, className: "if-passwordField-forgotLink", children: forgotPasswordLink.text || "Forget Password?" })
|
|
532
|
+
] }),
|
|
533
|
+
/* @__PURE__ */ jsxs("div", { className: "if-passwordField-inputWrapper", children: [
|
|
534
|
+
/* @__PURE__ */ jsx(
|
|
535
|
+
"input",
|
|
536
|
+
{
|
|
537
|
+
id,
|
|
538
|
+
type: showPassword ? "text" : "password",
|
|
539
|
+
className: "if-passwordField-input",
|
|
540
|
+
value,
|
|
541
|
+
onFocus: handleFocus,
|
|
542
|
+
...props
|
|
543
|
+
}
|
|
586
544
|
),
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
forgotPasswordLink && /* @__PURE__ */ jsxRuntime.jsx(
|
|
601
|
-
"a",
|
|
602
|
-
{
|
|
603
|
-
href: forgotPasswordLink.href,
|
|
604
|
-
className: "text-right text-sm font-normal text-[#737373] leading-6",
|
|
605
|
-
children: forgotPasswordLink.text || "Forget Password?"
|
|
606
|
-
}
|
|
607
|
-
)
|
|
608
|
-
] }),
|
|
609
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
610
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
611
|
-
"input",
|
|
612
|
-
{
|
|
613
|
-
id,
|
|
614
|
-
type: showPassword ? "text" : "password",
|
|
615
|
-
className: cn(
|
|
616
|
-
"w-full flex items-center gap-2 self-stretch",
|
|
617
|
-
"pl-3 py-2 pr-8 rounded border border-[#D4D4D4] bg-white",
|
|
618
|
-
"text-sm font-normal leading-5",
|
|
619
|
-
"placeholder:text-[#A3A3A3] placeholder:font-sm placeholder:font-normal",
|
|
620
|
-
"focus:outline-none focus:border-black",
|
|
621
|
-
appearance.inputClassName
|
|
622
|
-
),
|
|
623
|
-
value,
|
|
624
|
-
onFocus: handleFocus,
|
|
625
|
-
...props
|
|
626
|
-
}
|
|
627
|
-
),
|
|
628
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
629
|
-
"button",
|
|
630
|
-
{
|
|
631
|
-
type: "button",
|
|
632
|
-
onClick: () => setShowPassword(!showPassword),
|
|
633
|
-
className: "absolute right-2 top-1/2 -translate-y-1/2 bg-transparent border-none text-[#A6A6A6] cursor-pointer transition-colors hover:text-gray-600 flex items-center justify-center",
|
|
634
|
-
"aria-label": showPassword ? "Hide password" : "Show password",
|
|
635
|
-
children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
|
|
636
|
-
}
|
|
637
|
-
)
|
|
638
|
-
] }),
|
|
639
|
-
showStrengthIndicator && showStrength && /* @__PURE__ */ jsxRuntime.jsx(
|
|
640
|
-
AuthPasswordStrengthIndicator,
|
|
641
|
-
{
|
|
642
|
-
password: String(value || ""),
|
|
643
|
-
config: authConfig
|
|
644
|
-
}
|
|
645
|
-
)
|
|
646
|
-
]
|
|
647
|
-
}
|
|
648
|
-
);
|
|
545
|
+
/* @__PURE__ */ jsx(
|
|
546
|
+
"button",
|
|
547
|
+
{
|
|
548
|
+
type: "button",
|
|
549
|
+
onClick: () => setShowPassword(!showPassword),
|
|
550
|
+
className: "if-passwordField-toggleButton",
|
|
551
|
+
"aria-label": showPassword ? "Hide password" : "Show password",
|
|
552
|
+
children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { size: 20 }) : /* @__PURE__ */ jsx(Eye, { size: 20 })
|
|
553
|
+
}
|
|
554
|
+
)
|
|
555
|
+
] }),
|
|
556
|
+
showStrengthIndicator && showStrength && /* @__PURE__ */ jsx(AuthPasswordStrengthIndicator, { password: String(value || ""), config: authConfig })
|
|
557
|
+
] });
|
|
649
558
|
}
|
|
650
559
|
function AuthSubmitButton({
|
|
651
560
|
children,
|
|
652
561
|
isLoading = false,
|
|
653
562
|
confirmed = false,
|
|
654
|
-
disabled = false
|
|
655
|
-
className
|
|
563
|
+
disabled = false
|
|
656
564
|
}) {
|
|
657
|
-
return /* @__PURE__ */
|
|
565
|
+
return /* @__PURE__ */ jsxs(
|
|
658
566
|
"button",
|
|
659
567
|
{
|
|
660
568
|
type: "submit",
|
|
661
|
-
className:
|
|
662
|
-
"rounded-sm bg-black w-full flex mt-4 px-4 py-2",
|
|
663
|
-
"justify-center items-center gap-2.5 self-stretch",
|
|
664
|
-
"text-white font-semibold font-manrope text-base leading-normal",
|
|
665
|
-
"border-none cursor-pointer transition-colors",
|
|
666
|
-
"hover:bg-gray-800",
|
|
667
|
-
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
668
|
-
className
|
|
669
|
-
),
|
|
569
|
+
className: "if-submitButton if-internal-b8p3m4",
|
|
670
570
|
disabled: disabled || isLoading || confirmed,
|
|
671
571
|
children: [
|
|
672
|
-
isLoading && /* @__PURE__ */
|
|
673
|
-
confirmed && /* @__PURE__ */
|
|
572
|
+
isLoading && /* @__PURE__ */ jsx(Loader2, { className: "if-submitButton-icon if-submitButton-spinner", size: 20 }),
|
|
573
|
+
confirmed && /* @__PURE__ */ jsx(CircleCheck, { className: "if-submitButton-icon", size: 20 }),
|
|
674
574
|
children
|
|
675
575
|
]
|
|
676
576
|
}
|
|
677
577
|
);
|
|
678
578
|
}
|
|
679
|
-
function AuthLink({
|
|
579
|
+
function AuthLink({
|
|
580
|
+
text,
|
|
581
|
+
linkText,
|
|
582
|
+
href
|
|
583
|
+
}) {
|
|
680
584
|
const currentSearch = typeof window !== "undefined" ? window.location.search : "";
|
|
681
585
|
const finalHref = (() => {
|
|
682
|
-
if (!currentSearch)
|
|
586
|
+
if (!currentSearch) {
|
|
587
|
+
return href;
|
|
588
|
+
}
|
|
683
589
|
try {
|
|
684
590
|
const url = new URL(href, window.location.origin);
|
|
685
591
|
const currentParams = new URLSearchParams(currentSearch);
|
|
@@ -693,59 +599,45 @@ function AuthLink({ text, linkText, href, appearance = {} }) {
|
|
|
693
599
|
return href;
|
|
694
600
|
}
|
|
695
601
|
})();
|
|
696
|
-
return /* @__PURE__ */
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
text,
|
|
701
|
-
" ",
|
|
702
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
703
|
-
"a",
|
|
704
|
-
{
|
|
705
|
-
href: finalHref,
|
|
706
|
-
className: cn(
|
|
707
|
-
"text-sm font-medium text-black leading-6",
|
|
708
|
-
appearance.linkClassName
|
|
709
|
-
),
|
|
710
|
-
children: linkText
|
|
711
|
-
}
|
|
712
|
-
)
|
|
602
|
+
return /* @__PURE__ */ jsxs("p", { className: "if-authLink if-internal-al5w9p", children: [
|
|
603
|
+
text && /* @__PURE__ */ jsx("span", { className: "if-authLink-text", children: text }),
|
|
604
|
+
text && " ",
|
|
605
|
+
/* @__PURE__ */ jsx("a", { href: finalHref, className: "if-authLink-link", children: linkText })
|
|
713
606
|
] });
|
|
714
607
|
}
|
|
715
|
-
function AuthDivider({ text = "or"
|
|
716
|
-
return /* @__PURE__ */
|
|
717
|
-
"
|
|
718
|
-
"
|
|
719
|
-
"
|
|
720
|
-
|
|
721
|
-
), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold font-manrope text-[#A3A3A3] leading-normal", children: text }) });
|
|
608
|
+
function AuthDivider({ text = "or" }) {
|
|
609
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-authDivider if-internal-ad7k3m", children: [
|
|
610
|
+
/* @__PURE__ */ jsx("div", { className: "if-authDivider-line" }),
|
|
611
|
+
/* @__PURE__ */ jsx("span", { className: "if-authDivider-text", children: text }),
|
|
612
|
+
/* @__PURE__ */ jsx("div", { className: "if-authDivider-line" })
|
|
613
|
+
] });
|
|
722
614
|
}
|
|
723
615
|
var OAUTH_PROVIDER_CONFIG = {
|
|
724
616
|
google: {
|
|
725
617
|
name: "Google",
|
|
726
|
-
svg: /* @__PURE__ */
|
|
727
|
-
/* @__PURE__ */
|
|
618
|
+
svg: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
|
|
619
|
+
/* @__PURE__ */ jsx(
|
|
728
620
|
"path",
|
|
729
621
|
{
|
|
730
622
|
d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z",
|
|
731
623
|
fill: "#4285F4"
|
|
732
624
|
}
|
|
733
625
|
),
|
|
734
|
-
/* @__PURE__ */
|
|
626
|
+
/* @__PURE__ */ jsx(
|
|
735
627
|
"path",
|
|
736
628
|
{
|
|
737
629
|
d: "M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z",
|
|
738
630
|
fill: "#34A853"
|
|
739
631
|
}
|
|
740
632
|
),
|
|
741
|
-
/* @__PURE__ */
|
|
633
|
+
/* @__PURE__ */ jsx(
|
|
742
634
|
"path",
|
|
743
635
|
{
|
|
744
636
|
d: "M3.964 10.707c-.18-.54-.282-1.117-.282-1.707 0-.593.102-1.17.282-1.709V4.958H.957C.347 6.173 0 7.548 0 9c0 1.452.348 2.827.957 4.042l3.007-2.335z",
|
|
745
637
|
fill: "#FBBC05"
|
|
746
638
|
}
|
|
747
639
|
),
|
|
748
|
-
/* @__PURE__ */
|
|
640
|
+
/* @__PURE__ */ jsx(
|
|
749
641
|
"path",
|
|
750
642
|
{
|
|
751
643
|
d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z",
|
|
@@ -757,12 +649,12 @@ var OAUTH_PROVIDER_CONFIG = {
|
|
|
757
649
|
},
|
|
758
650
|
github: {
|
|
759
651
|
name: "GitHub",
|
|
760
|
-
svg: /* @__PURE__ */
|
|
652
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" }) }),
|
|
761
653
|
className: "insforge-oauth-github"
|
|
762
654
|
},
|
|
763
655
|
discord: {
|
|
764
656
|
name: "Discord",
|
|
765
|
-
svg: /* @__PURE__ */
|
|
657
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
766
658
|
"path",
|
|
767
659
|
{
|
|
768
660
|
d: "M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z",
|
|
@@ -773,7 +665,7 @@ var OAUTH_PROVIDER_CONFIG = {
|
|
|
773
665
|
},
|
|
774
666
|
facebook: {
|
|
775
667
|
name: "Facebook",
|
|
776
|
-
svg: /* @__PURE__ */
|
|
668
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
777
669
|
"path",
|
|
778
670
|
{
|
|
779
671
|
d: "M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047v-2.66c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.971H15.83c-1.49 0-1.955.93-1.955 1.886v2.264h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z",
|
|
@@ -784,7 +676,7 @@ var OAUTH_PROVIDER_CONFIG = {
|
|
|
784
676
|
},
|
|
785
677
|
linkedin: {
|
|
786
678
|
name: "LinkedIn",
|
|
787
|
-
svg: /* @__PURE__ */
|
|
679
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
788
680
|
"path",
|
|
789
681
|
{
|
|
790
682
|
d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
|
|
@@ -795,45 +687,45 @@ var OAUTH_PROVIDER_CONFIG = {
|
|
|
795
687
|
},
|
|
796
688
|
microsoft: {
|
|
797
689
|
name: "Microsoft",
|
|
798
|
-
svg: /* @__PURE__ */
|
|
799
|
-
/* @__PURE__ */
|
|
800
|
-
/* @__PURE__ */
|
|
801
|
-
/* @__PURE__ */
|
|
802
|
-
/* @__PURE__ */
|
|
690
|
+
svg: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 23 23", fill: "none", children: [
|
|
691
|
+
/* @__PURE__ */ jsx("path", { d: "M0 0h11v11H0z", fill: "#F25022" }),
|
|
692
|
+
/* @__PURE__ */ jsx("path", { d: "M12 0h11v11H12z", fill: "#7FBA00" }),
|
|
693
|
+
/* @__PURE__ */ jsx("path", { d: "M0 12h11v11H0z", fill: "#00A4EF" }),
|
|
694
|
+
/* @__PURE__ */ jsx("path", { d: "M12 12h11v11H12z", fill: "#FFB900" })
|
|
803
695
|
] }),
|
|
804
696
|
className: "insforge-oauth-microsoft"
|
|
805
697
|
},
|
|
806
698
|
apple: {
|
|
807
699
|
name: "Apple",
|
|
808
|
-
svg: /* @__PURE__ */
|
|
700
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) }),
|
|
809
701
|
className: "insforge-oauth-apple"
|
|
810
702
|
},
|
|
811
703
|
x: {
|
|
812
704
|
name: "X",
|
|
813
|
-
svg: /* @__PURE__ */
|
|
705
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) }),
|
|
814
706
|
className: "insforge-oauth-x"
|
|
815
707
|
},
|
|
816
708
|
instagram: {
|
|
817
709
|
name: "Instagram",
|
|
818
|
-
svg: /* @__PURE__ */
|
|
819
|
-
/* @__PURE__ */
|
|
710
|
+
svg: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [
|
|
711
|
+
/* @__PURE__ */ jsx(
|
|
820
712
|
"path",
|
|
821
713
|
{
|
|
822
714
|
d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z",
|
|
823
715
|
fill: "url(#instagram-gradient)"
|
|
824
716
|
}
|
|
825
717
|
),
|
|
826
|
-
/* @__PURE__ */
|
|
827
|
-
/* @__PURE__ */
|
|
828
|
-
/* @__PURE__ */
|
|
829
|
-
/* @__PURE__ */
|
|
718
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "instagram-gradient", x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
|
|
719
|
+
/* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#FD5949" }),
|
|
720
|
+
/* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#D6249F" }),
|
|
721
|
+
/* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#285AEB" })
|
|
830
722
|
] }) })
|
|
831
723
|
] }),
|
|
832
724
|
className: "insforge-oauth-instagram"
|
|
833
725
|
},
|
|
834
726
|
tiktok: {
|
|
835
727
|
name: "TikTok",
|
|
836
|
-
svg: /* @__PURE__ */
|
|
728
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
837
729
|
"path",
|
|
838
730
|
{
|
|
839
731
|
d: "M19.589 6.686a4.793 4.793 0 01-3.77-4.245V2h-3.445v13.672a2.896 2.896 0 01-5.201 1.743l-.002-.001.002.001a2.895 2.895 0 013.183-4.51v-3.5a6.329 6.329 0 00-5.394 10.692 6.33 6.33 0 0010.857-4.424V8.687a8.182 8.182 0 004.773 1.526V6.79a4.831 4.831 0 01-1.003-.104z",
|
|
@@ -844,7 +736,7 @@ var OAUTH_PROVIDER_CONFIG = {
|
|
|
844
736
|
},
|
|
845
737
|
spotify: {
|
|
846
738
|
name: "Spotify",
|
|
847
|
-
svg: /* @__PURE__ */
|
|
739
|
+
svg: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
|
|
848
740
|
"path",
|
|
849
741
|
{
|
|
850
742
|
d: "M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z",
|
|
@@ -866,43 +758,39 @@ function AuthOAuthButton({
|
|
|
866
758
|
disabled,
|
|
867
759
|
loading,
|
|
868
760
|
displayMode = "full",
|
|
869
|
-
style
|
|
870
|
-
className
|
|
761
|
+
style
|
|
871
762
|
}) {
|
|
872
763
|
const config = getProviderConfig(provider);
|
|
873
764
|
if (!config) {
|
|
874
765
|
return null;
|
|
875
766
|
}
|
|
876
767
|
const getButtonText = () => {
|
|
877
|
-
if (
|
|
878
|
-
|
|
879
|
-
|
|
768
|
+
if (displayMode === "full") {
|
|
769
|
+
return `Continue with ${config.name}`;
|
|
770
|
+
}
|
|
771
|
+
if (displayMode === "short") {
|
|
772
|
+
return config.name;
|
|
773
|
+
}
|
|
880
774
|
return "";
|
|
881
775
|
};
|
|
882
|
-
|
|
776
|
+
const className = [
|
|
777
|
+
"if-oauthButton",
|
|
778
|
+
"if-internal-o4k7w2",
|
|
779
|
+
displayMode === "full" && "if-oauthButton-full",
|
|
780
|
+
displayMode === "short" && "if-oauthButton-short",
|
|
781
|
+
displayMode === "icon" && "if-oauthButton-icon-only"
|
|
782
|
+
].filter(Boolean).join(" ");
|
|
783
|
+
return /* @__PURE__ */ jsxs(
|
|
883
784
|
"button",
|
|
884
785
|
{
|
|
885
786
|
type: "button",
|
|
886
787
|
onClick: () => onClick(provider),
|
|
887
|
-
className
|
|
888
|
-
"flex w-full h-9 px-3 py-2",
|
|
889
|
-
"flex-row justify-center items-center gap-3",
|
|
890
|
-
"rounded-md border border-[#E4E4E7] bg-white",
|
|
891
|
-
"shadow-[0_1px_2px_0_rgba(0,0,0,0.10)]",
|
|
892
|
-
"text-[#09090B] text-center text-sm font-medium leading-5",
|
|
893
|
-
"cursor-pointer transition-all duration-200",
|
|
894
|
-
"hover:bg-[#f9fafb] hover:border-[#9ca3af]",
|
|
895
|
-
"disabled:opacity-60 disabled:cursor-not-allowed",
|
|
896
|
-
displayMode === "full" && "justify-center",
|
|
897
|
-
displayMode === "short" && "justify-center px-2 gap-2",
|
|
898
|
-
displayMode === "icon" && "justify-center gap-0",
|
|
899
|
-
className
|
|
900
|
-
),
|
|
788
|
+
className,
|
|
901
789
|
disabled: disabled || loading,
|
|
902
790
|
style,
|
|
903
791
|
children: [
|
|
904
|
-
loading ? /* @__PURE__ */
|
|
905
|
-
getButtonText() && /* @__PURE__ */
|
|
792
|
+
loading ? /* @__PURE__ */ jsx(Loader2, { className: "if-oauthButton-icon if-submitButton-spinner", size: 18 }) : /* @__PURE__ */ jsx("span", { className: "if-oauthButton-icon", children: config.svg }),
|
|
793
|
+
getButtonText() && /* @__PURE__ */ jsx("span", { children: getButtonText() })
|
|
906
794
|
]
|
|
907
795
|
}
|
|
908
796
|
);
|
|
@@ -911,16 +799,19 @@ function AuthOAuthProviders({
|
|
|
911
799
|
providers,
|
|
912
800
|
onClick,
|
|
913
801
|
disabled,
|
|
914
|
-
loading
|
|
915
|
-
appearance = {}
|
|
802
|
+
loading
|
|
916
803
|
}) {
|
|
917
804
|
if (!providers || providers.length === 0) {
|
|
918
805
|
return null;
|
|
919
806
|
}
|
|
920
807
|
const count = providers.length;
|
|
921
808
|
const getDisplayMode = () => {
|
|
922
|
-
if (count === 1)
|
|
923
|
-
|
|
809
|
+
if (count === 1) {
|
|
810
|
+
return "full";
|
|
811
|
+
}
|
|
812
|
+
if (count === 2 || count === 4) {
|
|
813
|
+
return "short";
|
|
814
|
+
}
|
|
924
815
|
return "icon";
|
|
925
816
|
};
|
|
926
817
|
const getGridColumnStyle = (index) => {
|
|
@@ -956,22 +847,30 @@ function AuthOAuthProviders({
|
|
|
956
847
|
return { gridColumn: "span 2 / span 2" };
|
|
957
848
|
}
|
|
958
849
|
};
|
|
959
|
-
return /* @__PURE__ */
|
|
960
|
-
"
|
|
961
|
-
appearance.containerClassName
|
|
962
|
-
), children: providers.map((provider, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
963
|
-
AuthOAuthButton,
|
|
850
|
+
return /* @__PURE__ */ jsx(
|
|
851
|
+
"div",
|
|
964
852
|
{
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
853
|
+
className: "if-oauthProviders if-internal-op3m8k",
|
|
854
|
+
style: {
|
|
855
|
+
display: "grid",
|
|
856
|
+
gridTemplateColumns: "repeat(6, 1fr)",
|
|
857
|
+
gap: "0.75rem",
|
|
858
|
+
width: "100%"
|
|
859
|
+
},
|
|
860
|
+
children: providers.map((provider, index) => /* @__PURE__ */ jsx(
|
|
861
|
+
AuthOAuthButton,
|
|
862
|
+
{
|
|
863
|
+
provider,
|
|
864
|
+
onClick,
|
|
865
|
+
disabled,
|
|
866
|
+
loading: loading === provider,
|
|
867
|
+
displayMode: getDisplayMode(),
|
|
868
|
+
style: getGridColumnStyle(index)
|
|
869
|
+
},
|
|
870
|
+
provider
|
|
871
|
+
))
|
|
872
|
+
}
|
|
873
|
+
);
|
|
975
874
|
}
|
|
976
875
|
function AuthVerificationCodeInput({
|
|
977
876
|
length = 6,
|
|
@@ -979,13 +878,16 @@ function AuthVerificationCodeInput({
|
|
|
979
878
|
email,
|
|
980
879
|
onChange,
|
|
981
880
|
disabled = false,
|
|
982
|
-
onComplete
|
|
983
|
-
appearance = {}
|
|
881
|
+
onComplete
|
|
984
882
|
}) {
|
|
985
|
-
const inputRefs =
|
|
883
|
+
const inputRefs = useRef([]);
|
|
986
884
|
const handleChange = (index, digit) => {
|
|
987
|
-
if (digit.length > 1)
|
|
988
|
-
|
|
885
|
+
if (digit.length > 1) {
|
|
886
|
+
return;
|
|
887
|
+
}
|
|
888
|
+
if (digit && !/^\d$/.test(digit)) {
|
|
889
|
+
return;
|
|
890
|
+
}
|
|
989
891
|
const newValue = value.split("");
|
|
990
892
|
newValue[index] = digit;
|
|
991
893
|
const updatedValue = newValue.join("");
|
|
@@ -1021,17 +923,14 @@ function AuthVerificationCodeInput({
|
|
|
1021
923
|
}
|
|
1022
924
|
}
|
|
1023
925
|
};
|
|
1024
|
-
return /* @__PURE__ */
|
|
1025
|
-
"
|
|
1026
|
-
appearance.containerClassName
|
|
1027
|
-
), children: [
|
|
1028
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-normal text-[#525252] leading-5", children: [
|
|
926
|
+
return /* @__PURE__ */ jsxs("div", { className: "if-verificationCode if-internal-vc8m4p", children: [
|
|
927
|
+
/* @__PURE__ */ jsxs("p", { className: "if-verificationCode-description", children: [
|
|
1029
928
|
"We've sent a verification code to your inbox at",
|
|
1030
929
|
" ",
|
|
1031
|
-
/* @__PURE__ */
|
|
930
|
+
/* @__PURE__ */ jsx("span", { className: "if-verificationCode-email", children: email }),
|
|
1032
931
|
". Enter it below to proceed."
|
|
1033
932
|
] }),
|
|
1034
|
-
/* @__PURE__ */
|
|
933
|
+
/* @__PURE__ */ jsx("div", { className: "if-verificationCode-inputContainer", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx(
|
|
1035
934
|
"input",
|
|
1036
935
|
{
|
|
1037
936
|
ref: (el) => {
|
|
@@ -1045,14 +944,7 @@ function AuthVerificationCodeInput({
|
|
|
1045
944
|
onKeyDown: (e) => handleKeyDown(index, e),
|
|
1046
945
|
onPaste: handlePaste,
|
|
1047
946
|
disabled,
|
|
1048
|
-
className:
|
|
1049
|
-
"w-full h-12 px-3 py-2 rounded border border-[#E0E0E0] bg-white",
|
|
1050
|
-
"text-center text-base font-semibold leading-5 text-black",
|
|
1051
|
-
"transition-all duration-200 outline-none",
|
|
1052
|
-
"focus:border-black focus:shadow-[0_0_0_2px_rgba(0,0,0,0.1)]",
|
|
1053
|
-
"disabled:bg-[#F5F5F5] disabled:cursor-not-allowed disabled:opacity-60",
|
|
1054
|
-
appearance.inputClassName
|
|
1055
|
-
),
|
|
947
|
+
className: "if-verificationCode-input",
|
|
1056
948
|
autoComplete: "one-time-code"
|
|
1057
949
|
},
|
|
1058
950
|
index
|
|
@@ -1066,15 +958,15 @@ function AuthEmailVerificationStep({
|
|
|
1066
958
|
onVerifyCode
|
|
1067
959
|
}) {
|
|
1068
960
|
const { baseUrl } = useInsforge();
|
|
1069
|
-
const [insforge] =
|
|
1070
|
-
const [resendDisabled, setResendDisabled] =
|
|
1071
|
-
const [resendCountdown, setResendCountdown] =
|
|
1072
|
-
const [isSending, setIsSending] =
|
|
1073
|
-
const [verificationCode, setVerificationCode] =
|
|
1074
|
-
const [isVerifying, setIsVerifying] =
|
|
1075
|
-
const [verificationError, setVerificationError] =
|
|
961
|
+
const [insforge] = useState(() => createClient({ baseUrl }));
|
|
962
|
+
const [resendDisabled, setResendDisabled] = useState(true);
|
|
963
|
+
const [resendCountdown, setResendCountdown] = useState(60);
|
|
964
|
+
const [isSending, setIsSending] = useState(false);
|
|
965
|
+
const [verificationCode, setVerificationCode] = useState("");
|
|
966
|
+
const [isVerifying, setIsVerifying] = useState(false);
|
|
967
|
+
const [verificationError, setVerificationError] = useState("");
|
|
1076
968
|
const defaultDescription = method === "code" ? "We've sent a 6-digit verification code to {email}. Please enter it below to verify your account. The code will expire in 10 minutes." : "We've sent a verification link to {email}. Please check your email and click the link to verify your account. The link will expire in 10 minutes.";
|
|
1077
|
-
|
|
969
|
+
useEffect(() => {
|
|
1078
970
|
const sendInitialEmail = async () => {
|
|
1079
971
|
try {
|
|
1080
972
|
await insforge.auth.sendVerificationEmail({ email });
|
|
@@ -1083,7 +975,7 @@ function AuthEmailVerificationStep({
|
|
|
1083
975
|
};
|
|
1084
976
|
void sendInitialEmail();
|
|
1085
977
|
}, [email, method, insforge.auth]);
|
|
1086
|
-
|
|
978
|
+
useEffect(() => {
|
|
1087
979
|
if (resendCountdown > 0) {
|
|
1088
980
|
const timer = setInterval(() => {
|
|
1089
981
|
setResendCountdown((prev) => {
|
|
@@ -1129,45 +1021,105 @@ function AuthEmailVerificationStep({
|
|
|
1129
1021
|
}
|
|
1130
1022
|
};
|
|
1131
1023
|
const displayDescription = description || defaultDescription;
|
|
1132
|
-
return /* @__PURE__ */
|
|
1133
|
-
/* @__PURE__ */
|
|
1024
|
+
return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem", alignItems: "stretch" }, children: [
|
|
1025
|
+
/* @__PURE__ */ jsx("p", { className: "if-verificationCode-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxs("span", { children: [
|
|
1134
1026
|
part,
|
|
1135
|
-
index < array.length - 1 && /* @__PURE__ */
|
|
1027
|
+
index < array.length - 1 && /* @__PURE__ */ jsx("span", { className: "if-verificationCode-email", children: email })
|
|
1136
1028
|
] }, index)) }),
|
|
1137
|
-
verificationError && /* @__PURE__ */
|
|
1138
|
-
/* @__PURE__ */
|
|
1139
|
-
|
|
1140
|
-
] }) }),
|
|
1141
|
-
method === "code" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-neutral-100 dark:bg-neutral-800 rounded-lg px-4 pt-4 pb-6 flex flex-col gap-4", children: [
|
|
1142
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1143
|
-
AuthVerificationCodeInput,
|
|
1029
|
+
verificationError && /* @__PURE__ */ jsx("div", { className: "if-errorBanner if-internal-eb2m7k", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1030
|
+
/* @__PURE__ */ jsx(
|
|
1031
|
+
"svg",
|
|
1144
1032
|
{
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1033
|
+
style: { width: "1.5rem", height: "1.5rem", flexShrink: 0, color: "#DC2626" },
|
|
1034
|
+
fill: "none",
|
|
1035
|
+
strokeLinecap: "round",
|
|
1036
|
+
strokeLinejoin: "round",
|
|
1037
|
+
strokeWidth: "2",
|
|
1038
|
+
viewBox: "0 0 24 24",
|
|
1039
|
+
stroke: "currentColor",
|
|
1040
|
+
children: /* @__PURE__ */ jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" })
|
|
1152
1041
|
}
|
|
1153
1042
|
),
|
|
1154
|
-
|
|
1155
|
-
] }),
|
|
1156
|
-
/* @__PURE__ */
|
|
1157
|
-
"
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1043
|
+
/* @__PURE__ */ jsx("p", { className: "if-errorBanner-text", children: verificationError })
|
|
1044
|
+
] }) }),
|
|
1045
|
+
method === "code" && /* @__PURE__ */ jsxs(
|
|
1046
|
+
"div",
|
|
1047
|
+
{
|
|
1048
|
+
style: {
|
|
1049
|
+
width: "100%",
|
|
1050
|
+
backgroundColor: "#F5F5F5",
|
|
1051
|
+
borderRadius: "0.5rem",
|
|
1052
|
+
padding: "1rem 1rem 1.5rem",
|
|
1053
|
+
display: "flex",
|
|
1054
|
+
flexDirection: "column",
|
|
1055
|
+
gap: "1rem"
|
|
1056
|
+
},
|
|
1057
|
+
children: [
|
|
1058
|
+
/* @__PURE__ */ jsx(
|
|
1059
|
+
AuthVerificationCodeInput,
|
|
1060
|
+
{
|
|
1061
|
+
value: verificationCode,
|
|
1062
|
+
onChange: setVerificationCode,
|
|
1063
|
+
email,
|
|
1064
|
+
disabled: isVerifying,
|
|
1065
|
+
onComplete: (code) => {
|
|
1066
|
+
void handleVerifyCode(code);
|
|
1067
|
+
}
|
|
1068
|
+
}
|
|
1069
|
+
),
|
|
1070
|
+
isVerifying && /* @__PURE__ */ jsx(
|
|
1071
|
+
"p",
|
|
1072
|
+
{
|
|
1073
|
+
style: {
|
|
1074
|
+
fontSize: "0.875rem",
|
|
1075
|
+
color: "#828282",
|
|
1076
|
+
textAlign: "center",
|
|
1077
|
+
fontFamily: "var(--if-font-family)"
|
|
1078
|
+
},
|
|
1079
|
+
children: "Verifying..."
|
|
1080
|
+
}
|
|
1081
|
+
)
|
|
1082
|
+
]
|
|
1083
|
+
}
|
|
1084
|
+
),
|
|
1085
|
+
/* @__PURE__ */ jsxs(
|
|
1086
|
+
"div",
|
|
1087
|
+
{
|
|
1088
|
+
style: {
|
|
1089
|
+
width: "100%",
|
|
1090
|
+
fontSize: "0.875rem",
|
|
1091
|
+
textAlign: "center",
|
|
1092
|
+
color: "#828282",
|
|
1093
|
+
fontFamily: "var(--if-font-family)"
|
|
1094
|
+
},
|
|
1095
|
+
children: [
|
|
1096
|
+
"Didn't receive the email?",
|
|
1097
|
+
" ",
|
|
1098
|
+
/* @__PURE__ */ jsx(
|
|
1099
|
+
"button",
|
|
1100
|
+
{
|
|
1101
|
+
onClick: () => {
|
|
1102
|
+
void handleResend();
|
|
1103
|
+
},
|
|
1104
|
+
disabled: resendDisabled || isSending,
|
|
1105
|
+
style: {
|
|
1106
|
+
color: "#000",
|
|
1107
|
+
fontWeight: 500,
|
|
1108
|
+
transition: "all 0.2s",
|
|
1109
|
+
cursor: resendDisabled || isSending ? "not-allowed" : "pointer",
|
|
1110
|
+
background: "none",
|
|
1111
|
+
border: "none",
|
|
1112
|
+
padding: 0,
|
|
1113
|
+
textDecoration: resendDisabled || isSending ? "none" : "underline",
|
|
1114
|
+
opacity: resendDisabled || isSending ? 0.5 : 1,
|
|
1115
|
+
fontFamily: "var(--if-font-family)"
|
|
1116
|
+
},
|
|
1117
|
+
children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
|
|
1118
|
+
}
|
|
1119
|
+
)
|
|
1120
|
+
]
|
|
1121
|
+
}
|
|
1122
|
+
)
|
|
1171
1123
|
] });
|
|
1172
1124
|
}
|
|
1173
1125
|
function SignInForm({
|
|
@@ -1182,7 +1134,6 @@ function SignInForm({
|
|
|
1182
1134
|
availableProviders = [],
|
|
1183
1135
|
onOAuthClick,
|
|
1184
1136
|
authConfig,
|
|
1185
|
-
appearance = {},
|
|
1186
1137
|
title = "Welcome Back",
|
|
1187
1138
|
subtitle = "Login to your account",
|
|
1188
1139
|
emailLabel = "Email",
|
|
@@ -1197,161 +1148,86 @@ function SignInForm({
|
|
|
1197
1148
|
signUpLinkText = "Sign Up Now",
|
|
1198
1149
|
signUpUrl = "/sign-up",
|
|
1199
1150
|
dividerText = "or",
|
|
1200
|
-
// Email verification step props
|
|
1201
1151
|
showVerificationStep = false,
|
|
1202
1152
|
onVerifyCode,
|
|
1203
1153
|
verificationDescription
|
|
1204
1154
|
}) {
|
|
1205
|
-
return /* @__PURE__ */
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
}
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1155
|
+
return /* @__PURE__ */ jsxs(AuthContainer, { children: [
|
|
1156
|
+
/* @__PURE__ */ jsx(
|
|
1157
|
+
AuthHeader,
|
|
1158
|
+
{
|
|
1159
|
+
title: showVerificationStep ? "Verify Your Email" : title,
|
|
1160
|
+
subtitle: showVerificationStep ? "" : subtitle
|
|
1161
|
+
}
|
|
1162
|
+
),
|
|
1163
|
+
/* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
|
|
1164
|
+
showVerificationStep ? /* @__PURE__ */ jsx(
|
|
1165
|
+
AuthEmailVerificationStep,
|
|
1166
|
+
{
|
|
1167
|
+
email,
|
|
1168
|
+
description: verificationDescription,
|
|
1169
|
+
onVerifyCode
|
|
1170
|
+
}
|
|
1171
|
+
) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
|
|
1172
|
+
/* @__PURE__ */ jsx(
|
|
1173
|
+
AuthFormField,
|
|
1174
|
+
{
|
|
1175
|
+
id: "email",
|
|
1176
|
+
type: "email",
|
|
1177
|
+
label: emailLabel,
|
|
1178
|
+
placeholder: emailPlaceholder,
|
|
1179
|
+
value: email,
|
|
1180
|
+
onChange: (e) => onEmailChange(e.target.value),
|
|
1181
|
+
required: true,
|
|
1182
|
+
autoComplete: "email"
|
|
1183
|
+
}
|
|
1184
|
+
),
|
|
1185
|
+
/* @__PURE__ */ jsx(
|
|
1186
|
+
AuthPasswordField,
|
|
1187
|
+
{
|
|
1188
|
+
id: "password",
|
|
1189
|
+
label: passwordLabel,
|
|
1190
|
+
placeholder: passwordPlaceholder,
|
|
1191
|
+
value: password,
|
|
1192
|
+
onChange: (e) => onPasswordChange(e.target.value),
|
|
1193
|
+
required: true,
|
|
1194
|
+
autoComplete: "current-password",
|
|
1195
|
+
authConfig,
|
|
1196
|
+
forgotPasswordLink: forgotPasswordUrl ? {
|
|
1197
|
+
href: forgotPasswordUrl,
|
|
1198
|
+
text: forgotPasswordText
|
|
1199
|
+
} : void 0
|
|
1200
|
+
}
|
|
1201
|
+
),
|
|
1202
|
+
/* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading || oauthLoading !== null, children: loading ? loadingButtonText : submitButtonText })
|
|
1203
|
+
] }),
|
|
1204
|
+
!showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1205
|
+
/* @__PURE__ */ jsx(AuthLink, { text: signUpText, linkText: signUpLinkText, href: signUpUrl }),
|
|
1206
|
+
availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1207
|
+
/* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
|
|
1208
|
+
/* @__PURE__ */ jsx(
|
|
1209
|
+
AuthOAuthProviders,
|
|
1241
1210
|
{
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1247
|
-
AuthFormField,
|
|
1248
|
-
{
|
|
1249
|
-
id: "email",
|
|
1250
|
-
type: "email",
|
|
1251
|
-
label: emailLabel,
|
|
1252
|
-
placeholder: emailPlaceholder,
|
|
1253
|
-
value: email,
|
|
1254
|
-
onChange: (e) => onEmailChange(e.target.value),
|
|
1255
|
-
required: true,
|
|
1256
|
-
autoComplete: "email",
|
|
1257
|
-
appearance: {
|
|
1258
|
-
containerClassName: appearance.form?.emailField?.container,
|
|
1259
|
-
labelClassName: appearance.form?.emailField?.label,
|
|
1260
|
-
inputClassName: appearance.form?.emailField?.input
|
|
1261
|
-
}
|
|
1262
|
-
}
|
|
1263
|
-
),
|
|
1264
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1265
|
-
AuthPasswordField,
|
|
1266
|
-
{
|
|
1267
|
-
id: "password",
|
|
1268
|
-
label: passwordLabel,
|
|
1269
|
-
placeholder: passwordPlaceholder,
|
|
1270
|
-
value: password,
|
|
1271
|
-
onChange: (e) => onPasswordChange(e.target.value),
|
|
1272
|
-
required: true,
|
|
1273
|
-
autoComplete: "current-password",
|
|
1274
|
-
authConfig,
|
|
1275
|
-
forgotPasswordLink: forgotPasswordUrl ? {
|
|
1276
|
-
href: forgotPasswordUrl,
|
|
1277
|
-
text: forgotPasswordText
|
|
1278
|
-
} : void 0,
|
|
1279
|
-
appearance: {
|
|
1280
|
-
containerClassName: appearance.form?.passwordField?.container,
|
|
1281
|
-
labelClassName: appearance.form?.passwordField?.label,
|
|
1282
|
-
inputClassName: appearance.form?.passwordField?.input
|
|
1283
|
-
}
|
|
1284
|
-
}
|
|
1285
|
-
),
|
|
1286
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1287
|
-
AuthSubmitButton,
|
|
1288
|
-
{
|
|
1289
|
-
isLoading: loading,
|
|
1290
|
-
disabled: loading || oauthLoading !== null,
|
|
1291
|
-
className: appearance.button,
|
|
1292
|
-
children: loading ? loadingButtonText : submitButtonText
|
|
1293
|
-
}
|
|
1294
|
-
)
|
|
1295
|
-
]
|
|
1211
|
+
providers: availableProviders,
|
|
1212
|
+
onClick: onOAuthClick,
|
|
1213
|
+
disabled: loading || oauthLoading !== null,
|
|
1214
|
+
loading: oauthLoading
|
|
1296
1215
|
}
|
|
1297
|
-
)
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
linkText: signUpLinkText,
|
|
1304
|
-
href: signUpUrl,
|
|
1305
|
-
appearance: {
|
|
1306
|
-
containerClassName: appearance.link?.container,
|
|
1307
|
-
linkClassName: appearance.link?.link
|
|
1308
|
-
}
|
|
1309
|
-
}
|
|
1310
|
-
),
|
|
1311
|
-
availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1312
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1313
|
-
AuthDivider,
|
|
1314
|
-
{
|
|
1315
|
-
text: dividerText,
|
|
1316
|
-
className: appearance.divider
|
|
1317
|
-
}
|
|
1318
|
-
),
|
|
1319
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1320
|
-
AuthOAuthProviders,
|
|
1321
|
-
{
|
|
1322
|
-
providers: availableProviders,
|
|
1323
|
-
onClick: onOAuthClick,
|
|
1324
|
-
disabled: loading || oauthLoading !== null,
|
|
1325
|
-
loading: oauthLoading,
|
|
1326
|
-
appearance: {
|
|
1327
|
-
containerClassName: appearance.oauth?.container,
|
|
1328
|
-
buttonClassName: appearance.oauth?.button
|
|
1329
|
-
}
|
|
1330
|
-
}
|
|
1331
|
-
)
|
|
1332
|
-
] })
|
|
1333
|
-
] })
|
|
1334
|
-
]
|
|
1335
|
-
}
|
|
1336
|
-
);
|
|
1337
|
-
}
|
|
1338
|
-
function SignIn({
|
|
1339
|
-
afterSignInUrl,
|
|
1340
|
-
onSuccess,
|
|
1341
|
-
onError,
|
|
1342
|
-
...uiProps
|
|
1343
|
-
}) {
|
|
1216
|
+
)
|
|
1217
|
+
] })
|
|
1218
|
+
] })
|
|
1219
|
+
] });
|
|
1220
|
+
}
|
|
1221
|
+
function SignIn({ afterSignInUrl, onSuccess, onError, ...uiProps }) {
|
|
1344
1222
|
const { signIn, baseUrl } = useInsforge();
|
|
1345
1223
|
const { authConfig } = usePublicAuthConfig();
|
|
1346
|
-
const [email, setEmail] =
|
|
1347
|
-
const [password, setPassword] =
|
|
1348
|
-
const [error, setError] =
|
|
1349
|
-
const [loading, setLoading] =
|
|
1350
|
-
const [step, setStep] =
|
|
1351
|
-
const [oauthLoading, setOauthLoading] =
|
|
1352
|
-
|
|
1353
|
-
);
|
|
1354
|
-
const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
|
|
1224
|
+
const [email, setEmail] = useState("");
|
|
1225
|
+
const [password, setPassword] = useState("");
|
|
1226
|
+
const [error, setError] = useState("");
|
|
1227
|
+
const [loading, setLoading] = useState(false);
|
|
1228
|
+
const [step, setStep] = useState("form");
|
|
1229
|
+
const [oauthLoading, setOauthLoading] = useState(null);
|
|
1230
|
+
const [insforge] = useState(() => createClient({ baseUrl }));
|
|
1355
1231
|
async function handleSubmit(e) {
|
|
1356
1232
|
e.preventDefault();
|
|
1357
1233
|
setLoading(true);
|
|
@@ -1368,12 +1244,16 @@ function SignIn({
|
|
|
1368
1244
|
}
|
|
1369
1245
|
const { user, accessToken, redirectTo } = result;
|
|
1370
1246
|
if (onSuccess) {
|
|
1371
|
-
if (user)
|
|
1247
|
+
if (user) {
|
|
1248
|
+
onSuccess(user, accessToken || "", redirectTo);
|
|
1249
|
+
}
|
|
1372
1250
|
}
|
|
1373
1251
|
} catch (err) {
|
|
1374
|
-
const errorMessage = err.message
|
|
1252
|
+
const errorMessage = err instanceof Error ? err.message : "Sign in failed";
|
|
1375
1253
|
setError(errorMessage);
|
|
1376
|
-
if (onError)
|
|
1254
|
+
if (onError) {
|
|
1255
|
+
onError(new Error(errorMessage));
|
|
1256
|
+
}
|
|
1377
1257
|
} finally {
|
|
1378
1258
|
setLoading(false);
|
|
1379
1259
|
}
|
|
@@ -1390,7 +1270,8 @@ function SignIn({
|
|
|
1390
1270
|
}
|
|
1391
1271
|
}
|
|
1392
1272
|
} catch (err) {
|
|
1393
|
-
|
|
1273
|
+
const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
|
|
1274
|
+
throw new Error(errorMessage);
|
|
1394
1275
|
}
|
|
1395
1276
|
}
|
|
1396
1277
|
async function handleOAuth(provider) {
|
|
@@ -1402,16 +1283,18 @@ function SignIn({
|
|
|
1402
1283
|
redirectTo: afterSignInUrl
|
|
1403
1284
|
});
|
|
1404
1285
|
} catch (err) {
|
|
1405
|
-
const errorMessage = err.message
|
|
1286
|
+
const errorMessage = err instanceof Error ? err.message : `${provider} sign in failed`;
|
|
1406
1287
|
setError(errorMessage);
|
|
1407
|
-
if (onError)
|
|
1288
|
+
if (onError) {
|
|
1289
|
+
onError(new Error(errorMessage));
|
|
1290
|
+
}
|
|
1408
1291
|
setOauthLoading(null);
|
|
1409
1292
|
}
|
|
1410
1293
|
}
|
|
1411
1294
|
if (!authConfig) {
|
|
1412
1295
|
return null;
|
|
1413
1296
|
}
|
|
1414
|
-
return /* @__PURE__ */
|
|
1297
|
+
return /* @__PURE__ */ jsx(
|
|
1415
1298
|
SignInForm,
|
|
1416
1299
|
{
|
|
1417
1300
|
email,
|
|
@@ -1443,7 +1326,6 @@ function SignUpForm({
|
|
|
1443
1326
|
availableProviders = [],
|
|
1444
1327
|
onOAuthClick,
|
|
1445
1328
|
authConfig,
|
|
1446
|
-
appearance = {},
|
|
1447
1329
|
title = "Get Started",
|
|
1448
1330
|
subtitle = "Create your account",
|
|
1449
1331
|
emailLabel = "Email",
|
|
@@ -1456,143 +1338,75 @@ function SignUpForm({
|
|
|
1456
1338
|
signInLinkText = "Login Now",
|
|
1457
1339
|
signInUrl = "/sign-in",
|
|
1458
1340
|
dividerText = "or",
|
|
1459
|
-
// Email verification step props
|
|
1460
1341
|
showVerificationStep = false,
|
|
1461
1342
|
onVerifyCode,
|
|
1462
1343
|
verificationDescription
|
|
1463
1344
|
}) {
|
|
1464
|
-
return /* @__PURE__ */
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
}
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1345
|
+
return /* @__PURE__ */ jsxs(AuthContainer, { children: [
|
|
1346
|
+
/* @__PURE__ */ jsx(
|
|
1347
|
+
AuthHeader,
|
|
1348
|
+
{
|
|
1349
|
+
title: showVerificationStep ? "Verify Your Email" : title,
|
|
1350
|
+
subtitle: showVerificationStep ? "" : subtitle
|
|
1351
|
+
}
|
|
1352
|
+
),
|
|
1353
|
+
/* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
|
|
1354
|
+
showVerificationStep ? /* @__PURE__ */ jsx(
|
|
1355
|
+
AuthEmailVerificationStep,
|
|
1356
|
+
{
|
|
1357
|
+
email,
|
|
1358
|
+
description: verificationDescription,
|
|
1359
|
+
onVerifyCode
|
|
1360
|
+
}
|
|
1361
|
+
) : /* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
|
|
1362
|
+
/* @__PURE__ */ jsx(
|
|
1363
|
+
AuthFormField,
|
|
1364
|
+
{
|
|
1365
|
+
id: "email",
|
|
1366
|
+
type: "email",
|
|
1367
|
+
label: emailLabel,
|
|
1368
|
+
placeholder: emailPlaceholder,
|
|
1369
|
+
value: email,
|
|
1370
|
+
onChange: (e) => onEmailChange(e.target.value),
|
|
1371
|
+
required: true,
|
|
1372
|
+
autoComplete: "email"
|
|
1373
|
+
}
|
|
1374
|
+
),
|
|
1375
|
+
/* @__PURE__ */ jsx(
|
|
1376
|
+
AuthPasswordField,
|
|
1377
|
+
{
|
|
1378
|
+
id: "password",
|
|
1379
|
+
label: passwordLabel,
|
|
1380
|
+
placeholder: passwordPlaceholder,
|
|
1381
|
+
value: password,
|
|
1382
|
+
onChange: (e) => onPasswordChange(e.target.value),
|
|
1383
|
+
required: true,
|
|
1384
|
+
minLength: authConfig.passwordMinLength,
|
|
1385
|
+
autoComplete: "new-password",
|
|
1386
|
+
showStrengthIndicator: true,
|
|
1387
|
+
authConfig
|
|
1388
|
+
}
|
|
1389
|
+
),
|
|
1390
|
+
/* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading || oauthLoading !== null, children: loading ? loadingButtonText : submitButtonText })
|
|
1391
|
+
] }),
|
|
1392
|
+
!showVerificationStep && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1393
|
+
/* @__PURE__ */ jsx(AuthLink, { text: signInText, linkText: signInLinkText, href: signInUrl }),
|
|
1394
|
+
availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1395
|
+
/* @__PURE__ */ jsx(AuthDivider, { text: dividerText }),
|
|
1396
|
+
/* @__PURE__ */ jsx(
|
|
1397
|
+
AuthOAuthProviders,
|
|
1500
1398
|
{
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1506
|
-
AuthFormField,
|
|
1507
|
-
{
|
|
1508
|
-
id: "email",
|
|
1509
|
-
type: "email",
|
|
1510
|
-
label: emailLabel,
|
|
1511
|
-
placeholder: emailPlaceholder,
|
|
1512
|
-
value: email,
|
|
1513
|
-
onChange: (e) => onEmailChange(e.target.value),
|
|
1514
|
-
required: true,
|
|
1515
|
-
autoComplete: "email",
|
|
1516
|
-
appearance: {
|
|
1517
|
-
containerClassName: appearance.form?.emailField?.container,
|
|
1518
|
-
labelClassName: appearance.form?.emailField?.label,
|
|
1519
|
-
inputClassName: appearance.form?.emailField?.input
|
|
1520
|
-
}
|
|
1521
|
-
}
|
|
1522
|
-
),
|
|
1523
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1524
|
-
AuthPasswordField,
|
|
1525
|
-
{
|
|
1526
|
-
id: "password",
|
|
1527
|
-
label: passwordLabel,
|
|
1528
|
-
placeholder: passwordPlaceholder,
|
|
1529
|
-
value: password,
|
|
1530
|
-
onChange: (e) => onPasswordChange(e.target.value),
|
|
1531
|
-
required: true,
|
|
1532
|
-
minLength: authConfig.passwordMinLength,
|
|
1533
|
-
autoComplete: "new-password",
|
|
1534
|
-
showStrengthIndicator: true,
|
|
1535
|
-
authConfig,
|
|
1536
|
-
appearance: {
|
|
1537
|
-
containerClassName: appearance.form?.passwordField?.container,
|
|
1538
|
-
labelClassName: appearance.form?.passwordField?.label,
|
|
1539
|
-
inputClassName: appearance.form?.passwordField?.input
|
|
1540
|
-
}
|
|
1541
|
-
}
|
|
1542
|
-
),
|
|
1543
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1544
|
-
AuthSubmitButton,
|
|
1545
|
-
{
|
|
1546
|
-
isLoading: loading,
|
|
1547
|
-
disabled: loading || oauthLoading !== null,
|
|
1548
|
-
className: appearance.button,
|
|
1549
|
-
children: loading ? loadingButtonText : submitButtonText
|
|
1550
|
-
}
|
|
1551
|
-
)
|
|
1552
|
-
]
|
|
1399
|
+
providers: availableProviders,
|
|
1400
|
+
onClick: onOAuthClick,
|
|
1401
|
+
disabled: loading || oauthLoading !== null,
|
|
1402
|
+
loading: oauthLoading
|
|
1553
1403
|
}
|
|
1554
|
-
)
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
{
|
|
1559
|
-
text: signInText,
|
|
1560
|
-
linkText: signInLinkText,
|
|
1561
|
-
href: signInUrl,
|
|
1562
|
-
appearance: {
|
|
1563
|
-
containerClassName: appearance.link?.container,
|
|
1564
|
-
linkClassName: appearance.link?.link
|
|
1565
|
-
}
|
|
1566
|
-
}
|
|
1567
|
-
),
|
|
1568
|
-
availableProviders.length > 0 && onOAuthClick && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1569
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1570
|
-
AuthDivider,
|
|
1571
|
-
{
|
|
1572
|
-
text: dividerText,
|
|
1573
|
-
className: appearance.divider
|
|
1574
|
-
}
|
|
1575
|
-
),
|
|
1576
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1577
|
-
AuthOAuthProviders,
|
|
1578
|
-
{
|
|
1579
|
-
providers: availableProviders,
|
|
1580
|
-
onClick: onOAuthClick,
|
|
1581
|
-
disabled: loading || oauthLoading !== null,
|
|
1582
|
-
loading: oauthLoading,
|
|
1583
|
-
appearance: {
|
|
1584
|
-
containerClassName: appearance.oauth?.container,
|
|
1585
|
-
buttonClassName: appearance.oauth?.button
|
|
1586
|
-
}
|
|
1587
|
-
}
|
|
1588
|
-
)
|
|
1589
|
-
] })
|
|
1590
|
-
] })
|
|
1591
|
-
]
|
|
1592
|
-
}
|
|
1593
|
-
);
|
|
1404
|
+
)
|
|
1405
|
+
] })
|
|
1406
|
+
] })
|
|
1407
|
+
] });
|
|
1594
1408
|
}
|
|
1595
|
-
var emailSchema =
|
|
1409
|
+
var emailSchema = z.string().min(1, "Email is required").email("Invalid email address");
|
|
1596
1410
|
function createPasswordSchema(options) {
|
|
1597
1411
|
const {
|
|
1598
1412
|
minLength = 6,
|
|
@@ -1601,7 +1415,7 @@ function createPasswordSchema(options) {
|
|
|
1601
1415
|
requireNumber = false,
|
|
1602
1416
|
requireSpecialChar = false
|
|
1603
1417
|
} = options || {};
|
|
1604
|
-
let schema =
|
|
1418
|
+
let schema = z.string().min(minLength, `Password must be at least ${minLength} characters`);
|
|
1605
1419
|
if (requireUppercase) {
|
|
1606
1420
|
schema = schema.regex(/[A-Z]/, "Password must contain at least one uppercase letter");
|
|
1607
1421
|
}
|
|
@@ -1663,23 +1477,16 @@ function checkPasswordStrength(password) {
|
|
|
1663
1477
|
}
|
|
1664
1478
|
return { score, feedback };
|
|
1665
1479
|
}
|
|
1666
|
-
function SignUp({
|
|
1667
|
-
afterSignUpUrl,
|
|
1668
|
-
onSuccess,
|
|
1669
|
-
onError,
|
|
1670
|
-
...uiProps
|
|
1671
|
-
}) {
|
|
1480
|
+
function SignUp({ afterSignUpUrl, onSuccess, onError, ...uiProps }) {
|
|
1672
1481
|
const { signUp, baseUrl } = useInsforge();
|
|
1673
1482
|
const { authConfig } = usePublicAuthConfig();
|
|
1674
|
-
const [email, setEmail] =
|
|
1675
|
-
const [password, setPassword] =
|
|
1676
|
-
const [error, setError] =
|
|
1677
|
-
const [loading, setLoading] =
|
|
1678
|
-
const [step, setStep] =
|
|
1679
|
-
const [oauthLoading, setOauthLoading] =
|
|
1680
|
-
|
|
1681
|
-
);
|
|
1682
|
-
const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
|
|
1483
|
+
const [email, setEmail] = useState("");
|
|
1484
|
+
const [password, setPassword] = useState("");
|
|
1485
|
+
const [error, setError] = useState("");
|
|
1486
|
+
const [loading, setLoading] = useState(false);
|
|
1487
|
+
const [step, setStep] = useState("form");
|
|
1488
|
+
const [oauthLoading, setOauthLoading] = useState(null);
|
|
1489
|
+
const [insforge] = useState(() => createClient({ baseUrl }));
|
|
1683
1490
|
async function handleSubmit(e) {
|
|
1684
1491
|
e.preventDefault();
|
|
1685
1492
|
setLoading(true);
|
|
@@ -1715,7 +1522,7 @@ function SignUp({
|
|
|
1715
1522
|
if ("error" in result) {
|
|
1716
1523
|
throw new Error(result.error);
|
|
1717
1524
|
}
|
|
1718
|
-
if (result.
|
|
1525
|
+
if (result.requireEmailVerification && !result.accessToken) {
|
|
1719
1526
|
setStep("awaiting-verification");
|
|
1720
1527
|
setLoading(false);
|
|
1721
1528
|
return;
|
|
@@ -1726,9 +1533,11 @@ function SignUp({
|
|
|
1726
1533
|
}
|
|
1727
1534
|
}
|
|
1728
1535
|
} catch (err) {
|
|
1729
|
-
const errorMessage = err.message
|
|
1536
|
+
const errorMessage = err instanceof Error ? err.message : "Sign up failed";
|
|
1730
1537
|
setError(errorMessage);
|
|
1731
|
-
if (onError)
|
|
1538
|
+
if (onError) {
|
|
1539
|
+
onError(new Error(errorMessage));
|
|
1540
|
+
}
|
|
1732
1541
|
} finally {
|
|
1733
1542
|
setLoading(false);
|
|
1734
1543
|
}
|
|
@@ -1745,7 +1554,8 @@ function SignUp({
|
|
|
1745
1554
|
}
|
|
1746
1555
|
}
|
|
1747
1556
|
} catch (err) {
|
|
1748
|
-
|
|
1557
|
+
const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
|
|
1558
|
+
throw new Error(errorMessage);
|
|
1749
1559
|
}
|
|
1750
1560
|
}
|
|
1751
1561
|
async function handleOAuth(provider) {
|
|
@@ -1757,16 +1567,18 @@ function SignUp({
|
|
|
1757
1567
|
redirectTo: afterSignUpUrl
|
|
1758
1568
|
});
|
|
1759
1569
|
} catch (err) {
|
|
1760
|
-
const errorMessage = err.message
|
|
1570
|
+
const errorMessage = err instanceof Error ? err.message : `${provider} sign up failed`;
|
|
1761
1571
|
setError(errorMessage);
|
|
1762
|
-
if (onError)
|
|
1572
|
+
if (onError) {
|
|
1573
|
+
onError(new Error(errorMessage));
|
|
1574
|
+
}
|
|
1763
1575
|
setOauthLoading(null);
|
|
1764
1576
|
}
|
|
1765
1577
|
}
|
|
1766
1578
|
if (!authConfig) {
|
|
1767
1579
|
return null;
|
|
1768
1580
|
}
|
|
1769
|
-
return /* @__PURE__ */
|
|
1581
|
+
return /* @__PURE__ */ jsx(
|
|
1770
1582
|
SignUpForm,
|
|
1771
1583
|
{
|
|
1772
1584
|
email,
|
|
@@ -1793,7 +1605,6 @@ function ForgotPasswordForm({
|
|
|
1793
1605
|
error,
|
|
1794
1606
|
loading = false,
|
|
1795
1607
|
success = false,
|
|
1796
|
-
appearance = {},
|
|
1797
1608
|
title = "Forgot Password?",
|
|
1798
1609
|
subtitle = "Enter your email address and we'll send you a code to reset your password.",
|
|
1799
1610
|
emailLabel = "Email",
|
|
@@ -1806,101 +1617,66 @@ function ForgotPasswordForm({
|
|
|
1806
1617
|
successMessage
|
|
1807
1618
|
}) {
|
|
1808
1619
|
if (success) {
|
|
1809
|
-
return /* @__PURE__ */
|
|
1810
|
-
|
|
1620
|
+
return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
|
|
1621
|
+
"div",
|
|
1811
1622
|
{
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
appearance: {
|
|
1829
|
-
containerClassName: appearance.container,
|
|
1830
|
-
cardClassName: appearance.card
|
|
1831
|
-
},
|
|
1832
|
-
children: [
|
|
1833
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1834
|
-
AuthHeader,
|
|
1835
|
-
{
|
|
1836
|
-
title,
|
|
1837
|
-
subtitle,
|
|
1838
|
-
appearance: {
|
|
1839
|
-
containerClassName: appearance.header?.container,
|
|
1840
|
-
titleClassName: appearance.header?.title,
|
|
1841
|
-
subtitleClassName: appearance.header?.subtitle
|
|
1842
|
-
}
|
|
1843
|
-
}
|
|
1844
|
-
),
|
|
1845
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1846
|
-
AuthErrorBanner,
|
|
1847
|
-
{
|
|
1848
|
-
error: error || "",
|
|
1849
|
-
className: appearance.errorBanner
|
|
1850
|
-
}
|
|
1851
|
-
),
|
|
1852
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1853
|
-
"form",
|
|
1854
|
-
{
|
|
1855
|
-
onSubmit,
|
|
1856
|
-
noValidate: true,
|
|
1857
|
-
className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
|
|
1858
|
-
children: [
|
|
1859
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1860
|
-
AuthFormField,
|
|
1861
|
-
{
|
|
1862
|
-
id: "email",
|
|
1863
|
-
type: "email",
|
|
1864
|
-
label: emailLabel,
|
|
1865
|
-
placeholder: emailPlaceholder,
|
|
1866
|
-
value: email,
|
|
1867
|
-
onChange: (e) => onEmailChange(e.target.value),
|
|
1868
|
-
required: true,
|
|
1869
|
-
autoComplete: "email",
|
|
1870
|
-
appearance: {
|
|
1871
|
-
containerClassName: appearance.form?.emailField?.container,
|
|
1872
|
-
labelClassName: appearance.form?.emailField?.label,
|
|
1873
|
-
inputClassName: appearance.form?.emailField?.input
|
|
1874
|
-
}
|
|
1875
|
-
}
|
|
1876
|
-
),
|
|
1877
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1878
|
-
AuthSubmitButton,
|
|
1623
|
+
style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
|
|
1624
|
+
children: [
|
|
1625
|
+
/* @__PURE__ */ jsx(
|
|
1626
|
+
"div",
|
|
1627
|
+
{
|
|
1628
|
+
style: {
|
|
1629
|
+
width: "4rem",
|
|
1630
|
+
height: "4rem",
|
|
1631
|
+
borderRadius: "50%",
|
|
1632
|
+
backgroundColor: "#D1FAE5",
|
|
1633
|
+
display: "flex",
|
|
1634
|
+
alignItems: "center",
|
|
1635
|
+
justifyContent: "center"
|
|
1636
|
+
},
|
|
1637
|
+
children: /* @__PURE__ */ jsx(
|
|
1638
|
+
"svg",
|
|
1879
1639
|
{
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1640
|
+
style: { width: "2rem", height: "2rem", color: "#059669" },
|
|
1641
|
+
fill: "none",
|
|
1642
|
+
strokeLinecap: "round",
|
|
1643
|
+
strokeLinejoin: "round",
|
|
1644
|
+
strokeWidth: "2",
|
|
1645
|
+
viewBox: "0 0 24 24",
|
|
1646
|
+
stroke: "currentColor",
|
|
1647
|
+
children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
|
|
1884
1648
|
}
|
|
1885
1649
|
)
|
|
1886
|
-
]
|
|
1887
|
-
}
|
|
1888
|
-
),
|
|
1889
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1890
|
-
AuthLink,
|
|
1891
|
-
{
|
|
1892
|
-
text: backToSignInText,
|
|
1893
|
-
linkText: "Back to Sign In",
|
|
1894
|
-
href: backToSignInUrl,
|
|
1895
|
-
appearance: {
|
|
1896
|
-
containerClassName: appearance.link?.container,
|
|
1897
|
-
linkClassName: appearance.link?.link
|
|
1898
1650
|
}
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1651
|
+
),
|
|
1652
|
+
/* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
|
|
1653
|
+
/* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage || `We've sent a password reset link to ${email}. Please check your email and follow the instructions.` }),
|
|
1654
|
+
/* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "if-authLink-link", style: { marginTop: "1rem" }, children: "Back to Sign In" })
|
|
1655
|
+
]
|
|
1656
|
+
}
|
|
1657
|
+
) });
|
|
1658
|
+
}
|
|
1659
|
+
return /* @__PURE__ */ jsxs(AuthContainer, { children: [
|
|
1660
|
+
/* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
|
|
1661
|
+
/* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
|
|
1662
|
+
/* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
|
|
1663
|
+
/* @__PURE__ */ jsx(
|
|
1664
|
+
AuthFormField,
|
|
1665
|
+
{
|
|
1666
|
+
id: "email",
|
|
1667
|
+
type: "email",
|
|
1668
|
+
label: emailLabel,
|
|
1669
|
+
placeholder: emailPlaceholder,
|
|
1670
|
+
value: email,
|
|
1671
|
+
onChange: (e) => onEmailChange(e.target.value),
|
|
1672
|
+
required: true,
|
|
1673
|
+
autoComplete: "email"
|
|
1674
|
+
}
|
|
1675
|
+
),
|
|
1676
|
+
/* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
|
|
1677
|
+
] }),
|
|
1678
|
+
/* @__PURE__ */ jsx(AuthLink, { text: backToSignInText, linkText: "Back to Sign In", href: backToSignInUrl })
|
|
1679
|
+
] });
|
|
1904
1680
|
}
|
|
1905
1681
|
function ResetPasswordForm({
|
|
1906
1682
|
newPassword,
|
|
@@ -1912,7 +1688,6 @@ function ResetPasswordForm({
|
|
|
1912
1688
|
loading = false,
|
|
1913
1689
|
success = false,
|
|
1914
1690
|
authConfig,
|
|
1915
|
-
appearance = {},
|
|
1916
1691
|
title = "Reset Password",
|
|
1917
1692
|
subtitle = "Enter your new password below.",
|
|
1918
1693
|
newPasswordLabel = "New Password",
|
|
@@ -1927,120 +1702,80 @@ function ResetPasswordForm({
|
|
|
1927
1702
|
successMessage = "Your password has been successfully reset. You can now sign in with your new password."
|
|
1928
1703
|
}) {
|
|
1929
1704
|
if (success) {
|
|
1930
|
-
return /* @__PURE__ */
|
|
1931
|
-
|
|
1705
|
+
return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
|
|
1706
|
+
"div",
|
|
1932
1707
|
{
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
appearance: {
|
|
1950
|
-
containerClassName: appearance.container,
|
|
1951
|
-
cardClassName: appearance.card
|
|
1952
|
-
},
|
|
1953
|
-
children: [
|
|
1954
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1955
|
-
AuthHeader,
|
|
1956
|
-
{
|
|
1957
|
-
title,
|
|
1958
|
-
subtitle,
|
|
1959
|
-
appearance: {
|
|
1960
|
-
containerClassName: appearance.header?.container,
|
|
1961
|
-
titleClassName: appearance.header?.title,
|
|
1962
|
-
subtitleClassName: appearance.header?.subtitle
|
|
1963
|
-
}
|
|
1964
|
-
}
|
|
1965
|
-
),
|
|
1966
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1967
|
-
AuthErrorBanner,
|
|
1968
|
-
{
|
|
1969
|
-
error: error || "",
|
|
1970
|
-
className: appearance.errorBanner
|
|
1971
|
-
}
|
|
1972
|
-
),
|
|
1973
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1974
|
-
"form",
|
|
1975
|
-
{
|
|
1976
|
-
onSubmit,
|
|
1977
|
-
noValidate: true,
|
|
1978
|
-
className: appearance.form?.container || "flex flex-col items-stretch justify-center gap-6",
|
|
1979
|
-
children: [
|
|
1980
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1981
|
-
AuthPasswordField,
|
|
1982
|
-
{
|
|
1983
|
-
id: "newPassword",
|
|
1984
|
-
label: newPasswordLabel,
|
|
1985
|
-
placeholder: newPasswordPlaceholder,
|
|
1986
|
-
value: newPassword,
|
|
1987
|
-
onChange: (e) => onNewPasswordChange(e.target.value),
|
|
1988
|
-
required: true,
|
|
1989
|
-
autoComplete: "new-password",
|
|
1990
|
-
showStrengthIndicator: true,
|
|
1991
|
-
authConfig,
|
|
1992
|
-
appearance: {
|
|
1993
|
-
containerClassName: appearance.form?.newPasswordField?.container,
|
|
1994
|
-
labelClassName: appearance.form?.newPasswordField?.label,
|
|
1995
|
-
inputClassName: appearance.form?.newPasswordField?.input
|
|
1996
|
-
}
|
|
1997
|
-
}
|
|
1998
|
-
),
|
|
1999
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2000
|
-
AuthPasswordField,
|
|
2001
|
-
{
|
|
2002
|
-
id: "confirmPassword",
|
|
2003
|
-
label: confirmPasswordLabel,
|
|
2004
|
-
placeholder: confirmPasswordPlaceholder,
|
|
2005
|
-
value: confirmPassword,
|
|
2006
|
-
onChange: (e) => onConfirmPasswordChange(e.target.value),
|
|
2007
|
-
required: true,
|
|
2008
|
-
autoComplete: "new-password",
|
|
2009
|
-
authConfig,
|
|
2010
|
-
appearance: {
|
|
2011
|
-
containerClassName: appearance.form?.confirmPasswordField?.container,
|
|
2012
|
-
labelClassName: appearance.form?.confirmPasswordField?.label,
|
|
2013
|
-
inputClassName: appearance.form?.confirmPasswordField?.input
|
|
2014
|
-
}
|
|
2015
|
-
}
|
|
2016
|
-
),
|
|
2017
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2018
|
-
AuthSubmitButton,
|
|
1708
|
+
style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
|
|
1709
|
+
children: [
|
|
1710
|
+
/* @__PURE__ */ jsx(
|
|
1711
|
+
"div",
|
|
1712
|
+
{
|
|
1713
|
+
style: {
|
|
1714
|
+
width: "4rem",
|
|
1715
|
+
height: "4rem",
|
|
1716
|
+
borderRadius: "50%",
|
|
1717
|
+
backgroundColor: "#D1FAE5",
|
|
1718
|
+
display: "flex",
|
|
1719
|
+
alignItems: "center",
|
|
1720
|
+
justifyContent: "center"
|
|
1721
|
+
},
|
|
1722
|
+
children: /* @__PURE__ */ jsx(
|
|
1723
|
+
"svg",
|
|
2019
1724
|
{
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
1725
|
+
style: { width: "2rem", height: "2rem", color: "#059669" },
|
|
1726
|
+
fill: "none",
|
|
1727
|
+
strokeLinecap: "round",
|
|
1728
|
+
strokeLinejoin: "round",
|
|
1729
|
+
strokeWidth: "2",
|
|
1730
|
+
viewBox: "0 0 24 24",
|
|
1731
|
+
stroke: "currentColor",
|
|
1732
|
+
children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
|
|
2024
1733
|
}
|
|
2025
1734
|
)
|
|
2026
|
-
]
|
|
2027
|
-
}
|
|
2028
|
-
),
|
|
2029
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2030
|
-
AuthLink,
|
|
2031
|
-
{
|
|
2032
|
-
text: backToSignInText,
|
|
2033
|
-
linkText: "Back to Sign In",
|
|
2034
|
-
href: backToSignInUrl,
|
|
2035
|
-
appearance: {
|
|
2036
|
-
containerClassName: appearance.link?.container,
|
|
2037
|
-
linkClassName: appearance.link?.link
|
|
2038
1735
|
}
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
1736
|
+
),
|
|
1737
|
+
/* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
|
|
1738
|
+
/* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage }),
|
|
1739
|
+
/* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "if-authLink-link", style: { marginTop: "1rem" }, children: "Back to Sign In" })
|
|
1740
|
+
]
|
|
1741
|
+
}
|
|
1742
|
+
) });
|
|
1743
|
+
}
|
|
1744
|
+
return /* @__PURE__ */ jsxs(AuthContainer, { children: [
|
|
1745
|
+
/* @__PURE__ */ jsx(AuthHeader, { title, subtitle }),
|
|
1746
|
+
/* @__PURE__ */ jsx(AuthErrorBanner, { error: error || "" }),
|
|
1747
|
+
/* @__PURE__ */ jsxs("form", { onSubmit, noValidate: true, className: "if-form if-internal-fm9k2p", children: [
|
|
1748
|
+
/* @__PURE__ */ jsx(
|
|
1749
|
+
AuthPasswordField,
|
|
1750
|
+
{
|
|
1751
|
+
id: "newPassword",
|
|
1752
|
+
label: newPasswordLabel,
|
|
1753
|
+
placeholder: newPasswordPlaceholder,
|
|
1754
|
+
value: newPassword,
|
|
1755
|
+
onChange: (e) => onNewPasswordChange(e.target.value),
|
|
1756
|
+
required: true,
|
|
1757
|
+
autoComplete: "new-password",
|
|
1758
|
+
showStrengthIndicator: true,
|
|
1759
|
+
authConfig
|
|
1760
|
+
}
|
|
1761
|
+
),
|
|
1762
|
+
/* @__PURE__ */ jsx(
|
|
1763
|
+
AuthPasswordField,
|
|
1764
|
+
{
|
|
1765
|
+
id: "confirmPassword",
|
|
1766
|
+
label: confirmPasswordLabel,
|
|
1767
|
+
placeholder: confirmPasswordPlaceholder,
|
|
1768
|
+
value: confirmPassword,
|
|
1769
|
+
onChange: (e) => onConfirmPasswordChange(e.target.value),
|
|
1770
|
+
required: true,
|
|
1771
|
+
autoComplete: "new-password",
|
|
1772
|
+
authConfig
|
|
1773
|
+
}
|
|
1774
|
+
),
|
|
1775
|
+
/* @__PURE__ */ jsx(AuthSubmitButton, { isLoading: loading, disabled: loading, children: loading ? loadingButtonText : submitButtonText })
|
|
1776
|
+
] }),
|
|
1777
|
+
/* @__PURE__ */ jsx(AuthLink, { text: backToSignInText, linkText: "Back to Sign In", href: backToSignInUrl })
|
|
1778
|
+
] });
|
|
2044
1779
|
}
|
|
2045
1780
|
function ResetPassword({
|
|
2046
1781
|
token,
|
|
@@ -2051,11 +1786,11 @@ function ResetPassword({
|
|
|
2051
1786
|
}) {
|
|
2052
1787
|
const { resetPassword } = useInsforge();
|
|
2053
1788
|
const { authConfig } = usePublicAuthConfig();
|
|
2054
|
-
const [newPassword, setNewPassword] =
|
|
2055
|
-
const [confirmPassword, setConfirmPassword] =
|
|
2056
|
-
const [error, setError] =
|
|
2057
|
-
const [loading, setLoading] =
|
|
2058
|
-
const [success, setSuccess] =
|
|
1789
|
+
const [newPassword, setNewPassword] = useState("");
|
|
1790
|
+
const [confirmPassword, setConfirmPassword] = useState("");
|
|
1791
|
+
const [error, setError] = useState("");
|
|
1792
|
+
const [loading, setLoading] = useState(false);
|
|
1793
|
+
const [success, setSuccess] = useState(false);
|
|
2059
1794
|
async function handleSubmit(e) {
|
|
2060
1795
|
e.preventDefault();
|
|
2061
1796
|
setLoading(true);
|
|
@@ -2104,7 +1839,7 @@ function ResetPassword({
|
|
|
2104
1839
|
}
|
|
2105
1840
|
}
|
|
2106
1841
|
} catch (err) {
|
|
2107
|
-
const errorMessage = err.message
|
|
1842
|
+
const errorMessage = err instanceof Error ? err.message : "Failed to reset password";
|
|
2108
1843
|
setError(errorMessage);
|
|
2109
1844
|
if (onError) {
|
|
2110
1845
|
onError(new Error(errorMessage));
|
|
@@ -2116,7 +1851,7 @@ function ResetPassword({
|
|
|
2116
1851
|
if (!authConfig) {
|
|
2117
1852
|
return null;
|
|
2118
1853
|
}
|
|
2119
|
-
return /* @__PURE__ */
|
|
1854
|
+
return /* @__PURE__ */ jsx(
|
|
2120
1855
|
ResetPasswordForm,
|
|
2121
1856
|
{
|
|
2122
1857
|
newPassword,
|
|
@@ -2141,19 +1876,19 @@ function ForgotPassword({
|
|
|
2141
1876
|
}) {
|
|
2142
1877
|
const { sendResetPasswordEmail, baseUrl } = useInsforge();
|
|
2143
1878
|
const { authConfig } = usePublicAuthConfig();
|
|
2144
|
-
const [insforge] =
|
|
2145
|
-
const [step, setStep] =
|
|
2146
|
-
const [email, setEmail] =
|
|
2147
|
-
const [verificationCode, setVerificationCode] =
|
|
2148
|
-
const [resetToken, setResetToken] =
|
|
2149
|
-
const [error, setError] =
|
|
2150
|
-
const [loading, setLoading] =
|
|
2151
|
-
const [success, setSuccess] =
|
|
2152
|
-
const [resendDisabled, setResendDisabled] =
|
|
2153
|
-
const [resendCountdown, setResendCountdown] =
|
|
2154
|
-
const [isSendingCode, setIsSendingCode] =
|
|
2155
|
-
const [isVerifyingCode, setIsVerifyingCode] =
|
|
2156
|
-
|
|
1879
|
+
const [insforge] = useState(() => createClient({ baseUrl }));
|
|
1880
|
+
const [step, setStep] = useState("email");
|
|
1881
|
+
const [email, setEmail] = useState("");
|
|
1882
|
+
const [verificationCode, setVerificationCode] = useState("");
|
|
1883
|
+
const [resetToken, setResetToken] = useState("");
|
|
1884
|
+
const [error, setError] = useState("");
|
|
1885
|
+
const [loading, setLoading] = useState(false);
|
|
1886
|
+
const [success, setSuccess] = useState(false);
|
|
1887
|
+
const [resendDisabled, setResendDisabled] = useState(true);
|
|
1888
|
+
const [resendCountdown, setResendCountdown] = useState(60);
|
|
1889
|
+
const [isSendingCode, setIsSendingCode] = useState(false);
|
|
1890
|
+
const [isVerifyingCode, setIsVerifyingCode] = useState(false);
|
|
1891
|
+
useEffect(() => {
|
|
2157
1892
|
if (resendCountdown > 0 && step === "code") {
|
|
2158
1893
|
const timer = setInterval(() => {
|
|
2159
1894
|
setResendCountdown((prev) => {
|
|
@@ -2199,7 +1934,7 @@ function ForgotPassword({
|
|
|
2199
1934
|
}
|
|
2200
1935
|
}
|
|
2201
1936
|
} catch (err) {
|
|
2202
|
-
const errorMessage = err.message
|
|
1937
|
+
const errorMessage = err instanceof Error ? err.message : "Failed to send reset code";
|
|
2203
1938
|
setError(errorMessage);
|
|
2204
1939
|
if (onError) {
|
|
2205
1940
|
onError(new Error(errorMessage));
|
|
@@ -2213,22 +1948,23 @@ function ForgotPassword({
|
|
|
2213
1948
|
setError("");
|
|
2214
1949
|
setVerificationCode(code);
|
|
2215
1950
|
try {
|
|
2216
|
-
const result = await insforge.auth.
|
|
1951
|
+
const result = await insforge.auth.exchangeResetPasswordToken({ email, code });
|
|
2217
1952
|
if (result.error) {
|
|
2218
1953
|
throw new Error(result.error.message || "Failed to verify code");
|
|
2219
1954
|
}
|
|
2220
1955
|
if (result.data) {
|
|
2221
|
-
setResetToken(result.data.
|
|
1956
|
+
setResetToken(result.data.token);
|
|
2222
1957
|
setStep("password");
|
|
2223
1958
|
}
|
|
2224
1959
|
} catch (err) {
|
|
2225
|
-
|
|
1960
|
+
const errorMessage = err instanceof Error ? err.message : "Invalid verification code";
|
|
1961
|
+
setError(errorMessage);
|
|
2226
1962
|
setVerificationCode("");
|
|
2227
1963
|
} finally {
|
|
2228
1964
|
setIsVerifyingCode(false);
|
|
2229
1965
|
}
|
|
2230
1966
|
}
|
|
2231
|
-
const handleResendCode =
|
|
1967
|
+
const handleResendCode = useCallback(async () => {
|
|
2232
1968
|
setResendDisabled(true);
|
|
2233
1969
|
setResendCountdown(60);
|
|
2234
1970
|
setIsSendingCode(true);
|
|
@@ -2236,7 +1972,8 @@ function ForgotPassword({
|
|
|
2236
1972
|
try {
|
|
2237
1973
|
await sendResetPasswordEmail(email);
|
|
2238
1974
|
} catch (err) {
|
|
2239
|
-
|
|
1975
|
+
const errorMessage = err instanceof Error ? err.message : "Failed to resend code";
|
|
1976
|
+
setError(errorMessage);
|
|
2240
1977
|
setResendDisabled(false);
|
|
2241
1978
|
setResendCountdown(0);
|
|
2242
1979
|
} finally {
|
|
@@ -2256,12 +1993,14 @@ function ForgotPassword({
|
|
|
2256
1993
|
return null;
|
|
2257
1994
|
}
|
|
2258
1995
|
if (step === "email") {
|
|
2259
|
-
return /* @__PURE__ */
|
|
1996
|
+
return /* @__PURE__ */ jsx(
|
|
2260
1997
|
ForgotPasswordForm,
|
|
2261
1998
|
{
|
|
2262
1999
|
email,
|
|
2263
2000
|
onEmailChange: setEmail,
|
|
2264
|
-
onSubmit:
|
|
2001
|
+
onSubmit: (e) => {
|
|
2002
|
+
void handleEmailSubmit(e);
|
|
2003
|
+
},
|
|
2265
2004
|
error,
|
|
2266
2005
|
loading,
|
|
2267
2006
|
success,
|
|
@@ -2271,115 +2010,236 @@ function ForgotPassword({
|
|
|
2271
2010
|
);
|
|
2272
2011
|
}
|
|
2273
2012
|
if (step === "code") {
|
|
2274
|
-
return /* @__PURE__ */
|
|
2275
|
-
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
}
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2013
|
+
return /* @__PURE__ */ jsxs(AuthContainer, { children: [
|
|
2014
|
+
/* @__PURE__ */ jsx(
|
|
2015
|
+
AuthHeader,
|
|
2016
|
+
{
|
|
2017
|
+
title: "Enter Reset Code",
|
|
2018
|
+
subtitle: `We've sent a 6-digit verification code to ${email}. Please enter it below to reset your password. The code will expire in 10 minutes.`
|
|
2019
|
+
}
|
|
2020
|
+
),
|
|
2021
|
+
/* @__PURE__ */ jsx(AuthErrorBanner, { error }),
|
|
2022
|
+
/* @__PURE__ */ jsxs(
|
|
2023
|
+
"div",
|
|
2024
|
+
{
|
|
2025
|
+
style: {
|
|
2026
|
+
width: "100%",
|
|
2027
|
+
display: "flex",
|
|
2028
|
+
flexDirection: "column",
|
|
2029
|
+
gap: "1.5rem",
|
|
2030
|
+
alignItems: "center"
|
|
2031
|
+
},
|
|
2032
|
+
children: [
|
|
2033
|
+
/* @__PURE__ */ jsx(
|
|
2034
|
+
"div",
|
|
2035
|
+
{
|
|
2036
|
+
style: {
|
|
2037
|
+
width: "100%",
|
|
2038
|
+
backgroundColor: "#F5F5F5",
|
|
2039
|
+
borderRadius: "0.5rem",
|
|
2040
|
+
padding: "1rem 1rem 1.5rem",
|
|
2041
|
+
display: "flex",
|
|
2042
|
+
flexDirection: "column",
|
|
2043
|
+
gap: "1rem"
|
|
2044
|
+
},
|
|
2045
|
+
children: /* @__PURE__ */ jsxs(
|
|
2046
|
+
"div",
|
|
2047
|
+
{
|
|
2048
|
+
style: {
|
|
2049
|
+
display: "flex",
|
|
2050
|
+
flexDirection: "column",
|
|
2051
|
+
gap: "0.75rem",
|
|
2052
|
+
marginTop: "0.5rem"
|
|
2053
|
+
},
|
|
2054
|
+
children: [
|
|
2055
|
+
/* @__PURE__ */ jsx(
|
|
2056
|
+
AuthVerificationCodeInput,
|
|
2057
|
+
{
|
|
2058
|
+
value: verificationCode,
|
|
2059
|
+
onChange: setVerificationCode,
|
|
2060
|
+
email,
|
|
2061
|
+
disabled: isVerifyingCode,
|
|
2062
|
+
onComplete: (code) => {
|
|
2063
|
+
void handleVerifyCode(code);
|
|
2064
|
+
}
|
|
2065
|
+
}
|
|
2066
|
+
),
|
|
2067
|
+
isVerifyingCode && /* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: "Verifying..." })
|
|
2068
|
+
]
|
|
2306
2069
|
}
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2070
|
+
)
|
|
2071
|
+
}
|
|
2072
|
+
),
|
|
2073
|
+
/* @__PURE__ */ jsxs(
|
|
2074
|
+
"div",
|
|
2075
|
+
{
|
|
2076
|
+
style: {
|
|
2077
|
+
width: "100%",
|
|
2078
|
+
fontSize: "0.875rem",
|
|
2079
|
+
textAlign: "center",
|
|
2080
|
+
color: "#828282",
|
|
2081
|
+
fontFamily: "var(--if-font-family)"
|
|
2082
|
+
},
|
|
2083
|
+
children: [
|
|
2084
|
+
"Didn't receive the email?",
|
|
2085
|
+
" ",
|
|
2086
|
+
/* @__PURE__ */ jsx(
|
|
2087
|
+
"button",
|
|
2088
|
+
{
|
|
2089
|
+
onClick: () => {
|
|
2090
|
+
void handleResendCode();
|
|
2091
|
+
},
|
|
2092
|
+
disabled: resendDisabled || isSendingCode,
|
|
2093
|
+
style: {
|
|
2094
|
+
color: "#000",
|
|
2095
|
+
fontWeight: 500,
|
|
2096
|
+
transition: "all 0.2s",
|
|
2097
|
+
cursor: resendDisabled || isSendingCode ? "not-allowed" : "pointer",
|
|
2098
|
+
background: "none",
|
|
2099
|
+
border: "none",
|
|
2100
|
+
padding: 0,
|
|
2101
|
+
textDecoration: resendDisabled || isSendingCode ? "none" : "underline",
|
|
2102
|
+
opacity: resendDisabled || isSendingCode ? 0.5 : 1,
|
|
2103
|
+
fontFamily: "var(--if-font-family)"
|
|
2104
|
+
},
|
|
2105
|
+
children: isSendingCode ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
|
|
2106
|
+
}
|
|
2107
|
+
)
|
|
2108
|
+
]
|
|
2109
|
+
}
|
|
2110
|
+
)
|
|
2111
|
+
]
|
|
2112
|
+
}
|
|
2113
|
+
),
|
|
2114
|
+
/* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: /* @__PURE__ */ jsx("a", { href: backToSignInUrl, className: "if-authLink-link", children: "Back to Sign In" }) })
|
|
2115
|
+
] });
|
|
2331
2116
|
}
|
|
2332
|
-
return /* @__PURE__ */
|
|
2117
|
+
return /* @__PURE__ */ jsx(
|
|
2333
2118
|
ResetPassword,
|
|
2334
2119
|
{
|
|
2335
2120
|
token: resetToken,
|
|
2336
2121
|
backToSignInUrl,
|
|
2337
2122
|
onSuccess: handlePasswordResetSuccess,
|
|
2338
|
-
onError
|
|
2339
|
-
appearance: uiProps.appearance
|
|
2123
|
+
onError
|
|
2340
2124
|
}
|
|
2341
2125
|
);
|
|
2342
2126
|
}
|
|
2343
2127
|
function VerifyEmailStatus({
|
|
2344
2128
|
status,
|
|
2345
2129
|
error,
|
|
2346
|
-
appearance = {},
|
|
2347
2130
|
verifyingTitle = "Verifying your email...",
|
|
2348
2131
|
successTitle = "Email Verified!",
|
|
2349
2132
|
successMessage = "Your email has been verified successfully. You can close this page and return to your app.",
|
|
2350
2133
|
errorTitle = "Verification Failed"
|
|
2351
2134
|
}) {
|
|
2352
2135
|
if (status === "verifying") {
|
|
2353
|
-
return /* @__PURE__ */
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2136
|
+
return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsxs(
|
|
2137
|
+
"div",
|
|
2138
|
+
{
|
|
2139
|
+
style: {
|
|
2140
|
+
width: "100%",
|
|
2141
|
+
display: "flex",
|
|
2142
|
+
flexDirection: "column",
|
|
2143
|
+
alignItems: "center",
|
|
2144
|
+
justifyContent: "center",
|
|
2145
|
+
gap: "1.5rem"
|
|
2146
|
+
},
|
|
2147
|
+
children: [
|
|
2148
|
+
/* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", children: verifyingTitle }),
|
|
2149
|
+
/* @__PURE__ */ jsx(
|
|
2150
|
+
"div",
|
|
2151
|
+
{
|
|
2152
|
+
className: "if-submitButton-spinner",
|
|
2153
|
+
style: {
|
|
2154
|
+
borderRadius: "50%",
|
|
2155
|
+
height: "3rem",
|
|
2156
|
+
width: "3rem",
|
|
2157
|
+
borderBottom: "2px solid black"
|
|
2158
|
+
}
|
|
2159
|
+
}
|
|
2160
|
+
)
|
|
2161
|
+
]
|
|
2162
|
+
}
|
|
2163
|
+
) });
|
|
2357
2164
|
}
|
|
2358
2165
|
if (status === "error") {
|
|
2359
|
-
return /* @__PURE__ */
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2166
|
+
return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx(
|
|
2167
|
+
"div",
|
|
2168
|
+
{
|
|
2169
|
+
style: {
|
|
2170
|
+
width: "100%",
|
|
2171
|
+
display: "flex",
|
|
2172
|
+
flexDirection: "column",
|
|
2173
|
+
alignItems: "stretch",
|
|
2174
|
+
justifyContent: "center",
|
|
2175
|
+
gap: "1.5rem"
|
|
2176
|
+
},
|
|
2177
|
+
children: /* @__PURE__ */ jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
|
|
2178
|
+
/* @__PURE__ */ jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: errorTitle }),
|
|
2179
|
+
/* @__PURE__ */ jsxs("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", style: { lineHeight: "1.5" }, children: [
|
|
2180
|
+
error || "The verification link is invalid or has expired.",
|
|
2181
|
+
" Please try again or contact support if the problem persists. You can close this page and return to your app."
|
|
2182
|
+
] })
|
|
2183
|
+
] })
|
|
2184
|
+
}
|
|
2185
|
+
) });
|
|
2366
2186
|
}
|
|
2367
|
-
return /* @__PURE__ */
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2187
|
+
return /* @__PURE__ */ jsx(AuthContainer, { children: /* @__PURE__ */ jsx(
|
|
2188
|
+
"div",
|
|
2189
|
+
{
|
|
2190
|
+
style: {
|
|
2191
|
+
width: "100%",
|
|
2192
|
+
display: "flex",
|
|
2193
|
+
flexDirection: "column",
|
|
2194
|
+
alignItems: "stretch",
|
|
2195
|
+
justifyContent: "center",
|
|
2196
|
+
gap: "1.5rem"
|
|
2197
|
+
},
|
|
2198
|
+
children: /* @__PURE__ */ jsxs(
|
|
2199
|
+
"div",
|
|
2200
|
+
{
|
|
2201
|
+
style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" },
|
|
2202
|
+
children: [
|
|
2203
|
+
/* @__PURE__ */ jsx(
|
|
2204
|
+
"div",
|
|
2205
|
+
{
|
|
2206
|
+
style: {
|
|
2207
|
+
width: "4rem",
|
|
2208
|
+
height: "4rem",
|
|
2209
|
+
borderRadius: "50%",
|
|
2210
|
+
backgroundColor: "#D1FAE5",
|
|
2211
|
+
display: "flex",
|
|
2212
|
+
alignItems: "center",
|
|
2213
|
+
justifyContent: "center"
|
|
2214
|
+
},
|
|
2215
|
+
children: /* @__PURE__ */ jsx(
|
|
2216
|
+
"svg",
|
|
2217
|
+
{
|
|
2218
|
+
style: { width: "2rem", height: "2rem", color: "#059669" },
|
|
2219
|
+
fill: "none",
|
|
2220
|
+
strokeLinecap: "round",
|
|
2221
|
+
strokeLinejoin: "round",
|
|
2222
|
+
strokeWidth: "2",
|
|
2223
|
+
viewBox: "0 0 24 24",
|
|
2224
|
+
stroke: "currentColor",
|
|
2225
|
+
children: /* @__PURE__ */ jsx("path", { d: "M5 13l4 4L19 7" })
|
|
2226
|
+
}
|
|
2227
|
+
)
|
|
2228
|
+
}
|
|
2229
|
+
),
|
|
2230
|
+
/* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { textAlign: "center" }, children: successTitle }),
|
|
2231
|
+
/* @__PURE__ */ jsx("p", { className: "if-authHeader-subtitle", style: { textAlign: "center" }, children: successMessage })
|
|
2232
|
+
]
|
|
2233
|
+
}
|
|
2234
|
+
)
|
|
2235
|
+
}
|
|
2236
|
+
) });
|
|
2372
2237
|
}
|
|
2373
|
-
function VerifyEmail({
|
|
2374
|
-
token,
|
|
2375
|
-
onSuccess,
|
|
2376
|
-
onError,
|
|
2377
|
-
...uiProps
|
|
2378
|
-
}) {
|
|
2238
|
+
function VerifyEmail({ token, onSuccess, onError, ...uiProps }) {
|
|
2379
2239
|
const { verifyEmail } = useInsforge();
|
|
2380
|
-
const [status, setStatus] =
|
|
2381
|
-
const [error, setError] =
|
|
2382
|
-
|
|
2240
|
+
const [status, setStatus] = useState("verifying");
|
|
2241
|
+
const [error, setError] = useState("");
|
|
2242
|
+
useEffect(() => {
|
|
2383
2243
|
const verifyEmailFn = async () => {
|
|
2384
2244
|
if (!token) {
|
|
2385
2245
|
const errorMessage = "Invalid verification link. Missing required token.";
|
|
@@ -2410,7 +2270,7 @@ function VerifyEmail({
|
|
|
2410
2270
|
});
|
|
2411
2271
|
}
|
|
2412
2272
|
} catch (err) {
|
|
2413
|
-
const errorMessage = err.message
|
|
2273
|
+
const errorMessage = err instanceof Error ? err.message : "Email verification failed";
|
|
2414
2274
|
setError(errorMessage);
|
|
2415
2275
|
setStatus("error");
|
|
2416
2276
|
if (onError) {
|
|
@@ -2420,21 +2280,19 @@ function VerifyEmail({
|
|
|
2420
2280
|
};
|
|
2421
2281
|
void verifyEmailFn();
|
|
2422
2282
|
}, [token, verifyEmail, onSuccess, onError]);
|
|
2423
|
-
return /* @__PURE__ */
|
|
2283
|
+
return /* @__PURE__ */ jsx(VerifyEmailStatus, { status, error, ...uiProps });
|
|
2424
2284
|
}
|
|
2425
|
-
function UserButton({
|
|
2426
|
-
afterSignOutUrl = "/",
|
|
2427
|
-
mode = "detailed",
|
|
2428
|
-
appearance = {}
|
|
2429
|
-
}) {
|
|
2285
|
+
function UserButton({ afterSignOutUrl = "/", mode = "detailed" }) {
|
|
2430
2286
|
const { user, signOut } = useInsforge();
|
|
2431
|
-
const [isOpen, setIsOpen] =
|
|
2432
|
-
const [imageError, setImageError] =
|
|
2433
|
-
const dropdownRef =
|
|
2434
|
-
|
|
2287
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
2288
|
+
const [imageError, setImageError] = useState(false);
|
|
2289
|
+
const dropdownRef = useRef(null);
|
|
2290
|
+
useEffect(() => {
|
|
2435
2291
|
setImageError(false);
|
|
2436
2292
|
const avatarUrl = user?.avatarUrl;
|
|
2437
|
-
if (!avatarUrl)
|
|
2293
|
+
if (!avatarUrl) {
|
|
2294
|
+
return;
|
|
2295
|
+
}
|
|
2438
2296
|
const checkImageUrl = async () => {
|
|
2439
2297
|
try {
|
|
2440
2298
|
const response = await fetch(avatarUrl, {
|
|
@@ -2445,12 +2303,15 @@ function UserButton({
|
|
|
2445
2303
|
setImageError(true);
|
|
2446
2304
|
}
|
|
2447
2305
|
} catch (error) {
|
|
2306
|
+
if (error instanceof Error) {
|
|
2307
|
+
console.error("Error checking image URL:", error.message);
|
|
2308
|
+
}
|
|
2448
2309
|
setImageError(true);
|
|
2449
2310
|
}
|
|
2450
2311
|
};
|
|
2451
2312
|
checkImageUrl();
|
|
2452
2313
|
}, [user?.avatarUrl]);
|
|
2453
|
-
|
|
2314
|
+
useEffect(() => {
|
|
2454
2315
|
function handleClickOutside(event) {
|
|
2455
2316
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
2456
2317
|
setIsOpen(false);
|
|
@@ -2468,84 +2329,95 @@ function UserButton({
|
|
|
2468
2329
|
setIsOpen(false);
|
|
2469
2330
|
window.location.href = afterSignOutUrl;
|
|
2470
2331
|
}
|
|
2471
|
-
if (!user)
|
|
2332
|
+
if (!user) {
|
|
2333
|
+
return null;
|
|
2334
|
+
}
|
|
2472
2335
|
const initials = user.name ? user.name.charAt(0).toUpperCase() : user.email.split("@")[0].slice(0, 2).toUpperCase();
|
|
2473
|
-
|
|
2336
|
+
const buttonClassName = mode === "detailed" ? "if-userButton if-userButton-detailed" : "if-userButton";
|
|
2337
|
+
return /* @__PURE__ */ jsxs(
|
|
2474
2338
|
"div",
|
|
2475
2339
|
{
|
|
2476
|
-
className:
|
|
2340
|
+
className: "if-userButton if-internal-ub3k8p",
|
|
2341
|
+
style: { position: "relative", display: "inline-block" },
|
|
2477
2342
|
ref: dropdownRef,
|
|
2478
2343
|
children: [
|
|
2479
|
-
/* @__PURE__ */
|
|
2344
|
+
/* @__PURE__ */ jsxs(
|
|
2480
2345
|
"button",
|
|
2481
2346
|
{
|
|
2482
|
-
className:
|
|
2483
|
-
|
|
2484
|
-
"flex
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2488
|
-
|
|
2347
|
+
className: buttonClassName,
|
|
2348
|
+
style: {
|
|
2349
|
+
display: "flex",
|
|
2350
|
+
alignItems: "center",
|
|
2351
|
+
justifyContent: "center",
|
|
2352
|
+
gap: "0.5rem",
|
|
2353
|
+
...mode === "detailed" ? { borderRadius: "0.5rem", padding: "0.5rem" } : {}
|
|
2354
|
+
},
|
|
2489
2355
|
onClick: () => setIsOpen(!isOpen),
|
|
2490
2356
|
"aria-expanded": isOpen,
|
|
2491
2357
|
"aria-haspopup": "true",
|
|
2492
2358
|
children: [
|
|
2493
|
-
/* @__PURE__ */
|
|
2359
|
+
/* @__PURE__ */ jsx("div", { className: "if-userButton-avatar", children: user.avatarUrl && !imageError ? /* @__PURE__ */ jsx(
|
|
2494
2360
|
"img",
|
|
2495
2361
|
{
|
|
2496
2362
|
src: user.avatarUrl,
|
|
2497
2363
|
alt: user.email,
|
|
2498
2364
|
onError: () => setImageError(true),
|
|
2499
|
-
|
|
2365
|
+
style: { borderRadius: "50%", objectFit: "cover", width: "100%", height: "100%" }
|
|
2500
2366
|
}
|
|
2501
|
-
) : /* @__PURE__ */
|
|
2502
|
-
mode === "detailed" && /* @__PURE__ */
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
{
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2367
|
+
) : /* @__PURE__ */ jsx("span", { style: { color: "white", fontWeight: 600, fontSize: "0.875rem" }, children: initials }) }),
|
|
2368
|
+
mode === "detailed" && /* @__PURE__ */ jsxs(
|
|
2369
|
+
"div",
|
|
2370
|
+
{
|
|
2371
|
+
style: {
|
|
2372
|
+
display: "flex",
|
|
2373
|
+
flexDirection: "column",
|
|
2374
|
+
alignItems: "flex-start",
|
|
2375
|
+
gap: "0.125rem"
|
|
2376
|
+
},
|
|
2377
|
+
children: [
|
|
2378
|
+
user.name && /* @__PURE__ */ jsx(
|
|
2379
|
+
"div",
|
|
2380
|
+
{
|
|
2381
|
+
style: {
|
|
2382
|
+
fontSize: "0.875rem",
|
|
2383
|
+
fontWeight: 600,
|
|
2384
|
+
color: "#1f1f1f",
|
|
2385
|
+
lineHeight: "1.25rem",
|
|
2386
|
+
textAlign: "left"
|
|
2387
|
+
},
|
|
2388
|
+
children: user.name
|
|
2389
|
+
}
|
|
2519
2390
|
),
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2391
|
+
/* @__PURE__ */ jsx(
|
|
2392
|
+
"div",
|
|
2393
|
+
{
|
|
2394
|
+
style: {
|
|
2395
|
+
fontSize: "0.75rem",
|
|
2396
|
+
color: "#828282",
|
|
2397
|
+
lineHeight: "1rem",
|
|
2398
|
+
textAlign: "left"
|
|
2399
|
+
},
|
|
2400
|
+
children: user.email
|
|
2401
|
+
}
|
|
2402
|
+
)
|
|
2403
|
+
]
|
|
2404
|
+
}
|
|
2405
|
+
)
|
|
2524
2406
|
]
|
|
2525
2407
|
}
|
|
2526
2408
|
),
|
|
2527
|
-
isOpen && /* @__PURE__ */
|
|
2528
|
-
"
|
|
2409
|
+
isOpen && /* @__PURE__ */ jsx("div", { className: "if-userButton-menu", children: /* @__PURE__ */ jsxs(
|
|
2410
|
+
"button",
|
|
2529
2411
|
{
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
"button",
|
|
2538
|
-
{
|
|
2539
|
-
onClick: handleSignOut,
|
|
2540
|
-
className: "flex items-center justify-start gap-2 w-full px-3 py-2 text-sm font-normal text-red-600 bg-transparent border-0 rounded-md cursor-pointer transition-colors hover:bg-red-50 text-left",
|
|
2541
|
-
children: [
|
|
2542
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "w-5 h-5" }),
|
|
2543
|
-
"Sign out"
|
|
2544
|
-
]
|
|
2545
|
-
}
|
|
2546
|
-
)
|
|
2412
|
+
onClick: handleSignOut,
|
|
2413
|
+
className: "if-userButton-menuItem",
|
|
2414
|
+
style: { color: "#DC2626" },
|
|
2415
|
+
children: [
|
|
2416
|
+
/* @__PURE__ */ jsx(LogOut, { style: { width: "1.25rem", height: "1.25rem" } }),
|
|
2417
|
+
"Sign out"
|
|
2418
|
+
]
|
|
2547
2419
|
}
|
|
2548
|
-
)
|
|
2420
|
+
) })
|
|
2549
2421
|
]
|
|
2550
2422
|
}
|
|
2551
2423
|
);
|
|
@@ -2558,7 +2430,7 @@ function Protect({
|
|
|
2558
2430
|
onRedirect
|
|
2559
2431
|
}) {
|
|
2560
2432
|
const { isSignedIn, isLoaded, user } = useInsforge();
|
|
2561
|
-
|
|
2433
|
+
useEffect(() => {
|
|
2562
2434
|
if (isLoaded && !isSignedIn) {
|
|
2563
2435
|
if (onRedirect) {
|
|
2564
2436
|
onRedirect(redirectTo);
|
|
@@ -2576,7 +2448,7 @@ function Protect({
|
|
|
2576
2448
|
}
|
|
2577
2449
|
}, [isLoaded, isSignedIn, redirectTo, condition, user, onRedirect]);
|
|
2578
2450
|
if (!isLoaded) {
|
|
2579
|
-
return fallback || /* @__PURE__ */
|
|
2451
|
+
return fallback || /* @__PURE__ */ jsx("div", { className: "insforge-loading", children: "Loading..." });
|
|
2580
2452
|
}
|
|
2581
2453
|
if (!isSignedIn) {
|
|
2582
2454
|
return fallback || null;
|
|
@@ -2584,19 +2456,27 @@ function Protect({
|
|
|
2584
2456
|
if (condition && user && !condition(user)) {
|
|
2585
2457
|
return fallback || null;
|
|
2586
2458
|
}
|
|
2587
|
-
return /* @__PURE__ */
|
|
2459
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
2588
2460
|
}
|
|
2589
2461
|
function SignedIn({ children }) {
|
|
2590
2462
|
const { isSignedIn, isLoaded } = useInsforge();
|
|
2591
|
-
if (!isLoaded)
|
|
2592
|
-
|
|
2593
|
-
|
|
2463
|
+
if (!isLoaded) {
|
|
2464
|
+
return null;
|
|
2465
|
+
}
|
|
2466
|
+
if (!isSignedIn) {
|
|
2467
|
+
return null;
|
|
2468
|
+
}
|
|
2469
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
2594
2470
|
}
|
|
2595
2471
|
function SignedOut({ children }) {
|
|
2596
2472
|
const { isSignedIn, isLoaded } = useInsforge();
|
|
2597
|
-
if (!isLoaded)
|
|
2598
|
-
|
|
2599
|
-
|
|
2473
|
+
if (!isLoaded) {
|
|
2474
|
+
return null;
|
|
2475
|
+
}
|
|
2476
|
+
if (isSignedIn) {
|
|
2477
|
+
return null;
|
|
2478
|
+
}
|
|
2479
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
2600
2480
|
}
|
|
2601
2481
|
function InsforgeCallback({
|
|
2602
2482
|
redirectTo = "/",
|
|
@@ -2605,13 +2485,17 @@ function InsforgeCallback({
|
|
|
2605
2485
|
loadingComponent,
|
|
2606
2486
|
onRedirect
|
|
2607
2487
|
}) {
|
|
2608
|
-
const isProcessingRef =
|
|
2488
|
+
const isProcessingRef = useRef(false);
|
|
2609
2489
|
const { isLoaded, isSignedIn } = useInsforge();
|
|
2610
|
-
|
|
2611
|
-
if (!isLoaded)
|
|
2612
|
-
|
|
2490
|
+
useEffect(() => {
|
|
2491
|
+
if (!isLoaded) {
|
|
2492
|
+
return;
|
|
2493
|
+
}
|
|
2494
|
+
if (isProcessingRef.current) {
|
|
2495
|
+
return;
|
|
2496
|
+
}
|
|
2613
2497
|
isProcessingRef.current = true;
|
|
2614
|
-
const processCallback =
|
|
2498
|
+
const processCallback = () => {
|
|
2615
2499
|
const searchParams = new URLSearchParams(window.location.search);
|
|
2616
2500
|
const error = searchParams.get("error");
|
|
2617
2501
|
if (error) {
|
|
@@ -2653,10 +2537,33 @@ function InsforgeCallback({
|
|
|
2653
2537
|
};
|
|
2654
2538
|
processCallback();
|
|
2655
2539
|
}, [isLoaded, isSignedIn, redirectTo, onSuccess, onError, onRedirect]);
|
|
2656
|
-
const defaultLoading = /* @__PURE__ */
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2540
|
+
const defaultLoading = /* @__PURE__ */ jsx(
|
|
2541
|
+
"div",
|
|
2542
|
+
{
|
|
2543
|
+
style: {
|
|
2544
|
+
display: "flex",
|
|
2545
|
+
alignItems: "center",
|
|
2546
|
+
justifyContent: "center",
|
|
2547
|
+
minHeight: "100vh"
|
|
2548
|
+
},
|
|
2549
|
+
children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
|
|
2550
|
+
/* @__PURE__ */ jsx("h2", { className: "if-authHeader-title", style: { marginBottom: "1rem" }, children: "Completing authentication..." }),
|
|
2551
|
+
/* @__PURE__ */ jsx(
|
|
2552
|
+
"div",
|
|
2553
|
+
{
|
|
2554
|
+
className: "if-submitButton-spinner",
|
|
2555
|
+
style: {
|
|
2556
|
+
borderRadius: "50%",
|
|
2557
|
+
height: "3rem",
|
|
2558
|
+
width: "3rem",
|
|
2559
|
+
borderBottom: "2px solid #2563EB",
|
|
2560
|
+
margin: "0 auto"
|
|
2561
|
+
}
|
|
2562
|
+
}
|
|
2563
|
+
)
|
|
2564
|
+
] })
|
|
2565
|
+
}
|
|
2566
|
+
);
|
|
2660
2567
|
return loadingComponent || defaultLoading;
|
|
2661
2568
|
}
|
|
2662
2569
|
|
|
@@ -2672,7 +2579,7 @@ function useUser() {
|
|
|
2672
2579
|
return { user, isLoaded, updateUser, setUser };
|
|
2673
2580
|
}
|
|
2674
2581
|
function RedirectToAuth({ baseUrl, path }) {
|
|
2675
|
-
|
|
2582
|
+
useEffect(() => {
|
|
2676
2583
|
const callbackUrl = `${window.location.origin}/auth/callback`;
|
|
2677
2584
|
const authUrl = new URL(path, baseUrl);
|
|
2678
2585
|
authUrl.searchParams.set("redirect", callbackUrl);
|
|
@@ -2681,11 +2588,7 @@ function RedirectToAuth({ baseUrl, path }) {
|
|
|
2681
2588
|
return null;
|
|
2682
2589
|
}
|
|
2683
2590
|
function getInsforgeRoutes(config) {
|
|
2684
|
-
const {
|
|
2685
|
-
baseUrl,
|
|
2686
|
-
builtInAuth = true,
|
|
2687
|
-
paths = {}
|
|
2688
|
-
} = config;
|
|
2591
|
+
const { baseUrl, builtInAuth = true, paths = {} } = config;
|
|
2689
2592
|
const {
|
|
2690
2593
|
signIn = "/sign-in",
|
|
2691
2594
|
signUp = "/sign-up",
|
|
@@ -2698,74 +2601,29 @@ function getInsforgeRoutes(config) {
|
|
|
2698
2601
|
routes.push(
|
|
2699
2602
|
{
|
|
2700
2603
|
path: signIn,
|
|
2701
|
-
element: /* @__PURE__ */
|
|
2604
|
+
element: /* @__PURE__ */ jsx(RedirectToAuth, { baseUrl, path: "/auth/sign-in" })
|
|
2702
2605
|
},
|
|
2703
2606
|
{
|
|
2704
2607
|
path: signUp,
|
|
2705
|
-
element: /* @__PURE__ */
|
|
2608
|
+
element: /* @__PURE__ */ jsx(RedirectToAuth, { baseUrl, path: "/auth/sign-up" })
|
|
2706
2609
|
},
|
|
2707
2610
|
{
|
|
2708
2611
|
path: verifyEmail,
|
|
2709
|
-
element: /* @__PURE__ */
|
|
2612
|
+
element: /* @__PURE__ */ jsx(RedirectToAuth, { baseUrl, path: "/auth/verify-email" })
|
|
2710
2613
|
},
|
|
2711
2614
|
{
|
|
2712
2615
|
path: forgotPassword,
|
|
2713
|
-
element: /* @__PURE__ */
|
|
2616
|
+
element: /* @__PURE__ */ jsx(RedirectToAuth, { baseUrl, path: "/auth/forgot-password" })
|
|
2714
2617
|
},
|
|
2715
2618
|
{
|
|
2716
2619
|
path: resetPassword,
|
|
2717
|
-
element: /* @__PURE__ */
|
|
2620
|
+
element: /* @__PURE__ */ jsx(RedirectToAuth, { baseUrl, path: "/auth/reset-password" })
|
|
2718
2621
|
}
|
|
2719
2622
|
);
|
|
2720
2623
|
}
|
|
2721
2624
|
return routes;
|
|
2722
2625
|
}
|
|
2723
2626
|
|
|
2724
|
-
|
|
2725
|
-
exports.AuthContainer = AuthContainer;
|
|
2726
|
-
exports.AuthDivider = AuthDivider;
|
|
2727
|
-
exports.AuthEmailVerificationStep = AuthEmailVerificationStep;
|
|
2728
|
-
exports.AuthErrorBanner = AuthErrorBanner;
|
|
2729
|
-
exports.AuthFormField = AuthFormField;
|
|
2730
|
-
exports.AuthHeader = AuthHeader;
|
|
2731
|
-
exports.AuthLink = AuthLink;
|
|
2732
|
-
exports.AuthOAuthButton = AuthOAuthButton;
|
|
2733
|
-
exports.AuthOAuthProviders = AuthOAuthProviders;
|
|
2734
|
-
exports.AuthPasswordField = AuthPasswordField;
|
|
2735
|
-
exports.AuthPasswordStrengthIndicator = AuthPasswordStrengthIndicator;
|
|
2736
|
-
exports.AuthSubmitButton = AuthSubmitButton;
|
|
2737
|
-
exports.AuthVerificationCodeInput = AuthVerificationCodeInput;
|
|
2738
|
-
exports.ForgotPassword = ForgotPassword;
|
|
2739
|
-
exports.ForgotPasswordForm = ForgotPasswordForm;
|
|
2740
|
-
exports.InsforgeCallback = InsforgeCallback;
|
|
2741
|
-
exports.InsforgeProvider = InsforgeProvider;
|
|
2742
|
-
exports.OAUTH_PROVIDER_CONFIG = OAUTH_PROVIDER_CONFIG;
|
|
2743
|
-
exports.Protect = Protect;
|
|
2744
|
-
exports.ResetPassword = ResetPassword;
|
|
2745
|
-
exports.ResetPasswordForm = ResetPasswordForm;
|
|
2746
|
-
exports.SignIn = SignIn;
|
|
2747
|
-
exports.SignInForm = SignInForm;
|
|
2748
|
-
exports.SignUp = SignUp;
|
|
2749
|
-
exports.SignUpForm = SignUpForm;
|
|
2750
|
-
exports.SignedIn = SignedIn;
|
|
2751
|
-
exports.SignedOut = SignedOut;
|
|
2752
|
-
exports.UserButton = UserButton;
|
|
2753
|
-
exports.VerifyEmail = VerifyEmail;
|
|
2754
|
-
exports.VerifyEmailStatus = VerifyEmailStatus;
|
|
2755
|
-
exports.checkPasswordStrength = checkPasswordStrength;
|
|
2756
|
-
exports.cn = cn;
|
|
2757
|
-
exports.createPasswordSchema = createPasswordSchema;
|
|
2758
|
-
exports.emailSchema = emailSchema;
|
|
2759
|
-
exports.getAllProviderConfigs = getAllProviderConfigs;
|
|
2760
|
-
exports.getInsforgeRoutes = getInsforgeRoutes;
|
|
2761
|
-
exports.getProviderConfig = getProviderConfig;
|
|
2762
|
-
exports.passwordSchema = passwordSchema;
|
|
2763
|
-
exports.useAuth = useAuth;
|
|
2764
|
-
exports.useInsforge = useInsforge;
|
|
2765
|
-
exports.usePublicAuthConfig = usePublicAuthConfig;
|
|
2766
|
-
exports.useUser = useUser;
|
|
2767
|
-
exports.validateEmail = validateEmail;
|
|
2768
|
-
exports.validatePassword = validatePassword;
|
|
2769
|
-
exports.validatePasswordStrength = validatePasswordStrength;
|
|
2627
|
+
export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, ForgotPassword, ForgotPasswordForm, InsforgeCallback, InsforgeProvider, OAUTH_PROVIDER_CONFIG, Protect, ResetPassword, ResetPasswordForm, SignIn, SignInForm, SignUp, SignUpForm, SignedIn, SignedOut, UserButton, VerifyEmail, VerifyEmailStatus, checkPasswordStrength, createPasswordSchema, emailSchema, getAllProviderConfigs, getInsforgeRoutes, getProviderConfig, passwordSchema, useAuth, useInsforge, usePublicAuthConfig, useUser, validateEmail, validatePassword };
|
|
2770
2628
|
//# sourceMappingURL=index.js.map
|
|
2771
2629
|
//# sourceMappingURL=index.js.map
|