@solidstarters/solid-core-ui 1.1.210 → 1.1.212

package/dist/components/auth/SolidLogin.tsx

@@ -0,0 +1,428 @@
+"use client";
+
+import { Form, Formik } from "formik";
+import { signIn } from "next-auth/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { Divider } from "primereact/divider";
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
+import { Password } from "primereact/password";
+import { TabPanel, TabView } from 'primereact/tabview';
+import { Toast } from "primereact/toast";
+import { useEffect, useRef, useState } from "react";
+import * as Yup from "yup";
+import { SocialMediaLogin } from "../common/SocialMediaLogin";
+import { useInitateLoginMutation } from "../../redux/api/authApi";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SolidXLogo.svg'
+import { formatTimeLeft } from "../../helpers/resendOtpHelper";
+import { ERROR_MESSAGES } from "../../constants/error-messages";
+import { RadioButton } from "primereact/radiobutton";
+import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
+// import { Checkbox } from "primereact/checkbox";
+interface AuthTabsProps {
+    passwordBasedAuth: boolean;
+    passwordLessAuth: boolean;
+}
+const SolidLogin = ({ signInValidatorLabel, signInValidatorPlaceholder }: any) => {
+
+    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
+    useEffect(() => {
+        trigger("") // Fetch settings on mount
+    }, [trigger])
+
+    const [initiateLogin] = useInitateLoginMutation();
+    const [activeIndex, setActiveIndex] = useState(0);
+    useEffect(() => {
+        sessionStorage.removeItem("app-mounted");
+    }, [])
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+                ? { sticky: true }            // stays until user closes
+                : { life: 3000 }),
+        });
+    };
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+    const emailOrUsernameRegex = /^[a-zA-Z0-9._]{3,30}$/;
+
+    const PasswordLogin = () => {
+        return (
+            <Formik
+                initialValues={{
+                    identifier: "",
+                    // email: initialEmail,
+                    password: "",
+                    // rememberMe: rememberMe,
+                }}
+                enableReinitialize={false}
+                validationSchema={Yup.object({
+                    identifier: Yup.string()
+                        .required(ERROR_MESSAGES.FIELD_REUQIRED("Email or Username"))
+                        .test(
+                            "email-or-username",
+                            ERROR_MESSAGES.FIELD_INVALID("email or username"),
+                            (value) => {
+                                // if (!value) return false;
+
+                                const isEmail = Yup.string().email().isValidSync(value);
+                                const isUsername = emailOrUsernameRegex.test(value);
+
+                                return isEmail || isUsername;
+                            }
+                        ),
+                    password: Yup.string().required(ERROR_MESSAGES.FIELD_REUQIRED("Password")),
+                })}
+                onSubmit={async (values, { setSubmitting, setErrors }) => {
+                    try {
+                        // Handle Remember Me
+                        // if (values.rememberMe) {
+                        //     localStorage.setItem("rememberedEmail", values.email);
+                        // } else {
+                        //     localStorage.removeItem("rememberedEmail");
+                        // }
+                        const response = await signIn("credentials", {
+                            redirect: false,
+                            identifier: values.identifier,
+                            password: values.password,
+                        });
+
+                        if (response?.error) {
+                            showToast("error", ERROR_MESSAGES.LOGIN_ERROR, response.error);
+                            setErrors({
+                                identifier: ERROR_MESSAGES.INVALID_CREDENTIALS,
+                                password: ERROR_MESSAGES.INVALID_CREDENTIALS,
+                            });
+                        } else {
+                            showToast("success", ERROR_MESSAGES.LOGIN_SUCCESS, ERROR_MESSAGES.DASHBOARD_REDIRECTING);
+                            router.push(`${process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL}`);
+                        }
+                    } catch (error: any) {
+                        showToast("error", ERROR_MESSAGES.LOGIN_ERROR, error?.data ? error?.data?.message : ERROR_MESSAGES.SOMETHING_WRONG);
+                    } finally {
+                        setSubmitting(false); // Re-enable the button after submission
+                    }
+                }}
+            >
+                {(formik) => (
+                    <Form>
+                        <div className="flex flex-column gap-2 mt-3">
+                            <label htmlFor="email" className="solid-auth-input-label">{signInValidatorLabel ? signInValidatorLabel : "Username or Email"}</label>
+                            <InputText
+                                id="identifier"
+                                name="identifier"
+                                placeholder={signInValidatorPlaceholder ? signInValidatorPlaceholder : "Email or Username"}
+                                onChange={formik.handleChange}
+                                value={formik.values.identifier}
+                                invalid={!!formik.errors.identifier}
+                                onBlur={formik.handleBlur}
+                            />
+                            {isFormFieldValid(formik, "identifier") && <Message
+                                className="text-red-500 text-sm"
+                                severity="error"
+                                text={formik?.errors?.identifier?.toString()}
+                            />}
+                        </div>
+                        <div className="flex flex-column gap-1 mt-4" style={{}}>
+                            <label htmlFor="password" className="solid-auth-input-label">Password</label>
+                            <Password
+                                id="password"
+                                name="password"
+                                value={formik.values.password}
+                                onChange={formik.handleChange}
+                                toggleMask
+                                invalid={!!formik.errors.password}
+                                inputClassName="w-full"
+                                feedback={false}
+                            />
+                            {isFormFieldValid(formik, "password") && <Message
+                                className="text-red-500 text-sm"
+                                severity="error"
+                                text={formik?.errors?.password?.toString()}
+                            />}
+                        </div>
+                        {/* <div className="flex align-items-center mt-4">
+                                    <Checkbox inputId="remember" onChange={(e: any) => setChecked(e.checked)} checked={checked} />
+                                    <label htmlFor="remember" className="ml-2">Remember me</label>
+                                </div> */}
+                        <div className="mt-4 flex align-items-center justify-content-between">
+                            {/* <div className="flex align-items-center gap-2">
+                                <Checkbox
+                                    inputId="rememberMe"
+                                    name="rememberMe"
+                                    checked={formik.values.rememberMe}
+                                    onChange={formik.handleChange}
+                                />
+                                <label htmlFor="rememberMe" className="solid-auth-input-label">Remember me</label>
+                            </div> */}
+                            <div></div>
+                            <Link href={"/auth/initiate-forgot-password"} className="solid-auth-input-label font-bold">Forgot Password?</Link>
+                        </div>
+                        <div className="mt-4">
+                            <Button className="w-full font-light auth-submit-button" label="Sign In" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                        </div>
+                    </Form>
+                )}
+            </Formik>
+        )
+    }
+
+    const PasswordLessLogin = () => {
+        const validationType = solidSettingsData?.data?.passwordlessRegistrationValidateWhat || "email";
+        const [selectedAuthMethod, setSelectedAuthMethod] = useState<"email" | "mobile">("email");
+
+        const getFieldConfig = () => {
+            if (validationType === "transactional") {
+                if (selectedAuthMethod === "mobile") {
+                    return {
+                        label: "Mobile Number / Username",
+                        placeholder: "Enter your mobile number or username",
+                        type: "mobile",
+                        // validationSchema: Yup.string()
+                        //     .matches(/^[0-9]{10}$/, ERROR_MESSAGES.FIELD_INVALID('mobile number'))
+                        //     .required(ERROR_MESSAGES.FIELD_REUQIRED('Mobile number'))
+                    };
+                } else {
+                    return {
+                        label: "Email Address / Username",
+                        placeholder: "Enter your email or username",
+                        type: "email",
+                        // validationSchema: Yup.string()
+                        //     .email(ERROR_MESSAGES.FIELD_INVALID('email address'))
+                        //     .required(ERROR_MESSAGES.FIELD_REUQIRED('Email'))
+                    };
+                }
+            }
+            switch (validationType) {
+                case "mobile":
+                    return {
+                        label: signInValidatorLabel || "Mobile Number / Username",
+                        placeholder: signInValidatorPlaceholder || "Enter your mobile number / username",
+                        type: "mobile",
+                        // validationSchema: Yup.string()
+                        //     .matches(/^[0-9]{10}$/, ERROR_MESSAGES.FIELD_INVALID('mobile number'))
+                        //     .required(ERROR_MESSAGES.FIELD_REUQIRED('Mobile number'))
+                    };
+                case "email":
+                default:
+                    return {
+                        label: signInValidatorLabel || "Email / Username",
+                        placeholder: signInValidatorPlaceholder || "Email ID / username",
+                        type: "email",
+                        // validationSchema: Yup.string()
+                        //     .email(ERROR_MESSAGES.FIELD_INVALID('email address'))
+                        //     .required(ERROR_MESSAGES.FIELD_REUQIRED('Email'))
+                    };
+            }
+        };
+
+        const fieldConfig = getFieldConfig();
+        return (
+            <Formik
+                initialValues={{
+                    identifier: "",
+                }}
+                // validationSchema={
+                //     fieldConfig.validationSchema 
+                //     ? Yup.object({
+                //           identifier: fieldConfig.validationSchema
+                //       })
+                //     : Yup.object({
+                //           identifier: Yup.string().required("required"),
+                //       })
+                //   }
+                validationSchema={
+                    Yup.object({ identifier: Yup.string().required("required") })
+                }
+                enableReinitialize={false}
+                onSubmit={async (values, { setSubmitting, setErrors }) => {
+                    try {
+                        const RESEND_OTP_KEY = `resendOtpLogin_${values.identifier}`;
+                        const RESEND_OTP_TIMER_MIN = parseFloat(process.env.NEXT_PUBLIC_RESEND_OTP_TIMER || '0.5');
+                        const RESEND_OTP_TIMER = Math.round(RESEND_OTP_TIMER_MIN * 60);
+
+                        // Use selectedAuthMethod for transactional, otherwise use fieldConfig.type
+                        const authType = validationType === "transactional" ? selectedAuthMethod : fieldConfig.type;
+
+                        const payload = {
+                            type: authType,
+                            identifier: values.identifier,
+                        };
+
+                        const storedTimeStr = localStorage.getItem(RESEND_OTP_KEY);
+                        const now = Date.now();
+                        if (storedTimeStr) {
+                            const lastSent = parseInt(storedTimeStr, 10);
+                            const elapsed = Math.floor((now - lastSent) / 1000);
+                            const remaining = RESEND_OTP_TIMER - elapsed;
+
+                            if (remaining > 0) {
+                                const formatted = formatTimeLeft(remaining);
+                                showToast(
+                                    "error",
+                                    ERROR_MESSAGES.PLEASE_WAIT,
+                                    ERROR_MESSAGES.OPT_FORMAT(formatted)
+                                );
+                                setSubmitting(false);
+                                return; //  Prevent request
+                            }
+                        }
+                        const response = await initiateLogin(payload).unwrap(); // Call mutation trigger
+
+                        if (response?.statusCode === 200) {
+                            showToast("success", ERROR_MESSAGES.OPT_RESEND, response?.data?.message);
+                            const identifier = values.identifier;
+                            localStorage.setItem(`resendOtpLogin_${identifier}`, Date.now().toString());
+                            router.push(`/auth/initiate-login?identifier=${encodeURIComponent(identifier)}&type=${authType}`);
+                        } else {
+                            showToast("error", ERROR_MESSAGES.LOGIN_ERROR, response.error);
+                        }
+                    } catch (err: any) {
+                        showToast("error", ERROR_MESSAGES.LOGIN_ERROR, err?.data ? err?.data?.message : ERROR_MESSAGES.SOMETHING_WRONG);
+                        setErrors({
+                            identifier: "Invalid Credentials",
+                        });
+                    } finally {
+                        setSubmitting(false);
+                    }
+                }}
+            >
+                {(formik) => (
+                    <Form>
+                        {/* Radio buttons for transactional type */}
+                        {validationType === "transactional" && (
+                            <div className="flex flex-column gap-3 mt-3">
+                                <label className="solid-auth-input-label">Select Authentication Method</label>
+                                <div className="flex gap-4">
+                                    <div className="flex align-items-center">
+                                        <RadioButton
+                                            inputId="auth-email"
+                                            name="authMethod"
+                                            value="email"
+                                            checked={selectedAuthMethod === "email"}
+                                            onChange={(e) => {
+                                                setSelectedAuthMethod("email");
+                                                formik.setFieldValue("identifier", "");
+                                            }}
+                                            className="mr-2"
+                                        />
+                                        <label htmlFor="auth-email" className="solid-auth-input-label cursor-pointer">Email / Username</label>
+                                    </div>
+                                    <div className="flex align-items-center">
+                                        <RadioButton
+                                            inputId="auth-mobile"
+                                            name="authMethod"
+                                            value="mobile"
+                                            checked={selectedAuthMethod === "mobile"}
+                                            onChange={(e) => {
+                                                setSelectedAuthMethod("mobile");
+                                                formik.setFieldValue("identifier", "");
+                                            }}
+                                            className="mr-2"
+                                        />
+                                        <label htmlFor="auth-mobile" className="solid-auth-input-label cursor-pointer">Mobile / Username</label>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                        <div className="flex flex-column gap-2 mt-3">
+                            <label htmlFor="identifier" className="solid-auth-input-label">{fieldConfig.label}</label>
+                            <InputText
+                                id="identifier"
+                                name="identifier"
+                                placeholder={fieldConfig.placeholder}
+                                onChange={formik.handleChange}
+                                value={formik.values.identifier}
+                                invalid={!!formik.errors.identifier}
+                                onBlur={formik.handleBlur}
+                            />
+                            {isFormFieldValid(formik, "identifier") && <Message
+                                className="text-red-500 text-sm"
+                                severity="error"
+                                text={formik?.errors?.identifier?.toString()}
+                            />}
+                        </div>
+                        <div className="mt-4">
+                            <Button className="w-full font-light auth-submit-button" label="Sign In" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                        </div>
+                    </Form>
+                )}
+            </Formik>
+        )
+    }
+
+    const AuthTabs: React.FC<AuthTabsProps> = ({ passwordBasedAuth, passwordLessAuth }) => {
+        if (passwordBasedAuth && passwordLessAuth) {
+            return (
+                <TabView className="solid-auth-tabview"
+                    activeIndex={activeIndex}
+                    onTabChange={(e) => setActiveIndex(e.index)}
+                >
+                    <TabPanel header="With Password">
+                        <PasswordLogin />
+                    </TabPanel>
+                    <TabPanel header="Without Password">
+                        <PasswordLessLogin />
+                    </TabPanel>
+                </TabView>
+            );
+        } else if (passwordBasedAuth) {
+            return <PasswordLogin />;
+        } else if (passwordLessAuth) {
+            return <PasswordLessLogin />;
+        } else {
+            return <p>No authentication method available</p>;
+        }
+    };
+
+    return (
+        <div className="">
+            <Toast ref={toast} />
+            <div className={`auth-container ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'center' : 'side'}`}>
+                {solidSettingsData?.data?.authPagesLayout === 'center' &&
+                    <div className="flex justify-content-center">
+                        <div className={`solid-logo flex align-items-center ${solidSettingsData?.data?.appLogoPosition}`}>
+                            <Image
+                                alt="solid logo"
+                                src={solidSettingsData?.data?.appLogo || SolidLogo}
+                                className="relative"
+                                fill
+                            />
+                        </div>
+                    </div>
+                }
+                <h2 className={`solid-auth-title ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'text-center mt-2 md:mt-4' : 'text-left'}`}>Sign In To Your Account</h2>
+                {/* <p className="solid-auth-subtitle text-sm">By continuing, you agree to the <Link href={'#'}>Terms of Service</Link> and acknowledge you’ve read our  <Link href={'#'}>Privacy Policy.</Link> </p> */}
+
+                <AuthTabs passwordBasedAuth={solidSettingsData?.data?.passwordBasedAuth} passwordLessAuth={solidSettingsData?.data?.passwordLessAuth} />
+                {solidSettingsData?.data?.iamGoogleOAuthEnabled &&
+                    <>
+                        <Divider align="center">
+                            <div className="inline-flex align-items-center">
+                                OR
+                            </div>
+                        </Divider>
+                        <SocialMediaLogin />
+                    </>
+                }
+            </div>
+            {solidSettingsData?.data?.allowPublicRegistration && <div className="mt-3 md:mt-5">
+                <div className="text-sm text-center text-400 secondary-dark-color">
+                    Don’t have an account ? <Link className="font-bold" href="/auth/register">Sign Up</Link>
+                </div>
+            </div>}
+        </div>
+    );
+};
+
+export default SolidLogin;

package/dist/components/auth/SolidOTPVerify.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidOTPVerify.d.ts","sourceRoot":"","sources":["../../../src/components/auth/SolidOTPVerify.tsx"],"names":[],"mappings":"AAmBA,QAAA,MAAM,cAAc,+CA+GnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SolidOTPVerify.d.ts","sourceRoot":"./","sources":["components/auth/SolidOTPVerify.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,cAAc,+CAmHnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/auth/SolidOTPVerify.js

@@ -1,51 +1,4 @@
 "use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Form, Formik } from "formik";
 import { signIn } from "next-auth/react";
@@ -55,69 +8,60 @@ import { Button } from "primereact/button";
 import { InputOtp } from "primereact/inputotp";
 import { Message } from "primereact/message";
 import { Toast } from "primereact/toast";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import * as Yup from "yup";
-import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
+import { useSelector } from "react-redux";
 import Image from "next/image";
 import SolidLogo from '../../resources/images/SolidXLogo.svg';
 import { ERROR_MESSAGES } from "../../constants/error-messages";
-var SolidOTPVerify = function () {
-    var _a, _b, _c, _d, _e;
-    var _f = useLazyGetAuthSettingsQuery(), trigger = _f[0], solidSettingsData = _f[1].data;
-    useEffect(function () {
-        trigger("");
-    }, [trigger]);
-    var _g = useState(), otp = _g[0], setOTP = _g[1];
-    var toast = useRef(null);
-    var router = useRouter();
-    var _h = useState(''), password = _h[0], setPassword = _h[1];
-    var _j = useState(false), checked = _j[0], setChecked = _j[1];
-    var validationSchema = Yup.object({
+const SolidOTPVerify = () => {
+    // const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
+    // useEffect(() => {
+    //     trigger("") // Fetch settings on mount
+    // }, [trigger])
+    const solidSettingsData = useSelector((state) => state.settingsState?.solidSettings);
+    const [otp, setOTP] = useState();
+    const toast = useRef(null);
+    const router = useRouter();
+    const [password, setPassword] = useState('');
+    const [checked, setChecked] = useState(false);
+    const validationSchema = Yup.object({
         email: Yup.string()
             .email(ERROR_MESSAGES.FIELD_INVALID(' email address'))
             .required(ERROR_MESSAGES.FIELD_REUQIRED('Email')),
     });
-    var showToast = function (severity, summary, detail) {
-        var _a;
-        (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show(__assign({ severity: severity, summary: summary, detail: detail }, (severity === "error"
-            ? { sticky: true } // stays until user closes
-            : { life: 3000 })));
-    };
-    var isFormFieldValid = function (formik, fieldName) {
-        return formik.touched[fieldName] && formik.errors[fieldName];
+    const showToast = (severity, summary, detail) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+                ? { sticky: true } // stays until user closes
+                : { life: 3000 }),
+        });
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Toast, { ref: toast }), _jsxs("div", { className: "auth-container ".concat(((_a = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _a === void 0 ? void 0 : _a.authPagesLayout) === 'center' ? 'center' : 'side'), style: { minWidth: 480 }, children: [((_b = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _b === void 0 ? void 0 : _b.authPagesLayout) === 'center' &&
-                        _jsx("div", { className: "flex justify-content-center", children: _jsx("div", { className: "solid-logo flex align-items-center ".concat((_c = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _c === void 0 ? void 0 : _c.appLogoPosition), children: _jsx(Image, { alt: "solid logo", src: ((_d = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _d === void 0 ? void 0 : _d.appLogo) || SolidLogo, className: "relative", fill: true }) }) }), _jsx("h2", { className: "solid-auth-title ".concat(((_e = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _e === void 0 ? void 0 : _e.authPagesLayout) === 'center' ? 'text-center' : 'text-left'), children: "OTP Verification" }), _jsx("p", { className: "solid-auth-subtitle text-sm", children: "Please enter the OTP sent to your email to complete verification" }), _jsx(_Fragment, { children: _jsx(Formik, { initialValues: {
+    const isFormFieldValid = (formik, fieldName) => formik.touched[fieldName] && formik.errors[fieldName];
+    return (_jsxs(_Fragment, { children: [_jsx(Toast, { ref: toast }), _jsxs("div", { className: `auth-container ${solidSettingsData?.authPagesLayout === 'center' ? 'center' : 'side'}`, style: { minWidth: 480 }, children: [solidSettingsData?.authPagesLayout === 'center' &&
+                        _jsx("div", { className: "flex justify-content-center", children: _jsx("div", { className: `solid-logo flex align-items-center ${solidSettingsData?.appLogoPosition}`, children: _jsx(Image, { alt: "solid logo", src: solidSettingsData?.appLogo || SolidLogo, className: "relative", fill: true }) }) }), _jsx("h2", { className: `solid-auth-title ${solidSettingsData?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`, children: "OTP Verification" }), _jsx("p", { className: "solid-auth-subtitle text-sm", children: "Please enter the OTP sent to your email to complete verification" }), _jsx(_Fragment, { children: _jsx(Formik, { initialValues: {
                                 email: "",
                                 password: "",
-                            }, validationSchema: validationSchema, onSubmit: function (values) { return __awaiter(void 0, void 0, void 0, function () {
-                                var email, password, response;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
-                                        case 0:
-                                            email = values.email;
-                                            password = values.password;
-                                            return [4 /*yield*/, signIn("credentials", {
-                                                    redirect: false,
-                                                    email: email,
-                                                    password: password,
-                                                })];
-                                        case 1:
-                                            response = _a.sent();
-                                            if (response === null || response === void 0 ? void 0 : response.error) {
-                                                showToast("error", ERROR_MESSAGES.LOGIN_ERROR, response.error);
-                                            }
-                                            else {
-                                                showToast("success", ERROR_MESSAGES.LOGIN_SUCCESS, ERROR_MESSAGES.DASHBOARD_REDIRECTING);
-                                                router.push("".concat(process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL));
-                                            }
-                                            return [2 /*return*/];
-                                    }
+                            }, validationSchema: validationSchema, onSubmit: async (values) => {
+                                // Handle form submission
+                                const email = values.email;
+                                const password = values.password;
+                                const response = await signIn("credentials", {
+                                    redirect: false,
+                                    email,
+                                    password,
                                 });
-                            }); }, children: function (formik) {
-                                var _a, _b;
-                                return (_jsxs(Form, { children: [_jsxs("div", { className: "flex flex-column gap-2 px-3", children: [_jsx("label", { htmlFor: "email", className: "solid-auth-input-label", children: "Enter OTP" }), _jsx(InputOtp, { value: otp, onChange: function (e) { return setOTP(e.value); }, length: 6, style: { width: '100%' } }), isFormFieldValid(formik, "email") && _jsx(Message, { className: "text-red-500 text-sm", severity: "error", text: (_b = (_a = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _a === void 0 ? void 0 : _a.email) === null || _b === void 0 ? void 0 : _b.toString() }), _jsxs("div", { className: "flex align-items-center justify-content-between", children: [_jsx(Button, { type: "button", icon: 'pi pi-refresh', iconPos: "left", link: true, label: "Resend Code", className: "px-0 text-sm font-normal" }), _jsx("p", { className: "m-0 text-sm text-color", children: "Time left: 00:28" })] })] }), _jsx("div", { className: "mt-4", children: _jsx(Button, { type: "submit", className: "w-full font-light auth-submit-button", label: "Verify", disabled: formik.isSubmitting, loading: formik.isSubmitting }) })] }));
-                            } }) })] }), _jsx("div", { className: "text-center mt-5", children: _jsxs("div", { className: "text-sm text-400 secondary-dark-color", children: ['<', " Back to ", _jsx(Link, { className: "font-bold", href: "/auth/login", children: "Sign In" })] }) })] }));
+                                if (response?.error) {
+                                    showToast("error", ERROR_MESSAGES.LOGIN_ERROR, response.error);
+                                }
+                                else {
+                                    showToast("success", ERROR_MESSAGES.LOGIN_SUCCESS, ERROR_MESSAGES.DASHBOARD_REDIRECTING);
+                                    router.push(`${process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL}`);
+                                }
+                            }, children: (formik) => (_jsxs(Form, { children: [_jsxs("div", { className: "flex flex-column gap-2 px-3", children: [_jsx("label", { htmlFor: "email", className: "solid-auth-input-label", children: "Enter OTP" }), _jsx(InputOtp, { value: otp, onChange: (e) => setOTP(e.value), length: 6, style: { width: '100%' } }), isFormFieldValid(formik, "email") && _jsx(Message, { className: "text-red-500 text-sm", severity: "error", text: formik?.errors?.email?.toString() }), _jsxs("div", { className: "flex align-items-center justify-content-between", children: [_jsx(Button, { type: "button", icon: 'pi pi-refresh', iconPos: "left", link: true, label: "Resend Code", className: "px-0 text-sm font-normal" }), _jsx("p", { className: "m-0 text-sm text-color", children: "Time left: 00:28" })] })] }), _jsx("div", { className: "mt-4", children: _jsx(Button, { type: "submit", className: "w-full font-light auth-submit-button", label: "Verify", disabled: formik.isSubmitting, loading: formik.isSubmitting }) })] })) }) })] }), _jsx("div", { className: "text-center mt-5", children: _jsxs("div", { className: "text-sm text-400 secondary-dark-color", children: ['<', " Back to ", _jsx(Link, { className: "font-bold", href: "/auth/login", children: "Sign In" })] }) })] }));
 };
 export default SolidOTPVerify;
 //# sourceMappingURL=SolidOTPVerify.js.map

package/dist/components/auth/SolidOTPVerify.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidOTPVerify.js","sourceRoot":"","sources":["../../../src/components/auth/SolidOTPVerify.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SolidOTPVerify.js","sourceRoot":"./","sources":["components/auth/SolidOTPVerify.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport { Form, Formik } from \"formik\";\nimport { signIn } from \"next-auth/react\";\nimport Link from \"next/link\";\nimport { useRouter } from \"next/navigation\";\nimport { Button } from \"primereact/button\";\nimport { InputOtp } from \"primereact/inputotp\";\nimport { Message } from \"primereact/message\";\nimport { Toast } from \"primereact/toast\";\nimport { useRef, useState } from \"react\";\nimport * as Yup from \"yup\";\nimport { useSelector } from \"react-redux\";\nimport Image from \"next/image\";\nimport SolidLogo from '../../resources/images/SolidXLogo.svg'\nimport { ERROR_MESSAGES } from \"../../constants/error-messages\";\n\nconst SolidOTPVerify = () => {\n\n    // const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();\n    // useEffect(() => {\n    //     trigger(\"\") // Fetch settings on mount\n    // }, [trigger])\n\n    const solidSettingsData = useSelector((state: any) => state.settingsState?.solidSettings);\n\n    const [otp, setOTP] = useState<number | any>();\n\n    const toast = useRef<Toast>(null);\n    const router = useRouter();\n\n    const [password, setPassword] = useState('');\n    const [checked, setChecked] = useState<boolean>(false);\n\n    const validationSchema = Yup.object({\n        email: Yup.string()\n            .email(ERROR_MESSAGES.FIELD_INVALID(' email address'))\n            .required(ERROR_MESSAGES.FIELD_REUQIRED('Email')),\n    });\n\n    const showToast = (severity: \"success\" | \"error\", summary: string, detail: string) => {\n        toast.current?.show({\n            severity,\n            summary,\n            detail,\n            ...(severity === \"error\"\n                ? { sticky: true }            // stays until user closes\n                : { life: 3000 }),\n        });\n    };\n\n    const isFormFieldValid = (formik: any, fieldName: string) =>\n        formik.touched[fieldName] && formik.errors[fieldName];\n\n    return (\n        <>\n            <Toast ref={toast} />\n            <div className={`auth-container ${solidSettingsData?.authPagesLayout === 'center' ? 'center' : 'side'}`} style={{ minWidth: 480 }}>\n                {solidSettingsData?.authPagesLayout === 'center' &&\n                    <div className=\"flex justify-content-center\">\n                        <div className={`solid-logo flex align-items-center ${solidSettingsData?.appLogoPosition}`}>\n                            <Image\n                                alt=\"solid logo\"\n                                src={solidSettingsData?.appLogo || SolidLogo}\n                                className=\"relative\"\n                                fill\n                            />\n                        </div>\n                    </div>\n                }\n                <h2 className={`solid-auth-title ${solidSettingsData?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`}>OTP Verification</h2>\n                <p className=\"solid-auth-subtitle text-sm\">\n                    Please enter the OTP sent to your email to complete verification\n                </p>\n                <>\n                    <Formik\n                        initialValues={{\n                            email: \"\",\n                            password: \"\",\n                        }}\n                        validationSchema={validationSchema}\n                        onSubmit={async (values) => {\n                            // Handle form submission\n                            const email = values.email;\n                            const password = values.password;\n\n                            const response = await signIn(\"credentials\", {\n                                redirect: false,\n                                email,\n                                password,\n                            });\n                            if (response?.error) {\n                                showToast(\"error\", ERROR_MESSAGES.LOGIN_ERROR, response.error);\n                            } else {\n                                showToast(\"success\", ERROR_MESSAGES.LOGIN_SUCCESS, ERROR_MESSAGES.DASHBOARD_REDIRECTING);\n                                router.push(`${process.env.NEXT_PUBLIC_LOGIN_REDIRECT_URL}`);\n                            }\n\n                        }}\n                    >\n                        {(formik) => (\n                            <Form>\n                                <div className=\"flex flex-column gap-2 px-3\">\n                                    <label htmlFor=\"email\" className=\"solid-auth-input-label\">Enter OTP</label>\n                                    <InputOtp value={otp} onChange={(e) => setOTP(e.value)} length={6} style={{ width: '100%' }} />\n                                    {isFormFieldValid(formik, \"email\") && <Message\n                                        className=\"text-red-500 text-sm\"\n                                        severity=\"error\"\n                                        text={formik?.errors?.email?.toString()}\n                                    />}\n                                    <div className=\"flex align-items-center justify-content-between\">\n                                        <Button type=\"button\" icon='pi pi-refresh' iconPos=\"left\" link label=\"Resend Code\" className=\"px-0 text-sm font-normal\" />\n                                        <p className=\"m-0 text-sm text-color\">\n                                            Time left: 00:28\n                                        </p>\n                                    </div>\n                                </div>\n                                <div className=\"mt-4\">\n                                    <Button type=\"submit\" className=\"w-full font-light auth-submit-button\" label=\"Verify\" disabled={formik.isSubmitting} loading={formik.isSubmitting} />\n                                </div>\n                            </Form>\n                        )}\n                    </Formik>\n                </>\n            </div>\n            <div className=\"text-center mt-5\">\n                <div className=\"text-sm text-400 secondary-dark-color\">\n                    {'<'} Back to <Link className=\"font-bold\" href=\"/auth/login\">Sign In</Link>\n                </div>\n            </div>\n        </>\n    );\n};\n\nexport default SolidOTPVerify;"]}