Skip to content

S
sweepstake
Commit 78e81f01 by Arjun Jhukal
Options

updated the new logic for the update new password

parent a808942d
Showing with 264 additions and 75 deletions
src/app/ProviderWrapper.tsx
import Toast from '@/components/molecules/Toast'
import UpdatePassword from '@/components/organism/UpdatePassword'
import { ThemeContextProvider } from '@/context/ThemeContext'
import { ClientProvider } from '@/hooks/ReduxProvider'
import ThemeCustomization from '@/theme'
import React from 'react'
import { AgeChecker } from './AgeChecker'
import { SeonProvider } from './SeonProvider'
export default function ProviderWrapper({ children }: { children: React.ReactNode }) {
return (
......@@ -13,6 +12,7 @@ export default function ProviderWrapper({ children }: { children: React.ReactNod
<ThemeCustomization>
{children}
<Toast />
<UpdatePassword />
{/* <AgeChecker
apiKey="lwU8lOYysWXrIZaijSG3Hfcxmzc4DlS9"
onVerified={() => { }}
......
src/components/organism/UpdatePassword/index.tsx 0 → 100644
"use client";
import PasswordField from "@/components/molecules/PasswordField";
import { RootState } from "@/hooks/store";
import { useUpdateUserGamePasswordMutation } from "@/services/userApi";
import { showToast, ToastVariant } from "@/slice/toastSlice";
import { closeDialog } from "@/slice/updatePasswordSlice";
import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
import { useFormik } from "formik";
import { useDispatch, useSelector } from "react-redux";
import * as Yup from "yup";
export default function UpdatePassword() {
const dispatch = useDispatch();
const { open, provider, hasChangedPassword } = useSelector((state: RootState) => state?.updatePasswordSlice);
const [updateNewPassword, { isLoading }] = useUpdateUserGamePasswordMutation();
console.log({
open, provider
})
const formik = useFormik({
initialValues: { password: "" },
validationSchema: Yup.object({
password: Yup.string()
.min(6, "Password must be at least 6 characters")
.required("Password is required"),
}),
onSubmit: async (values) => {
try {
console.log("New password:", values.password);
const response = await updateNewPassword({
password: values.password,
provider: provider || ""
}).unwrap();
dispatch(
showToast({
variant: ToastVariant.ERROR,
message: response.message || "Something went wrong"
})
)
dispatch(closeDialog());
} catch (e: any) {
dispatch(
showToast({
variant: ToastVariant.ERROR,
message: e.message || "Something went wrong"
})
)
}
},
});
return (
<Dialog open={open} maxWidth="sm" fullWidth>
<DialogTitle>
<div className="section__title mb-2">
<h1 className="text-[24px] lg:text-[32px] font-bold mt-2">
Enter your new password
</h1>
<p className="text-[14px]">
Our system has detected a password change for{" "}
<strong>{provider}</strong>. Please update your new password.
</p>
</div>
</DialogTitle>
<form onSubmit={formik.handleSubmit} className="p-8">
<DialogContent sx={{ p: 0 }}>
<PasswordField
name="password"
label="Password*"
placeholder="XXXXXXX"
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
error={formik.touched.password ? formik.errors.password : undefined}
/>
</DialogContent>
<DialogActions className="flex justify-between p-4 mt-4">
<Button
variant="contained"
color="secondary"
onClick={() => dispatch(closeDialog())}
>
Cancel
</Button>
<Button
variant="contained"
color="primary"
type="submit"
disabled={!formik.dirty || isLoading}
>
{isLoading ? "Updating..." : "Save"}
</Button>
</DialogActions>
</form>
</Dialog>
);
}
src/components/pages/dashboard/userDashboard/buyCoins/index.tsx
import GlassWrapper from '@/components/molecules/GlassWrapper'
import GoldCoinIcon from '@/icons/GoldCoinIcon'
import SilverCoinIcon from '@/icons/SilverCoinIcon'
import { GameResponseProps } from '@/types/game'
import { Button } from '@mui/material'
import { Coin } from '@wandersonalwes/iconsax-react'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
"use client";
import GlassWrapper from '@/components/molecules/GlassWrapper';
import { useAppDispatch } from '@/hooks/hook';
import GoldCoinIcon from '@/icons/GoldCoinIcon';
import SilverCoinIcon from '@/icons/SilverCoinIcon';
import { openPasswordDialog } from '@/slice/updatePasswordSlice';
import { GameResponseProps } from '@/types/game';
import { Coin } from '@wandersonalwes/iconsax-react';
import Image from 'next/image';
import Link from 'next/link';
export default function BuyCoinGameListPage({
games,
......@@ -16,7 +17,9 @@ export default function BuyCoinGameListPage({
coins: any
}) {
const gameInfo = coins?.data?.game_information || {}
const dispatch = useAppDispatch();
console.log("coins", coins);
return (
<section className="buy__coin__root">
<div className="section__title mb-4 lg:mb-8 max-w-[520px]">
......@@ -30,6 +33,7 @@ export default function BuyCoinGameListPage({
{games.data?.data.map((game) => {
const info = gameInfo[game.provider.toLowerCase()] || { balance: 0, type: 'sc' }
const CoinIcon = info.type === 'gc' ? GoldCoinIcon : SilverCoinIcon
console.log(info.has_changed_password)
return (
<div key={game.id} className={`col-span-1 ${info.type === 'gc' ? "hidden" : ""}`}>
......@@ -59,6 +63,14 @@ export default function BuyCoinGameListPage({
</div>
<Link href={`buy-coins/${game.id}`}
className="ss-btn bg-primary-grad !text-white flex justify-center gap-1"
onClick={(e) => {
if (info?.has_changed_password) {
e.preventDefault();
dispatch(openPasswordDialog({
provider: game?.name,
}));
}
}}
>
<Coin /> Buy Coins
</Link>
......
src/components/pages/dashboard/userDashboard/gameCredentials/CredentialsCard.tsx
"use client";
import GlassWrapper from "@/components/molecules/GlassWrapper";
import { useAppDispatch } from "@/hooks/hook";
import TapIcon from "@/icons/Tap";
import { useChangeUserGamePasswordMutation, useGetUserBalanceBySlugQuery } from "@/services/userApi";
import { openPasswordDialog } from "@/slice/updatePasswordSlice";
import { CredentialsProps } from "@/types/game";
import { CircularProgress } from "@mui/material";
import { Coin } from "@wandersonalwes/iconsax-react";
......@@ -39,6 +41,7 @@ export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
const gcValue = balance?.flag === "gc" ? balance.balance ?? 0 : null;
const [resetGamePassord, { isLoading }] = useChangeUserGamePasswordMutation();
const dispatch = useAppDispatch();
return (
<GlassWrapper className="p-4 lg:p-6">
......@@ -81,7 +84,18 @@ export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
<BalanceRefresh
label="Refresh Balance"
icon={true}
onClick={() => refetch()}
onClick={() => {
if (balance?.has_changed_password) {
console.log("password changes");
dispatch(openPasswordDialog({
provider: cred?.name,
}));
}
else {
console.log("password not changes");
refetch();
}
}}
loading={isFetching}
/>
</div>
......@@ -123,6 +137,15 @@ export default function CredentialsCard({ cred }: { cred: CredentialsProps }) {
<Link
href={cred?.name === "goldcoincity" ? "/buy-coins" : `/buy-coins/${cred?.id}`}
className="ss-btn bg-primary-grad flex justify-center items-center gap-1"
onClick={(e) => {
if (balance?.has_changed_password) {
e.preventDefault();
console.log("password changes");
dispatch(openPasswordDialog({
provider: cred?.name,
}));
}
}}
>
<Coin /> Buy Coins
</Link>
......
src/components/pages/dashboard/userDashboard/games/exclusiveGames/exclusiveGameDetail/index.tsx
import React from "react";
import { GameItem, SingleGameResponse } from "@/types/game";
import Image from "next/image";
import { renderHTML } from "@/utils/RenderHTML";
import { Box, Button } from "@mui/material";
import SilverCoinIcon from "@/icons/SilverCoinIcon";
import ScreenShotSlider from "@/components/molecules/Sliders/ScreenShotSlider";
import CustomLightGallery from "@/components/organism/LightGallery";
import Link from "next/link";
import UserCoin from "./UserCoin";
import { redirect } from "next/dist/server/api-utils";
import GameIframeDialog from "./GameIframeDialog";
import SingleGameCred from "../../../gameCredentials/SingleGameCred";
import ProtectedLink from "@/routes/ProtectedLink";
import { SingleGameResponse } from "@/types/game";
import { renderHTML } from "@/utils/RenderHTML";
import { Box } from "@mui/material";
import Image from "next/image";
import GameCredentialsBlock from "./GameCredentialsBlock";
import GameIframeDialog from "./GameIframeDialog";
import UserCoin from "./UserCoin";
export default function ExclusiveGameDetail({ game }: { game: SingleGameResponse }) {
......@@ -47,7 +42,7 @@ export default function ExclusiveGameDetail({ game }: { game: SingleGameResponse
borderRadius: "16px"
}} className="flex justify-center items-center gap-2 py-4 px-6 bg-secondary-grad text-title ss-btn">
<div className="coins ">
<ProtectedLink href={`/buy-coins/${game?.data?.id}`}>
<ProtectedLink href={`/buy-coins/${game?.data?.id}`} provider={game?.data?.provider}>
<strong className="text-[16px] leading-4 font-[600] block mb-1">+ Deposit Coins</strong>
</ProtectedLink>
</div>
......
src/components/pages/dashboard/userDashboard/withdrawl/index.tsx
......@@ -2,7 +2,9 @@
"use client";
import { useAppDispatch, useAppSelector } from "@/hooks/hook";
import { useWithdrawlMutation } from "@/services/transaction";
import { showToast, ToastVariant } from "@/slice/toastSlice";
import { openPasswordDialog } from "@/slice/updatePasswordSlice";
import { GameResponseProps } from "@/types/game";
import { Button, OutlinedInput } from "@mui/material";
import { CardPos } from "@wandersonalwes/iconsax-react";
......@@ -11,7 +13,6 @@ import Image from "next/image";
import React from "react";
import * as Yup from "yup";
import WithdrawlModal from "./WithdrawlModal";
import { useWithdrawlMutation } from "@/services/transaction";
const validationSchema = Yup.object({
withdrawl_amounts: Yup.object().test(
......@@ -247,15 +248,24 @@ export default function WithdrawlPage({
color="secondary"
className="md:!max-w-fit !text-[#426A66]"
startIcon={<CardPos />}
onClick={() =>
handleWithdrawClick(
Number(
formik.values.withdrawl_amounts[
onClick={() => {
if (info?.has_changed_password) {
dispatch(openPasswordDialog({
provider: game?.name,
}));
}
else {
handleWithdrawClick(
Number(
formik.values.withdrawl_amounts[
game.provider
] || 0
),
game.provider
] || 0
),
game.provider
)
)
}
}
}
type="button"
>
......@@ -275,6 +285,6 @@ export default function WithdrawlPage({
formik={formik}
wallet={user?.wallet_address || ""}
/>
</section>
</section >
);
}
src/hooks/store.ts
import { authApi } from "@/services/authApi";
import { configureStore } from "@reduxjs/toolkit";
import auth from "@/slice/authSlice";
import toastSlice from "@/slice/toastSlice";
import authModalSlice from "@/slice/authModalSlice";
import { dashboardApi } from "@/services/dashboardApi";
import { downloadApi } from "@/services/downloadApi";
import { gameApi } from "@/services/gameApi";
import { menuApi, userMenuApi } from "@/services/menuApi";
import { notificationApi } from "@/services/notificationApi";
import { pageApi } from "@/services/pageApi";
import { paymentSetupApi } from "@/services/paymentSetupApi";
import { playerApi } from "@/services/playerApi";
import { providerApi } from "@/services/providerApi";
import { settingApi } from "@/services/settingApi";
import { transactionApi } from "@/services/transaction";
import { userApi } from "@/services/userApi";
import { settingApi } from "@/services/settingApi";
import { pageApi } from "@/services/pageApi";
import { notificationApi } from "@/services/notificationApi";
import { menuApi, userMenuApi } from "@/services/menuApi";
import { dashboardApi } from "@/services/dashboardApi";
import { downloadApi } from "@/services/downloadApi";
import { paymentSetupApi } from "@/services/paymentSetupApi";
import authModalSlice from "@/slice/authModalSlice";
import auth from "@/slice/authSlice";
import toastSlice from "@/slice/toastSlice";
import updatePasswordSlice from "@/slice/updatePasswordSlice";
import { configureStore } from "@reduxjs/toolkit";
export const store = configureStore({
reducer: {
auth,
toastSlice,
authModalSlice,
updatePasswordSlice,
[authApi.reducerPath]: authApi.reducer,
[gameApi.reducerPath]: gameApi.reducer,
[providerApi.reducerPath]: providerApi.reducer,
......
src/routes/ProtectedLink.tsx
"use client";
import React from "react";
import { useRouter } from "next/navigation";
import { useAppDispatch, useAppSelector } from "@/hooks/hook";
import { openAuthModal } from "@/slice/authModalSlice";
import { useGetGamesPasswordStatusQuery } from "@/services/userApi";
import { openPasswordDialog } from "@/slice/updatePasswordSlice";
import { useRouter } from "next/navigation";
import React from "react";
interface Props {
href: string;
......@@ -10,19 +11,32 @@ interface Props {
children: React.ReactNode;
target?: boolean;
rel?: string;
provider?: string;
}
export default function ProtectedLink({ href, className, children, target, rel }: Props) {
export default function ProtectedLink({ href, className, children, target, rel, provider }: Props) {
const user = useAppSelector((s) => s ? s.auth.user : "");
const dispatch = useAppDispatch();
const router = useRouter();
const { data, isLoading } = useGetGamesPasswordStatusQuery({ provider: provider || "" }, { skip: !provider });
console.log("user data", { data, provider });
const handleClick = (e: React.MouseEvent) => {
if (!user) {
e.preventDefault();
router.push("/login");
return;
}
if (user && data?.data?.has_changed_password) {
e.preventDefault();
dispatch(
openPasswordDialog({
provider: provider || ""
})
)
}
if (target) {
return;
......
src/serverApi/game.ts
import { CredentialsResponseProps, GameResponseProps, SingleGameResponse } from "@/types/game";
import { serverBaseQuery } from "./serverBaseQuery";
import { cookies } from "next/headers";
import { serverBaseQuery } from "./serverBaseQuery";
export async function getAllGames(): Promise<GameResponseProps> {
return serverBaseQuery("/api/get-games");
......
src/services/baseQuery.ts
// import { RootState } from "@/hooks/store";
// import { fetchBaseQuery } from "@reduxjs/toolkit/query/react";
// export const baseQuery = fetchBaseQuery({
// baseUrl: process.env.NEXT_PUBLIC_BASE_URL,
// credentials: 'include',
// prepareHeaders(headers, { getState }) {
// const token = (getState() as RootState).auth.access_token;
// headers.set("Accept", "application/json");
// headers.set("Content-Type", "application/json");
// if (token) {
// headers.set("Authorization", `Bearer ${token}`);
// }
// return headers;
// },
// });
// src/services/baseQuery.ts
import { RootState } from "@/hooks/store";
import { fetchBaseQuery } from "@reduxjs/toolkit/query/react";
......
src/services/userApi.ts
......@@ -33,7 +33,7 @@ export const userApi = createApi({
}),
providesTags: ['user']
}),
getUserBalanceBySlug: builder.query<{ data: { provider: string; balance: number, flag: string } }, { slug: string }>({
getUserBalanceBySlug: builder.query<{ data: { provider: string; balance: number, flag: string, has_changed_password: boolean } }, { slug: string }>({
query: ({ slug }) => ({
url: `/api/balance/${slug}`,
method: "GET"
......@@ -64,9 +64,27 @@ export const userApi = createApi({
}
}),
invalidatesTags: ['user', "wallet"],
})
}),
updateUserGamePassword: builder.mutation<GlobalResponse, { password: string; provider: string }>({
query: ({ password, provider }) => ({
url: `/api/game/change-password`,
method: "POST",
body: {
password,
provider
}
}),
invalidatesTags: ['user', "wallet"],
}),
getGamesPasswordStatus: builder.query<{ data: { has_changed_password: boolean } }, { provider: string }>({
query: ({ provider }) => ({
url: `/api/game/${provider}/has-changed-password`,
method: "GET",
}),
providesTags: ['user', "wallet"],
}),
})
})
export const { useAddUserWalletMutation, useUpdateUserProfileMutation, useGetUserBalanceQuery, useGetUserBalanceBySlugQuery, useGetUserGameBalanceQuery, useGetUserGameCredentialsQuery, useChangeUserGamePasswordMutation } = userApi;
\ No newline at end of file
export const { useAddUserWalletMutation, useUpdateUserProfileMutation, useGetUserBalanceQuery, useGetUserBalanceBySlugQuery, useGetUserGameBalanceQuery, useGetUserGameCredentialsQuery, useChangeUserGamePasswordMutation, useUpdateUserGamePasswordMutation, useGetGamesPasswordStatusQuery } = userApi;
\ No newline at end of file
src/slice/updatePasswordSlice.ts 0 → 100644
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
interface UpdatePasswordState {
open: boolean;
provider?: string;
hasChangedPassword: boolean;
}
const initialState: UpdatePasswordState = {
open: false,
provider: undefined,
hasChangedPassword: false,
};
const updatePasswordSlice = createSlice({
name: "updatePassword",
initialState,
reducers: {
openPasswordDialog: (state, action: PayloadAction<{ provider: string; hasChangedPassword?: boolean }>) => {
state.open = true;
state.provider = action.payload.provider;
state.hasChangedPassword = action.payload.hasChangedPassword ?? true;
},
closeDialog: (state) => {
state.open = false;
state.provider = undefined;
state.hasChangedPassword = false;
},
},
});
export const { openPasswordDialog, closeDialog } = updatePasswordSlice.actions;
export default updatePasswordSlice.reducer;
src/types/player.ts
import { ImageProps } from "./config";
import { Pagination } from "./game";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment