mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-05 07:44:38 +00:00
feat: add privacy setting set modal
This commit is contained in:
parent
043d8a7d89
commit
d7508a5e13
GPG key ID:
858E8EE696525EED
2 changed files with 346 additions and 108 deletions
|
|
@ -4,6 +4,8 @@ import { Modal } from "flowbite-react";
|
|||
import { Spinner } from "../Spinner/Spinner";
|
||||
import useSWR from "swr";
|
||||
import { ENDPOINTS } from "#/api/config";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ProfileEditPrivacyModal } from "./Profile.EditPrivacyModal";
|
||||
|
||||
const fetcher = async (url: string) => {
|
||||
const res = await fetch(url);
|
||||
|
|
@ -24,125 +26,215 @@ export const ProfileEditModal = (props: {
|
|||
setIsOpen: (isOpen: boolean) => void;
|
||||
token: string;
|
||||
}) => {
|
||||
const [privacyModalOpen, setPrivacyModalOpen] = useState(false);
|
||||
const [privacyModalSetting, setPrivacyModalSetting] = useState("none");
|
||||
const [privacySettings, setPrivacySettings] = useState({
|
||||
privacy_stats: 9,
|
||||
privacy_counts: 9,
|
||||
privacy_social: 9,
|
||||
privacy_friend_requests: 9,
|
||||
});
|
||||
const [socialBounds, setSocialBounds] = useState({
|
||||
vk: false,
|
||||
google: false,
|
||||
});
|
||||
|
||||
const privacy_stat_act_social_text = {
|
||||
0: 'Все пользователи',
|
||||
1: 'Только друзья',
|
||||
2: 'Только я'
|
||||
}
|
||||
0: "Все пользователи",
|
||||
1: "Только друзья",
|
||||
2: "Только я",
|
||||
9: "Неизвестно",
|
||||
};
|
||||
const privacy_friend_req_text = {
|
||||
0: 'Все пользователи',
|
||||
1: 'Никто'
|
||||
}
|
||||
0: "Все пользователи",
|
||||
1: "Никто",
|
||||
9: "Неизвестно",
|
||||
};
|
||||
|
||||
const { data, isLoading, error } = useSWR(
|
||||
`${ENDPOINTS.user.settings.my}?token=${props.token}`,
|
||||
fetcher
|
||||
);
|
||||
|
||||
const socialBounds = {
|
||||
'vk': data.is_vk_bound || data.isVkBound || false,
|
||||
'google': data.is_google_bound || data.isGoogleBound || false
|
||||
}
|
||||
`${ENDPOINTS.user.settings.my}?token=${props.token}`,
|
||||
fetcher
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
setPrivacySettings({
|
||||
privacy_stats: data.privacy_stats,
|
||||
privacy_counts: data.privacy_counts,
|
||||
privacy_social: data.privacy_social,
|
||||
privacy_friend_requests: data.privacy_friend_requests,
|
||||
});
|
||||
setSocialBounds({
|
||||
vk: data.is_vk_bound || data.isVkBound || false,
|
||||
google: data.is_google_bound || data.isGoogleBound || false,
|
||||
});
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
dismissible
|
||||
show={props.isOpen}
|
||||
onClose={() => props.setIsOpen(false)}
|
||||
size={"7xl"}
|
||||
>
|
||||
<Modal.Header>Редактирование профиля</Modal.Header>
|
||||
<Modal.Body>
|
||||
{isLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-4 pb-4 border-b-2 border-gray-300 border-solid">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-8 h-8 iconify mdi--user"></span>
|
||||
<p className="text-xl font-bold">Профиль</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">Изменить фото профиля</p>
|
||||
<p className="text-base text-gray-500">Загрузить с устройства</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">Изменить статус</p>
|
||||
<p className="text-base text-gray-500">{data.status}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">Изменить никнейм</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">Мои социальные сети</p>
|
||||
<p className="text-base text-gray-500">
|
||||
укажите ссылки на свои страницы в соц. сетях
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 pb-4 border-b-2 border-gray-300 border-solid">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-8 h-8 iconify mdi--anonymous "></span>
|
||||
<p className="text-xl font-bold">Приватность</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">
|
||||
Кто видит мою статистику, оценки и историю просмотра
|
||||
</p>
|
||||
<p className="text-base text-gray-500">{privacy_stat_act_social_text[data.privacy_stats]}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">
|
||||
Кто видит в профиле мои комментарии, коллекции, видео и друзей
|
||||
</p>
|
||||
<p className="text-base text-gray-500">{privacy_stat_act_social_text[data.privacy_counts]}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">
|
||||
Кто видит в профиле мои социальные сети
|
||||
</p>
|
||||
<p className="text-base text-gray-500">{privacy_stat_act_social_text[data.privacy_social]}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">
|
||||
Кто может отправлять мне заявки в друзья
|
||||
</p>
|
||||
<p className="text-base text-gray-500">{privacy_friend_req_text[data.privacy_friend_requests]}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">Блоклист</p>
|
||||
<p className="text-base text-gray-500">
|
||||
Список пользователей, которым запрещён доступ к вашей странице
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
<Modal
|
||||
show={props.isOpen}
|
||||
onClose={() => props.setIsOpen(false)}
|
||||
size={"7xl"}
|
||||
>
|
||||
<Modal.Header>Редактирование профиля</Modal.Header>
|
||||
<Modal.Body>
|
||||
{isLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-8 h-8 iconify mdi--shield"></span>
|
||||
<p className="text-xl font-bold">
|
||||
Безопасность и привязка к сервисам
|
||||
</p>
|
||||
<div className="flex flex-col gap-4 pb-4 border-b-2 border-gray-300 border-solid">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-8 h-8 iconify mdi--user"></span>
|
||||
<p className="text-xl font-bold">Профиль</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">Изменить фото профиля</p>
|
||||
<p className="text-base text-gray-500">
|
||||
Загрузить с устройства
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">Изменить статус</p>
|
||||
<p className="text-base text-gray-500">{data.status}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">Изменить никнейм</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">Мои социальные сети</p>
|
||||
<p className="text-base text-gray-500">
|
||||
укажите ссылки на свои страницы в соц. сетях
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">Изменить Email или Пароль</p>
|
||||
<p className="text-base text-gray-500">
|
||||
Изменить возможно только в мобильном приложении
|
||||
</p>
|
||||
<div className="flex flex-col gap-4 pb-4 border-b-2 border-gray-300 border-solid">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-8 h-8 iconify mdi--anonymous "></span>
|
||||
<p className="text-xl font-bold">Приватность</p>
|
||||
</div>
|
||||
<button
|
||||
className="p-2 text-left rounded-md hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setPrivacyModalOpen(true);
|
||||
setPrivacyModalSetting("privacy_stats");
|
||||
}}
|
||||
>
|
||||
<p className="text-lg">
|
||||
Кто видит мою статистику, оценки и историю просмотра
|
||||
</p>
|
||||
<p className="text-base text-gray-500">
|
||||
{
|
||||
privacy_stat_act_social_text[
|
||||
privacySettings.privacy_stats
|
||||
]
|
||||
}
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
className="p-2 text-left rounded-md hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setPrivacyModalOpen(true);
|
||||
setPrivacyModalSetting("privacy_counts");
|
||||
}}
|
||||
>
|
||||
<p className="text-lg">
|
||||
Кто видит в профиле мои комментарии, коллекции, видео и
|
||||
друзей
|
||||
</p>
|
||||
<p className="text-base text-gray-500">
|
||||
{
|
||||
privacy_stat_act_social_text[
|
||||
privacySettings.privacy_counts
|
||||
]
|
||||
}
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
className="p-2 text-left rounded-md hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setPrivacyModalOpen(true);
|
||||
setPrivacyModalSetting("privacy_social");
|
||||
}}
|
||||
>
|
||||
<p className="text-lg">
|
||||
Кто видит в профиле мои социальные сети
|
||||
</p>
|
||||
<p className="text-base text-gray-500">
|
||||
{
|
||||
privacy_stat_act_social_text[
|
||||
privacySettings.privacy_social
|
||||
]
|
||||
}
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
className="p-2 text-left rounded-md hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setPrivacyModalOpen(true);
|
||||
setPrivacyModalSetting("privacy_friend_requests");
|
||||
}}
|
||||
>
|
||||
<p className="text-lg">
|
||||
Кто может отправлять мне заявки в друзья
|
||||
</p>
|
||||
<p className="text-base text-gray-500">
|
||||
{
|
||||
privacy_friend_req_text[
|
||||
privacySettings.privacy_friend_requests
|
||||
]
|
||||
}
|
||||
</p>
|
||||
</button>
|
||||
<div>
|
||||
<p className="text-lg">Блоклист</p>
|
||||
<p className="text-base text-gray-500">
|
||||
Список пользователей, которым запрещён доступ к вашей
|
||||
странице
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">Привязка к сервисам</p>
|
||||
<p className="text-base text-gray-500">
|
||||
Изменить возможно только в мобильном приложении
|
||||
</p>
|
||||
<p className="text-base text-gray-500">
|
||||
{(socialBounds.vk || socialBounds.google) ? "Аккаунт привязан к:" : "не привязан к сервисам"} {socialBounds.vk && "ВК"}{socialBounds.vk && socialBounds.google && ", "}{socialBounds.google && "Google"}
|
||||
</p>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-8 h-8 iconify mdi--shield"></span>
|
||||
<p className="text-xl font-bold">
|
||||
Безопасность и привязка к сервисам
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">Изменить Email или Пароль</p>
|
||||
<p className="text-base text-gray-500">
|
||||
Изменить возможно только в мобильном приложении
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg">Привязка к сервисам</p>
|
||||
<p className="text-base text-gray-500">
|
||||
Изменить возможно только в мобильном приложении
|
||||
</p>
|
||||
<p className="text-base text-gray-500">
|
||||
{socialBounds.vk || socialBounds.google
|
||||
? "Аккаунт привязан к:"
|
||||
: "не привязан к сервисам"}{" "}
|
||||
{socialBounds.vk && "ВК"}
|
||||
{socialBounds.vk && socialBounds.google && ", "}
|
||||
{socialBounds.google && "Google"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
)}
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
<ProfileEditPrivacyModal
|
||||
isOpen={privacyModalOpen}
|
||||
setIsOpen={setPrivacyModalOpen}
|
||||
token={props.token}
|
||||
setting={privacyModalSetting}
|
||||
privacySettings={privacySettings}
|
||||
setPrivacySettings={setPrivacySettings}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
146
app/components/Profile/Profile.EditPrivacyModal.tsx
Normal file
146
app/components/Profile/Profile.EditPrivacyModal.tsx
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
"use client";
|
||||
|
||||
import { Modal } from "flowbite-react";
|
||||
import { ENDPOINTS } from "#/api/config";
|
||||
|
||||
export const ProfileEditPrivacyModal = (props: {
|
||||
isOpen: boolean;
|
||||
setIsOpen: (isOpen: boolean) => void;
|
||||
token: string;
|
||||
setting: string;
|
||||
privacySettings: {
|
||||
privacy_stats: number;
|
||||
privacy_counts: number;
|
||||
privacy_social: number;
|
||||
privacy_friend_requests: number;
|
||||
};
|
||||
setPrivacySettings: (privacySettings: any) => void;
|
||||
}) => {
|
||||
|
||||
const setting_text = {
|
||||
privacy_stats: "Кто видит мою статистику, оценки и историю просмотра",
|
||||
privacy_counts:
|
||||
"Кто видит в профиле мои комментарии, коллекции, видео и друзей",
|
||||
privacy_social: "Кто видит в профиле мои социальные сети",
|
||||
privacy_friend_requests: "Кто может отправлять мне заявки в друзья",
|
||||
};
|
||||
|
||||
function _setPrivacySetting(el: any) {
|
||||
let privacySettings = structuredClone(props.privacySettings);
|
||||
privacySettings[el.target.name] = el.target.value;
|
||||
props.setPrivacySettings(privacySettings);
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
dismissible
|
||||
show={props.isOpen}
|
||||
onClose={() => props.setIsOpen(false)}
|
||||
size={"4xl"}
|
||||
>
|
||||
<Modal.Header>{setting_text[props.setting]}</Modal.Header>
|
||||
<Modal.Body>
|
||||
{props.setting != "none" ? (
|
||||
<>
|
||||
<div className="flex flex-col gap-2">
|
||||
{props.setting == "privacy_friend_requests" ? (
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
onClick={(e) => _setPrivacySetting(e)}
|
||||
checked={props.privacySettings[props.setting] == 0}
|
||||
id="default-radio-1"
|
||||
type="radio"
|
||||
value={0}
|
||||
name={props.setting}
|
||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<label
|
||||
htmlFor="default-radio-1"
|
||||
className="text-base text-gray-900 ms-2 dark:text-gray-300"
|
||||
>
|
||||
Все пользователи
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
onClick={(e) => _setPrivacySetting(e)}
|
||||
checked={props.privacySettings[props.setting] == 1}
|
||||
id="default-radio-2"
|
||||
type="radio"
|
||||
value={1}
|
||||
name={props.setting}
|
||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<label
|
||||
htmlFor="default-radio-2"
|
||||
className="text-base text-gray-900 ms-2 dark:text-gray-300"
|
||||
>
|
||||
Никто
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
onClick={(e) => _setPrivacySetting(e)}
|
||||
checked={props.privacySettings[props.setting] == 0}
|
||||
id="default-radio-1"
|
||||
type="radio"
|
||||
value={0}
|
||||
name={props.setting}
|
||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<label
|
||||
htmlFor="default-radio-1"
|
||||
className="text-base text-gray-900 ms-2 dark:text-gray-300"
|
||||
>
|
||||
Все пользователи
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
onClick={(e) => _setPrivacySetting(e)}
|
||||
checked={props.privacySettings[props.setting] == 1}
|
||||
id="default-radio-2"
|
||||
type="radio"
|
||||
value={1}
|
||||
name={props.setting}
|
||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<label
|
||||
htmlFor="default-radio-2"
|
||||
className="text-base text-gray-900 ms-2 dark:text-gray-300"
|
||||
>
|
||||
Только друзья
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
onClick={(e) => _setPrivacySetting(e)}
|
||||
checked={props.privacySettings[props.setting] == 2}
|
||||
id="default-radio-3"
|
||||
type="radio"
|
||||
value={2}
|
||||
name={props.setting}
|
||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<label
|
||||
htmlFor="default-radio-3"
|
||||
className="text-base text-gray-900 ms-2 dark:text-gray-300"
|
||||
>
|
||||
Только я
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue