@salad-labs/loopz-typescript
Version:
The Official Loopz TypeScript SDK
98 lines • 7.67 kB
JavaScript
"use client";
import React from "react";
import { XMarkIcon } from "@heroicons/react/24/outline";
const LoopzEmailForm = ({ handleRequestCode, handleVerifyCode, setEmail, setCode, setStep, email, code, step, logoURL, tosURL, privacyURL, translations, loading, error, success, onClose, onBack, }) => {
return (React.createElement("div", { className: "w-full p-6 shadow-2xl relative overflow-hidden", style: {
backgroundColor: "rgb(31,31,30)",
borderRadius: "24px",
} },
onClose && (React.createElement("button", { onClick: onClose, className: "absolute top-3 right-3 text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-full hover:bg-gray-100", "aria-label": "Close" },
React.createElement(XMarkIcon, { className: "h-5 w-5" }))),
React.createElement("div", { className: "flex flex-col w-full" },
React.createElement("div", { className: "text-center w-full text-white font-normal" }, translations.titleApp),
React.createElement("div", { className: "flex items-center justify-center w-full", style: {
marginTop: "35px",
marginBottom: "35px",
} },
React.createElement("img", { src: logoURL, style: {
maxHeight: "90px",
maxWidth: "180px",
} }))),
step === "code" && (React.createElement("div", { className: "flex flex-col items-center justify-center gap-y-2", style: {
marginBottom: "50px",
} },
React.createElement("h2", { className: "text-lg font-normal text-center text-white" }, `${translations.stepVerificationCodeLabel}`),
React.createElement("p", { className: "text-white font-normal text-xs text-center" }, `${translations.stepVerificationCodeDescriptionLabel}`))),
error && (React.createElement("div", { className: "mb-4 p-3 bg-red-50 text-xs border-l-4 border-red-500 text-red-700 rounded-md animate-fadeIn", style: {
marginBottom: "35px",
} }, error)),
step === "email" ? (React.createElement("form", { onSubmit: handleRequestCode, className: "space-y-4" },
React.createElement("div", { className: "space-y-2" },
React.createElement("input", { type: "email", id: "email", className: "w-full px-4 py-3 text-sm border border-solid text-white placeholder:text-gray-200 focus:outline-none transition-shadow", value: email, onChange: (e) => setEmail(e.target.value), required: true, autoComplete: "email", placeholder: "your@email.com", autoFocus: true, style: {
backgroundColor: "transparent",
borderColor: "#b0b0b0",
borderRadius: "16px",
}, onFocus: (event) => {
const target = event.target;
target.style.borderColor = "#fff";
}, onBlur: (event) => {
const target = event.target;
target.style.borderColor = "#909090";
} }),
React.createElement("div", { className: "w-full text-center text-white text-xs", style: { marginTop: "15px" } },
"By logging in, you agree to the",
" ",
React.createElement("a", { className: "font-semibold text-white", href: tosURL, target: "_blank" }, "Terms"),
" ",
"and",
" ",
React.createElement("a", { className: "font-semibold text-white", href: privacyURL, target: "_blank" }, "Privacy Policy"),
".")),
React.createElement("button", { type: "submit", disabled: loading, className: `w-full py-3 px-4 rounded-lg bg-primary-blue hover:bg-primary-dark-blue text-white font-medium hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 transform hover:-translate-y-0.5 ${loading ? "opacity-70 cursor-not-allowed" : ""}` }, loading
? `${translations.buttonSendingVerificationLabel}`
: `${translations.buttonSendVerificationLabel}`))) : (React.createElement("form", { onSubmit: handleVerifyCode, className: "space-y-4" },
React.createElement("div", { className: "space-y-2" },
React.createElement("div", { className: "relative" },
React.createElement("input", { type: "text", id: "code", className: "w-full px-4 py-3 text-white border border-solid focus:outline-none text-lg tracking-widest text-center otp-code", value: code, onChange: (e) => setCode(e.target.value.replace(/\D/g, "").slice(0, 6)), required: true, autoComplete: "one-time-code", placeholder: "123456", maxLength: 6, pattern: "\\d{6}", autoFocus: true, style: {
backgroundColor: "transparent",
borderColor: "#b0b0b0",
borderRadius: "16px",
}, onFocus: (event) => {
const target = event.target;
target.style.borderColor = "#fff";
}, onBlur: (event) => {
const target = event.target;
target.style.borderColor = "#909090";
} }),
React.createElement("style", { type: "text/css" }, `
.otp-code::placeholder {
color: gray;
}
`),
React.createElement("div", { className: "absolute bottom-full left-0 mb-1 text-sm whitespace-nowrap", style: {
color: "#909090",
} },
translations.sixDigitDescriptionLabel,
" "))),
React.createElement("div", { className: "flex gap-3" },
React.createElement("button", { type: "button", onClick: () => {
setStep("email");
if (onBack)
onBack();
}, className: "py-3 px-4 rounded-lg text-black font-medium bg-white hover:bg-white transition-colors" }, translations.backLabel),
React.createElement("button", { type: "submit", disabled: loading || code.length !== 6, className: `flex-1 py-3 px-4 rounded-lg text-white bg-primary-blue hover:bg-primary-dark-blue ${loading || code.length !== 6
? "opacity-70 cursor-not-allowed"
: ""}` }, loading
? `${translations.buttonVerifyingCodeLabel}`
: `${translations.buttonVerifyCodeLabel}`)),
React.createElement("button", { type: "button", onClick: handleRequestCode, className: "w-full py-2 px-4 rounded-md text-blue-600 font-medium hover:text-blue-800 focus:outline-none focus:underline transition-all duration-200" }, `${translations.resendVerificationCodeLabel}`))),
React.createElement("div", { className: "flex items-center justify-center gap-x-2 w-full text-center text-white text-xs", style: {
marginTop: "20px",
} },
"Powered by",
" ",
React.createElement("a", { href: "https://www.saladlabs.xyz/portfolio/sdk/", target: "_blank" },
React.createElement("img", { src: "https://s3.eu-west-1.amazonaws.com/media.loopz.xyz/static/logo-loopz.svg", style: { height: "15px" } })))));
};
export default LoopzEmailForm;
//# sourceMappingURL=loopzemailform.js.map