From 1db7653cb286c65b8efefaee8ccc47b3ae88571b Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Mon, 3 Feb 2025 14:37:40 +0330 Subject: [PATCH] setting and ui change password --- .env | 3 +- src/components/Input.tsx | 10 + src/langs/fa.json | 7 +- src/pages/setting/Setting.tsx | 207 ++++-------------- .../setting/components/ChangePassword.tsx | 124 +++++++++++ src/pages/setting/components/Email.tsx | 27 +++ src/pages/setting/components/Sms.tsx | 27 +++ src/pages/setting/hooks/useSettingData.ts | 23 ++ src/pages/setting/service/SettingService.ts | 15 ++ src/pages/setting/types/SettingTypes.ts | 11 + 10 files changed, 285 insertions(+), 169 deletions(-) create mode 100644 src/pages/setting/components/ChangePassword.tsx create mode 100644 src/pages/setting/components/Email.tsx create mode 100644 src/pages/setting/components/Sms.tsx create mode 100644 src/pages/setting/hooks/useSettingData.ts create mode 100644 src/pages/setting/service/SettingService.ts create mode 100644 src/pages/setting/types/SettingTypes.ts diff --git a/.env b/.env index c9b54ba..cb6837e 100644 --- a/.env +++ b/.env @@ -1,3 +1,4 @@ VITE_TOKEN_NAME = 'dsc_token' VITE_REFRESH_TOKEN_NAME = 'dsc_refresh_token' -VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com' \ No newline at end of file +VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com' +# VITE_BASE_URL = 'http://192.168.0.207:3500' \ No newline at end of file diff --git a/src/components/Input.tsx b/src/components/Input.tsx index cfcf5ea..75afbd4 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -2,6 +2,7 @@ import { FC, InputHTMLAttributes, useState } from 'react' import { clx } from '../helpers/utils'; import EyeIcon from '../assets/images/eye.svg' import { SearchNormal } from 'iconsax-react'; +import Error from './Error'; type Variant = "floating_outlined" | "primary" | "search"; @@ -46,7 +47,16 @@ const Input: FC = (props: Props) => { props.variant === 'search' && } + + + + { + props.error_text && + + } ) } diff --git a/src/langs/fa.json b/src/langs/fa.json index 1cc16d9..5c2825f 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -42,7 +42,8 @@ "enter_mobile_number": "شماره موبایل خود را وارد کنید" }, "errors": { - "required": "این فیلد اجباری می باشد" + "required": "این فیلد اجباری می باشد", + "password_not_match": "رمز عبور با تکرار آن مطابقت ندارد" }, "description": "توضیحات", "sidebar": { @@ -109,6 +110,7 @@ "write_your_comment": "نظر خود را راجع به این سرویس بنویسید", "users_comments": "نظرات کاربران" }, + "loading": "در حال بارگذاری", "footer": { "home": "صفحه اصلی", "other_services": "سایر سرویس ها", @@ -254,7 +256,8 @@ "min-8": "حداقل 8 کاراکتر باشد", "mix_charachter_number": "ترکیبی از حروف کوچک و بزرگ باشد", "exsist_number": "شامل اعداد باشد", - "exsist_special_character": "شامل کاراکتر های خاص (نماد ها) باشد" + "exsist_special_character": "شامل کاراکتر های خاص (نماد ها) باشد", + "password_changed": "رمز عبور با موفقیت تغییر یافت" }, "wallet": { "increese_wallet": "افزایش موجودی حساب اعتباری", diff --git a/src/pages/setting/Setting.tsx b/src/pages/setting/Setting.tsx index 3f0c88f..0c2fd0e 100644 --- a/src/pages/setting/Setting.tsx +++ b/src/pages/setting/Setting.tsx @@ -2,13 +2,16 @@ import { FC, useState } from 'react' import { useTranslation } from 'react-i18next' import Tabs from '../../components/Tabs' import { KeySquare, Notification1 } from 'iconsax-react' -import SwitchComponent from '../../components/Switch' -import Input from '../../components/Input' -import Button from '../../components/Button' +import { useGetSettings } from './hooks/useSettingData' +import PageLoading from '../../components/PageLoading' +import Email from './components/Email' +import Sms from './components/Sms' +import ChangePassword from './components/ChangePassword' const Setting: FC = () => { const { t } = useTranslation('global') + const getSettings = useGetSettings() const [activeTab, setActiveTab] = useState('notification') return ( @@ -43,173 +46,45 @@ const Setting: FC = () => { {t('setting.setting_email_message')} -
-
-
- {t('setting.notification_announcement')} -
-
-
-
- {t('setting.email')} -
- { }} - /> +
+ { + getSettings.isPending ? +
+
-
-
- {t('setting.sms')} -
- { }} - /> -
-
-
-
-
- {t('setting.notification_announcement')} -
-
-
-
- {t('setting.email')} -
- { }} - /> -
-
-
- {t('setting.sms')} -
- { }} - /> -
-
-
-
-
-
-
- {t('setting.notification_announcement')} -
-
-
-
- {t('setting.email')} -
- { }} - /> -
-
-
- {t('setting.sms')} -
- { }} - /> -
-
-
-
-
- {t('setting.notification_announcement')} -
-
-
-
- {t('setting.email')} -
- { }} - /> -
-
-
- {t('setting.sms')} -
- { }} - /> -
-
-
+ : + getSettings.data?.data?.settings?.map((item: any) => { + return ( +
+
+ {item?.notifSetting.title_fa} +
+
+
+
+ {t('setting.email')} +
+ +
+
+
+ {t('setting.sms')} +
+ +
+
+
+ ) + }) + } +
: -
-
- {t('setting.change_password')} -
- -
-
- - - - -
-
-
- -
-
- {t('setting.password_is')} -
-
    -
  • - {t('setting.min-8')} -
    • -
  • - {t('setting.mix_charachter_number')} -
    • -
  • - {t('setting.exsist_number')} -
    • -
  • - {t('setting.exsist_special_character')} -
    • -
