feat: real login and logout
This commit is contained in:
@@ -4,8 +4,22 @@ import { FunctionComponent, h } from "preact";
|
||||
import { useLocation } from "preact-iso";
|
||||
import { tv } from "tailwind-variants";
|
||||
import classes from "./menu.module.scss";
|
||||
import { calculatePoints, getCurrentStatus } from "@/utils/status-system";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import apiClient from "@/services/api";
|
||||
import { useAppContext } from "@/providers/AuthProvider";
|
||||
|
||||
interface UserProfile {
|
||||
username: string;
|
||||
email: string;
|
||||
status: string;
|
||||
avatar_url: string | null;
|
||||
telegram_notifications: boolean;
|
||||
telegram_chat_id: string;
|
||||
}
|
||||
|
||||
interface UserSettings {
|
||||
profile: UserProfile;
|
||||
}
|
||||
|
||||
interface MenuItemProps {
|
||||
title: string;
|
||||
@@ -36,32 +50,27 @@ const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link, icon }: MenuI
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const Avatar: FunctionComponent = () => {
|
||||
const [status, setStatus] = useState("");
|
||||
const [username, setUsername] = useState("");
|
||||
const { route, path } = useLocation();
|
||||
const { isLoggedIn } = useAppContext();
|
||||
|
||||
useEffect(() => {
|
||||
const updateStatus = () => {
|
||||
const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
|
||||
const completedTasks = tasks.filter((task: { checked: boolean }) => task.checked).length;
|
||||
const points = calculatePoints(completedTasks);
|
||||
setStatus(getCurrentStatus(points));
|
||||
};
|
||||
|
||||
// Initial update
|
||||
updateStatus();
|
||||
|
||||
// Update when tasks change
|
||||
const handleStorage = (e: StorageEvent) => {
|
||||
if (e.key === "tasks") {
|
||||
updateStatus();
|
||||
const fetchUserData = async () => {
|
||||
try {
|
||||
const response = await apiClient<UserSettings>("/api/settings/view_settings/", { method: "GET" }, isLoggedIn);
|
||||
setUsername(response.profile.username);
|
||||
setStatus(response.profile.status);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch user data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('storage', handleStorage);
|
||||
return () => window.removeEventListener('storage', handleStorage);
|
||||
}, []);
|
||||
|
||||
if (isLoggedIn.value) {
|
||||
fetchUserData();
|
||||
}
|
||||
}, [isLoggedIn.value]);
|
||||
|
||||
return (
|
||||
<button
|
||||
@@ -77,7 +86,7 @@ const Avatar: FunctionComponent = () => {
|
||||
>
|
||||
<div class="my-5 aspect-square h-full rounded-full bg-white"></div>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<p class="text-3xl font-semibold">никнейм</p>
|
||||
<p class="text-3xl font-semibold">{username}</p>
|
||||
<div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">{status}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,44 +4,56 @@ import { UrlsTitle } from "@/enums/urls";
|
||||
import { useAppContext } from "@/providers/AuthProvider";
|
||||
import apiClient from "@/services/api";
|
||||
import { cn } from "@/utils/class-merge";
|
||||
import { calculatePoints, getCurrentStatus } from "@/utils/status-system";
|
||||
import { ArrowRightStartOnRectangleIcon, Cog8ToothIcon } from "@heroicons/react/24/outline";
|
||||
import { FunctionComponent } from "preact";
|
||||
import { useLocation } from "preact-iso";
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import classes from "./profile_settings.module.scss";
|
||||
|
||||
interface UserProfile {
|
||||
username: string;
|
||||
email: string;
|
||||
status: string;
|
||||
avatar_url: string | null;
|
||||
telegram_notifications: boolean;
|
||||
telegram_chat_id: string;
|
||||
}
|
||||
|
||||
interface UserSettings {
|
||||
profile: UserProfile;
|
||||
}
|
||||
|
||||
const ProfileSettings: FunctionComponent = () => {
|
||||
const { isLoggedIn } = useAppContext();
|
||||
const { route } = useLocation();
|
||||
const [status, setStatus] = useState(0);
|
||||
const [userData, setUserData] = useState<UserProfile>({
|
||||
username: "",
|
||||
email: "",
|
||||
status: "",
|
||||
avatar_url: null,
|
||||
telegram_notifications: false,
|
||||
telegram_chat_id: "",
|
||||
});
|
||||
const maxStatus = 100;
|
||||
|
||||
useEffect(() => {
|
||||
const updateStatus = () => {
|
||||
const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
|
||||
const completedTasks = tasks.filter((task: { checked: boolean }) => task.checked).length;
|
||||
const points = calculatePoints(completedTasks);
|
||||
setStatus(points);
|
||||
};
|
||||
|
||||
// Initial update
|
||||
updateStatus();
|
||||
|
||||
// Update when tasks change
|
||||
const handleStorage = (e: StorageEvent) => {
|
||||
if (e.key === "tasks") {
|
||||
updateStatus();
|
||||
const fetchUserData = async () => {
|
||||
try {
|
||||
const response = await apiClient<UserSettings>("/api/settings/view_settings/", { method: "GET" }, isLoggedIn);
|
||||
setUserData(response.profile);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch user data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("storage", handleStorage);
|
||||
return () => window.removeEventListener("storage", handleStorage);
|
||||
}, []);
|
||||
if (isLoggedIn.value) {
|
||||
fetchUserData();
|
||||
}
|
||||
}, [isLoggedIn.value]);
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await apiClient("/api/logout/", { method: "POST", needsCsrf: true }, isLoggedIn);
|
||||
await apiClient("/api/settings/logout/", { method: "POST", needsCsrf: true }, isLoggedIn);
|
||||
isLoggedIn.value = false;
|
||||
localStorage.removeItem("loggedIn");
|
||||
localStorage.removeItem("user");
|
||||
@@ -54,18 +66,24 @@ const ProfileSettings: FunctionComponent = () => {
|
||||
return (
|
||||
<div class={classes.container}>
|
||||
<div class="flex w-full flex-col items-center rounded-[4rem] bg-[linear-gradient(180.00deg,rgb(251,194,199),rgba(206,232,251,0.72)_100%)] px-7 py-5 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] md:flex-row">
|
||||
<div id={classes.avatar}>Аватар</div>
|
||||
<div id={classes.avatar}>
|
||||
{userData.avatar_url ? (
|
||||
<img src={userData.avatar_url} alt="User avatar" class="h-full w-full rounded-full object-cover" />
|
||||
) : (
|
||||
"Аватар"
|
||||
)}
|
||||
</div>
|
||||
<div class={classes.header_block__name}>
|
||||
<p class="text-4xl font-semibold">Никнейм</p>
|
||||
<p class="text-2xl font-light">{getCurrentStatus(status)}</p>
|
||||
<p class="text-4xl font-semibold">{userData.username}</p>
|
||||
<p class="text-2xl font-light">{userData.status}</p>
|
||||
<div class="h-1.5 w-full overflow-hidden rounded-2xl bg-white">
|
||||
<div
|
||||
class={cn("relative top-0 left-0 h-2 bg-black")}
|
||||
style={{ width: `${(status / maxStatus) * 100}%` }}
|
||||
style={{ width: `${userData.telegram_chat_id ? 100 : 0}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div class="-mt-3 self-end text-sm font-light">
|
||||
{status}/{maxStatus}
|
||||
{userData.telegram_chat_id ? "100" : "0"}/{maxStatus}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user