feat: overdue

.vscode/settings.json

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

src/app.tsx

@@ -5,6 +5,7 @@ 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 = () => {
@@ -32,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/ModalSettings.tsx

@@ -0,0 +1,203 @@
+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</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/task.tsx

@@ -51,7 +51,7 @@ const Task: FunctionComponent<TaskProps> = ({
           <p class={markStyle({ checked })}>✓</p>
         </div>
         {name}
-        {overdue && <span class="absolute top-2 right-16 text-xs text-red-500">Просрочено</span>}
+        {overdue && !checked && <span class="absolute top-2 right-16 text-xs text-red-500">Просрочено</span>}
       </div>
     </div>
   );

src/enums/urls.ts

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

src/pages/login.tsx

@@ -23,6 +23,7 @@ const LoginPage: FunctionComponent = () => {
   });
   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/",
         {
@@ -42,6 +43,7 @@ const LoginPage: FunctionComponent = () => {
         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 =
@@ -88,6 +90,17 @@ const LoginPage: FunctionComponent = () => {
             Войти
           </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_calendar.tsx

@@ -5,6 +5,7 @@ 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,
@@ -15,16 +16,19 @@ import {
   TrashIcon,
 } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 import { Calendar, CalendarDateTemplateEvent } from "primereact/calendar";
 import { Nullable } from "primereact/ts-helpers";
-import { useForm } from "react-hook-form";
+import { SubmitHandler, useForm } from "react-hook-form";
-import { ITask, ITaskForm } from "./profile_tasks.dto";
+import {
-
+  IApiResponse,
-const example_tags: { first: string[]; second: string[] } = {
+  ICreateTaskResponse,
-  first: ["Программирование", "Информатика", "Физика", "Математика"],
+  IDeleteTaskResponse,
-  second: ["Лабораторная работа", "Практическая работа", "Домашнее задание", "Экзамен"],
+  IEditTaskResponse,
-};
+  ITask,
+  ITaskDetails,
+  ITaskForm,
+} from "./profile_tasks.dto";
 
 const calendarStyles = {
   root: "inline-flex w-full relative",
@@ -59,6 +63,9 @@ const ProfileCalendar: FunctionComponent = () => {
   const [calendarDate, setCalendarDate] = useState<Nullable<Date>>();
   const [tags, setTags] = useState<ITags>({ first: "", second: "", overdue: false });
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [subjectChoices, setSubjectChoices] = useState<Record<string, string>>({});
+  const [taskTypeChoices, setTaskTypeChoices] = useState<Record<string, string>>({});
+  const [isLoading, setIsLoading] = useState(true);
 
   const {
     handleSubmit,
@@ -73,21 +80,164 @@ const ProfileCalendar: FunctionComponent = () => {
   });
 
   useEffect(() => {
-    const storedTasks = localStorage.getItem("tasks");
+    fetchTasks();
-    if (storedTasks) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const parsedTasks: ITask[] = JSON.parse(storedTasks).map((task: any) => ({
-        ...task,
-        date: new Date(task.date),
-      }));
-      setTasks(parsedTasks);
-    }
   }, []);
-  const handleDeleteTask = () => {
+
+  const fetchTasks = async () => {
+    try {
+      setIsLoading(true);
+      const response = await apiClient<IApiResponse>("/api/tasks/view_tasks/");
+
+      setSubjectChoices(response.subject_choices);
+      setTaskTypeChoices(response.task_type_choices);
+
+      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,
+        tags: [apiTask.subject, apiTask.task_type],
+        new: false,
+      }));
+
+      setTasks(convertedTasks);
+    } catch (error) {
+      console.error("Failed to fetch tasks:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const example_tags = useMemo(
+    () => ({
+      first: Object.keys(subjectChoices),
+      second: Object.keys(taskTypeChoices),
+    }),
+    [subjectChoices, taskTypeChoices]
+  );
+
+  const saveTask: SubmitHandler<ITaskForm> = async (data) => {
+    if (!calendarDate) {
+      setError("date", { message: "Выберите дату" });
+      return;
+    }
+    if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) {
+      setError("tags", { message: "Выберите теги" });
+      return;
+    }
+
+    try {
+      const selectedSubject = editContent?.tags[0] || tags.first;
+      const selectedTaskType = editContent?.tags[1] || tags.second;
+
+      // 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: selectedSubject,
+        taskType: selectedTaskType,
+        dateTime_due: formattedDate,
+        telegram_notifications: false,
+      };
+
+      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);
+        }
+      }
+
+      await fetchTasks();
+      setIsOpen(false);
+      setTags({ first: "", second: "", overdue: false });
+    } catch (error) {
+      console.error("Failed to save task:", error);
+    }
+  };
+
+  const handleDeleteTask = async () => {
     if (!editContent) return;
-    setTasks(tasks.filter((task) => task.id !== editContent.id));
+
+    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,
+        tags: [taskDetails.subject, taskDetails.taskType],
+        new: false,
+      };
+
+      setIsOpen(true);
+      setIsEdit(true);
+      setEditContent(task);
+      setCalendarDate(task.date);
+      setIsEditModal(false);
+    } catch (error) {
+      console.error("Failed to fetch task details:", error);
+    }
   };
 
   useEffect(() => {
@@ -109,9 +259,6 @@ const ProfileCalendar: FunctionComponent = () => {
     if (editContent) reset({ ...editContent, date: editContent.date.toISOString().slice(0, 16) });
     else reset();
   }, [editContent]);
-  useEffect(() => {
-    localStorage.setItem("tasks", JSON.stringify(tasks));
-  }, [tasks]);
 
   useEffect(() => {
     if (!editContent) return;
@@ -175,12 +322,6 @@ const ProfileCalendar: FunctionComponent = () => {
     );
   };
 
-  const handleTaskCheck = (taskId: string) => {
-    const updatedTasks = tasks.map((task) => (task.id === taskId ? { ...task, checked: !task.checked } : task));
-    setTasks(updatedTasks);
-    localStorage.setItem("tasks", JSON.stringify(updatedTasks));
-  };
-
   const formatDate = (date: Date) => {
     return new Intl.DateTimeFormat("ru-RU", {
       day: "numeric",
@@ -189,26 +330,6 @@ const ProfileCalendar: FunctionComponent = () => {
     }).format(date);
   };
 
-  const saveTask = (data: ITaskForm) => {
-    if (!calendarDate) {
-      setError("date", { message: "Выберите дату" });
-      return;
-    }
-    if ((!editContent?.tags[0] || !editContent.tags[1]) && (!tags.first || !tags.second)) {
-      setError("tags", { message: "Выберите теги" });
-      return;
-    }
-    const eTask: ITask = {
-      ...data,
-      date: calendarDate,
-      tags: editContent?.tags.length ? editContent.tags : [tags.first, tags.second],
-      new: true,
-    };
-    setTasks(tasks.map((task) => (task.id === eTask.id ? eTask : task)));
-    localStorage.setItem("tasks", JSON.stringify(tasks.map((task) => (task.id === eTask.id ? eTask : task))));
-    setTags({ first: "", second: "", overdue: false });
-  };
-
   const pt = {
     root: { className: calendarStyles.root },
     input: { root: { className: calendarStyles.input } },
@@ -230,6 +351,12 @@ const ProfileCalendar: FunctionComponent = () => {
 
   return (
     <div class="flex w-full flex-col items-center">
+      {isLoading ? (
+        <div class="flex w-full flex-1 items-center justify-center">
+          <div class="text-2xl">Загрузка...</div>
+        </div>
+      ) : (
+        <>
           <ModalTags
             isOpen={openModalTags}
             setIsOpen={setOpenModalTags}
@@ -272,7 +399,9 @@ const ProfileCalendar: FunctionComponent = () => {
                 <div class="flex w-full flex-row items-start justify-between">
                   <div class="flex flex-1 flex-col gap-1 pe-2">
                     <input
-                  class="w-full text-2xl outline-0"
+                      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", {
@@ -281,7 +410,9 @@ const ProfileCalendar: FunctionComponent = () => {
                       })}
                     />
                     <textarea
-                  class="h-[5rem] w-full resize-none outline-0"
+                      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", {
@@ -333,9 +464,12 @@ const ProfileCalendar: FunctionComponent = () => {
                 {errors.tags && <p class="text-red-500">{errors.tags.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", {
+                    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);
@@ -354,9 +488,12 @@ const ProfileCalendar: FunctionComponent = () => {
                     </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", {
+                    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.tags[0], second: editContent.tags[1], overdue: false });
@@ -403,12 +540,7 @@ const ProfileCalendar: FunctionComponent = () => {
                     key={task.id}
                     name={task.name}
                     checked={task.checked}
-                onClick={() => {
+                    onClick={() => handleViewTask(task.id)}
-                  setIsOpen(true);
-                  setIsEdit(true);
-                  setEditContent(task);
-                  setCalendarDate(task.date);
-                }}
                     onMarkClick={() => handleTaskCheck(task.id)}
                   />
                 ))}
@@ -417,6 +549,8 @@ const ProfileCalendar: FunctionComponent = () => {
               <div class="rounded-lg bg-[rgba(251,194,199,0.2)] p-4 text-center">На этот день задач нет</div>
             )}
           </div>
+        </>
+      )}
     </div>
   );
 };

src/pages/profile_settings.tsx

@@ -1,3 +1,4 @@
+import ModalSettings from "@/components/ModalSettings";
 import Button from "@/components/ui/Button";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
@@ -12,11 +13,11 @@ import classes from "./profile_settings.module.scss";
 
 interface UserProfile {
   username: string;
-  email: string;
   status: string;
-  avatar_url: string | null;
   telegram_notifications: boolean;
-  telegram_chat_id: string;
+  telegram_chat_id: string | null;
+  current_xp: string;
+  xp_for_next_status: string;
 }
 
 interface UserSettings {
@@ -28,15 +29,14 @@ const ProfileSettings: FunctionComponent = () => {
   const { route } = useLocation();
   const [userData, setUserData] = useState<UserProfile>({
     username: "",
-    email: "",
     status: "",
-    avatar_url: null,
+    current_xp: "",
+    xp_for_next_status: "",
     telegram_notifications: false,
     telegram_chat_id: "",
   });
-  const maxStatus = 100;
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
-  useEffect(() => {
   const fetchUserData = async () => {
     try {
       const response = await apiClient<UserSettings>("/api/settings/view_settings/", { method: "GET" }, isLoggedIn);
@@ -45,7 +45,7 @@ const ProfileSettings: FunctionComponent = () => {
       console.error("Failed to fetch user data:", error);
     }
   };
-
+  useEffect(() => {
     if (isLoggedIn.value) {
       fetchUserData();
     }
@@ -62,35 +62,29 @@ const ProfileSettings: FunctionComponent = () => {
       console.error("Logout failed:", error);
     }
   };
-
   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 id={classes.avatar}>"Аватар"</div>
-          {userData.avatar_url ? (
-            <img src={userData.avatar_url} alt="User avatar" class="h-full w-full rounded-full object-cover" />
-          ) : (
-            "Аватар"
-          )}
-        </div>
         <div class={classes.header_block__name}>
           <p class="text-4xl font-semibold">{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: `${userData.telegram_chat_id ? 100 : 0}%` }}
+              style={{ width: `${(+userData.current_xp / +userData.xp_for_next_status) * 100}%` }}
             ></div>
           </div>
           <div class="-mt-3 self-end text-sm font-light">
-            {userData.telegram_chat_id ? "100" : "0"}/{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 className="flex flex-row items-center justify-center gap-2">
+            <Button className="flex flex-row items-center justify-center gap-2" onClick={() => setIsSettingsOpen(true)}>
               <Cog8ToothIcon class="size-8" /> Настройки
             </Button>
             <Button

src/pages/profile_tasks.dto.ts

@@ -22,15 +22,9 @@ export interface IApiTask {
   task_type: string;
 }
 
-export interface IApiDay {
-  date: string;
-  name: string;
-  tasks: IApiTask[];
-}
-
 export interface IApiResponse {
   profile: string;
-  days: IApiDay[];
+  tasks: IApiTask[];
   subject_choices: Record<string, string>;
   task_type_choices: Record<string, string>;
 }

src/pages/profile_tasks.tsx

@@ -79,8 +79,7 @@ const ProfileTasks: FunctionComponent = () => {
       setSubjectChoices(response.subject_choices);
       setTaskTypeChoices(response.task_type_choices);
 
-      const convertedTasks: ITask[] = response.days.flatMap((day) =>
+      const convertedTasks: ITask[] = response.tasks.map((apiTask) => ({
-        day.tasks.map((apiTask) => ({
         id: apiTask.id.toString(),
         name: apiTask.title,
         checked: apiTask.isCompleted,
@@ -88,8 +87,7 @@ const ProfileTasks: FunctionComponent = () => {
         description: apiTask.description,
         tags: [apiTask.subject, apiTask.task_type],
         new: false,
-        }))
+      }));
-      );
 
       setTasks(convertedTasks);
     } catch (error) {

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);