feat: calendar circle colors

.gitignore

@@ -23,3 +23,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# My
+repomix-output.*

.vscode/settings.json

@@ -8,5 +8,7 @@
       "([\"'`][^\"'`]*.*?[\"'`])",
       "[\"'`]([^\"'`]*).*?[\"'`]"
     ]
-  ]
+  ],
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2
 }

bun.lock

@@ -8,15 +8,18 @@
         "@preact/signals": "^2.0.2",
         "@tailwindcss/postcss": "^4.0.17",
         "@tailwindcss/vite": "^4.0.17",
+        "@types/uuid": "^10.0.0",
         "clsx": "^2.1.1",
         "postcss": "^8.5.3",
         "preact": "^10.26.2",
         "preact-iso": "^2.9.1",
         "primelocale": "^2.1.2",
         "primereact": "^10.9.4",
+        "react-hook-form": "^7.56.1",
         "tailwind-merge": "^3.0.2",
         "tailwind-variants": "^1.0.0",
-        "tailwindcss": "^4.0.17",
+        "tailwindcss": "^4.1.5",
+        "uuid": "^11.1.0",
       },
       "devDependencies": {
         "@eslint/js": "^9.23.0",
@@ -280,6 +283,8 @@
 
     "@types/react-transition-group": ["@types/react-transition-group@4.4.12", "", { "peerDependencies": { "@types/react": "*" } }, "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w=="],
 
+    "@types/uuid": ["@types/uuid@10.0.0", "", {}, "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ=="],
+
     "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.28.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.28.0", "@typescript-eslint/type-utils": "8.28.0", "@typescript-eslint/utils": "8.28.0", "@typescript-eslint/visitor-keys": "8.28.0", "graphemer": "^1.4.0", "ignore": "^5.3.1", "natural-compare": "^1.4.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-lvFK3TCGAHsItNdWZ/1FkvpzCxTHUVuFrdnOGLMa0GGCFIbCgQWVk3CzCGdA7kM3qGVc+dfW9tr0Z/sHnGDFyg=="],
 
     "@typescript-eslint/parser": ["@typescript-eslint/parser@8.28.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.28.0", "@typescript-eslint/types": "8.28.0", "@typescript-eslint/typescript-estree": "8.28.0", "@typescript-eslint/visitor-keys": "8.28.0", "debug": "^4.3.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-LPcw1yHD3ToaDEoljFEfQ9j2xShY367h7FZ1sq5NJT9I3yj4LHer1Xd1yRSOdYy9BpsrxU7R+eoDokChYM53lQ=="],
@@ -612,6 +617,8 @@
 
     "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],
 
+    "react-hook-form": ["react-hook-form@7.56.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-qWAVokhSpshhcEuQDSANHx3jiAEFzu2HAaaQIzi/r9FNPm1ioAvuJSD4EuZzWd7Al7nTRKcKPnBKO7sRn+zavQ=="],
+
     "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
 
     "react-transition-group": ["react-transition-group@4.4.5", "", { "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", "prop-types": "^15.6.2" }, "peerDependencies": { "react": ">=16.6.0", "react-dom": ">=16.6.0" } }, "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g=="],
@@ -706,7 +713,7 @@
 
     "tailwind-variants": ["tailwind-variants@1.0.0", "", { "dependencies": { "tailwind-merge": "3.0.2" }, "peerDependencies": { "tailwindcss": "*" } }, "sha512-2WSbv4ulEEyuBKomOunut65D8UZwxrHoRfYnxGcQNnHqlSCp2+B7Yz2W+yrNDrxRodOXtGD/1oCcKGNBnUqMqA=="],
 
-    "tailwindcss": ["tailwindcss@4.0.17", "", {}, "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw=="],
+    "tailwindcss": ["tailwindcss@4.1.5", "", {}, "sha512-nYtSPfWGDiWgCkwQG/m+aX83XCwf62sBgg3bIlNiiOcggnS1x3uVRDAuyelBFL+vJdOPPCGElxv9DjHJjRHiVA=="],
 
     "tapable": ["tapable@2.2.1", "", {}, "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="],
 
@@ -732,6 +739,8 @@
 
     "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
 
