@myarapat/plugin
Version:
Securili plugin for vendor sites
353 lines (352 loc) • 10.9 kB
JavaScript
import { jsxs as c, jsx as r } from "react/jsx-runtime";
import { useState as u } from "react";
const e = {
colors: {
// Main background color
background: "#0D0D0D",
// deep dark
// Panels, cards, and elevated surfaces
panel: "#1C1C1E",
// Primary accent color for highlights, borders, and active states
// primary: "#24B44E",
primary: "#50c371",
// Secondary color for hover effects and button variations
primaryHover: "#178636",
// Text colors
text: {
primary: "#FFFFFF",
secondary: "rgba(255, 255, 255, 0.85)",
// softer white
tertiary: "rgba(255, 255, 255, 0.65)"
// even softer for descriptions
},
// Status colors (keeping them for future use)
success: "#24B44E",
error: "#FF4444",
// Additional utility colors
border: "rgba(255, 255, 255, 0.1)"
},
// Optional: Define common spacing, fonts, etc.
spacing: {
sm: 8,
md: 16,
lg: 24
},
// Widget-specific styling
widget: {
// Layout
maxWidth: "400px",
padding: "32px",
borderRadius: "16px",
// Typography
fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
titleFontSize: "24px",
subtitleFontSize: "14px",
// Form elements
inputBorderRadius: "8px",
// Effects
boxShadow: "0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1)"
}
}, Z = ({
vendor: g,
vendorId: y,
onSuccess: G,
apiBaseUrl: m,
mode: L = "Securili",
userEmail: C,
vendorToken: v
}) => {
const i = L === "twofactor", [d, M] = u(
() => i && C ? C : ""
), [F, V] = u(!1), [a, k] = u(""), [h, n] = u(""), [B, j] = u(!1), [t, p] = u(!1), T = async (o) => {
if (i) return;
j(o === "signup"), n(""), p(!0);
const s = o === "signup" ? "/api/user-to-vendor-signup-request/" : "/api/generate-otp-for-vendors/";
try {
const l = await fetch(`${m}${s}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Vendor-Id": y
},
body: JSON.stringify({ email: d, vendor: g })
}), z = await l.json();
l.ok ? (V(!0), n(
o === "signup" ? "✅ Signup OTP sent! Check your Securili portal." : "✅ Login OTP sent. Please enter it below."
)) : n(`❌ ${z.error || z.message}`);
} catch {
n("❌ Network error.");
} finally {
p(!1);
}
}, $ = async () => {
if (i) return;
n(""), p(!0);
const o = B ? "/api/confirm-vendor-signup/" : "/api/verify-login-otp/";
try {
const s = await fetch(`${m}${o}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Vendor-Id": y
},
body: JSON.stringify({ email: d, vendor: g, otp: a })
}), l = await s.json();
s.ok && l.redirect_url ? (n(
B ? "✅ Signup complete! Redirecting..." : "✅ Login successful! Redirecting..."
), setTimeout(() => window.location.href = l.redirect_url, 500)) : n(`❌ ${l.error || l.message}`);
} catch {
n("❌ OTP verification failed.");
} finally {
p(!1);
}
}, R = async () => {
if (i) {
if (!v) {
n("❌ Vendor token missing");
return;
}
n(""), p(!0);
try {
const o = await fetch(`${m}/api/vendors/2fa/verify/`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Vendor-Id": y
},
body: JSON.stringify({
email: d,
vendor: g,
code: a,
vendor_token: v
})
}), s = await o.json();
o.ok && s.redirect_url ? window.location.href = s.redirect_url : n(`❌ ${s.error || s.message}`);
} catch {
n("❌ Verification failed.");
} finally {
p(!1);
}
}
}, W = {
backgroundColor: e.colors.panel,
border: `1px solid ${e.colors.border}`,
borderRadius: e.widget.borderRadius,
boxShadow: e.widget.boxShadow,
padding: e.widget.padding,
width: "100%",
maxWidth: e.widget.maxWidth,
margin: "0 auto",
fontFamily: e.widget.fontFamily
}, I = {
textAlign: "center",
marginBottom: e.spacing.lg
}, D = {
fontSize: e.widget.titleFontSize,
fontWeight: "bold",
marginBottom: e.spacing.sm,
color: e.colors.text.primary
}, A = {
color: e.colors.text.secondary,
fontSize: e.widget.subtitleFontSize
}, _ = (o) => ({
padding: e.spacing.sm,
borderRadius: e.widget.inputBorderRadius,
marginBottom: e.spacing.md,
fontSize: "14px",
fontWeight: "500",
border: `1px solid ${o ? e.colors.success : e.colors.error}`,
backgroundColor: o ? `${e.colors.success}15` : `${e.colors.error}15`,
color: o ? e.colors.success : e.colors.error
}), O = {
display: "block",
fontSize: "14px",
fontWeight: "500",
marginBottom: e.spacing.sm,
color: e.colors.text.primary
}, P = {
width: "100%",
padding: e.spacing.sm,
border: `1px solid ${e.colors.border}`,
borderRadius: e.widget.inputBorderRadius,
backgroundColor: e.colors.background,
color: e.colors.text.primary,
fontSize: "16px",
transition: "all 0.2s ease",
outline: "none"
}, E = {
...P,
textAlign: "center",
fontSize: "18px",
fontFamily: "monospace",
letterSpacing: "0.1em"
}, f = {
width: "100%",
padding: `${e.spacing.sm}px 0`,
backgroundColor: e.colors.primary,
color: "white",
fontWeight: "600",
borderRadius: e.widget.inputBorderRadius,
border: "none",
fontSize: "16px",
cursor: t ? "not-allowed" : "pointer",
opacity: t ? 0.6 : 1,
transition: "all 0.2s ease"
}, H = {
width: "100%",
padding: `${e.spacing.sm}px 0`,
backgroundColor: "transparent",
color: e.colors.primary,
fontWeight: "600",
borderRadius: e.widget.inputBorderRadius,
border: `1px solid ${e.colors.primary}`,
fontSize: "16px",
cursor: t ? "not-allowed" : "pointer",
opacity: t ? 0.6 : 1,
transition: "all 0.2s ease"
}, N = {
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: e.spacing.md,
borderRadius: e.widget.inputBorderRadius,
marginBottom: e.spacing.md,
backgroundColor: `${e.colors.primary}10`,
border: `1px solid ${e.colors.primary}30`
}, J = {
textAlign: "center",
paddingTop: e.spacing.md,
borderTop: `1px solid ${e.colors.border}`
}, X = {
fontSize: "12px",
color: e.colors.text.tertiary
}, b = (o) => {
o.target.style.borderColor = e.colors.primary, o.target.style.boxShadow = `0 0 0 2px ${e.colors.primary}30`;
}, S = (o) => {
o.target.style.borderColor = e.colors.border, o.target.style.boxShadow = "none";
}, x = (o) => {
t || (o.currentTarget.style.backgroundColor = e.colors.primaryHover);
}, w = (o) => {
t || (o.currentTarget.style.backgroundColor = e.colors.primary);
}, q = (o) => {
t || (o.currentTarget.style.backgroundColor = `${e.colors.primary}15`);
}, K = (o) => {
t || (o.currentTarget.style.backgroundColor = "transparent");
};
return /* @__PURE__ */ c("div", { style: W, children: [
/* @__PURE__ */ c("div", { style: I, children: [
/* @__PURE__ */ r("h2", { style: D, children: i ? "🔒 Two-Factor Authentication" : "Securili Login" }),
!i && /* @__PURE__ */ r("p", { style: A, children: "Secure authentication powered by Securili" })
] }),
h && /* @__PURE__ */ r("div", { style: _(h.includes("✅")), children: h }),
!i && /* @__PURE__ */ c("div", { style: { marginBottom: e.spacing.md }, children: [
/* @__PURE__ */ r("label", { style: O, children: "Email Address *" }),
/* @__PURE__ */ r(
"input",
{
type: "email",
placeholder: "Enter your Securili email",
value: d,
onChange: (o) => M(o.target.value),
style: P,
onFocus: b,
onBlur: S,
disabled: t
}
)
] }),
!i && !F && /* @__PURE__ */ c("div", { style: { marginBottom: e.spacing.md }, children: [
/* @__PURE__ */ r(
"button",
{
onClick: () => T("login"),
style: f,
onMouseEnter: x,
onMouseLeave: w,
disabled: t || !d,
children: t ? "Processing..." : "Login with Securili"
}
),
/* @__PURE__ */ r(
"button",
{
onClick: () => T("signup"),
style: { ...H, marginTop: e.spacing.sm },
onMouseEnter: q,
onMouseLeave: K,
disabled: t || !d,
children: t ? "Processing..." : "Signup with Securili"
}
)
] }),
i && /* @__PURE__ */ c("div", { style: { marginBottom: e.spacing.md }, children: [
/* @__PURE__ */ r("div", { style: N, children: /* @__PURE__ */ r("p", { style: { color: e.colors.text.primary, margin: 0 }, children: "Enter your 6-digit authenticator code" }) }),
/* @__PURE__ */ r(
"input",
{
type: "text",
placeholder: "Enter 2FA code",
value: a,
onChange: (o) => k(o.target.value.replace(/\D/g, "").slice(0, 6)),
style: E,
onFocus: b,
onBlur: S,
onKeyDown: (o) => {
o.key === "Enter" && a.length === 6 && !t && R();
},
disabled: t
}
),
/* @__PURE__ */ r(
"button",
{
onClick: R,
style: { ...f, marginTop: e.spacing.md },
onMouseEnter: x,
onMouseLeave: w,
disabled: t || a.length !== 6,
children: t ? "Verifying..." : "Verify 2FA Code"
}
)
] }),
F && !i && /* @__PURE__ */ c("div", { style: { marginBottom: e.spacing.md }, children: [
/* @__PURE__ */ r("label", { style: O, children: "Enter OTP Code" }),
/* @__PURE__ */ r(
"input",
{
type: "text",
placeholder: "Enter OTP",
value: a,
onChange: (o) => k(o.target.value.replace(/\D/g, "").slice(0, 6)),
style: E,
onFocus: b,
onBlur: S,
onKeyDown: (o) => {
o.key === "Enter" && a && !t && $();
},
disabled: t
}
),
/* @__PURE__ */ r(
"button",
{
onClick: $,
style: { ...f, marginTop: e.spacing.md },
onMouseEnter: x,
onMouseLeave: w,
disabled: t || !a,
children: t ? "Verifying..." : "Confirm OTP"
}
)
] }),
/* @__PURE__ */ r("div", { style: J, children: /* @__PURE__ */ c("p", { style: X, children: [
"Powered by",
" ",
/* @__PURE__ */ r("span", { style: { color: e.colors.primary }, children: "Securili" })
] }) })
] });
};
export {
Z as SecuriliWidget,
Z as default
};