-
- -
-
-
- -
-
+ }
diff --git a/src/pages/setting/components/ChangePassword.tsx b/src/pages/setting/components/ChangePassword.tsx new file mode 100644 index 0000000..d4c0e95 --- /dev/null +++ b/src/pages/setting/components/ChangePassword.tsx @@ -0,0 +1,124 @@ +import { FC } from 'react' +import { useTranslation } from 'react-i18next' +import Input from '../../../components/Input' +import Button from '../../../components/Button' +import { useFormik } from 'formik' +import { ChangePasswordType } from '../types/SettingTypes' +import * as Yup from 'yup' +import { toast } from 'react-toastify' +import { useChangePassword } from '../hooks/useSettingData' +import { ErrorType } from '../../../helpers/types' + +const ChangePassword: FC = () => { + + const changePassword = useChangePassword() + const { t } = useTranslation('global') + + const formik = useFormik({ + initialValues: { + password: '', + newPassword: '', + repeatPassword: '' + }, + validationSchema: Yup.object({ + password: Yup.string() + .required(t('errors.required')), + newPassword: Yup.string() + .required(t('errors.required')), + repeatPassword: Yup.string() + .required(t('errors.required')) + }), + onSubmit: (values) => { + if (values.newPassword !== values.repeatPassword) { + toast.error(t('errors.password_not_match')) + } else { + changePassword.mutate(values, { + onSuccess: () => { + toast.success(t('setting.password_changed')) + formik.resetForm() + }, + onError: (error: ErrorType) => { + toast.error(error.response?.data?.error?.message[0]) + } + }) + } + } + }) + + return ( +
+
+ {t('setting.change_password')} +
+ +
+
+ + + + +
+
+
+ +
+
+ {t('setting.password_is')} +
+
    +
  • + {t('setting.min-8')} +
    • +
  • + {t('setting.mix_charachter_number')} +
    • +
  • + {t('setting.exsist_number')} +
    • +
  • + {t('setting.exsist_special_character')} +
    • +
+
+ +
+
+
+ +
+
+ ) +} + +export default ChangePassword \ No newline at end of file diff --git a/src/pages/setting/components/Email.tsx b/src/pages/setting/components/Email.tsx new file mode 100644 index 0000000..958fb1d --- /dev/null +++ b/src/pages/setting/components/Email.tsx @@ -0,0 +1,27 @@ +import { FC, useState } from 'react' +import SwitchComponent from '../../../components/Switch' +import { useUpdateSetting } from '../hooks/useSettingData' + +type Props = { + email: boolean, + id: string +} + +const Email: FC = (props: Props) => { + const updateSetting = useUpdateSetting() + const [email, setEmail] = useState(props.email) + + const handleChange = (value: boolean) => { + setEmail(value) + updateSetting.mutate({ email: value, id: props.id }) + } + + return ( + + ) +} + +export default Email \ No newline at end of file diff --git a/src/pages/setting/components/Sms.tsx b/src/pages/setting/components/Sms.tsx new file mode 100644 index 0000000..60c3632 --- /dev/null +++ b/src/pages/setting/components/Sms.tsx @@ -0,0 +1,27 @@ +import { FC, useState } from 'react' +import SwitchComponent from '../../../components/Switch' +import { useUpdateSetting } from '../hooks/useSettingData' + +type Props = { + sms: boolean, + id: string +} + +const Sms: FC = (props: Props) => { + const updateSetting = useUpdateSetting() + const [sms, setSms] = useState(props.sms) + + const handleChange = (value: boolean) => { + setSms(value) + updateSetting.mutate({ sms: value, id: props.id }) + } + + return ( + + ) +} + +export default Sms \ No newline at end of file diff --git a/src/pages/setting/hooks/useSettingData.ts b/src/pages/setting/hooks/useSettingData.ts new file mode 100644 index 0000000..00811b1 --- /dev/null +++ b/src/pages/setting/hooks/useSettingData.ts @@ -0,0 +1,23 @@ +import { useMutation, useQuery } from "@tanstack/react-query"; +import * as api from "../service/SettingService"; +import { ChangePasswordType, UpdateSettingType } from "../types/SettingTypes"; + +export const useGetSettings = () => { + return useQuery({ + queryKey: ["settings"], + queryFn: () => api.getSettings(), + }); +}; + +export const useUpdateSetting = () => { + return useMutation({ + mutationFn: (variables: UpdateSettingType) => api.updateSettings(variables), + }); +}; + +export const useChangePassword = () => { + return useMutation({ + mutationFn: (variables: ChangePasswordType) => + api.changePassword(variables), + }); +}; diff --git a/src/pages/setting/service/SettingService.ts b/src/pages/setting/service/SettingService.ts new file mode 100644 index 0000000..61f8d97 --- /dev/null +++ b/src/pages/setting/service/SettingService.ts @@ -0,0 +1,15 @@ +import axios from "../../../config/axios"; +import { ChangePasswordType, UpdateSettingType } from "../types/SettingTypes"; + +export const getSettings = async () => { + const { data } = await axios.get(`/settings`); + return data; +}; + +export const updateSettings = async (params: UpdateSettingType) => { + await axios.patch(`/settings/${params.id}/update`, params); +}; + +export const changePassword = async (params: ChangePasswordType) => { + await axios.post(`/settings/password`, params); +}; diff --git a/src/pages/setting/types/SettingTypes.ts b/src/pages/setting/types/SettingTypes.ts new file mode 100644 index 0000000..4c7eac2 --- /dev/null +++ b/src/pages/setting/types/SettingTypes.ts @@ -0,0 +1,11 @@ +export type UpdateSettingType = { + id: string; + email?: boolean; + sms?: boolean; +}; + +export type ChangePasswordType = { + password: string; + newPassword: string; + repeatPassword: string; +};