@retinalabsllc/zairusjs 16.0.80 → 16.0.90
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/dist/index.js +23 -7
- package/dist/index.mjs +23 -7
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -411,6 +411,7 @@ function AuthFormInner({
|
|
|
411
411
|
const [firstName, setFirstName] = (0, import_react6.useState)("");
|
|
412
412
|
const [lastName, setLastName] = (0, import_react6.useState)("");
|
|
413
413
|
const [orgName, setOrgName] = (0, import_react6.useState)("");
|
|
414
|
+
const [accountType, setAccountType] = (0, import_react6.useState)("ORGANIZATION");
|
|
414
415
|
const [agreedToTerms, setAgreedToTerms] = (0, import_react6.useState)(false);
|
|
415
416
|
const [userHas2FA, setUserHas2FA] = (0, import_react6.useState)(false);
|
|
416
417
|
const [userHasPasskey, setUserHasPasskey] = (0, import_react6.useState)(false);
|
|
@@ -462,13 +463,12 @@ function AuthFormInner({
|
|
|
462
463
|
if (useRecaptcha && captchaContext?.executeRecaptcha) {
|
|
463
464
|
recaptchaToken = await captchaContext.executeRecaptcha("auth_request");
|
|
464
465
|
}
|
|
465
|
-
const hasOrg = mode === "SIGNUP" && requireOrganization && orgName.trim().length > 0;
|
|
466
466
|
const res = await onAuthRequest({
|
|
467
467
|
email: emailId,
|
|
468
468
|
firstName: mode === "SIGNUP" && requireNames ? firstName : void 0,
|
|
469
469
|
lastName: mode === "SIGNUP" && requireNames ? lastName : void 0,
|
|
470
|
-
organizationName:
|
|
471
|
-
accountType:
|
|
470
|
+
organizationName: mode === "SIGNUP" && accountType === "ORGANIZATION" ? orgName.trim() : void 0,
|
|
471
|
+
accountType: mode === "SIGNUP" ? accountType : void 0,
|
|
472
472
|
mode,
|
|
473
473
|
recaptchaToken
|
|
474
474
|
});
|
|
@@ -536,7 +536,7 @@ function AuthFormInner({
|
|
|
536
536
|
if (mode === "LOGIN") return emailId.length < 3;
|
|
537
537
|
if (mode === "SIGNUP") {
|
|
538
538
|
if (signupStep === "NAME") return firstName.trim() === "" || lastName.trim() === "";
|
|
539
|
-
if (signupStep === "ORGANIZATION") return orgName.trim().length < 3;
|
|
539
|
+
if (signupStep === "ORGANIZATION") return accountType === "ORGANIZATION" ? orgName.trim().length < 3 : false;
|
|
540
540
|
if (signupStep === "EMAIL_ID") return emailId.length < 3 || !agreedToTerms;
|
|
541
541
|
}
|
|
542
542
|
return false;
|
|
@@ -549,7 +549,23 @@ function AuthFormInner({
|
|
|
549
549
|
if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
|
|
550
550
|
else if (mode === "SIGNUP" && signupStep === "ORGANIZATION") handleNextSignupStep();
|
|
551
551
|
else handleAuthRequestSubmit();
|
|
552
|
-
} }, mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ import_react6.default.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ import_react6.default.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "
|
|
552
|
+
} }, mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ import_react6.default.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ import_react6.default.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex bg-neutral-100 p-1 rounded-lg" }, /* @__PURE__ */ import_react6.default.createElement(
|
|
553
|
+
"button",
|
|
554
|
+
{
|
|
555
|
+
type: "button",
|
|
556
|
+
onClick: () => setAccountType("INDIVIDUAL"),
|
|
557
|
+
className: `flex-1 py-2 text-xs rounded-md transition-colors outline-none ${accountType === "INDIVIDUAL" ? "bg-white shadow-sm text-black" : "text-neutral-500 hover:text-black"}`
|
|
558
|
+
},
|
|
559
|
+
"Personal"
|
|
560
|
+
), /* @__PURE__ */ import_react6.default.createElement(
|
|
561
|
+
"button",
|
|
562
|
+
{
|
|
563
|
+
type: "button",
|
|
564
|
+
onClick: () => setAccountType("ORGANIZATION"),
|
|
565
|
+
className: `flex-1 py-2 text-xs rounded-md transition-colors outline-none ${accountType === "ORGANIZATION" ? "bg-white shadow-sm text-black" : "text-neutral-500 hover:text-black"}`
|
|
566
|
+
},
|
|
567
|
+
"Organization"
|
|
568
|
+
)), accountType === "ORGANIZATION" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5 relative animate-in fade-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ import_react6.default.createElement("input", { type: "text", value: orgName, onChange: (e) => setOrgName(cleanOrgName(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Acme Corporation" })), accountType === "INDIVIDUAL" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "py-4 text-center animate-in fade-in duration-200" }, /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-[13px] text-neutral-500" }, "You are creating a personal account. You can join organizations later."))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "EMAIL_ID") && /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Email ID"), /* @__PURE__ */ import_react6.default.createElement("input", { type: "email", value: emailId, onChange: (e) => setEmailId(cleanEmailId(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "name@company.com" })), mode === "SIGNUP" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ import_react6.default.createElement("input", { type: "checkbox", id: "zairus-terms", checked: agreedToTerms, onChange: (e) => setAgreedToTerms(e.target.checked), className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer", required: true }), /* @__PURE__ */ import_react6.default.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ import_react6.default.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ import_react6.default.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))), /* @__PURE__ */ import_react6.default.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, "Continue"))), step === "OTP" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ import_react6.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-[13px] text-neutral-500" }, userHas2FA ? "Enter the code from your authenticator app." : `Enter the code sent to ${emailId}`)), /* @__PURE__ */ import_react6.default.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
|
|
553
569
|
e.preventDefault();
|
|
554
570
|
verifyOtpCode(otp.join(""));
|
|
555
571
|
} }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ import_react6.default.createElement(
|
|
@@ -574,9 +590,9 @@ function AuthFormInner({
|
|
|
574
590
|
{
|
|
575
591
|
onClick: triggerPasskeyLogin,
|
|
576
592
|
disabled: isSubmitting,
|
|
577
|
-
className: "w-full py-2.5 rounded-full text-black border border-neutral-200
|
|
593
|
+
className: "w-full py-2.5 rounded-full text-black border border-neutral-200 hover:bg-neutral-50 text-xs tracking-wide transition-colors outline-none disabled:opacity-50"
|
|
578
594
|
},
|
|
579
|
-
"Use Passkey
|
|
595
|
+
"Use Passkey Biometrics"
|
|
580
596
|
))))));
|
|
581
597
|
}
|
|
582
598
|
var PipleAuth = (props) => {
|
package/dist/index.mjs
CHANGED
|
@@ -328,6 +328,7 @@ function AuthFormInner({
|
|
|
328
328
|
const [firstName, setFirstName] = useState3("");
|
|
329
329
|
const [lastName, setLastName] = useState3("");
|
|
330
330
|
const [orgName, setOrgName] = useState3("");
|
|
331
|
+
const [accountType, setAccountType] = useState3("ORGANIZATION");
|
|
331
332
|
const [agreedToTerms, setAgreedToTerms] = useState3(false);
|
|
332
333
|
const [userHas2FA, setUserHas2FA] = useState3(false);
|
|
333
334
|
const [userHasPasskey, setUserHasPasskey] = useState3(false);
|
|
@@ -379,13 +380,12 @@ function AuthFormInner({
|
|
|
379
380
|
if (useRecaptcha && captchaContext?.executeRecaptcha) {
|
|
380
381
|
recaptchaToken = await captchaContext.executeRecaptcha("auth_request");
|
|
381
382
|
}
|
|
382
|
-
const hasOrg = mode === "SIGNUP" && requireOrganization && orgName.trim().length > 0;
|
|
383
383
|
const res = await onAuthRequest({
|
|
384
384
|
email: emailId,
|
|
385
385
|
firstName: mode === "SIGNUP" && requireNames ? firstName : void 0,
|
|
386
386
|
lastName: mode === "SIGNUP" && requireNames ? lastName : void 0,
|
|
387
|
-
organizationName:
|
|
388
|
-
accountType:
|
|
387
|
+
organizationName: mode === "SIGNUP" && accountType === "ORGANIZATION" ? orgName.trim() : void 0,
|
|
388
|
+
accountType: mode === "SIGNUP" ? accountType : void 0,
|
|
389
389
|
mode,
|
|
390
390
|
recaptchaToken
|
|
391
391
|
});
|
|
@@ -453,7 +453,7 @@ function AuthFormInner({
|
|
|
453
453
|
if (mode === "LOGIN") return emailId.length < 3;
|
|
454
454
|
if (mode === "SIGNUP") {
|
|
455
455
|
if (signupStep === "NAME") return firstName.trim() === "" || lastName.trim() === "";
|
|
456
|
-
if (signupStep === "ORGANIZATION") return orgName.trim().length < 3;
|
|
456
|
+
if (signupStep === "ORGANIZATION") return accountType === "ORGANIZATION" ? orgName.trim().length < 3 : false;
|
|
457
457
|
if (signupStep === "EMAIL_ID") return emailId.length < 3 || !agreedToTerms;
|
|
458
458
|
}
|
|
459
459
|
return false;
|
|
@@ -466,7 +466,23 @@ function AuthFormInner({
|
|
|
466
466
|
if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
|
|
467
467
|
else if (mode === "SIGNUP" && signupStep === "ORGANIZATION") handleNextSignupStep();
|
|
468
468
|
else handleAuthRequestSubmit();
|
|
469
|
-
} }, mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "
|
|
469
|
+
} }, mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "flex bg-neutral-100 p-1 rounded-lg" }, /* @__PURE__ */ React5.createElement(
|
|
470
|
+
"button",
|
|
471
|
+
{
|
|
472
|
+
type: "button",
|
|
473
|
+
onClick: () => setAccountType("INDIVIDUAL"),
|
|
474
|
+
className: `flex-1 py-2 text-xs rounded-md transition-colors outline-none ${accountType === "INDIVIDUAL" ? "bg-white shadow-sm text-black" : "text-neutral-500 hover:text-black"}`
|
|
475
|
+
},
|
|
476
|
+
"Personal"
|
|
477
|
+
), /* @__PURE__ */ React5.createElement(
|
|
478
|
+
"button",
|
|
479
|
+
{
|
|
480
|
+
type: "button",
|
|
481
|
+
onClick: () => setAccountType("ORGANIZATION"),
|
|
482
|
+
className: `flex-1 py-2 text-xs rounded-md transition-colors outline-none ${accountType === "ORGANIZATION" ? "bg-white shadow-sm text-black" : "text-neutral-500 hover:text-black"}`
|
|
483
|
+
},
|
|
484
|
+
"Organization"
|
|
485
|
+
)), accountType === "ORGANIZATION" && /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5 relative animate-in fade-in zoom-in-95 duration-200" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: orgName, onChange: (e) => setOrgName(cleanOrgName(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Acme Corporation" })), accountType === "INDIVIDUAL" && /* @__PURE__ */ React5.createElement("div", { className: "py-4 text-center animate-in fade-in duration-200" }, /* @__PURE__ */ React5.createElement("p", { className: "text-[13px] text-neutral-500" }, "You are creating a personal account. You can join organizations later."))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "EMAIL_ID") && /* @__PURE__ */ React5.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Email ID"), /* @__PURE__ */ React5.createElement("input", { type: "email", value: emailId, onChange: (e) => setEmailId(cleanEmailId(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "name@company.com" })), mode === "SIGNUP" && /* @__PURE__ */ React5.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ React5.createElement("input", { type: "checkbox", id: "zairus-terms", checked: agreedToTerms, onChange: (e) => setAgreedToTerms(e.target.checked), className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer", required: true }), /* @__PURE__ */ React5.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ React5.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ React5.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))), /* @__PURE__ */ React5.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, "Continue"))), step === "OTP" && /* @__PURE__ */ React5.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React5.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ React5.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React5.createElement("p", { className: "text-[13px] text-neutral-500" }, userHas2FA ? "Enter the code from your authenticator app." : `Enter the code sent to ${emailId}`)), /* @__PURE__ */ React5.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
|
|
470
486
|
e.preventDefault();
|
|
471
487
|
verifyOtpCode(otp.join(""));
|
|
472
488
|
} }, /* @__PURE__ */ React5.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ React5.createElement(
|
|
@@ -491,9 +507,9 @@ function AuthFormInner({
|
|
|
491
507
|
{
|
|
492
508
|
onClick: triggerPasskeyLogin,
|
|
493
509
|
disabled: isSubmitting,
|
|
494
|
-
className: "w-full py-2.5 rounded-full text-black border border-neutral-200
|
|
510
|
+
className: "w-full py-2.5 rounded-full text-black border border-neutral-200 hover:bg-neutral-50 text-xs tracking-wide transition-colors outline-none disabled:opacity-50"
|
|
495
511
|
},
|
|
496
|
-
"Use Passkey
|
|
512
|
+
"Use Passkey Biometrics"
|
|
497
513
|
))))));
|
|
498
514
|
}
|
|
499
515
|
var PipleAuth = (props) => {
|