@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.3

package/dist/components/auth/SolidForgotPassword.tsx

@@ -1,17 +1,13 @@
 import { useInitiateChangePasswordMutation } from "../../redux/api/authApi";
 import { useFormik } from "formik";
 import { useRouter } from "../../hooks/useRouter";
-import { Button } from "primereact/button";
-import { InputText } from "primereact/inputtext";
-import { Message } from "primereact/message";
 import { useEffect } from "react";
 import * as Yup from "yup";
-import { useDispatch, useSelector } from "react-redux";
-import Image from "../common/Image";
-import SolidLogo from '../../resources/images/SolidXLogo.svg'
 import { ERROR_MESSAGES } from "../../constants/error-messages";
 import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
 import { showToast } from "../../redux/features/toastSlice";
+import { useDispatch } from "react-redux";
+import { SolidButton, SolidInput, SolidMessage } from "../shad-cn-ui";
 
 const SolidForgotPassword = ({ signInValidatorLabel, signInValidatorPlaceholder }: any) => {
     const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery()
@@ -65,24 +61,13 @@ const SolidForgotPassword = ({ signInValidatorLabel, signInValidatorPlaceholder
     return (
         <>
             <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' : 'text-left'}`}>Forgot Password</h2>
+                <h2 className="solid-auth-title">Forgot password</h2>
+                <p className="solid-auth-helper">Enter your email to receive reset instructions</p>
                 {/* <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> */}
                 <form onSubmit={formik.handleSubmit}>
                     <div className="flex flex-column gap-2">
                         <label htmlFor="email" className="solid-auth-input-label">{signInValidatorLabel ? signInValidatorLabel : "Username or Email"}</label>
-                        <InputText
+                        <SolidInput
                             id="email"
                             name="email"
                             placeholder={signInValidatorPlaceholder ? signInValidatorPlaceholder : "Email ID"}
@@ -90,15 +75,29 @@ const SolidForgotPassword = ({ signInValidatorLabel, signInValidatorPlaceholder
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
                         />
-                        {isFormFieldValid(formik, "email") && <Message
-                            className="text-red-500 text-sm"
-                            severity="error"
-                            text={formik?.errors?.email?.toString()}
-                        />}
+                        {isFormFieldValid(formik, "email") && (
+                            <SolidMessage
+                                className="text-red-500 text-sm"
+                                severity="error"
+                                text={formik?.errors?.email?.toString()}
+                            />
+                        )}
                     </div>
                     <div className="mt-4">
-                        <Button className="w-full font-light auth-submit-button" label="Continue" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
-                        <Button type="button" label="Back" className="w-full auth-back-button text-center mt-1" link onClick={() => (window.location.href = '/auth/login')} />
+                        <SolidButton
+                            type="submit"
+                            className="w-full font-light auth-submit-button"
+                            label="Continue"
+                            disabled={formik.isSubmitting}
+                            loading={formik.isSubmitting}
+                        />
+                        <SolidButton
+                            type="button"
+                            label="Back"
+                            className="w-full auth-back-button text-center mt-1"
+                            text
+                            onClick={() => (window.location.href = '/auth/login')}
+                        />
                     </div>
                 </form>
             </div>

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

@@ -1 +1 @@
-{"version":3,"file":"SolidInitialLoginOtp.d.ts","sourceRoot":"","sources":["../../../src/components/auth/SolidInitialLoginOtp.tsx"],"names":[],"mappings":"AAmBA,QAAA,MAAM,oBAAoB,+CA2MzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"SolidInitialLoginOtp.d.ts","sourceRoot":"","sources":["../../../src/components/auth/SolidInitialLoginOtp.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,oBAAoB,+CAyNzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/auth/SolidInitialLoginOtp.js

@@ -37,23 +37,21 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useInitateLoginMutation } from "../../redux/api/authApi";
 import { Form, Formik } from "formik";
-import Image from "../common/Image";
 import { useRouter } from "../../hooks/useRouter";
 import { useSearchParams } from "../../hooks/useSearchParams";
-import { Button } from "primereact/button";
-import { InputOtp } from "primereact/inputotp";
-import { Message } from "primereact/message";
 import { useEffect, useState } from "react";
 import { useDispatch } from 'react-redux';
 import * as Yup from "yup";
-import SolidLogo from '../../resources/images/SolidXLogo.svg';
 import { signInWithOtp } from "../../adapters/auth/index";
 import { ERROR_MESSAGES } from "../../constants/error-messages";
 import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
 import { env } from "../../adapters/env";
 import { showToast } from "../../redux/features/toastSlice";
+import { SolidButton, SolidIcon, SolidMessage, SolidOtpInput } from "../shad-cn-ui";
+import { loadSession } from "../../adapters/auth/storage";
+import { hasAnyRole } from "../../helpers/rolesHelper";
 var SolidInitialLoginOtp = function () {
-    var _a, _b, _c, _d, _e;
+    var _a;
     var searchParams = useSearchParams();
     var tempIdentifier = searchParams.get('identifier');
     var type = searchParams.get('type') || 'email';
@@ -61,15 +59,15 @@ var SolidInitialLoginOtp = function () {
     var RESEND_OTP_KEY = "resendOtpLogin_".concat(identifier);
     var RESEND_OTP_TIMER_MIN = parseFloat(env("NEXT_PUBLIC_RESEND_OTP_TIMER") || '0.5');
     var RESEND_OTP_TIMER = Math.round(RESEND_OTP_TIMER_MIN * 60);
-    var _f = useLazyGetAuthSettingsQuery(), trigger = _f[0], solidSettingsData = _f[1].data;
+    var _b = useLazyGetAuthSettingsQuery(), trigger = _b[0], solidSettingsData = _b[1].data;
     useEffect(function () {
         trigger(""); // Fetch settings on mount
     }, [trigger]);
     var initiateResendOTP = useInitateLoginMutation()[0];
     var dispatch = useDispatch();
     var router = useRouter();
-    var _g = useState(RESEND_OTP_TIMER), timeLeft = _g[0], setTimeLeft = _g[1];
-    var _h = useState(false), resendEnabled = _h[0], setResendEnabled = _h[1];
+    var _c = useState(RESEND_OTP_TIMER), timeLeft = _c[0], setTimeLeft = _c[1];
+    var _d = useState(false), resendEnabled = _d[0], setResendEnabled = _d[1];
     var getDisplayText = function () {
         switch (type) {
             case "mobile":
@@ -159,25 +157,24 @@ var SolidInitialLoginOtp = function () {
             }
         });
     }); };
-    return (_jsx(_Fragment, { children: _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 mt-2 md:mt-4' : '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: {
+    return (_jsx(_Fragment, { children: _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'), children: [_jsx("h2", { className: "solid-auth-title", children: displayText.title }), _jsxs("p", { className: "solid-auth-helper", children: [displayText.subtitle, " ", _jsx("span", { className: "solid-auth-helper-emphasis", children: identifier })] }), _jsx(_Fragment, { children: _jsx(Formik, { initialValues: {
                             otp: "",
                         }, validationSchema: validationSchema, onSubmit: function (values, _a) {
                             var setSubmitting = _a.setSubmitting, setErrors = _a.setErrors;
                             return __awaiter(void 0, void 0, void 0, function () {
-                                var response, redirectUrl, err_2;
-                                var _b;
-                                return __generator(this, function (_c) {
-                                    switch (_c.label) {
+                                var response, session, isAdmin, isDev, redirectUrl, err_2;
+                                var _b, _c;
+                                return __generator(this, function (_d) {
+                                    switch (_d.label) {
                                         case 0:
-                                            _c.trys.push([0, 2, 3, 4]);
+                                            _d.trys.push([0, 2, 3, 4]);
                                             return [4 /*yield*/, signInWithOtp({
                                                     type: type,
                                                     identifier: identifier,
                                                     otp: values.otp,
                                                 })];
                                         case 1:
-                                            response = _c.sent();
+                                            response = _d.sent();
                                             if (response === null || response === void 0 ? void 0 : response.error) {
                                                 dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.INAVLID_OTP, detail: response.error }));
                                                 setErrors({
@@ -187,13 +184,16 @@ var SolidInitialLoginOtp = function () {
                                             else {
                                                 localStorage.removeItem("resendOtpLogin_".concat(identifier));
                                                 dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.LOGIN_SUCCESS, detail: ERROR_MESSAGES.DASHBOARD_REDIRECTING }));
-                                                redirectUrl = env("NEXT_PUBLIC_LOGIN_REDIRECT_URL") || "/admin";
+                                                session = loadSession();
+                                                isAdmin = hasAnyRole((_b = session === null || session === void 0 ? void 0 : session.user) === null || _b === void 0 ? void 0 : _b.roles, ["Admin"]);
+                                                isDev = env("VITE_SOLIDX_ENV") === "dev";
+                                                redirectUrl = isAdmin && isDev ? "/studio" : (env("NEXT_PUBLIC_LOGIN_REDIRECT_URL") || "/admin");
                                                 router.push(redirectUrl);
                                             }
                                             return [3 /*break*/, 4];
                                         case 2:
-                                            err_2 = _c.sent();
-                                            dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.LOGIN_ERROR, detail: (err_2 === null || err_2 === void 0 ? void 0 : err_2.data) ? (_b = err_2 === null || err_2 === void 0 ? void 0 : err_2.data) === null || _b === void 0 ? void 0 : _b.message : ERROR_MESSAGES.SOMETHING_WRONG }));
+                                            err_2 = _d.sent();
+                                            dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.LOGIN_ERROR, detail: (err_2 === null || err_2 === void 0 ? void 0 : err_2.data) ? (_c = err_2 === null || err_2 === void 0 ? void 0 : err_2.data) === null || _c === void 0 ? void 0 : _c.message : ERROR_MESSAGES.SOMETHING_WRONG }));
                                             return [3 /*break*/, 4];
                                         case 3:
                                             setSubmitting(false);
@@ -204,11 +204,11 @@ var SolidInitialLoginOtp = function () {
                             });
                         }, children: function (formik) {
                             var _a;
-                            return (_jsxs(Form, { children: [_jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("label", { htmlFor: "otp", className: "solid-auth-input-label", children: "Enter OTP" }), _jsx(InputOtp, { value: formik.values.otp, onChange: function (e) { return formik.setFieldValue("otp", e.value); }, length: 6, style: { width: '100%' }, invalid: !!formik.errors.otp }), isFormFieldValid(formik, "otp") && (_jsx(Message, { className: "text-red-500 text-sm", severity: "error", text: (_a = formik.errors.otp) === null || _a === void 0 ? void 0 : _a.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", onClick: handleResendOtp, disabled: !resendEnabled }), _jsx("p", { className: "m-0 text-sm text-color", children: resendEnabled
-                                                            ? "You can resend now"
-                                                            : "Time left: ".concat(Math.floor(timeLeft / 60)
-                                                                .toString()
-                                                                .padStart(2, "0"), ":").concat((timeLeft % 60).toString().padStart(2, "0")) })] })] }), _jsxs("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(Button, { type: "button", label: "Back", className: "w-full auth-back-button text-center mt-1", link: true, onClick: function () { return (window.location.href = '/auth/login'); } })] })] }));
+                            return (_jsxs(Form, { children: [_jsxs("div", { className: "solid-auth-otp-field", children: [_jsxs("div", { className: "solid-auth-otp-top", children: [_jsx("label", { htmlFor: "otp", className: "solid-auth-input-label", children: "Verification code" }), _jsx(SolidButton, { type: "button", variant: "outline", size: "sm", className: "solid-auth-otp-resend", onClick: handleResendOtp, disabled: !resendEnabled, leftIcon: _jsx(SolidIcon, { name: "si-refresh", "aria-hidden": true }), children: "Resend code" })] }), _jsx(SolidOtpInput, { id: "otp", className: "solid-auth-otp-input", value: formik.values.otp, onChange: function (nextValue) { return formik.setFieldValue("otp", nextValue); }, length: 6, integerOnly: true, invalid: !!formik.errors.otp }), isFormFieldValid(formik, "otp") && (_jsx(SolidMessage, { className: "text-red-500 text-sm", severity: "error", text: (_a = formik.errors.otp) === null || _a === void 0 ? void 0 : _a.toString() })), _jsx("p", { className: "solid-auth-otp-time", children: resendEnabled
+                                                    ? "You can resend now."
+                                                    : "Time left: ".concat(Math.floor(timeLeft / 60)
+                                                        .toString()
+                                                        .padStart(2, "0"), ":").concat((timeLeft % 60).toString().padStart(2, "0")) })] }), _jsxs("div", { className: "mt-4", children: [_jsx(SolidButton, { type: "submit", className: "w-full font-light auth-submit-button", label: "Verify", disabled: formik.isSubmitting, loading: formik.isSubmitting }), _jsx(SolidButton, { type: "button", label: "Back", className: "w-full auth-back-button text-center mt-1", text: true, onClick: function () { return (window.location.href = '/auth/login'); } })] })] }));
                         } }) })] }) }));
 };
 export default SolidInitialLoginOtp;

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

