@solidstarters/solid-core-ui 1.1.8 → 1.1.10

package/dist/redux/api/authApi.js.map

@@ -1 +1 @@
-{"version":3,"file":"authApi.js","sourceRoot":"","sources":["../../../src/redux/api/authApi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,CAAC,IAAM,OAAO,GAAG,SAAS,CAAC;IAC/B,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,iBAAiB;IAC5B,SAAS,EAAE,UAAC,OAAO,IAAK,OAAA,CAAC;QACvB,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC;YACzB,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,eAAe;oBACpB,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;QACF,eAAe,EAAE,OAAO,CAAC,QAAQ,CAAC;YAChC,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,uBAAuB;oBAC5B,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;QACF,UAAU,EAAE,OAAO,CAAC,QAAQ,CAAC;YAC3B,KAAK,EAAE,UAAC,EAAY;oBAAV,EAAE,QAAA,EAAE,IAAI,UAAA;gBAAO,OAAA,CAAC;oBACxB,GAAG,EAAE,gBAAS,EAAE,CAAE;oBAClB,MAAM,EAAE,OAAO;oBACf,IAAI,EAAE,IAAI;iBACX,CAAC;YAJuB,CAIvB;SACH,CAAC;QACF,cAAc,EAAE,OAAO,CAAC,QAAQ,CAAC;YAC/B,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,kBAAkB;oBACvB,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;QACF,aAAa,EAAE,OAAO,CAAC,QAAQ,CAAC;YAC9B,KAAK,YAAC,EAAe;oBAAb,KAAK,WAAA,EAAE,IAAI,UAAA;gBACjB,OAAO;oBACL,GAAG,EAAE,0BAAmB,KAAK,CAAE;oBAC/B,MAAM,EAAE,KAAK;oBACb,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;QACF,sBAAsB,EAAE,OAAO,CAAC,QAAQ,CAAC;YACvC,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,+BAA+B;oBACpC,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAA;YACH,CAAC;SACF,CAAC;QACF,qBAAqB,EAAE,OAAO,CAAC,QAAQ,CAAC;YACtC,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,8BAA8B;oBACnC,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAA;YACH,CAAC;SACF,CAAC;QACF,cAAc,EAAE,OAAO,CAAC,QAAQ,CAAC;YAC/B,KAAK,YAAC,IAAI;gBACN,OAAO;oBACH,GAAG,EAAE,sBAAsB;oBAC3B,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACP,CAAC;YACN,CAAC;SACJ,CAAC;KACD,CAAC,EAvEsB,CAuEtB;CACH,CAAC,CAAC;AAEH,MAAM,CACJ,IAAA,mBAAmB,GAQjB,OAAO,oBARU,EACnB,0BAA0B,GAOxB,OAAO,2BAPiB,EAC1B,qBAAqB,GAMnB,OAAO,sBANY,EACrB,yBAAyB,GAKvB,OAAO,0BALgB,EACzB,wBAAwB,GAItB,OAAO,yBAJe,EACxB,iCAAiC,GAG/B,OAAO,kCAHwB,EACjC,gCAAgC,GAE9B,OAAO,iCAFuB,EAChC,yBAAyB,GACvB,OAAO,0BADgB,CACf"}
+{"version":3,"file":"authApi.js","sourceRoot":"","sources":["../../../src/redux/api/authApi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,CAAC,IAAM,OAAO,GAAG,SAAS,CAAC;IAC/B,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,iBAAiB;IAC5B,SAAS,EAAE,UAAC,OAAO,IAAK,OAAA,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC,QAAQ,CAAC;YAC7B,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,yBAAyB;oBAC9B,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;QACF,eAAe,EAAE,OAAO,CAAC,QAAQ,CAAC;YAChC,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,wBAAwB;oBAC7B,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;QACF,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC;YACzB,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,eAAe;oBACpB,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;QACF,eAAe,EAAE,OAAO,CAAC,QAAQ,CAAC;YAChC,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,4BAA4B;oBACjC,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;QACF,kBAAkB,EAAE,OAAO,CAAC,QAAQ,CAAC;YACnC,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,2BAA2B;oBAChC,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;QACF,eAAe,EAAE,OAAO,CAAC,QAAQ,CAAC;YAChC,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,uBAAuB;oBAC5B,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;QACF,UAAU,EAAE,OAAO,CAAC,QAAQ,CAAC;YAC3B,KAAK,EAAE,UAAC,EAAY;oBAAV,EAAE,QAAA,EAAE,IAAI,UAAA;gBAAO,OAAA,CAAC;oBACxB,GAAG,EAAE,gBAAS,EAAE,CAAE;oBAClB,MAAM,EAAE,OAAO;oBACf,IAAI,EAAE,IAAI;iBACX,CAAC;YAJuB,CAIvB;SACH,CAAC;QACF,cAAc,EAAE,OAAO,CAAC,QAAQ,CAAC;YAC/B,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,kBAAkB;oBACvB,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;QACF,aAAa,EAAE,OAAO,CAAC,QAAQ,CAAC;YAC9B,KAAK,YAAC,EAAe;oBAAb,KAAK,WAAA,EAAE,IAAI,UAAA;gBACjB,OAAO;oBACL,GAAG,EAAE,0BAAmB,KAAK,CAAE;oBAC/B,MAAM,EAAE,KAAK;oBACb,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;QACF,sBAAsB,EAAE,OAAO,CAAC,QAAQ,CAAC;YACvC,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,+BAA+B;oBACpC,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAA;YACH,CAAC;SACF,CAAC;QACF,qBAAqB,EAAE,OAAO,CAAC,QAAQ,CAAC;YACtC,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,8BAA8B;oBACnC,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAA;YACH,CAAC;SACF,CAAC;QACF,cAAc,EAAE,OAAO,CAAC,QAAQ,CAAC;YAC/B,KAAK,YAAC,IAAI;gBACR,OAAO;oBACL,GAAG,EAAE,sBAAsB;oBAC3B,MAAM,EAAE,MAAM;oBACd,IAAI,MAAA;iBACL,CAAC;YACJ,CAAC;SACF,CAAC;KACH,CAAC,EA3GsB,CA2GtB;CACH,CAAC,CAAC;AAEH,MAAM,CACJ,IAAA,mBAAmB,GAYjB,OAAO,oBAZU,EACnB,0BAA0B,GAWxB,OAAO,2BAXiB,EAC1B,qBAAqB,GAUnB,OAAO,sBAVY,EACrB,yBAAyB,GASvB,OAAO,0BATgB,EACzB,wBAAwB,GAQtB,OAAO,yBARe,EACxB,iCAAiC,GAO/B,OAAO,kCAPwB,EACjC,gCAAgC,GAM9B,OAAO,iCANuB,EAChC,yBAAyB,GAKvB,OAAO,0BALgB,EACzB,uBAAuB,GAIrB,OAAO,wBAJc,EACvB,0BAA0B,GAGxB,OAAO,2BAHiB,EAC1B,0BAA0B,GAExB,OAAO,2BAFiB,EAC1B,6BAA6B,GAC3B,OAAO,8BADoB,CACnB"}

package/dist/redux/api/testApi.d.ts

@@ -0,0 +1,5 @@
+export declare const testApi: import("@reduxjs/toolkit/query/react").Api<import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, import("@reduxjs/toolkit/query/react").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, {
+    seeder: import("@reduxjs/toolkit/query/react").MutationDefinition<any, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, import("@reduxjs/toolkit/query/react").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, any, "testApi">;
+}, "testApi", never, typeof import("@reduxjs/toolkit/query/react").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;
+export declare const useSeederMutation: import("@reduxjs/toolkit/dist/query/react/buildHooks").UseMutation<import("@reduxjs/toolkit/query/react").MutationDefinition<any, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, import("@reduxjs/toolkit/query/react").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, any, "testApi">>;
+//# sourceMappingURL=testApi.d.ts.map

package/dist/redux/api/testApi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testApi.d.ts","sourceRoot":"","sources":["../../../src/redux/api/testApi.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;uJAelB,CAAC;AAEH,eAAO,MAAO,iBAAiB,8YAAW,CAAA"}

package/dist/redux/api/testApi.js

@@ -0,0 +1,19 @@
+import { createApi } from '@reduxjs/toolkit/query/react';
+import { baseQueryWithAuth } from './fetchBaseQuery';
+export var testApi = createApi({
+    reducerPath: 'testApi',
+    baseQuery: baseQueryWithAuth,
+    endpoints: function (builder) { return ({
+        seeder: builder.mutation({
+            query: function (name) { return ({
+                url: '/test/seed',
+                method: 'POST',
+                body: {
+                    "seeder": name
+                }
+            }); },
+        }),
+    }); }
+});
+export var useSeederMutation = testApi.useSeederMutation;
+//# sourceMappingURL=testApi.js.map

package/dist/redux/api/testApi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testApi.js","sourceRoot":"","sources":["../../../src/redux/api/testApi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,CAAC,IAAM,OAAO,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,iBAAiB;IAC5B,SAAS,EAAE,UAAC,OAAO,IAAK,OAAA,CAAC;QACrB,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC;YACrB,KAAK,EAAE,UAAC,IAAI,IAAK,OAAA,CAAC;gBACd,GAAG,EAAE,YAAY;gBACjB,MAAM,EAAE,MAAM;gBACd,IAAI,EAAE;oBACF,QAAQ,EAAE,IAAI;iBACjB;aACJ,CAAC,EANe,CAMf;SACL,CAAC;KACL,CAAC,EAVsB,CAUtB;CAEL,CAAC,CAAC;AAEH,MAAM,CAAQ,IAAA,iBAAiB,GAAI,OAAO,kBAAX,CAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "scripts": {
     "build": "tsc && tsc-alias",
     "clean": "rm -rf dist",

package/src/components/auth/SolidForgotPassword.tsx

@@ -19,8 +19,6 @@ const SolidForgotPassword = () => {
     useEffect(() => {
         trigger("") // Fetch settings on mount
     }, [trigger])
-    const { layoutConfig } = useContext(LayoutContext);
-    const { authLayout } = layoutConfig;
     const toast = useRef<Toast>(null);
     const router = useRouter();
     const showToast = (severity: "success" | "error", summary: string, detail: string) => {

package/src/components/auth/SolidInitialLoginOtp.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useConfirmOtpLoginMutation } from "@/redux/api/authApi";
+import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
+import { Form, Formik } from "formik";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { InputOtp } from "primereact/inputotp";
+import { Message } from "primereact/message";
+import { Toast } from "primereact/toast";
+import { useEffect, useRef } from "react";
+import * as Yup from "yup";
+
+
+const SolidInitialLoginOtp = ({ email }: { email: string }) => {
+    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
+    useEffect(() => {
+        trigger("")
+    }, [trigger])
+    const [initiateOtpLogin] = useConfirmOtpLoginMutation();
+
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+
+    const validationSchema = Yup.object({
+        otp: Yup.string()
+            .matches(/^\d{6}$/, "OTP must be a 6-digit number")
+            .required("OTP is required"),
+    });
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <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 gap-3">
+                            <img
+                                alt="solid logo"
+                                src={'/images/SS-Logo-1 1.png'}
+                                className="position-relative img-fluid"
+                            />
+                            <div>
+                                <p className="solid-logo-title">
+                                    Solid<br />Starters
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                }
+                <h2 className={`solid-auth-title ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`}>OTP Verification</h2>
+                <p className="solid-auth-subtitle text-sm">
+                    Please enter the OTP sent to your email to complete verification
+                </p>
+                <>
+                    <Formik
+                        initialValues={{
+                            otp: "",
+                        }}
+                        validationSchema={validationSchema}
+                        onSubmit={async (values, { setSubmitting }) => {
+                            try {
+                                const payload = {
+                                    type: "email",
+                                    identifier: email,
+                                    otp: values.otp
+                                };
+
+                                const response = await initiateOtpLogin(payload).unwrap(); // Call mutation trigger
+
+                                if (response?.statusCode === 200) {
+                                    showToast("success", "Login Successfully", "Login");
+                                    router.push(`/admin/core/solid-core/user/list`);
+                                } else {
+                                    showToast("error", "Login Error", response.error);
+                                }
+                            } catch (err: any) {
+                                showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
+                            } finally {
+                                setSubmitting(false);
+                            }
+                        }}
+                    >
+                        {(formik) => (
+                            <Form>
+                                <div className="flex flex-column gap-2 px-3">
+                                    <label htmlFor="otp" className="solid-auth-input-label">Enter OTP</label>
+                                    <InputOtp
+                                        value={formik.values.otp}
+                                        onChange={(e) => formik.setFieldValue("otp", e.value)}
+                                        length={6}
+                                        style={{ width: '100%' }}
+                                    />
+                                    {isFormFieldValid(formik, "otp") && (
+                                        <Message 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" />
+                                        <p className="m-0 text-sm text-color">
+                                            Time left: 00:28
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="mt-4">
+                                    <Button type="submit" className="w-full font-light auth-submit-button" label="Verify" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                                </div>
+                            </Form>
+                        )}
+                    </Formik>
+                </>
+            </div>
+            <div className="text-center mt-5">
+                <div className="text-sm text-400 secondary-dark-color">
+                    {'<'} Back to <Link className="font-bold" href="/auth/login">Sign In</Link>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default SolidInitialLoginOtp;

package/src/components/auth/SolidInitiateRegisterOtp.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useConfirmOtpRegisterMutation } from "@/redux/api/authApi";
+import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
+import { Form, Formik } from "formik";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { InputOtp } from "primereact/inputotp";
+import { Message } from "primereact/message";
+import { Toast } from "primereact/toast";
+import { useEffect, useRef } from "react";
+import * as Yup from "yup";
+
+
+const SolidInitiateRegisterOtp = ({ email }: { email: string }) => {
+    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
+    useEffect(() => {
+        trigger("")
+    }, [trigger])
+    const [initiateOtpRegister] = useConfirmOtpRegisterMutation();
+
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+
+    const validationSchema = Yup.object({
+        otp: Yup.string()
+            .matches(/^\d{6}$/, "OTP must be a 6-digit number")
+            .required("OTP is required"),
+    });
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <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 gap-3">
+                            <img
+                                alt="solid logo"
+                                src={'/images/SS-Logo-1 1.png'}
+                                className="position-relative img-fluid"
+                            />
+                            <div>
+                                <p className="solid-logo-title">
+                                    Solid<br />Starters
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                }
+                <h2 className={`solid-auth-title ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`}>OTP Verification</h2>
+                <p className="solid-auth-subtitle text-sm">
+                    Please enter the OTP sent to your email to complete verification
+                </p>
+                <>
+                    <Formik
+                        initialValues={{
+                            otp: "",
+                        }}
+                        validationSchema={validationSchema}
+                        onSubmit={async (values, { setSubmitting }) => {
+                            try {
+                                const payload = {
+                                    type: "email",
+                                    identifier: email,
+                                    otp: values.otp
+                                };
+
+                                const response = await initiateOtpRegister(payload).unwrap(); // Call mutation trigger
+
+                                if (response?.statusCode === 200) {
+                                    showToast("success", "Login Successfully", "Login");
+                                    router.push(`/auth/login`);
+                                } else {
+                                    showToast("error", "Login Error", response.error);
+                                }
+                            } catch (err: any) {
+                                showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
+                            } finally {
+                                setSubmitting(false);
+                            }
+                        }}
+                    >
+                        {(formik) => (
+                            <Form>
+                                <div className="flex flex-column gap-2 px-3">
+                                    <label htmlFor="otp" className="solid-auth-input-label">Enter OTP</label>
+                                    <InputOtp
+                                        value={formik.values.otp}
+                                        onChange={(e) => formik.setFieldValue("otp", e.value)}
+                                        length={6}
+                                        style={{ width: '100%' }}
+                                    />
+                                    {isFormFieldValid(formik, "otp") && (
+                                        <Message 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" />
+                                        <p className="m-0 text-sm text-color">
+                                            Time left: 00:28
+                                        </p>
+                                    </div>
+                                </div>
+                                <div className="mt-4">
+                                    <Button type="submit" className="w-full font-light auth-submit-button" label="Verify" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                                </div>
+                            </Form>
+                        )}
+                    </Formik>
+                </>
+            </div>
+            <div className="text-center mt-5">
+                <div className="text-sm text-400 secondary-dark-color">
+                    {'<'} Back to <Link className="font-bold" href="/auth/login">Sign In</Link>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default SolidInitiateRegisterOtp;

package/src/components/auth/SolidLogin.tsx

@@ -17,27 +17,20 @@ import * as Yup from "yup";
 import { SocialMediaLogin } from "../common/SocialMediaLogin";
 import { LayoutContext } from "../layout/context/layoutcontext";
 import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
-
+import { useInitateLoginMutation } from "@/redux/api/authApi";
 
 const SolidLogin = () => {
-    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery()
+    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
+    const [initiateLogin] = useInitateLoginMutation();
+
     useEffect(() => {
         trigger("") // Fetch settings on mount
     }, [trigger])
-    const { layoutConfig } = useContext(LayoutContext);
-    const { authLayout } = layoutConfig;
     const toast = useRef<Toast>(null);
     const router = useRouter();
 
     const [password, setPassword] = useState('');
 
-    const validationSchema = Yup.object({
-        email: Yup.string()
-            .email("Invalid email address")
-            .required("Email is required"),
-        password: Yup.string().required("Password is required"),
-    });
-
     const showToast = (severity: "success" | "error", summary: string, detail: string) => {
         toast.current?.show({
             severity,
@@ -73,14 +66,19 @@ const SolidLogin = () => {
                 <h2 className={`solid-auth-title ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'text-center' : '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> */}
 
-                <TabView>
-                    <TabPanel header="Login With Password">
+                <TabView className="solid-auth-tabview">
+                    <TabPanel header="With Password">
                         <Formik
                             initialValues={{
                                 email: "",
                                 password: "",
                             }}
-                            validationSchema={validationSchema}
+                            validationSchema={Yup.object({
+                                email: Yup.string()
+                                    .email("Invalid email address")
+                                    .required("Email is required"),
+                                password: Yup.string().required("Password is required"),
+                            })}
                             onSubmit={async (values, { setSubmitting }) => {
                                 try {
                                     const response = await signIn("credentials", {
@@ -95,8 +93,8 @@ const SolidLogin = () => {
                                         showToast("success", "Login Success", "Redirecting to dashboard...");
                                         router.push("/admin/core/solid-core/user/list");
                                     }
-                                } catch (error) {
-                                    showToast("error", "Login Failed", "Something went wrong");
+                                } catch (error: any) {
+                                    showToast("error", "Login Error", error?.data ? error?.data?.message : "Something Went Wrong");
                                 } finally {
                                     setSubmitting(false); // Re-enable the button after submission
                                 }
@@ -156,7 +154,64 @@ const SolidLogin = () => {
                             )}
                         </Formik>
                     </TabPanel>
-                    <TabPanel header="Login Without Password">
+                    <TabPanel header="Without Password">
+                        <Formik
+                            initialValues={{
+                                email: "",
+                            }}
+                            validationSchema={Yup.object({
+                                email: Yup.string()
+                                    .email("Invalid email address")
+                            })}
+                            onSubmit={async (values, { setSubmitting }) => {
+                                try {
+                                    const payload = {
+                                        type: "email",
+                                        identifier: values.email,
+                                    };
+
+                                    const response = await initiateLogin(payload).unwrap(); // Call mutation trigger
+
+                                    if (response?.statusCode === 200) {
+                                        showToast("success", "OTP sent Successfully", response?.data?.message);
+                                        const email = values.email;
+                                        router.push(`/auth/initiate-login?email=${email}`);
+                                    } else {
+                                        showToast("error", "Login Error", response.error);
+                                    }
+                                } catch (err: any) {
+                                    showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
+                                } finally {
+                                    setSubmitting(false);
+                                }
+                            }}
+                        >
+                            {(formik) => (
+                                <Form>
+                                    <div className="flex flex-column gap-2">
+                                        <label htmlFor="email" className="solid-auth-input-label">Email</label>
+                                        <InputText
+                                            id="email"
+                                            name="email"
+                                            placeholder="Email ID"
+                                            onChange={formik.handleChange}
+                                            value={formik.values.email}
+                                        />
+                                        {isFormFieldValid(formik, "email") && <Message
+                                            className="text-red-500 text-sm"
+                                            severity="error"
+                                            text={formik?.errors?.email?.toString()}
+                                        />}
+                                    </div>
+                                    <div className="mt-4 text-right">
+                                        <Link href={"/auth/initiate-forgot-password"} className="solid-auth-input-label">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>
                     </TabPanel>
                 </TabView>
                 {solidSettingsData?.data?.iamGoogleOAuthEnabled &&

package/src/components/auth/SolidOTPVerify.tsx

@@ -8,14 +8,17 @@ import { Button } from "primereact/button";
 import { InputOtp } from "primereact/inputotp";
 import { Message } from "primereact/message";
 import { Toast } from "primereact/toast";
-import { useContext, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import * as Yup from "yup";
 import { LayoutContext } from "../layout/context/layoutcontext";
+import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
 
 
 const SolidOTPVerify = () => {
-    const { layoutConfig } = useContext(LayoutContext);
-    const { authLayout } = layoutConfig;
+    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
+    useEffect(() => {
+        trigger("")
+    }, [trigger])
     const [otp, setOTP] = useState<number | any>();
 
     const toast = useRef<Toast>(null);
@@ -45,8 +48,8 @@ const SolidOTPVerify = () => {
     return (
         <>
             <Toast ref={toast} />
-            <div className={`auth-container ${authLayout === 'Center' ? 'center' : 'side'}`} style={{ minWidth: 480 }}>
-            {authLayout === 'Center' &&
+            <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 gap-3">
                             <img
@@ -62,7 +65,7 @@ const SolidOTPVerify = () => {
                         </div>
                     </div>
                 }
-                <h2 className={`solid-auth-title ${authLayout === 'Center' ? 'text-center' : 'text-left'}`}>OTP Verification</h2>
+                <h2 className={`solid-auth-title ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'text-center' : 'text-left'}`}>OTP Verification</h2>
                 <p className="solid-auth-subtitle text-sm">
                     Please enter the OTP sent to your email to complete verification
                 </p>