mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-06 00:04:39 +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 { Spinner } from "../Spinner/Spinner";
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
import { ENDPOINTS } from "#/api/config";
|
import { ENDPOINTS } from "#/api/config";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { ProfileEditPrivacyModal } from "./Profile.EditPrivacyModal";
|
||||||
|
|
||||||
const fetcher = async (url: string) => {
|
const fetcher = async (url: string) => {
|
||||||
const res = await fetch(url);
|
const res = await fetch(url);
|
||||||
|
|
@ -24,125 +26,215 @@ export const ProfileEditModal = (props: {
|
||||||
setIsOpen: (isOpen: boolean) => void;
|
setIsOpen: (isOpen: boolean) => void;
|
||||||
token: string;
|
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 = {
|
const privacy_stat_act_social_text = {
|
||||||
0: 'Все пользователи',
|
0: "Все пользователи",
|
||||||
1: 'Только друзья',
|
1: "Только друзья",
|
||||||
2: 'Только я'
|
2: "Только я",
|
||||||
}
|
9: "Неизвестно",
|
||||||
|
};
|
||||||
const privacy_friend_req_text = {
|
const privacy_friend_req_text = {
|
||||||
0: 'Все пользователи',
|
0: "Все пользователи",
|
||||||
1: 'Никто'
|
1: "Никто",
|
||||||
}
|
9: "Неизвестно",
|
||||||
|
};
|
||||||
|
|
||||||
const { data, isLoading, error } = useSWR(
|
const { data, isLoading, error } = useSWR(
|
||||||
`${ENDPOINTS.user.settings.my}?token=${props.token}`,
|
`${ENDPOINTS.user.settings.my}?token=${props.token}`,
|
||||||
fetcher
|
fetcher
|
||||||
);
|
);
|
||||||
|
|
||||||
const socialBounds = {
|
useEffect(() => {
|
||||||
'vk': data.is_vk_bound || data.isVkBound || false,
|
if (data) {
|
||||||
'google': data.is_google_bound || data.isGoogleBound || false
|
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 (
|
return (
|
||||||
<Modal
|
<>
|
||||||
dismissible
|
<Modal
|
||||||
show={props.isOpen}
|
show={props.isOpen}
|
||||||
onClose={() => props.setIsOpen(false)}
|
onClose={() => props.setIsOpen(false)}
|
||||||
size={"7xl"}
|
size={"7xl"}
|
||||||
>
|
>
|
||||||
<Modal.Header>Редактирование профиля</Modal.Header>
|
<Modal.Header>Редактирование профиля</Modal.Header>
|
||||||
<Modal.Body>
|
<Modal.Body>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<Spinner />
|
<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>
|
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex flex-col gap-4 pb-4 border-b-2 border-gray-300 border-solid">
|
||||||
<span className="w-8 h-8 iconify mdi--shield"></span>
|
<div className="flex items-center gap-2">
|
||||||
<p className="text-xl font-bold">
|
<span className="w-8 h-8 iconify mdi--user"></span>
|
||||||
Безопасность и привязка к сервисам
|
<p className="text-xl font-bold">Профиль</p>
|
||||||
</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>
|
||||||
<div>
|
<div className="flex flex-col gap-4 pb-4 border-b-2 border-gray-300 border-solid">
|
||||||
<p className="text-lg">Изменить Email или Пароль</p>
|
<div className="flex items-center gap-2">
|
||||||
<p className="text-base text-gray-500">
|
<span className="w-8 h-8 iconify mdi--anonymous "></span>
|
||||||
Изменить возможно только в мобильном приложении
|
<p className="text-xl font-bold">Приватность</p>
|
||||||
</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>
|
||||||
<div>
|
<div className="flex flex-col gap-4">
|
||||||
<p className="text-lg">Привязка к сервисам</p>
|
<div className="flex items-center gap-2">
|
||||||
<p className="text-base text-gray-500">
|
<span className="w-8 h-8 iconify mdi--shield"></span>
|
||||||
Изменить возможно только в мобильном приложении
|
<p className="text-xl font-bold">
|
||||||
</p>
|
Безопасность и привязка к сервисам
|
||||||
<p className="text-base text-gray-500">
|
</p>
|
||||||
{(socialBounds.vk || socialBounds.google) ? "Аккаунт привязан к:" : "не привязан к сервисам"} {socialBounds.vk && "ВК"}{socialBounds.vk && socialBounds.google && ", "}{socialBounds.google && "Google"}
|
</div>
|
||||||
</p>
|
<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>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
</Modal.Body>
|
||||||
</Modal.Body>
|
</Modal>
|
||||||
</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