@@ -1 +1 @@
-{"version":3,"file":"SolidInitialLoginOtp.js","sourceRoot":"","sources":["../../../src/components/auth/SolidInitialLoginOtp.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useInitateLoginMutation } from \"../../redux/api/authApi\";\nimport { Form, Formik } from \"formik\";\nimport Image from \"../common/Image\";\nimport { useRouter } from \"../../hooks/useRouter\";\nimport { useSearchParams } from \"../../hooks/useSearchParams\";\nimport { Button } from \"primereact/button\";\nimport { InputOtp } from \"primereact/inputotp\";\nimport { Message } from \"primereact/message\";\nimport { useEffect, useState } from \"react\";\nimport { useDispatch } from 'react-redux';\nimport * as Yup from \"yup\";\nimport SolidLogo from '../../resources/images/SolidXLogo.svg'\nimport { signInWithOtp } from \"../../adapters/auth/index\";\nimport { ERROR_MESSAGES } from \"../../constants/error-messages\";\nimport { useLazyGetAuthSettingsQuery } from \"../../redux/api/solidSettingsApi\";\nimport { env } from \"../../adapters/env\";\nimport { showToast } from \"../../redux/features/toastSlice\";\n\n\nconst SolidInitialLoginOtp = () => {\n    const searchParams = useSearchParams();\n    const tempIdentifier = searchParams.get('identifier');\n    const type = searchParams.get('type') || 'email';\n    const identifier = tempIdentifier ? decodeURIComponent(tempIdentifier) : '';\n\n    const RESEND_OTP_KEY = `resendOtpLogin_${identifier}`;\n    const RESEND_OTP_TIMER_MIN = parseFloat(env(\"NEXT_PUBLIC_RESEND_OTP_TIMER\") || '0.5');\n    const RESEND_OTP_TIMER = Math.round(RESEND_OTP_TIMER_MIN * 60);\n    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();\n    useEffect(() => {\n        trigger(\"\") // Fetch settings on mount\n    }, [trigger])\n\n    const [initiateResendOTP] = useInitateLoginMutation();\n    const dispatch = useDispatch();\n    const router = useRouter();\n    const [timeLeft, setTimeLeft] = useState(RESEND_OTP_TIMER);\n    const [resendEnabled, setResendEnabled] = useState(false);\n\n    const getDisplayText = () => {\n        switch (type) {\n            case \"mobile\":\n                return {\n                    title: \"OTP Verification\",\n                    subtitle: \"Please enter the OTP sent to your mobile number to complete verification\"\n                };\n            case \"email\":\n            default:\n                return {\n                    title: \"OTP Verification\",\n                    subtitle: \"Please enter the OTP sent to your email to complete verification\"\n                };\n        }\n    };\n\n    const displayText = getDisplayText();\n\n    useEffect(() => {\n\n        // Set timer if not already set (e.g., after login)\n        const storedTime = localStorage.getItem(RESEND_OTP_KEY);\n        if (!storedTime) {\n            localStorage.setItem(RESEND_OTP_KEY, Date.now().toString());\n        }\n\n        const lastSent = storedTime ? parseInt(storedTime, 10) : Date.now();\n        const elapsed = Math.floor((Date.now() - lastSent) / 1000);\n        const remaining = RESEND_OTP_TIMER - elapsed;\n\n        if (remaining > 0) {\n            setTimeLeft(remaining);\n            setResendEnabled(false);\n        } else {\n            setTimeLeft(0);\n            setResendEnabled(true);\n        }\n    }, [identifier]);\n\n    useEffect(() => {\n        if (resendEnabled || timeLeft <= 0) return;\n\n        const interval = setInterval(() => {\n            setTimeLeft((prev) => {\n                if (prev <= 1) {\n                    clearInterval(interval);\n                    setResendEnabled(true);\n                    return 0;\n                }\n                return prev - 1;\n            });\n        }, 1000);\n\n        return () => clearInterval(interval);\n    }, [resendEnabled, timeLeft]);\n\n    const validationSchema = Yup.object({\n        otp: Yup.string()\n            .matches(/^\\d{6}$/, ERROR_MESSAGES.OTP_CHARACTER(6))\n            .required(ERROR_MESSAGES.FIELD_REUQIRED('OTP')),\n    });\n\n    const isFormFieldValid = (formik: any, fieldName: string) =>\n        formik.touched[fieldName] && formik.errors[fieldName];\n\n\n    const handleResendOtp = async () => {\n        try {\n            const payload = {\n                type: type,\n                identifier: identifier,\n            };\n\n            const response = await initiateResendOTP(payload).unwrap();\n\n            if (response?.statusCode === 200) {\n                dispatch(showToast({ severity: \"success\", summary: ERROR_MESSAGES.OPT_RESEND, detail: response?.data?.message }));\n                localStorage.setItem(RESEND_OTP_KEY, Date.now().toString());\n                setTimeLeft(RESEND_OTP_TIMER);\n                setResendEnabled(false);\n            } else {\n                dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.LOGIN_ERROR, detail: response.error }));\n            }\n        } catch (err: any) {\n            dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.LOGIN_ERROR, detail: err?.data?.message || ERROR_MESSAGES.SOMETHING_WRONG }));\n        }\n    };\n\n    return (\n        <>\n            <div className={`auth-container ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'center' : 'side'}`} style={{ minWidth: 480 }}>\n                {solidSettingsData?.data?.authPagesLayout === 'center' &&\n                    <div className=\"flex justify-content-center\">\n                        <div className={`solid-logo flex align-items-center ${solidSettingsData?.data?.appLogoPosition}`}>\n                            <Image\n                                alt=\"solid logo\"\n                                src={solidSettingsData?.data?.appLogo || SolidLogo}\n                                className=\"relative\"\n                                fill\n                            />\n                        </div>\n                    </div>\n                }\n                <h2 className={`solid-auth-title ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'text-center mt-2 md:mt-4' : '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                            otp: \"\",\n                        }}\n                        validationSchema={validationSchema}\n                        onSubmit={async (values, { setSubmitting, setErrors }) => {\n                            try {\n                                const response = await signInWithOtp({\n                                    type: type,\n                                    identifier: identifier,\n                                    otp: values.otp,\n                                });\n\n                                if (response?.error) {\n                                    dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.INAVLID_OTP, detail: response.error }));\n                                    setErrors({\n                                        otp: ERROR_MESSAGES.INAVLID_OTP,\n                                    });\n                                } else {\n                                    localStorage.removeItem(`resendOtpLogin_${identifier}`);\n                                    dispatch(showToast({ severity: \"success\", summary: ERROR_MESSAGES.LOGIN_SUCCESS, detail: ERROR_MESSAGES.DASHBOARD_REDIRECTING }));\n                                    const redirectUrl = env(\"NEXT_PUBLIC_LOGIN_REDIRECT_URL\") || \"/admin\";\n                                    router.push(redirectUrl);\n                                }\n                            } catch (err: any) {\n                                dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.LOGIN_ERROR, detail: err?.data ? err?.data?.message : ERROR_MESSAGES.SOMETHING_WRONG }));\n                            } finally {\n                                setSubmitting(false);\n                            }\n                        }}\n                    >\n                        {(formik) => (\n                            <Form>\n                                <div className=\"flex flex-column gap-2\">\n                                    <label htmlFor=\"otp\" className=\"solid-auth-input-label\">Enter OTP</label>\n                                    <InputOtp\n                                        value={formik.values.otp}\n                                        onChange={(e) => formik.setFieldValue(\"otp\", e.value)}\n                                        length={6}\n                                        style={{ width: '100%' }}\n                                        invalid={!!formik.errors.otp}\n                                    />\n                                    {isFormFieldValid(formik, \"otp\") && (\n                                        <Message className=\"text-red-500 text-sm\" severity=\"error\" text={formik.errors.otp?.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                                            onClick={handleResendOtp}\n                                            disabled={!resendEnabled}\n                                        />\n                                        <p className=\"m-0 text-sm text-color\">\n                                            {resendEnabled\n                                                ? \"You can resend now\"\n                                                : `Time left: ${Math.floor(timeLeft / 60)\n                                                    .toString()\n                                                    .padStart(2, \"0\")}:${(timeLeft % 60).toString().padStart(2, \"0\")}`}\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                                    <Button type=\"button\" label=\"Back\" className=\"w-full auth-back-button text-center mt-1\" link onClick={() => (window.location.href = '/auth/login')} />\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\">Back</Link>\n                </div>\n            </div> */}\n        </>\n    );\n};\n\nexport default SolidInitialLoginOtp;\n"]}
+{"version":3,"file":"SolidInitialLoginOtp.js","sourceRoot":"","sources":["../../../src/components/auth/SolidInitialLoginOtp.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useInitateLoginMutation } from \"../../redux/api/authApi\";\nimport { Form, Formik } from \"formik\";\nimport { useRouter } from \"../../hooks/useRouter\";\nimport { useSearchParams } from \"../../hooks/useSearchParams\";\nimport { useEffect, useState } from \"react\";\nimport { useDispatch } from 'react-redux';\nimport * as Yup from \"yup\";\nimport { signInWithOtp } from \"../../adapters/auth/index\";\nimport { ERROR_MESSAGES } from \"../../constants/error-messages\";\nimport { useLazyGetAuthSettingsQuery } from \"../../redux/api/solidSettingsApi\";\nimport { env } from \"../../adapters/env\";\nimport { showToast } from \"../../redux/features/toastSlice\";\nimport { SolidButton, SolidIcon, SolidMessage, SolidOtpInput } from \"../shad-cn-ui\";\nimport { loadSession } from \"../../adapters/auth/storage\";\nimport { hasAnyRole } from \"../../helpers/rolesHelper\";\n\n\nconst SolidInitialLoginOtp = () => {\n    const searchParams = useSearchParams();\n    const tempIdentifier = searchParams.get('identifier');\n    const type = searchParams.get('type') || 'email';\n    const identifier = tempIdentifier ? decodeURIComponent(tempIdentifier) : '';\n\n    const RESEND_OTP_KEY = `resendOtpLogin_${identifier}`;\n    const RESEND_OTP_TIMER_MIN = parseFloat(env(\"NEXT_PUBLIC_RESEND_OTP_TIMER\") || '0.5');\n    const RESEND_OTP_TIMER = Math.round(RESEND_OTP_TIMER_MIN * 60);\n    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();\n    useEffect(() => {\n        trigger(\"\") // Fetch settings on mount\n    }, [trigger])\n\n    const [initiateResendOTP] = useInitateLoginMutation();\n    const dispatch = useDispatch();\n    const router = useRouter();\n    const [timeLeft, setTimeLeft] = useState(RESEND_OTP_TIMER);\n    const [resendEnabled, setResendEnabled] = useState(false);\n\n    const getDisplayText = () => {\n        switch (type) {\n            case \"mobile\":\n                return {\n                    title: \"OTP Verification\",\n                    subtitle: \"Please enter the OTP sent to your mobile number to complete verification\"\n                };\n            case \"email\":\n            default:\n                return {\n                    title: \"OTP Verification\",\n                    subtitle: \"Please enter the OTP sent to your email to complete verification\"\n                };\n        }\n    };\n\n    const displayText = getDisplayText();\n\n    useEffect(() => {\n\n        // Set timer if not already set (e.g., after login)\n        const storedTime = localStorage.getItem(RESEND_OTP_KEY);\n        if (!storedTime) {\n            localStorage.setItem(RESEND_OTP_KEY, Date.now().toString());\n        }\n\n        const lastSent = storedTime ? parseInt(storedTime, 10) : Date.now();\n        const elapsed = Math.floor((Date.now() - lastSent) / 1000);\n        const remaining = RESEND_OTP_TIMER - elapsed;\n\n        if (remaining > 0) {\n            setTimeLeft(remaining);\n            setResendEnabled(false);\n        } else {\n            setTimeLeft(0);\n            setResendEnabled(true);\n        }\n    }, [identifier]);\n\n    useEffect(() => {\n        if (resendEnabled || timeLeft <= 0) return;\n\n        const interval = setInterval(() => {\n            setTimeLeft((prev) => {\n                if (prev <= 1) {\n                    clearInterval(interval);\n                    setResendEnabled(true);\n                    return 0;\n                }\n                return prev - 1;\n            });\n        }, 1000);\n\n        return () => clearInterval(interval);\n    }, [resendEnabled, timeLeft]);\n\n    const validationSchema = Yup.object({\n        otp: Yup.string()\n            .matches(/^\\d{6}$/, ERROR_MESSAGES.OTP_CHARACTER(6))\n            .required(ERROR_MESSAGES.FIELD_REUQIRED('OTP')),\n    });\n\n    const isFormFieldValid = (formik: any, fieldName: string) =>\n        formik.touched[fieldName] && formik.errors[fieldName];\n\n\n    const handleResendOtp = async () => {\n        try {\n            const payload = {\n                type: type,\n                identifier: identifier,\n            };\n\n            const response = await initiateResendOTP(payload).unwrap();\n\n            if (response?.statusCode === 200) {\n                dispatch(showToast({ severity: \"success\", summary: ERROR_MESSAGES.OPT_RESEND, detail: response?.data?.message }));\n                localStorage.setItem(RESEND_OTP_KEY, Date.now().toString());\n                setTimeLeft(RESEND_OTP_TIMER);\n                setResendEnabled(false);\n            } else {\n                dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.LOGIN_ERROR, detail: response.error }));\n            }\n        } catch (err: any) {\n            dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.LOGIN_ERROR, detail: err?.data?.message || ERROR_MESSAGES.SOMETHING_WRONG }));\n        }\n    };\n\n    return (\n        <>\n\n            <div className={`auth-container ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'center' : 'side'}`}>\n                <h2 className=\"solid-auth-title\">{displayText.title}</h2>\n                <p className=\"solid-auth-helper\">\n                    {displayText.subtitle}{\" \"}\n                    <span className=\"solid-auth-helper-emphasis\">{identifier}</span>\n                </p>\n                <>\n                    <Formik\n                        initialValues={{\n                            otp: \"\",\n                        }}\n                        validationSchema={validationSchema}\n                        onSubmit={async (values, { setSubmitting, setErrors }) => {\n                            try {\n                                const response = await signInWithOtp({\n                                    type: type,\n                                    identifier: identifier,\n                                    otp: values.otp,\n                                });\n\n                                if (response?.error) {\n                                    dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.INAVLID_OTP, detail: response.error }));\n                                    setErrors({\n                                        otp: ERROR_MESSAGES.INAVLID_OTP,\n                                    });\n                                } else {\n                                    localStorage.removeItem(`resendOtpLogin_${identifier}`);\n                                    dispatch(showToast({ severity: \"success\", summary: ERROR_MESSAGES.LOGIN_SUCCESS, detail: ERROR_MESSAGES.DASHBOARD_REDIRECTING }));\n                                    const session = loadSession();\n                                    const isAdmin = hasAnyRole(session?.user?.roles, [\"Admin\"]);\n                                    const isDev = env(\"VITE_SOLIDX_ENV\") === \"dev\";\n                                    const redirectUrl = isAdmin && isDev ? \"/studio\" : (env(\"NEXT_PUBLIC_LOGIN_REDIRECT_URL\") || \"/admin\");\n                                    router.push(redirectUrl);\n                                }\n                            } catch (err: any) {\n                                dispatch(showToast({ severity: \"error\", summary: ERROR_MESSAGES.LOGIN_ERROR, detail: err?.data ? err?.data?.message : ERROR_MESSAGES.SOMETHING_WRONG }));\n                            } finally {\n                                setSubmitting(false);\n                            }\n                        }}\n                    >\n                        {(formik) => (\n                            <Form>\n                                <div className=\"solid-auth-otp-field\">\n                                    <div className=\"solid-auth-otp-top\">\n                                        <label htmlFor=\"otp\" className=\"solid-auth-input-label\">Verification code</label>\n                                        <SolidButton\n                                            type=\"button\"\n                                            variant=\"outline\"\n                                            size=\"sm\"\n                                            className=\"solid-auth-otp-resend\"\n                                            onClick={handleResendOtp}\n                                            disabled={!resendEnabled}\n                                            leftIcon={<SolidIcon name=\"si-refresh\" aria-hidden />}\n                                        >\n                                            Resend code\n                                        </SolidButton>\n                                    </div>\n                                    <SolidOtpInput\n                                        id=\"otp\"\n                                        className=\"solid-auth-otp-input\"\n                                        value={formik.values.otp}\n                                        onChange={(nextValue) => formik.setFieldValue(\"otp\", nextValue)}\n                                        length={6}\n                                        integerOnly\n                                        invalid={!!formik.errors.otp}\n                                    />\n                                    {isFormFieldValid(formik, \"otp\") && (\n                                        <SolidMessage className=\"text-red-500 text-sm\" severity=\"error\" text={formik.errors.otp?.toString()} />\n                                    )}\n                                    <p className=\"solid-auth-otp-time\">\n                                        {resendEnabled\n                                            ? \"You can resend now.\"\n                                            : `Time left: ${Math.floor(timeLeft / 60)\n                                                .toString()\n                                                .padStart(2, \"0\")}:${(timeLeft % 60).toString().padStart(2, \"0\")}`}\n                                    </p>\n                                </div>\n                                <div className=\"mt-4\">\n                                    <SolidButton\n                                        type=\"submit\"\n                                        className=\"w-full font-light auth-submit-button\"\n                                        label=\"Verify\"\n                                        disabled={formik.isSubmitting}\n                                        loading={formik.isSubmitting}\n                                    />\n                                    <SolidButton\n                                        type=\"button\"\n                                        label=\"Back\"\n                                        className=\"w-full auth-back-button text-center mt-1\"\n                                        text\n                                        onClick={() => (window.location.href = '/auth/login')}\n                                    />\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\">Back</Link>\n                </div>\n            </div> */}\n        </>\n    );\n};\n\nexport default SolidInitialLoginOtp;\n"]}

