@solidstarters/solid-core-ui 1.1.3 → 1.1.5

package/dist/redux/api/authApi.js

@@ -51,7 +51,34 @@ export var authApi = createApi({
                 };
             },
         }),
+        initiateChangePassword: builder.mutation({
+            query: function (body) {
+                return {
+                    url: '/iam/initiate/forgot-password',
+                    method: "POST",
+                    body: body,
+                };
+            }
+        }),
+        confirmForgotPassword: builder.mutation({
+            query: function (body) {
+                return {
+                    url: '/iam/confirm/forgot-password',
+                    method: "POST",
+                    body: body
+                };
+            }
+        }),
+        changePassword: builder.mutation({
+            query: function (body) {
+                return {
+                    url: "/iam/change-password",
+                    method: "POST",
+                    body: body,
+                };
+            },
+        }),
     }); },
 });
-export var useRegisterMutation = authApi.useRegisterMutation, useRegisterPrivateMutation = authApi.useRegisterPrivateMutation, useUpdateUserMutation = authApi.useUpdateUserMutation, useForgotPasswordMutation = authApi.useForgotPasswordMutation, useResetPasswordMutation = authApi.useResetPasswordMutation;
+export var useRegisterMutation = authApi.useRegisterMutation, useRegisterPrivateMutation = authApi.useRegisterPrivateMutation, useUpdateUserMutation = authApi.useUpdateUserMutation, useForgotPasswordMutation = authApi.useForgotPasswordMutation, useResetPasswordMutation = authApi.useResetPasswordMutation, useInitiateChangePasswordMutation = authApi.useInitiateChangePasswordMutation, useConfirmForgotPasswordMutation = authApi.useConfirmForgotPasswordMutation, useChangePasswordMutation = authApi.useChangePasswordMutation;
 //# sourceMappingURL=authApi.js.map

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;KACH,CAAC,EA5CsB,CA4CtB;CACH,CAAC,CAAC;AAEH,MAAM,CACJ,IAAA,mBAAmB,GAKjB,OAAO,oBALU,EACnB,0BAA0B,GAIxB,OAAO,2BAJiB,EAC1B,qBAAqB,GAGnB,OAAO,sBAHY,EACrB,yBAAyB,GAEvB,OAAO,0BAFgB,EACzB,wBAAwB,GACtB,OAAO,yBADe,CACd"}
+{"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"}

package/package.json

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

package/src/components/auth/SolidChangeForcePassword.tsx

