updated the reset password functionality

src/components/pages/dashboard/userDashboard/gameCredentials/CredentialsCard.tsx

 "use client";
 
-import { Box, Button, CircularProgress } from "@mui/material";
-import Image from "next/image";
-import React from "react";
-import BalanceRefresh from "./BalanceRefresh";
-import { Coin } from "@wandersonalwes/iconsax-react";
-import Link from "next/link";
+import GlassWrapper from "@/components/molecules/GlassWrapper";
 import TapIcon from "@/icons/Tap";
+import { useChangeUserGamePasswordMutation, useGetUserBalanceBySlugQuery } from "@/services/userApi";
 import { CredentialsProps } from "@/types/game";
+import { CircularProgress } from "@mui/material";
+import { Coin } from "@wandersonalwes/iconsax-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import GameIframeDialog from "../games/exclusiveGames/exclusiveGameDetail/GameIframeDialog";
+import BalanceRefresh from "./BalanceRefresh";
 import { CardPasswordField } from "./CardPasswordHandler";
 import CopyToClipboard from "./CopyToClipboard";
-import GameIframeDialog from "../games/exclusiveGames/exclusiveGameDetail/GameIframeDialog";
-import GlassWrapper from "@/components/molecules/GlassWrapper";
-import { useGetUserBalanceBySlugQuery } from "@/services/userApi";
+import ResetPasswordDialog from "./ResetPasswordDialog";
 
 export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
     const {
@@ -24,13 +25,21 @@ export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
         { slug: cred?.name },
         { skip: !cred?.name }
     ) as any;
+    const [openDialog, setOpenDialog] = useState(false);
+    const handleDialogOpen = (e: React.MouseEvent) => {
+        e.preventDefault();
+        setOpenDialog(true);
+    };
 
+    const handleDialogClose = () => setOpenDialog(false);
     const balance = balanceData?.data || null;
 
     // Extract values
     const scValue = balance?.flag === "sc" ? balance.balance ?? 0 : null;
     const gcValue = balance?.flag === "gc" ? balance.balance ?? 0 : null;
 
+    const [resetGamePassord, { isLoading }] = useChangeUserGamePasswordMutation();
+
     return (
         <GlassWrapper className="p-4 lg:p-6">
             {/* Header Section */}
@@ -78,6 +87,14 @@ export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
                 </div>
             </div>
 
+
+
+            <ResetPasswordDialog
+                open={openDialog}
+                onClose={handleDialogClose}
+                name={cred?.name || ""}
+            />
+
             {/* Credentials Info */}
             <ul className="mt-4">
                 <li className="py-2 border-t border-b border-[rgba(255,255,255,0.2)] grid grid-cols-2">
@@ -102,7 +119,7 @@ export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
             </ul>
 
             {/* Action Buttons */}
-            <div className="action__group mt-4 flex flex-col md:flex-row justify-between gap-2 md:gap-4">
+            <div className="action__group mt-4 flex flex-col md:flex-row justify-between gap-2 md:gap-4 flex-wrap">
                 <Link
                     href={cred?.name === "goldcoincity" ? "/buy-coins" : `/buy-coins/${cred?.id}`}
                     className="ss-btn bg-primary-grad flex justify-center items-center gap-1"
@@ -126,7 +143,14 @@ export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
                         isCredCard={true}
                     />
                 )}
+
             </div>
-        </GlassWrapper>
+            {cred?.can_change_password ? < p className="text-[14px] mt-2">
+                Forgot your password? <a href="" className="text-secondary" onClick={!cred?.custom_password ? (e) => {
+                    e.preventDefault();
+                    resetGamePassord({ password: "", confirm_password: "", name: cred?.name });
+                } : handleDialogOpen}>{isLoading ? "Changing Password" : "Click here to reset it."}</a>
+            </p> : ""}
+        </GlassWrapper >
     );
 }

src/components/pages/dashboard/userDashboard/gameCredentials/ResetPasswordDialog.tsx