+    "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
+
     "varint": ["varint@6.0.0", "", {}, "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg=="],
 
     "vite": ["vite@6.2.3", "", { "dependencies": { "esbuild": "^0.25.0", "postcss": "^8.5.3", "rollup": "^4.30.1" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg=="],
@@ -758,6 +767,12 @@
 
     "@humanfs/node/@humanwhocodes/retry": ["@humanwhocodes/retry@0.3.1", "", {}, "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA=="],
 
+    "@tailwindcss/node/tailwindcss": ["tailwindcss@4.0.17", "", {}, "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw=="],
+
+    "@tailwindcss/postcss/tailwindcss": ["tailwindcss@4.0.17", "", {}, "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw=="],
+
+    "@tailwindcss/vite/tailwindcss": ["tailwindcss@4.0.17", "", {}, "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw=="],
+
     "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
 
     "@typescript-eslint/typescript-estree/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],

index.html

@@ -2,7 +2,7 @@
 <html lang="ru">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Антихвост</title>
   </head>

package.json

@@ -13,15 +13,18 @@
     "@preact/signals": "^2.0.2",
     "@tailwindcss/postcss": "^4.0.17",
     "@tailwindcss/vite": "^4.0.17",
+    "@types/uuid": "^10.0.0",
     "clsx": "^2.1.1",
     "postcss": "^8.5.3",
     "preact": "^10.26.2",
     "preact-iso": "^2.9.1",
     "primelocale": "^2.1.2",
     "primereact": "^10.9.4",
+    "react-hook-form": "^7.56.1",
     "tailwind-merge": "^3.0.2",
     "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.0.17"
+    "tailwindcss": "^4.1.5",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.23.0",

src/app.tsx

@@ -1,11 +1,11 @@
 import { FunctionComponent } from "preact";
 import { ErrorBoundary, lazy, LocationProvider, Route, Router, useLocation } from "preact-iso";
-import "preact/debug";
 import { ru } from "primelocale/js/ru.js";
 import { addLocale, locale, PrimeReactProvider } from "primereact/api";
 import { useMountEffect } from "primereact/hooks";
 import Page404 from "./pages/404";
 import LoginPage from "./pages/login";
+import RegisterPage from "./pages/register";
 import { AppProvider, useAppContext } from "./providers/AuthProvider";
 
 const HomePage: FunctionComponent = () => {
@@ -26,8 +26,6 @@ export function App() {
       <PrimeReactProvider
         value={{
           unstyled: true,
-          // pt: Tailwind,
-          // ptOptions: { mergeProps: true, mergeSections: true, classNameMergeFunction: cn },
         }}
       >
         <LocationProvider>
@@ -35,6 +33,7 @@ export function App() {
             <Router>
               <Route path="/" component={HomePage} />
               <Route path="/login" component={LoginPage} />
+              <Route path="/register" component={RegisterPage} />
               <Route path="/profile/*" component={lazy(() => import("./pages/profile"))} />
               <Route default component={() => <Page404 />} />
             </Router>

src/components/ModalCalendar.tsx

@@ -1,13 +1,18 @@
 import { cn } from "@/utils/class-merge";
+import { ClockIcon } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
-import { Dispatch, StateUpdater } from "preact/hooks";
-import { Calendar } from "primereact/calendar";
-import ModalWindow from "./ui/Modal";
+import { Dispatch, StateUpdater, useEffect, useState } from "preact/hooks";
+import { Calendar, CalendarPassThroughMethodOptions } from "primereact/calendar";
+import { FormEvent } from "primereact/ts-helpers";
+import Button from "./ui/Button";
+import ModalWindow, { ModalWindowProps } from "./ui/Modal";
 
-interface ModalCalendarProps {
+interface ModalCalendarProps extends ModalWindowProps {
   isOpen?: boolean;
   setIsOpen?: Dispatch<StateUpdater<boolean>>;
   onClose?: () => void;
+  value?: Date;
+  onChange?: (e: FormEvent<Date>) => void;
 }
 
 const TRANSITIONS = {
@@ -22,18 +27,48 @@ const TRANSITIONS = {
   },
 };
 
-const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpen, onClose }) => {
+const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({
+  isOpen,
+  setIsOpen,
+  onClose,
+  onChange,
+  value,
+  ...rest
+}) => {
+  const [showTime, setShowTime] = useState(false);
+  const [minDate, setMinDate] = useState(new Date());
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setMinDate(new Date());
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
   return (
-    <ModalWindow isOpen={isOpen} setIsOpen={setIsOpen} onClose={onClose} className="md:h-[40rem] md:w-[30rem]">
+    <ModalWindow
+      {...rest}
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      onClose={() => {
+        onClose!();
+        setShowTime(false);
+      }}
+      className="md:h-[40rem] md:w-[30rem]"
+    >
+      <div class="w-full flex-1 self-start">
         <Calendar
           inline
+          onChange={onChange}
+          value={value}
+          hourFormat="24"
+          minDate={minDate}
+          showTime={showTime}
           pt={{
-          root: ({ props }) => ({
-            className: cn("inline-flex max-w-full relative", {
+            root: ({ props }: CalendarPassThroughMethodOptions) => ({
+              className: cn("inline-flex w-full relative", {
                 "opacity-60 select-none pointer-events-none cursor-default": props.disabled,
               }),
             }),
-          input: ({ props }) => ({
+            input: ({ props }: CalendarPassThroughMethodOptions) => ({
               root: {
                 className: cn(
                   "font-sans text-base text-gray-600 bg-white p-3 border border-gray-300  transition-colors duration-200 appearance-none",
@@ -46,11 +81,11 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpe
               },
             }),
             dropdownButton: {
-            root: ({ props }) => ({
+              root: ({ props }: CalendarPassThroughMethodOptions) => ({
                 className: cn({ "rounded-l-none": props.icon }),
               }),
             },
-          panel: ({ props }) => ({
+            panel: ({ props }: CalendarPassThroughMethodOptions) => ({
               className: cn("bg-[rgba(251,194,199,0.38)]", "min-w-full", {
                 "shadow-md border-0 absolute": !props.inline,
                 "inline-block overflow-x-auto border border-gray-300  p-2 rounded-lg": props.inline,
@@ -59,7 +94,7 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpe
             header: {
               className: cn(
                 "flex items-center justify-between",
-              "p-2 text-gray-700  bg-white  font-semibold m-0 border-b border-gray-300  rounded-t-lg"
+                "p-2 text-gray-700  bg-[rgba(251,194,199,0.38)]  font-semibold m-0 border-b border-gray-300  rounded-t-lg"
               ),
             },
             previousButton: {
@@ -89,9 +124,9 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpe
             tableHeaderCell: { className: "p-2" },
             weekDay: { className: "text-gray-600 " },
             day: { className: "p-2" },
-          dayLabel: ({ context }) => ({
+            dayLabel: ({ context }: CalendarPassThroughMethodOptions) => ({
               className: cn(
-              "w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border",
+                "w-6 h-6 rounded-full transition-shadow duration-200 border-transparent border",
                 "flex items-center justify-center mx-auto overflow-hidden relative",
                 "focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] ",
                 {
@@ -105,7 +140,7 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpe
               ),
             }),
             monthPicker: { className: "my-2" },
-          month: ({ context }) => ({
+            month: ({ context }: CalendarPassThroughMethodOptions) => ({
               className: cn(
                 "w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative",
                 "p-2 transition-shadow duration-200 rounded-lg",
@@ -119,7 +154,7 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpe
             yearPicker: {
               className: cn("my-2"),
             },
-          year: ({ context }) => ({
+            year: ({ context }: CalendarPassThroughMethodOptions) => ({
               className: cn(
                 "w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative",
                 "p-2 transition-shadow duration-200 rounded-lg",
@@ -131,7 +166,7 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpe
               ),
             }),
             timePicker: {
-            className: cn("flex justify-center items-center", "border-t-1 border-solid border-gray-300 p-2"),
+              className: cn("flex justify-center items-center", "border-t-1 border-solid border-gray-300"),
             },
             separatorContainer: { className: "flex items-center flex-col px-2" },
             separator: { className: "text-xl" },
@@ -154,13 +189,31 @@ const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpe
             },
             groupContainer: { className: "flex" },
             group: {
-            className: cn("flex-1", "border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0", "first:pl-0 first:border-l-0"),
+              className: cn(
+                "flex-1",
+                "border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0",
+                "first:pl-0 first:border-l-0"
+              ),
             },
             transition: TRANSITIONS.overlay,
           }}
         />
+        <p class={cn("mt-2 text-center text-xl font-semibold", { hidden: !value })}>
+          {value && Intl.DateTimeFormat("ru-RU", { day: "2-digit", month: "2-digit", year: "numeric" }).format(value)}
+        </p>
+      </div>
+      <Button
+        className="flex w-full flex-row items-center justify-center gap-2 self-end"
+        onClick={() => {
+          setShowTime(!showTime);
+        }}
+      >
+        <ClockIcon class="h-8" /> <p>Время</p>
+      </Button>
     </ModalWindow>
   );
 };
 
+ModalCalendar.displayName = "AHModalCalendar";
+
 export default ModalCalendar;

src/components/ModalSettings.tsx

@@ -0,0 +1,208 @@
+import apiClient from "@/services/api";
+import { cn } from "@/utils/class-merge";
+import { EyeIcon, EyeSlashIcon, XCircleIcon } from "@heroicons/react/24/outline";
+import { FunctionComponent } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import {
+  InputSwitch,
+  InputSwitchPassThroughMethodOptions,
+  InputSwitchPassThroughOptions,
+} from "primereact/inputswitch";
+import { SubmitHandler, useForm } from "react-hook-form";
+import Button from "./ui/Button";
+import ModalWindow, { ModalWindowProps } from "./ui/Modal";
+
+interface ISettings {
+  login: string;
+  oldPassword: string;
+  newPassword: string;
+  tgId: string;
+}
+
+export interface IAPIResponse {
+  profile: IAPIProfile;
+}
+
+export interface IAPIProfile {
+  username: string;
+  email: string;
+  status: string;
+  avatar_url: string;
+  telegram_notifications: boolean;
+  telegram_chat_id: string;
+}
+
+export interface IAPIUpdateSettingsResponse {
+  success: boolean;
+  username: string;
+  email: string;
+  avatar_url: string;
+  password_changed: boolean;
+}
+
+const SwitchStyles: InputSwitchPassThroughOptions = {
+  root: ({ props }: InputSwitchPassThroughMethodOptions) => ({
+    className: cn("inline-block relative", "w-12 h-7", {
+      "opacity-60 select-none pointer-events-none cursor-default": props.disabled,
+    }),
+  }),
+  input: {
+    className: cn("absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer"),
+  },
+  slider: ({ props }: InputSwitchPassThroughMethodOptions) => ({
+    className: cn(
+      "absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent",
+      "transition-colors duration-200 rounded-2xl",
+      "focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] ",
+      "before:absolute before:content-'' before:top-1/2 before:bg-white  before:w-5 before:h-5 before:left-1 before:-mt-2.5 before:rounded-full before:transition-duration-200",
+      {
+        "bg-gray-200 hover:bg-gray-300": !props.checked,
+        "bg-[rgba(251,194,199,0.53)] before:transform before:translate-x-5": props.checked,
+      }
+    ),
+  }),
+};
+
+const ModalSettings: FunctionComponent<ModalWindowProps> = ({ isOpen, setIsOpen, onClose, ...rest }) => {
+  const { handleSubmit, register, setValue, reset } = useForm<ISettings>({
+    defaultValues: {
+      login: "",
+      oldPassword: "",
+      newPassword: "",
+    },
+    mode: "onChange",
+  });
+
+  const changeSettings: SubmitHandler<ISettings> = async (data: ISettings) => {
+    interface IReq {
+      username?: string;
+      current_password?: string;
+      password?: string;
+    }
+    const req: IReq = {
+      username: data.login || undefined,
+      current_password: data.oldPassword || undefined,
+      password: data.newPassword || undefined,
+    };
+
+    const response = await apiClient<IAPIUpdateSettingsResponse>("/api/settings/edit_profile/", {
+      method: "PATCH",
+      body: JSON.stringify(req),
+    });
+    if (!response.success) console.error("Error changing settings");
+
+    if (enableNotification && data.tgId) {
+      await apiClient("/api/settings/save_chat_id/", {
+        method: "PATCH",
+        body: JSON.stringify({ telegram_chat_id: data.tgId }),
+      });
+      if (oldEnabledNotif !== enableNotification) {
+        await apiClient("/api/settings/toggle_telegram_notifications/", { method: "PATCH" });
+      }
+    }
+
+    handleClose();
+  };
+
+  const [enableNotification, setEnableNotification] = useState(false);
+  const [login, setLogin] = useState("");
+  const [showOldPassword, setShowOldPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [oldEnabledNotif, setOldEnabledNotif] = useState(false);
+  const [tgId, setTgId] = useState("");
+
+  useEffect(() => {
+    const getSettings = async () => {
+      const response = await apiClient<IAPIResponse>("/api/settings/view_settings/", { method: "GET" });
+      setEnableNotification(response.profile.telegram_notifications);
+      setOldEnabledNotif(response.profile.telegram_notifications);
+      setLogin(response.profile.username);
+      setTgId(response.profile.telegram_chat_id);
+    };
+    if (isOpen) getSettings();
+  }, [isOpen]);
+
+  const handleClose = () => {
+    setIsOpen!(false);
+    setEnableNotification(false);
+    reset();
+    if (onClose) onClose();
+  };
+
+  return (
+    <ModalWindow setIsOpen={setIsOpen} isOpen={isOpen} onClose={handleClose} {...rest} className="h-fit! md:w-[40%]!">
+      <form onSubmit={handleSubmit(changeSettings)} class="flex w-full flex-col gap-4">
+        <div class="flex flex-col items-start gap-2">
+          <span class="ms-5 text-sm">Имя</span>
+          <div class="flex w-full flex-row items-center rounded-[4rem] bg-[rgba(251,194,199,0.53)] px-5 py-3 leading-8">
+            <input class="flex-1 outline-0" {...register("login")} placeholder={login} />
+            <XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("login", "")} />
+          </div>
+        </div>
+        <div class="flex flex-col items-start gap-2">
+          <span class="ms-5 text-sm">Старый пароль</span>
+          <div class="flex w-full flex-row items-center gap-1 rounded-[4rem] bg-[rgba(251,194,199,0.53)] px-5 py-3 leading-8">
+            <input
+              class="flex-1 outline-0"
+              {...register("oldPassword")}
+              placeholder="Старый пароль"
+              type={showOldPassword ? "text" : "password"}
+            />
+            {showOldPassword ? (
+              <EyeIcon class="size-6 cursor-pointer" onClick={() => setShowOldPassword(false)} />
+            ) : (
+              <EyeSlashIcon class="size-6 cursor-pointer" onClick={() => setShowOldPassword(true)} />
+            )}
+            <XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("oldPassword", "")} />
+          </div>
+        </div>
+        <div class="flex flex-col items-start gap-2">
+          <span class="ms-5 text-sm">Новый пароль</span>
+          <div class="flex w-full flex-row items-center gap-1 rounded-[4rem] bg-[rgba(251,194,199,0.53)] px-5 py-3 leading-8">
+            <input
+              class="flex-1 outline-0"
+              {...register("newPassword", {
+                minLength: { value: 8, message: "Пароль должен быть не менее 8 символов" },
+              })}
+              placeholder="Новый пароль"
+              type={showNewPassword ? "text" : "password"}
+            />
+            {showNewPassword ? (
+              <EyeIcon class="size-6 cursor-pointer" onClick={() => setShowNewPassword(false)} />
+            ) : (
+              <EyeSlashIcon class="size-6 cursor-pointer" onClick={() => setShowNewPassword(true)} />
+            )}
+            <XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("newPassword", "")} />
+          </div>
+        </div>
+        <div class="flex flex-row items-center justify-between rounded-[4rem] px-5 py-4 ring-3 ring-[rgba(251,194,199,0.53)]">
+          <span>Уведомления</span>
+          <InputSwitch
+            pt={SwitchStyles}
+            checked={enableNotification}
+            onChange={(e) => setEnableNotification(e.value)}
+          />
+        </div>
+        <div class={cn({ hidden: !enableNotification })}>
+          <div class="flex flex-col items-start gap-2">
+            <span class="ms-5 text-sm">
+              Telegram ID. Для работы перейдите в бота{" "}
+              <a href="https://t.me/antihvost_notif_bot" class="font-medium text-blue-600 hover:underline">
+                @antihvost_notif_bot
+              </a>
+            </span>
+            <div class="flex w-full flex-row items-center rounded-[4rem] px-5 py-3 leading-8 ring-2 ring-[rgba(206,232,251,0.7)]">
+              <input class="flex-1 outline-0" {...register("tgId")} placeholder={tgId} />
+              <XCircleIcon class="size-6 cursor-pointer" onClick={() => setValue("tgId", "")} />
+            </div>
+          </div>
+        </div>
+        <Button type="submit">Сохранить</Button>
+      </form>
+    </ModalWindow>
+  );
+};
+
+ModalSettings.displayName = "ModalSettings";
+
+export default ModalSettings;

src/components/ModalTags.tsx

@@ -0,0 +1,271 @@
+import { IAPITag, IViewTagsResponse } from "@/pages/profile_tasks.dto";
+import apiClient from "@/services/api";
+import { cn } from "@/utils/class-merge";
+import { BookOpenIcon, CheckIcon, DocumentDuplicateIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import { FunctionComponent } from "preact";
+import { Dispatch, StateUpdater, useEffect, useRef, useState } from "preact/hooks";
+import Button from "./ui/Button";
+import Dialog from "./ui/Dialog";
+import ModalWindow, { ModalWindowProps } from "./ui/Modal";
+
+export interface ITags {
+  first: number;
+  second: number;
+  overdue: boolean;
+}
+
+interface ModalTagsProps extends ModalWindowProps {
+  isOpen?: boolean;
+  setIsOpen?: Dispatch<StateUpdater<boolean>>;
+  onClose?: () => void;
+  value?: ITags;
+  onChange?: Dispatch<StateUpdater<ITags>>;
+  tagsList?: {
+    first: IAPITag[];
+    second: IAPITag[];
+  };
+  refreshTags: () => Promise<IViewTagsResponse | void>;
+}
+
+const ModalTags: FunctionComponent<ModalTagsProps> = ({
+  isOpen,
+  setIsOpen,
+  onClose,
+  onChange,
+  value,
+  tagsList,
+  refreshTags,
+  ...rest
+}) => {
+  const [showFirstTags, setShowFirstTags] = useState(false);
+  const [showSecondTags, setShowSecondTags] = useState(false);
+  const [showAddFirstTag, setShowAddFirstTag] = useState(false);
+  const [showAddSecondTag, setShowAddSecondTag] = useState(false);
+  const [showErrorDialog, setShowErrorDialog] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string[]>([]);
+  const addFirstTagRef = useRef<HTMLInputElement>(null);
+  const addSecondTagRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (showFirstTags && showSecondTags) setShowFirstTags(false);
+  }, [showSecondTags]);
+  useEffect(() => {
+    if (showFirstTags && showSecondTags) setShowSecondTags(false);
+  }, [showFirstTags]);
+
+  const handleCreateTag = async () => {
+    if (!addFirstTagRef.current?.value && !addSecondTagRef.current?.value) return;
+
+    const data: { subject_name?: string; taskType_name?: string } = {};
+    if (addFirstTagRef.current && addFirstTagRef.current.value) data.subject_name = addFirstTagRef.current.value;
+    if (addSecondTagRef.current && addSecondTagRef.current.value) data.taskType_name = addSecondTagRef.current.value;
+    const response = await apiClient<{ success: boolean; subject?: IAPITag; taskType?: IAPITag }>(
+      "/api/tags/create_tags/",
+      { method: "POST", body: JSON.stringify(data) }
+    );
+    if (response.success) {
+      await refreshTags();
+      if (showAddFirstTag) {
+        const new_subject_id = response.subject!.id;
+        onChange!((prev) => ({ ...prev, first: new_subject_id }));
+        setShowAddFirstTag(false);
+      }
+      if (showAddSecondTag) {
+        const new_taskType_id = response.taskType!.id;
+        onChange!((prev) => ({ ...prev, second: new_taskType_id }));
+        setShowAddSecondTag(false);
+      }
+    }
+    if (addFirstTagRef.current) addFirstTagRef.current.value = "";
+    if (addSecondTagRef.current) addSecondTagRef.current.value = "";
+  };
+
+  const handleDeleteTag = async (id: number) => {
+    const data: { subject_id?: number; taskType_id?: number } = {};
+    if (showFirstTags) data.subject_id = id;
+    if (showSecondTags) data.taskType_id = id;
+    const response = await apiClient<{ error?: string }>(`/api/tags/delete_tag/`, {
+      method: "DELETE",
+      body: JSON.stringify(data),
+    });
+    if (!response.error) {
+      await refreshTags();
+    } else {
+      setShowErrorDialog(true);
+      const match = response.error?.match(/\[(.+)\]/);
+      if (match) setErrorMessage(match[1].split(", ").map((s) => s.trim().replace(/'/g, "")));
+    }
+  };
+
+  return (
+    <>
+      <Dialog
+        isOpen={showErrorDialog}
+        setIsOpen={setShowErrorDialog}
+        title="Ошибка!"
+        confirmation={false}
+        cancelText="Ок"
+      >
+        <div class="flex flex-col items-start gap-1">
+          <p class="mb-6 text-sm sm:text-[1rem]">
+            Данный тег есть в других задачах. Поменяйте теги в них и повторите операцию.
+          </p>
+          <p class="text-sm sm:text-[1rem]">Задачи с этим тегом:</p>
+          <ul class="ms-6 list-disc">
+            {errorMessage.map((s, i) => (
+              <li key={i}>{s}</li>
+            ))}
+          </ul>
+        </div>
+      </Dialog>
+      <ModalWindow
+        isOpen={isOpen}
+        {...rest}
+        setIsOpen={setIsOpen}
+        onClose={() => {
+          onClose!();
+          setShowFirstTags(false);
+          setShowSecondTags(false);
+          setShowAddFirstTag(false);
+          setShowAddSecondTag(false);
+        }}
+        className="relative h-[14rem] justify-between py-4 md:h-[14rem] md:w-[25rem]"
+        zIndex={70}
+      >
+        <p class="text-2xl font-semibold">Теги</p>
+        <div class="flex w-[85%] flex-col gap-2 md:w-full">
+          <Button
+            className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]!"
+            onClick={() => {
+              setShowFirstTags(!showFirstTags);
+              setShowSecondTags(false);
+              setShowAddFirstTag(false);
+              setShowAddSecondTag(false);
+            }}
+          >
+            <BookOpenIcon class="size-6" />
+            {tagsList?.first?.find((tag) => tag.id === value?.first)?.name || "Предмет"}
+          </Button>
+          <Button
+            className="flex w-full flex-row items-center justify-center gap-1 text-[1rem]! break-words"
+            onClick={() => {
+              setShowSecondTags(!showSecondTags);
+              setShowFirstTags(false);
+              setShowAddFirstTag(false);
+              setShowAddSecondTag(false);
+            }}
+          >
+            <DocumentDuplicateIcon class="size-6" />
+            {tagsList?.second?.find((tag) => tag.id === value?.second)?.name || "Тема"}
+          </Button>
+          {showFirstTags && (
+            <div class="absolute top-full left-0 mt-3 ml-2 flex h-fit w-[18rem] flex-col items-center gap-3 md:top-0 md:left-full md:mt-0 md:ml-5">
+              <div class="flex h-fit max-h-[15rem] w-full flex-col gap-3 overflow-y-auto rounded-[4rem] bg-white px-8 py-4 text-xs">
+                {tagsList?.first.map((tag) => (
+                  <div
+                    class="flex cursor-pointer flex-row items-center gap-2"
+                    onClick={() =>
+                      onChange?.((prev) => {
+                        return { ...prev, first: tag.id };
+                      })
+                    }
+                  >
+                    <div
+                      class={cn(
+                        "pointer-events-none flex aspect-square size-4 flex-col items-center justify-center rounded-full border-1 border-black text-white select-none",
+                        {
+                          "bg-black": value?.first === tag.id,
+                        }
+                      )}
+                    >
+                      ✓
+                    </div>
+                    <p class="flex-1">{tag.name}</p>
+                    <XMarkIcon
+                      class="size-4 cursor-pointer"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteTag(tag.id);
+                      }}
+                    />
+                  </div>
+                ))}
+                <button
+                  class="mt-2 flex w-full cursor-pointer flex-row items-center gap-2"
+                  onClick={() => {
+                    setShowAddFirstTag(!showAddFirstTag);
+                    setTimeout(() => addFirstTagRef.current?.focus(), 100);
+                  }}
+                >
+                  <PlusCircleIcon class="size-5" />
+                  <span>Добавить</span>
+                </button>
+              </div>
+              {showAddFirstTag && (
+                <div class="flex w-full flex-row items-center rounded-[4rem] bg-white px-8 py-4 text-xs">
+                  <input placeholder="Введите текст" class="flex-1 outline-0" ref={addFirstTagRef} />
+                  <CheckIcon class="size-6 cursor-pointer" onClick={handleCreateTag} />
+                </div>
+              )}
+            </div>
+          )}
+          {showSecondTags && (
+            <div class="absolute top-full left-0 mt-3 ml-2 flex h-fit w-[18rem] flex-col items-center gap-3 md:top-0 md:left-full md:mt-0 md:ml-5">
+              <div class="flex h-fit max-h-[15rem] w-full flex-col gap-3 overflow-y-auto rounded-[4rem] bg-white px-8 py-4 text-xs">
+                {tagsList?.second.map((tag) => (
+                  <div
+                    class="flex cursor-pointer flex-row gap-2"
+                    onClick={() =>
+                      onChange?.((prev) => {
+                        return { ...prev, second: tag.id };
+                      })
+                    }
+                  >
+                    <div
+                      class={cn(
+                        "pointer-events-none flex aspect-square size-4 flex-col items-center justify-center rounded-full border-1 border-black text-white select-none",
+                        {
+                          "bg-black": value?.second === tag.id,
+                        }
+                      )}
+                    >
+                      ✓
+                    </div>
+                    <p class="flex-1">{tag.name}</p>
+                    <XMarkIcon
+                      class="size-4 cursor-pointer"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteTag(tag.id);
+                      }}
+                    />
+                  </div>
+                ))}
+                <button
+                  class="mt-2 flex w-full cursor-pointer flex-row items-center gap-2"
+                  onClick={() => {
+                    setShowAddSecondTag(!showAddSecondTag);
+                    setTimeout(() => addSecondTagRef.current?.focus(), 100);
+                  }}
+                >
+                  <PlusCircleIcon class="size-5" />
+                  <span>Добавить</span>
+                </button>
+              </div>
+              {showAddSecondTag && (
+                <div class="flex w-full flex-row items-center rounded-[4rem] bg-white px-8 py-4 text-xs">
+                  <input placeholder="Введите текст" class="flex-1 outline-0" ref={addSecondTagRef} />
+                  <CheckIcon class="size-6 cursor-pointer" onClick={handleCreateTag} />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </ModalWindow>
+    </>
+  );
+};
+
+ModalTags.displayName = "AHModalTags";
+
+export default ModalTags;

src/components/calendar.tsx

@@ -220,6 +220,9 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({
 
   return (
     <div className={`flex w-full flex-col ${className}`}>
+      <div class="fixed top-0 right-[20rem] z-100 flex h-full w-full flex-col items-center justify-center bg-white">
+        Закрыто
+      </div>
       <div className="mb-4 flex items-center justify-between px-2">
         <button
           onClick={handlePrevMonth}

src/components/menu.tsx

@@ -1,10 +1,27 @@
+import { useAppContext } from "@/providers/AuthProvider";
+import apiClient from "@/services/api";
+import { getAvatarPicUrl } from "@/services/avatar-pic";
 import { cn } from "@/utils/class-merge";
 import { CalendarDaysIcon, ListBulletIcon, UserIcon } from "@heroicons/react/24/solid";
 import { FunctionComponent, h } from "preact";
 import { useLocation } from "preact-iso";
+import { useEffect, useState } from "preact/hooks";
 import { tv } from "tailwind-variants";
 import classes from "./menu.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;
+}
+
 interface MenuItemProps {
   title: string;
   link: string;
@@ -35,9 +52,28 @@ const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link, icon }: MenuI
 };
 
 const Avatar: FunctionComponent = () => {
+  const [status, setStatus] = useState("");
+  const [username, setUsername] = useState("");
   const { route, path } = useLocation();
-  //TODO: Move styles to scss module
-  return (
+  const { isLoggedIn } = useAppContext();
+
+  useEffect(() => {
+    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);
+      }
+    };
+
+    if (isLoggedIn.value) {
+      fetchUserData();
+    }
+  }, [isLoggedIn.value]);
+
+  return username ? (
     <button
       onClick={() => route("/profile/settings")}
       class={cn("hidden h-32 w-full cursor-pointer overflow-hidden opacity-100 transition-[height,opacity] md:block", {
@@ -49,14 +85,16 @@ const Avatar: FunctionComponent = () => {
           "h-full flex-row items-center justify-around rounded-[3rem] bg-[linear-gradient(180.00deg,rgba(249,134,143,0.5)_3.053%,rgb(228,242,252)_96.183%)] px-5 py-5 md:flex"
         )}
       >
-        <div class="my-5 aspect-square h-full rounded-full bg-white"></div>
+        <div class="my-5 aspect-square h-full rounded-full">
+          <img class="size-full rounded-full" src={getAvatarPicUrl(status)} alt="avatar" />
+        </div>
         <div class="flex flex-col items-center justify-center">
-          <p class="text-3xl font-semibold">никнейм</p>
-          <div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">статус</div>
+          <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>
     </button>
-  );
+  ) : null;
 };
 
 interface MenuItems {

src/components/task.module.scss

@@ -1,5 +1,5 @@
 @reference "../index.scss";
 
 .task {
-  @apply flex h-24 w-full cursor-pointer flex-row items-center justify-start gap-4 rounded-[3rem] bg-[rgba(251,194,199,0.53)] px-5 py-6 text-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-transform hover:scale-[1.05] hover:bg-[rgba(251,194,199,0.7)] active:scale-[1.05] md:w-[500px];
+  @apply relative flex h-24 w-full cursor-pointer flex-row items-center justify-start gap-4 rounded-[3rem] px-5 py-6 text-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-transform hover:scale-[1.05] active:scale-[1.05] md:w-[500px];
 }

src/components/task.tsx

@@ -1,15 +1,20 @@
+import { cn } from "@/utils/class-merge";
 import { FunctionComponent } from "preact";
+import { MouseEventHandler } from "preact/compat";
 import { tv } from "tailwind-variants";
 import classes from "./task.module.scss";
 
 interface TaskProps {
   name: string;
+  priority?: number;
   checked?: boolean;
+  overdue?: boolean;
   onClick?: () => void;
+  onMarkClick?: MouseEventHandler<HTMLParagraphElement>;
 }
 
 const taskStyle = tv({
-  base: "flex aspect-square h-full flex-col items-center justify-center rounded-full border",
+  base: "hover:scale-[1.1]active:scale-[1.1] flex aspect-square h-full flex-col items-center justify-center rounded-full border transition-[scale] duration-100 ease-in-out select-none",
   variants: {
     checked: {
       true: "bg-black",
@@ -28,18 +33,42 @@ const markStyle = tv({
   },
 });
 
-const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {} }: TaskProps) => {
+const Task: FunctionComponent<TaskProps> = ({
+  name,
+  checked = false,
+  onClick = () => {},
+  onMarkClick = () => {},
+  priority = 4,
+  overdue,
+}) => {
   return (
-    // Временное действие для тестирования
-    <button onClick={onClick} class="w-[95%]">
-      <div class={classes.task}>
-        <div class={taskStyle({ checked })}>
+    <div class="w-[95%]">
+      <div
+        class={cn(
+          classes.task,
+          { "bg-[linear-gradient(90.00deg,rgba(18,26,230,0.29),rgba(251,194,199,0.34)_100%)]": priority == 1 },
+          { "bg-[linear-gradient(90.00deg,rgba(97,200,232,0.6),rgba(251,194,199,0.42)_100%)]": priority == 2 },
+          { "bg-[linear-gradient(90.00deg,rgba(247,220,52,0.61),rgba(251,194,199,0.38)_97.71%)]": priority == 3 },
+          { "bg-[rgba(251,194,199,0.53)] hover:bg-[rgba(251,194,199,0.7)]": priority == 4 }
+        )}
+        onClick={onClick}
+      >
+        <div
+          class={taskStyle({ checked })}
+          onClick={(e) => {
+            e.stopPropagation();
+            onMarkClick(e);
+          }}
+        >
           <p class={markStyle({ checked })}>✓</p>
         </div>
         {name}
+        {overdue && !checked && <span class="absolute top-2 right-16 text-xs text-red-500">Просрочено</span>}
+      </div>
     </div>
-    </button>
   );
 };
 
+Task.displayName = "AHTask";
+
 export default Task;

src/components/ui/Button.module.scss

@@ -1,5 +1,5 @@
 @reference '../../index.scss';
 
 .button {
-  @apply rounded-4xl px-4 py-3 text-xl text-black shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-colors hover:cursor-pointer;
+  @apply rounded-4xl px-4 py-3 text-xl text-black shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-colors hover:cursor-pointer focus:outline-1;
 }

src/components/ui/Button.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "preact";
+import { forwardRef, HTMLProps } from "preact/compat";
 import { tv } from "tailwind-variants";
 import classes from "./Button.module.scss";
 const button = tv({
@@ -12,23 +12,20 @@ const button = tv({
   },
 });
 
-interface ButtonProps {
+interface ButtonProps extends HTMLProps<HTMLButtonElement> {
   color?: "primary" | "secondary" | "red";
-  onClick?: () => void;
   className?: string;
 }
 
-const Button: FunctionComponent<ButtonProps> = ({
-  children,
-  onClick = () => {},
-  color = "primary",
-  className = "",
-}) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { children, onClick = () => {}, color = "primary", className = "", type = "button" } = props;
   return (
-    <button type="button" class={button({ color: color, class: className })} onClick={onClick}>
+    <button ref={ref} type={type} class={button({ color: color, class: className })} onClick={onClick}>
       {children}
     </button>
   );
-};
+});
+
+Button.displayName = "AHButton";
 
 export default Button;

src/components/ui/Dialog.tsx

@@ -0,0 +1,58 @@
+import { FunctionComponent } from "preact";
+import Button from "./Button";
+
+interface DialogProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  title: string;
+  onConfirm?: () => void;
+  confirmText?: string;
+  cancelText?: string;
+  confirmation?: boolean;
+}
+
+const Dialog: FunctionComponent<DialogProps> = ({
+  isOpen,
+  setIsOpen,
+  title,
+  children,
+  onConfirm = () => {},
+  confirmText = "Подтвердить",
+  cancelText = "Отмена",
+  confirmation = true,
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div class="fixed inset-0 z-150 flex items-center justify-center bg-black/50">
+      <div class="w-full max-w-md rounded-[4rem] bg-white p-6 shadow-lg">
+        <h2 class="mb-4 text-xl font-semibold">{title}</h2>
+        {children}
+        <div class="flex justify-end gap-4">
+          {confirmation ? (
+            <>
+              <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
+                {cancelText}
+              </Button>
+              <Button
+                onClick={() => {
+                  onConfirm();
+                  setIsOpen(false);
+                }}
+                color="red"
+              >
+                {confirmText}
+              </Button>
+            </>
+          ) : (
+            <Button onClick={() => setIsOpen(false)} className="bg-gray-200 text-gray-800 hover:bg-gray-300">
+              {cancelText}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dialog;

src/components/ui/Input.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/utils/class-merge";
-import { FunctionComponent, Ref } from "preact";
+import { forwardRef, HTMLProps, useEffect } from "preact/compat";
 import { tv } from "tailwind-variants";
 import classes from "./Input.module.scss";
 
@@ -20,29 +20,19 @@ const input = tv({
   },
 });
 
-interface InputProps {
-  isPassword?: boolean;
-  placeholder?: string;
+interface InputProps extends HTMLProps<HTMLInputElement> {
   textAlign?: "center" | "left";
   error?: string;
-  textRef?: Ref<HTMLInputElement> | null;
 }
 
-const Input: FunctionComponent<InputProps> = ({
-  isPassword = false,
-  placeholder = "",
-  textAlign,
-  error = "",
-  textRef = null,
-}: InputProps) => {
+const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const { textAlign, error, type = "text", ...rest } = props;
+  useEffect(() => {
+    console.log(`error: ${error}`);
+  }, [error]);
   return (
     <div class="flex w-full flex-col items-center gap-1">
-      <input
-        type={isPassword ? "password" : "text"}
-        class={input({ "text-align": textAlign, "border-error": error !== "" })}
-        placeholder={placeholder}
-        ref={textRef}
-      />
+      <input class={input({ "text-align": textAlign, "border-error": !!error })} ref={ref} type={type} {...rest} />
       <p
         class={cn("invisible h-10 w-[80%] text-center text-[0.7rem] break-words text-red-500", {
           visible: error !== "",
@@ -52,6 +42,8 @@ const Input: FunctionComponent<InputProps> = ({
       </p>
     </div>
   );
-};
+});
+
+Input.displayName = "AHInput";
 
 export default Input;

src/components/ui/Modal.tsx

@@ -2,33 +2,40 @@ import { cn } from "@/utils/class-merge";
 import { FunctionComponent } from "preact";
 import { Dispatch, StateUpdater, useEffect } from "preact/hooks";
 
-interface ModalWindowProps {
+export interface ModalWindowProps {
   isOpen?: boolean;
   setIsOpen?: Dispatch<StateUpdater<boolean>>;
   onClose?: () => void;
   className?: string;
+  zIndex?: number;
 }
-const ModalWindow: FunctionComponent<ModalWindowProps> = ({ isOpen, children, setIsOpen, onClose, className = "" }) => {
+const ModalWindow: FunctionComponent<ModalWindowProps> = ({
+  isOpen,
+  children,
+  setIsOpen,
+  onClose,
+  className = "",
+  zIndex,
+}) => {
   useEffect(() => {
     if (isOpen) return;
     if (onClose) onClose();
   }, [isOpen]);
   return (
+    isOpen && (
       <div
         onClick={(e) => {
           e.stopPropagation();
           if (setIsOpen) setIsOpen(false);
         }}
         class={cn(
-        "fixed top-0 left-0 z-50 flex h-screen w-screen cursor-pointer flex-col items-center justify-center bg-black/50",
-        {
-          hidden: !isOpen,
-        }
+          "fixed top-0 left-0 z-50 flex h-screen w-screen cursor-pointer flex-col items-center justify-center bg-black/50"
         )}
+        style={{ zIndex: zIndex }}
       >
         <div
           class={cn(
-          "h-[40rem] w-[95%] cursor-auto rounded-[4rem] bg-white px-8 py-12 md:me-[20rem] md:h-[20rem] md:w-[65%] md:px-16",
+            "flex h-[40rem] w-[95%] cursor-auto flex-col items-center justify-start rounded-[4rem] bg-white px-8 py-12 md:me-[20rem] md:h-[20rem] md:w-[65%] md:px-16",
             className
           )}
           onClick={(e) => e.stopPropagation()}
@@ -36,6 +43,7 @@ const ModalWindow: FunctionComponent<ModalWindowProps> = ({ isOpen, children, se
           {children}
         </div>
       </div>
+    )
   );
 };
 

src/enums/urls.ts

@@ -4,4 +4,5 @@ export enum UrlsTitle {
   TASKS = "Задачи",
   CALENDAR = "Календарь",
   PAGE404 = "404",
+  REGISTER = "Регистрация",
 }

src/index.scss

@@ -1,6 +1,8 @@
 @import "tailwindcss";
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 :root {
+  color: black;
+  background-color: white;
   font-family: "Montserrat", sans-serif;
 }
 

src/pages/login.dto.ts

@@ -0,0 +1,4 @@
+export interface ILoginForm {
+  login: string;
+  password: string;
+}

src/pages/login.tsx

@@ -3,50 +3,104 @@ import Input from "@/components/ui/Input";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
+import apiClient from "@/services/api";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
 import "preact/debug";
-import { useRef, useState } from "preact/hooks";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import { ILoginForm } from "./login.dto";
 import classes from "./login.module.scss";
 
-const testUser = {
-  login: "test",
-  password: "test",
-};
 const LoginPage: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
-  const loginRef = useRef<HTMLInputElement | null>(null);
-  const passwordRef = useRef<HTMLInputElement | null>(null);
-  const [loginError, setLoginError] = useState("");
-  const [passwordError, setPasswordError] = useState("");
-  const login = async () => {
-    if (!loginRef.current || !passwordRef.current) return;
-    setLoginError("");
-    setPasswordError("");
-    if (!loginRef.current.value.length || !passwordRef.current.value.length) {
-      if (!loginRef.current.value.length) setLoginError("Введите логин");
-      if (!passwordRef.current.value.length) setPasswordError("Введите пароль");
-      return;
-    }
-    if (loginRef.current.value !== testUser.login || passwordRef.current.value !== testUser.password) {
-      setLoginError("Неправильный логин или пароль");
-      return;
-    }
+  const { control, handleSubmit, formState, setError } = useForm({
+    defaultValues: {
+      login: "",
+      password: "",
+    },
+    mode: "onChange",
+  });
+  const login: SubmitHandler<ILoginForm> = async (data) => {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const response = await apiClient<{ success: boolean; user?: any; error?: string }>(
+        "/api/login/",
+        {
+          method: "POST",
+          body: JSON.stringify({ username: data.login, password: data.password }),
+          needsCsrf: true,
+        },
+        isLoggedIn
+      );
+
+      if (response.success) {
         isLoggedIn.value = true;
         localStorage.setItem("loggedIn", "true");
         route("/profile/tasks", true);
+      } else {
+        const errorMessage = response.error || "Неверный логин или пароль";
+        setError("login", { message: errorMessage });
+        setError("password", { message: " " });
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      console.error("Login failed:", error);
+      const errorMessage =
+        error.message.includes("Authentication failed") || error.message.includes("Invalid credentials")
+          ? "Неверный логин или пароль"
+          : "Ошибка входа. Попробуйте позже.";
+      setError("login", { message: errorMessage });
+      setError("password", { message: " " });
+    }
   };
   if (isLoggedIn.value) route("/profile/tasks", true);
   return !isLoggedIn.value ? (
     <div class={classes.login_container}>
       <div class={classes.login_card}>
         <p class={classes.login_card_name}>Антихвост</p>
-        <Input placeholder="Логин" textAlign="center" textRef={loginRef} error={loginError} />
-        <Input isPassword placeholder="Пароль" textAlign="center" textRef={passwordRef} error={passwordError} />
-        <Button color="secondary" onClick={login}>
+        <form onSubmit={handleSubmit(login)}>
+          <Controller
+            name="login"
+            control={control}
+            rules={{
+              required: "Введите логин",
+            }}
+            render={({ field }) => (
+              <Input placeholder="Логин" textAlign="center" error={formState.errors.login?.message} {...field} />
+            )}
+          />
+          <Controller
+            name="password"
+            control={control}
+            rules={{
+              required: "Введите пароль",
+            }}
+            render={({ field }) => (
+              <Input
+                placeholder="Пароль"
+                textAlign="center"
+                type="password"
+                error={formState.errors.password?.message}
+                {...field}
+              />
+            )}
+          />
+          <Button type="submit" color="secondary" className="w-full">
             Войти
           </Button>
+        </form>
+        <span class="mt-5 text-center text-xs">
+          Еще нет аккаунта?{" "}
+          <button
+            class="cursor-pointer text-blue-500 underline"
+            onClick={() => {
+              route("/register", true);
+            }}
+          >
+            Зарегистрироваться
+          </button>
+        </span>
       </div>
     </div>
   ) : (

src/pages/profile.tsx

@@ -6,8 +6,16 @@ import ids from "./profile.module.scss";
 
 const ProfilePage: FunctionComponent = () => {
   const { route } = useLocation();
-  const { isLoggedIn } = useAppContext();
-  if (!isLoggedIn.value) route("/login", true);
+  const { isLoggedIn, isCheckingAuth } = useAppContext(); // Получаем новый сигнал
+
+  if (isCheckingAuth.value) {
+    return <div class="flex h-screen items-center justify-center">Проверка авторизации...</div>;
+  }
+
+  if (!isLoggedIn.value) {
+    route("/login", true);
+    return <p>Redirecting...</p>; // Заглушка на время редиректа
+  }
   return isLoggedIn.value ? (
     <div id={ids.main_container}>
       <div id={ids.router_container}>

src/pages/profile_calendar.tsx

@@ -1,15 +1,606 @@
-import BigCalendar from "@/components/calendar";
+import ModalCalendar from "@/components/ModalCalendar";
+import ModalTags, { ITags } from "@/components/ModalTags";
+import Task from "@/components/task";
+import Dialog from "@/components/ui/Dialog";
+import ModalWindow from "@/components/ui/Modal";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
+import apiClient from "@/services/api";
+import { cn } from "@/utils/class-merge";
+import {
+  BookOpenIcon,
+  CalendarDaysIcon,
+  DocumentDuplicateIcon,
+  InboxArrowDownIcon,
+  PencilIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
+import { Dropdown } from "primereact/dropdown";
+import { Nullable } from "primereact/ts-helpers";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { priorities } from "./profile_tasks";
+import {
+  IApiResponse,
+  IAPITag,
+  ICreateTaskResponse,
+  IDeleteTaskResponse,
+  IEditTaskResponse,
+  ITask,
+  ITaskDetails,
+  ITaskForm,
+  IViewTagsResponse,
+} from "./profile_tasks.dto";
+import { DropdownStyles, selectedPriorityTemplate } from "./profile_tasks.prime.styles";
+
+const calendarStyles = {
+  root: "inline-flex w-full relative",
+  input: "font-sans text-base text-gray-600 bg-white p-3",
+  panel: "bg-white min-w-full p-2",
+  header: "flex items-center justify-between p-2 text-gray-700 font-semibold m-0 mb-4",
+  title: "leading-8 mx-auto text-xl",
+  previousButton: "flex items-center justify-center cursor-pointer w-8 h-8 text-gray-600",
+  nextButton: "flex items-center justify-center cursor-pointer w-8 h-8 text-gray-600",
+  table: "border-collapse w-full",
+  tableHeaderCell: "p-2 text-center",
+  weekDay: "text-gray-600 font-normal pb-4",
+  monthTitle: "text-gray-700 font-semibold mr-2",
+  yearTitle: "text-gray-700 font-semibold",
+  monthPicker: "grid grid-cols-3 gap-2",
+  yearPicker: "grid grid-cols-2 gap-2",
+  month:
+    "p-2 text-center cursor-pointer rounded-lg hover:bg-[rgba(251,194,199,0.1)] [&.p-highlight]:bg-[rgba(251,194,199,0.2)]",
+  year: "p-2 text-center cursor-pointer rounded-lg hover:bg-[rgba(251,194,199,0.1)] [&.p-highlight]:bg-[rgba(251,194,199,0.2)]",
+};
 
 const ProfileCalendar: FunctionComponent = () => {
-  const onDateSelect = (date: Date) => {
-    console.log(date);
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [tasks, setTasks] = useState<ITask[]>([]);
+  const [selectedTasks, setSelectedTasks] = useState<ITask[]>([]);
+  const [openModal, setIsOpen] = useState(false);
+  const [openModalCalendar, setOpenModalCalendar] = useState(false);
+  const [openModalTags, setOpenModalTags] = useState(false);
+  const [isEdit, setIsEdit] = useState(false);
+  const [isEditModal, setIsEditModal] = useState(false);
+  const [editContent, setEditContent] = useState<ITask | null>(null);
+  const [calendarDate, setCalendarDate] = useState<Nullable<Date>>();
+  const [tags, setTags] = useState<ITags>({ first: 0, second: 0, overdue: false });
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [subjectChoices, setSubjectChoices] = useState<IAPITag[]>([]);
+  const [taskTypeChoices, setTaskTypeChoices] = useState<IAPITag[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [selectedPriority, setSelectedPriority] = useState(4);
+
+  const {
+    handleSubmit,
+    register,
+    reset,
+    setError,
+    formState: { errors },
+  } = useForm<ITaskForm>({
+    defaultValues: {},
+  });
+
+  useEffect(() => {
+    fetchTasks();
+    fetchTags();
+  }, []);
+
+  const fetchTags = async () => {
+    try {
+      const response = await apiClient<IViewTagsResponse>("/api/tags/view_tags/");
+      setSubjectChoices(response.subjects);
+      setTaskTypeChoices(response.taskTypes);
+    } catch (error) {
+      console.error("Failed to fetch tags:", error);
+    }
   };
+
+  const fetchTasks = async () => {
+    try {
+      setIsLoading(true);
+      const response = await apiClient<IApiResponse>("/api/tasks/view_tasks/");
+
+      const convertedTasks: ITask[] = response.tasks.map((apiTask) => ({
+        id: apiTask.id.toString(),
+        name: apiTask.title,
+        checked: apiTask.isCompleted,
+        date: new Date(apiTask.due_date),
+        description: apiTask.description,
+        priority: apiTask.priority,
+        subject: apiTask.subject,
+        taskType: apiTask.taskType,
+        new: false,
+      }));
+
+      setTasks(convertedTasks);
+    } catch (error) {
+      console.error("Failed to fetch tasks:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const example_tags = useMemo(
+    () => ({
+      first: subjectChoices,
+      second: taskTypeChoices,
+    }),
+    [subjectChoices, taskTypeChoices]
+  );
+
+  const saveTask: SubmitHandler<ITaskForm> = async (data) => {
+    if (!calendarDate) {
+      setError("date", { message: "Выберите дату" });
+      return;
+    }
+    if ((!editContent?.subject.id || !editContent.taskType.id) && (!tags.first || !tags.second)) {
+      setError("date", { message: "Выберите теги" });
+      return;
+    }
+
+    try {
+      const selectedSubject = tags.first || editContent?.subject.id;
+      const selectedTaskType = tags.second || editContent?.taskType.id;
+
+      // Format date to DD-MM-YYYYTHH:MM
+      const formattedDate = calendarDate
+        .toLocaleString("en-GB", {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: false,
+        })
+        .replace(",", "T")
+        .replace(/\//g, "-")
+        .replace("T ", "T");
+
+      const taskData = {
+        title: data.name,
+        description: data.description || "",
+        subject_id: selectedSubject,
+        taskType_id: selectedTaskType,
+        dateTime_due: formattedDate,
+        telegram_notifications: false,
+        priority: selectedPriority,
+      };
+
+      if (!editContent) {
+        const response = await apiClient<ICreateTaskResponse>("/api/tasks/create_task/", {
+          method: "POST",
+          body: JSON.stringify(taskData),
+        });
+
+        if (!response.success) {
+          throw new Error(response.message);
+        }
+      } else {
+        const response = await apiClient<IEditTaskResponse>(`/api/tasks/edit_task/${editContent.id}/`, {
+          method: "PUT",
+          body: JSON.stringify(taskData),
+        });
+
+        if (!response.success) {
+          throw new Error(response.message);
+        } else if (isEdit)
+          setEditContent({
+            name: response.task.title,
+            id: response.task.id.toString(),
+            description: response.task.description,
+            priority: response.task.priority,
+            checked: response.task.isCompleted,
+            subject: response.task.subject,
+            taskType: response.task.task_type,
+            date: new Date(response.task.dateTime_due),
+          });
+      }
+
+      await fetchTasks();
+      setIsOpen(false);
+      setTags({ first: 0, second: 0, overdue: false });
+    } catch (error) {
+      console.error("Failed to save task:", error);
+    }
+  };
+
+  const handleDeleteTask = async () => {
+    if (!editContent) return;
+
+    try {
+      const response = await apiClient<IDeleteTaskResponse>(`/api/tasks/delete_task/${editContent.id}/`, {
+        method: "DELETE",
+      });
+
+      if (!response.success) {
+        throw new Error(response.message);
+      }
+
+      await fetchTasks();
+      setIsOpen(false);
+      setShowDeleteDialog(false);
+    } catch (error) {
+      console.error("Failed to delete task:", error);
+    }
+  };
+
+  const handleTaskCheck = async (taskId: string) => {
+    try {
+      await apiClient(`/api/tasks/toggle_complete_task/${taskId}/`, {
+        method: "PATCH",
+      });
+
+      setTasks((prevTasks) =>
+        prevTasks.map((task) => (task.id === taskId ? { ...task, checked: !task.checked } : task))
+      );
+    } catch (error) {
+      console.error("Failed to mark task:", error);
+    }
+  };
+
+  const handleViewTask = async (taskId: string) => {
+    try {
+      const taskDetails = await apiClient<ITaskDetails>(`/api/tasks/view_task/${taskId}/`);
+
+      const task: ITask = {
+        id: taskId,
+        name: taskDetails.title,
+        checked: false,
+        date: new Date(taskDetails.dateTime_due),
+        description: taskDetails.description,
+        subject: taskDetails.subject,
+        taskType: taskDetails.task_type,
+        priority: taskDetails.priority,
+      };
+
+      setIsOpen(true);
+      setIsEdit(true);
+      setEditContent(task);
+      setCalendarDate(task.date);
+      setSelectedPriority(task.priority);
+      setIsEditModal(false);
+    } catch (error) {
+      console.error("Failed to fetch task details:", error);
+    }
+  };
+
+  useEffect(() => {
+    if (!currentDate) return;
+
+    const tasksForDate = tasks.filter((task) => {
+      const taskDate = task.date;
+      return (
+        taskDate.getDate() === currentDate.getDate() &&
+        taskDate.getMonth() === currentDate.getMonth() &&
+        taskDate.getFullYear() === currentDate.getFullYear()
+      );
+    });
+
+    setSelectedTasks(tasksForDate);
+  }, [currentDate, tasks]);
+
+  useEffect(() => {
+    if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
+    else reset();
+  }, [editContent]);
+
+  useEffect(() => {
+    if (!editContent) return;
+    const newEditContent = editContent;
+    if (tags.first) newEditContent.subject = subjectChoices.find((tag) => tag.id === tags.first)!;
+    if (tags.second) newEditContent.taskType = taskTypeChoices.find((tag) => tag.id === tags.second)!;
+    setEditContent(newEditContent);
+  }, [tags]);
+
+  const tasksCount = (date: CalendarDateTemplateEvent) => {
+    const filterTasks = tasks.filter((task) => {
+      const taskDate = task.date;
+      return (
+        taskDate.getDate() === date.day && taskDate.getMonth() === date.month && taskDate.getFullYear() === date.year
+      );
+    });
+    return {
+      length: filterTasks.length,
+      colors: filterTasks.map((task) => {
+        switch (task.priority) {
+          case 1:
+            return "bg-[rgba(18,26,230,1)]";
+          case 2:
+            return "bg-[rgba(97,200,232,1)]";
+          case 3:
+            return "bg-[rgba(247,220,52,1)]";
+          case 4:
+            return "bg-[rgba(251,194,199,1)]";
+          default:
+            return "bg-[rgba(251,194,199,1)]";
+        }
+      }),
+    };
+  };
+
+  const hasTasksOnDate = (date: CalendarDateTemplateEvent) => {
+    return tasks.some((task) => {
+      const taskDate = task.date;
+      return (
+        taskDate.getDate() === date.day && taskDate.getMonth() === date.month && taskDate.getFullYear() === date.year
+      );
+    });
+  };
+
+  const dateTemplate = (date: CalendarDateTemplateEvent) => {
+    const isHighlighted = hasTasksOnDate(date);
+    const taskInfo = tasksCount(date);
+    if (taskInfo.length) console.log(taskInfo);
+    const isSelected =
+      currentDate &&
+      currentDate.getDate() === date.day &&
+      currentDate.getMonth() === date.month &&
+      currentDate.getFullYear() === date.year;
+    const isToday =
+      new Date().getDate() === date.day &&
+      new Date().getMonth() === date.month &&
+      new Date().getFullYear() === date.year;
+    return (
+      <div
+        className={cn(
+          "relative flex h-20 w-full cursor-pointer items-start justify-start rounded-lg p-2",
+          "hover:bg-[rgba(251,194,199,0.1)]",
+          {
+            "bg-[rgba(251,194,199,0.4)]": isSelected,
+            "bg-[rgba(251,194,199,0.2)]": isToday && !isSelected,
+          }
+        )}
+      >
+        <span>{date.day}</span>
+        {isHighlighted && (
+          <div class="absolute top-2 right-2 flex h-fit w-2 flex-col items-center gap-1 md:h-2 md:w-fit md:flex-row">
+            {Array.from({ length: taskInfo.length > 3 ? 3 : taskInfo.length }).map((_, i) => (
+              <span key={i} className={cn("size-2 rounded-full", taskInfo.colors[i])} />
+            ))}
+            {taskInfo.length > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat("ru-RU", {
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+    }).format(date);
+  };
+
+  const pt = {
+    root: { className: calendarStyles.root },
+    input: { root: { className: calendarStyles.input } },
+    panel: { className: calendarStyles.panel },
+    header: { className: calendarStyles.header },
+    title: { className: calendarStyles.title },
+    previousButton: { className: calendarStyles.previousButton },
+    nextButton: { className: calendarStyles.nextButton },
+    table: { className: calendarStyles.table },
+    tableHeaderCell: { className: calendarStyles.tableHeaderCell },
+    weekDay: { className: calendarStyles.weekDay },
+    monthTitle: { className: calendarStyles.monthTitle },
+    yearTitle: { className: calendarStyles.yearTitle },
+    monthPicker: { className: calendarStyles.monthPicker },
+    yearPicker: { className: calendarStyles.yearPicker },
+    month: { className: calendarStyles.month },
+    year: { className: calendarStyles.year },
+  };
+
   return (
     <div class="flex w-full flex-col items-center">
-      <BigCalendar onDateSelect={onDateSelect} />
+      <ModalWindow
+        isOpen={openModal}
+        setIsOpen={setIsOpen}
+        onClose={() => {
+          setIsEdit(false);
+          setEditContent(null);
+          setSelectedPriority(4);
+          setIsEditModal(false);
+          setTags({ first: 0, second: 0, overdue: false });
+          setCalendarDate(null);
+        }}
+      >
+        {isEdit && editContent && (
+          <form
+            class="flex h-full w-full flex-col items-start justify-between"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (isEditModal) handleSubmit(saveTask)();
+              else setIsEditModal(!isEditModal);
+            }}
+          >
+            <div class="flex w-full flex-row items-start justify-between">
+              <div class="flex flex-1 flex-col gap-1 pe-2">
+                <input
+                  class={cn("w-full p-2 text-2xl outline-0", {
+                    "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
+                  })}
+                  disabled={!isEditModal}
+                  placeholder="Название"
+                  {...register("name", {
+                    required: "Заполните название",
+                    maxLength: { value: 20, message: "Максимум 20 символов в названии" },
+                  })}
+                />
+                <textarea
+                  class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
+                    "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
+                  })}
+                  disabled={!isEditModal}
+                  placeholder={isEditModal ? "Описание" : ""}
+                  {...register("description", {
+                    maxLength: { value: 200, message: "Максимум 200 символов в описании" },
+                  })}
+                />
+                <input
+                  type="datetime-local"
+                  value={calendarDate ? calendarDate.toISOString().slice(0, 16) : ""}
+                  hidden
+                  {...register("date")}
+                />
+                <input type="checkbox" hidden {...register("checked")} />
+              </div>
+              <div class="flex flex-row gap-4">
+                <div
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => {
+                    if (isEditModal) {
+                      handleSubmit(saveTask)();
+                      setIsEditModal(!isEditModal);
+                    } else setIsEditModal(!isEditModal);
+                  }}
+                >
+                  {isEditModal ? (
+                    <>
+                      <InboxArrowDownIcon class="size-6" />
+                      <p class="text-[0.7rem]">Сохранить</p>
+                    </>
+                  ) : (
+                    <>
+                      <PencilIcon class="size-6" />
+                      <p class="text-[0.7rem]">Редактировать</p>
+                    </>
+                  )}
+                </div>
+                <div
+                  className="flex cursor-pointer flex-col items-center gap-3"
+                  onClick={() => setShowDeleteDialog(true)}
+                >
+                  <TrashIcon class="size-6" />
+                  <p class="text-[0.7rem]">Удалить</p>
+                </div>
+              </div>
+            </div>
+            {errors.name && <p class="text-red-500">{errors.name.message}</p>}
+            {errors.description && <p class="text-red-500">{errors.description.message}</p>}
+            {errors.date && <p class="text-red-500">{errors.date.message}</p>}
+            <div class="flex flex-col items-center gap-6 self-center md:flex-row md:justify-start md:self-start">
+              <div
+                class={cn("flex h-full flex-row items-center gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-2 py-1", {
+                  "cursor-pointer": isEditModal,
+                })}
+                onClick={() => {
+                  if (!isEditModal) return;
+                  setOpenModalCalendar(true);
+                  setCalendarDate(editContent.date);
+                }}
+              >
+                <CalendarDaysIcon class="size-10" />
+                <p>
+                  {Intl.DateTimeFormat("ru-RU", {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  }).format(calendarDate!)}
+                </p>
+              </div>
+              <div
+                class={cn("flex h-full flex-col items-start gap-1 rounded-2xl bg-[rgba(251,194,199,0.38)] px-4 py-2", {
+                  "cursor-pointer": isEditModal,
+                })}
+                onClick={() => {
+                  if (!isEditModal) return;
+                  setTags({ first: editContent.subject.id, second: editContent.taskType.id, overdue: false });
+                  setOpenModalTags(true);
+                }}
+              >
+                <p class="flex flex-row gap-2">
+                  <BookOpenIcon class="size-5" />
+                  {editContent.subject.name}
+                </p>
+                <p class="flex flex-row gap-2">
+                  <DocumentDuplicateIcon class="size-5" />
+                  {editContent.taskType.name}
+                </p>
+              </div>
+              <Dropdown
+                disabled={!isEditModal}
+                pt={DropdownStyles}
+                options={priorities}
+                value={selectedPriority}
+                onChange={(e) => setSelectedPriority(e.value)}
+                itemTemplate={selectedPriorityTemplate}
+                valueTemplate={selectedPriorityTemplate}
+              />
+            </div>
+          </form>
+        )}
+      </ModalWindow>
+      {isLoading ? (
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>
+      ) : (
+        <>
+          <ModalTags
+            refreshTags={fetchTags}
+            isOpen={openModalTags}
+            setIsOpen={setOpenModalTags}
+            tagsList={example_tags}
+            value={tags}
+            onClose={() => {
+              setTags({ first: 0, second: 0, overdue: false });
+            }}
+            onChange={setTags}
+          />
+          <ModalCalendar
+            isOpen={openModalCalendar}
+            setIsOpen={setOpenModalCalendar}
+            onClose={() => {
+              if (isEdit && !isEditModal) setCalendarDate(null);
+            }}
+            onChange={(e) => isEditModal && setCalendarDate(e.value)}
+            value={calendarDate!}
+          />
+          <Dialog
+            isOpen={showDeleteDialog}
+            setIsOpen={setShowDeleteDialog}
+            title="Удаление задачи"
+            onConfirm={handleDeleteTask}
+            confirmText="Удалить"
+            cancelText="Отмена"
+          >
+            <p class="mb-6 text-sm sm:text-[1rem]">"Вы уверены, что хотите удалить эту задачу?"</p>
+          </Dialog>
+          <Calendar
+            value={currentDate}
+            onChange={(e) => setCurrentDate(e ? e.value! : new Date())}
+            inline
+            pt={pt}
+            dateTemplate={dateTemplate}
+            className="[&_.p-datepicker]:!border-0 [&_.p-datepicker-calendar]:border-separate [&_.p-datepicker-calendar]:border-spacing-2 [&_td]:rounded-lg [&_td]:border [&_td]:border-[rgba(251,194,199,0.38)]"
+          />
+
+          <div class="mt-8 w-full px-4">
+            <h2 class="mb-4 text-2xl font-semibold">Задачи на {formatDate(currentDate)}</h2>
+            {selectedTasks.length > 0 ? (
+              <div class="flex flex-col gap-4">
+                {selectedTasks.map((task) => (
+                  <Task
+                    key={task.id}
+                    name={task.name}
+                    checked={task.checked}
+                    priority={task.priority}
+                    overdue={task.date < new Date()}
+                    onClick={() => handleViewTask(task.id)}
+                    onMarkClick={() => handleTaskCheck(task.id)}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
+            )}
+          </div>
+        </>
+      )}
     </div>
   );
 };

src/pages/profile_settings.module.scss

@@ -5,7 +5,7 @@
 }
 
 #avatar {
-  @apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full bg-white;
+  @apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full;
 }
 
 .profile_container {

src/pages/profile_settings.tsx

@@ -1,49 +1,106 @@
+import ModalSettings from "@/components/ModalSettings";
 import Button from "@/components/ui/Button";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
+import apiClient from "@/services/api";
+import { getAvatarPicUrl } from "@/services/avatar-pic";
 import { cn } from "@/utils/class-merge";
+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;
+  status: string;
+  telegram_notifications: boolean;
+  telegram_chat_id: string | null;
+  current_xp: string;
+  xp_for_next_status: string;
+}
+
+interface UserSettings {
+  profile: UserProfile;
+}
+
 const ProfileSettings: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
-  const status = 12;
-  const maxStatus = 100;
+  const [userData, setUserData] = useState<UserProfile>({
+    username: "",
+    status: "",
+    current_xp: "",
+    xp_for_next_status: "",
+    telegram_notifications: false,
+    telegram_chat_id: "",
+  });
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
+  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);
+    }
+  };
+  useEffect(() => {
+    if (isLoggedIn.value) {
+      fetchUserData();
+    }
+  }, [isLoggedIn.value]);
+
+  const handleLogout = async () => {
+    try {
+      await apiClient("/api/settings/logout/", { method: "POST", needsCsrf: true }, isLoggedIn);
+      isLoggedIn.value = false;
+      localStorage.removeItem("loggedIn");
+      localStorage.removeItem("user");
+      route("/login", true);
+    } catch (error) {
+      console.error("Logout failed:", error);
+    }
+  };
+  if (!userData.username)
+    return (
+      <div class="flex h-full w-full flex-1 flex-col items-center justify-center">
+        <div class="flex w-full flex-1 items-center justify-center">Загрузка...</div>;
+      </div>
+    );
   return (
     <div class={classes.container}>
+      <ModalSettings isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} onClose={fetchUserData} />
       <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}>
+          <img class="size-28 rounded-full" src={getAvatarPicUrl(userData.status)} alt="avatar" />
+        </div>
         <div class={classes.header_block__name}>
-          <p class="text-4xl font-semibold">Никнейм</p>
-          <p class="text-2xl font-light">Статус</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.current_xp / +userData.xp_for_next_status) * 100}%` }}
             ></div>
           </div>
           <div class="-mt-3 self-end text-sm font-light">
-            {status}/{maxStatus}
+            {userData.current_xp}/{userData.xp_for_next_status}
           </div>
         </div>
       </div>
       <div class={classes.profile_container}>
         <div class={classes.settings_block}>
           <div class={classes.settings_block__buttons}>
-            <Button>Сменить тему</Button>
-            <Button>Настройки</Button>
+            <Button className="flex flex-row items-center justify-center gap-2" onClick={() => setIsSettingsOpen(true)}>
+              <Cog8ToothIcon class="size-8" /> Настройки
+            </Button>
             <Button
-              color="secondary"
-              onClick={() => {
-                isLoggedIn.value = false;
-                localStorage.setItem("loggedIn", "false");
-                route("/login", true);
-              }}
+              className="flex flex-row items-center justify-center gap-2 bg-[linear-gradient(180.00deg,rgba(246,255,211,0.7),rgba(195,229,253,0.7)_100%)]"
+              onClick={handleLogout}
             >
-              Выйти
+              <ArrowRightStartOnRectangleIcon class="size-8" /> Выйти
             </Button>
           </div>
         </div>
@@ -52,4 +109,6 @@ const ProfileSettings: FunctionComponent = () => {
   );
 };
 
+ProfileSettings.displayName = "ProfileSettings";
+
 export default withTitle(UrlsTitle.PROFILE, ProfileSettings);

src/pages/profile_tasks.dto.ts

@@ -1,8 +1,95 @@
-export interface ITask {
+export interface IAPITag {
+  name: string;
   id: number;
+}
+export interface ITask {
+  id: string;
   name: string;
   checked: boolean;
+  priority: number;
   date: Date;
   description: string;
-  tags: string[];
+  subject: IAPITag;
+  taskType: IAPITag;
+}
+
+export interface ITaskView extends Omit<ITask, "taskType"> {
+  task_type: IAPITag;
+}
+
+export interface ITaskForm extends Omit<ITask, "date" | "subject" | "taskType"> {
+  date: string;
+}
+
+export interface IApiTask {
+  id: number;
+  title: string;
+  description: string;
+  priority: number;
+  isCompleted: boolean;
+  due_date: string;
+  subject: IAPITag;
+  taskType: IAPITag;
+}
+
+export interface IApiResponse {
+  profile: string;
+  tasks: IApiTask[];
+}
+
+export interface ICreateTaskResponse {
+  success: boolean;
+  message: string;
+  profile: string;
+  task: {
+    id: number;
+    title: string;
+    description: string;
+    subject: string;
+    taskType: string;
+    dateTime_due: string;
+    isCompleted: boolean;
+    reminder?: {
+      remind_before_days: number;
+      repeat_interval: number;
+      reminder_time: string;
+    };
+  };
+}
+
+export interface ITaskDetails {
+  profile: string;
+  title: string;
+  description: string;
+  subject: IAPITag;
+  task_type: IAPITag;
+  priority: number;
+  dateTime_due: string;
+}
+
+export interface IDeleteTaskResponse {
+  success: boolean;
+  message: string;
+}
+
+export interface IEditTaskResponse {
+  success: boolean;
+  message: string;
+  profile: string;
+  task: {
+    id: number;
+    title: string;
+    description: string;
+    subject: IAPITag;
+    task_type: IAPITag;
+    dateTime_due: string;
+    isCompleted: boolean;
+    priority: number;
+  };
+}
+
+export interface IViewTagsResponse {
+  profile: string;
+  subjects: IAPITag[];
+  taskTypes: IAPITag[];
 }

src/pages/profile_tasks.module.scss

@@ -5,7 +5,7 @@
 }
 
 .header {
-  @apply mb-3 w-full text-3xl font-semibold md:mb-12 md:text-5xl;
+  @apply mb-3 flex w-full flex-row items-center justify-between text-xl font-semibold sm:text-3xl md:mb-12 md:text-5xl;
 }
 
 .tasks_container {

src/pages/profile_tasks.prime.styles.tsx

@@ -0,0 +1,86 @@
+import { cn } from "@/utils/class-merge";
+import { FlagIcon as FlagIconSolid } from "@heroicons/react/20/solid";
+import { DropdownPassThroughMethodOptions, DropdownPassThroughOptions } from "primereact/dropdown";
+
+export const DropdownStyles: DropdownPassThroughOptions = {
+  root: ({ props }: DropdownPassThroughMethodOptions) => ({
+    className: cn(
+      "cursor-pointer inline-flex relative select-none mb-2",
+      "bg-white border border-gray-400 transition-colors duration-200 ease-in-out rounded-md",
+      "w-full md:w-56",
+      "hover:border-[rgba(251,194,199,0.7)] focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(251,194,199,1)] ",
+      { "opacity-60 select-none pointer-events-none cursor-default": props.disabled }
+    ),
+  }),
+  input: ({ props }: DropdownPassThroughMethodOptions) => ({
+    className: cn(
+      "cursor-pointer flex flex-auto overflow-hidden overflow-ellipsis whitespace-nowrap relative",
+      "bg-transparent border-0 text-gray-800",
+      "p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base",
+      "focus:outline-none focus:shadow-none",
+      { "pr-7": props.showClear }
+    ),
+  }),
+  trigger: {
+    className: cn(
+      "flex items-center justify-center shrink-0",
+      "bg-transparent text-gray-500 w-12 rounded-tr-lg rounded-br-lg"
+    ),
+  },
+  wrapper: {
+    className: cn("max-h-[200px] overflow-auto", "bg-white text-gray-700 border-0 rounded-md shadow-lg", " "),
+  },
+  list: { className: "py-3 list-none m-0" },
+  item: ({ context }: DropdownPassThroughMethodOptions) => ({
+    className: cn(
+      "cursor-pointer font-normal overflow-hidden relative whitespace-nowrap",
+      "m-0 p-3 border-0  transition-shadow duration-200 rounded-none",
+      "hover:text-gray-700 hover:bg-gray-200",
+      {
+        "text-gray-700": !context.focused && !context.selected,
+        "bg-gray-300 text-gray-700  ": context.focused && !context.selected,
+        "bg-[rgba(251,194,199,0.7)] text-black  ": context.focused && context.selected,
+        "bg-blue-50 text-gray-700": !context.focused && context.selected,
+        "opacity-60 select-none pointer-events-none cursor-default": context.disabled,
+      }
+    ),
+  }),
+  itemGroup: {
+    className: cn("m-0 p-3 text-gray-800 bg-white font-bold", " ", "cursor-auto"),
+  },
+  header: {
+    className: cn("p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg"),
+  },
+  filterContainer: {
+    className: "relative",
+  },
+  filterInput: {
+    className: cn(
+      "pr-7 -mr-7",
+      "w-full",
+      "font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none",
+      "hover:border-[rgba(251,194,199,0.7)] focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(251,194,199,1)] "
+    ),
+  },
+  filterIcon: { className: "-mt-2 absolute top-1/2" },
+  clearIcon: { className: "text-gray-500 right-12 -mt-2 absolute top-1/2" },
+};
+
+export const selectedPriorityTemplate = (option: { label: string; value: number }) => {
+  return (
+    <div class="flex items-center">
+      <FlagIconSolid
+        className={cn(
+          "mr-2 size-4",
+          { "text-[rgba(18,26,230,0.29)]": option.value == 1 },
+          { "text-[rgba(97,200,232,0.6)]": option.value == 2 },
+          {
+            "text-[rgba(247,220,52,0.61)]": option.value == 3,
+          },
+          { "text-[rgba(251,194,199,0.53)]": option.value == 4 }
+        )}
+      />
+      <span>{option.label}</span>
+    </div>
+  );
+};

src/pages/register.tsx

@@ -0,0 +1,132 @@
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
+import { withTitle } from "@/constructors/Component";
+import { UrlsTitle } from "@/enums/urls";
+import { useAppContext } from "@/providers/AuthProvider";
+import apiClient from "@/services/api";
+import { FunctionComponent } from "preact";
+import { useLocation } from "preact-iso";
+import "preact/debug";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import { ILoginForm } from "./login.dto";
+import classes from "./login.module.scss";
+
+interface IRegisterForm extends ILoginForm {
+  confirmPassword: string;
+}
+
+const RegisterPage: FunctionComponent = () => {
+  const { isLoggedIn } = useAppContext();
+  const { route } = useLocation();
+  const { control, handleSubmit, formState, setError } = useForm({
+    defaultValues: {
+      login: "",
+      password: "",
+      confirmPassword: "",
+    },
+    mode: "onChange",
+  });
+  const register: SubmitHandler<IRegisterForm> = async (data) => {
+    if (data.password !== data.confirmPassword) {
+      setError("confirmPassword", { message: "Пароли не совпадают" });
+      return;
+    }
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const response = await apiClient<{ success: boolean; user?: any; error?: string }>("/api/register/", {
+        method: "POST",
+        body: JSON.stringify({ username: data.login, password: data.password }),
+        needsCsrf: true,
+      });
+
+      if (response.success) {
+        route("/login", true);
+      } else {
+        const errorMessage = response.error || "Неверный логин или пароль";
+        setError("login", { message: errorMessage });
+        setError("password", { message: " " });
+        setError("confirmPassword", { message: " " });
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      console.error("Register failed:", error);
+      const errorMessage = "Ошибка входа. Попробуйте позже.";
+      setError("login", { message: errorMessage });
+      setError("password", { message: " " });
+      setError("confirmPassword", { message: " " });
+    }
+  };
+  if (isLoggedIn.value) route("/profile/tasks", true);
+  return !isLoggedIn.value ? (
+    <div class={classes.login_container}>
+      <div class={classes.login_card}>
+        <p class={classes.login_card_name}>Антихвост</p>
+        <form onSubmit={handleSubmit(register)}>
+          <Controller
+            name="login"
+            control={control}
+            rules={{
+              required: "Введите логин",
+              minLength: { value: 3, message: "Логин должен быть не менее 3 символов" },
+            }}
+            render={({ field }) => (
+              <Input placeholder="Логин" textAlign="center" error={formState.errors.login?.message} {...field} />
+            )}
+          />
+          <Controller
+            name="password"
+            control={control}
+            rules={{
+              required: "Введите пароль",
+              minLength: { value: 8, message: "Пароль должен быть не менее 8 символов" },
+            }}
+            render={({ field }) => (
+              <Input
+                placeholder="Пароль"
+                textAlign="center"
+                type="password"
+                error={formState.errors.password?.message}
+                {...field}
+              />
+            )}
+          />
+          <Controller
+            name="confirmPassword"
+            control={control}
+            rules={{
+              required: "Введите пароль",
+              minLength: { value: 8, message: "Пароль должен быть не менее 8 символов" },
+            }}
+            render={({ field }) => (
+              <Input
+                placeholder="Повторите пароль"
+                textAlign="center"
+                type="password"
+                error={formState.errors.confirmPassword?.message}
+                {...field}
+              />
+            )}
+          />
+          <Button type="submit" color="secondary" className="w-full">
+            Зарегистрироваться
+          </Button>
+        </form>
+        <span class="mt-5 text-center text-xs">
+          Уже есть аккаунт?{" "}
+          <button
+            class="cursor-pointer text-blue-500 underline"
+            onClick={() => {
+              route("/login", true);
+            }}
+          >
+            Войти
+          </button>
+        </span>
+      </div>
+    </div>
+  ) : (
+    <p>Redirecting...</p>
+  );
+};
+
+export default withTitle(UrlsTitle.REGISTER, RegisterPage);

src/providers/AuthProvider.tsx

@@ -1,20 +1,75 @@
-import { stringToBoolean } from "@/utils/converter";
+import apiClient from "@/services/api";
 import { signal, Signal } from "@preact/signals";
 import { createContext, JSX } from "preact";
-import { useContext } from "preact/hooks";
+import { useContext, useEffect } from "preact/hooks";
+
+interface UserData {
+  id: number;
+  username: string;
+  email: string;
+}
+
+interface AuthStatusResponse {
+  isAuthenticated: boolean;
+  user?: UserData;
+}
 
 interface AppContextValue {
   isLoggedIn: Signal<boolean>;
+  isCheckingAuth: Signal<boolean>;
+  currentUser: Signal<UserData | null>;
+  checkAuth: () => Promise<void>;
 }
-const ininitialValue = stringToBoolean(localStorage.getItem("loggedIn"));
 
-const AppContext = createContext<AppContextValue>({
-  isLoggedIn: signal(ininitialValue),
-});
+const initialLoggedIn = localStorage.getItem("loggedIn") === "true";
+
+const AppContext = createContext<AppContextValue | null>(null);
 
 const AppProvider = ({ children }: { children: JSX.Element }) => {
+  const isLoggedIn = signal(initialLoggedIn);
+  const isCheckingAuth = signal(true);
+  const currentUser = signal<UserData | null>(null);
+
+  const checkAuth = async () => {
+    console.log("Checking auth status...");
+    isCheckingAuth.value = true;
+    try {
+      const response = await apiClient<AuthStatusResponse>("/api/auth/status/", {
+        method: "GET",
+        needsCsrf: false,
+      });
+
+      if (response.isAuthenticated && response.user) {
+        console.log("User is authenticated:", response.user.username);
+        isLoggedIn.value = true;
+        currentUser.value = response.user;
+        localStorage.setItem("loggedIn", "true");
+      } else {
+        console.log("User is not authenticated.");
+        isLoggedIn.value = false;
+        currentUser.value = null;
+        localStorage.removeItem("loggedIn");
+      }
+    } catch (error: any) {
+      console.error("Auth check failed:", error.message);
+      isLoggedIn.value = false;
+      currentUser.value = null;
+      localStorage.removeItem("loggedIn");
+    } finally {
+      isCheckingAuth.value = false;
+      console.log("Auth check finished. isLoggedIn:", isLoggedIn.value);
+    }
+  };
+
+  useEffect(() => {
+    checkAuth();
+  }, []);
+
   const value: AppContextValue = {
-    isLoggedIn: signal(ininitialValue),
+    isLoggedIn,
+    isCheckingAuth,
+    currentUser,
+    checkAuth,
   };
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
@@ -29,3 +84,4 @@ const useAppContext = () => {
 };
 
 export { AppProvider, useAppContext };
+export type { UserData };

src/services/api.ts

@@ -0,0 +1,99 @@
+import { Signal } from "@preact/signals";
+
+function getCookie(name: string): string | null {
+  let cookieValue = null;
+  if (document.cookie && document.cookie !== "") {
+    const cookies = document.cookie.split(";");
+    for (let i = 0; i < cookies.length; i++) {
+      const cookie = cookies[i].trim();
+      if (cookie.substring(0, name.length + 1) === name + "=") {
+        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+        break;
+      }
+    }
+  }
+  return cookieValue;
+}
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || "http://localhost:8000";
+
+interface RequestOptions extends RequestInit {
+  needsCsrf?: boolean;
+  isFormData?: boolean;
+}
+
+async function apiClient<T>(
+  endpoint: string,
+  options: RequestOptions = {},
+  isLoggedInSignal?: Signal<boolean>
+): Promise<T> {
+  const url = `${API_BASE_URL}${endpoint}`;
+  const { needsCsrf = true, isFormData = false, ...fetchOptions } = options;
+
+  const headers: HeadersInit = {
+    ...(isFormData ? {} : { "Content-Type": "application/json" }),
+    Accept: "application/json",
+    ...fetchOptions.headers,
+  };
+
+  const method = options.method?.toUpperCase() || "GET";
+  if (needsCsrf && ["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
+    const csrfToken = getCookie("csrftoken");
+    if (csrfToken) {
+      (headers as Record<string, string>)["X-CSRFToken"] = csrfToken;
+    } else {
+      console.warn("CSRF token not found in cookies.");
+      await fetchCsrfToken(); // Implement this function if needed
+      const newCsrfToken = getCookie("csrftoken");
+      if (newCsrfToken) {
+        (headers as Record<string, string>)["X-CSRFToken"] = newCsrfToken;
+      } else {
+        throw new Error("CSRF token is missing");
+      }
+    }
+  }
+
+  const config: RequestInit = {
+    ...fetchOptions,
+    headers,
+    credentials: "include",
+  };
+
+  try {
+    const response = await fetch(url, config);
+
+    if (response.status === 401 || response.status === 403) {
+      console.error("Authentication error:", response.status);
+      if (isLoggedInSignal) {
+        isLoggedInSignal.value = false;
+        localStorage.setItem("loggedIn", "false");
+      }
+      throw new Error(`Authentication failed: ${response.status}`);
+    }
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      console.error("API Error:", response.status, errorData);
+      throw new Error(`HTTP error ${response.status}: ${JSON.stringify(errorData) || response.statusText}`);
+    }
+
+    if (response.status === 204) {
+      return {} as T;
+    }
+
+    return (await response.json()) as T;
+  } catch (error) {
+    console.error("API Client Fetch Error:", error);
+    throw error;
+  }
+}
+
+async function fetchCsrfToken() {
+  try {
+    await apiClient("/api/get-csrf/", { method: "GET", needsCsrf: false });
+  } catch (error) {
+    console.error("Failed to fetch CSRF token:", error);
+  }
+}
+
+export default apiClient;

src/services/avatar-pic.ts

@@ -0,0 +1,21 @@
+import Status1 from "@/assets/status/1.png";
+import Status2 from "@/assets/status/2.png";
+import Status3 from "@/assets/status/3.png";
+import Status4 from "@/assets/status/4.png";
+import Status5 from "@/assets/status/5.png";
+export const getAvatarPicUrl = (status: string) => {
+  switch (true) {
+    case status.includes("точно"):
+      return Status1;
+    case status.includes("плана нет"):
+      return Status2;
+    case status.includes("прокрастинации"):
+      return Status3;
+    case status.includes("3000"):
+      return Status4;
+    case status.includes("планирования"):
+      return Status5;
+    default:
+      return Status1;
+  }
+};

src/utils/status-system.ts

@@ -0,0 +1,26 @@
+export interface StatusLevel {
+  name: string;
+  minPoints: number;
+}
+
+export const STATUS_LEVELS: StatusLevel[] = [
+  { name: "Завтра точно начну", minPoints: 0 },
+  { name: "Всё по плану (плана нет)", minPoints: 25 },
+  { name: "Гений прокрастинации (но всё сделал)", minPoints: 50 },
+  { name: "Хвостоуничтожитель 3000", minPoints: 75 },
+  { name: "Легенда планирования", minPoints: 90 }
+];
+
+const POINTS_PER_TASK = 5;
+
+export const calculatePoints = (completedTasks: number): number => {
+  return Math.min(completedTasks * POINTS_PER_TASK, 100);
+};
+
+export const getCurrentStatus = (points: number): string => {
+  const status = STATUS_LEVELS
+    .slice()
+    .reverse()
+    .find(level => points >= level.minPoints);
+  return status?.name || STATUS_LEVELS[0].name;
+};