@@ -0,0 +1,159 @@
+"use client"
+import { useChangePasswordMutation } from '@/redux/api/authApi';
+import { useFormik } from 'formik';
+import { signOut, useSession } from 'next-auth/react';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { Message } from 'primereact/message';
+import { Password } from 'primereact/password';
+import { Toast } from 'primereact/toast';
+import { classNames } from 'primereact/utils';
+import { useRef } from 'react';
+import * as Yup from 'yup';
+const SolidChangeForcePassword = () => {
+    const toast = useRef<Toast>(null);
+    const [changePassword] = useChangePasswordMutation();
+
+    const session: any = useSession();
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+    const validationSchema = Yup.object({
+        email: Yup.string().email('Invalid email format').required('Email is required'),
+        currentPassword: Yup.string().min(6, 'Password must be at least 6 characters').required('Current password is required'),
+        newPassword: Yup.string().min(6, 'Password must be at least 6 characters').required('New password is required'),
+        confirmPassword: Yup.string().oneOf([Yup.ref('newPassword')], 'Passwords must match').required('Confirm password is required'),
+        id: Yup.number().required('User ID is required'),
+    });
+    const formik = useFormik({
+        initialValues: {
+            email: session?.data?.user?.user?.email,
+            currentPassword: "",
+            newPassword: "",
+            confirmPassword: "",
+            id: session?.data?.user?.user?.id,
+        },
+        validationSchema,
+        onSubmit: async (values) => {
+            try {
+                const payload = {
+                    id: values.id,
+                    email: values.email,
+                    currentPassword: values.currentPassword,
+                    newPassword: values.newPassword,
+                };
+                console.log("Payload:", payload);
+
+                // Call the mutation and handle the response
+                const response = await changePassword(payload).unwrap(); // Await the API call and unwrap to handle errors.
+                if (response?.statusCode === 200) {
+                    showToast("success", "Force Password Change Success", "Password Change Successfully");
+                    signOut({ callbackUrl: "/auth/login" })
+                } else (
+                    showToast("error", "Login Error", response.error)
+                )
+            } catch (err) {
+                console.error("Failed to update password:", err);
+                showToast("error", "Login Failed", "Something went wrong");
+            }
+        },
+    });
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <>
+            <Toast ref={toast} />
+
+            <form onSubmit={formik.handleSubmit} className='d-flex flex-column gap-3 auth-form'>
+                <div className="flex flex-column gap-2 mt-2">
+                    <label htmlFor="email" className="solid-auth-input-label">Email Id</label>
+                    <InputText
+                        id="email"
+                        name="email"
+                        placeholder="Email ID"
+                        value={formik.values.email}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        readOnly
+                    />
+                </div>
+                <div className="flex flex-column gap-2 mt-4" style={{}}>
+                    <label htmlFor="currentPassword" className="solid-auth-input-label">Current Password</label>
+                    <Password
+                        id="currentPassword"
+                        name="currentPassword"
+                        placeholder="***************"
+                        value={formik.values.currentPassword}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        toggleMask
+                        className={classNames("", {
+                            "p-invalid": isFormFieldValid(formik, "password"),
+                        })}
+                        inputClassName="w-full"
+                        feedback={false}
+                    />
+                    {isFormFieldValid(formik, "currentPassword") && <Message
+                        className="text-red-500 text-sm"
+                        severity="error"
+                        text={formik?.errors?.currentPassword?.toString()}
+                    />}
+                </div>
+                <div className="flex flex-column gap-2 mt-4" style={{}}>
+                    <label htmlFor="password" className="solid-auth-input-label">New Password</label>
+                    <Password
+                        id="newPassword"
+                        name="newPassword"
+                        placeholder="***************"
+                        value={formik.values.newPassword}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        toggleMask
+                        className={classNames("", {
+                            "p-invalid": isFormFieldValid(formik, "newPassword"),
+                        })}
+                        inputClassName="w-full"
+                        feedback={false}
+                    />
+                    {isFormFieldValid(formik, "newPassword") && <Message
+                        className="text-red-500 text-sm"
+                        severity="error"
+                        text={formik?.errors?.newPassword?.toString()}
+                    />}
+                </div>
+                <div className="flex flex-column gap-2 mt-4" style={{}}>
+                    <label htmlFor="password" className="solid-auth-input-label">Confirm Password</label>
+                    <Password
+                        id="confirmPassword"
+                        name="confirmPassword"
+                        placeholder="***************"
+                        value={formik.values.confirmPassword}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        toggleMask
+                        className={classNames("", {
+                            "p-invalid": isFormFieldValid(formik, "confirmPassword"),
+                        })}
+                        inputClassName="w-full"
+                        feedback={false}
+                    />
+                    {isFormFieldValid(formik, "confirmPassword") && <Message
+                        className="text-red-500 text-sm"
+                        severity="error"
+                        text={formik?.errors?.confirmPassword?.toString()}
+                    />}
+                </div>
+                <div className="mt-4">
+                    <Button className="w-full font-light auth-submit-button" label="Change Password" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                </div>
+            </form>
+        </>
+    )
+}
+export default SolidChangeForcePassword

package/src/components/auth/SolidForgotPassword.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { Form, Formik } from "formik";
-import { signIn } from "next-auth/react";
+import { useInitiateChangePasswordMutation } from "@/redux/api/authApi";
+import { useFormik } from "formik";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Button } from "primereact/button";
 import { InputText } from "primereact/inputtext";
 import { Message } from "primereact/message";
 import { Toast } from "primereact/toast";