+"use client";
+
+import PasswordField from "@/components/molecules/PasswordField";
+import { useAppDispatch } from "@/hooks/hook";
+import { useChangeUserGamePasswordMutation } from "@/services/userApi";
+import { showToast, ToastVariant } from "@/slice/toastSlice";
+import {
+    Box,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+} from "@mui/material";
+import { useFormik } from "formik";
+import * as Yup from "yup";
+
+const validationSchema = Yup.object().shape({
+    password: Yup.string()
+        .required("Password is required")
+        .test(
+            "no-leading-trailing-whitespace",
+            "Password cannot start or end with spaces",
+            (value) => value === value?.trim()
+        )
+        .max(16, "Password must be less than 16 characters"),
+    confirmPassword: Yup.string()
+        .oneOf([Yup.ref("password")], "Passwords must match")
+        .required("Confirm Password is required"),
+});
+
+export default function ResetPasswordDialog({
+    open,
+    onClose,
+    name,
+}: {
+    open: boolean;
+    onClose: () => void;
+    name: string;
+}) {
+    const dispatch = useAppDispatch();
+    const [resetGamePassord, { isLoading }] = useChangeUserGamePasswordMutation();
+
+    const { handleSubmit, handleBlur, handleChange, values, touched, errors } =
+        useFormik({
+            initialValues: {
+                password: "",
+                confirmPassword: "",
+            },
+            validationSchema,
+            onSubmit: async (values) => {
+                try {
+                    const response = await resetGamePassord({
+                        name,
+                        password: values.password,
+                        confirm_password: values.confirmPassword,
+                    }).unwrap();
+
+                    dispatch(
+                        showToast({
+                            message: response?.message || "Password updated successfully",
+                            variant: ToastVariant.SUCCESS,
+                            autoTime: true,
+                        })
+                    );
+                    onClose();
+                } catch (e: any) {
+                    dispatch(
+                        showToast({
+                            message:
+                                e?.data?.message || "Unable to reset password. Try again later.",
+                            variant: ToastVariant.ERROR,
+                            autoTime: true,
+                        })
+                    );
+                }
+            },
+        });
+
+    return (
+        <Dialog open={open} onClose={onClose} fullWidth maxWidth="xs">
+            <DialogTitle className="text-center font-semibold text-[18px]">
+                Reset Password
+            </DialogTitle>
+            <form onSubmit={handleSubmit}>
+                <DialogContent>
+                    <Box display="flex" flexDirection="column" gap={3} mt={1}>
+                        <PasswordField
+                            name="password"
+                            label="New Password*"
+                            placeholder="Enter new password"
+                            value={values.password}
+                            onChange={handleChange}
+                            onBlur={handleBlur}
+                            error={touched.password ? errors.password : undefined}
+                        />
+                        <PasswordField
+                            name="confirmPassword"
+                            label="Confirm Password*"
+                            placeholder="Re-enter password"
+                            value={values.confirmPassword}
+                            onChange={handleChange}
+                            onBlur={handleBlur}
+                            error={touched.confirmPassword ? errors.confirmPassword : undefined}
+                        />
+                    </Box>
+                </DialogContent>
+                <DialogActions sx={{ px: 3, pb: 3, flexDirection: "column", gap: 1 }}>
+                    <Button
+                        type="submit"
+                        fullWidth
+                        variant="contained"
+                        color="primary"
+                        disabled={isLoading}
+                    >
+                        {isLoading ? "Changing Password..." : "Reset Password"}
+                    </Button>
+                    <Button onClick={onClose} fullWidth color="inherit">
+                        Cancel
+                    </Button>
+                </DialogActions>
+            </form>
+        </Dialog>
+    );
+}

src/services/authApi.ts

@@ -74,4 +74,4 @@ export const authApi = createApi({
     })
 })
 
-export const { useLoginMutation, useRegisterUserMutation, useSendVerificationLinkAgainMutation, useForgotPasswordMutation, useVerifyOTPMutation, useResetPasswordMutation, useVerifyEmailMutation } = authApi;
\ No newline at end of file
+export const { useLoginMutation, useRegisterUserMutation, useSendVerificationLinkAgainMutation, useForgotPasswordMutation, useVerifyOTPMutation, useResetPasswordMutation, useVerifyEmailMutation ,useRe} = authApi;
\ No newline at end of file

src/services/userApi.ts

+import { GlobalResponse } from "@/types/config";
+import { CredentialsResponseProps } from "@/types/game";
+import { SinlgePlayerResponseProps, WalletProps } from "@/types/player";
+import { UserBalanceResponse } from "@/types/user";
 import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQuery } from "./baseQuery";
-import { SinlgePlayerResponseProps, WalletProps } from "@/types/player";
-import { UserBalance, UserBalanceResponse } from "@/types/user";
-import { getUserGameBalance } from "@/serverApi/game";
-import { CredentialsResponseProps } from "@/types/game";
 
 export const userApi = createApi({
     reducerPath: "userApi",
@@ -44,16 +44,29 @@ export const userApi = createApi({
             query: () => ({
                 url: "/api/detail/get-balance",
                 method: "GET"
-            })
+            }),
+            providesTags: ['user']
         }),
         getUserGameCredentials: builder.query<CredentialsResponseProps, void>({
             query: () => ({
                 url: `/api/credentials`,
                 method: "GET"
-            })
             }),
+            providesTags: ['user']
+        }),
+        changeUserGamePassword: builder.mutation<GlobalResponse, { password: string; confirm_password: string, name: string }>({
+            query: ({ password, confirm_password, name }) => ({
+                url: `/api/change-password?for=${name}`,
+                method: "POST",
+                body: {
+                    password,
+                    password_confirmation: confirm_password
+                }
+            }),
+            invalidatesTags: ['user', "wallet"],
+        })
     })
 
 })
 
-export const { useAddUserWalletMutation, useUpdateUserProfileMutation, useGetUserBalanceQuery, useGetUserBalanceBySlugQuery, useGetUserGameBalanceQuery, useGetUserGameCredentialsQuery } = userApi;
\ No newline at end of file
+export const { useAddUserWalletMutation, useUpdateUserProfileMutation, useGetUserBalanceQuery, useGetUserBalanceBySlugQuery, useGetUserGameBalanceQuery, useGetUserGameCredentialsQuery, useChangeUserGamePasswordMutation } = userApi;
\ No newline at end of file

src/types/game.ts

@@ -88,6 +88,7 @@ export interface CredentialsProps {
     entries: string | number;
     is_iframe?: boolean;
     has_redirection?: boolean;
+    can_change_password?: boolean;
 }
 export interface CredentialsResponseProps {
     data: CredentialsProps[];