package/dist/components/auth/SolidInitialLoginOtp.tsx

@@ -1,20 +1,18 @@
 import { useInitateLoginMutation } from "../../redux/api/authApi";
 import { Form, Formik } from "formik";
-import Image from "../common/Image";
 import { useRouter } from "../../hooks/useRouter";
 import { useSearchParams } from "../../hooks/useSearchParams";
-import { Button } from "primereact/button";
-import { InputOtp } from "primereact/inputotp";
-import { Message } from "primereact/message";
 import { useEffect, useState } from "react";
 import { useDispatch } from 'react-redux';
 import * as Yup from "yup";
-import SolidLogo from '../../resources/images/SolidXLogo.svg'
 import { signInWithOtp } from "../../adapters/auth/index";
 import { ERROR_MESSAGES } from "../../constants/error-messages";
 import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
 import { env } from "../../adapters/env";
 import { showToast } from "../../redux/features/toastSlice";
+import { SolidButton, SolidIcon, SolidMessage, SolidOtpInput } from "../shad-cn-ui";
+import { loadSession } from "../../adapters/auth/storage";
+import { hasAnyRole } from "../../helpers/rolesHelper";
 
 
 const SolidInitialLoginOtp = () => {
@@ -127,22 +125,12 @@ const SolidInitialLoginOtp = () => {
 
     return (
         <>
-            <div className={`auth-container ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'center' : 'side'}`} style={{ minWidth: 480 }}>
-                {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'}`}>OTP Verification</h2>
-                <p className="solid-auth-subtitle text-sm">
-                    Please enter the OTP sent to your email to complete verification
+
+            <div className={`auth-container ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'center' : 'side'}`}>
+                <h2 className="solid-auth-title">{displayText.title}</h2>
+                <p className="solid-auth-helper">
+                    {displayText.subtitle}{" "}
+                    <span className="solid-auth-helper-emphasis">{identifier}</span>
                 </p>
                 <>
                     <Formik
@@ -166,7 +154,10 @@ const SolidInitialLoginOtp = () => {
                                 } else {
                                     localStorage.removeItem(`resendOtpLogin_${identifier}`);
                                     dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.LOGIN_SUCCESS, detail: ERROR_MESSAGES.DASHBOARD_REDIRECTING }));
-                                    const redirectUrl = env("NEXT_PUBLIC_LOGIN_REDIRECT_URL") || "/admin";
+                                    const session = loadSession();
+                                    const isAdmin = hasAnyRole(session?.user?.roles, ["Admin"]);
+                                    const isDev = env("VITE_SOLIDX_ENV") === "dev";
+                                    const redirectUrl = isAdmin && isDev ? "/studio" : (env("NEXT_PUBLIC_LOGIN_REDIRECT_URL") || "/admin");
                                     router.push(redirectUrl);
                                 }
                             } catch (err: any) {
@@ -178,35 +169,56 @@ const SolidInitialLoginOtp = () => {
                     >
                         {(formik) => (
                             <Form>
-                                <div className="flex flex-column gap-2">
-                                    <label htmlFor="otp" className="solid-auth-input-label">Enter OTP</label>
-                                    <InputOtp
+                                <div className="solid-auth-otp-field">
+                                    <div className="solid-auth-otp-top">
+                                        <label htmlFor="otp" className="solid-auth-input-label">Verification code</label>
+                                        <SolidButton
+                                            type="button"
+                                            variant="outline"
+                                            size="sm"
+                                            className="solid-auth-otp-resend"
+                                            onClick={handleResendOtp}
+                                            disabled={!resendEnabled}
+                                            leftIcon={<SolidIcon name="si-refresh" aria-hidden />}
+                                        >
+                                            Resend code
+                                        </SolidButton>
+                                    </div>
+                                    <SolidOtpInput
+                                        id="otp"
+                                        className="solid-auth-otp-input"
                                         value={formik.values.otp}
-                                        onChange={(e) => formik.setFieldValue("otp", e.value)}
+                                        onChange={(nextValue) => formik.setFieldValue("otp", nextValue)}
                                         length={6}
-                                        style={{ width: '100%' }}
+                                        integerOnly
                                         invalid={!!formik.errors.otp}
                                     />
                                     {isFormFieldValid(formik, "otp") && (
-                                        <Message className="text-red-500 text-sm" severity="error" text={formik.errors.otp?.toString()} />
+                                        <SolidMessage className="text-red-500 text-sm" severity="error" text={formik.errors.otp?.toString()} />
                                     )}
-                                    <div className="flex align-items-center justify-content-between">
-                                        <Button type="button" icon='pi pi-refresh' iconPos="left" link label="Resend Code" className="px-0 text-sm font-normal"
-                                            onClick={handleResendOtp}
-                                            disabled={!resendEnabled}
-                                        />
-                                        <p className="m-0 text-sm text-color">
-                                            {resendEnabled
-                                                ? "You can resend now"
-                                                : `Time left: ${Math.floor(timeLeft / 60)
-                                                    .toString()
-                                                    .padStart(2, "0")}:${(timeLeft % 60).toString().padStart(2, "0")}`}
-                                        </p>
-                                    </div>
+                                    <p className="solid-auth-otp-time">
+                                        {resendEnabled
+                                            ? "You can resend now."
+                                            : `Time left: ${Math.floor(timeLeft / 60)
+                                                .toString()
+                                                .padStart(2, "0")}:${(timeLeft % 60).toString().padStart(2, "0")}`}
+                                    </p>
                                 </div>
                                 <div className="mt-4">
-                                    <Button type="submit" className="w-full font-light auth-submit-button" label="Verify" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
-                                    <Button type="button" label="Back" className="w-full auth-back-button text-center mt-1" link onClick={() => (window.location.href = '/auth/login')} />
+                                    <SolidButton
+                                        type="submit"
+                                        className="w-full font-light auth-submit-button"
+                                        label="Verify"
+                                        disabled={formik.isSubmitting}
+                                        loading={formik.isSubmitting}
+                                    />
+                                    <SolidButton
+                                        type="button"
+                                        label="Back"
+                                        className="w-full auth-back-button text-center mt-1"
+                                        text
+                                        onClick={() => (window.location.href = '/auth/login')}
+                                    />
                                 </div>
                             </Form>
                         )}

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

@@ -1 +1 @@
-{"version":3,"file":"SolidInitiateRegisterOtp.d.ts","sourceRoot":"","sources":["../../../src/components/auth/SolidInitiateRegisterOtp.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,wBAAwB,+CA2L7B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"SolidInitiateRegisterOtp.d.ts","sourceRoot":"","sources":["../../../src/components/auth/SolidInitiateRegisterOtp.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,wBAAwB,+CAqM7B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/components/auth/SolidInitiateRegisterOtp.js

@@ -37,22 +37,18 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useConfirmOtpRegisterMutation, useInitateRegisterMutation } from "../../redux/api/authApi";
 import { Form, Formik } from "formik";
-import Image from "../common/Image";
 import { useRouter } from "../../hooks/useRouter";
 import { useSearchParams } from "../../hooks/useSearchParams";
-import { Button } from "primereact/button";
-import { InputOtp } from "primereact/inputotp";
-import { Message } from "primereact/message";
 import { useEffect, useState } from "react";
 import { useDispatch } from 'react-redux';
 import * as Yup from "yup";
-import SolidLogo from '../../resources/images/SolidXLogo.svg';
 import { ERROR_MESSAGES } from "../../constants/error-messages";
 import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
 import { env } from "../../adapters/env";
 import { showToast } from "../../redux/features/toastSlice";
+import { SolidButton, SolidIcon, SolidMessage, SolidOtpInput } from "../shad-cn-ui";
 var SolidInitiateRegisterOtp = function () {
-    var _a, _b, _c, _d, _e;
+    var _a;
     var searchParams = useSearchParams();
     var tempEmail = searchParams.get('email');
     var email = tempEmail ? decodeURIComponent(tempEmail) : '';
@@ -60,7 +56,7 @@ var SolidInitiateRegisterOtp = function () {
     var RESEND_OTP_TIMER_MIN = parseFloat(env("NEXT_PUBLIC_RESEND_OTP_TIMER") || '0.5');
     var RESEND_OTP_TIMER = Math.round(RESEND_OTP_TIMER_MIN * 60);
     var username = searchParams.get('username') || '';
-    var _f = useLazyGetAuthSettingsQuery(), trigger = _f[0], solidSettingsData = _f[1].data;
+    var _b = useLazyGetAuthSettingsQuery(), trigger = _b[0], solidSettingsData = _b[1].data;
     useEffect(function () {
         trigger(""); // Fetch settings on mount
     }, [trigger]);
@@ -68,8 +64,8 @@ var SolidInitiateRegisterOtp = function () {
     var initiateOtpRegister = useConfirmOtpRegisterMutation()[0];
     var dispatch = useDispatch();
     var router = useRouter();
-    var _g = useState(RESEND_OTP_TIMER), timeLeft = _g[0], setTimeLeft = _g[1];
-    var _h = useState(false), resendEnabled = _h[0], setResendEnabled = _h[1];
+    var _c = useState(RESEND_OTP_TIMER), timeLeft = _c[0], setTimeLeft = _c[1];
+    var _d = useState(false), resendEnabled = _d[0], setResendEnabled = _d[1];
     useEffect(function () {
         // Set timer if not already set (e.g., after login)
         var storedTime = localStorage.getItem(RESEND_OTP_KEY);
@@ -144,8 +140,7 @@ var SolidInitiateRegisterOtp = function () {
             }
         });
     }); };
-    return (_jsx(_Fragment, { children: _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: {
+    return (_jsx(_Fragment, { children: _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'), children: [_jsx("h2", { className: "solid-auth-title", children: "OTP verification" }), _jsxs("p", { className: "solid-auth-helper", children: ["Please enter the OTP sent to your email to complete verification", " ", _jsx("span", { className: "solid-auth-helper-emphasis", children: email })] }), _jsx(_Fragment, { children: _jsx(Formik, { initialValues: {
                             otp: "",
                         }, validationSchema: validationSchema, onSubmit: function (values, _a) {
                             var setSubmitting = _a.setSubmitting, setErrors = _a.setErrors;
@@ -189,11 +184,11 @@ var SolidInitiateRegisterOtp = function () {
                             });
                         }, children: function (formik) {
                             var _a;
-                            return (_jsxs(Form, { children: [_jsxs("div", { className: "flex flex-column gap-2", children: [_jsx("label", { htmlFor: "otp", className: "solid-auth-input-label", children: "Enter OTP" }), _jsx(InputOtp, { value: formik.values.otp, onChange: function (e) { return formik.setFieldValue("otp", e.value); }, length: 6, style: { width: '100%' }, invalid: !!formik.errors.otp }), isFormFieldValid(formik, "otp") && (_jsx(Message, { className: "text-red-500 text-sm", severity: "error", text: (_a = formik.errors.otp) === null || _a === void 0 ? void 0 : _a.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", onClick: handleResendOtp, disabled: !resendEnabled }), _jsx("p", { className: "m-0 text-sm text-color", children: resendEnabled
-                                                            ? "You can resend now"
-                                                            : "Time left: ".concat(Math.floor(timeLeft / 60)
-                                                                .toString()
-                                                                .padStart(2, "0"), ":").concat((timeLeft % 60).toString().padStart(2, "0")) })] })] }), _jsxs("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(Button, { type: "button", label: "Back", className: "w-full auth-back-button text-center mt-1", link: true, onClick: function () { return (window.location.href = '/auth/login'); } })] })] }));
+                            return (_jsxs(Form, { children: [_jsxs("div", { className: "solid-auth-otp-field", children: [_jsxs("div", { className: "solid-auth-otp-top", children: [_jsx("label", { htmlFor: "otp", className: "solid-auth-input-label", children: "Verification code" }), _jsx(SolidButton, { type: "button", variant: "outline", size: "sm", className: "solid-auth-otp-resend", onClick: handleResendOtp, disabled: !resendEnabled, leftIcon: _jsx(SolidIcon, { name: "si-refresh", "aria-hidden": true }), children: "Resend code" })] }), _jsx(SolidOtpInput, { id: "otp", className: "solid-auth-otp-input", value: formik.values.otp, onChange: function (nextValue) { return formik.setFieldValue("otp", nextValue); }, length: 6, integerOnly: true, invalid: !!formik.errors.otp }), isFormFieldValid(formik, "otp") && (_jsx(SolidMessage, { className: "text-red-500 text-sm", severity: "error", text: (_a = formik.errors.otp) === null || _a === void 0 ? void 0 : _a.toString() })), _jsx("p", { className: "solid-auth-otp-time", children: resendEnabled
+                                                    ? "You can resend now."
+                                                    : "Time left: ".concat(Math.floor(timeLeft / 60)
+                                                        .toString()
+                                                        .padStart(2, "0"), ":").concat((timeLeft % 60).toString().padStart(2, "0")) })] }), _jsxs("div", { className: "mt-4", children: [_jsx(SolidButton, { type: "submit", className: "w-full font-light auth-submit-button", label: "Verify", disabled: formik.isSubmitting, loading: formik.isSubmitting }), _jsx(SolidButton, { type: "button", label: "Back", className: "w-full auth-back-button text-center mt-1", text: true, onClick: function () { return (window.location.href = '/auth/login'); } })] })] }));
                         } }) })] }) }));
 };
 export default SolidInitiateRegisterOtp;