-import { useContext, useRef, useState } from "react";
+import { useContext, useRef } from "react";
 import * as Yup from "yup";
 import { LayoutContext } from "../layout/context/layoutcontext";
 
@@ -18,17 +18,6 @@ const SolidForgotPassword = () => {
     const { authLayout } = layoutConfig;
     const toast = useRef<Toast>(null);
     const router = useRouter();
-
-    const [password, setPassword] = useState('');
-    const [checked, setChecked] = useState<boolean>(false);
-
-    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,
@@ -37,6 +26,43 @@ const SolidForgotPassword = () => {
             life: 3000,
         });
     };
+    const [initiateChangePassword] = useInitiateChangePasswordMutation();
+    const validationSchema = Yup.object({
+        email: Yup.string()
+            .email('Invalid email format')
+            .required('Email is required'),
+    });
+    function maskEmail(email: string) {
+        const [localPart, domain] = email.split('@');
+        const maskedLocal = localPart.slice(0, 3) + '*'.repeat(localPart.length - 3);
+        const maskedDomain = domain.slice(-8).padStart(domain.length, '*');
+        return `${maskedLocal}@${maskedDomain}`;
+    }
+
+    const formik = useFormik({
+        initialValues: {
+            email: "",
+        },
+        validationSchema,
+        onSubmit: async (values) => {
+            try {
+                const payload = {
+                    email: values.email,
+                };
+                const response = await initiateChangePassword(payload).unwrap();
+                if (response?.statusCode === 200) {
+                    const email = response?.data?.data?.user?.email;
+                    const maskedEmail = maskEmail(email);
+                    router.push(`/auth/initiate-forgot-password-thank-you?email=${maskedEmail}`)
+                } else (
+                    showToast("error", "Login Error", response.error)
+                )
+            } catch (err: any) {
+                console.log("Error", err);
+                showToast("error", "Login Error", err?.data ? err?.data?.message : "Something Went Wrong");
+            }
+        },
+    });
 
     const isFormFieldValid = (formik: any, fieldName: string) =>
         formik.touched[fieldName] && formik.errors[fieldName];
@@ -45,72 +71,45 @@ const SolidForgotPassword = () => {
         <>
             <Toast ref={toast} />
             <div className={`auth-container ${authLayout === 'Center' ? 'center' : 'side'}`}>
-                <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>
+                {authLayout === '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>
-                </div>
-                <h2 className="solid-auth-title text-center">Forgot Password</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>
-                <>
-                    <Formik
-                        initialValues={{
-                            email: "",
-                            password: "",
-                        }}
-                        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,
-                            });
-                            if (response?.error) {
-                                showToast("error", "Login Error", response.error);
-                            } else {
-                                showToast("success", "Login Success", "Redirecting to dashboard...");
-                                router.push("/admin/core/solid-core/user/list");
-                            }
-
-                        }}
-                    >
-                        {(formik) => (
-                            <Form>
-                                <div className="flex flex-column gap-2">
-                                    <label htmlFor="email" className="solid-auth-input-label">Username or 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">
-                                    <Button className="w-full font-light" label="Send OTP" />
-                                </div>
-                            </Form>
-                        )}
-                    </Formik>
-                </>
+                }
+                <h2 className={`solid-auth-title ${authLayout === 'Center' ? 'text-center' : 'text-left'}`}>Forgot Password</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> */}
+                <form onSubmit={formik.handleSubmit}>
+                    <div className="flex flex-column gap-2">
+                        <label htmlFor="email" className="solid-auth-input-label">Username or Email</label>
+                        <InputText
+                            id="email"
+                            name="email"
+                            placeholder="Email ID"
+                            value={formik.values.email}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                        />
+                        {isFormFieldValid(formik, "email") && <Message
+                            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="Send OTP" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
+                    </div>
+                </form>
             </div>
             <div className="text-center mt-5">
                 <div className="text-sm text-400 secondary-dark-color">