From 40ead6f4b3cb7b23d8cdf5d4db2e345277a7be20 Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Sat, 7 Dec 2024 21:52:11 +0300
Subject: [PATCH 01/17] feature: vdom with events

---
 src/modules/vdom/virtual_dom.ts      | 282 +++++++++++++++++++++++++++
 src/modules/vdom/virtual_dom_root.ts | 112 +++++++++++
 src/modules/vdom/virtual_node.ts     |  62 ++++++
 3 files changed, 456 insertions(+)
 create mode 100644 src/modules/vdom/virtual_dom.ts
 create mode 100644 src/modules/vdom/virtual_dom_root.ts
 create mode 100644 src/modules/vdom/virtual_node.ts

diff --git a/src/modules/vdom/virtual_dom.ts b/src/modules/vdom/virtual_dom.ts
new file mode 100644
index 0000000..5155f3e
--- /dev/null
+++ b/src/modules/vdom/virtual_dom.ts
@@ -0,0 +1,282 @@
+import type {
+  ComponentClass,
+  VirtualNode,
+  VirtualNodeSpec,
+  NodeWithVirtualNode,
+} from './virtual_node';
+import { setEventListener, unsetEventListeners, isEventProperty } from './virtual_dom_root';
+
+export function createElement(
+  type: ComponentClass | string,
+  props: ({ [key: string]: unknown } & { key?: string; className?: string; class?: string }) | null,
+  ...children: Array<VirtualNodeSpec | string | boolean>
+): VirtualNodeSpec {
+  let key: string = null;
+  if (typeof props === 'object' && props !== null) {
+    if (props.hasOwnProperty('key')) {
+      key = props.key;
+      delete props.key;
+    }
+    if (props.hasOwnProperty('className')) {
+      props.class = props.className;
+      delete props.className;
+      const allClasses = props.class.split(' ');
+      for (let i = 0; i < allClasses.length; i++) {
+        const className = allClasses[i];
+        // key is autogenerated according to BEM element class
+        if (className.includes('__')) {
+          key = className;
+          break;
+        }
+      }
+    }
+  }
+
+  return {
+    type,
+    props,
+    children: fixChildren(children),
+    key,
+    root: null,
+  };
+}
+
+function fixChildren(
+  children: Array<VirtualNodeSpec | string | Array<VirtualNodeSpec | string> | boolean>,
+): Array<VirtualNodeSpec | string> {
+  return children
+    .reduce((acc: Array<VirtualNodeSpec | string | boolean>, child) => {
+      if (Array.isArray(child)) {
+        return [...acc, ...fixChildren(child)];
+      }
+      return [...acc, child];
+    }, [])
+    .filter((child) => {
+      return typeof child !== 'boolean';
+    });
+}
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace JSX {
+  export interface IntrinsicElements {
+    [elemName: string]: unknown;
+  }
+  export type Element = VirtualNodeSpec;
+  export interface ElementAttributesProperty {
+    props: { [key: string]: unknown };
+  }
+
+  export interface ElementChildrenAttribute {
+    children: Array<VirtualNodeSpec | string>;
+  }
+}
+
+export function createNode(spec: VirtualNodeSpec | string): NodeWithVirtualNode {
+  const isTextNode = typeof spec === 'string';
+  if (isTextNode) {
+    return document.createTextNode(spec);
+  }
+
+  const { type, props, children, key, root } = spec;
+  const newVirtualNode: VirtualNode = {
+    type,
+    props,
+    key,
+    children,
+    parent: null,
+    root,
+  };
+
+  const isPlainHtmlElement = typeof type === 'string';
+  if (isPlainHtmlElement) {
+    const domNode: NodeWithVirtualNode & HTMLElement = document.createElement(type);
+    domNode.virtualNode = newVirtualNode;
+
+    if (props) {
+      Object.entries(props).forEach(([key, value]) => {
+        if (isEventProperty(key)) {
+          setEventListener(newVirtualNode, key, <{ (ev: Event): void }>value);
+        } else {
+          domNode.setAttribute(key, <string>value);
+        }
+      });
+    }
+
+    if (children) {
+      children.forEach((child) => {
+        if (typeof child !== 'string') {
+          child.root = newVirtualNode.root;
+        }
+        const domChild = createNode(child);
+        if (domChild instanceof HTMLElement) {
+          (domChild as NodeWithVirtualNode).virtualNode.parent = newVirtualNode;
+        }
+        domNode.appendChild(domChild);
+        if (domChild.virtualNode && domChild.virtualNode.state) {
+          domChild.virtualNode.state.didMount();
+        }
+      });
+    }
+
+    newVirtualNode.renderedSpec = spec;
+    return domNode;
+  }
+
+  // We got a component
+
+  newVirtualNode.state = new type({ props, children });
+  newVirtualNode.renderedSpec = newVirtualNode.state.render();
+  newVirtualNode.renderedSpec.root = newVirtualNode.root;
+  const domNode = createNode(newVirtualNode.renderedSpec);
+  // domNode.virtualNode is a subtree of elements.
+  // We should bind it to its origin element (its not quite parent)
+  domNode.virtualNode.parent = newVirtualNode;
+  domNode.subtreeVirtualNode = domNode.virtualNode;
+  domNode.virtualNode = newVirtualNode;
+  newVirtualNode.state.domNode = domNode;
+  newVirtualNode.state.didCreate();
+
+  return domNode;
+}
+
+export function updateNode(
+  curHtml: NodeWithVirtualNode,
+  newSpec: VirtualNodeSpec,
+): NodeWithVirtualNode {
+  // We assume that newSpec declares the same component as curNode
+  // If we done right, not the same component will be sieved earlier
+  const curNode = curHtml.virtualNode;
+  const prevSpec = curNode.renderedSpec;
+
+  const isComponentNode = typeof curNode.type !== 'string';
+  if (isComponentNode) {
+    curNode.state.willUpdate(newSpec);
+    const newRender = curNode.state.render();
+    curNode.renderedSpec = newRender;
+  } else {
+    curNode.renderedSpec = newSpec;
+  }
+
+  // curHtml is guarantied to be HTMLElement since text HTML node is handled outside
+  updateSelfProps(<HTMLElement>curHtml, prevSpec.props, curNode.renderedSpec.props);
+  updateChildren(<HTMLElement>curHtml, prevSpec.children, curNode.renderedSpec.children);
+
+  if (isComponentNode) {
+    curNode.state.didUpdate();
+  }
+
+  return curHtml;
+}
+
+function updateChildren(
+  curHtml: HTMLElement & NodeWithVirtualNode,
+  prevChildren: Array<VirtualNodeSpec | string> = [],
+  newChildren: Array<VirtualNodeSpec | string> = [],
+) {
+  const newChildrenCount = newChildren.length;
+
+  for (
+    let oldChildIdx = 0, newChildIdx = 0;
+    newChildIdx < newChildrenCount;
+    newChildIdx++, oldChildIdx++
+  ) {
+    const prevChild = prevChildren[oldChildIdx];
+    const newChild = newChildren[newChildIdx];
+
+    const isPrevChildText = typeof prevChild === 'string';
+    const isNewChildText = typeof newChild === 'string';
+
+    if (isPrevChildText && isNewChildText) {
+      curHtml.childNodes[newChildIdx].textContent = <string>newChild;
+    } else if (
+      !isPrevChildText &&
+      !isNewChildText &&
+      prevChild &&
+      prevChild.type === newChild.type &&
+      prevChild.key === newChild.key
+    ) {
+      updateNode(curHtml.childNodes[newChildIdx], newChild);
+    } else {
+      // Delete old node and add new one
+      if (typeof newChild !== 'string') {
+        newChild.root = curHtml.virtualNode.root;
+      }
+      const newHtmlNode = createNode(newChild);
+      newHtmlNode.virtualNode.parent = curHtml.subtreeVirtualNode || curHtml.virtualNode;
+      curHtml.insertBefore(newHtmlNode, curHtml.childNodes[newChildIdx]);
+      if (newHtmlNode.virtualNode && newHtmlNode.virtualNode.state) {
+        newHtmlNode.virtualNode.state.didMount();
+      }
+      oldChildIdx--;
+    }
+  }
+
+  const curChildrenCount = curHtml.childNodes.length;
+
+  for (let i = newChildrenCount; i < curChildrenCount; i++) {
+    destroyNode(curHtml.childNodes[newChildrenCount]);
+    curHtml.removeChild(curHtml.childNodes[newChildrenCount]);
+  }
+}
+
+function updateSelfProps(
+  curHtml: HTMLElement & NodeWithVirtualNode,
+  prevProps: object | null,
+  newProps: object | null,
+) {
+  const virtualNode = curHtml.subtreeVirtualNode || curHtml.virtualNode;
+  if (virtualNode.eventListeners) {
+    virtualNode.eventListeners.forEach(
+      (listeners: Array<{ (ev: Event): void }>, eventName: string) => {
+        unsetEventListeners(virtualNode, eventName);
+      },
+    );
+    delete virtualNode.eventListeners;
+  }
+
+  if (newProps) {
+    Object.entries(newProps).forEach(([key, value]) => {
+      if (isEventProperty(key)) {
+        setEventListener(virtualNode, key, <{ (ev: Event): void }>value);
+      } else {
+        curHtml.setAttribute(key, <string>value);
+      }
+    });
+  }
+
+  if (prevProps) {
+    Object.keys(prevProps).forEach((key) => {
+      if (!newProps || !newProps.hasOwnProperty(key)) {
+        curHtml.removeAttribute(key);
+      }
+    });
+  }
+}
+
+export function destroyNode(domNode: NodeWithVirtualNode) {
+  const virtualNode = domNode.virtualNode;
+
+  if (virtualNode) {
+    const isComponentNode = typeof virtualNode.type !== 'string';
+
+    if (isComponentNode) {
+      virtualNode.state.willDestroy();
+    }
+
+    if (virtualNode.eventListeners) {
+      virtualNode.eventListeners.forEach((_, eventName: string) => {
+        unsetEventListeners(virtualNode, eventName);
+      });
+      delete virtualNode.eventListeners;
+    }
+
+    if (domNode.subtreeVirtualNode && domNode.subtreeVirtualNode.eventListeners) {
+      domNode.subtreeVirtualNode.eventListeners.forEach((_, eventName: string) => {
+        unsetEventListeners(domNode.subtreeVirtualNode, eventName);
+      });
+      delete domNode.subtreeVirtualNode.eventListeners;
+    }
+
+    domNode.childNodes.forEach((child) => destroyNode(child));
+  }
+}
diff --git a/src/modules/vdom/virtual_dom_root.ts b/src/modules/vdom/virtual_dom_root.ts
new file mode 100644
index 0000000..32a7b5c
--- /dev/null
+++ b/src/modules/vdom/virtual_dom_root.ts
@@ -0,0 +1,112 @@
+import type { Tsx, NodeWithVirtualNode, VirtualNode } from './virtual_node';
+import { createElement, createNode, updateNode, destroyNode } from './virtual_dom';
+
+export function isEventProperty(propertyName: string): boolean {
+  return (
+    propertyName.startsWith('on') &&
+    propertyName[2] !== undefined &&
+    propertyName[2].toUpperCase() === propertyName[2]
+  );
+}
+
+export class VirtualDomRoot {
+  private eventListeners: Map<string, (ev: Event) => void>;
+  private registeredEventsAmount: Map<string, number>;
+  private renderedNode?: NodeWithVirtualNode;
+  constructor(private domNode: HTMLElement & NodeWithVirtualNode) {
+    this.eventListeners = new Map<string, (ev: Event) => void>();
+    this.registeredEventsAmount = new Map<string, number>();
+  }
+
+  update(tsx: Tsx) {
+    const newSpec = createElement(tsx.type, tsx.props, ...tsx.children);
+    newSpec.root = this;
+    updateNode(this.renderedNode, newSpec);
+  }
+
+  render(tsx: Tsx | string) {
+    destroyNode(this.domNode);
+    if (typeof tsx === 'string') {
+      this.domNode.textContent = tsx;
+      return;
+    }
+    const vDomSpec = createElement(tsx.type, tsx.props, ...tsx.children);
+    vDomSpec.root = this;
+    this.renderedNode = createNode(vDomSpec);
+    this.domNode.appendChild(this.renderedNode);
+  }
+
+  registerEvent(eventName: string): void {
+    if (this.eventListeners.has(eventName)) {
+      this.registeredEventsAmount.set(eventName, this.registeredEventsAmount.get(eventName) + 1);
+      return;
+    }
+    const eventHandler = (ev: Event) => {
+      const targetNode = ev.target as NodeWithVirtualNode;
+      if (targetNode.virtualNode === undefined) {
+        return;
+      }
+      const virtualNode = targetNode.virtualNode;
+      bubbleEvent(ev, virtualNode);
+    };
+    this.domNode.addEventListener(eventName, eventHandler);
+    this.eventListeners.set(eventName, eventHandler);
+    this.registeredEventsAmount.set(eventName, 1);
+  }
+
+  unregisterEvent(eventName: string): void {
+    if (!this.eventListeners.has(eventName)) {
+      return;
+    }
+    this.registeredEventsAmount.set(eventName, this.registeredEventsAmount.get(eventName) - 1);
+    if (this.registeredEventsAmount.get(eventName) === 0) {
+      this.registeredEventsAmount.delete(eventName);
+      this.domNode.removeEventListener(eventName, this.eventListeners.get(eventName));
+      this.eventListeners.delete(eventName);
+    }
+  }
+}
+
+function bubbleEvent(event: Event, targetNode: VirtualNode): void {
+  let currentTarget = targetNode;
+  while (currentTarget !== null) {
+    if (
+      currentTarget.eventListeners !== undefined &&
+      currentTarget.eventListeners.has(event.type)
+    ) {
+      currentTarget.eventListeners.get(event.type).forEach((handler) => handler(event));
+    }
+    currentTarget = currentTarget.parent;
+  }
+}
+
+export function setEventListener(
+  virtualNode: VirtualNode,
+  eventKey: string,
+  handler: (ev: Event) => void,
+) {
+  if (!virtualNode.root) {
+    console.log('Unexpected no root');
+    return;
+  }
+  const eventName = eventKey.slice(2).toLowerCase();
+  if (!virtualNode.eventListeners) {
+    virtualNode.eventListeners = new Map<string, Array<{ (ev: Event): void }>>();
+  }
+  if (virtualNode.eventListeners.has(eventName)) {
+    virtualNode.eventListeners.get(eventName).push(handler);
+  } else {
+    virtualNode.eventListeners.set(eventName, [handler]);
+  }
+  virtualNode.root.registerEvent(eventName);
+}
+
+export function unsetEventListeners(virtualNode: VirtualNode, eventName: string) {
+  if (virtualNode.eventListeners.has(eventName)) {
+    const listenersAmount = virtualNode.eventListeners.get(eventName).length;
+    virtualNode.eventListeners.delete(eventName);
+    for (let i = 0; i < listenersAmount; i++) {
+      virtualNode.root.unregisterEvent(eventName);
+    }
+  }
+}
diff --git a/src/modules/vdom/virtual_node.ts b/src/modules/vdom/virtual_node.ts
new file mode 100644
index 0000000..3f963e3
--- /dev/null
+++ b/src/modules/vdom/virtual_node.ts
@@ -0,0 +1,62 @@
+import { VirtualDomRoot } from './virtual_dom_root';
+
+export interface Tsx {
+  type: ComponentClass | string;
+  props: ({ [key: string]: unknown } & { key?: string }) | null;
+  children?: Array<VirtualNodeSpec | string>;
+}
+
+export interface VirtualNodeSpec extends Tsx {
+  key: string | null;
+  root: VirtualDomRoot | null;
+}
+
+export interface VirtualNode {
+  type: ComponentClass | string;
+  props: { [key: string]: unknown } | null;
+  children?: Array<VirtualNodeSpec | string>;
+  key: string | null;
+  state?: Component;
+  renderedSpec?: VirtualNodeSpec;
+  parent: VirtualNode | null;
+  eventListeners?: Map<string, Array<{ (ev: Event): void }>>;
+  root: VirtualDomRoot | null;
+}
+
+export interface NodeWithVirtualNode extends Node {
+  virtualNode?: VirtualNode;
+  subtreeVirtualNode?: VirtualNode;
+}
+
+export interface ComponentOptions {
+  props?: { [key: string]: unknown };
+  children?: Array<VirtualNodeSpec | string>;
+}
+
+export abstract class Component {
+  public props?: { [key: string]: unknown };
+  public children?: Array<VirtualNodeSpec | string>;
+  public domNode?: NodeWithVirtualNode;
+
+  constructor({ props, children }: ComponentOptions) {
+    this.props = props;
+    this.children = children;
+  }
+
+  didCreate() {}
+
+  didMount() {}
+
+  willUpdate({ props, children }: ComponentOptions) {
+    this.props = props;
+    this.children = children;
+  }
+
+  didUpdate() {}
+
+  willDestroy() {}
+
+  abstract render(): VirtualNodeSpec;
+}
+
+export type ComponentClass = { new (options: ComponentOptions): Component };

From 4db764239b4a37624033bb823db28ae09992ef3f Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Mon, 9 Dec 2024 15:36:12 +0300
Subject: [PATCH 02/17] feature: store manager and page-container and started
 responsive design

---
 eslint.config.mjs                             | 13 +++
 index.d.ts                                    | 10 ++
 .../action_creators/user_action_creators.ts   | 99 +++++++++++++++++++
 .../components/dropdown/dropdown.tsx          | 46 +++++++++
 .../components/header/header.scss}            | 12 +--
 src/application/components/header/header.tsx  | 88 +++++++++++++++++
 .../page_container/page-container.scss        | 13 +++
 .../page_container/page_container.tsx         | 17 ++++
 src/application/models/applicant.ts           | 32 ++++++
 src/application/models/employer.ts            | 30 ++++++
 src/application/models/user-type.ts           |  4 +
 .../pages/login_page/login-page.scss          | 21 ++++
 .../pages/login_page/login_page.tsx           | 16 +++
 .../pages/not_found_page/not_found_page.tsx   | 16 +++
 .../pages/vacancies_page/vacancies_page.tsx   | 16 +++
 .../stores/backend_store/backend_store.ts     | 20 ++++
 .../stores/user_store/user_actions.ts         | 26 +++++
 .../stores/user_store/user_store.ts           | 43 ++++++++
 src/index.ts                                  | 44 ---------
 src/index.tsx                                 | 47 +++++++++
 src/modules/store_manager/action.ts           |  4 +
 src/modules/store_manager/store.ts            | 29 ++++++
 src/modules/store_manager/store_manager.ts    | 28 ++++++
 src/modules/vdom/virtual_dom.ts               |  4 +-
 src/modules/vdom/virtual_dom_root.ts          | 19 +++-
 src/modules/vdom/virtual_node.ts              | 13 +--
 src/modules/vdom_router/router.ts             | 94 ++++++++++++++++++
 src/scss/_login.scss                          | 34 +++----
 src/scss/index.scss                           | 56 ++++++++---
 tsconfig.json                                 |  5 +-
 webpack.common.js                             |  5 +-
 31 files changed, 800 insertions(+), 104 deletions(-)
 create mode 100644 index.d.ts
 create mode 100644 src/application/action_creators/user_action_creators.ts
 create mode 100644 src/application/components/dropdown/dropdown.tsx
 rename src/{scss/_header.scss => application/components/header/header.scss} (90%)
 create mode 100644 src/application/components/header/header.tsx
 create mode 100644 src/application/components/page_container/page-container.scss
 create mode 100644 src/application/components/page_container/page_container.tsx
 create mode 100644 src/application/models/applicant.ts
 create mode 100644 src/application/models/employer.ts
 create mode 100644 src/application/models/user-type.ts
 create mode 100644 src/application/pages/login_page/login-page.scss
 create mode 100644 src/application/pages/login_page/login_page.tsx
 create mode 100644 src/application/pages/not_found_page/not_found_page.tsx
 create mode 100644 src/application/pages/vacancies_page/vacancies_page.tsx
 create mode 100644 src/application/stores/backend_store/backend_store.ts
 create mode 100644 src/application/stores/user_store/user_actions.ts
 create mode 100644 src/application/stores/user_store/user_store.ts
 delete mode 100644 src/index.ts
 create mode 100644 src/index.tsx
 create mode 100644 src/modules/store_manager/action.ts
 create mode 100644 src/modules/store_manager/store.ts
 create mode 100644 src/modules/store_manager/store_manager.ts
 create mode 100644 src/modules/vdom_router/router.ts

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 39f9f1a..495a4bb 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -15,8 +15,21 @@ export default tsEslint.config(
     ...pluginJs.configs.recommended,
     files: ['src/**/*.js', 'src/**/*.mjs'],
   },
+  {
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          varsIgnorePattern: 'vdom',
+          args: 'after-used',
+        },
+      ],
+    },
+  },
   tsEslint.configs.recommended,
   eslintConfigPrettier,
+
   {
     files: ['src/**/*.tsx', 'src/**/*.ts'],
   },
diff --git a/index.d.ts b/index.d.ts
new file mode 100644
index 0000000..3cbaaa9
--- /dev/null
+++ b/index.d.ts
@@ -0,0 +1,10 @@
+declare module '*.svg';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.woff';
+declare module '*.woff2';
+declare module '*.eot';
+declare module '*.ttf';
+declare module '*.otf';
diff --git a/src/application/action_creators/user_action_creators.ts b/src/application/action_creators/user_action_creators.ts
new file mode 100644
index 0000000..166a811
--- /dev/null
+++ b/src/application/action_creators/user_action_creators.ts
@@ -0,0 +1,99 @@
+import {
+  UserActions,
+  LoginAction,
+  LogoutAction,
+} from '@application/stores/user_store/user_actions';
+import { userStore } from '@application/stores/user_store/user_store';
+import {
+  login as apiLogin,
+  logout as apiLogout,
+  registerApplicant as apiRegisterApplicant,
+  registerEmployer as apiRegisterEmployer,
+  getEmployer,
+  getApplicant,
+} from '@api/api';
+import type {
+  registerApplicantOptions,
+  registerEmployerOptions,
+} from '@/modules/api/src/handlers/auth/register';
+import { backendStore } from '@application/stores/backend_store/backend_store';
+import { LoginOptions } from '@api/src/handlers/auth/login';
+import { UserType } from '@application/models/user-type';
+import { makeApplicantFromApi } from '../models/applicant';
+import { makeEmployerFromApi } from '../models/employer';
+import type { Applicant as ApiApplicant } from '@api/src/responses/applicant';
+import type { Employer as ApiEmployer } from '@api/src/responses/employer';
+import { assertIfError } from '@/modules/common_utils/asserts/asserts';
+
+async function login({ userType, email, password }: LoginOptions) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  try {
+    const loginResponse = await apiLogin(backendOrigin, {
+      userType,
+      email,
+      password,
+    });
+    const userProfile = await getUser(backendOrigin, userType, loginResponse.id);
+    userStore.dispatch({
+      type: UserActions.Login,
+      payload: {
+        email,
+        userType,
+        userProfile,
+      },
+    } as LoginAction);
+  } catch (err) {
+    assertIfError(err);
+    userStore.dispatch({
+      type: UserActions.Logout,
+    } as LogoutAction);
+  }
+}
+
+async function getUser(backendOrigin: URL, userType: UserType, id: number) {
+  return userType === UserType.Applicant
+    ? makeApplicantFromApi((await getApplicant(backendOrigin, id)) as ApiApplicant)
+    : makeEmployerFromApi((await getEmployer(backendOrigin, id)) as ApiEmployer);
+}
+
+async function logout() {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  try {
+    await apiLogout(backendOrigin);
+    userStore.dispatch({
+      type: UserActions.Logout,
+    } as LogoutAction);
+  } catch {}
+}
+
+async function register(
+  userType: UserType,
+  body: registerApplicantOptions | registerEmployerOptions,
+) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  try {
+    const response =
+      userType === UserType.Applicant
+        ? await apiRegisterApplicant(backendOrigin, body as registerApplicantOptions)
+        : await apiRegisterEmployer(backendOrigin, body as registerEmployerOptions);
+    const userProfile = await getUser(backendOrigin, userType, response.id);
+    userStore.dispatch({
+      type: UserActions.Login,
+      payload: {
+        email: body.email,
+        userType,
+        userProfile,
+      },
+    });
+  } catch {
+    userStore.dispatch({
+      type: UserActions.Logout,
+    });
+  }
+}
+
+export const userActionCreators = {
+  login,
+  logout,
+  register,
+};
diff --git a/src/application/components/dropdown/dropdown.tsx b/src/application/components/dropdown/dropdown.tsx
new file mode 100644
index 0000000..c6faa74
--- /dev/null
+++ b/src/application/components/dropdown/dropdown.tsx
@@ -0,0 +1,46 @@
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { Component } from '@/modules/vdom/virtual_node';
+import { VirtualNodeSpec } from '@/modules/vdom/virtual_node';
+
+export interface DropdownProps {
+  elementClass: string;
+}
+
+export class Dropdown extends Component {
+  private dropdownOpen: boolean = false;
+  constructor({ elementClass }: DropdownProps, children?: Array<VirtualNodeSpec | string>) {
+    super({ elementClass }, children);
+  }
+
+  didMount(): void {
+    window.addEventListener('click', this.onClick);
+  }
+
+  willDestroy(): void {
+    window.removeEventListener('click', this.onClick);
+  }
+
+  private onClick = (ev: Event): void => {
+    if (!this.dropdownOpen) {
+      return;
+    }
+    const clickedInsideDropdown =
+      this.domNode.contains(ev.target as HTMLElement) || Object.is(this.domNode, ev.target);
+    if (!clickedInsideDropdown) {
+      this.toggleDropdown();
+    }
+  };
+
+  toggleDropdown(): void {
+    this.dropdownOpen = !this.dropdownOpen;
+    vdom.updateNode(this.domNode, this.render());
+  }
+
+  render(): VirtualNodeSpec {
+    if (this.dropdownOpen) {
+      return <div className="{this.props.elementClass} dropdown">{...this.children}</div>;
+    } else {
+      return null;
+    }
+  }
+}
diff --git a/src/scss/_header.scss b/src/application/components/header/header.scss
similarity index 90%
rename from src/scss/_header.scss
rename to src/application/components/header/header.scss
index 60e181f..d7727c6 100644
--- a/src/scss/_header.scss
+++ b/src/application/components/header/header.scss
@@ -1,19 +1,9 @@
-.header-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100vw;
-  min-width: 1280px;
-  background-color: var(--color-background-800);
-}
-
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 100px;
-  width: 100%;
-  max-width: 1280px;
+  width: var(--12-col);
   margin: 0 16px;
   background-color: var(--color-background-800);
 
diff --git a/src/application/components/header/header.tsx b/src/application/components/header/header.tsx
new file mode 100644
index 0000000..c1ba3f5
--- /dev/null
+++ b/src/application/components/header/header.tsx
@@ -0,0 +1,88 @@
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { Component, VirtualNodeSpec } from '@/modules/vdom/virtual_node';
+import { userStore } from '@/application/stores/user_store/user_store';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import profileMenuIconSvg from '@static/img/profile-menu-icon.svg';
+import notificationIconSvg from '@static/img/notification-icon-36.svg';
+import menuIconSvg from '@static/img/menu-icon-48.svg';
+import cvMenuIconSvg from '@static/img/cv-menu-icon.svg';
+import vacancyMenuIconSvg from '@static/img/vacancy-menu-icon.svg';
+import logoutMenuIconSvg from '@static/img/logout-menu-icon.svg';
+import { Dropdown } from '@/application/components/dropdown/dropdown';
+import { UserType } from '@/application/models/user-type';
+import './header.scss';
+
+export class Header extends Component {
+  render(): VirtualNodeSpec {
+    const userData = userStore.getData();
+    return (
+      <nav className="header">
+        <a className="header__logo" href={resolveUrl('vacancies', null).toString()}>
+          &mu;Art
+        </a>
+        {userData.isLoggedIn ? (
+          <div className="header__authorized-container">
+            <img className="header__notification-button" src={notificationIconSvg} />
+            <img className="header__user-avatar" src={userData.userProfile.avatar} />
+            <img className="header__menu-open-button" src={menuIconSvg} />
+            <Dropdown elementClass="header__dropdown">
+              <div className="header__user-info">
+                <div className="header__user-name">
+                  {userData.userProfile.firstName + ' ' + userData.userProfile.secondName}
+                </div>
+                <div className="header__user-type">{userData.userType}</div>
+              </div>
+              <div className="header__dropdown-separator"></div>
+              <div className="header__menu menu">
+                <a
+                  className="header__profile-button menu__element"
+                  href={resolveUrl('myProfile', null).toString()}
+                >
+                  <img
+                    className="menu__element-icon"
+                    src={profileMenuIconSvg}
+                    Профиль
+                    пользователя
+                  />
+                </a>
+                {userData.userType === UserType.Applicant ? (
+                  <a
+                    className="header__cv-button menu__element"
+                    href={resolveUrl('myProfile', { from: 'cvList' }).toString()}
+                  >
+                    <img className="menu__element-icon" src={cvMenuIconSvg} Мои резюме />
+                  </a>
+                ) : (
+                  <a
+                    className="header__vacancy-button menu__element"
+                    href={resolveUrl('myProfile', { from: 'vacancyList' }).toString()}
+                  >
+                    <img className="menu__element-icon" src={vacancyMenuIconSvg} Мои вакансии />
+                  </a>
+                )}
+                <a className="header__logout-button menu__element">
+                  <img class="menu__element-icon" src={logoutMenuIconSvg} Выйти />
+                </a>
+              </div>
+            </Dropdown>
+          </div>
+        ) : (
+          <div className="header__not-authorized-container">
+            <a
+              className="header__login-button button button_main-primary"
+              href={resolveUrl('login', null).toString()}
+            >
+              Вход
+            </a>
+            <a
+              className="header__registration-button button button_main-secondary"
+              href={resolveUrl('register', null).toString()}
+            >
+              Регистрация
+            </a>
+          </div>
+        )}
+      </nav>
+    );
+  }
+}
diff --git a/src/application/components/page_container/page-container.scss b/src/application/components/page_container/page-container.scss
new file mode 100644
index 0000000..c6cc610
--- /dev/null
+++ b/src/application/components/page_container/page-container.scss
@@ -0,0 +1,13 @@
+.page-container__header-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: var(--color-background-800);
+}
+
+.page-container {
+  display: block;
+  height: 100vh;
+  width: 100vw;
+}
diff --git a/src/application/components/page_container/page_container.tsx b/src/application/components/page_container/page_container.tsx
new file mode 100644
index 0000000..0ad6c89
--- /dev/null
+++ b/src/application/components/page_container/page_container.tsx
@@ -0,0 +1,17 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { Header } from '@/application/components/header/header';
+import './page-container.scss';
+
+export class PageContainer extends Component {
+  render() {
+    return (
+      <div className="page-container">
+        <div class="page-container__header-container">
+          <Header />
+        </div>
+        {this.children}
+      </div>
+    );
+  }
+}
diff --git a/src/application/models/applicant.ts b/src/application/models/applicant.ts
new file mode 100644
index 0000000..9d6fd8f
--- /dev/null
+++ b/src/application/models/applicant.ts
@@ -0,0 +1,32 @@
+import fallbackUserAvatar from '@static/img/user-icon-80.svg';
+import { Applicant as ApiApplicant } from '@api/src/responses/applicant';
+
+/** Data structure representing Applicant */
+export interface Applicant {
+  id: number;
+  firstName: string;
+  secondName: string;
+  city: string;
+  birthDate: Date;
+  avatar: string;
+  contacts: string;
+  education: string;
+}
+
+/**
+ * Converts an applicant response from the API to an instance of Applicant.
+ * @param apiResponse - Applicant response from the API
+ * @returns an instance of Applicant
+ */
+export function makeApplicantFromApi(apiResponse: ApiApplicant): Applicant {
+  return {
+    id: apiResponse.id,
+    firstName: apiResponse.firstName,
+    secondName: apiResponse.lastName,
+    city: apiResponse.city,
+    birthDate: new Date(apiResponse.birthDate),
+    avatar: apiResponse.avatar || fallbackUserAvatar,
+    contacts: apiResponse.contacts,
+    education: apiResponse.education,
+  };
+}
diff --git a/src/application/models/employer.ts b/src/application/models/employer.ts
new file mode 100644
index 0000000..77d555d
--- /dev/null
+++ b/src/application/models/employer.ts
@@ -0,0 +1,30 @@
+import fallbackUserAvatar from '@static/img/user-icon-80.svg';
+import { Employer as ApiEmployer } from '@api/src/responses/employer';
+
+export interface Employer {
+  id: number;
+  firstName: string;
+  secondName: string;
+  city: string;
+  position: string;
+  companyName: string;
+  companyDescription: string;
+  companyWebsite: string;
+  contacts: string;
+  avatar: string;
+}
+
+export function makeEmployerFromApi(apiResponse: ApiEmployer): Employer {
+  return {
+    id: apiResponse.id,
+    firstName: apiResponse.firstName,
+    secondName: apiResponse.lastName,
+    city: apiResponse.city,
+    position: apiResponse.position,
+    companyName: apiResponse.companyName,
+    companyDescription: apiResponse.companyDescription,
+    companyWebsite: apiResponse.companyWebsite,
+    contacts: apiResponse.contacts,
+    avatar: apiResponse.avatar || fallbackUserAvatar,
+  };
+}
diff --git a/src/application/models/user-type.ts b/src/application/models/user-type.ts
new file mode 100644
index 0000000..e9dbdbb
--- /dev/null
+++ b/src/application/models/user-type.ts
@@ -0,0 +1,4 @@
+export enum UserType {
+  Employer = 'employer',
+  Applicant = 'applicant',
+}
diff --git a/src/application/pages/login_page/login-page.scss b/src/application/pages/login_page/login-page.scss
new file mode 100644
index 0000000..47bb0a1
--- /dev/null
+++ b/src/application/pages/login_page/login-page.scss
@@ -0,0 +1,21 @@
+.login-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+
+  &__login-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: var(--4-col);
+
+    &_theme-dark {
+      background-color: var(--color-background-900);
+    }
+  }
+
+  &__header {
+  }
+}
diff --git a/src/application/pages/login_page/login_page.tsx b/src/application/pages/login_page/login_page.tsx
new file mode 100644
index 0000000..9a0f760
--- /dev/null
+++ b/src/application/pages/login_page/login_page.tsx
@@ -0,0 +1,16 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import './login-page.scss';
+
+export class LoginPage extends Component {
+  render() {
+    return (
+      <div class="login-page">
+        <main className="login-page__login-container login-page__login-container_theme-dark">
+          <h2 className="login-page__header">Вход в аккаунт</h2>
+        </main>
+      </div>
+      // login form here
+    );
+  }
+}
diff --git a/src/application/pages/not_found_page/not_found_page.tsx b/src/application/pages/not_found_page/not_found_page.tsx
new file mode 100644
index 0000000..d2feab8
--- /dev/null
+++ b/src/application/pages/not_found_page/not_found_page.tsx
@@ -0,0 +1,16 @@
+import { Component, VirtualNodeSpec } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+
+export interface NotFoundPageProps {
+  url: URL;
+}
+
+export class NotFoundPage extends Component {
+  constructor({ url }: NotFoundPageProps) {
+    super({ url });
+  }
+
+  render(): VirtualNodeSpec {
+    return <div>{this.props.url.toString()} Not Found (404)</div>;
+  }
+}
diff --git a/src/application/pages/vacancies_page/vacancies_page.tsx b/src/application/pages/vacancies_page/vacancies_page.tsx
new file mode 100644
index 0000000..1777c3c
--- /dev/null
+++ b/src/application/pages/vacancies_page/vacancies_page.tsx
@@ -0,0 +1,16 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { PageContainer } from '@/application/components/page_container/page_container';
+
+export class VacanciesPage extends Component {
+  constructor({ url }: { url: URL }) {
+    super({ url });
+  }
+  render() {
+    return (
+      <PageContainer>
+        <h1>Вакансии</h1>
+      </PageContainer>
+    );
+  }
+}
diff --git a/src/application/stores/backend_store/backend_store.ts b/src/application/stores/backend_store/backend_store.ts
new file mode 100644
index 0000000..a5dc102
--- /dev/null
+++ b/src/application/stores/backend_store/backend_store.ts
@@ -0,0 +1,20 @@
+import { Store } from '@/modules/store_manager/store';
+import { storeManager } from '@/modules/store_manager/store_manager';
+import backendConfig from '@/config/backend.json';
+
+export interface BackendData {
+  backendOrigin: URL;
+}
+
+function backendStoreReducer(curData: BackendData): BackendData {
+  return curData;
+}
+
+export const backendStore = new Store<BackendData>(
+  {
+    backendOrigin: new URL(backendConfig.backendPrefix),
+  },
+  backendStoreReducer,
+);
+
+storeManager.addStore(backendStore);
diff --git a/src/application/stores/user_store/user_actions.ts b/src/application/stores/user_store/user_actions.ts
new file mode 100644
index 0000000..ae2665f
--- /dev/null
+++ b/src/application/stores/user_store/user_actions.ts
@@ -0,0 +1,26 @@
+/** @fileoverview This file contains actions for user store */
+
+import { UserType } from '@/application/models/user-type';
+import { Action } from '@/modules/store_manager/action';
+import { Applicant } from '@application/models/applicant';
+import { Employer } from '@application/models/employer';
+
+export enum UserActions {
+  Logout = 'logout',
+  Login = 'login',
+}
+
+export interface LogoutAction extends Action {
+  type: UserActions.Logout;
+}
+
+export interface LoginActionPayload {
+  email: string;
+  userType: UserType;
+  userProfile: Applicant | Employer;
+}
+
+export interface LoginAction extends Action {
+  type: UserActions.Login;
+  payload: LoginActionPayload;
+}
diff --git a/src/application/stores/user_store/user_store.ts b/src/application/stores/user_store/user_store.ts
new file mode 100644
index 0000000..dbe03da
--- /dev/null
+++ b/src/application/stores/user_store/user_store.ts
@@ -0,0 +1,43 @@
+import { Store } from '@/modules/store_manager/store';
+import { Applicant } from '@application/models/applicant';
+import { Employer } from '@application/models/employer';
+import { storeManager } from '@/modules/store_manager/store_manager';
+import { Action } from '@/modules/store_manager/action';
+import { LoginActionPayload, UserActions } from './user_actions';
+import { UserType } from '@/application/models/user-type';
+
+export interface UserData {
+  isLoggedIn: boolean;
+  userType?: UserType;
+  email?: string;
+  userProfile?: Applicant | Employer;
+}
+
+function userStoreReducer(state: UserData, action: Action) {
+  switch (action.type) {
+    case UserActions.Logout: {
+      return {
+        isLoggedIn: false,
+      } as UserData;
+    }
+
+    case UserActions.Login: {
+      const payload = action.payload as LoginActionPayload;
+      return {
+        isLoggedIn: true,
+        userType: payload.userType,
+        email: payload.email,
+        userProfile: payload.userProfile,
+      };
+    }
+  }
+}
+
+export const userStore = new Store<UserData>(
+  {
+    isLoggedIn: false,
+  },
+  userStoreReducer,
+);
+
+storeManager.addStore(userStore);
diff --git a/src/index.ts b/src/index.ts
deleted file mode 100644
index 9fdadc7..0000000
--- a/src/index.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import router from '@/modules/Router/Router';
-import eventBus from './modules/Events/EventBus';
-import appState from './modules/AppState/AppState';
-import { LoginPage } from './Pages/LoginPage/LoginPage';
-import { RegistrationPage } from './Pages/RegistrationPage/RegistrationPage';
-import { VacanciesPage } from './Pages/VacanciesPage/VacanciesPage';
-import { ProfilePage } from './Pages/ProfilePage/ProfilePage';
-import { VacancyPage } from './Pages/VacancyPage/VacancyPage';
-import { VacancyEditPage } from './Pages/VacancyEditPage/VacancyEditPage';
-import { resolveUrl } from './modules/UrlUtils/UrlUtils';
-import { REDIRECT_TO, GO_TO } from './modules/Events/Events';
-import { CvPage } from './Pages/CvPage/CvPage';
-import { CvEditPage } from './Pages/CvEditPage/CvEditPage';
-import { NotificationBox } from './Components/NotificationBox/NotificationBox';
-import './scss/index.scss';
-
-// eslint-disable-next-line
-const notificationBox = new NotificationBox({
-  existingElement: document.querySelector('.notification-box'),
-});
-
-router.addRoute(resolveUrl('vacancies', null).pathname, VacanciesPage);
-router.addRoute(resolveUrl('login', null).pathname, LoginPage);
-router.addRoute(resolveUrl('register', null).pathname, RegistrationPage);
-router.addRoute(resolveUrl('myProfile', null).pathname, ProfilePage);
-router.addRoute(resolveUrl('profile', null).pathname, ProfilePage);
-router.addRoute(resolveUrl('vacancy', null).pathname, VacancyPage);
-router.addRoute(resolveUrl('createVacancy', null).pathname, VacancyEditPage);
-router.addRoute(resolveUrl('editVacancy', null).pathname, VacancyEditPage);
-router.addRoute(resolveUrl('cv', null).pathname, CvPage);
-router.addRoute(resolveUrl('createCv', null).pathname, CvEditPage);
-router.addRoute(resolveUrl('editCv', null).pathname, CvEditPage);
-
-eventBus.on(REDIRECT_TO, ({ redirectUrl }: { redirectUrl: URL }) => {
-  router.navigate(redirectUrl, true, true);
-});
-
-eventBus.on(GO_TO, ({ redirectUrl }: { redirectUrl: URL }) => {
-  router.navigate(redirectUrl, false, true);
-});
-
-appState.userSession.checkAuthorization().finally(() => {
-  router.start();
-});
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..2c5870d
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,47 @@
+import { Router } from '@/modules/vdom_router/router';
+import eventBus from './modules/Events/EventBus';
+import appState from './modules/AppState/AppState';
+import { LoginPage } from '@/application/pages/login_page/login_page';
+// import { RegistrationPage } from './Pages/RegistrationPage/RegistrationPage';
+// import { ProfilePage } from './Pages/ProfilePage/ProfilePage';
+// import { VacancyPage } from './Pages/VacancyPage/VacancyPage';
+// import { VacancyEditPage } from './Pages/VacancyEditPage/VacancyEditPage';
+import { resolveUrl } from './modules/UrlUtils/UrlUtils';
+import { REDIRECT_TO, GO_TO } from './modules/Events/Events';
+// import { CvPage } from './Pages/CvPage/CvPage';
+// import { CvEditPage } from './Pages/CvEditPage/CvEditPage';
+import { NotificationBox } from './Components/NotificationBox/NotificationBox';
+import { VacanciesPage } from '@/application/pages/vacancies_page/vacancies_page';
+import './scss/index.scss';
+
+// eslint-disable-next-line
+const notificationBox = new NotificationBox({
+  existingElement: document.querySelector('.notification-box'),
+});
+
+// router.addRoute(resolveUrl('register', null).pathname, RegistrationPage);
+// router.addRoute(resolveUrl('myProfile', null).pathname, ProfilePage);
+// router.addRoute(resolveUrl('profile', null).pathname, ProfilePage);
+// router.addRoute(resolveUrl('vacancy', null).pathname, VacancyPage);
+// router.addRoute(resolveUrl('createVacancy', null).pathname, VacancyEditPage);
+// router.addRoute(resolveUrl('editVacancy', null).pathname, VacancyEditPage);
+// router.addRoute(resolveUrl('cv', null).pathname, CvPage);
+// router.addRoute(resolveUrl('createCv', null).pathname, CvEditPage);
+// router.addRoute(resolveUrl('editCv', null).pathname, CvEditPage);
+
+const router = new Router(document.getElementById('app'));
+
+router.addRoute(resolveUrl('vacancies', null).pathname, VacanciesPage);
+router.addRoute(resolveUrl('login', null).pathname, LoginPage);
+
+eventBus.on(REDIRECT_TO, ({ redirectUrl }: { redirectUrl: URL }) => {
+  router.navigate(redirectUrl, true, true);
+});
+
+eventBus.on(GO_TO, ({ redirectUrl }: { redirectUrl: URL }) => {
+  router.navigate(redirectUrl, false, true);
+});
+
+appState.userSession.checkAuthorization().finally(() => {
+  router.start();
+});
diff --git a/src/modules/store_manager/action.ts b/src/modules/store_manager/action.ts
new file mode 100644
index 0000000..e08e494
--- /dev/null
+++ b/src/modules/store_manager/action.ts
@@ -0,0 +1,4 @@
+export interface Action {
+  type: string;
+  payload?: unknown;
+}
diff --git a/src/modules/store_manager/store.ts b/src/modules/store_manager/store.ts
new file mode 100644
index 0000000..aaa988e
--- /dev/null
+++ b/src/modules/store_manager/store.ts
@@ -0,0 +1,29 @@
+import { Action } from './action';
+
+export class Store<DataType> {
+  private data: DataType;
+  private reducer: (curData: DataType, action?: Action) => DataType;
+  private updateCallbacks: Array<() => void> = [];
+
+  constructor(initialData: DataType, reducer: (curData: DataType, action?: Action) => DataType) {
+    this.data = initialData;
+    this.reducer = reducer;
+  }
+
+  dispatch(action: Action) {
+    this.data = this.reducer(this.data, action);
+    this.updateCallbacks.forEach((callback) => callback());
+  }
+
+  addCallback(callback: () => void) {
+    this.updateCallbacks.push(callback);
+  }
+
+  removeCallback(callback: () => void) {
+    this.updateCallbacks = this.updateCallbacks.filter((cb) => cb !== callback);
+  }
+
+  getData() {
+    return this.data;
+  }
+}
diff --git a/src/modules/store_manager/store_manager.ts b/src/modules/store_manager/store_manager.ts
new file mode 100644
index 0000000..6e74adf
--- /dev/null
+++ b/src/modules/store_manager/store_manager.ts
@@ -0,0 +1,28 @@
+import { Store } from './store';
+import { Action } from './action';
+import { VirtualDomRoot } from '@/modules/vdom/virtual_dom_root';
+import * as vdom from '@/modules/vdom/virtual_dom';
+
+class StoreManager {
+  private stores: Array<Store<unknown>> = [];
+  // Since there can be more than one Virtual DOM in page,
+  // it is an Array
+  private vdomRoots: Array<VirtualDomRoot> = [];
+
+  addStore(store: Store<unknown>) {
+    this.stores.push(store);
+  }
+
+  bindVirtualDom(vdomRoot: VirtualDomRoot) {
+    this.vdomRoots.push(vdomRoot);
+  }
+
+  dispatch(action: Action) {
+    // All views should subscribe to each store they want to use,
+    // But dom update will be performed here
+    this.stores.forEach((store) => store.dispatch(action));
+    this.vdomRoots.forEach((vdomRoot: VirtualDomRoot) => vdomRoot.update());
+  }
+}
+
+export const storeManager = new StoreManager();
diff --git a/src/modules/vdom/virtual_dom.ts b/src/modules/vdom/virtual_dom.ts
index 5155f3e..c695c63 100644
--- a/src/modules/vdom/virtual_dom.ts
+++ b/src/modules/vdom/virtual_dom.ts
@@ -124,7 +124,7 @@ export function createNode(spec: VirtualNodeSpec | string): NodeWithVirtualNode
 
   // We got a component
 
-  newVirtualNode.state = new type({ props, children });
+  newVirtualNode.state = new type(props, children);
   newVirtualNode.renderedSpec = newVirtualNode.state.render();
   newVirtualNode.renderedSpec.root = newVirtualNode.root;
   const domNode = createNode(newVirtualNode.renderedSpec);
@@ -150,7 +150,7 @@ export function updateNode(
 
   const isComponentNode = typeof curNode.type !== 'string';
   if (isComponentNode) {
-    curNode.state.willUpdate(newSpec);
+    curNode.state.willUpdate(newSpec.props, newSpec.children);
     const newRender = curNode.state.render();
     curNode.renderedSpec = newRender;
   } else {
diff --git a/src/modules/vdom/virtual_dom_root.ts b/src/modules/vdom/virtual_dom_root.ts
index 32a7b5c..5139291 100644
--- a/src/modules/vdom/virtual_dom_root.ts
+++ b/src/modules/vdom/virtual_dom_root.ts
@@ -1,4 +1,4 @@
-import type { Tsx, NodeWithVirtualNode, VirtualNode } from './virtual_node';
+import type { Tsx, NodeWithVirtualNode, VirtualNode, VirtualNodeSpec } from './virtual_node';
 import { createElement, createNode, updateNode, destroyNode } from './virtual_dom';
 
 export function isEventProperty(propertyName: string): boolean {
@@ -13,25 +13,38 @@ export class VirtualDomRoot {
   private eventListeners: Map<string, (ev: Event) => void>;
   private registeredEventsAmount: Map<string, number>;
   private renderedNode?: NodeWithVirtualNode;
+  private previousSpec?: VirtualNodeSpec;
   constructor(private domNode: HTMLElement & NodeWithVirtualNode) {
     this.eventListeners = new Map<string, (ev: Event) => void>();
     this.registeredEventsAmount = new Map<string, number>();
   }
 
-  update(tsx: Tsx) {
+  update(tsx?: Tsx) {
+    if (tsx === undefined) {
+      if (this.previousSpec === undefined) {
+        return;
+      }
+      updateNode(this.renderedNode, this.previousSpec);
+      return;
+    }
     const newSpec = createElement(tsx.type, tsx.props, ...tsx.children);
     newSpec.root = this;
+    this.previousSpec = newSpec;
     updateNode(this.renderedNode, newSpec);
   }
 
   render(tsx: Tsx | string) {
-    destroyNode(this.domNode);
+    this.domNode.childNodes.forEach((child) => {
+      destroyNode(child);
+      this.domNode.removeChild(child);
+    });
     if (typeof tsx === 'string') {
       this.domNode.textContent = tsx;
       return;
     }
     const vDomSpec = createElement(tsx.type, tsx.props, ...tsx.children);
     vDomSpec.root = this;
+    this.previousSpec = vDomSpec;
     this.renderedNode = createNode(vDomSpec);
     this.domNode.appendChild(this.renderedNode);
   }
diff --git a/src/modules/vdom/virtual_node.ts b/src/modules/vdom/virtual_node.ts
index 3f963e3..2898cde 100644
--- a/src/modules/vdom/virtual_node.ts
+++ b/src/modules/vdom/virtual_node.ts
@@ -28,17 +28,12 @@ export interface NodeWithVirtualNode extends Node {
   subtreeVirtualNode?: VirtualNode;
 }
 
-export interface ComponentOptions {
-  props?: { [key: string]: unknown };
-  children?: Array<VirtualNodeSpec | string>;
-}
-
 export abstract class Component {
   public props?: { [key: string]: unknown };
   public children?: Array<VirtualNodeSpec | string>;
   public domNode?: NodeWithVirtualNode;
 
-  constructor({ props, children }: ComponentOptions) {
+  constructor(props?: { [key: string]: unknown }, children?: Array<VirtualNodeSpec | string>) {
     this.props = props;
     this.children = children;
   }
@@ -47,7 +42,7 @@ export abstract class Component {
 
   didMount() {}
 
-  willUpdate({ props, children }: ComponentOptions) {
+  willUpdate(props?: { [key: string]: unknown }, children?: Array<VirtualNodeSpec | string>) {
     this.props = props;
     this.children = children;
   }
@@ -59,4 +54,6 @@ export abstract class Component {
   abstract render(): VirtualNodeSpec;
 }
 
-export type ComponentClass = { new (options: ComponentOptions): Component };
+export type ComponentClass = {
+  new (props?: { [key: string]: unknown }, children?: Array<VirtualNodeSpec | string>): Component;
+};
diff --git a/src/modules/vdom_router/router.ts b/src/modules/vdom_router/router.ts
new file mode 100644
index 0000000..3e126c4
--- /dev/null
+++ b/src/modules/vdom_router/router.ts
@@ -0,0 +1,94 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import { NotFoundPage } from '@/application/pages/not_found_page/not_found_page';
+import { VirtualDomRoot } from '@/modules/vdom/virtual_dom_root';
+
+export interface PageClass {
+  new (props: { url: URL }): Component;
+}
+
+export class ForbiddenPage extends Error {
+  public redirectUrl: URL;
+  constructor(redirectUrl: URL) {
+    super('forbidden page');
+    this.redirectUrl = redirectUrl;
+    Object.setPrototypeOf(this, ForbiddenPage.prototype);
+  }
+}
+
+export class NotFoundError extends Error {
+  constructor() {
+    super('resource not found');
+    Object.setPrototypeOf(this, NotFoundError.prototype);
+  }
+}
+
+export class Router {
+  private routes: Map<string, PageClass>;
+  private currentPage?: Component;
+  private vdomRoot: VirtualDomRoot;
+
+  constructor(rootNode: HTMLElement) {
+    this.routes = new Map<string, PageClass>();
+    this.vdomRoot = new VirtualDomRoot(rootNode);
+  }
+
+  addRoute(pathname: string, pageClass: PageClass) {
+    this.routes.set(pathname, pageClass);
+  }
+
+  removeRoute(pathname: string): boolean {
+    return this.routes.delete(pathname);
+  }
+
+  navigate(url: URL, redirection: boolean = false, modifyHistory: boolean = true) {
+    try {
+      if (modifyHistory) {
+        if (!redirection) {
+          history.pushState(null, '', url);
+        } else {
+          history.replaceState(null, '', url);
+        }
+      }
+      const newPage = this.routes.has(url.pathname) ? this.routes.get(url.pathname) : NotFoundPage;
+      this.replacePage(newPage, url);
+    } catch (err) {
+      if (err instanceof ForbiddenPage) {
+        this.navigate(err.redirectUrl, true, true);
+        return;
+      }
+      if (err instanceof NotFoundError) {
+        this.replacePage(NotFoundPage, url);
+        return;
+      }
+      throw err;
+    }
+  }
+
+  private replacePage(newPageClass: PageClass, newPageUrl: URL) {
+    this.vdomRoot.render({ type: newPageClass, props: { url: newPageUrl }, children: [] });
+  }
+
+  start() {
+    window.addEventListener('popstate', (ev) => {
+      ev.preventDefault();
+      this.navigate(new URL(location.href), false, false);
+    });
+
+    window.addEventListener('click', (ev) => {
+      let currentElement = ev.target as HTMLElement;
+      while (currentElement) {
+        if (
+          currentElement instanceof HTMLAnchorElement &&
+          currentElement.origin === location.origin
+        ) {
+          ev.preventDefault();
+          this.navigate(new URL(currentElement.href));
+          break;
+        }
+        currentElement = currentElement.parentElement;
+      }
+    });
+
+    this.navigate(new URL(location.href), false, false);
+  }
+}
diff --git a/src/scss/_login.scss b/src/scss/_login.scss
index 9d2b919..4dd7050 100644
--- a/src/scss/_login.scss
+++ b/src/scss/_login.scss
@@ -1,20 +1,20 @@
-.login-page {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100vw;
-  height: 100vh;
-  &__login-container {
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    width: 100%;
-    max-width: 400px;
-    box-sizing: border-box;
-    background-color: var(--color-background-900);
-  }
-}
+// .login-page {
+//   display: flex;
+//   flex-direction: column;
+//   justify-content: center;
+//   align-items: center;
+//   width: 100vw;
+//   height: 100vh;
+//   &__login-container {
+//     padding: 20px;
+//     border-radius: 10px;
+//     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+//     width: 100%;
+//     max-width: 400px;
+//     box-sizing: border-box;
+//     background-color: var(--color-background-900);
+//   }
+// }
 
 .login-container {
   display: flex;
diff --git a/src/scss/index.scss b/src/scss/index.scss
index f0ae7bd..cfe8722 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -1,7 +1,6 @@
 @use 'fonts';
 @use 'button';
 @use 'vacancies';
-@use 'header';
 @use 'login';
 @use 'registration';
 @use 'forms';
@@ -10,15 +9,12 @@
 @use 'cv';
 @use 'common';
 
-:root {
-  --grey-very-dark: #1b1b1b;
-  --grey-dark: #313131;
-  --grey-medium: #3d3d3d;
-  --grey-light: #555555;
-  --primary-light: #53dcd4;
-  --secondary-light: #d0bcff;
-  --text-primary: #cac4d0;
+$container-width: 1248px;
+$col-width: 82px;
+$col-margin: 24px;
+$mobile-breakpoint: 768px;
 
+:root {
   --color-background-1000: #102a43;
   --color-background-900: #243b53;
   --color-background-800: #334e68;
@@ -77,16 +73,44 @@
 
   --text-weight-regular: 400;
   --text-weight-bold: 600;
+
+  --container-width: #{$container-width};
+  --col-width: #{$col-width};
+  --col-margin: #{$col-margin};
+
+  --2-col: #{calc(2 * $col-width + $col-margin)};
+  --3-col: #{calc(3 * $col-width + 2 * $col-margin)};
+  --4-col: #{calc(4 * $col-width + 3 * $col-margin)};
+  --5-col: #{calc(5 * $col-width + 4 * $col-margin)};
+  --6-col: #{calc(6 * $col-width + 5 * $col-margin)};
+  --7-col: #{calc(7 * $col-width + 6 * $col-margin)};
+  --8-col: #{calc(8 * $col-width + 7 * $col-margin)};
+  --9-col: #{calc(9 * $col-width + 8 * $col-margin)};
+  --10-col: #{calc(10 * $col-width + 9 * $col-margin)};
+  --11-col: #{calc(11 * $col-width + 10 * $col-margin)};
+  --12-col: #{calc(12 * $col-width + 11 * $col-margin)};
+}
+
+@media screen and (max-width: $mobile-breakpoint) {
+  :root {
+    --container-width: 100%;
+    --col-width: 100%;
+    --col-margin: 0;
+    --2-col: 100%;
+    --3-col: 100%;
+    --4-col: 100%;
+    --5-col: 100%;
+    --6-col: 100%;
+    --7-col: 100%;
+    --8-col: 100%;
+    --9-col: 100%;
+    --10-col: 100%;
+    --11-col: 100%;
+    --12-col: 100%;
+  }
 }
 
 body {
   margin: 0;
   padding: 0;
-  background-color: var(--color-background-1000);
-}
-
-.page-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
 }
diff --git a/tsconfig.json b/tsconfig.json
index d6f381c..0ad112e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,11 +10,14 @@
     "esModuleInterop": true,
     "moduleResolution": "bundler",
     "baseUrl": "./",
+    "jsx": "react",
+    "jsxFactory": "vdom.createElement",
     "paths": {
       "@/*": ["src/*"],
       "@static/*": ["src/public/*"],
       "@api/*": ["src/modules/api/*"],
-      "@common_utils/*": ["src/modules/common_utils/*"]
+      "@common_utils/*": ["src/modules/common_utils/*"],
+      "@application/*": ["src/application/*"]
     }
   }
 }
diff --git a/webpack.common.js b/webpack.common.js
index 14694ea..4330492 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -90,11 +90,11 @@ module.exports = {
     ],
   },
   entry: {
-    app: './src/index.ts',
+    app: './src/index.tsx',
   },
   plugins: [
     new HtmlWebpackPlugin({
-      title: 'Art',
+      title: 'uArt',
       template: path.resolve(__dirname, './src/index.hbs'),
     }),
   ],
@@ -104,6 +104,7 @@ module.exports = {
       '@static': path.resolve(__dirname, 'src/public'),
       '@api': path.resolve(__dirname, 'src/modules/api'),
       '@common_utils': path.resolve(__dirname, 'src/modules/common_utils'),
+      '@application': path.resolve(__dirname, 'src/application'),
     },
     extensions: ['.tsx', '.ts', '.js'],
   },

From 6ac43c95fd079b27603e7e84b77b80058861373d Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Tue, 10 Dec 2024 22:29:25 +0300
Subject: [PATCH 03/17] feature: working login without redirect

---
 .../FormInputs/EmailInput/EmailInput.js       |  16 --
 .../EmailInput/EmailInputController.js        |   3 -
 .../FormInputs/EmailInput/EmailInputModel.js  |   9 --
 .../FormInputs/EmailInput/EmailInputView.js   |   3 -
 .../FormInputs/PasswordInput/PasswordInput.js |  16 --
 .../PasswordInput/PasswordInputController.js  |   3 -
 .../PasswordInput/PasswordInputModel.js       |  12 --
 .../PasswordInput/PasswordInputView.js        |   3 -
 src/Pages/LoginPage/LoginPageController.js    |   3 -
 src/Pages/LoginPage/LoginPageModel.js         |   3 -
 src/Pages/LoginPage/LoginPageView.js          |  16 --
 src/Pages/LoginPage/login-page.hbs            |   8 -
 src/Pages/NotFoundPage/NotFoundPage.js        |  24 ---
 .../NotFoundPage/NotFoundPageController.js    |   3 -
 src/Pages/NotFoundPage/NotFoundPageModel.js   |   3 -
 src/Pages/NotFoundPage/NotFoundPageView.js    |   8 -
 src/Pages/NotFoundPage/not-found-page.hbs     |   1 -
 .../action_creators/user_action_creators.ts   |  40 ++++-
 src/application/components/input/input.scss   |  40 +++++
 src/application/components/input/input.tsx    |  72 +++++++++
 .../page_container/page-container.scss        |   5 +-
 .../user_type_select/user_type_select.scss    |  50 +++++++
 .../user_type_select/user_type_select.tsx     |  60 ++++++++
 src/application/models/form_value.ts          |   6 +
 .../pages/login_page/login-page.scss          |  49 +++++--
 .../pages/login_page/login_page.tsx           |  72 ++++++++-
 .../stores/user_store/user_actions.ts         |   7 +
 .../stores/user_store/user_store.ts           |  18 +++
 src/application/validators/validators.ts      |  28 ++++
 src/index.tsx                                 |   9 +-
 src/modules/FormUtils/FormUtils.js            |   8 -
 src/modules/Router/Router.ts                  | 138 ------------------
 src/modules/vdom/virtual_dom.ts               |  20 ++-
 src/modules/vdom/virtual_dom_root.ts          |   3 +
 src/modules/vdom_router/router.ts             |   5 +-
 src/scss/_common.scss                         |  12 --
 src/scss/_forms.scss                          |  92 ------------
 src/scss/_login.scss                          |  59 --------
 src/scss/index.scss                           |  69 +++++----
 tsconfig.json                                 |   1 +
 webpack.dev.js                                |   1 +
 41 files changed, 496 insertions(+), 502 deletions(-)
 delete mode 100644 src/Components/FormInputs/EmailInput/EmailInput.js
 delete mode 100644 src/Components/FormInputs/EmailInput/EmailInputController.js
 delete mode 100644 src/Components/FormInputs/EmailInput/EmailInputModel.js
 delete mode 100644 src/Components/FormInputs/EmailInput/EmailInputView.js
 delete mode 100644 src/Components/FormInputs/PasswordInput/PasswordInput.js
 delete mode 100644 src/Components/FormInputs/PasswordInput/PasswordInputController.js
 delete mode 100644 src/Components/FormInputs/PasswordInput/PasswordInputModel.js
 delete mode 100644 src/Components/FormInputs/PasswordInput/PasswordInputView.js
 delete mode 100644 src/Pages/LoginPage/LoginPageController.js
 delete mode 100644 src/Pages/LoginPage/LoginPageModel.js
 delete mode 100644 src/Pages/LoginPage/LoginPageView.js
 delete mode 100644 src/Pages/LoginPage/login-page.hbs
 delete mode 100644 src/Pages/NotFoundPage/NotFoundPage.js
 delete mode 100644 src/Pages/NotFoundPage/NotFoundPageController.js
 delete mode 100644 src/Pages/NotFoundPage/NotFoundPageModel.js
 delete mode 100644 src/Pages/NotFoundPage/NotFoundPageView.js
 delete mode 100644 src/Pages/NotFoundPage/not-found-page.hbs
 create mode 100644 src/application/components/input/input.scss
 create mode 100644 src/application/components/input/input.tsx
 create mode 100644 src/application/components/user_type_select/user_type_select.scss
 create mode 100644 src/application/components/user_type_select/user_type_select.tsx
 create mode 100644 src/application/models/form_value.ts
 create mode 100644 src/application/validators/validators.ts
 delete mode 100644 src/modules/FormUtils/FormUtils.js
 delete mode 100644 src/modules/Router/Router.ts

diff --git a/src/Components/FormInputs/EmailInput/EmailInput.js b/src/Components/FormInputs/EmailInput/EmailInput.js
deleted file mode 100644
index 612a30b..0000000
--- a/src/Components/FormInputs/EmailInput/EmailInput.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { EmailInputController } from './EmailInputController';
-import { EmailInputView } from './EmailInputView';
-import { EmailInputModel } from './EmailInputModel';
-
-export class EmailInput extends Component {
-  constructor({ existingElement, selfValidate = false }) {
-    super({
-      modelClass: EmailInputModel,
-      viewClass: EmailInputView,
-      existingElement,
-      controllerClass: EmailInputController,
-      controllerParams: { selfValidate },
-    });
-  }
-}
diff --git a/src/Components/FormInputs/EmailInput/EmailInputController.js b/src/Components/FormInputs/EmailInput/EmailInputController.js
deleted file mode 100644
index a52336e..0000000
--- a/src/Components/FormInputs/EmailInput/EmailInputController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ValidatedInputController } from '@/Components/FormInputs/ValidatedInput/ValidatedInputController';
-
-export const EmailInputController = ValidatedInputController;
diff --git a/src/Components/FormInputs/EmailInput/EmailInputModel.js b/src/Components/FormInputs/EmailInput/EmailInputModel.js
deleted file mode 100644
index 3fc44d3..0000000
--- a/src/Components/FormInputs/EmailInput/EmailInputModel.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ValidatedInputModel } from '@/Components/FormInputs/ValidatedInput/ValidatedInputModel';
-
-export class EmailInputModel extends ValidatedInputModel {
-  validate(email) {
-    email = email.trim();
-    const matches = email.match(/^(".*"|[^@]*)@[^@]*$/);
-    return matches ? '' : 'Введен некорректный адрес';
-  }
-}
diff --git a/src/Components/FormInputs/EmailInput/EmailInputView.js b/src/Components/FormInputs/EmailInput/EmailInputView.js
deleted file mode 100644
index f29a155..0000000
--- a/src/Components/FormInputs/EmailInput/EmailInputView.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ValidatedInputView } from '@/Components/FormInputs/ValidatedInput/ValidatedInputView';
-
-export const EmailInputView = ValidatedInputView;
diff --git a/src/Components/FormInputs/PasswordInput/PasswordInput.js b/src/Components/FormInputs/PasswordInput/PasswordInput.js
deleted file mode 100644
index c93f374..0000000
--- a/src/Components/FormInputs/PasswordInput/PasswordInput.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { PasswordInputController } from './PasswordInputController';
-import { PasswordInputView } from './PasswordInputView';
-import { PasswordInputModel } from './PasswordInputModel';
-
-export class PasswordInput extends Component {
-  constructor({ existingElement, selfValidate = false }) {
-    super({
-      modelClass: PasswordInputModel,
-      viewClass: PasswordInputView,
-      existingElement,
-      controllerClass: PasswordInputController,
-      controllerParams: { selfValidate },
-    });
-  }
-}
diff --git a/src/Components/FormInputs/PasswordInput/PasswordInputController.js b/src/Components/FormInputs/PasswordInput/PasswordInputController.js
deleted file mode 100644
index 85f0e18..0000000
--- a/src/Components/FormInputs/PasswordInput/PasswordInputController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ValidatedInputController } from '@/Components/FormInputs/ValidatedInput/ValidatedInputController';
-
-export const PasswordInputController = ValidatedInputController;
diff --git a/src/Components/FormInputs/PasswordInput/PasswordInputModel.js b/src/Components/FormInputs/PasswordInput/PasswordInputModel.js
deleted file mode 100644
index c435f73..0000000
--- a/src/Components/FormInputs/PasswordInput/PasswordInputModel.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ValidatedInputModel } from '@/Components/FormInputs/ValidatedInput/ValidatedInputModel';
-
-export class PasswordInputModel extends ValidatedInputModel {
-  #MIN_PASSWORD_LEN = 8;
-
-  validate(password) {
-    if (password.length < this.#MIN_PASSWORD_LEN) {
-      return 'Введите пароль длиной хотя бы 8 символов';
-    }
-    return '';
-  }
-}
diff --git a/src/Components/FormInputs/PasswordInput/PasswordInputView.js b/src/Components/FormInputs/PasswordInput/PasswordInputView.js
deleted file mode 100644
index f44ef61..0000000
--- a/src/Components/FormInputs/PasswordInput/PasswordInputView.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ValidatedInputView } from '@/Components/FormInputs/ValidatedInput/ValidatedInputView';
-
-export const PasswordInputView = ValidatedInputView;
diff --git a/src/Pages/LoginPage/LoginPageController.js b/src/Pages/LoginPage/LoginPageController.js
deleted file mode 100644
index 0f96ebd..0000000
--- a/src/Pages/LoginPage/LoginPageController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PageController } from '@/modules/Page/Page';
-
-export const LoginPageController = PageController;
diff --git a/src/Pages/LoginPage/LoginPageModel.js b/src/Pages/LoginPage/LoginPageModel.js
deleted file mode 100644
index 56a44bb..0000000
--- a/src/Pages/LoginPage/LoginPageModel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PageModel } from '@/modules/Page/Page';
-
-export const LoginPageModel = PageModel;
diff --git a/src/Pages/LoginPage/LoginPageView.js b/src/Pages/LoginPage/LoginPageView.js
deleted file mode 100644
index 0d720b0..0000000
--- a/src/Pages/LoginPage/LoginPageView.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { PageView } from '@/modules/Page/Page';
-import LoginPageHbs from './login-page.hbs';
-
-export class LoginPageView extends PageView {
-  #loginForm;
-  constructor() {
-    super({
-      template: LoginPageHbs,
-    });
-    this.#loginForm = this._html.querySelector('.login-container__login-form');
-  }
-
-  get loginForm() {
-    return this.#loginForm;
-  }
-}
diff --git a/src/Pages/LoginPage/login-page.hbs b/src/Pages/LoginPage/login-page.hbs
deleted file mode 100644
index 519400b..0000000
--- a/src/Pages/LoginPage/login-page.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-<main class="login-page">
-  <section class="login-container login-page__login-container">
-    <header class="login-container__header">
-      <h2 class="login-container__header-text text_roboto-light">Вход в аккаунт</h2>
-    </header>  
-    {{> ../../Components/LoginForm/login-form.hbs elementClass="login-container__login-form"}}
-  </section>
-</main>
diff --git a/src/Pages/NotFoundPage/NotFoundPage.js b/src/Pages/NotFoundPage/NotFoundPage.js
deleted file mode 100644
index 1536cf7..0000000
--- a/src/Pages/NotFoundPage/NotFoundPage.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Page } from '@/modules/Page/Page';
-import { NotFoundPageController } from './NotFoundPageController';
-import { NotFoundPageModel } from './NotFoundPageModel';
-import { NotFoundPageView } from './NotFoundPageView';
-
-/** A class representing 404 not found page.
- * @extends Page
- */
-export class NotFoundPage extends Page {
-  /**
-   * Create an instance of 404 Page.
-   * @param {URL} url --- a URL object containing the link with which this page were navigated
-   * @throws {TypeError} url is not an instance of URL
-   */
-  constructor({ url }) {
-    super({
-      url,
-      modelClass: NotFoundPageModel,
-      viewClass: NotFoundPageView,
-      controllerClass: NotFoundPageController,
-      viewParams: { url },
-    });
-  }
-}
diff --git a/src/Pages/NotFoundPage/NotFoundPageController.js b/src/Pages/NotFoundPage/NotFoundPageController.js
deleted file mode 100644
index ad728e1..0000000
--- a/src/Pages/NotFoundPage/NotFoundPageController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PageController } from '@/modules/Page/Page';
-
-export const NotFoundPageController = PageController;
diff --git a/src/Pages/NotFoundPage/NotFoundPageModel.js b/src/Pages/NotFoundPage/NotFoundPageModel.js
deleted file mode 100644
index 4df9d34..0000000
--- a/src/Pages/NotFoundPage/NotFoundPageModel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PageModel } from '@/modules/Page/Page';
-
-export const NotFoundPageModel = PageModel;
diff --git a/src/Pages/NotFoundPage/NotFoundPageView.js b/src/Pages/NotFoundPage/NotFoundPageView.js
deleted file mode 100644
index 33a00af..0000000
--- a/src/Pages/NotFoundPage/NotFoundPageView.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { PageView } from '@/modules/Page/Page';
-import NotFoundPageHtml from './not-found-page.hbs';
-
-export class NotFoundPageView extends PageView {
-  constructor({ url }) {
-    super({ renderParams: { notFoundUrl: url }, template: NotFoundPageHtml });
-  }
-}
diff --git a/src/Pages/NotFoundPage/not-found-page.hbs b/src/Pages/NotFoundPage/not-found-page.hbs
deleted file mode 100644
index e585804..0000000
--- a/src/Pages/NotFoundPage/not-found-page.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<div>{{notFoundUrl}} Not Found (404)</div>
\ No newline at end of file
diff --git a/src/application/action_creators/user_action_creators.ts b/src/application/action_creators/user_action_creators.ts
index 166a811..02bdc05 100644
--- a/src/application/action_creators/user_action_creators.ts
+++ b/src/application/action_creators/user_action_creators.ts
@@ -3,7 +3,7 @@ import {
   LoginAction,
   LogoutAction,
 } from '@application/stores/user_store/user_actions';
-import { userStore } from '@application/stores/user_store/user_store';
+import { LoginFormData } from '@application/stores/user_store/user_store';
 import {
   login as apiLogin,
   logout as apiLogout,
@@ -24,8 +24,36 @@ import { makeEmployerFromApi } from '../models/employer';
 import type { Applicant as ApiApplicant } from '@api/src/responses/applicant';
 import type { Employer as ApiEmployer } from '@api/src/responses/employer';
 import { assertIfError } from '@/modules/common_utils/asserts/asserts';
+import { validateEmail, validateOk } from '../validators/validators';
+import { storeManager } from '@/modules/store_manager/store_manager';
+
+function validateLoginData({ userType, email, password }: LoginOptions): LoginFormData {
+  const isValid = [userType, email, password].every((field) => field !== '');
+  const validatedData = {
+    userType: validateOk(userType),
+    email: validateEmail(email),
+    password: validateOk(password),
+    isValid,
+    errorMsg: isValid ? '' : 'Заполните обязательные поля',
+  };
+  validatedData.isValid =
+    validatedData.isValid &&
+    [validatedData.userType, validatedData.email, validatedData.password].every(
+      (field) => field.isValid,
+    );
+  return validatedData;
+}
 
 async function login({ userType, email, password }: LoginOptions) {
+  const validatedLoginData = validateLoginData({ userType, email, password });
+  if (!validatedLoginData.isValid) {
+    storeManager.dispatch({
+      type: UserActions.LoginFormSubmit,
+      payload: validatedLoginData,
+    });
+    return;
+  }
+
   const backendOrigin = backendStore.getData().backendOrigin;
   try {
     const loginResponse = await apiLogin(backendOrigin, {
@@ -34,7 +62,7 @@ async function login({ userType, email, password }: LoginOptions) {
       password,
     });
     const userProfile = await getUser(backendOrigin, userType, loginResponse.id);
-    userStore.dispatch({
+    storeManager.dispatch({
       type: UserActions.Login,
       payload: {
         email,
@@ -44,7 +72,7 @@ async function login({ userType, email, password }: LoginOptions) {
     } as LoginAction);
   } catch (err) {
     assertIfError(err);
-    userStore.dispatch({
+    storeManager.dispatch({
       type: UserActions.Logout,
     } as LogoutAction);
   }
@@ -60,7 +88,7 @@ async function logout() {
   const backendOrigin = backendStore.getData().backendOrigin;
   try {
     await apiLogout(backendOrigin);
-    userStore.dispatch({
+    storeManager.dispatch({
       type: UserActions.Logout,
     } as LogoutAction);
   } catch {}
@@ -77,7 +105,7 @@ async function register(
         ? await apiRegisterApplicant(backendOrigin, body as registerApplicantOptions)
         : await apiRegisterEmployer(backendOrigin, body as registerEmployerOptions);
     const userProfile = await getUser(backendOrigin, userType, response.id);
-    userStore.dispatch({
+    storeManager.dispatch({
       type: UserActions.Login,
       payload: {
         email: body.email,
@@ -86,7 +114,7 @@ async function register(
       },
     });
   } catch {
-    userStore.dispatch({
+    storeManager.dispatch({
       type: UserActions.Logout,
     });
   }
diff --git a/src/application/components/input/input.scss b/src/application/components/input/input.scss
new file mode 100644
index 0000000..4f918de
--- /dev/null
+++ b/src/application/components/input/input.scss
@@ -0,0 +1,40 @@
+.input {
+  display: flex;
+  flex-direction: column;
+
+  &__label {
+    margin-bottom: 5px;
+  }
+
+  &__required-sign {
+    color: var(--color-secondary-support-500);
+  }
+
+  &__field {
+    padding: 8px;
+    background-color: var(--color-background-600);
+    color: var(--color-main-100);
+    border: none;
+    border-radius: var(--radius-s);
+    &::placeholder {
+      color: var(--color-background-400);
+    }
+
+    &_ok {
+      box-shadow: inset 0px 0px 6px var(--color-main-400);
+    }
+
+    &_error {
+      box-shadow: inset 0px 0px 4px var(--color-secondary-support-500);
+    }
+  }
+
+  &__error-text {
+    margin-top: 10px;
+    color: var(--color-secondary-support-500);
+  }
+
+  &__input_disabled {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}
diff --git a/src/application/components/input/input.tsx b/src/application/components/input/input.tsx
new file mode 100644
index 0000000..861bc07
--- /dev/null
+++ b/src/application/components/input/input.tsx
@@ -0,0 +1,72 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import './input.scss';
+
+export interface InputProps {
+  elementClass?: string;
+  id: string;
+  isRequired?: boolean;
+  label: string;
+  name: string;
+  type: string;
+  value?: string;
+  placeholder?: string;
+  error?: string;
+  isValid?: boolean;
+  maxlength?: number;
+}
+
+export class Input extends Component {
+  constructor({
+    elementClass,
+    id,
+    isRequired = false,
+    label,
+    name,
+    type,
+    value,
+    placeholder = '',
+    error = '',
+    isValid,
+    maxlength,
+  }: InputProps) {
+    super({
+      elementClass,
+      id,
+      isRequired,
+      name,
+      label,
+      type,
+      value,
+      placeholder,
+      error,
+      isValid,
+      maxlength,
+    });
+  }
+
+  render() {
+    return (
+      <div className={`${this.props.elementClass} input`}>
+        <label for={this.props.id} className="input__label">
+          {this.props.label}
+          {this.props.isRequired ? <span className="input__required-sign">*</span> : ''}
+        </label>
+        <input
+          type={this.props.type}
+          className={`input__field ${this.props.isValid !== undefined ? (this.props.isValid ? 'input__field_ok' : 'input__field_error') : ''}`}
+          name={this.props.name}
+          id={this.props.id}
+          placeholder={this.props.placeholder}
+          maxlength={this.props.maxlength}
+          value={this.props.value}
+        />
+        {this.props.isValid === false && this.props.error !== '' ? (
+          <span className="input__error-text">{this.props.error ?? false}</span>
+        ) : (
+          false
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/application/components/page_container/page-container.scss b/src/application/components/page_container/page-container.scss
index c6cc610..55bbf84 100644
--- a/src/application/components/page_container/page-container.scss
+++ b/src/application/components/page_container/page-container.scss
@@ -7,7 +7,8 @@
 }
 
 .page-container {
-  display: block;
+  display: flex;
+  flex-direction: column;
   height: 100vh;
-  width: 100vw;
+  width: 100%;
 }
diff --git a/src/application/components/user_type_select/user_type_select.scss b/src/application/components/user_type_select/user_type_select.scss
new file mode 100644
index 0000000..8695e75
--- /dev/null
+++ b/src/application/components/user_type_select/user_type_select.scss
@@ -0,0 +1,50 @@
+.user-type-select {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  text-decoration: none;
+  text-align: center;
+  gap: 12px;
+  width: 100%;
+  &__applicant {
+    width: 50%;
+  }
+
+  &__employer {
+    width: 50%;
+  }
+}
+
+.user-type-radiobutton {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  font-weight: var(--text-weight-bold);
+  border-radius: var(--radius-m);
+  border: solid 1px var(--color-background-600);
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease;
+
+  &:hover {
+    background-color: var(--color-main-100);
+    color: var(--color-background-900);
+  }
+
+  &__input {
+    display: none;
+  }
+
+  &__label {
+    padding: 8px 4px;
+    cursor: pointer;
+    margin: 0;
+  }
+
+  &_checked {
+    background-color: var(--color-main-400);
+    border: none;
+    color: #fff;
+  }
+}
diff --git a/src/application/components/user_type_select/user_type_select.tsx b/src/application/components/user_type_select/user_type_select.tsx
new file mode 100644
index 0000000..1ba59e7
--- /dev/null
+++ b/src/application/components/user_type_select/user_type_select.tsx
@@ -0,0 +1,60 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { UserType } from '@/application/models/user-type';
+import './user_type_select.scss';
+
+export interface UserTypeSelectProps {
+  elementClass?: string;
+}
+
+export class UserTypeSelect extends Component {
+  private checked: UserType = UserType.Applicant;
+  constructor({ elementClass = '' }: UserTypeSelectProps) {
+    super({ elementClass });
+  }
+
+  private setActive = (userType: UserType) => {
+    this.checked = userType;
+    vdom.updateNode(this.domNode, vdom.createElement('UserTypeSelect', this.props));
+  };
+  render() {
+    return (
+      <div className={`${this.props.elementClass} user-type-select `}>
+        <div
+          className={`user-type-select__applicant user-type-radiobutton ${this.checked === UserType.Applicant ? 'user-type-radiobutton_checked' : ''}`}
+          onClick={() => this.setActive(UserType.Applicant)}
+        >
+          <input
+            type="radio"
+            className="user-type-radiobutton__input"
+            id={UserType.Applicant}
+            name="userType"
+            value={UserType.Applicant}
+            checked={this.checked === UserType.Applicant}
+            required
+          />
+          <label for={UserType.Applicant} className="user-type-radiobutton__label">
+            Соискатель
+          </label>
+        </div>
+        <div
+          className={`user-type-select__employer user-type-radiobutton ${this.checked === UserType.Employer ? 'user-type-radiobutton_checked' : ''}`}
+          onClick={() => this.setActive(UserType.Employer)}
+        >
+          <input
+            type="radio"
+            className="user-type-radiobutton__input"
+            id={UserType.Employer}
+            name="userType"
+            value={UserType.Employer}
+            checked={this.checked === UserType.Employer}
+            required
+          />
+          <label for={UserType.Employer} className="user-type-radiobutton__label">
+            Работодатель
+          </label>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/application/models/form_value.ts b/src/application/models/form_value.ts
new file mode 100644
index 0000000..684ad89
--- /dev/null
+++ b/src/application/models/form_value.ts
@@ -0,0 +1,6 @@
+/** FormValue holds a value and its validation status */
+export interface FormValue {
+  value: unknown;
+  isValid: boolean;
+  errorMsg?: string;
+}
diff --git a/src/application/pages/login_page/login-page.scss b/src/application/pages/login_page/login-page.scss
index 47bb0a1..ea8503d 100644
--- a/src/application/pages/login_page/login-page.scss
+++ b/src/application/pages/login_page/login-page.scss
@@ -1,21 +1,50 @@
 .login-page {
   display: flex;
   flex-direction: column;
-  height: 100vh;
-  align-items: center;
+  align-items: stretch;
   justify-content: center;
+  width: var(--4-col);
+  max-width: 400px;
+  padding: 16px;
 
-  &__login-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: var(--4-col);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  border-radius: var(--radius-m);
+
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 
-    &_theme-dark {
-      background-color: var(--color-background-900);
-    }
+  &_theme-dark {
+    background-color: var(--color-background-900);
   }
 
   &__header {
+    margin-top: 0px;
+    margin-bottom: 20px;
+    text-align: center;
+    color: var(--color-main-100);
+  }
+
+  &__user-type-select {
+    margin-bottom: 20px;
+  }
+
+  &__email {
+    margin-bottom: 20px;
+  }
+
+  &__password {
+    margin-bottom: 20px;
+  }
+
+  &__button-container {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 16px;
   }
 }
diff --git a/src/application/pages/login_page/login_page.tsx b/src/application/pages/login_page/login_page.tsx
index 9a0f760..6952b69 100644
--- a/src/application/pages/login_page/login_page.tsx
+++ b/src/application/pages/login_page/login_page.tsx
@@ -1,16 +1,76 @@
 import { Component } from '@/modules/vdom/virtual_node';
 import * as vdom from '@/modules/vdom/virtual_dom';
 import './login-page.scss';
+import { Input } from '@/application/components/input/input';
+import { UserTypeSelect } from '@/application/components/user_type_select/user_type_select';
+import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { userStore } from '@/application/stores/user_store/user_store';
+import { userActionCreators } from '@/application/action_creators/user_action_creators';
+import { LoginOptions } from '@/modules/api/src/handlers/auth/login';
 
 export class LoginPage extends Component {
+  constructor({ url }: { url: URL }) {
+    super({ url });
+  }
+
   render() {
+    const formData = userStore.getData().loginForm;
     return (
-      <div class="login-page">
-        <main className="login-page__login-container login-page__login-container_theme-dark">
-          <h2 className="login-page__header">Вход в аккаунт</h2>
-        </main>
-      </div>
-      // login form here
+      <main className="login-page login-page_theme-dark">
+        <h2 className="login-page__header">Вход в аккаунт</h2>
+        <form
+          className="login-page__login-form"
+          method="POST"
+          novalidate
+          onSubmit={this.handleSubmit}
+        >
+          <UserTypeSelect elementClass="login-page__user-type-select" />
+          <Input
+            elementClass="login-page__email"
+            id="email"
+            label="Электронная почта"
+            name="email"
+            type="email"
+            placeholder="example@mail.ru"
+            isRequired={true}
+            maxlength={50}
+            value={formData && formData.email.value}
+            isValid={formData && formData.email.isValid}
+            error={formData && formData.email.errorMsg}
+          />
+          <Input
+            elementClass="login-page__password"
+            id="password"
+            label="Пароль"
+            name="password"
+            type="password"
+            isRequired={true}
+            maxlength={50}
+            isValid={formData && formData.password.isValid}
+          />
+          <div className="login-page__button-container">
+            <button type="submit" className="login-page__button button button_main-primary">
+              Войти
+            </button>
+            <a
+              class="login-page__go-back-button button button_main-tertiary"
+              href={resolveUrl('vacancies', null)}
+            >
+              На главную
+            </a>
+          </div>
+        </form>
+      </main>
     );
   }
+
+  private handleSubmit = (ev: SubmitEvent) => {
+    ev.preventDefault();
+    const formData = Object.fromEntries(new FormData(ev.target as HTMLFormElement));
+    userActionCreators.login({
+      userType: (formData.userType as string).trim(),
+      email: (formData.email as string).trim(),
+      password: formData.password,
+    } as LoginOptions);
+  };
 }
diff --git a/src/application/stores/user_store/user_actions.ts b/src/application/stores/user_store/user_actions.ts
index ae2665f..5037310 100644
--- a/src/application/stores/user_store/user_actions.ts
+++ b/src/application/stores/user_store/user_actions.ts
@@ -4,10 +4,12 @@ import { UserType } from '@/application/models/user-type';
 import { Action } from '@/modules/store_manager/action';
 import { Applicant } from '@application/models/applicant';
 import { Employer } from '@application/models/employer';
+import { LoginFormData } from './user_store';
 
 export enum UserActions {
   Logout = 'logout',
   Login = 'login',
+  LoginFormSubmit = 'loginFormSubmit',
 }
 
 export interface LogoutAction extends Action {
@@ -24,3 +26,8 @@ export interface LoginAction extends Action {
   type: UserActions.Login;
   payload: LoginActionPayload;
 }
+
+export interface LoginFormSubmitAction extends Action {
+  type: UserActions.LoginFormSubmit;
+  payload: LoginFormData;
+}
diff --git a/src/application/stores/user_store/user_store.ts b/src/application/stores/user_store/user_store.ts
index dbe03da..7efd9f7 100644
--- a/src/application/stores/user_store/user_store.ts
+++ b/src/application/stores/user_store/user_store.ts
@@ -5,12 +5,22 @@ import { storeManager } from '@/modules/store_manager/store_manager';
 import { Action } from '@/modules/store_manager/action';
 import { LoginActionPayload, UserActions } from './user_actions';
 import { UserType } from '@/application/models/user-type';
+import { FormValue } from '@/application/models/form_value';
+
+export interface LoginFormData {
+  userType: FormValue;
+  email: FormValue;
+  password: FormValue;
+  isValid: boolean;
+  errorMsg?: string;
+}
 
 export interface UserData {
   isLoggedIn: boolean;
   userType?: UserType;
   email?: string;
   userProfile?: Applicant | Employer;
+  loginForm?: LoginFormData;
 }
 
 function userStoreReducer(state: UserData, action: Action) {
@@ -28,9 +38,17 @@ function userStoreReducer(state: UserData, action: Action) {
         userType: payload.userType,
         email: payload.email,
         userProfile: payload.userProfile,
+        loginForm: state.loginForm,
       };
     }
+
+    case UserActions.LoginFormSubmit: {
+      const payload = action.payload as LoginFormData;
+      state.loginForm = payload;
+      return state;
+    }
   }
+  return state;
 }
 
 export const userStore = new Store<UserData>(
diff --git a/src/application/validators/validators.ts b/src/application/validators/validators.ts
new file mode 100644
index 0000000..a5140ef
--- /dev/null
+++ b/src/application/validators/validators.ts
@@ -0,0 +1,28 @@
+/** @fileoverview This file contains validators for form fields or form itself */
+
+import { FormValue } from '../models/form_value';
+
+export function validateEmail(email: string): FormValue {
+  const matches = email.match(/^(".*"|[^@]*)@[^@]*$/);
+  return {
+    value: email,
+    isValid: Boolean(matches),
+    errorMsg: matches ? '' : 'Введен некорректный адрес',
+  };
+}
+
+export function validatePassword(password: string): FormValue {
+  const isValid = password.length >= 8;
+  return {
+    value: password,
+    isValid,
+    errorMsg: isValid ? '' : 'Введите пароль длиной хотя бы 8 символов',
+  };
+}
+
+export function validateOk(value: unknown): FormValue {
+  return {
+    value,
+    isValid: true,
+  };
+}
diff --git a/src/index.tsx b/src/index.tsx
index 2c5870d..f7af027 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,5 @@
 import { Router } from '@/modules/vdom_router/router';
 import eventBus from './modules/Events/EventBus';
-import appState from './modules/AppState/AppState';
 import { LoginPage } from '@/application/pages/login_page/login_page';
 // import { RegistrationPage } from './Pages/RegistrationPage/RegistrationPage';
 // import { ProfilePage } from './Pages/ProfilePage/ProfilePage';
@@ -13,6 +12,7 @@ import { REDIRECT_TO, GO_TO } from './modules/Events/Events';
 import { NotificationBox } from './Components/NotificationBox/NotificationBox';
 import { VacanciesPage } from '@/application/pages/vacancies_page/vacancies_page';
 import './scss/index.scss';
+import { storeManager } from './modules/store_manager/store_manager';
 
 // eslint-disable-next-line
 const notificationBox = new NotificationBox({
@@ -42,6 +42,7 @@ eventBus.on(GO_TO, ({ redirectUrl }: { redirectUrl: URL }) => {
   router.navigate(redirectUrl, false, true);
 });
 
-appState.userSession.checkAuthorization().finally(() => {
-  router.start();
-});
+storeManager.bindVirtualDom(router.getVdomRoot());
+
+// TODO: add auth check
+router.start();
diff --git a/src/modules/FormUtils/FormUtils.js b/src/modules/FormUtils/FormUtils.js
deleted file mode 100644
index 5a960f2..0000000
--- a/src/modules/FormUtils/FormUtils.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const getFormData = (formHtml) => {
-  const formData = new FormData(formHtml);
-  const dataObj = {};
-  formData.entries().forEach((entry) => {
-    dataObj[entry[0]] = entry[1];
-  });
-  return dataObj;
-};
diff --git a/src/modules/Router/Router.ts b/src/modules/Router/Router.ts
deleted file mode 100644
index 5dfa2b5..0000000
--- a/src/modules/Router/Router.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import { Page } from '@/modules/Page/Page';
-import { NotFoundPage } from '@/Pages/NotFoundPage/NotFoundPage';
-
-interface IPage {
-  new ({ url }: { url: URL }): Page;
-}
-
-const APP_ID = 'app';
-
-export class ForbiddenPage extends Error {
-  public redirectUrl: URL;
-  constructor(redirectUrl: URL) {
-    super('forbidden page');
-    this.redirectUrl = redirectUrl;
-    Object.setPrototypeOf(this, ForbiddenPage.prototype);
-  }
-}
-
-export class NotFoundError extends Error {
-  constructor() {
-    super('resource not found');
-    Object.setPrototypeOf(this, NotFoundError.prototype);
-  }
-}
-
-/** Simple navigation router class. */
-export class Router {
-  private currentPage: Page | undefined;
-  private routes: Map<string, IPage>;
-
-  /**
-   * Create a router without any routes.
-   */
-  constructor() {
-    this.routes = new Map<string, IPage>();
-    this.currentPage = undefined;
-  }
-
-  /**
-   * Get current page instance
-   * @returns {Page} Current page object
-   */
-  getCurrentPage(): Page {
-    return this.currentPage;
-  }
-
-  /**
-   * Add a route to router
-   * @param {string} pathname - The string representation of URL pathname of the page to be added.
-   * @param {Page} pageClass - A class of added page.
-   */
-  addRoute(pathname: string, pageClass: IPage) {
-    this.routes.set(pathname, pageClass);
-  }
-
-  /**
-   * Remove a route from router
-   * @param {string} pathname - The string representation of URL pathname of the page to be removed.
-   * @returns {boolean} Is route deleted.
-   */
-  removeRoute(pathname: string): boolean {
-    return this.routes.delete(pathname);
-  }
-
-  /**
-   * Navigate to the page with given url
-   * @param {URL} url - The URL to navigate to
-   * @param {boolean} redirection - Is this navigation a redirection
-   * @param {boolean} modifyHistory - If true, browser history will be modified
-   * @throws {TypeError} Invalid argument types
-   */
-  async navigate(url: URL, redirection: boolean = false, modifyHistory: boolean = true) {
-    try {
-      if (modifyHistory) {
-        if (!redirection) {
-          history.pushState(null, '', url);
-        } else {
-          history.replaceState(null, '', url);
-        }
-      }
-
-      const newPage = this.routes.has(url.pathname) ? this.routes.get(url.pathname) : NotFoundPage;
-      await this._replacePage(newPage, url);
-    } catch (err) {
-      if (err instanceof ForbiddenPage) {
-        this.navigate(err.redirectUrl, true, true);
-        return;
-      }
-      if (err instanceof NotFoundError) {
-        this._replacePage(NotFoundPage, url);
-        return;
-      }
-      throw err;
-    }
-  }
-
-  // TODO: remove any here (after all code in typescript)
-  // eslint-disable-next-line
-  async _replacePage(newPageClass: any, newPageUrl: URL) {
-    if (this.currentPage) {
-      this.currentPage.cleanup();
-    }
-    this.currentPage = new newPageClass({ url: newPageUrl });
-    const app = document.getElementById(APP_ID);
-    app.innerHTML = '';
-    app.appendChild(this.currentPage.render());
-    this.currentPage.postRenderInit();
-  }
-
-  /**
-   * Start routing.
-   */
-  start() {
-    window.addEventListener('popstate', (ev) => {
-      ev.preventDefault();
-      this.navigate(new URL(location.href), false, false);
-    });
-
-    window.addEventListener('click', (ev) => {
-      let currentElement = ev.target as HTMLElement;
-      while (currentElement) {
-        if (
-          currentElement instanceof HTMLAnchorElement &&
-          currentElement.origin === location.origin
-        ) {
-          ev.preventDefault();
-          this.navigate(new URL(currentElement.href));
-          break;
-        }
-        currentElement = currentElement.parentElement;
-      }
-    });
-
-    this.navigate(new URL(location.href), false, false);
-  }
-}
-
-export default new Router();
diff --git a/src/modules/vdom/virtual_dom.ts b/src/modules/vdom/virtual_dom.ts
index c695c63..ba3e53a 100644
--- a/src/modules/vdom/virtual_dom.ts
+++ b/src/modules/vdom/virtual_dom.ts
@@ -96,7 +96,15 @@ export function createNode(spec: VirtualNodeSpec | string): NodeWithVirtualNode
       Object.entries(props).forEach(([key, value]) => {
         if (isEventProperty(key)) {
           setEventListener(newVirtualNode, key, <{ (ev: Event): void }>value);
-        } else {
+          return;
+        }
+        if (typeof value === 'boolean') {
+          if (value) {
+            domNode.setAttribute(key, '');
+          }
+          return;
+        }
+        if (value !== undefined) {
           domNode.setAttribute(key, <string>value);
         }
       });
@@ -238,7 +246,15 @@ function updateSelfProps(
     Object.entries(newProps).forEach(([key, value]) => {
       if (isEventProperty(key)) {
         setEventListener(virtualNode, key, <{ (ev: Event): void }>value);
-      } else {
+        return;
+      }
+      if (typeof value === 'boolean') {
+        if (value) {
+          curHtml.setAttribute(key, '');
+        }
+        return;
+      }
+      if (value !== undefined) {
         curHtml.setAttribute(key, <string>value);
       }
     });
diff --git a/src/modules/vdom/virtual_dom_root.ts b/src/modules/vdom/virtual_dom_root.ts
index 5139291..9932dbc 100644
--- a/src/modules/vdom/virtual_dom_root.ts
+++ b/src/modules/vdom/virtual_dom_root.ts
@@ -102,6 +102,9 @@ export function setEventListener(
     console.log('Unexpected no root');
     return;
   }
+  if (!handler) {
+    return;
+  }
   const eventName = eventKey.slice(2).toLowerCase();
   if (!virtualNode.eventListeners) {
     virtualNode.eventListeners = new Map<string, Array<{ (ev: Event): void }>>();
diff --git a/src/modules/vdom_router/router.ts b/src/modules/vdom_router/router.ts
index 3e126c4..96fc983 100644
--- a/src/modules/vdom_router/router.ts
+++ b/src/modules/vdom_router/router.ts
@@ -24,7 +24,6 @@ export class NotFoundError extends Error {
 
 export class Router {
   private routes: Map<string, PageClass>;
-  private currentPage?: Component;
   private vdomRoot: VirtualDomRoot;
 
   constructor(rootNode: HTMLElement) {
@@ -40,6 +39,10 @@ export class Router {
     return this.routes.delete(pathname);
   }
 
+  getVdomRoot() {
+    return this.vdomRoot;
+  }
+
   navigate(url: URL, redirection: boolean = false, modifyHistory: boolean = true) {
     try {
       if (modifyHistory) {
diff --git a/src/scss/_common.scss b/src/scss/_common.scss
index de9e77c..d1247d3 100644
--- a/src/scss/_common.scss
+++ b/src/scss/_common.scss
@@ -1,15 +1,3 @@
-.app {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  max-width: 100vw;
-  font-family: 'Roboto', sans-serif;
-  &_theme-dark {
-    background-color: var(--color-background-1000);
-    color: var(--color-main-100);
-  }
-}
-
 .border_radius-small {
   border: solid;
   border-radius: 4px;
diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss
index 3e7078d..0e32061 100644
--- a/src/scss/_forms.scss
+++ b/src/scss/_forms.scss
@@ -1,95 +1,3 @@
-/* User type radiogroup component */
-
-.user-type-radiogroup {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  text-decoration: none;
-  text-align: center;
-  gap: 12px;
-  width: 100%;
-  &__applicant {
-    width: 50%;
-  }
-
-  &__employer {
-    width: 50%;
-  }
-}
-
-/* user type radiobutton component */
-
-.user-type-radiobutton {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  border: 1px solid var(--grey-light);
-  font-weight: var(--text-weight-bold);
-  border-radius: 14px;
-  transition:
-    background-color 0.3s ease,
-    border-color 0.3s ease;
-
-  &:hover {
-    background-color: #f0f0f0;
-    border-color: #888;
-    color: black;
-  }
-
-  &__input {
-    display: none;
-  }
-
-  &__label {
-    padding: 8px 4px;
-    cursor: pointer;
-    margin: 0;
-  }
-
-  &_checked {
-    background-color: var(--primary-light);
-    color: #fff;
-    border-color: var(--primary-light);
-  }
-}
-
-/* Validated input component */
-
-.validated-input {
-  display: flex;
-  flex-direction: column;
-
-  &__label {
-    margin-bottom: 5px;
-  }
-
-  &__input {
-    padding: 8px;
-    background-color: var(--color-background-600);
-    color: var(--color-main-100);
-    border: none;
-    border-radius: 4px;
-  }
-
-  &__error {
-    margin-top: 10px;
-    color: var(--color-secondary-support-500);
-  }
-
-  &__input_error {
-    box-shadow: inset 0px 0px 4px var(--color-secondary-support-500);
-  }
-
-  &__input_ok {
-    box-shadow: inset 0px 0px 6px var(--color-main-400);
-  }
-
-  &__input_disabled {
-    background-color: rgba(0, 0, 0, 0);
-  }
-}
-
 /* Validated textarea component */
 
 .validated-textarea {
diff --git a/src/scss/_login.scss b/src/scss/_login.scss
index 4dd7050..e69de29 100644
--- a/src/scss/_login.scss
+++ b/src/scss/_login.scss
@@ -1,59 +0,0 @@
-// .login-page {
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: center;
-//   align-items: center;
-//   width: 100vw;
-//   height: 100vh;
-//   &__login-container {
-//     padding: 20px;
-//     border-radius: 10px;
-//     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-//     width: 100%;
-//     max-width: 400px;
-//     box-sizing: border-box;
-//     background-color: var(--color-background-900);
-//   }
-// }
-
-.login-container {
-  display: flex;
-  align-items: stretch;
-  flex-direction: column;
-  &__header {
-    margin-top: 0px;
-    text-align: center;
-    color: white;
-  }
-
-  &__login-form {
-    margin-bottom: 10px;
-  }
-}
-
-.login-form {
-  display: flex;
-  flex-direction: column;
-  &__button-container {
-    display: flex;
-    gap: 20px;
-    flex-wrap: wrap;
-    align-items: baseline;
-  }
-  &__error {
-    margin-bottom: 20px;
-    color: #aa0000;
-  }
-
-  &__user-type-radiogroup {
-    margin-bottom: 20px;
-  }
-
-  &__email {
-    margin-bottom: 10px;
-  }
-
-  &__password {
-    margin-bottom: 20px;
-  }
-}
diff --git a/src/scss/index.scss b/src/scss/index.scss
index cfe8722..39e401b 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -74,43 +74,56 @@ $mobile-breakpoint: 768px;
   --text-weight-regular: 400;
   --text-weight-bold: 600;
 
-  --container-width: #{$container-width};
-  --col-width: #{$col-width};
+  --mobile-breakpoint: #{$mobile-breakpoint};
+
+  --container-width: 100%;
+  --col-width: 100%;
   --col-margin: #{$col-margin};
+  --2-col: 100%;
+  --3-col: 100%;
+  --4-col: 100%;
+  --5-col: 100%;
+  --6-col: 100%;
+  --7-col: 100%;
+  --8-col: 100%;
+  --9-col: 100%;
+  --10-col: 100%;
+  --11-col: 100%;
+  --12-col: 100%;
 
-  --2-col: #{calc(2 * $col-width + $col-margin)};
-  --3-col: #{calc(3 * $col-width + 2 * $col-margin)};
-  --4-col: #{calc(4 * $col-width + 3 * $col-margin)};
-  --5-col: #{calc(5 * $col-width + 4 * $col-margin)};
-  --6-col: #{calc(6 * $col-width + 5 * $col-margin)};
-  --7-col: #{calc(7 * $col-width + 6 * $col-margin)};
-  --8-col: #{calc(8 * $col-width + 7 * $col-margin)};
-  --9-col: #{calc(9 * $col-width + 8 * $col-margin)};
-  --10-col: #{calc(10 * $col-width + 9 * $col-margin)};
-  --11-col: #{calc(11 * $col-width + 10 * $col-margin)};
-  --12-col: #{calc(12 * $col-width + 11 * $col-margin)};
+  --radius-s: 4px;
+  --radius-xs: 8px;
+  --radius-m: 16px;
+  --radius-l: 24px;
 }
 
-@media screen and (max-width: $mobile-breakpoint) {
+@media screen and (min-width: $mobile-breakpoint) {
   :root {
-    --container-width: 100%;
-    --col-width: 100%;
-    --col-margin: 0;
-    --2-col: 100%;
-    --3-col: 100%;
-    --4-col: 100%;
-    --5-col: 100%;
-    --6-col: 100%;
-    --7-col: 100%;
-    --8-col: 100%;
-    --9-col: 100%;
-    --10-col: 100%;
-    --11-col: 100%;
-    --12-col: 100%;
+    --2-col: #{calc(2 * $col-width + $col-margin)};
+    --3-col: #{calc(3 * $col-width + 2 * $col-margin)};
+    --4-col: #{calc(4 * $col-width + 3 * $col-margin)};
+    --5-col: #{calc(5 * $col-width + 4 * $col-margin)};
+    --6-col: #{calc(6 * $col-width + 5 * $col-margin)};
+    --7-col: #{calc(7 * $col-width + 6 * $col-margin)};
+    --8-col: #{calc(8 * $col-width + 7 * $col-margin)};
+    --9-col: #{calc(9 * $col-width + 8 * $col-margin)};
+    --10-col: #{calc(10 * $col-width + 9 * $col-margin)};
+    --11-col: #{calc(11 * $col-width + 10 * $col-margin)};
+    --12-col: #{calc(12 * $col-width + 11 * $col-margin)};
   }
 }
 
 body {
   margin: 0;
   padding: 0;
+  background-color: var(--color-background-1000);
+  color: var(--color-main-100);
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: start;
+  font-family: 'Roboto', sans-serif;
 }
diff --git a/tsconfig.json b/tsconfig.json
index 0ad112e..4cb52c7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,7 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "moduleResolution": "bundler",
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
     "baseUrl": "./",
     "jsx": "react",
     "jsxFactory": "vdom.createElement",
diff --git a/webpack.dev.js b/webpack.dev.js
index 3543d65..b8445da 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -9,5 +9,6 @@ module.exports = merge(common, {
     historyApiFallback: true,
     hot: true,
     open: true,
+    host: '0.0.0.0',
   },
 });

From d245d663ecbc241b7be537d6af84632e70215123 Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Wed, 11 Dec 2024 21:27:15 +0300
Subject: [PATCH 04/17] fix: virtual dom works fine with component in component
 in component...

---
 .../action_creators/router_action_creators.ts |  69 ++++++++
 src/application/components/router/router.tsx  |  47 +++++
 .../pages/login_page/login_page.tsx           |   5 +
 .../stores/router_store/router_actions.ts     |  67 +++++++
 .../stores/router_store/router_store.ts       |  73 ++++++++
 src/index.tsx                                 |  27 ++-
 src/modules/vdom/virtual_dom.ts               | 165 +++++++++++++-----
 src/modules/vdom/virtual_dom_root.ts          |   8 +
 src/modules/vdom/virtual_node.ts              |   3 +-
 src/modules/vdom_router/router.ts             |  97 ----------
 10 files changed, 404 insertions(+), 157 deletions(-)
 create mode 100644 src/application/action_creators/router_action_creators.ts
 create mode 100644 src/application/components/router/router.tsx
 create mode 100644 src/application/stores/router_store/router_actions.ts
 create mode 100644 src/application/stores/router_store/router_store.ts
 delete mode 100644 src/modules/vdom_router/router.ts

diff --git a/src/application/action_creators/router_action_creators.ts b/src/application/action_creators/router_action_creators.ts
new file mode 100644
index 0000000..1c695d6
--- /dev/null
+++ b/src/application/action_creators/router_action_creators.ts
@@ -0,0 +1,69 @@
+import {
+  RouterActions,
+  PageClass,
+  RemoveRouteAction,
+  RemoveRouteActionPayload,
+  NavigationActionPayload,
+  RedirectAction,
+  NavigateAction,
+  StartAction,
+} from '@/application/stores/router_store/router_actions';
+import { storeManager } from '@/modules/store_manager/store_manager';
+import {
+  AddRouteAction,
+  AddRouteActionPayload,
+} from '@/application/stores/router_store/router_actions';
+
+function addRoute(url: URL, page: PageClass) {
+  storeManager.dispatch({
+    type: RouterActions.AddRoute,
+    payload: {
+      url,
+      page,
+    } as AddRouteActionPayload,
+  } as AddRouteAction);
+}
+
+function removeRoute(url: URL) {
+  storeManager.dispatch({
+    type: RouterActions.RemoveRoute,
+    payload: {
+      url,
+    } as RemoveRouteActionPayload,
+  } as RemoveRouteAction);
+}
+
+function redirect(url: URL) {
+  storeManager.dispatch({
+    type: RouterActions.Redirect,
+    payload: {
+      url,
+    } as NavigationActionPayload,
+  } as RedirectAction);
+}
+
+function navigate(url: URL) {
+  storeManager.dispatch({
+    type: RouterActions.Navigate,
+    payload: {
+      url,
+    } as NavigationActionPayload,
+  } as NavigateAction);
+}
+
+function startRouting(url: URL) {
+  storeManager.dispatch({
+    type: RouterActions.Start,
+    payload: {
+      url,
+    } as NavigationActionPayload,
+  } as StartAction);
+}
+
+export const routerActionCreators = {
+  addRoute,
+  removeRoute,
+  redirect,
+  navigate,
+  startRouting,
+};
diff --git a/src/application/components/router/router.tsx b/src/application/components/router/router.tsx
new file mode 100644
index 0000000..959836e
--- /dev/null
+++ b/src/application/components/router/router.tsx
@@ -0,0 +1,47 @@
+import { Component, VirtualNodeSpec } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { routerStore } from '@/application/stores/router_store/router_store';
+import { PageClass } from '@/application/stores/router_store/router_actions';
+import { PageSwitchStatus } from '@/application/stores/router_store/router_store';
+import { routerActionCreators } from '@/application/action_creators/router_action_creators';
+
+export class Router extends Component {
+  private prevPage?: PageClass;
+
+  didMount() {
+    window.addEventListener('popstate', (ev) => {
+      ev.preventDefault();
+      routerActionCreators.navigate(new URL(location.href));
+    });
+
+    window.addEventListener('click', (ev) => {
+      let currentElement = ev.target as HTMLElement;
+      while (currentElement) {
+        if (
+          currentElement instanceof HTMLAnchorElement &&
+          currentElement.origin === location.origin
+        ) {
+          ev.preventDefault();
+          routerActionCreators.navigate(new URL(currentElement.href));
+          break;
+        }
+        currentElement = currentElement.parentElement;
+      }
+    });
+  }
+
+  render(): VirtualNodeSpec {
+    const routerData = routerStore.getData();
+    const { currentUrl, switchStatus } = routerData;
+    const CurrentPage = routerData.currentPage;
+    if (this.prevPage !== CurrentPage) {
+      this.prevPage = CurrentPage;
+      if (switchStatus === PageSwitchStatus.Navigate) {
+        history.pushState(null, '', currentUrl);
+      } else {
+        history.replaceState(null, '', currentUrl);
+      }
+    }
+    return <CurrentPage url={currentUrl} key={CurrentPage.name} />;
+  }
+}
diff --git a/src/application/pages/login_page/login_page.tsx b/src/application/pages/login_page/login_page.tsx
index 6952b69..58a6f79 100644
--- a/src/application/pages/login_page/login_page.tsx
+++ b/src/application/pages/login_page/login_page.tsx
@@ -7,6 +7,7 @@ import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
 import { userStore } from '@/application/stores/user_store/user_store';
 import { userActionCreators } from '@/application/action_creators/user_action_creators';
 import { LoginOptions } from '@/modules/api/src/handlers/auth/login';
+import { routerActionCreators } from '@/application/action_creators/router_action_creators';
 
 export class LoginPage extends Component {
   constructor({ url }: { url: URL }) {
@@ -14,6 +15,10 @@ export class LoginPage extends Component {
   }
 
   render() {
+    const userData = userStore.getData();
+    if (userData.isLoggedIn) {
+      routerActionCreators.redirect(new URL(resolveUrl('vacancies', null)));
+    }
     const formData = userStore.getData().loginForm;
     return (
       <main className="login-page login-page_theme-dark">
diff --git a/src/application/stores/router_store/router_actions.ts b/src/application/stores/router_store/router_actions.ts
new file mode 100644
index 0000000..e027c98
--- /dev/null
+++ b/src/application/stores/router_store/router_actions.ts
@@ -0,0 +1,67 @@
+/** @fileoverview This file contains actions for router store */
+
+import type { Action } from '@/modules/store_manager/action';
+import { Component } from '@/modules/vdom/virtual_node';
+
+export interface PageClass {
+  new (props: { url: URL }): Component;
+}
+
+/** Enum describing possible router actions */
+export enum RouterActions {
+  Navigate = 'navigate',
+  Redirect = 'redirect',
+  AddRoute = 'add_route',
+  RemoveRoute = 'remove_route',
+  Start = 'start',
+}
+
+/** Payload for navigate and redirect actions */
+export interface NavigationActionPayload {
+  /** URL to navigate to */
+  url: URL;
+}
+
+/** Payload for add route action */
+export interface AddRouteActionPayload {
+  /** URL to assign */
+  url: URL;
+  /** Page component */
+  page: PageClass;
+}
+
+/** Payload for remove route action */
+export interface RemoveRouteActionPayload {
+  /** URL to remove */
+  url: URL;
+}
+
+/** Navigate action. It symbolizes standard page navigation */
+export interface NavigateAction extends Action {
+  type: RouterActions.Navigate;
+  payload: NavigationActionPayload;
+}
+
+/** Redirect action. It symbolizes redirection to another page */
+export interface RedirectAction extends Action {
+  type: RouterActions.Redirect;
+  payload: NavigationActionPayload;
+}
+
+/** Action used to add new route in router */
+export interface AddRouteAction extends Action {
+  type: RouterActions.AddRoute;
+  payload: AddRouteActionPayload;
+}
+
+/** Action used to remove route from router */
+export interface RemoveRouteAction extends Action {
+  type: RouterActions.RemoveRoute;
+  payload: RemoveRouteActionPayload;
+}
+
+/** Action used to start routing */
+export interface StartAction extends Action {
+  type: RouterActions.Start;
+  payload: NavigationActionPayload;
+}
diff --git a/src/application/stores/router_store/router_store.ts b/src/application/stores/router_store/router_store.ts
new file mode 100644
index 0000000..601d15b
--- /dev/null
+++ b/src/application/stores/router_store/router_store.ts
@@ -0,0 +1,73 @@
+import { Store } from '@/modules/store_manager/store';
+import { storeManager } from '@/modules/store_manager/store_manager';
+import {
+  RouterActions,
+  AddRouteAction,
+  RemoveRouteAction,
+  NavigationActionPayload,
+} from './router_actions';
+import { Action } from '@/modules/store_manager/action';
+import { NotFoundPage } from '@/application/pages/not_found_page/not_found_page';
+import { PageClass } from './router_actions';
+
+export enum PageSwitchStatus {
+  Navigate = 'navigate',
+  Redirect = 'redirect',
+}
+
+export interface RouterData {
+  currentPage?: PageClass;
+  currentUrl?: URL;
+  switchStatus: PageSwitchStatus;
+  modifyHistory: boolean;
+  possiblePages: Map<string, PageClass>;
+  fallbackPage: PageClass;
+}
+
+function routerStoreReducer(curData: RouterData, action?: Action): RouterData {
+  switch (action.type) {
+    case RouterActions.Navigate:
+    case RouterActions.Redirect: {
+      return switchPageReducer(curData, action, true);
+    }
+    case RouterActions.AddRoute: {
+      const addRouteAction = action as AddRouteAction;
+      curData.possiblePages.set(addRouteAction.payload.url.pathname, addRouteAction.payload.page);
+      break;
+    }
+    case RouterActions.RemoveRoute: {
+      const removeRouteAction = action as RemoveRouteAction;
+      curData.possiblePages.delete(removeRouteAction.payload.url.pathname);
+      break;
+    }
+    case RouterActions.Start: {
+      return switchPageReducer(curData, action, false);
+    }
+  }
+  return curData;
+}
+
+function switchPageReducer(data: RouterData, action: Action, modifyHistory: boolean = true) {
+  const navData = action.payload as NavigationActionPayload;
+  data.currentUrl = navData.url;
+  data.currentPage = data.possiblePages.has(navData.url.pathname)
+    ? data.possiblePages.get(navData.url.pathname)
+    : data.fallbackPage;
+  data.switchStatus =
+    action.type === RouterActions.Navigate ? PageSwitchStatus.Navigate : PageSwitchStatus.Redirect;
+  data.modifyHistory = modifyHistory;
+  return data;
+}
+
+export const routerStore = new Store<RouterData>(
+  {
+    fallbackPage: NotFoundPage,
+    possiblePages: new Map(),
+    switchStatus: PageSwitchStatus.Navigate,
+    currentUrl: new URL(window.location.href),
+    modifyHistory: false,
+  },
+  routerStoreReducer,
+);
+
+storeManager.addStore(routerStore);
diff --git a/src/index.tsx b/src/index.tsx
index f7af027..66b4a1b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,18 +1,19 @@
-import { Router } from '@/modules/vdom_router/router';
-import eventBus from './modules/Events/EventBus';
+import { Router } from './application/components/router/router';
+import * as vdom from '@/modules/vdom/virtual_dom';
 import { LoginPage } from '@/application/pages/login_page/login_page';
 // import { RegistrationPage } from './Pages/RegistrationPage/RegistrationPage';
 // import { ProfilePage } from './Pages/ProfilePage/ProfilePage';
 // import { VacancyPage } from './Pages/VacancyPage/VacancyPage';
 // import { VacancyEditPage } from './Pages/VacancyEditPage/VacancyEditPage';
 import { resolveUrl } from './modules/UrlUtils/UrlUtils';
-import { REDIRECT_TO, GO_TO } from './modules/Events/Events';
 // import { CvPage } from './Pages/CvPage/CvPage';
 // import { CvEditPage } from './Pages/CvEditPage/CvEditPage';
 import { NotificationBox } from './Components/NotificationBox/NotificationBox';
 import { VacanciesPage } from '@/application/pages/vacancies_page/vacancies_page';
 import './scss/index.scss';
 import { storeManager } from './modules/store_manager/store_manager';
+import { routerActionCreators } from './application/action_creators/router_action_creators';
+import { VirtualDomRoot } from './modules/vdom/virtual_dom_root';
 
 // eslint-disable-next-line
 const notificationBox = new NotificationBox({
@@ -29,20 +30,12 @@ const notificationBox = new NotificationBox({
 // router.addRoute(resolveUrl('createCv', null).pathname, CvEditPage);
 // router.addRoute(resolveUrl('editCv', null).pathname, CvEditPage);
 
-const router = new Router(document.getElementById('app'));
+const appRoot = new VirtualDomRoot(document.getElementById('app'));
 
-router.addRoute(resolveUrl('vacancies', null).pathname, VacanciesPage);
-router.addRoute(resolveUrl('login', null).pathname, LoginPage);
-
-eventBus.on(REDIRECT_TO, ({ redirectUrl }: { redirectUrl: URL }) => {
-  router.navigate(redirectUrl, true, true);
-});
-
-eventBus.on(GO_TO, ({ redirectUrl }: { redirectUrl: URL }) => {
-  router.navigate(redirectUrl, false, true);
-});
-
-storeManager.bindVirtualDom(router.getVdomRoot());
+routerActionCreators.addRoute(resolveUrl('vacancies', null), VacanciesPage);
+routerActionCreators.addRoute(resolveUrl('login', null), LoginPage);
+routerActionCreators.startRouting(resolveUrl('vacancies', null));
 
 // TODO: add auth check
-router.start();
+storeManager.bindVirtualDom(appRoot);
+appRoot.render(<Router key="router" />);
diff --git a/src/modules/vdom/virtual_dom.ts b/src/modules/vdom/virtual_dom.ts
index ba3e53a..c03ead9 100644
--- a/src/modules/vdom/virtual_dom.ts
+++ b/src/modules/vdom/virtual_dom.ts
@@ -77,23 +77,14 @@ export function createNode(spec: VirtualNodeSpec | string): NodeWithVirtualNode
     return document.createTextNode(spec);
   }
 
-  const { type, props, children, key, root } = spec;
-  const newVirtualNode: VirtualNode = {
-    type,
-    props,
-    key,
-    children,
-    parent: null,
-    root,
-  };
+  const newVirtualNode = createVirtualNode(spec);
 
-  const isPlainHtmlElement = typeof type === 'string';
-  if (isPlainHtmlElement) {
-    const domNode: NodeWithVirtualNode & HTMLElement = document.createElement(type);
+  if (typeof newVirtualNode.type === 'string') {
+    const domNode: NodeWithVirtualNode & HTMLElement = document.createElement(newVirtualNode.type);
     domNode.virtualNode = newVirtualNode;
 
-    if (props) {
-      Object.entries(props).forEach(([key, value]) => {
+    if (newVirtualNode.props) {
+      Object.entries(newVirtualNode.props).forEach(([key, value]) => {
         if (isEventProperty(key)) {
           setEventListener(newVirtualNode, key, <{ (ev: Event): void }>value);
           return;
@@ -110,8 +101,8 @@ export function createNode(spec: VirtualNodeSpec | string): NodeWithVirtualNode
       });
     }
 
-    if (children) {
-      children.forEach((child) => {
+    if (newVirtualNode.children) {
+      newVirtualNode.children.forEach((child) => {
         if (typeof child !== 'string') {
           child.root = newVirtualNode.root;
         }
@@ -122,31 +113,62 @@ export function createNode(spec: VirtualNodeSpec | string): NodeWithVirtualNode
         domNode.appendChild(domChild);
         if (domChild.virtualNode && domChild.virtualNode.state) {
           domChild.virtualNode.state.didMount();
+          if (domChild.oldComponentVirtualNodes) {
+            domChild.oldComponentVirtualNodes.forEach((vNode) => {
+              vNode.state.didMount();
+            });
+          }
         }
       });
     }
 
-    newVirtualNode.renderedSpec = spec;
     return domNode;
   }
 
   // We got a component
 
-  newVirtualNode.state = new type(props, children);
-  newVirtualNode.renderedSpec = newVirtualNode.state.render();
-  newVirtualNode.renderedSpec.root = newVirtualNode.root;
   const domNode = createNode(newVirtualNode.renderedSpec);
   // domNode.virtualNode is a subtree of elements.
   // We should bind it to its origin element (its not quite parent)
   domNode.virtualNode.parent = newVirtualNode;
-  domNode.subtreeVirtualNode = domNode.virtualNode;
-  domNode.virtualNode = newVirtualNode;
+  if (domNode.originalVirtualNode === undefined) {
+    // Got first component virtual node in the row
+    domNode.originalVirtualNode = domNode.virtualNode;
+    domNode.virtualNode = newVirtualNode;
+  } else {
+    if (domNode.oldComponentVirtualNodes !== undefined) {
+      domNode.oldComponentVirtualNodes.push(domNode.virtualNode);
+    } else {
+      domNode.oldComponentVirtualNodes = [domNode.virtualNode];
+    }
+    domNode.virtualNode = newVirtualNode;
+  }
   newVirtualNode.state.domNode = domNode;
   newVirtualNode.state.didCreate();
 
   return domNode;
 }
 
+function createVirtualNode(spec: VirtualNodeSpec) {
+  const newVirtualNode: VirtualNode = {
+    type: spec.type,
+    props: spec.props,
+    key: spec.key,
+    children: spec.children,
+    parent: null,
+    root: spec.root,
+  };
+  if (typeof newVirtualNode.type !== 'string') {
+    newVirtualNode.state = new newVirtualNode.type(newVirtualNode.props, newVirtualNode.children);
+    newVirtualNode.renderedSpec = newVirtualNode.state.render();
+    newVirtualNode.renderedSpec.root = newVirtualNode.root;
+  } else {
+    newVirtualNode.renderedSpec = spec;
+  }
+
+  return newVirtualNode;
+}
+
 export function updateNode(
   curHtml: NodeWithVirtualNode,
   newSpec: VirtualNodeSpec,
@@ -154,20 +176,26 @@ export function updateNode(
   // We assume that newSpec declares the same component as curNode
   // If we done right, not the same component will be sieved earlier
   const curNode = curHtml.virtualNode;
-  const prevSpec = curNode.renderedSpec;
+  let prevSpec = curHtml.virtualNode.renderedSpec;
+  let curSpec: VirtualNodeSpec;
 
   const isComponentNode = typeof curNode.type !== 'string';
   if (isComponentNode) {
+    // We have to update each virtual node in component row and render this row
+    // till the moment when render result gives us plain html virtual node spec.
     curNode.state.willUpdate(newSpec.props, newSpec.children);
     const newRender = curNode.state.render();
     curNode.renderedSpec = newRender;
+    curSpec = updateComponentChain(curHtml, newRender);
   } else {
+    prevSpec = curNode.renderedSpec;
     curNode.renderedSpec = newSpec;
+    curSpec = curNode.renderedSpec;
   }
 
   // curHtml is guarantied to be HTMLElement since text HTML node is handled outside
-  updateSelfProps(<HTMLElement>curHtml, prevSpec.props, curNode.renderedSpec.props);
-  updateChildren(<HTMLElement>curHtml, prevSpec.children, curNode.renderedSpec.children);
+  updateSelfProps(<HTMLElement>curHtml, prevSpec.props, curSpec.props);
+  updateChildren(<HTMLElement>curHtml, prevSpec.children, curSpec.children);
 
   if (isComponentNode) {
     curNode.state.didUpdate();
@@ -176,6 +204,50 @@ export function updateNode(
   return curHtml;
 }
 
+function updateComponentChain(curHtml: NodeWithVirtualNode, firstRender: VirtualNodeSpec) {
+  let newRender = firstRender;
+  const oldComponentVirtualNodes =
+    curHtml.oldComponentVirtualNodes !== undefined
+      ? curHtml.oldComponentVirtualNodes.reverse()
+      : [];
+  const newOldComponentVirtualNodes = [];
+
+  // Forward update loop
+  let oldComponentIdx = 0;
+  for (oldComponentIdx = 0; oldComponentIdx < oldComponentVirtualNodes.length; oldComponentIdx++) {
+    const oldVirtualNode = oldComponentVirtualNodes[oldComponentIdx];
+    if (oldVirtualNode.type !== newRender.type) {
+      break;
+    }
+    oldVirtualNode.state.willUpdate(newRender.props, newRender.children);
+    newRender = oldVirtualNode.state.render();
+    oldVirtualNode.renderedSpec = newRender;
+    newOldComponentVirtualNodes.push(oldVirtualNode);
+  }
+  // Now newOldComponentVirtualNodes contains updated component chain.
+  // We have to delete remaining virtual nodes if chain was broken and
+  // render more if there any chain pieces to add
+  for (oldComponentIdx; oldComponentIdx < oldComponentVirtualNodes.length; oldComponentIdx++) {
+    destroyVirtualNode(oldComponentVirtualNodes[oldComponentIdx]);
+  }
+
+  let lastChainPiece =
+    newOldComponentVirtualNodes.length > 0
+      ? newOldComponentVirtualNodes[newOldComponentVirtualNodes.length - 1]
+      : curHtml.virtualNode;
+  while (typeof newRender.type !== 'string') {
+    // Got new component to render
+    newRender.root = lastChainPiece.root;
+    const newVirtualNode = createVirtualNode(newRender);
+    newRender = newVirtualNode.renderedSpec;
+    newVirtualNode.parent = lastChainPiece;
+    lastChainPiece = newVirtualNode;
+    newOldComponentVirtualNodes.push(newVirtualNode);
+  }
+  curHtml.oldComponentVirtualNodes = newOldComponentVirtualNodes.reverse();
+  return newRender;
+}
+
 function updateChildren(
   curHtml: HTMLElement & NodeWithVirtualNode,
   prevChildren: Array<VirtualNodeSpec | string> = [],
@@ -210,10 +282,13 @@ function updateChildren(
         newChild.root = curHtml.virtualNode.root;
       }
       const newHtmlNode = createNode(newChild);
-      newHtmlNode.virtualNode.parent = curHtml.subtreeVirtualNode || curHtml.virtualNode;
+      newHtmlNode.virtualNode.parent = curHtml.originalVirtualNode || curHtml.virtualNode;
       curHtml.insertBefore(newHtmlNode, curHtml.childNodes[newChildIdx]);
       if (newHtmlNode.virtualNode && newHtmlNode.virtualNode.state) {
         newHtmlNode.virtualNode.state.didMount();
+        if (newHtmlNode.oldComponentVirtualNodes) {
+          newHtmlNode.oldComponentVirtualNodes.forEach((v) => v.state.didMount());
+        }
       }
       oldChildIdx--;
     }
@@ -232,7 +307,7 @@ function updateSelfProps(
   prevProps: object | null,
   newProps: object | null,
 ) {
-  const virtualNode = curHtml.subtreeVirtualNode || curHtml.virtualNode;
+  const virtualNode = curHtml.originalVirtualNode || curHtml.virtualNode;
   if (virtualNode.eventListeners) {
     virtualNode.eventListeners.forEach(
       (listeners: Array<{ (ev: Event): void }>, eventName: string) => {
@@ -275,24 +350,30 @@ export function destroyNode(domNode: NodeWithVirtualNode) {
   if (virtualNode) {
     const isComponentNode = typeof virtualNode.type !== 'string';
 
+    destroyVirtualNode(virtualNode);
     if (isComponentNode) {
-      virtualNode.state.willDestroy();
-    }
-
-    if (virtualNode.eventListeners) {
-      virtualNode.eventListeners.forEach((_, eventName: string) => {
-        unsetEventListeners(virtualNode, eventName);
-      });
-      delete virtualNode.eventListeners;
-    }
-
-    if (domNode.subtreeVirtualNode && domNode.subtreeVirtualNode.eventListeners) {
-      domNode.subtreeVirtualNode.eventListeners.forEach((_, eventName: string) => {
-        unsetEventListeners(domNode.subtreeVirtualNode, eventName);
-      });
-      delete domNode.subtreeVirtualNode.eventListeners;
+      if (domNode.oldComponentVirtualNodes) {
+        domNode.oldComponentVirtualNodes.forEach((vNode) => {
+          destroyVirtualNode(vNode);
+        });
+      }
+      if (domNode.originalVirtualNode) {
+        destroyVirtualNode(domNode.originalVirtualNode);
+      }
     }
 
     domNode.childNodes.forEach((child) => destroyNode(child));
   }
 }
+
+function destroyVirtualNode(virtualNode: VirtualNode) {
+  if (typeof virtualNode.type !== 'string') {
+    virtualNode.state.willDestroy();
+  }
+  if (virtualNode.eventListeners) {
+    virtualNode.eventListeners.forEach((_, eventName: string) => {
+      unsetEventListeners(virtualNode, eventName);
+    });
+    delete virtualNode.eventListeners;
+  }
+}
diff --git a/src/modules/vdom/virtual_dom_root.ts b/src/modules/vdom/virtual_dom_root.ts
index 9932dbc..6f431f0 100644
--- a/src/modules/vdom/virtual_dom_root.ts
+++ b/src/modules/vdom/virtual_dom_root.ts
@@ -47,6 +47,14 @@ export class VirtualDomRoot {
     this.previousSpec = vDomSpec;
     this.renderedNode = createNode(vDomSpec);
     this.domNode.appendChild(this.renderedNode);
+    if (vDomSpec.type !== 'string') {
+      this.renderedNode.virtualNode.state.didMount();
+      if (this.renderedNode.oldComponentVirtualNodes) {
+        this.renderedNode.oldComponentVirtualNodes.forEach((vNode) => {
+          vNode.state.didMount();
+        });
+      }
+    }
   }
 
   registerEvent(eventName: string): void {
diff --git a/src/modules/vdom/virtual_node.ts b/src/modules/vdom/virtual_node.ts
index 2898cde..7a74e7d 100644
--- a/src/modules/vdom/virtual_node.ts
+++ b/src/modules/vdom/virtual_node.ts
@@ -25,7 +25,8 @@ export interface VirtualNode {
 
 export interface NodeWithVirtualNode extends Node {
   virtualNode?: VirtualNode;
-  subtreeVirtualNode?: VirtualNode;
+  oldComponentVirtualNodes?: Array<VirtualNode>;
+  originalVirtualNode?: VirtualNode;
 }
 
 export abstract class Component {
diff --git a/src/modules/vdom_router/router.ts b/src/modules/vdom_router/router.ts
deleted file mode 100644
index 96fc983..0000000
--- a/src/modules/vdom_router/router.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Component } from '@/modules/vdom/virtual_node';
-import { NotFoundPage } from '@/application/pages/not_found_page/not_found_page';
-import { VirtualDomRoot } from '@/modules/vdom/virtual_dom_root';
-
-export interface PageClass {
-  new (props: { url: URL }): Component;
-}
-
-export class ForbiddenPage extends Error {
-  public redirectUrl: URL;
-  constructor(redirectUrl: URL) {
-    super('forbidden page');
-    this.redirectUrl = redirectUrl;
-    Object.setPrototypeOf(this, ForbiddenPage.prototype);
-  }
-}
-
-export class NotFoundError extends Error {
-  constructor() {
-    super('resource not found');
-    Object.setPrototypeOf(this, NotFoundError.prototype);
-  }
-}
-
-export class Router {
-  private routes: Map<string, PageClass>;
-  private vdomRoot: VirtualDomRoot;
-
-  constructor(rootNode: HTMLElement) {
-    this.routes = new Map<string, PageClass>();
-    this.vdomRoot = new VirtualDomRoot(rootNode);
-  }
-
-  addRoute(pathname: string, pageClass: PageClass) {
-    this.routes.set(pathname, pageClass);
-  }
-
-  removeRoute(pathname: string): boolean {
-    return this.routes.delete(pathname);
-  }
-
-  getVdomRoot() {
-    return this.vdomRoot;
-  }
-
-  navigate(url: URL, redirection: boolean = false, modifyHistory: boolean = true) {
-    try {
-      if (modifyHistory) {
-        if (!redirection) {
-          history.pushState(null, '', url);
-        } else {
-          history.replaceState(null, '', url);
-        }
-      }
-      const newPage = this.routes.has(url.pathname) ? this.routes.get(url.pathname) : NotFoundPage;
-      this.replacePage(newPage, url);
-    } catch (err) {
-      if (err instanceof ForbiddenPage) {
-        this.navigate(err.redirectUrl, true, true);
-        return;
-      }
-      if (err instanceof NotFoundError) {
-        this.replacePage(NotFoundPage, url);
-        return;
-      }
-      throw err;
-    }
-  }
-
-  private replacePage(newPageClass: PageClass, newPageUrl: URL) {
-    this.vdomRoot.render({ type: newPageClass, props: { url: newPageUrl }, children: [] });
-  }
-
-  start() {
-    window.addEventListener('popstate', (ev) => {
-      ev.preventDefault();
-      this.navigate(new URL(location.href), false, false);
-    });
-
-    window.addEventListener('click', (ev) => {
-      let currentElement = ev.target as HTMLElement;
-      while (currentElement) {
-        if (
-          currentElement instanceof HTMLAnchorElement &&
-          currentElement.origin === location.origin
-        ) {
-          ev.preventDefault();
-          this.navigate(new URL(currentElement.href));
-          break;
-        }
-        currentElement = currentElement.parentElement;
-      }
-    });
-
-    this.navigate(new URL(location.href), false, false);
-  }
-}

From aaae567764e5fd57551e8451ddaaaf40540537f0 Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Thu, 12 Dec 2024 10:55:26 +0300
Subject: [PATCH 05/17] fix: component chain bugs

---
 .../page_container/page_container.tsx         |  2 +-
 .../pages/vacancies_page/vacancies_page.tsx   |  2 +-
 src/index.tsx                                 |  2 +-
 src/modules/vdom/virtual_dom.ts               | 32 ++++++++++++++++---
 src/modules/vdom/virtual_dom_root.ts          | 11 +++----
 5 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/application/components/page_container/page_container.tsx b/src/application/components/page_container/page_container.tsx
index 0ad6c89..8c120e7 100644
--- a/src/application/components/page_container/page_container.tsx
+++ b/src/application/components/page_container/page_container.tsx
@@ -6,7 +6,7 @@ import './page-container.scss';
 export class PageContainer extends Component {
   render() {
     return (
-      <div className="page-container">
+      <div className={`${this.props.elementClass} page-container`}>
         <div class="page-container__header-container">
           <Header />
         </div>
diff --git a/src/application/pages/vacancies_page/vacancies_page.tsx b/src/application/pages/vacancies_page/vacancies_page.tsx
index 1777c3c..286541b 100644
--- a/src/application/pages/vacancies_page/vacancies_page.tsx
+++ b/src/application/pages/vacancies_page/vacancies_page.tsx
@@ -8,7 +8,7 @@ export class VacanciesPage extends Component {
   }
   render() {
     return (
-      <PageContainer>
+      <PageContainer key="page-container" elementClass="vacancies-page__page-container">
         <h1>Вакансии</h1>
       </PageContainer>
     );
diff --git a/src/index.tsx b/src/index.tsx
index 66b4a1b..a97554e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -34,7 +34,7 @@ const appRoot = new VirtualDomRoot(document.getElementById('app'));
 
 routerActionCreators.addRoute(resolveUrl('vacancies', null), VacanciesPage);
 routerActionCreators.addRoute(resolveUrl('login', null), LoginPage);
-routerActionCreators.startRouting(resolveUrl('vacancies', null));
+routerActionCreators.startRouting(new URL(location.href));
 
 // TODO: add auth check
 storeManager.bindVirtualDom(appRoot);
diff --git a/src/modules/vdom/virtual_dom.ts b/src/modules/vdom/virtual_dom.ts
index c03ead9..5963eed 100644
--- a/src/modules/vdom/virtual_dom.ts
+++ b/src/modules/vdom/virtual_dom.ts
@@ -127,6 +127,9 @@ export function createNode(spec: VirtualNodeSpec | string): NodeWithVirtualNode
 
   // We got a component
 
+  if (newVirtualNode.renderedSpec.key === null) {
+    newVirtualNode.renderedSpec.key = newVirtualNode.key;
+  }
   const domNode = createNode(newVirtualNode.renderedSpec);
   // domNode.virtualNode is a subtree of elements.
   // We should bind it to its origin element (its not quite parent)
@@ -176,7 +179,9 @@ export function updateNode(
   // We assume that newSpec declares the same component as curNode
   // If we done right, not the same component will be sieved earlier
   const curNode = curHtml.virtualNode;
-  let prevSpec = curHtml.virtualNode.renderedSpec;
+  let prevSpec = curHtml.originalVirtualNode
+    ? curHtml.originalVirtualNode.renderedSpec
+    : curHtml.virtualNode.renderedSpec;
   let curSpec: VirtualNodeSpec;
 
   const isComponentNode = typeof curNode.type !== 'string';
@@ -187,6 +192,23 @@ export function updateNode(
     const newRender = curNode.state.render();
     curNode.renderedSpec = newRender;
     curSpec = updateComponentChain(curHtml, newRender);
+    // Have to check if new rendered html virtual node has the same type
+    // if not, we should just replace html
+    if (curSpec.type !== curHtml.originalVirtualNode.type) {
+      destroyVirtualNode(curHtml.originalVirtualNode);
+      const newHtmlNode = createNode(curSpec);
+      newHtmlNode.originalVirtualNode = newHtmlNode.virtualNode;
+      newHtmlNode.oldComponentVirtualNodes = curHtml.oldComponentVirtualNodes;
+      newHtmlNode.virtualNode = curNode;
+      (curHtml.parentElement as HTMLElement).insertBefore(newHtmlNode, curHtml);
+      // We are replacing dom node, so the states have to be updated with new domNode
+      curHtml.virtualNode.state.domNode = newHtmlNode;
+      curHtml.oldComponentVirtualNodes.forEach(
+        (virtualNode) => (virtualNode.state.domNode = newHtmlNode),
+      );
+      curHtml.parentElement.removeChild(curHtml);
+      return newHtmlNode;
+    }
   } else {
     prevSpec = curNode.renderedSpec;
     curNode.renderedSpec = newSpec;
@@ -194,6 +216,7 @@ export function updateNode(
   }
 
   // curHtml is guarantied to be HTMLElement since text HTML node is handled outside
+  // prev and new specs are guaranteed to be of the same plain html type
   updateSelfProps(<HTMLElement>curHtml, prevSpec.props, curSpec.props);
   updateChildren(<HTMLElement>curHtml, prevSpec.children, curSpec.children);
 
@@ -278,11 +301,13 @@ function updateChildren(
       updateNode(curHtml.childNodes[newChildIdx], newChild);
     } else {
       // Delete old node and add new one
-      if (typeof newChild !== 'string') {
+      if (!isNewChildText) {
         newChild.root = curHtml.virtualNode.root;
       }
       const newHtmlNode = createNode(newChild);
-      newHtmlNode.virtualNode.parent = curHtml.originalVirtualNode || curHtml.virtualNode;
+      if (newHtmlNode.virtualNode) {
+        newHtmlNode.virtualNode.parent = curHtml.originalVirtualNode || curHtml.virtualNode;
+      }
       curHtml.insertBefore(newHtmlNode, curHtml.childNodes[newChildIdx]);
       if (newHtmlNode.virtualNode && newHtmlNode.virtualNode.state) {
         newHtmlNode.virtualNode.state.didMount();
@@ -290,7 +315,6 @@ function updateChildren(
           newHtmlNode.oldComponentVirtualNodes.forEach((v) => v.state.didMount());
         }
       }
-      oldChildIdx--;
     }
   }
 
diff --git a/src/modules/vdom/virtual_dom_root.ts b/src/modules/vdom/virtual_dom_root.ts
index 6f431f0..37567b2 100644
--- a/src/modules/vdom/virtual_dom_root.ts
+++ b/src/modules/vdom/virtual_dom_root.ts
@@ -24,25 +24,24 @@ export class VirtualDomRoot {
       if (this.previousSpec === undefined) {
         return;
       }
-      updateNode(this.renderedNode, this.previousSpec);
+      this.renderedNode = updateNode(this.renderedNode, this.previousSpec);
       return;
     }
     const newSpec = createElement(tsx.type, tsx.props, ...tsx.children);
     newSpec.root = this;
     this.previousSpec = newSpec;
-    updateNode(this.renderedNode, newSpec);
+    this.renderedNode = updateNode(this.renderedNode, newSpec);
   }
 
-  render(tsx: Tsx | string) {
+  render(vDomSpec: VirtualNodeSpec | string) {
     this.domNode.childNodes.forEach((child) => {
       destroyNode(child);
       this.domNode.removeChild(child);
     });
-    if (typeof tsx === 'string') {
-      this.domNode.textContent = tsx;
+    if (typeof vDomSpec === 'string') {
+      this.domNode.textContent = vDomSpec;
       return;
     }
-    const vDomSpec = createElement(tsx.type, tsx.props, ...tsx.children);
     vDomSpec.root = this;
     this.previousSpec = vDomSpec;
     this.renderedNode = createNode(vDomSpec);

From 8112b44b99c897f24d6dc039ba3d2adceca0358d Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Fri, 13 Dec 2024 04:52:35 +0300
Subject: [PATCH 06/17] fix: more vdom and router bugs

---
 .../action_creators/user_action_creators.ts   | 28 ++++++++-
 .../components/dropdown/dropdown.tsx          | 61 ++++++++++---------
 src/application/components/header/header.tsx  | 49 +++++++++++----
 .../page_container/page_container.tsx         |  4 +-
 .../pages/login_page/login_page.tsx           | 10 +--
 .../pages/vacancies_page/vacancies_page.tsx   |  2 +-
 .../stores/user_store/user_actions.ts         |  2 +-
 .../stores/user_store/user_store.ts           |  4 +-
 src/index.tsx                                 |  8 ++-
 src/modules/store_manager/store_manager.ts    | 20 +++++-
 src/modules/vdom/virtual_dom.ts               | 24 +++++++-
 src/modules/vdom/virtual_dom_root.ts          | 27 +++++---
 12 files changed, 170 insertions(+), 69 deletions(-)

diff --git a/src/application/action_creators/user_action_creators.ts b/src/application/action_creators/user_action_creators.ts
index 02bdc05..4a73a67 100644
--- a/src/application/action_creators/user_action_creators.ts
+++ b/src/application/action_creators/user_action_creators.ts
@@ -2,6 +2,7 @@ import {
   UserActions,
   LoginAction,
   LogoutAction,
+  LoginActionPayload,
 } from '@application/stores/user_store/user_actions';
 import { LoginFormData } from '@application/stores/user_store/user_store';
 import {
@@ -9,6 +10,7 @@ import {
   logout as apiLogout,
   registerApplicant as apiRegisterApplicant,
   registerEmployer as apiRegisterEmployer,
+  getUserAuthenticationStatus,
   getEmployer,
   getApplicant,
 } from '@api/api';
@@ -65,12 +67,13 @@ async function login({ userType, email, password }: LoginOptions) {
     storeManager.dispatch({
       type: UserActions.Login,
       payload: {
-        email,
+        id: loginResponse.id,
         userType,
         userProfile,
       },
     } as LoginAction);
   } catch (err) {
+    console.log(err);
     assertIfError(err);
     storeManager.dispatch({
       type: UserActions.Logout,
@@ -78,6 +81,26 @@ async function login({ userType, email, password }: LoginOptions) {
   }
 }
 
+async function isAuthorized() {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  try {
+    const response = await getUserAuthenticationStatus(backendOrigin);
+    const userProfile = await getUser(backendOrigin, response.userType, response.id);
+    storeManager.dispatch({
+      type: UserActions.Login,
+      payload: {
+        id: response.id,
+        userType: response.userType,
+        userProfile,
+      } as LoginActionPayload,
+    } as LoginAction);
+  } catch {
+    storeManager.dispatch({
+      type: UserActions.Logout,
+    } as LogoutAction);
+  }
+}
+
 async function getUser(backendOrigin: URL, userType: UserType, id: number) {
   return userType === UserType.Applicant
     ? makeApplicantFromApi((await getApplicant(backendOrigin, id)) as ApiApplicant)
@@ -108,7 +131,7 @@ async function register(
     storeManager.dispatch({
       type: UserActions.Login,
       payload: {
-        email: body.email,
+        id: response.id,
         userType,
         userProfile,
       },
@@ -121,6 +144,7 @@ async function register(
 }
 
 export const userActionCreators = {
+  isAuthorized,
   login,
   logout,
   register,
diff --git a/src/application/components/dropdown/dropdown.tsx b/src/application/components/dropdown/dropdown.tsx
index c6faa74..cb87e91 100644
--- a/src/application/components/dropdown/dropdown.tsx
+++ b/src/application/components/dropdown/dropdown.tsx
@@ -4,43 +4,48 @@ import { VirtualNodeSpec } from '@/modules/vdom/virtual_node';
 
 export interface DropdownProps {
   elementClass: string;
+  isOpen: boolean;
+  setIsOpen: (newIsOpen: boolean) => void;
 }
 
 export class Dropdown extends Component {
   private dropdownOpen: boolean = false;
-  constructor({ elementClass }: DropdownProps, children?: Array<VirtualNodeSpec | string>) {
-    super({ elementClass }, children);
+  private handleClick: (ev: Event) => void;
+  constructor(
+    { elementClass, isOpen, setIsOpen }: DropdownProps,
+    children?: Array<VirtualNodeSpec | string>,
+  ) {
+    super({ elementClass, isOpen, setIsOpen }, children);
+    // this.handleClick = this.onClick.bind(this);
   }
 
-  didMount(): void {
-    window.addEventListener('click', this.onClick);
-  }
-
-  willDestroy(): void {
-    window.removeEventListener('click', this.onClick);
-  }
+  // didMount(): void {
+  //   window.addEventListener('click', this.handleClick);
+  // }
 
-  private onClick = (ev: Event): void => {
-    if (!this.dropdownOpen) {
-      return;
-    }
-    const clickedInsideDropdown =
-      this.domNode.contains(ev.target as HTMLElement) || Object.is(this.domNode, ev.target);
-    if (!clickedInsideDropdown) {
-      this.toggleDropdown();
-    }
-  };
+  // willDestroy(): void {
+  //   window.removeEventListener('click', this.handleClick);
+  // }
 
-  toggleDropdown(): void {
-    this.dropdownOpen = !this.dropdownOpen;
-    vdom.updateNode(this.domNode, this.render());
-  }
+  // private onClick = (ev: Event): void => {
+  //   if (!this.props.isOpen) {
+  //     return;
+  //   }
+  //   const clickedInsideDropdown =
+  //     this.domNode.contains(ev.target as HTMLElement) || Object.is(this.domNode, ev.target);
+  //   if (!clickedInsideDropdown) {
+  //     (this.props.setIsOpen as (newIsOpen: boolean) => void)(false);
+  //   }
+  // };
 
   render(): VirtualNodeSpec {
-    if (this.dropdownOpen) {
-      return <div className="{this.props.elementClass} dropdown">{...this.children}</div>;
-    } else {
-      return null;
-    }
+    return (
+      <div
+        className={`${this.props.elementClass} dropdown`}
+        style={`visibility: ${this.props.isOpen ? 'visible' : 'hidden'}`}
+      >
+        {this.children}
+      </div>
+    );
   }
 }
diff --git a/src/application/components/header/header.tsx b/src/application/components/header/header.tsx
index c1ba3f5..b398ed1 100644
--- a/src/application/components/header/header.tsx
+++ b/src/application/components/header/header.tsx
@@ -11,12 +11,24 @@ import logoutMenuIconSvg from '@static/img/logout-menu-icon.svg';
 import { Dropdown } from '@/application/components/dropdown/dropdown';
 import { UserType } from '@/application/models/user-type';
 import './header.scss';
+import { userActionCreators } from '@/application/action_creators/user_action_creators';
 
 export class Header extends Component {
+  private isDropdownOpen: boolean;
+  private setIsDropdownOpen: (newIsDropdownOpen: boolean) => void;
+  constructor({ elementClass }: { elementClass?: string }) {
+    super({ elementClass });
+    this.isDropdownOpen = false;
+    this.setIsDropdownOpen = (newIsDropdownOpen: boolean) => {
+      this.isDropdownOpen = newIsDropdownOpen;
+      this.domNode.virtualNode.root.update();
+    };
+  }
+
   render(): VirtualNodeSpec {
     const userData = userStore.getData();
     return (
-      <nav className="header">
+      <nav className={`${this.props.elementClass} header`}>
         <a className="header__logo" href={resolveUrl('vacancies', null).toString()}>
           &mu;Art
         </a>
@@ -24,8 +36,17 @@ export class Header extends Component {
           <div className="header__authorized-container">
             <img className="header__notification-button" src={notificationIconSvg} />
             <img className="header__user-avatar" src={userData.userProfile.avatar} />
-            <img className="header__menu-open-button" src={menuIconSvg} />
-            <Dropdown elementClass="header__dropdown">
+            <img
+              className="header__menu-open-button"
+              src={menuIconSvg}
+              onClick={() => this.setIsDropdownOpen(!this.isDropdownOpen)}
+            />
+            <Dropdown
+              key="dropdown"
+              elementClass="header__dropdown"
+              isOpen={this.isDropdownOpen}
+              setIsOpen={this.setIsDropdownOpen}
+            >
               <div className="header__user-info">
                 <div className="header__user-name">
                   {userData.userProfile.firstName + ' ' + userData.userProfile.secondName}
@@ -38,30 +59,32 @@ export class Header extends Component {
                   className="header__profile-button menu__element"
                   href={resolveUrl('myProfile', null).toString()}
                 >
-                  <img
-                    className="menu__element-icon"
-                    src={profileMenuIconSvg}
-                    Профиль
-                    пользователя
-                  />
+                  <img className="menu__element-icon" src={profileMenuIconSvg} />
+                  Профиль пользователя
                 </a>
                 {userData.userType === UserType.Applicant ? (
                   <a
                     className="header__cv-button menu__element"
                     href={resolveUrl('myProfile', { from: 'cvList' }).toString()}
                   >
-                    <img className="menu__element-icon" src={cvMenuIconSvg} Мои резюме />
+                    <img className="menu__element-icon" src={cvMenuIconSvg} />
+                    Мои резюме
                   </a>
                 ) : (
                   <a
                     className="header__vacancy-button menu__element"
                     href={resolveUrl('myProfile', { from: 'vacancyList' }).toString()}
                   >
-                    <img className="menu__element-icon" src={vacancyMenuIconSvg} Мои вакансии />
+                    <img className="menu__element-icon" src={vacancyMenuIconSvg} />
+                    Мои вакансии
                   </a>
                 )}
-                <a className="header__logout-button menu__element">
-                  <img class="menu__element-icon" src={logoutMenuIconSvg} Выйти />
+                <a
+                  className="header__logout-button menu__element"
+                  onClick={() => userActionCreators.logout()}
+                >
+                  <img className="menu__element-icon" src={logoutMenuIconSvg} />
+                  Выйти
                 </a>
               </div>
             </Dropdown>
diff --git a/src/application/components/page_container/page_container.tsx b/src/application/components/page_container/page_container.tsx
index 8c120e7..3dac80d 100644
--- a/src/application/components/page_container/page_container.tsx
+++ b/src/application/components/page_container/page_container.tsx
@@ -7,8 +7,8 @@ export class PageContainer extends Component {
   render() {
     return (
       <div className={`${this.props.elementClass} page-container`}>
-        <div class="page-container__header-container">
-          <Header />
+        <div className="page-container__header-container">
+          <Header key="header" elementClass="page-container__header" />
         </div>
         {this.children}
       </div>
diff --git a/src/application/pages/login_page/login_page.tsx b/src/application/pages/login_page/login_page.tsx
index 58a6f79..d05a453 100644
--- a/src/application/pages/login_page/login_page.tsx
+++ b/src/application/pages/login_page/login_page.tsx
@@ -1,4 +1,4 @@
-import { Component } from '@/modules/vdom/virtual_node';
+import { Component, VirtualNodeSpec } from '@/modules/vdom/virtual_node';
 import * as vdom from '@/modules/vdom/virtual_dom';
 import './login-page.scss';
 import { Input } from '@/application/components/input/input';
@@ -14,12 +14,12 @@ export class LoginPage extends Component {
     super({ url });
   }
 
-  render() {
+  render(): VirtualNodeSpec {
     const userData = userStore.getData();
+    const formData = userData.loginForm;
     if (userData.isLoggedIn) {
       routerActionCreators.redirect(new URL(resolveUrl('vacancies', null)));
     }
-    const formData = userStore.getData().loginForm;
     return (
       <main className="login-page login-page_theme-dark">
         <h2 className="login-page__header">Вход в аккаунт</h2>
@@ -29,8 +29,9 @@ export class LoginPage extends Component {
           novalidate
           onSubmit={this.handleSubmit}
         >
-          <UserTypeSelect elementClass="login-page__user-type-select" />
+          <UserTypeSelect key="user-type-select" elementClass="login-page__user-type-select" />
           <Input
+            key="input-email"
             elementClass="login-page__email"
             id="email"
             label="Электронная почта"
@@ -44,6 +45,7 @@ export class LoginPage extends Component {
             error={formData && formData.email.errorMsg}
           />
           <Input
+            key="input-password"
             elementClass="login-page__password"
             id="password"
             label="Пароль"
diff --git a/src/application/pages/vacancies_page/vacancies_page.tsx b/src/application/pages/vacancies_page/vacancies_page.tsx
index 286541b..19f1ef6 100644
--- a/src/application/pages/vacancies_page/vacancies_page.tsx
+++ b/src/application/pages/vacancies_page/vacancies_page.tsx
@@ -9,7 +9,7 @@ export class VacanciesPage extends Component {
   render() {
     return (
       <PageContainer key="page-container" elementClass="vacancies-page__page-container">
-        <h1>Вакансии</h1>
+        <h1 className="vacancies-page__header">Вакансии</h1>
       </PageContainer>
     );
   }
diff --git a/src/application/stores/user_store/user_actions.ts b/src/application/stores/user_store/user_actions.ts
index 5037310..ff2ee03 100644
--- a/src/application/stores/user_store/user_actions.ts
+++ b/src/application/stores/user_store/user_actions.ts
@@ -17,7 +17,7 @@ export interface LogoutAction extends Action {
 }
 
 export interface LoginActionPayload {
-  email: string;
+  id: number;
   userType: UserType;
   userProfile: Applicant | Employer;
 }
diff --git a/src/application/stores/user_store/user_store.ts b/src/application/stores/user_store/user_store.ts
index 7efd9f7..89d6350 100644
--- a/src/application/stores/user_store/user_store.ts
+++ b/src/application/stores/user_store/user_store.ts
@@ -18,7 +18,7 @@ export interface LoginFormData {
 export interface UserData {
   isLoggedIn: boolean;
   userType?: UserType;
-  email?: string;
+  id?: number;
   userProfile?: Applicant | Employer;
   loginForm?: LoginFormData;
 }
@@ -36,7 +36,7 @@ function userStoreReducer(state: UserData, action: Action) {
       return {
         isLoggedIn: true,
         userType: payload.userType,
-        email: payload.email,
+        id: payload.id,
         userProfile: payload.userProfile,
         loginForm: state.loginForm,
       };
diff --git a/src/index.tsx b/src/index.tsx
index a97554e..5be6e6b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -14,6 +14,7 @@ import './scss/index.scss';
 import { storeManager } from './modules/store_manager/store_manager';
 import { routerActionCreators } from './application/action_creators/router_action_creators';
 import { VirtualDomRoot } from './modules/vdom/virtual_dom_root';
+import { userActionCreators } from './application/action_creators/user_action_creators';
 
 // eslint-disable-next-line
 const notificationBox = new NotificationBox({
@@ -36,6 +37,7 @@ routerActionCreators.addRoute(resolveUrl('vacancies', null), VacanciesPage);
 routerActionCreators.addRoute(resolveUrl('login', null), LoginPage);
 routerActionCreators.startRouting(new URL(location.href));
 
-// TODO: add auth check
-storeManager.bindVirtualDom(appRoot);
-appRoot.render(<Router key="router" />);
+userActionCreators.isAuthorized().finally(() => {
+  storeManager.bindVirtualDom(appRoot);
+  appRoot.render(<Router key="router" />);
+});
diff --git a/src/modules/store_manager/store_manager.ts b/src/modules/store_manager/store_manager.ts
index 6e74adf..cc5422e 100644
--- a/src/modules/store_manager/store_manager.ts
+++ b/src/modules/store_manager/store_manager.ts
@@ -1,13 +1,13 @@
 import { Store } from './store';
 import { Action } from './action';
 import { VirtualDomRoot } from '@/modules/vdom/virtual_dom_root';
-import * as vdom from '@/modules/vdom/virtual_dom';
 
 class StoreManager {
   private stores: Array<Store<unknown>> = [];
   // Since there can be more than one Virtual DOM in page,
   // it is an Array
   private vdomRoots: Array<VirtualDomRoot> = [];
+  private needToUpdateVdom: boolean = false;
 
   addStore(store: Store<unknown>) {
     this.stores.push(store);
@@ -21,7 +21,23 @@ class StoreManager {
     // All views should subscribe to each store they want to use,
     // But dom update will be performed here
     this.stores.forEach((store) => store.dispatch(action));
-    this.vdomRoots.forEach((vdomRoot: VirtualDomRoot) => vdomRoot.update());
+    this.updateVdom();
+  }
+
+  private updateVdom() {
+    console.log('updating vdom');
+    const someVdomUpdating = this.vdomRoots.some((vdomRoot) => vdomRoot.checkVdomUpdating());
+    if (someVdomUpdating) {
+      console.log('blocked updating vdom');
+      this.needToUpdateVdom = true;
+      return;
+    }
+    do {
+      this.needToUpdateVdom = false;
+      this.vdomRoots.forEach((vdomRoot: VirtualDomRoot) => {
+        vdomRoot.update();
+      });
+    } while (this.needToUpdateVdom);
   }
 }
 
diff --git a/src/modules/vdom/virtual_dom.ts b/src/modules/vdom/virtual_dom.ts
index 5963eed..ebbd8a8 100644
--- a/src/modules/vdom/virtual_dom.ts
+++ b/src/modules/vdom/virtual_dom.ts
@@ -72,6 +72,10 @@ export namespace JSX {
 }
 
 export function createNode(spec: VirtualNodeSpec | string): NodeWithVirtualNode {
+  if (typeof spec !== 'string' && typeof spec.type !== 'string') {
+    console.groupCollapsed(`${spec.type.name}: create`);
+  }
+
   const isTextNode = typeof spec === 'string';
   if (isTextNode) {
     return document.createTextNode(spec);
@@ -149,6 +153,7 @@ export function createNode(spec: VirtualNodeSpec | string): NodeWithVirtualNode
   newVirtualNode.state.domNode = domNode;
   newVirtualNode.state.didCreate();
 
+  console.groupEnd();
   return domNode;
 }
 
@@ -197,18 +202,24 @@ export function updateNode(
     if (curSpec.type !== curHtml.originalVirtualNode.type) {
       destroyVirtualNode(curHtml.originalVirtualNode);
       const newHtmlNode = createNode(curSpec);
+      newHtmlNode.virtualNode.parent =
+        curHtml.oldComponentVirtualNodes[curHtml.oldComponentVirtualNodes.length - 1];
       newHtmlNode.originalVirtualNode = newHtmlNode.virtualNode;
       newHtmlNode.oldComponentVirtualNodes = curHtml.oldComponentVirtualNodes;
       newHtmlNode.virtualNode = curNode;
       (curHtml.parentElement as HTMLElement).insertBefore(newHtmlNode, curHtml);
       // We are replacing dom node, so the states have to be updated with new domNode
-      curHtml.virtualNode.state.domNode = newHtmlNode;
+      curNode.state.domNode = newHtmlNode;
       curHtml.oldComponentVirtualNodes.forEach(
         (virtualNode) => (virtualNode.state.domNode = newHtmlNode),
       );
       curHtml.parentElement.removeChild(curHtml);
       return newHtmlNode;
     }
+    // if we have same html tag, it is not guarantied that we have same key
+    // and render spec, so we should update them
+    curHtml.originalVirtualNode.renderedSpec = curSpec;
+    curHtml.originalVirtualNode.key = curSpec.key;
   } else {
     prevSpec = curNode.renderedSpec;
     curNode.renderedSpec = newSpec;
@@ -222,6 +233,9 @@ export function updateNode(
 
   if (isComponentNode) {
     curNode.state.didUpdate();
+    if (curHtml.oldComponentVirtualNodes) {
+      curHtml.oldComponentVirtualNodes.forEach((virtualNode) => virtualNode.state.didUpdate());
+    }
   }
 
   return curHtml;
@@ -296,6 +310,7 @@ function updateChildren(
       !isNewChildText &&
       prevChild &&
       prevChild.type === newChild.type &&
+      prevChild.key !== null &&
       prevChild.key === newChild.key
     ) {
       updateNode(curHtml.childNodes[newChildIdx], newChild);
@@ -328,8 +343,8 @@ function updateChildren(
 
 function updateSelfProps(
   curHtml: HTMLElement & NodeWithVirtualNode,
-  prevProps: object | null,
-  newProps: object | null,
+  prevProps: { [key: string]: unknown } | null,
+  newProps: { [key: string]: unknown } | null,
 ) {
   const virtualNode = curHtml.originalVirtualNode || curHtml.virtualNode;
   if (virtualNode.eventListeners) {
@@ -347,6 +362,9 @@ function updateSelfProps(
         setEventListener(virtualNode, key, <{ (ev: Event): void }>value);
         return;
       }
+      if (prevProps && value === prevProps[key]) {
+        return;
+      }
       if (typeof value === 'boolean') {
         if (value) {
           curHtml.setAttribute(key, '');
diff --git a/src/modules/vdom/virtual_dom_root.ts b/src/modules/vdom/virtual_dom_root.ts
index 37567b2..a5abe36 100644
--- a/src/modules/vdom/virtual_dom_root.ts
+++ b/src/modules/vdom/virtual_dom_root.ts
@@ -12,48 +12,59 @@ export function isEventProperty(propertyName: string): boolean {
 export class VirtualDomRoot {
   private eventListeners: Map<string, (ev: Event) => void>;
   private registeredEventsAmount: Map<string, number>;
-  private renderedNode?: NodeWithVirtualNode;
   private previousSpec?: VirtualNodeSpec;
+  private isVdomUpdating: boolean = false;
   constructor(private domNode: HTMLElement & NodeWithVirtualNode) {
     this.eventListeners = new Map<string, (ev: Event) => void>();
     this.registeredEventsAmount = new Map<string, number>();
   }
 
+  checkVdomUpdating() {
+    return this.isVdomUpdating;
+  }
+
   update(tsx?: Tsx) {
     if (tsx === undefined) {
       if (this.previousSpec === undefined) {
         return;
       }
-      this.renderedNode = updateNode(this.renderedNode, this.previousSpec);
+      this.isVdomUpdating = true;
+      updateNode(this.domNode.firstChild, this.previousSpec);
+      this.isVdomUpdating = false;
       return;
     }
     const newSpec = createElement(tsx.type, tsx.props, ...tsx.children);
     newSpec.root = this;
     this.previousSpec = newSpec;
-    this.renderedNode = updateNode(this.renderedNode, newSpec);
+    this.isVdomUpdating = true;
+    updateNode(this.domNode.firstChild, newSpec);
+    this.isVdomUpdating = false;
   }
 
   render(vDomSpec: VirtualNodeSpec | string) {
+    this.isVdomUpdating = true;
     this.domNode.childNodes.forEach((child) => {
       destroyNode(child);
       this.domNode.removeChild(child);
     });
     if (typeof vDomSpec === 'string') {
       this.domNode.textContent = vDomSpec;
+      this.isVdomUpdating = false;
       return;
     }
     vDomSpec.root = this;
     this.previousSpec = vDomSpec;
-    this.renderedNode = createNode(vDomSpec);
-    this.domNode.appendChild(this.renderedNode);
+    const renderedNode = createNode(vDomSpec);
+    this.domNode.appendChild(renderedNode);
     if (vDomSpec.type !== 'string') {
-      this.renderedNode.virtualNode.state.didMount();
-      if (this.renderedNode.oldComponentVirtualNodes) {
-        this.renderedNode.oldComponentVirtualNodes.forEach((vNode) => {
+      renderedNode.virtualNode.state.didMount();
+      if (renderedNode.oldComponentVirtualNodes) {
+        renderedNode.oldComponentVirtualNodes.forEach((vNode) => {
           vNode.state.didMount();
         });
       }
     }
+    this.isVdomUpdating = false;
   }
 
   registerEvent(eventName: string): void {

From c96e73366b55775eeec8b4cb2f5196e277ee8945 Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Fri, 13 Dec 2024 13:02:07 +0300
Subject: [PATCH 07/17] feature: registration fish

---
 .../ApplicantRegistrationFormController.js    |   2 +-
 .../AppliersList/AppliersListView.js          |   2 +-
 .../CvArticle/CvArticleController.js          |   2 +-
 src/Components/CvForm/CvFormController.js     |   2 +-
 src/Components/CvForm/CvFormModel.js          |   2 +-
 .../EmployerRegistrationFormController.js     |   2 +-
 .../ValidatedTextArea/ValidatedTextArea.js    |  16 --
 .../ValidatedTextAreaView.js                  |  76 ------
 .../ValidatedTextArea/validated-textarea.hbs  |  16 --
 src/Components/Header/Header.js               |  20 --
 src/Components/Header/HeaderController.js     |   3 -
 src/Components/Header/HeaderModel.js          |   3 -
 src/Components/Header/HeaderView.js           | 103 --------
 src/Components/Header/header.hbs              |  54 ----
 .../Lists/ApplicantCvList/ApplicantCvList.js  |   2 +-
 .../ApplicantCvList/ApplicantCvListModel.js   |   2 +-
 .../ApplicantPortfolioListModel.js            |   2 +-
 .../EmployerVacancyList.js                    |   2 +-
 .../EmployerVacancyListModel.js               |   2 +-
 src/Components/LoginForm/LoginForm.js         |  37 ---
 .../LoginForm/LoginFormController.js          |  54 ----
 src/Components/LoginForm/LoginFormModel.js    |  31 ---
 src/Components/LoginForm/LoginFormView.js     |  59 -----
 src/Components/LoginForm/login-form.hbs       |  12 -
 .../VacancyArticleController.js               |   2 +-
 .../VacancyForm/VacancyFormController.js      |   2 +-
 .../VacancyForm/VacancyFormModel.js           |   2 +-
 src/Pages/CvEditPage/CvEditPage.js            |   2 +-
 src/Pages/ProfilePage/ProfilePage.js          |   2 +-
 src/Pages/VacanciesPage/VacanciesPageModel.js |   2 +-
 src/Pages/VacancyEditPage/VacancyEditPage.js  |   2 +-
 src/application/components/header/header.tsx  |   4 +-
 src/application/components/input/input.scss   |   4 +
 src/application/components/input/input.tsx    |  27 +-
 .../user_type_select/user_type_select.tsx     |  16 +-
 .../pages/login_page/login-page.scss          |  20 +-
 .../pages/login_page/login_page.tsx           |   2 +-
 .../registration_page/registration_page.scss  |  87 +++++++
 .../registration_page/registration_page.tsx   | 239 ++++++++++++++++++
 .../stores/user_store/user_store.ts           |   7 +
 src/index.tsx                                 |   5 +-
 src/modules/AppState/AppState.js              |  21 --
 src/modules/Decorators/Decorators.js          |  26 --
 src/modules/UserSession/UserSession.js        | 135 ----------
 src/modules/UserSession/UserType.js           |   3 -
 .../common_utils/decorators/decorators.ts     |  33 +++
 .../url_utils/url_utils.ts}                   |   0
 src/modules/vdom/virtual_dom.ts               |   5 -
 src/scss/_registration.scss                   | 133 ----------
 src/scss/_variables.scss                      |   4 +
 src/scss/index.scss                           |  34 ++-
 51 files changed, 458 insertions(+), 867 deletions(-)
 delete mode 100644 src/Components/FormInputs/ValidatedTextArea/ValidatedTextArea.js
 delete mode 100644 src/Components/FormInputs/ValidatedTextArea/ValidatedTextAreaView.js
 delete mode 100644 src/Components/FormInputs/ValidatedTextArea/validated-textarea.hbs
 delete mode 100644 src/Components/Header/Header.js
 delete mode 100644 src/Components/Header/HeaderController.js
 delete mode 100644 src/Components/Header/HeaderModel.js
 delete mode 100644 src/Components/Header/HeaderView.js
 delete mode 100644 src/Components/Header/header.hbs
 delete mode 100644 src/Components/LoginForm/LoginForm.js
 delete mode 100644 src/Components/LoginForm/LoginFormController.js
 delete mode 100644 src/Components/LoginForm/LoginFormModel.js
 delete mode 100644 src/Components/LoginForm/LoginFormView.js
 delete mode 100644 src/Components/LoginForm/login-form.hbs
 create mode 100644 src/application/pages/registration_page/registration_page.scss
 create mode 100644 src/application/pages/registration_page/registration_page.tsx
 delete mode 100644 src/modules/AppState/AppState.js
 delete mode 100644 src/modules/Decorators/Decorators.js
 delete mode 100644 src/modules/UserSession/UserSession.js
 delete mode 100644 src/modules/UserSession/UserType.js
 create mode 100644 src/modules/common_utils/decorators/decorators.ts
 rename src/modules/{UrlUtils/UrlUtils.ts => common_utils/url_utils/url_utils.ts} (100%)
 create mode 100644 src/scss/_variables.scss

diff --git a/src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormController.js b/src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormController.js
index ff668ee..1615234 100644
--- a/src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormController.js
+++ b/src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormController.js
@@ -1,7 +1,7 @@
 import { ComponentController } from '@/modules/Components/Component';
 import { REGISTER_APPLICANT } from '@/modules/Events/Events';
 import router from '@/modules/Router/Router';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import eventBus from '@/modules/Events/EventBus';
 import { NOTIFICATION_OK } from '@/modules/Events/Events';
 import { NOTIFICATION_TIMEOUT } from '@/Components/NotificationBox/NotificationBox.js';
diff --git a/src/Components/AppliersList/AppliersListView.js b/src/Components/AppliersList/AppliersListView.js
index be455f7..1f10346 100644
--- a/src/Components/AppliersList/AppliersListView.js
+++ b/src/Components/AppliersList/AppliersListView.js
@@ -1,5 +1,5 @@
 import { ComponentView } from '@/modules/Components/Component';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import USER_TYPE from '@/modules/UserSession/UserType';
 import AppliersListViewHbs from './appliers-list.hbs';
 
diff --git a/src/Components/CvArticle/CvArticleController.js b/src/Components/CvArticle/CvArticleController.js
index 8ef477e..14ba1aa 100644
--- a/src/Components/CvArticle/CvArticleController.js
+++ b/src/Components/CvArticle/CvArticleController.js
@@ -1,6 +1,6 @@
 import { ComponentController } from '@/modules/Components/Component';
 import { GO_TO, REDIRECT_TO, CV_DELETE, CV_EDIT } from '@/modules/Events/Events';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import { CvPage } from '@/Pages/CvPage/CvPage';
 import eventBus from '@/modules/Events/EventBus';
 
diff --git a/src/Components/CvForm/CvFormController.js b/src/Components/CvForm/CvFormController.js
index e053649..5e11fc1 100644
--- a/src/Components/CvForm/CvFormController.js
+++ b/src/Components/CvForm/CvFormController.js
@@ -7,7 +7,7 @@ import {
 } from '@/modules/Events/Events';
 import { CvPage } from '@/Pages/CvPage/CvPage';
 import { Cv } from '@/modules/models/Cv';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import eventBus from '@/modules/Events/EventBus';
 import { NOTIFICATION_TIMEOUT } from '@/Components/NotificationBox/NotificationBox.js';
 import { catchStandardResponseError } from '@/modules/app_errors/Errors.js';
diff --git a/src/Components/CvForm/CvFormModel.js b/src/Components/CvForm/CvFormModel.js
index 77acc77..f2f1235 100644
--- a/src/Components/CvForm/CvFormModel.js
+++ b/src/Components/CvForm/CvFormModel.js
@@ -1,6 +1,6 @@
 import { ComponentModel } from '@/modules/Components/Component';
 import { Cv } from '@/modules/models/Cv';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import { zip } from '@common_utils/object_utils/zip';
 import eventBus from '@/modules/Events/EventBus';
 import { REDIRECT_TO } from '@/modules/Events/Events';
diff --git a/src/Components/EmployerRegistrationForm/EmployerRegistrationFormController.js b/src/Components/EmployerRegistrationForm/EmployerRegistrationFormController.js
index 0e9ea73..31089ce 100644
--- a/src/Components/EmployerRegistrationForm/EmployerRegistrationFormController.js
+++ b/src/Components/EmployerRegistrationForm/EmployerRegistrationFormController.js
@@ -1,6 +1,6 @@
 import { ComponentController } from '@/modules/Components/Component';
 import router from '@/modules/Router/Router';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import { REGISTER_EMPLOYER } from '@/modules/Events/Events';
 
 export class EmployerRegistrationFormController extends ComponentController {
diff --git a/src/Components/FormInputs/ValidatedTextArea/ValidatedTextArea.js b/src/Components/FormInputs/ValidatedTextArea/ValidatedTextArea.js
deleted file mode 100644
index 6d25716..0000000
--- a/src/Components/FormInputs/ValidatedTextArea/ValidatedTextArea.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ValidatedInputModel } from '@/Components/FormInputs/ValidatedInput/ValidatedInputModel';
-import { ValidatedTextAreaView } from './ValidatedTextAreaView';
-import { ValidatedInputController } from '@/Components/FormInputs/ValidatedInput/ValidatedInputController';
-import { Component } from '@/modules/Components/Component';
-
-export class ValidatedTextArea extends Component {
-  constructor({ existingElement, selfValidate }) {
-    super({
-      modelClass: ValidatedInputModel,
-      viewClass: ValidatedTextAreaView,
-      controllerClass: ValidatedInputController,
-      existingElement,
-      controllerParams: { selfValidate },
-    });
-  }
-}
diff --git a/src/Components/FormInputs/ValidatedTextArea/ValidatedTextAreaView.js b/src/Components/FormInputs/ValidatedTextArea/ValidatedTextAreaView.js
deleted file mode 100644
index 955f777..0000000
--- a/src/Components/FormInputs/ValidatedTextArea/ValidatedTextAreaView.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import { addEventListeners } from '@/modules/Events/EventUtils';
-import eventBus from '@/modules/Events/EventBus';
-import { VALIDATE_INPUT } from '@/modules/Events/Events';
-import ValidatedTextAreaHbs from './validated-textarea.hbs';
-
-export class ValidatedTextAreaView extends ComponentView {
-  #field;
-  #state;
-  #error;
-
-  OK_CLASS = 'validated-input__input_ok';
-  ERROR_CLASS = 'validated-input__input_error';
-  NEUTRAL_CLASS = '';
-  DISABLED_CLASS = 'validated-textarea__textarea_disabled';
-
-  constructor({ elementClass, inputCaption, inputName }, existingElement) {
-    super({
-      templateName: ValidatedTextAreaHbs,
-      renderParams: { elementClass, inputCaption, inputName },
-      existingElement,
-    });
-    this.#field = this._html.querySelector('.validated-textarea__textarea');
-    this.#state = this.NEUTRAL_CLASS;
-    this.#error = this._html.querySelector('.validated-textarea__error');
-
-    this._eventListeners.push({
-      object: this.#field,
-      event: 'focusout',
-      listener: function () {
-        eventBus.emit(VALIDATE_INPUT, { callerView: this });
-      }.bind(this),
-    });
-    addEventListeners(this._eventListeners);
-  }
-
-  getData() {
-    return this.#field.value;
-  }
-
-  switchState(newState) {
-    if (this.#state) {
-      this.#field.classList.remove(this.#state);
-    }
-    this.#state = newState;
-    if (newState) {
-      this.#field.classList.add(newState);
-    }
-  }
-
-  approveValidation() {
-    this.switchState(this.OK_CLASS);
-    this.#error.hidden = true;
-  }
-
-  declineValidation(errorMessage) {
-    this.switchState(this.ERROR_CLASS);
-    this.#error.innerText = errorMessage;
-    this.#error.hidden = false;
-  }
-
-  resetValidation() {
-    this.switchState(this.NEUTRAL_CLASS);
-    this.#error.hidden = true;
-  }
-
-  disable() {
-    this.switchState(this.DISABLED_CLASS);
-    this.#field.disabled = true;
-  }
-
-  enable() {
-    this.resetValidation();
-    this.#field.disabled = false;
-  }
-}
diff --git a/src/Components/FormInputs/ValidatedTextArea/validated-textarea.hbs b/src/Components/FormInputs/ValidatedTextArea/validated-textarea.hbs
deleted file mode 100644
index dd2dd77..0000000
--- a/src/Components/FormInputs/ValidatedTextArea/validated-textarea.hbs
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class='{{formName}}__{{elementName}} {{formName}}__validated-textarea validated-textarea'>
-  <label
-    for='{{formName}}__{{elementName}}'
-    class='text_roboto-regular validated-textarea__label'
-  >{{inputCaption}}</label>
-  <textarea
-    class='validated-textarea__textarea
-      {{formName}}__{{elementName}}-textarea
-      {{inputModificators}}
-      text_roboto-regular'
-    id='{{formName}}__{{elementName}}'
-    name='{{inputName}}'
-  ></textarea>
-  <span class='validated-textarea__error text_roboto-regular' hidden>Ошибка! Длина пароля слишком
-    мала!</span>
-</div>
\ No newline at end of file
diff --git a/src/Components/Header/Header.js b/src/Components/Header/Header.js
deleted file mode 100644
index 1b682eb..0000000
--- a/src/Components/Header/Header.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { HeaderController } from './HeaderController';
-import { HeaderModel } from './HeaderModel';
-import { HeaderView } from './HeaderView';
-
-export class Header extends Component {
-  constructor({ viewParams, existingElement }) {
-    super({
-      modelClass: HeaderModel,
-      controllerClass: HeaderController,
-      viewClass: HeaderView,
-      viewParams,
-      existingElement,
-    });
-  }
-
-  static getViewParams() {
-    return HeaderView.getViewParams();
-  }
-}
diff --git a/src/Components/Header/HeaderController.js b/src/Components/Header/HeaderController.js
deleted file mode 100644
index a7df404..0000000
--- a/src/Components/Header/HeaderController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-
-export const HeaderController = ComponentController;
diff --git a/src/Components/Header/HeaderModel.js b/src/Components/Header/HeaderModel.js
deleted file mode 100644
index 4ad57ee..0000000
--- a/src/Components/Header/HeaderModel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-
-export const HeaderModel = ComponentModel;
diff --git a/src/Components/Header/HeaderView.js b/src/Components/Header/HeaderView.js
deleted file mode 100644
index 20b79b7..0000000
--- a/src/Components/Header/HeaderView.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import eventBus from '@/modules/Events/EventBus';
-import { USER_WANTS_LOGOUT } from '@/modules/Events/Events';
-import state from '@/modules/AppState/AppState';
-import USER_TYPE from '@/modules/UserSession/UserType';
-import { addEventListeners } from '@/modules/Events/EventUtils';
-import HeaderHbs from './header.hbs';
-import profileMenuIconSvg from '@static/img/profile-menu-icon.svg';
-import notificationIconSvg from '@static/img/notification-icon-36.svg';
-import menuIconSvg from '@static/img/menu-icon-48.svg';
-import cvMenuIconSvg from '@static/img/cv-menu-icon.svg';
-import vacancyMenuIconSvg from '@static/img/vacancy-menu-icon.svg';
-import logoutMenuIconSvg from '@static/img/logout-menu-icon.svg';
-
-export class HeaderView extends ComponentView {
-  #logoutButton;
-  #openDropdownButton;
-  #dropdown;
-  #dropdownShown;
-
-  constructor({ userType, userAuthenticated, userFullName, isApplicant }, existingElement) {
-    super({
-      renderParams: {
-        userType,
-        userAuthenticated,
-        userFullName,
-        isApplicant,
-        profileMenuIcon: profileMenuIconSvg,
-        notificationIcon: notificationIconSvg,
-        menuIcon: menuIconSvg,
-        cvMenuIcon: cvMenuIconSvg,
-        vacancyMenuIcon: vacancyMenuIconSvg,
-        logoutMenuIcon: logoutMenuIconSvg,
-        avatar: state.userSession.avatar,
-      },
-      existingElement,
-      templateName: HeaderHbs,
-    });
-    this.#dropdown = this._html.querySelector('.header__dropdown');
-    this.#openDropdownButton = this._html.querySelector('.header__menu-open-button');
-    if (this.#dropdown) {
-      this.#dropdownShown = true;
-      this.toggleDropdown();
-      this._eventListeners.push(
-        {
-          object: window,
-          event: 'click',
-          listener: function (ev) {
-            if (!this.#dropdownShown || Object.is(ev.target, this.#openDropdownButton)) {
-              return;
-            }
-            const clickedInsideDropdown =
-              this.#dropdown.contains(ev.target) || Object.is(this.#dropdown, ev.target);
-            if (!clickedInsideDropdown) {
-              this.toggleDropdown();
-            }
-          }.bind(this),
-        },
-        {
-          object: this.#openDropdownButton,
-          event: 'click',
-          listener: this.toggleDropdown.bind(this),
-        },
-      );
-    }
-    this.#logoutButton = this._html.querySelector('.header__logout-button');
-    if (this.#logoutButton) {
-      this._eventListeners.push({
-        object: this.#logoutButton,
-        event: 'click',
-        listener: (ev) => {
-          ev.preventDefault();
-          eventBus.emit(USER_WANTS_LOGOUT);
-        },
-      });
-    }
-    addEventListeners(this._eventListeners);
-  }
-
-  toggleDropdown() {
-    if (this.#dropdownShown) {
-      this.#dropdown.style.visibility = 'hidden';
-    } else {
-      this.#dropdown.style.visibility = 'visible';
-    }
-    this.#dropdownShown = !this.#dropdownShown;
-  }
-  static getViewParams() {
-    return {
-      userAuthenticated: state.userSession.isLoggedIn,
-      userType: state.userSession.russianUserType,
-      isApplicant: state.userSession.userType === USER_TYPE.APPLICANT,
-      userFullName: state.userSession.getUserFullName(),
-      profileMenuIcon: profileMenuIconSvg,
-      notificationIcon: notificationIconSvg,
-      menuIcon: menuIconSvg,
-      cvMenuIcon: cvMenuIconSvg,
-      vacancyMenuIcon: vacancyMenuIconSvg,
-      logoutMenuIcon: logoutMenuIconSvg,
-      avatar: state.userSession.avatar,
-    };
-  }
-}
diff --git a/src/Components/Header/header.hbs b/src/Components/Header/header.hbs
deleted file mode 100644
index e696b9c..0000000
--- a/src/Components/Header/header.hbs
+++ /dev/null
@@ -1,54 +0,0 @@
-<div class='header-container'>
-  <nav class='header-container__header header text_roboto-light'>
-    <a class='header__logo logo' href='{{url "vacancies" ""}}'>&mu;Art</a>
-    {{#if userAuthenticated}}
-      <div class='header__authorized-container'>
-        <img class='header__notification-button' src='{{notificationIcon}}' />
-        <img class='header__user-avatar' src='{{avatar}}' />
-        <img class='header__menu-open-button' src='{{menuIcon}}' />
-        <div class='header__dropdown popup-element'>
-          <div class='header__user-info'>
-            <div class='header__user-name'>{{userFullName}}</div>
-            <div class='header__user-type'>{{userType}}</div>
-          </div>
-          <div class='header__dropdown-separator'></div>
-          <div class='header__menu menu'>
-            <a class='header__profile-button menu__element' href='{{url "myProfile" ""}}'>
-              <img class='menu__element-icon' src='{{profileMenuIcon}}' />
-              Профиль пользователя</a>
-            {{#if isApplicant}}
-              <a class='header__cv-button menu__element' href="{{url "myProfile" ""}}?from=cvList">
-                <img class='menu__element-icon' src='{{cvMenuIcon}}' />
-                Мои резюме
-              </a>
-              {{!-- <a class='header__portfolio-button menu__element' href="{{url "myProfile" ""}}?from=portfolioList">
-                <img class='menu__element-icon' src='{{static "/img/portfolio-menu-icon.svg"}}' />
-                Портфолио
-              </a> --}}
-            {{else}}
-              <a class='header__vacancy-button menu__element' href="{{url "myProfile" ""}}?from=vacancyList">
-                <img class='menu__element-icon' src='{{vacancyMenuIcon}}' />
-                Мои вакансии
-              </a>
-            {{/if}}
-            <a class='header__logout-button menu__element'>
-              <img class='menu__element-icon' src='{{logoutMenuIcon}}' />
-              Выйти
-            </a>
-          </div>
-        </div>
-      </div>
-    {{else}}
-      <div class='header__not-authorized-container'>
-        <a
-          class='header__login-button button button_main-primary'
-          href='{{url "login" ""}}'
-        >Вход</a>
-        <a
-          class='header__registration-button button button_main-secondary'
-          href='{{url "register" ""}}'
-        >Регистрация</a>
-      </div>
-    {{/if}}
-  </nav>
-</div>
\ No newline at end of file
diff --git a/src/Components/Lists/ApplicantCvList/ApplicantCvList.js b/src/Components/Lists/ApplicantCvList/ApplicantCvList.js
index d3658e7..4026d28 100644
--- a/src/Components/Lists/ApplicantCvList/ApplicantCvList.js
+++ b/src/Components/Lists/ApplicantCvList/ApplicantCvList.js
@@ -3,7 +3,7 @@ import { ApplicantCvListModel } from './ApplicantCvListModel';
 import { ApplicantCvListController } from './ApplicantCvListController';
 import { ApplicantCvListView } from './ApplicantCvListView';
 import { ListMixin } from '@/Components/Lists/List/ListMixin';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 
 export class ApplicantCvList extends Component {
   constructor({ userId, isListOwner, elementClass, existingElement }) {
diff --git a/src/Components/Lists/ApplicantCvList/ApplicantCvListModel.js b/src/Components/Lists/ApplicantCvList/ApplicantCvListModel.js
index 621a685..dd801e1 100644
--- a/src/Components/Lists/ApplicantCvList/ApplicantCvListModel.js
+++ b/src/Components/Lists/ApplicantCvList/ApplicantCvListModel.js
@@ -1,6 +1,6 @@
 import { ComponentModel } from '@/modules/Components/Component';
 import { Minicard } from '@/Components/Minicard/Minicard';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import { Cv } from '@/modules/models/Cv';
 import { CvPage } from '@/Pages/CvPage/CvPage';
 import appState from '@/modules/AppState/AppState';
diff --git a/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListModel.js b/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListModel.js
index 172091b..3e9c9e4 100644
--- a/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListModel.js
+++ b/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListModel.js
@@ -1,7 +1,7 @@
 import { ComponentModel } from '@/modules/Components/Component';
 import { Api } from '@/modules/api/Api';
 import { Minicard } from '@/Components/Minicard/Minicard';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 
 export class ApplicantPortfolioListModel extends ComponentModel {
   #userId;
diff --git a/src/Components/Lists/EmployerVacancyList/EmployerVacancyList.js b/src/Components/Lists/EmployerVacancyList/EmployerVacancyList.js
index 42c0242..dc354f9 100644
--- a/src/Components/Lists/EmployerVacancyList/EmployerVacancyList.js
+++ b/src/Components/Lists/EmployerVacancyList/EmployerVacancyList.js
@@ -3,7 +3,7 @@ import { EmployerVacancyListModel } from './EmployerVacancyListModel';
 import { EmployerVacancyListController } from './EmployerVacancyListController';
 import { EmployerVacancyListView } from './EmployerVacancyListView';
 import { ListMixin } from '@/Components/Lists/List/ListMixin';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 
 export class EmployerVacancyList extends Component {
   constructor({ userId, isListOwner, elementClass, existingElement }) {
diff --git a/src/Components/Lists/EmployerVacancyList/EmployerVacancyListModel.js b/src/Components/Lists/EmployerVacancyList/EmployerVacancyListModel.js
index 63f36cb..ae12ba0 100644
--- a/src/Components/Lists/EmployerVacancyList/EmployerVacancyListModel.js
+++ b/src/Components/Lists/EmployerVacancyList/EmployerVacancyListModel.js
@@ -1,6 +1,6 @@
 import { ComponentModel } from '@/modules/Components/Component';
 import { Minicard } from '@/Components/Minicard/Minicard';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import { Vacancy } from '@/modules/models/Vacancy';
 import { VacancyPage } from '@/Pages/VacancyPage/VacancyPage';
 import { getEmployerVacancies, deleteVacancy } from '@api/api';
diff --git a/src/Components/LoginForm/LoginForm.js b/src/Components/LoginForm/LoginForm.js
deleted file mode 100644
index 87a20fc..0000000
--- a/src/Components/LoginForm/LoginForm.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { EmailInput } from '@/Components/FormInputs/EmailInput/EmailInput';
-import { UserTypeRadiogroup } from '@/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroup';
-import { PasswordInput } from '@/Components/FormInputs/PasswordInput/PasswordInput';
-import { LoginFormController } from './LoginFormController';
-import { LoginFormModel } from './LoginFormModel';
-import { LoginFormView } from './LoginFormView';
-
-export class LoginForm extends Component {
-  constructor({ viewParams, existingElement }) {
-    super({
-      modelClass: LoginFormModel,
-      viewClass: LoginFormView,
-      existingElement,
-      viewParams,
-      controllerClass: LoginFormController,
-    });
-    this._emailInput = new EmailInput({ existingElement: this._view.emailField });
-    this._passInput = new PasswordInput({ existingElement: this._view.passField });
-    this._userTypeRadioGroup = new UserTypeRadiogroup({
-      existingElement: this._view.userTypeRadioGroup,
-    });
-    this._children.push(this._emailInput, this._passInput, this._userTypeRadioGroup);
-  }
-
-  get emailInput() {
-    return this._emailInput;
-  }
-
-  get passInput() {
-    return this._passInput;
-  }
-
-  get userTypeRadioGroup() {
-    return this._userTypeRadioGroup;
-  }
-}
diff --git a/src/Components/LoginForm/LoginFormController.js b/src/Components/LoginForm/LoginFormController.js
deleted file mode 100644
index da49fae..0000000
--- a/src/Components/LoginForm/LoginFormController.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-import { USER_WANTS_LOGIN } from '@/modules/Events/Events';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
-import router from '@/modules/Router/Router';
-import { NOTIFICATION_OK } from '@/modules/Events/Events';
-import eventBus from '@/modules/Events/EventBus';
-
-export class LoginFormController extends ComponentController {
-  constructor(model, view, component) {
-    super(model, view, component);
-    this.setHandlers([
-      {
-        event: USER_WANTS_LOGIN,
-        handler: this.login.bind(this),
-      },
-    ]);
-  }
-
-  _validate(formData) {
-    const formValidationError = this._model.validate(formData);
-    if (formValidationError) {
-      this._view.declineValidation(formValidationError);
-      return false;
-    }
-    if (
-      ![
-        this._component.emailInput._controller.validateInput({
-          callerView: this._component.emailInput.view,
-        }),
-        this._component.passInput._controller.validateInput({
-          callerView: this._component.passInput.view,
-        }),
-      ].every((val) => val)
-    ) {
-      return false;
-    }
-    return true;
-  }
-
-  login(formData) {
-    if (!this._validate(formData)) {
-      return;
-    }
-    this._model
-      .login(formData)
-      .then(() => {
-        eventBus.emit(NOTIFICATION_OK, { message: 'Вы успешно вошли', timeout: 3000 });
-        router.navigate(new URL(resolveUrl('vacancies')), true, true);
-      })
-      .catch((errorMsg) => {
-        this._view.declineValidation(errorMsg);
-      });
-  }
-}
diff --git a/src/Components/LoginForm/LoginFormModel.js b/src/Components/LoginForm/LoginFormModel.js
deleted file mode 100644
index 4b1fe81..0000000
--- a/src/Components/LoginForm/LoginFormModel.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-import state from '@/modules/AppState/AppState';
-import { TransportError, ResponseError } from '@api/api';
-import { WRONG_AUTH_ERROR } from '@/modules/app_errors/Errors';
-
-export class LoginFormModel extends ComponentModel {
-  validate(formData) {
-    const hasEmptyFields = Object.values(formData).some((fieldValue) => {
-      return !fieldValue.trim();
-    });
-    if (hasEmptyFields) {
-      return 'Заполните пустые поля';
-    }
-    return '';
-  }
-
-  async login(formData) {
-    return state.userSession.login(formData).catch((err) => {
-      if (err.message === WRONG_AUTH_ERROR) {
-        return Promise.reject('Неверная почта или пароль');
-      }
-      if (err instanceof TransportError) {
-        return Promise.reject('Произошла сетевая ошибка, повторите позднее');
-      }
-      if (err instanceof ResponseError) {
-        return Promise.reject('Произошла непредвиденная ошибка, повторите позднее');
-      }
-      return Promise.reject(err);
-    });
-  }
-}
diff --git a/src/Components/LoginForm/LoginFormView.js b/src/Components/LoginForm/LoginFormView.js
deleted file mode 100644
index 03ffcdf..0000000
--- a/src/Components/LoginForm/LoginFormView.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import { NOTIFICATION_ERROR, USER_WANTS_LOGIN } from '@/modules/Events/Events';
-import { addEventListeners } from '@/modules/Events/EventUtils';
-import { NOTIFICATION_TIMEOUT } from '@/Components/NotificationBox/NotificationBox';
-import eventBus from '@/modules/Events/EventBus';
-import LoginFormHbs from './login-form.hbs';
-
-export class LoginFormView extends ComponentView {
-  #emailField;
-  #passField;
-  #userTypeRadioGroup;
-  constructor({ elementClass }, existingElement) {
-    super({
-      renderParams: { elementClass },
-      existingElement,
-      templateName: LoginFormHbs,
-    });
-    this._eventListeners.push({
-      event: 'submit',
-      object: this._html,
-      listener: function (ev) {
-        ev.preventDefault();
-        eventBus.emit(USER_WANTS_LOGIN, this.getData());
-      }.bind(this),
-    });
-    addEventListeners(this._eventListeners);
-    this.#userTypeRadioGroup = this._html.querySelector('.login-form__user-type-radiogroup');
-    this.#emailField = this._html.querySelector('.login-form__email');
-    this.#passField = this._html.querySelector('.login-form__password');
-  }
-
-  get userTypeRadioGroup() {
-    return this.#userTypeRadioGroup;
-  }
-
-  get emailField() {
-    return this.#emailField;
-  }
-
-  get passField() {
-    return this.#passField;
-  }
-
-  declineValidation(errorMessage) {
-    eventBus.emit(NOTIFICATION_ERROR, {
-      message: errorMessage,
-      timeout: NOTIFICATION_TIMEOUT.MEDIUM,
-    });
-  }
-
-  getData() {
-    const formData = new FormData(this._html);
-    const dataObj = {};
-    formData.entries().forEach((entry) => {
-      dataObj[entry[0]] = entry[1];
-    });
-    return dataObj;
-  }
-}
diff --git a/src/Components/LoginForm/login-form.hbs b/src/Components/LoginForm/login-form.hbs
deleted file mode 100644
index b042c95..0000000
--- a/src/Components/LoginForm/login-form.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<form class="{{elementClass}} login-form" method="POST" novalidate>
-  {{> ../FormInputs/UserTypeRadiogroup/user-type-radiogroup.hbs elementClass="login-form__user-type-radiogroup"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="login-form" elementName="email" inputName="email" inputCaption="Электронная почта" inputType="email"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="login-form" elementName="password" inputName="password" inputCaption="Пароль" inputType="password"}}
-  <div class="login-form__button-container">
-    <button type="submit" class="login-form__button button button_main-primary">
-        Войти
-    </button>
-    <a class="login-container__go-back-button button button_main-tertiary" href="{{url "vacancies" ""}}">На главную</a>
-  </div>
-</form>
-      
diff --git a/src/Components/VacancyArticle/VacancyArticleController.js b/src/Components/VacancyArticle/VacancyArticleController.js
index 60f1db4..50c9173 100644
--- a/src/Components/VacancyArticle/VacancyArticleController.js
+++ b/src/Components/VacancyArticle/VacancyArticleController.js
@@ -7,7 +7,7 @@ import {
   VACANCY_EDIT,
   VACANCY_RESET_APPLY,
 } from '@/modules/Events/Events';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import eventBus from '@/modules/Events/EventBus';
 import { VacancyEditPage } from '@/Pages/VacancyEditPage/VacancyEditPage';
 
diff --git a/src/Components/VacancyForm/VacancyFormController.js b/src/Components/VacancyForm/VacancyFormController.js
index 9d11bf1..d08d663 100644
--- a/src/Components/VacancyForm/VacancyFormController.js
+++ b/src/Components/VacancyForm/VacancyFormController.js
@@ -2,7 +2,7 @@ import { ComponentController } from '@/modules/Components/Component';
 import { NOTIFICATION_OK, REDIRECT_TO, SUBMIT_FORM } from '@/modules/Events/Events';
 import { Vacancy } from '@/modules/models/Vacancy';
 import { VacancyPage } from '@/Pages/VacancyPage/VacancyPage';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import eventBus from '@/modules/Events/EventBus';
 import { NOTIFICATION_ERROR } from '@/modules/Events/Events';
 import { NOTIFICATION_TIMEOUT } from '@/Components/NotificationBox/NotificationBox';
diff --git a/src/Components/VacancyForm/VacancyFormModel.js b/src/Components/VacancyForm/VacancyFormModel.js
index fd676c9..ca30bcb 100644
--- a/src/Components/VacancyForm/VacancyFormModel.js
+++ b/src/Components/VacancyForm/VacancyFormModel.js
@@ -1,6 +1,6 @@
 import { ComponentModel } from '@/modules/Components/Component';
 import { Vacancy } from '@/modules/models/Vacancy';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import { zip } from '@common_utils/object_utils/zip';
 import eventBus from '@/modules/Events/EventBus';
 import { REDIRECT_TO } from '@/modules/Events/Events';
diff --git a/src/Pages/CvEditPage/CvEditPage.js b/src/Pages/CvEditPage/CvEditPage.js
index 0283c92..5c84ff5 100644
--- a/src/Pages/CvEditPage/CvEditPage.js
+++ b/src/Pages/CvEditPage/CvEditPage.js
@@ -2,7 +2,7 @@ import { Header } from '@/Components/Header/Header';
 import state from '@/modules/AppState/AppState';
 import { Page } from '@/modules/Page/Page';
 import { ForbiddenPage, NotFoundError } from '@/modules/Router/Router';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import { CvEditPageController } from './CvEditPageController';
 import { CvEditPageModel } from './CvEditPageModel';
 import { CvEditPageView } from './CvEditPageView';
diff --git a/src/Pages/ProfilePage/ProfilePage.js b/src/Pages/ProfilePage/ProfilePage.js
index f1957e1..1aa8f79 100644
--- a/src/Pages/ProfilePage/ProfilePage.js
+++ b/src/Pages/ProfilePage/ProfilePage.js
@@ -4,7 +4,7 @@ import { ProfilePageController } from './ProfilePageController';
 import { ProfilePageModel } from './ProfilePageModel';
 import { ProfilePageView } from './ProfilePageView';
 import state from '@/modules/AppState/AppState';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import { FrameSeries } from '@/Components/FrameSeries/FrameSeries';
 import { CrudFormBox } from '@/Components/CrudFormBox/CrudFormBox';
 import { ApplicantProfileForm } from '@/Components/ApplicantProfileForm/ApplicantProfileForm';
diff --git a/src/Pages/VacanciesPage/VacanciesPageModel.js b/src/Pages/VacanciesPage/VacanciesPageModel.js
index dcba9c0..7433351 100644
--- a/src/Pages/VacanciesPage/VacanciesPageModel.js
+++ b/src/Pages/VacanciesPage/VacanciesPageModel.js
@@ -1,7 +1,7 @@
 import { PageModel } from '@/modules/Page/Page';
 import state from '@/modules/AppState/AppState';
 import USER_TYPE from '@/modules/UserSession/UserType';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import { AlertWindow } from '@/Components/AlertWindow/AlertWindow';
 import { VacancyCard } from '@/Components/VacancyCard/VacancyCard';
 import { Vacancy } from '@/modules/models/Vacancy';
diff --git a/src/Pages/VacancyEditPage/VacancyEditPage.js b/src/Pages/VacancyEditPage/VacancyEditPage.js
index 37894c9..5dd4dc6 100644
--- a/src/Pages/VacancyEditPage/VacancyEditPage.js
+++ b/src/Pages/VacancyEditPage/VacancyEditPage.js
@@ -2,7 +2,7 @@ import { Header } from '@/Components/Header/Header';
 import state from '@/modules/AppState/AppState';
 import { Page } from '@/modules/Page/Page';
 import { ForbiddenPage, NotFoundError } from '@/modules/Router/Router';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import { VacancyEditPageController } from './VacancyEditPageController';
 import { VacancyEditPageModel } from './VacancyEditPageModel';
 import { VacancyEditPageView } from './VacancyEditPageView';
diff --git a/src/application/components/header/header.tsx b/src/application/components/header/header.tsx
index b398ed1..04f9e2c 100644
--- a/src/application/components/header/header.tsx
+++ b/src/application/components/header/header.tsx
@@ -1,7 +1,7 @@
 import * as vdom from '@/modules/vdom/virtual_dom';
 import { Component, VirtualNodeSpec } from '@/modules/vdom/virtual_node';
 import { userStore } from '@/application/stores/user_store/user_store';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import profileMenuIconSvg from '@static/img/profile-menu-icon.svg';
 import notificationIconSvg from '@static/img/notification-icon-36.svg';
 import menuIconSvg from '@static/img/menu-icon-48.svg';
@@ -51,7 +51,7 @@ export class Header extends Component {
                 <div className="header__user-name">
                   {userData.userProfile.firstName + ' ' + userData.userProfile.secondName}
                 </div>
-                <div className="header__user-type">{userData.userType}</div>
+                <div className="header__user-type">{userData.russianUserType}</div>
               </div>
               <div className="header__dropdown-separator"></div>
               <div className="header__menu menu">
diff --git a/src/application/components/input/input.scss b/src/application/components/input/input.scss
index 4f918de..da4fed6 100644
--- a/src/application/components/input/input.scss
+++ b/src/application/components/input/input.scss
@@ -20,6 +20,10 @@
       color: var(--color-background-400);
     }
 
+    &_resize-vertical {
+      resize: vertical;
+    }
+
     &_ok {
       box-shadow: inset 0px 0px 6px var(--color-main-400);
     }
diff --git a/src/application/components/input/input.tsx b/src/application/components/input/input.tsx
index 861bc07..29edcab 100644
--- a/src/application/components/input/input.tsx
+++ b/src/application/components/input/input.tsx
@@ -14,6 +14,7 @@ export interface InputProps {
   error?: string;
   isValid?: boolean;
   maxlength?: number;
+  hasResizeVertical?: boolean;
 }
 
 export class Input extends Component {
@@ -52,15 +53,23 @@ export class Input extends Component {
           {this.props.label}
           {this.props.isRequired ? <span className="input__required-sign">*</span> : ''}
         </label>
-        <input
-          type={this.props.type}
-          className={`input__field ${this.props.isValid !== undefined ? (this.props.isValid ? 'input__field_ok' : 'input__field_error') : ''}`}
-          name={this.props.name}
-          id={this.props.id}
-          placeholder={this.props.placeholder}
-          maxlength={this.props.maxlength}
-          value={this.props.value}
-        />
+        {this.props.type !== 'textarea' ? (
+          <input
+            type={this.props.type}
+            className={`input__field ${this.props.isValid !== undefined ? (this.props.isValid ? 'input__field_ok' : 'input__field_error') : ''}`}
+            name={this.props.name}
+            id={this.props.id}
+            placeholder={this.props.placeholder}
+            maxlength={this.props.maxlength}
+            value={this.props.value}
+          />
+        ) : (
+          <textarea
+            className={`input__field ${this.props.isValid !== undefined ? (this.props.isValid ? 'input__field_ok' : 'input__field_error') : ''} ${this.props.hasResizeVertical ? 'input__field_resize-vertical' : ''}`}
+            name={this.props.name}
+            id={this.props.id}
+          ></textarea>
+        )}
         {this.props.isValid === false && this.props.error !== '' ? (
           <span className="input__error-text">{this.props.error ?? false}</span>
         ) : (
diff --git a/src/application/components/user_type_select/user_type_select.tsx b/src/application/components/user_type_select/user_type_select.tsx
index 1ba59e7..e3e354d 100644
--- a/src/application/components/user_type_select/user_type_select.tsx
+++ b/src/application/components/user_type_select/user_type_select.tsx
@@ -5,17 +5,27 @@ import './user_type_select.scss';
 
 export interface UserTypeSelectProps {
   elementClass?: string;
+  setUserType?: (userType: UserType) => void;
+  initialChecked?: UserType;
 }
 
 export class UserTypeSelect extends Component {
-  private checked: UserType = UserType.Applicant;
-  constructor({ elementClass = '' }: UserTypeSelectProps) {
-    super({ elementClass });
+  private checked: UserType;
+  constructor({
+    elementClass = '',
+    setUserType,
+    initialChecked = UserType.Applicant,
+  }: UserTypeSelectProps) {
+    super({ elementClass, setUserType, initialChecked });
+    this.checked = initialChecked;
   }
 
   private setActive = (userType: UserType) => {
     this.checked = userType;
     vdom.updateNode(this.domNode, vdom.createElement('UserTypeSelect', this.props));
+    if (this.props.setUserType) {
+      (this.props.setUserType as (userType: UserType) => void)(userType);
+    }
   };
   render() {
     return (
diff --git a/src/application/pages/login_page/login-page.scss b/src/application/pages/login_page/login-page.scss
index ea8503d..386b192 100644
--- a/src/application/pages/login_page/login-page.scss
+++ b/src/application/pages/login_page/login-page.scss
@@ -1,11 +1,24 @@
+@use '@/scss/variables' as v;
+
+@media screen and (min-width: v.$mobile-breakpoint) {
+  .login-page {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin-top: 0px;
+  }
+}
+
 .login-page {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: center;
   width: var(--4-col);
-  max-width: 400px;
+  max-width: 425px;
   padding: 16px;
+  margin-top: 16px;
 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -13,11 +26,6 @@
 
   border-radius: var(--radius-m);
 
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-
   &_theme-dark {
     background-color: var(--color-background-900);
   }
diff --git a/src/application/pages/login_page/login_page.tsx b/src/application/pages/login_page/login_page.tsx
index d05a453..f7aab55 100644
--- a/src/application/pages/login_page/login_page.tsx
+++ b/src/application/pages/login_page/login_page.tsx
@@ -3,7 +3,7 @@ import * as vdom from '@/modules/vdom/virtual_dom';
 import './login-page.scss';
 import { Input } from '@/application/components/input/input';
 import { UserTypeSelect } from '@/application/components/user_type_select/user_type_select';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 import { userStore } from '@/application/stores/user_store/user_store';
 import { userActionCreators } from '@/application/action_creators/user_action_creators';
 import { LoginOptions } from '@/modules/api/src/handlers/auth/login';
diff --git a/src/application/pages/registration_page/registration_page.scss b/src/application/pages/registration_page/registration_page.scss
new file mode 100644
index 0000000..80af4df
--- /dev/null
+++ b/src/application/pages/registration_page/registration_page.scss
@@ -0,0 +1,87 @@
+.registration-page {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  width: var(--4-col);
+  max-width: 425px;
+  padding: 16px;
+  margin-top: 16px;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  border-radius: var(--radius-m);
+
+  &_theme-dark {
+    background-color: var(--color-background-900);
+  }
+
+  &__header {
+    margin-top: 0px;
+    text-align: center;
+    margin-bottom: 20px;
+    color: var(--color-main-100);
+  }
+
+  &__header-text {
+    margin: 0;
+  }
+
+  &__user-type-select {
+    margin-bottom: 20px;
+  }
+
+  &__button-container {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 16px;
+  }
+
+  &__registration-form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__first-name {
+    margin-bottom: 20px;
+  }
+
+  &__second-name {
+    margin-bottom: 20px;
+  }
+
+  &__birthdate {
+    margin-bottom: 20px;
+  }
+
+  &__email {
+    margin-bottom: 20px;
+  }
+
+  &__password {
+    margin-bottom: 20px;
+  }
+
+  &__password-repeat {
+    margin-bottom: 20px;
+  }
+
+  &__position {
+    margin-bottom: 20px;
+  }
+
+  &__company-name {
+    margin-bottom: 20px;
+  }
+
+  &__company-description {
+    margin-bottom: 20px;
+  }
+
+  &__website {
+    margin-bottom: 20px;
+  }
+}
diff --git a/src/application/pages/registration_page/registration_page.tsx b/src/application/pages/registration_page/registration_page.tsx
new file mode 100644
index 0000000..d36a62f
--- /dev/null
+++ b/src/application/pages/registration_page/registration_page.tsx
@@ -0,0 +1,239 @@
+import { Component, VirtualNodeSpec } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { userStore } from '@/application/stores/user_store/user_store';
+import { routerActionCreators } from '@/application/action_creators/router_action_creators';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
+import { UserTypeSelect } from '@/application/components/user_type_select/user_type_select';
+import { UserType } from '@/application/models/user-type';
+import { Input } from '@/application/components/input/input';
+import './registration_page.scss';
+
+export class RegistrationPage extends Component {
+  private userType: UserType = UserType.Applicant;
+  private setUserType: (userType: UserType) => void;
+
+  constructor({ url }: { url: URL }) {
+    super({ url });
+    this.setUserType = (userType: UserType) => {
+      this.userType = userType;
+      this.domNode.virtualNode.root.update();
+    };
+  }
+
+  private handleSubmit = () => {
+    console.log('submit');
+  };
+  render(): VirtualNodeSpec {
+    const userData = userStore.getData();
+    if (userData.isLoggedIn) {
+      routerActionCreators.redirect(new URL(resolveUrl('vacancies', null)));
+    }
+    return (
+      <main key="registration-page" className="registration-page registration-page_theme-dark">
+        <div className="registration-page__header">
+          <h2 className="registration-page__header-text">Регистрация</h2>
+        </div>
+        <UserTypeSelect
+          key="user-type-select"
+          elementClass="registration-page__user-type-select"
+          setUserType={this.setUserType}
+        />
+
+        {this.userType === UserType.Applicant ? (
+          <form
+            className="registration-page__registration-form"
+            method="POST"
+            novalidate
+            onSubmit={this.handleSubmit}
+            id="registration-form"
+          >
+            <Input
+              key="input-first-name"
+              elementClass="registration-page__first-name"
+              id="first-name"
+              label="Имя"
+              name="firstName"
+              type="text"
+              placeholder="Иван"
+              isRequired={true}
+              maxlength={50}
+            />
+            <Input
+              key="input-second-name"
+              elementClass="registration-page__second-name"
+              id="second-name"
+              label="Фамилия"
+              name="secondName"
+              type="text"
+              placeholder="Иванов"
+              isRequired={true}
+              maxlength={50}
+            />
+            <Input
+              key="input-birthdate"
+              elementClass="registration-page__birthdate"
+              id="birthdate"
+              label="Дата Рождения"
+              name="birthDate"
+              type="date"
+              isRequired={true}
+              maxlength={50}
+            />
+            <Input
+              key="input-email"
+              elementClass="registration-page__email"
+              id="email"
+              label="Электронная почта"
+              name="email"
+              type="email"
+              placeholder="example@mail.ru"
+              isRequired={true}
+              maxlength={50}
+            />
+            <Input
+              key="input-password"
+              elementClass="registration-page__password"
+              id="password"
+              label="Пароль"
+              name="password"
+              type="password"
+              isRequired={true}
+              maxlength={50}
+            />
+            <Input
+              key="input-password-repeat"
+              elementClass="registration-page__password-repeat"
+              id="password-repeat"
+              label="Повторите пароль"
+              name="repeatPassword"
+              type="password"
+              isRequired={true}
+              maxlength={50}
+            />
+          </form>
+        ) : (
+          <form
+            className="registration-page__registration-form"
+            method="POST"
+            novalidate
+            onSubmit={this.handleSubmit}
+            id="registration-form"
+          >
+            <Input
+              key="input-first-name"
+              elementClass="registration-page__first-name"
+              id="first-name"
+              label="Имя"
+              name="firstName"
+              type="text"
+              placeholder="Иван"
+              isRequired={true}
+              maxlength={50}
+            />
+            <Input
+              key="input-second-name"
+              elementClass="registration-page__second-name"
+              id="second-name"
+              label="Фамилия"
+              name="secondName"
+              type="text"
+              placeholder="Иванов"
+              isRequired={true}
+              maxlength={50}
+            />
+            <Input
+              key="input-position"
+              elementClass="registration-page__position"
+              id="position"
+              label="Должность"
+              name="position"
+              type="text"
+              placeholder="Ведущий разработчик"
+              isRequired={true}
+              maxlength={100}
+            />
+            <Input
+              key="input-company-name"
+              elementClass="registration-page__company-name"
+              id="company-name"
+              label="Название компании"
+              name="companyName"
+              type="text"
+              placeholder="ООО Рога и Копыта"
+              isRequired={true}
+              maxlength={100}
+            />
+            <Input
+              key="input-company-description"
+              elementClass="registration-page__company-description"
+              id="company-description"
+              label="Описание компании"
+              name="companyDescription"
+              type="textarea"
+              isRequired={false}
+              maxlength={500}
+              hasResizeVertical={true}
+            />
+            <Input
+              key="input-company-website"
+              elementClass="registration-page__website"
+              id="website"
+              label="Сайт компании"
+              name="website"
+              type="text"
+              isRequired={false}
+              maxlength={100}
+              placeholder="https://example.com"
+            />
+            <Input
+              key="input-email"
+              elementClass="registration-page__email"
+              id="email"
+              label="Электронная почта"
+              name="email"
+              type="email"
+              placeholder="example@mail.ru"
+              isRequired={true}
+              maxlength={50}
+            />
+            <Input
+              key="input-password"
+              elementClass="registration-page__password"
+              id="password"
+              label="Пароль"
+              name="password"
+              type="password"
+              isRequired={true}
+              maxlength={50}
+            />
+            <Input
+              key="input-password-repeat"
+              elementClass="registration-page__password-repeat"
+              id="password-repeat"
+              label="Повторите пароль"
+              name="repeatPassword"
+              type="password"
+              isRequired={true}
+              maxlength={50}
+            />
+          </form>
+        )}
+        <div className="registration-page__button-container">
+          <button
+            type="submit"
+            form="registration-form"
+            className="registration-page__submit-button button button_main-primary"
+          >
+            Зарегистрироваться
+          </button>
+          <a
+            className="registration-page__back-button button button_main-tertiary"
+            href={resolveUrl('vacancies', null)}
+          >
+            На главную
+          </a>
+        </div>
+      </main>
+    );
+  }
+}
diff --git a/src/application/stores/user_store/user_store.ts b/src/application/stores/user_store/user_store.ts
index 89d6350..e943027 100644
--- a/src/application/stores/user_store/user_store.ts
+++ b/src/application/stores/user_store/user_store.ts
@@ -15,9 +15,15 @@ export interface LoginFormData {
   errorMsg?: string;
 }
 
+const userTypeTranslation = new Map<UserType, string>([
+  [UserType.Employer, 'Работодатель'],
+  [UserType.Applicant, 'Соискатель'],
+]);
+
 export interface UserData {
   isLoggedIn: boolean;
   userType?: UserType;
+  russianUserType?: string;
   id?: number;
   userProfile?: Applicant | Employer;
   loginForm?: LoginFormData;
@@ -36,6 +42,7 @@ function userStoreReducer(state: UserData, action: Action) {
       return {
         isLoggedIn: true,
         userType: payload.userType,
+        russianUserType: userTypeTranslation.get(payload.userType),
         id: payload.id,
         userProfile: payload.userProfile,
         loginForm: state.loginForm,
diff --git a/src/index.tsx b/src/index.tsx
index 5be6e6b..6365dae 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,7 +5,7 @@ import { LoginPage } from '@/application/pages/login_page/login_page';
 // import { ProfilePage } from './Pages/ProfilePage/ProfilePage';
 // import { VacancyPage } from './Pages/VacancyPage/VacancyPage';
 // import { VacancyEditPage } from './Pages/VacancyEditPage/VacancyEditPage';
-import { resolveUrl } from './modules/UrlUtils/UrlUtils';
+import { resolveUrl } from './modules/common_utils/url_utils/url_utils';
 // import { CvPage } from './Pages/CvPage/CvPage';
 // import { CvEditPage } from './Pages/CvEditPage/CvEditPage';
 import { NotificationBox } from './Components/NotificationBox/NotificationBox';
@@ -15,13 +15,13 @@ import { storeManager } from './modules/store_manager/store_manager';
 import { routerActionCreators } from './application/action_creators/router_action_creators';
 import { VirtualDomRoot } from './modules/vdom/virtual_dom_root';
 import { userActionCreators } from './application/action_creators/user_action_creators';
+import { RegistrationPage } from './application/pages/registration_page/registration_page';
 
 // eslint-disable-next-line
 const notificationBox = new NotificationBox({
   existingElement: document.querySelector('.notification-box'),
 });
 
-// router.addRoute(resolveUrl('register', null).pathname, RegistrationPage);
 // router.addRoute(resolveUrl('myProfile', null).pathname, ProfilePage);
 // router.addRoute(resolveUrl('profile', null).pathname, ProfilePage);
 // router.addRoute(resolveUrl('vacancy', null).pathname, VacancyPage);
@@ -35,6 +35,7 @@ const appRoot = new VirtualDomRoot(document.getElementById('app'));
 
 routerActionCreators.addRoute(resolveUrl('vacancies', null), VacanciesPage);
 routerActionCreators.addRoute(resolveUrl('login', null), LoginPage);
+routerActionCreators.addRoute(resolveUrl('register', null), RegistrationPage);
 routerActionCreators.startRouting(new URL(location.href));
 
 userActionCreators.isAuthorized().finally(() => {
diff --git a/src/modules/AppState/AppState.js b/src/modules/AppState/AppState.js
deleted file mode 100644
index a48a6ea..0000000
--- a/src/modules/AppState/AppState.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { UserSession } from '@/modules/UserSession/UserSession';
-import backendConfig from '@/config/backend.json';
-
-class AppState {
-  #userSession;
-  #backendUrl;
-  constructor({ backendUrl }) {
-    this.#backendUrl = backendUrl;
-    this.#userSession = new UserSession(this.#backendUrl);
-  }
-
-  get userSession() {
-    return this.#userSession;
-  }
-
-  get backendUrl() {
-    return this.#backendUrl;
-  }
-}
-
-export default new AppState({ backendUrl: new URL(backendConfig.backendPrefix) });
diff --git a/src/modules/Decorators/Decorators.js b/src/modules/Decorators/Decorators.js
deleted file mode 100644
index 8971236..0000000
--- a/src/modules/Decorators/Decorators.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export function throttle(func, ms) {
-  let isThrottled = false,
-    savedArgs,
-    savedThis;
-
-  function wrapper() {
-    if (isThrottled) {
-      savedArgs = arguments;
-      // eslint-disable-next-line @typescript-eslint/no-this-alias
-      savedThis = this;
-      return;
-    }
-    func.apply(this, arguments);
-
-    isThrottled = true;
-
-    setTimeout(function () {
-      isThrottled = false;
-      if (savedArgs) {
-        wrapper.apply(savedThis, savedArgs);
-        savedArgs = savedThis = null;
-      }
-    }, ms);
-  }
-  return wrapper;
-}
diff --git a/src/modules/UserSession/UserSession.js b/src/modules/UserSession/UserSession.js
deleted file mode 100644
index f127c3b..0000000
--- a/src/modules/UserSession/UserSession.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import {
-  getUserAuthenticationStatus,
-  login as apiLogin,
-  logout as apiLogout,
-  registerApplicant as apiRegisterApplicant,
-  registerEmployer as apiRegisterEmployer,
-  getEmployer as apiGetEmployer,
-  getApplicant as apiGetApplicant,
-} from '@api/api';
-import { resolveUrl } from '@/modules/UrlUtils/UrlUtils';
-import router from '@/modules/Router/Router';
-import { ForbiddenPage } from '@/modules/Router/Router';
-import { Applicant } from '@/modules/models/Applicant';
-import { Employer } from '@/modules/models/Employer';
-import USER_TYPE from './UserType';
-
-export const RUSSIAN_USER_TYPE = {};
-RUSSIAN_USER_TYPE[USER_TYPE.EMPLOYER] = 'Работодатель';
-RUSSIAN_USER_TYPE[USER_TYPE.APPLICANT] = 'Соискатель';
-
-export class UserSession {
-  #isLoggedIn;
-  #userType;
-  #user;
-  #backendUrl;
-
-  constructor(backendUrl) {
-    this.#isLoggedIn = false;
-    this.#userType = undefined;
-    this.#backendUrl = backendUrl;
-  }
-
-  async checkAuthorization() {
-    try {
-      const authResponse = await getUserAuthenticationStatus(this.#backendUrl);
-      this.#isLoggedIn = true;
-      this.#userType = authResponse.userType;
-      this.#user = await this.getUser(this.#userType, authResponse.id);
-    } catch (err) {
-      console.log(err);
-      this.#isLoggedIn = false;
-      this.#userType = undefined;
-      this.#user = undefined;
-      return err;
-    }
-  }
-
-  async login(body) {
-    try {
-      const loginResponse = await apiLogin(this.#backendUrl, body);
-      this.#isLoggedIn = true;
-      this.#userType = body.userType;
-      this.#user = await this.getUser(this.#userType, loginResponse.id);
-      return '';
-    } catch (err) {
-      console.log(err);
-      this.#isLoggedIn = false;
-      this.#userType = undefined;
-      this.#user = undefined;
-      throw err;
-    }
-  }
-
-  async logout() {
-    try {
-      await apiLogout(this.#backendUrl);
-      this.#isLoggedIn = false;
-      this.#userType = undefined;
-      this.#user = undefined;
-      router.navigate(new URL(location.href), true, false);
-    } catch (err) {
-      console.log(err);
-    }
-  }
-
-  async register(userType, body) {
-    try {
-      const response =
-        userType === USER_TYPE.APPLICANT
-          ? await apiRegisterApplicant(this.#backendUrl, body)
-          : await apiRegisterEmployer(this.#backendUrl, body);
-      this.#isLoggedIn = true;
-      this.#userType = userType;
-      this.#user = await this.getUser(this.#userType, response.id);
-    } catch (err) {
-      console.log(err);
-      this.#isLoggedIn = false;
-      this.#userType = undefined;
-      this.#user = undefined;
-      throw err;
-    }
-  }
-
-  async getUser(userType, id) {
-    return userType === USER_TYPE.APPLICANT
-      ? new Applicant(await apiGetApplicant(this.#backendUrl, id))
-      : new Employer(await apiGetEmployer(this.#backendUrl, id));
-  }
-
-  get isLoggedIn() {
-    return this.#isLoggedIn;
-  }
-
-  get userType() {
-    return this.#userType;
-  }
-
-  get russianUserType() {
-    return RUSSIAN_USER_TYPE[this.#userType];
-  }
-
-  get userId() {
-    return this.#user ? this.#user.id : undefined;
-  }
-
-  getUserFullName() {
-    return this.#user ? `${this.#user.firstName} ${this.#user.secondName}` : undefined;
-  }
-
-  get avatar() {
-    return this.#user ? this.#user.avatar : undefined;
-  }
-
-  goToHomePageIfLoggedIn() {
-    if (this.#isLoggedIn) {
-      throw new ForbiddenPage(resolveUrl('vacancies'));
-    }
-  }
-
-  goToHomePageIfNotLoggedIn() {
-    if (!this.#isLoggedIn) {
-      throw new ForbiddenPage(resolveUrl('vacancies'));
-    }
-  }
-}
diff --git a/src/modules/UserSession/UserType.js b/src/modules/UserSession/UserType.js
deleted file mode 100644
index 23e62f6..0000000
--- a/src/modules/UserSession/UserType.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const USER_TYPE = { APPLICANT: 'applicant', EMPLOYER: 'employer' };
-
-export default USER_TYPE;
diff --git a/src/modules/common_utils/decorators/decorators.ts b/src/modules/common_utils/decorators/decorators.ts
new file mode 100644
index 0000000..0fa20e8
--- /dev/null
+++ b/src/modules/common_utils/decorators/decorators.ts
@@ -0,0 +1,33 @@
+/**
+ * Decorator that throttles function execution to given `ms` milliseconds interval.
+ * @param func - function to throttle
+ * @param ms - throttling interval
+ * @returns  throttled function
+ */
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+export function throttle(func: Function, ms: number): Function {
+  let isThrottled = false,
+    savedArgs: unknown,
+    savedThis: unknown;
+
+  function wrapper(...args: unknown[]) {
+    if (isThrottled) {
+      savedArgs = args;
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      savedThis = this;
+      return;
+    }
+    func.apply(this, ...args);
+
+    isThrottled = true;
+
+    setTimeout(function () {
+      isThrottled = false;
+      if (savedArgs) {
+        wrapper.apply(savedThis, savedArgs);
+        savedArgs = savedThis = null;
+      }
+    }, ms);
+  }
+  return wrapper;
+}
diff --git a/src/modules/UrlUtils/UrlUtils.ts b/src/modules/common_utils/url_utils/url_utils.ts
similarity index 100%
rename from src/modules/UrlUtils/UrlUtils.ts
rename to src/modules/common_utils/url_utils/url_utils.ts
diff --git a/src/modules/vdom/virtual_dom.ts b/src/modules/vdom/virtual_dom.ts
index ebbd8a8..183fff4 100644
--- a/src/modules/vdom/virtual_dom.ts
+++ b/src/modules/vdom/virtual_dom.ts
@@ -72,10 +72,6 @@ export namespace JSX {
 }
 
 export function createNode(spec: VirtualNodeSpec | string): NodeWithVirtualNode {
-  if (typeof spec !== 'string' && typeof spec.type !== 'string') {
-    console.groupCollapsed(`${spec.type.name}: create`);
-  }
-
   const isTextNode = typeof spec === 'string';
   if (isTextNode) {
     return document.createTextNode(spec);
@@ -153,7 +149,6 @@ export function createNode(spec: VirtualNodeSpec | string): NodeWithVirtualNode
   newVirtualNode.state.domNode = domNode;
   newVirtualNode.state.didCreate();
 
-  console.groupEnd();
   return domNode;
 }
 
diff --git a/src/scss/_registration.scss b/src/scss/_registration.scss
index 744aadc..e69de29 100755
--- a/src/scss/_registration.scss
+++ b/src/scss/_registration.scss
@@ -1,133 +0,0 @@
-.registration-page {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  min-height: 100vh;
-
-  &__registration-container {
-    margin: 32px 0;
-    padding: 20px;
-    border-radius: 10px;
-    width: 100%;
-    max-width: 420px;
-    box-sizing: border-box;
-    background-color: var(--color-background-900);
-  }
-}
-
-.registration-container {
-  display: flex;
-  align-items: stretch;
-  flex-direction: column;
-  &__header {
-    margin-top: 0px;
-    text-align: center;
-    margin: 10px;
-    color: white;
-  }
-
-  &__button-container {
-    display: flex;
-    align-items: baseline;
-    gap: 20px;
-  }
-
-  &_ {
-    margin-bottom: 10px;
-  }
-
-  &__user-type-radiogroup {
-    margin-bottom: 20px;
-  }
-
-  &__submit-button {
-    margin-bottom: 10px;
-  }
-
-  &__ {
-    margin-bottom: 10px;
-  }
-}
-
-.applicant-registration-form {
-  display: flex;
-  flex-direction: column;
-  &__first-name {
-    margin-bottom: 10px;
-  }
-
-  &__second-name {
-    margin-bottom: 20px;
-  }
-
-  &__birthdate {
-    margin-bottom: 20px;
-  }
-
-  &__email {
-    margin-bottom: 10px;
-  }
-
-  &__password {
-    margin-bottom: 10px;
-  }
-
-  &__repeat-password {
-    margin-bottom: 20px;
-  }
-
-  &__error {
-    margin-bottom: 10px;
-    color: var(--color-secondary-support-500);
-  }
-}
-
-.employer-registration-form {
-  display: flex;
-  flex-direction: column;
-  &__first-name {
-    margin-bottom: 10px;
-  }
-
-  &__second-name {
-    margin-bottom: 20px;
-  }
-
-  &__position {
-    margin-bottom: 10px;
-  }
-
-  &__company-name {
-    margin-bottom: 10px;
-  }
-
-  &__company-description {
-    margin-bottom: 10px;
-  }
-
-  &__company-description-textarea {
-    resize: vertical;
-  }
-
-  &__website {
-    margin-bottom: 20px;
-  }
-
-  &__email {
-    margin-bottom: 10px;
-  }
-
-  &__password {
-    margin-bottom: 10px;
-  }
-
-  &__repeat-password {
-    margin-bottom: 20px;
-  }
-
-  &__error {
-    margin-bottom: 10px;
-    color: #aa0000;
-  }
-}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
new file mode 100644
index 0000000..86ac61f
--- /dev/null
+++ b/src/scss/_variables.scss
@@ -0,0 +1,4 @@
+$container-width: 1248px;
+$col-width: 82px;
+$col-margin: 24px;
+$mobile-breakpoint: 768px;
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 39e401b..5daf425 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -8,11 +8,7 @@
 @use 'vacancy';
 @use 'cv';
 @use 'common';
-
-$container-width: 1248px;
-$col-width: 82px;
-$col-margin: 24px;
-$mobile-breakpoint: 768px;
+@use 'variables' as v;
 
 :root {
   --color-background-1000: #102a43;
@@ -74,11 +70,11 @@ $mobile-breakpoint: 768px;
   --text-weight-regular: 400;
   --text-weight-bold: 600;
 
-  --mobile-breakpoint: #{$mobile-breakpoint};
+  --mobile-breakpoint: #{v.$mobile-breakpoint};
 
   --container-width: 100%;
   --col-width: 100%;
-  --col-margin: #{$col-margin};
+  --col-margin: #{v.$col-margin};
   --2-col: 100%;
   --3-col: 100%;
   --4-col: 100%;
@@ -97,19 +93,19 @@ $mobile-breakpoint: 768px;
   --radius-l: 24px;
 }
 
-@media screen and (min-width: $mobile-breakpoint) {
+@media screen and (min-width: v.$mobile-breakpoint) {
   :root {
-    --2-col: #{calc(2 * $col-width + $col-margin)};
-    --3-col: #{calc(3 * $col-width + 2 * $col-margin)};
-    --4-col: #{calc(4 * $col-width + 3 * $col-margin)};
-    --5-col: #{calc(5 * $col-width + 4 * $col-margin)};
-    --6-col: #{calc(6 * $col-width + 5 * $col-margin)};
-    --7-col: #{calc(7 * $col-width + 6 * $col-margin)};
-    --8-col: #{calc(8 * $col-width + 7 * $col-margin)};
-    --9-col: #{calc(9 * $col-width + 8 * $col-margin)};
-    --10-col: #{calc(10 * $col-width + 9 * $col-margin)};
-    --11-col: #{calc(11 * $col-width + 10 * $col-margin)};
-    --12-col: #{calc(12 * $col-width + 11 * $col-margin)};
+    --2-col: #{calc(2 * v.$col-width + v.$col-margin)};
+    --3-col: #{calc(3 * v.$col-width + 2 * v.$col-margin)};
+    --4-col: #{calc(4 * v.$col-width + 3 * v.$col-margin)};
+    --5-col: #{calc(5 * v.$col-width + 4 * v.$col-margin)};
+    --6-col: #{calc(6 * v.$col-width + 5 * v.$col-margin)};
+    --7-col: #{calc(7 * v.$col-width + 6 * v.$col-margin)};
+    --8-col: #{calc(8 * v.$col-width + 7 * v.$col-margin)};
+    --9-col: #{calc(9 * v.$col-width + 8 * v.$col-margin)};
+    --10-col: #{calc(10 * v.$col-width + 9 * v.$col-margin)};
+    --11-col: #{calc(11 * v.$col-width + 10 * v.$col-margin)};
+    --12-col: #{calc(12 * v.$col-width + 11 * v.$col-margin)};
   }
 }
 

From c560127678ed9a74c833f6f41774992b8460b69f Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Sat, 14 Dec 2024 08:51:32 +0300
Subject: [PATCH 08/17] feature: registration

---
 .../ApplicantRegistrationForm.js              |  52 -------
 .../ApplicantRegistrationFormController.js    |  71 ----------
 .../ApplicantRegistrationFormModel.js         |  34 -----
 .../ApplicantRegistrationFormView.js          |  46 -------
 .../applicant-registration-form.hbs           |   8 --
 .../EmployerRegistrationForm.js               |  68 ---------
 .../EmployerRegistrationFormController.js     |  74 ----------
 .../EmployerRegistrationFormModel.js          |  34 -----
 .../EmployerRegistrationFormView.js           |  52 -------
 .../employer-registration-form.hbs            |  11 --
 .../FormInputs/DateInput/DateInput.js         |  16 ---
 .../FormInputs/DateInput/DateInputModel.js    |  14 --
 .../action_creators/user_action_creators.ts   | 130 ++++++++++++++++--
 .../registration_page/registration_page.tsx   |  58 +++++++-
 .../stores/user_store/user_actions.ts         |   8 +-
 .../stores/user_store/user_store.ts           |  47 +++++++
 src/application/validators/validators.ts      |  47 +++++++
 src/scss/_forms.scss                          |  27 ----
 src/scss/index.scss                           |   1 -
 19 files changed, 273 insertions(+), 525 deletions(-)
 delete mode 100644 src/Components/ApplicantRegistrationForm/ApplicantRegistrationForm.js
 delete mode 100644 src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormController.js
 delete mode 100644 src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormModel.js
 delete mode 100644 src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormView.js
 delete mode 100644 src/Components/ApplicantRegistrationForm/applicant-registration-form.hbs
 delete mode 100644 src/Components/EmployerRegistrationForm/EmployerRegistrationForm.js
 delete mode 100644 src/Components/EmployerRegistrationForm/EmployerRegistrationFormController.js
 delete mode 100644 src/Components/EmployerRegistrationForm/EmployerRegistrationFormModel.js
 delete mode 100644 src/Components/EmployerRegistrationForm/EmployerRegistrationFormView.js
 delete mode 100644 src/Components/EmployerRegistrationForm/employer-registration-form.hbs
 delete mode 100644 src/Components/FormInputs/DateInput/DateInput.js
 delete mode 100644 src/Components/FormInputs/DateInput/DateInputModel.js
 delete mode 100644 src/scss/_forms.scss

diff --git a/src/Components/ApplicantRegistrationForm/ApplicantRegistrationForm.js b/src/Components/ApplicantRegistrationForm/ApplicantRegistrationForm.js
deleted file mode 100644
index 876c395..0000000
--- a/src/Components/ApplicantRegistrationForm/ApplicantRegistrationForm.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { LiteralInput } from '@/Components/FormInputs/LiteralInput/LiteralInput';
-import { ApplicantRegistrationFormController } from './ApplicantRegistrationFormController';
-import { ApplicantRegistrationFormModel } from './ApplicantRegistrationFormModel';
-import { ApplicantRegistrationFormView } from './ApplicantRegistrationFormView';
-import { EmailInput } from '@/Components/FormInputs/EmailInput/EmailInput';
-import { DateInput } from '@/Components/FormInputs/DateInput/DateInput';
-import { PasswordInput } from '@/Components/FormInputs/PasswordInput/PasswordInput';
-
-export class ApplicantRegistrationForm extends Component {
-  constructor({ viewParams, existingElement }) {
-    super({
-      modelClass: ApplicantRegistrationFormModel,
-      viewClass: ApplicantRegistrationFormView,
-      controllerClass: ApplicantRegistrationFormController,
-      existingElement,
-      viewParams,
-    });
-    this._firstNameField = new LiteralInput({
-      existingElement: this._view.firstNameField,
-      selfValidate: true,
-    });
-    this._secondNameField = new LiteralInput({
-      existingElement: this._view.secondNameField,
-      selfValidate: true,
-    });
-    this._birthDateField = new DateInput({
-      existingElement: this._view.birthDateField,
-      selfValidate: true,
-    });
-    this._emailField = new EmailInput({
-      existingElement: this._view.emailField,
-      selfValidate: true,
-    });
-    this._passwordField = new PasswordInput({
-      existingElement: this._view.passwordField,
-      selfValidate: true,
-    });
-    this._repeatPasswordField = new PasswordInput({
-      existingElement: this._view.repeatPasswordField,
-      selfValidate: false,
-    });
-    this._children.push(
-      this._firstNameField,
-      this._secondNameField,
-      this._birthDateField,
-      this._emailField,
-      this._passwordField,
-      this._repeatPasswordField,
-    );
-  }
-}
diff --git a/src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormController.js b/src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormController.js
deleted file mode 100644
index 1615234..0000000
--- a/src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormController.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-import { REGISTER_APPLICANT } from '@/modules/Events/Events';
-import router from '@/modules/Router/Router';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-import eventBus from '@/modules/Events/EventBus';
-import { NOTIFICATION_OK } from '@/modules/Events/Events';
-import { NOTIFICATION_TIMEOUT } from '@/Components/NotificationBox/NotificationBox.js';
-
-export class ApplicantRegistrationFormController extends ComponentController {
-  constructor(model, view, controller) {
-    super(model, view, controller);
-    this.setHandlers([
-      {
-        event: REGISTER_APPLICANT,
-        handler: this.register.bind(this),
-      },
-    ]);
-  }
-
-  register(formData) {
-    if (!this._validate(formData)) {
-      return;
-    }
-    this._model
-      .register(formData)
-      .then(() => {
-        eventBus.emit(NOTIFICATION_OK, {
-          message: 'Успешно сохранено',
-          timeout: NOTIFICATION_TIMEOUT.MEDIUM,
-        });
-        router.navigate(new URL(resolveUrl('vacancies')), true, true);
-      })
-      .catch((errorMsg) => {
-        this._view.declineValidation(errorMsg);
-      });
-  }
-
-  _validate(formData) {
-    const formValidationError = this._model.validate(formData);
-    if (formValidationError) {
-      this._view.declineValidation(formValidationError);
-      return false;
-    }
-    if (
-      ![
-        this._component._firstNameField.controller.validateInput({
-          callerView: this._component._firstNameField._view,
-        }),
-
-        this._component._secondNameField.controller.validateInput({
-          callerView: this._component._secondNameField._view,
-        }),
-
-        this._component._birthDateField.controller.validateInput({
-          callerView: this._component._birthDateField._view,
-        }),
-
-        this._component._emailField.controller.validateInput({
-          callerView: this._component._emailField._view,
-        }),
-
-        this._component._passwordField.controller.validateInput({
-          callerView: this._component._passwordField._view,
-        }),
-      ].every((val) => val)
-    ) {
-      return false;
-    }
-    return true;
-  }
-}
diff --git a/src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormModel.js b/src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormModel.js
deleted file mode 100644
index 010aa77..0000000
--- a/src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormModel.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import state from '@/modules/AppState/AppState';
-import { ComponentModel } from '@/modules/Components/Component';
-import USER_TYPE from '@/modules/UserSession/UserType';
-import { USER_ALREADY_EXISTS_ERROR } from '@/modules/app_errors/Errors';
-import { TransportError, ResponseError } from '@api/api';
-
-export class ApplicantRegistrationFormModel extends ComponentModel {
-  validate(formData) {
-    const hasEmptyFields = Object.values(formData).some((fieldValue) => {
-      return !fieldValue.trim();
-    });
-    if (hasEmptyFields) {
-      return 'Заполните пустые поля';
-    }
-    const passwordsMatch = formData.password.trim() === formData.repeatPassword.trim();
-    if (!passwordsMatch) {
-      return 'Введенные пароли не совпадают';
-    }
-    return '';
-  }
-
-  async register(formData) {
-    return state.userSession.register(USER_TYPE.APPLICANT, formData).catch((err) => {
-      if (err.message === USER_ALREADY_EXISTS_ERROR) {
-        return Promise.reject('Соискатель с таким адресом электронной почты уже зарегистрирован');
-      }
-      if (err instanceof TransportError) {
-        return Promise.reject('Произошла сетевая ошибка, повторите позднее');
-      }
-      if (err instanceof ResponseError)
-        return Promise.reject('Произошла непредвиденная ошибка, повторите позднее');
-    });
-  }
-}
diff --git a/src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormView.js b/src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormView.js
deleted file mode 100644
index ef87d1b..0000000
--- a/src/Components/ApplicantRegistrationForm/ApplicantRegistrationFormView.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import { NOTIFICATION_ERROR } from '@/modules/Events/Events';
-import { addEventListeners } from '@/modules/Events/EventUtils';
-import { getFormData } from '@/modules/FormUtils/FormUtils';
-import eventBus from '@/modules/Events/EventBus';
-import { REGISTER_APPLICANT } from '@/modules/Events/Events';
-import { NOTIFICATION_TIMEOUT } from '@/Components/NotificationBox/NotificationBox';
-import ApplicantRegistrationFormHbs from './applicant-registration-form.hbs';
-
-export class ApplicantRegistrationFormView extends ComponentView {
-  constructor({ elementClass }, existingElement) {
-    super({
-      renderParams: { elementClass },
-      existingElement,
-      template: ApplicantRegistrationFormHbs,
-    });
-    this._eventListeners.push({
-      event: 'submit',
-      object: this._html,
-      listener: function (ev) {
-        ev.preventDefault();
-        eventBus.emit(REGISTER_APPLICANT, this.getData());
-      }.bind(this),
-    });
-    addEventListeners(this._eventListeners);
-    this.firstNameField = this._html.querySelector('.applicant-registration-form__first-name');
-    this.secondNameField = this._html.querySelector('.applicant-registration-form__second-name');
-    this.birthDateField = this._html.querySelector('.applicant-registration-form__birthdate');
-    this.emailField = this._html.querySelector('.applicant-registration-form__email');
-    this.passwordField = this._html.querySelector('.applicant-registration-form__password');
-    this.repeatPasswordField = this._html.querySelector(
-      '.applicant-registration-form__repeat-password',
-    );
-  }
-
-  getData() {
-    return getFormData(this._html);
-  }
-
-  declineValidation(errorMessage) {
-    eventBus.emit(NOTIFICATION_ERROR, {
-      message: errorMessage,
-      timeout: NOTIFICATION_TIMEOUT.MEDIUM,
-    });
-  }
-}
diff --git a/src/Components/ApplicantRegistrationForm/applicant-registration-form.hbs b/src/Components/ApplicantRegistrationForm/applicant-registration-form.hbs
deleted file mode 100644
index adb2143..0000000
--- a/src/Components/ApplicantRegistrationForm/applicant-registration-form.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-<form class="{{elementClass}} applicant-registration-form" id="applicant-registration-form" method='POST' novalidate>
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="applicant-registration-form" elementName="first-name" inputName="firstName" inputCaption="Имя" inputType="text"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="applicant-registration-form" elementName="second-name" inputName="secondName" inputCaption="Фамилия" inputType="text"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="applicant-registration-form" elementName="birthdate" inputName="birthDate" inputCaption="Дата Рождения" inputType="date"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="applicant-registration-form" elementName="email" inputName="email" inputCaption="Электронная почта" inputType="email"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="applicant-registration-form" elementName="password" inputName="password" inputCaption="Пароль" inputType="password"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="applicant-registration-form" elementName="repeat-password" inputName="repeatPassword" inputCaption="Повторите пароль" inputType="password"}}
-</form>
\ No newline at end of file
diff --git a/src/Components/EmployerRegistrationForm/EmployerRegistrationForm.js b/src/Components/EmployerRegistrationForm/EmployerRegistrationForm.js
deleted file mode 100644
index 4a75488..0000000
--- a/src/Components/EmployerRegistrationForm/EmployerRegistrationForm.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { LiteralInput } from '@/Components/FormInputs/LiteralInput/LiteralInput';
-import { EmailInput } from '@/Components/FormInputs/EmailInput/EmailInput';
-import { TextInput } from '@/Components/FormInputs/TextInput/TextInput';
-import { ValidatedTextArea } from '@/Components/FormInputs/ValidatedTextArea/ValidatedTextArea';
-import { PasswordInput } from '@/Components/FormInputs/PasswordInput/PasswordInput';
-import { EmployerRegistrationFormModel } from './EmployerRegistrationFormModel';
-import { EmployerRegistrationFormController } from './EmployerRegistrationFormController';
-import { EmployerRegistrationFormView } from './EmployerRegistrationFormView';
-
-export class EmployerRegistrationForm extends Component {
-  constructor({ viewParams, existingElement }) {
-    super({
-      modelClass: EmployerRegistrationFormModel,
-      viewClass: EmployerRegistrationFormView,
-      controllerClass: EmployerRegistrationFormController,
-      existingElement,
-      viewParams,
-    });
-    this._firstNameField = new LiteralInput({
-      existingElement: this._view.firstNameField,
-      selfValidate: true,
-    });
-    this._secondNameField = new LiteralInput({
-      existingElement: this._view.secondNameField,
-      selfValidate: true,
-    });
-    this._positionField = new TextInput({
-      existingElement: this._view.positionField,
-      selfValidate: true,
-    });
-    this._companyNameField = new TextInput({
-      existingElement: this._view.companyNameField,
-      selfValidate: true,
-    });
-    this._companyDescriptionField = new ValidatedTextArea({
-      existingElement: this._view.companyDescriptionField,
-      selfValidate: true,
-    });
-    this._websiteField = new TextInput({
-      existingElement: this._view.websiteField,
-      selfValidate: true,
-    });
-    this._emailField = new EmailInput({
-      existingElement: this._view.emailField,
-      selfValidate: true,
-    });
-    this._passwordField = new PasswordInput({
-      existingElement: this._view.passwordField,
-      selfValidate: true,
-    });
-    this._repeatPasswordField = new PasswordInput({
-      existingElement: this._view.repeatPasswordField,
-      selfValidate: true,
-    });
-    this._children.push(
-      this._firstNameField,
-      this._secondNameField,
-      this._positionField,
-      this._companyNameField,
-      this._companyDescriptionField,
-      this._websiteField,
-      this._emailField,
-      this._passwordField,
-      this._repeatPasswordField,
-    );
-  }
-}
diff --git a/src/Components/EmployerRegistrationForm/EmployerRegistrationFormController.js b/src/Components/EmployerRegistrationForm/EmployerRegistrationFormController.js
deleted file mode 100644
index 31089ce..0000000
--- a/src/Components/EmployerRegistrationForm/EmployerRegistrationFormController.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-import router from '@/modules/Router/Router';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-import { REGISTER_EMPLOYER } from '@/modules/Events/Events';
-
-export class EmployerRegistrationFormController extends ComponentController {
-  constructor(model, view, controller) {
-    super(model, view, controller);
-    this.setHandlers([
-      {
-        event: REGISTER_EMPLOYER,
-        handler: this.register.bind(this),
-      },
-    ]);
-  }
-
-  register(formData) {
-    if (!this._validate(formData)) {
-      return;
-    }
-    this._model
-      .register(formData)
-      .then(() => router.navigate(new URL(resolveUrl('vacancies')), true, true))
-      .catch((errorMsg) => {
-        this._view.declineValidation(errorMsg);
-      });
-  }
-
-  _validate(formData) {
-    const formValidationError = this._model.validate(formData);
-    if (formValidationError) {
-      this._view.declineValidation(formValidationError);
-      return false;
-    }
-    if (
-      ![
-        this._component._firstNameField.controller.validateInput({
-          callerView: this._component._firstNameField._view,
-        }),
-
-        this._component._secondNameField.controller.validateInput({
-          callerView: this._component._secondNameField._view,
-        }),
-
-        this._component._positionField.controller.validateInput({
-          callerView: this._component._positionField._view,
-        }),
-
-        this._component._companyNameField.controller.validateInput({
-          callerView: this._component._companyNameField._view,
-        }),
-
-        this._component._companyDescriptionField.controller.validateInput({
-          callerView: this._component._companyDescriptionField._view,
-        }),
-
-        this._component._websiteField.controller.validateInput({
-          callerView: this._component._websiteField._view,
-        }),
-
-        this._component._emailField.controller.validateInput({
-          callerView: this._component._emailField._view,
-        }),
-
-        this._component._passwordField.controller.validateInput({
-          callerView: this._component._passwordField._view,
-        }),
-      ].every((val) => val)
-    ) {
-      return false;
-    }
-    return true;
-  }
-}
diff --git a/src/Components/EmployerRegistrationForm/EmployerRegistrationFormModel.js b/src/Components/EmployerRegistrationForm/EmployerRegistrationFormModel.js
deleted file mode 100644
index b342458..0000000
--- a/src/Components/EmployerRegistrationForm/EmployerRegistrationFormModel.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-import state from '@/modules/AppState/AppState';
-import USER_TYPE from '@/modules/UserSession/UserType';
-import { USER_ALREADY_EXISTS_ERROR } from '@/modules/app_errors/Errors';
-import { ResponseError, TransportError } from '@api/api';
-
-export class EmployerRegistrationFormModel extends ComponentModel {
-  validate(formData) {
-    const hasEmptyFields = Object.values(formData).some((fieldValue) => {
-      return !fieldValue.trim();
-    });
-    if (hasEmptyFields) {
-      return 'Заполните пустые поля';
-    }
-    const passwordsMatch = formData.password.trim() === formData.repeatPassword.trim();
-    if (!passwordsMatch) {
-      return 'Введенные пароли не совпадают';
-    }
-    return '';
-  }
-
-  async register(formData) {
-    return state.userSession.register(USER_TYPE.EMPLOYER, formData).catch((err) => {
-      if (err.message === USER_ALREADY_EXISTS_ERROR) {
-        return Promise.reject('Работодатель с таким адресом электронной почты уже зарегистрирован');
-      }
-      if (err instanceof TransportError) {
-        return Promise.reject('Произошла сетевая ошибка, повторите позднее');
-      }
-      if (err instanceof ResponseError)
-        return Promise.reject('Произошла непредвиденная ошибка, повторите позднее');
-    });
-  }
-}
diff --git a/src/Components/EmployerRegistrationForm/EmployerRegistrationFormView.js b/src/Components/EmployerRegistrationForm/EmployerRegistrationFormView.js
deleted file mode 100644
index c416647..0000000
--- a/src/Components/EmployerRegistrationForm/EmployerRegistrationFormView.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import { NOTIFICATION_ERROR } from '@/modules/Events/Events';
-import { addEventListeners } from '@/modules/Events/EventUtils';
-import { getFormData } from '@/modules/FormUtils/FormUtils';
-import { NOTIFICATION_TIMEOUT } from '@/Components/NotificationBox/NotificationBox';
-import eventBus from '@/modules/Events/EventBus';
-import { REGISTER_EMPLOYER } from '@/modules/Events/Events';
-import EmployerRegistrationFormHbs from './employer-registration-form.hbs';
-
-export class EmployerRegistrationFormView extends ComponentView {
-  constructor({ elementClass }, existingElement) {
-    super({
-      renderParams: { elementClass },
-      existingElement,
-      templateName: EmployerRegistrationFormHbs,
-    });
-    this._eventListeners.push({
-      event: 'submit',
-      object: this._html,
-      listener: function (ev) {
-        ev.preventDefault();
-        eventBus.emit(REGISTER_EMPLOYER, this.getData());
-      }.bind(this),
-    });
-    addEventListeners(this._eventListeners);
-    this.firstNameField = this._html.querySelector('.employer-registration-form__first-name');
-    this.secondNameField = this._html.querySelector('.employer-registration-form__second-name');
-    this.positionField = this._html.querySelector('.employer-registration-form__position');
-    this.companyNameField = this._html.querySelector('.employer-registration-form__company-name');
-    this.companyDescriptionField = this._html.querySelector(
-      '.employer-registration-form__company-description',
-    );
-    this.websiteField = this._html.querySelector('.employer-registration-form__website');
-    this.emailField = this._html.querySelector('.employer-registration-form__email');
-    this.passwordField = this._html.querySelector('.employer-registration-form__password');
-    this.repeatPasswordField = this._html.querySelector(
-      '.employer-registration-form__repeat-password',
-    );
-    this.error = this._html.querySelector('.employer-registration-form__error');
-  }
-
-  getData() {
-    return getFormData(this._html);
-  }
-
-  declineValidation(errorMessage) {
-    eventBus.emit(NOTIFICATION_ERROR, {
-      message: errorMessage,
-      timeout: NOTIFICATION_TIMEOUT.MEDIUM,
-    });
-  }
-}
diff --git a/src/Components/EmployerRegistrationForm/employer-registration-form.hbs b/src/Components/EmployerRegistrationForm/employer-registration-form.hbs
deleted file mode 100644
index 7270c09..0000000
--- a/src/Components/EmployerRegistrationForm/employer-registration-form.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
-<form class="{{elementClass}} employer-registration-form" id='employer-registration-form' method='POST' novalidate>
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="employer-registration-form" elementName="first-name" inputName="firstName" inputCaption="Имя" inputType="text"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="employer-registration-form" elementName="second-name" inputName="secondName" inputCaption="Фамилия" inputType="text"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="employer-registration-form" elementName="position" inputName="position" inputCaption="Должность" inputType="text"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="employer-registration-form" elementName="company-name" inputName="companyName" inputCaption="Название компании" inputType="text"}}
-  {{> ../FormInputs/ValidatedTextArea/validated-textarea.hbs formName="employer-registration-form" elementName="company-description" inputName="companyDescription" inputCaption="Описание компании"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="employer-registration-form" elementName="website" inputName="website" inputCaption="Сайт компании" inputType="text"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="employer-registration-form" elementName="email" inputName="email" inputCaption="Электронная почта" inputType="email"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="employer-registration-form" elementName="password" inputName="password" inputCaption="Пароль" inputType="password"}}
-  {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="employer-registration-form" elementName="repeat-password" inputName="repeatPassword" inputCaption="Повторите пароль" inputType="password"}}
-</form>
\ No newline at end of file
diff --git a/src/Components/FormInputs/DateInput/DateInput.js b/src/Components/FormInputs/DateInput/DateInput.js
deleted file mode 100644
index e5c2ee2..0000000
--- a/src/Components/FormInputs/DateInput/DateInput.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { ValidatedInputController } from '@/Components/FormInputs/ValidatedInput/ValidatedInputController';
-import { ValidatedInputView } from '@/Components/FormInputs/ValidatedInput/ValidatedInputView';
-import { DateInputModel } from './DateInputModel';
-
-export class DateInput extends Component {
-  constructor({ existingElement, selfValidate = false }) {
-    super({
-      modelClass: DateInputModel,
-      controllerClass: ValidatedInputController,
-      viewClass: ValidatedInputView,
-      existingElement,
-      controllerParams: { selfValidate },
-    });
-  }
-}
diff --git a/src/Components/FormInputs/DateInput/DateInputModel.js b/src/Components/FormInputs/DateInput/DateInputModel.js
deleted file mode 100644
index 990f63e..0000000
--- a/src/Components/FormInputs/DateInput/DateInputModel.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ValidatedInputModel } from '@/Components/FormInputs/ValidatedInput/ValidatedInputModel';
-
-export class DateInputModel extends ValidatedInputModel {
-  validate(date) {
-    try {
-      const parsed = new Date(date);
-      if (isNaN(parsed)) {
-        throw new Error('Wrong Date format');
-      }
-    } catch {
-      return 'Указана некорректная дата';
-    }
-  }
-}
diff --git a/src/application/action_creators/user_action_creators.ts b/src/application/action_creators/user_action_creators.ts
index 4a73a67..74949e9 100644
--- a/src/application/action_creators/user_action_creators.ts
+++ b/src/application/action_creators/user_action_creators.ts
@@ -4,7 +4,13 @@ import {
   LogoutAction,
   LoginActionPayload,
 } from '@application/stores/user_store/user_actions';
-import { LoginFormData } from '@application/stores/user_store/user_store';
+import {
+  LoginFormData,
+  RegistrationFormData,
+  RegistrationFormFields,
+  LoginFormFields,
+  userStore,
+} from '@application/stores/user_store/user_store';
 import {
   login as apiLogin,
   logout as apiLogout,
@@ -19,18 +25,24 @@ import type {
   registerEmployerOptions,
 } from '@/modules/api/src/handlers/auth/register';
 import { backendStore } from '@application/stores/backend_store/backend_store';
-import { LoginOptions } from '@api/src/handlers/auth/login';
 import { UserType } from '@application/models/user-type';
 import { makeApplicantFromApi } from '../models/applicant';
 import { makeEmployerFromApi } from '../models/employer';
 import type { Applicant as ApiApplicant } from '@api/src/responses/applicant';
 import type { Employer as ApiEmployer } from '@api/src/responses/employer';
 import { assertIfError } from '@/modules/common_utils/asserts/asserts';
-import { validateEmail, validateOk } from '../validators/validators';
+import {
+  validateDateOfBirth,
+  validateEmail,
+  validateOk,
+  validatePassword,
+  validateRequired,
+} from '../validators/validators';
 import { storeManager } from '@/modules/store_manager/store_manager';
+import { FormValue } from '../models/form_value';
 
-function validateLoginData({ userType, email, password }: LoginOptions): LoginFormData {
-  const isValid = [userType, email, password].every((field) => field !== '');
+function validateLoginData({ userType, email, password }: LoginFormFields): LoginFormData {
+  const isValid = [userType, email, password].every((field) => field.trim() !== '');
   const validatedData = {
     userType: validateOk(userType),
     email: validateEmail(email),
@@ -46,7 +58,33 @@ function validateLoginData({ userType, email, password }: LoginOptions): LoginFo
   return validatedData;
 }
 
-async function login({ userType, email, password }: LoginOptions) {
+const regFieldsValidators = new Map(
+  Object.entries({
+    firstName: validateRequired,
+    secondName: validateRequired,
+    birthDate: validateDateOfBirth,
+    email: validateEmail,
+    password: validatePassword,
+    passwordRepeat: validateRequired,
+    position: validateRequired,
+    companyName: validateRequired,
+    companyDescription: validateOk,
+    website: validateRequired,
+  }),
+);
+
+function submitRegistrationFields(data: RegistrationFormFields) {
+  const validatedData: RegistrationFormData = {};
+  Object.entries(data).forEach(([key, value]) => {
+    (validatedData as { [key: string]: FormValue })[key] = regFieldsValidators.get(key)(value);
+  });
+  storeManager.dispatch({
+    type: UserActions.RegistrationFormSubmit,
+    payload: validatedData,
+  });
+}
+
+async function login({ userType, email, password }: LoginFormFields) {
   const validatedLoginData = validateLoginData({ userType, email, password });
   if (!validatedLoginData.isValid) {
     storeManager.dispatch({
@@ -117,16 +155,83 @@ async function logout() {
   } catch {}
 }
 
-async function register(
-  userType: UserType,
-  body: registerApplicantOptions | registerEmployerOptions,
-) {
+async function register(userType: UserType, body: RegistrationFormFields) {
+  submitRegistrationFields(body as RegistrationFormFields);
+  const validatedForm = userStore.getData().registrationForm;
+  let isValid = false;
+  if (userType === UserType.Applicant) {
+    const { firstName, secondName, birthDate, email, password } = validatedForm;
+    isValid = [firstName, secondName, birthDate, email, password].every((field) => field.isValid);
+  } else {
+    const {
+      firstName,
+      secondName,
+      email,
+      password,
+      passwordRepeat,
+      position,
+      companyName,
+      companyDescription,
+      website,
+    } = validatedForm;
+    isValid = [
+      firstName,
+      secondName,
+      email,
+      password,
+      passwordRepeat,
+      position,
+      companyName,
+      companyDescription,
+      website,
+    ].every((field) => field.isValid);
+  }
+  if (!isValid) {
+    storeManager.dispatch({
+      type: UserActions.RegistrationFormSubmit,
+      payload: {
+        isValid,
+      } as RegistrationFormData,
+    });
+    return;
+  }
+  isValid = body.passwordRepeat === body.password;
+  if (!isValid) {
+    storeManager.dispatch({
+      type: UserActions.RegistrationFormSubmit,
+      payload: {
+        passwordRepeat: {
+          value: '',
+          isValid: false,
+        },
+        isValid,
+        errorMsg: 'Пароли не совпадают',
+      } as RegistrationFormData,
+    });
+    return;
+  }
+
   const backendOrigin = backendStore.getData().backendOrigin;
   try {
     const response =
       userType === UserType.Applicant
-        ? await apiRegisterApplicant(backendOrigin, body as registerApplicantOptions)
-        : await apiRegisterEmployer(backendOrigin, body as registerEmployerOptions);
+        ? await apiRegisterApplicant(backendOrigin, {
+            firstName: body.firstName,
+            secondName: body.secondName,
+            birthDate: new Date(body.birthDate),
+            email: body.email,
+            password: body.password,
+          } as registerApplicantOptions)
+        : await apiRegisterEmployer(backendOrigin, {
+            firstName: body.firstName,
+            secondName: body.secondName,
+            email: body.email,
+            position: body.position,
+            companyName: body.companyName,
+            companyDescription: body.companyDescription,
+            companyWebsite: body.website,
+            password: body.password,
+          } as registerEmployerOptions);
     const userProfile = await getUser(backendOrigin, userType, response.id);
     storeManager.dispatch({
       type: UserActions.Login,
@@ -148,4 +253,5 @@ export const userActionCreators = {
   login,
   logout,
   register,
+  submitRegistrationFields,
 };
diff --git a/src/application/pages/registration_page/registration_page.tsx b/src/application/pages/registration_page/registration_page.tsx
index d36a62f..2b36dc7 100644
--- a/src/application/pages/registration_page/registration_page.tsx
+++ b/src/application/pages/registration_page/registration_page.tsx
@@ -7,6 +7,7 @@ import { UserTypeSelect } from '@/application/components/user_type_select/user_t
 import { UserType } from '@/application/models/user-type';
 import { Input } from '@/application/components/input/input';
 import './registration_page.scss';
+import { userActionCreators } from '@/application/action_creators/user_action_creators';
 
 export class RegistrationPage extends Component {
   private userType: UserType = UserType.Applicant;
@@ -20,14 +21,18 @@ export class RegistrationPage extends Component {
     };
   }
 
-  private handleSubmit = () => {
-    console.log('submit');
+  private handleSubmit = (ev: SubmitEvent) => {
+    ev.preventDefault();
+    const formData = Object.fromEntries(new FormData(ev.target as HTMLFormElement));
+    userActionCreators.register(this.userType, formData);
   };
+
   render(): VirtualNodeSpec {
     const userData = userStore.getData();
     if (userData.isLoggedIn) {
       routerActionCreators.redirect(new URL(resolveUrl('vacancies', null)));
     }
+    const regForm = userData.registrationForm;
     return (
       <main key="registration-page" className="registration-page registration-page_theme-dark">
         <div className="registration-page__header">
@@ -57,6 +62,9 @@ export class RegistrationPage extends Component {
               placeholder="Иван"
               isRequired={true}
               maxlength={50}
+              value={regForm && regForm.firstName.value}
+              isValid={regForm && regForm.firstName.isValid}
+              error={regForm && regForm.firstName.errorMsg}
             />
             <Input
               key="input-second-name"
@@ -68,6 +76,9 @@ export class RegistrationPage extends Component {
               placeholder="Иванов"
               isRequired={true}
               maxlength={50}
+              value={regForm && regForm.secondName.value}
+              isValid={regForm && regForm.secondName.isValid}
+              error={regForm && regForm.secondName.errorMsg}
             />
             <Input
               key="input-birthdate"
@@ -78,6 +89,9 @@ export class RegistrationPage extends Component {
               type="date"
               isRequired={true}
               maxlength={50}
+              value={regForm && regForm.birthDate.value}
+              isValid={regForm && regForm.birthDate.isValid}
+              error={regForm && regForm.birthDate.errorMsg}
             />
             <Input
               key="input-email"
@@ -89,6 +103,9 @@ export class RegistrationPage extends Component {
               placeholder="example@mail.ru"
               isRequired={true}
               maxlength={50}
+              value={regForm && regForm.email.value}
+              isValid={regForm && regForm.email.isValid}
+              error={regForm && regForm.email.errorMsg}
             />
             <Input
               key="input-password"
@@ -99,16 +116,22 @@ export class RegistrationPage extends Component {
               type="password"
               isRequired={true}
               maxlength={50}
+              value={regForm && regForm.password.value}
+              isValid={regForm && regForm.password.isValid}
+              error={regForm && regForm.password.errorMsg}
             />
             <Input
               key="input-password-repeat"
               elementClass="registration-page__password-repeat"
               id="password-repeat"
               label="Повторите пароль"
-              name="repeatPassword"
+              name="passwordRepeat"
               type="password"
               isRequired={true}
               maxlength={50}
+              value={regForm && regForm.passwordRepeat.value}
+              isValid={regForm && regForm.passwordRepeat.isValid}
+              error={regForm && regForm.passwordRepeat.errorMsg}
             />
           </form>
         ) : (
@@ -129,6 +152,9 @@ export class RegistrationPage extends Component {
               placeholder="Иван"
               isRequired={true}
               maxlength={50}
+              value={regForm && regForm.firstName.value}
+              isValid={regForm && regForm.firstName.isValid}
+              error={regForm && regForm.firstName.errorMsg}
             />
             <Input
               key="input-second-name"
@@ -140,6 +166,9 @@ export class RegistrationPage extends Component {
               placeholder="Иванов"
               isRequired={true}
               maxlength={50}
+              value={regForm && regForm.secondName.value}
+              isValid={regForm && regForm.secondName.isValid}
+              error={regForm && regForm.secondName.errorMsg}
             />
             <Input
               key="input-position"
@@ -151,6 +180,9 @@ export class RegistrationPage extends Component {
               placeholder="Ведущий разработчик"
               isRequired={true}
               maxlength={100}
+              value={regForm && regForm.position.value}
+              isValid={regForm && regForm.position.isValid}
+              error={regForm && regForm.position.errorMsg}
             />
             <Input
               key="input-company-name"
@@ -162,6 +194,9 @@ export class RegistrationPage extends Component {
               placeholder="ООО Рога и Копыта"
               isRequired={true}
               maxlength={100}
+              value={regForm && regForm.companyName.value}
+              isValid={regForm && regForm.companyName.isValid}
+              error={regForm && regForm.companyName.errorMsg}
             />
             <Input
               key="input-company-description"
@@ -173,6 +208,9 @@ export class RegistrationPage extends Component {
               isRequired={false}
               maxlength={500}
               hasResizeVertical={true}
+              value={regForm && regForm.companyDescription.value}
+              isValid={regForm && regForm.companyDescription.isValid}
+              error={regForm && regForm.companyDescription.errorMsg}
             />
             <Input
               key="input-company-website"
@@ -184,6 +222,9 @@ export class RegistrationPage extends Component {
               isRequired={false}
               maxlength={100}
               placeholder="https://example.com"
+              value={regForm && regForm.website.value}
+              isValid={regForm && regForm.website.isValid}
+              error={regForm && regForm.website.errorMsg}
             />
             <Input
               key="input-email"
@@ -195,6 +236,9 @@ export class RegistrationPage extends Component {
               placeholder="example@mail.ru"
               isRequired={true}
               maxlength={50}
+              value={regForm && regForm.email.value}
+              isValid={regForm && regForm.email.isValid}
+              error={regForm && regForm.email.errorMsg}
             />
             <Input
               key="input-password"
@@ -205,16 +249,22 @@ export class RegistrationPage extends Component {
               type="password"
               isRequired={true}
               maxlength={50}
+              value={regForm && regForm.password.value}
+              isValid={regForm && regForm.password.isValid}
+              error={regForm && regForm.password.errorMsg}
             />
             <Input
               key="input-password-repeat"
               elementClass="registration-page__password-repeat"
               id="password-repeat"
               label="Повторите пароль"
-              name="repeatPassword"
+              name="passwordRepeat"
               type="password"
               isRequired={true}
               maxlength={50}
+              value={regForm && regForm.passwordRepeat.value}
+              isValid={regForm && regForm.passwordRepeat.isValid}
+              error={regForm && regForm.passwordRepeat.errorMsg}
             />
           </form>
         )}
diff --git a/src/application/stores/user_store/user_actions.ts b/src/application/stores/user_store/user_actions.ts
index ff2ee03..7243ebb 100644
--- a/src/application/stores/user_store/user_actions.ts
+++ b/src/application/stores/user_store/user_actions.ts
@@ -4,12 +4,13 @@ import { UserType } from '@/application/models/user-type';
 import { Action } from '@/modules/store_manager/action';
 import { Applicant } from '@application/models/applicant';
 import { Employer } from '@application/models/employer';
-import { LoginFormData } from './user_store';
+import { LoginFormData, RegistrationFormData } from './user_store';
 
 export enum UserActions {
   Logout = 'logout',
   Login = 'login',
   LoginFormSubmit = 'loginFormSubmit',
+  RegistrationFormSubmit = 'registrationFormSubmit',
 }
 
 export interface LogoutAction extends Action {
@@ -31,3 +32,8 @@ export interface LoginFormSubmitAction extends Action {
   type: UserActions.LoginFormSubmit;
   payload: LoginFormData;
 }
+
+export interface RegistrationFormSubmitAction extends Action {
+  type: UserActions.RegistrationFormSubmit;
+  payload: RegistrationFormData;
+}
diff --git a/src/application/stores/user_store/user_store.ts b/src/application/stores/user_store/user_store.ts
index e943027..9f9a585 100644
--- a/src/application/stores/user_store/user_store.ts
+++ b/src/application/stores/user_store/user_store.ts
@@ -15,6 +15,41 @@ export interface LoginFormData {
   errorMsg?: string;
 }
 
+export interface RegistrationFormData {
+  userType?: FormValue;
+  firstName?: FormValue;
+  secondName?: FormValue;
+  birthDate?: FormValue;
+  email?: FormValue;
+  password?: FormValue;
+  passwordRepeat?: FormValue;
+  position?: FormValue;
+  companyName?: FormValue;
+  companyDescription?: FormValue;
+  website?: FormValue;
+  isValid?: boolean;
+  errorMsg?: string;
+}
+
+export interface LoginFormFields {
+  userType?: UserType;
+  email?: string;
+  password?: string;
+}
+
+export interface RegistrationFormFields {
+  firstName?: string;
+  secondName?: string;
+  birthDate?: string;
+  email?: string;
+  password?: string;
+  passwordRepeat?: string;
+  position?: string;
+  companyName?: string;
+  companyDescription?: string;
+  website?: string;
+}
+
 const userTypeTranslation = new Map<UserType, string>([
   [UserType.Employer, 'Работодатель'],
   [UserType.Applicant, 'Соискатель'],
@@ -27,6 +62,7 @@ export interface UserData {
   id?: number;
   userProfile?: Applicant | Employer;
   loginForm?: LoginFormData;
+  registrationForm?: RegistrationFormData;
 }
 
 function userStoreReducer(state: UserData, action: Action) {
@@ -54,6 +90,17 @@ function userStoreReducer(state: UserData, action: Action) {
       state.loginForm = payload;
       return state;
     }
+
+    case UserActions.RegistrationFormSubmit: {
+      const payload = action.payload as RegistrationFormData;
+      if (!state.registrationForm) {
+        state.registrationForm = {};
+      }
+      Object.entries(payload).forEach(([key, value]) => {
+        (state.registrationForm as { [key: string]: unknown })[key] = value;
+      });
+      return state;
+    }
   }
   return state;
 }
diff --git a/src/application/validators/validators.ts b/src/application/validators/validators.ts
index a5140ef..c2b78e0 100644
--- a/src/application/validators/validators.ts
+++ b/src/application/validators/validators.ts
@@ -26,3 +26,50 @@ export function validateOk(value: unknown): FormValue {
     isValid: true,
   };
 }
+
+export function validateRequired(value: string): FormValue {
+  return {
+    value,
+    isValid: value.trim() !== '',
+    errorMsg: 'Заполните это поле',
+  };
+}
+
+export function validateDateOfBirth(date: string): FormValue {
+  try {
+    const parsed = Date.parse(date);
+    if (isNaN(parsed)) {
+      throw new Error('Wrong date format');
+    }
+    if (parsed > Date.now() - 18 * 365 * 24 * 60 * 60 * 1000) {
+      return {
+        value: date,
+        isValid: false,
+        errorMsg: 'Вы слишком молоды, чтобы пользоваться сайтом',
+      };
+    }
+    return {
+      value: date,
+      isValid: true,
+    };
+  } catch {
+    return {
+      value: date,
+      isValid: false,
+      errorMsg: 'Указана некорректная дата',
+    };
+  }
+}
+
+export function validatorTrain(validators: { (value: string): FormValue }[]) {
+  return function (field: string) {
+    let formValue: FormValue;
+    for (const validator of validators) {
+      const formValue = validator(field);
+      if (!formValue.isValid) {
+        return formValue;
+      }
+    }
+    return formValue;
+  };
+}
diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss
deleted file mode 100644
index 0e32061..0000000
--- a/src/scss/_forms.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/* Validated textarea component */
-
-.validated-textarea {
-  display: flex;
-  flex-direction: column;
-  &__label {
-    margin-bottom: 5px;
-  }
-
-  &__textarea {
-    padding: 8px;
-    background-color: var(--color-background-600);
-    color: var(--color-main-100);
-    border: none;
-    border-radius: 4px;
-  }
-
-  &__textarea_disabled {
-    resize: none !important;
-    background-color: rgba(0, 0, 0, 0);
-  }
-
-  &__error {
-    margin-top: 10px;
-    color: var(--color-secondary-support-500);
-  }
-}
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 5daf425..1b9b001 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -3,7 +3,6 @@
 @use 'vacancies';
 @use 'login';
 @use 'registration';
-@use 'forms';
 @use 'profile';
 @use 'vacancy';
 @use 'cv';

From b5f908a3e9b1d2d4e3c676182e0fa3426b1b5041 Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Sun, 15 Dec 2024 03:28:27 +0300
Subject: [PATCH 09/17] feature: profile layout

---
 src/Components/CrudFormBox/CrudFormBox.js     |  36 -----
 .../CrudFormBox/CrudFormBoxController.js      |  53 -------
 .../CrudFormBox/CrudFormBoxModel.js           |   3 -
 src/Components/CrudFormBox/CrudFormBoxView.js |  98 -------------
 src/Components/CrudFormBox/crud-form-box.hbs  |  20 ---
 .../RegistrationPage/RegistrationPage.js      |  31 ----
 .../RegistrationPageController.js             |  28 ----
 .../RegistrationPage/RegistrationPageModel.js |   3 -
 .../RegistrationPage/RegistrationPageView.js  |  53 -------
 .../RegistrationPage/registration-page.hbs    |  16 ---
 .../components/frame_series/frame_series.scss |  39 +++++
 .../components/frame_series/frame_series.tsx  |  45 ++++++
 src/application/components/input/input.tsx    |   1 +
 .../labeled_field/labeled_field.scss          |  31 ++++
 .../labeled_field/labeled_field.tsx           |  14 ++
 .../components/profile/profile.scss           |  18 +++
 .../components/profile/profile.tsx            |  87 ++++++++++++
 .../components/profile_form/profile_form.tsx  | 131 +++++++++++++++++
 .../profile_minicard/profile_minicard.scss    |  49 +++++++
 .../profile_minicard/profile_minicard.tsx     |  38 +++++
 .../read_update_form_box.scss                 |   7 +
 .../read_update_form_box.tsx                  |  75 ++++++++++
 .../pages/profile_page/profile_page.scss      |  30 ++++
 .../pages/profile_page/profile_page.tsx       | 134 ++++++++++++++++++
 .../registration_page/registration_page.tsx   |   3 +-
 src/config/backend.json                       |   2 +-
 src/index.tsx                                 |  19 +--
 src/modules/vdom/virtual_dom.ts               |   8 +-
 src/scss/_common.scss                         |  55 -------
 src/scss/_profile.scss                        |  68 ---------
 src/scss/index.scss                           |   2 +
 31 files changed, 722 insertions(+), 475 deletions(-)
 delete mode 100644 src/Components/CrudFormBox/CrudFormBox.js
 delete mode 100644 src/Components/CrudFormBox/CrudFormBoxController.js
 delete mode 100644 src/Components/CrudFormBox/CrudFormBoxModel.js
 delete mode 100644 src/Components/CrudFormBox/CrudFormBoxView.js
 delete mode 100644 src/Components/CrudFormBox/crud-form-box.hbs
 delete mode 100644 src/Pages/RegistrationPage/RegistrationPage.js
 delete mode 100644 src/Pages/RegistrationPage/RegistrationPageController.js
 delete mode 100644 src/Pages/RegistrationPage/RegistrationPageModel.js
 delete mode 100644 src/Pages/RegistrationPage/RegistrationPageView.js
 delete mode 100644 src/Pages/RegistrationPage/registration-page.hbs
 create mode 100644 src/application/components/frame_series/frame_series.scss
 create mode 100644 src/application/components/frame_series/frame_series.tsx
 create mode 100644 src/application/components/labeled_field/labeled_field.scss
 create mode 100644 src/application/components/labeled_field/labeled_field.tsx
 create mode 100644 src/application/components/profile/profile.scss
 create mode 100644 src/application/components/profile/profile.tsx
 create mode 100644 src/application/components/profile_form/profile_form.tsx
 create mode 100644 src/application/components/profile_minicard/profile_minicard.scss
 create mode 100644 src/application/components/profile_minicard/profile_minicard.tsx
 create mode 100644 src/application/components/read_update_form_box/read_update_form_box.scss
 create mode 100644 src/application/components/read_update_form_box/read_update_form_box.tsx
 create mode 100644 src/application/pages/profile_page/profile_page.scss
 create mode 100644 src/application/pages/profile_page/profile_page.tsx

diff --git a/src/Components/CrudFormBox/CrudFormBox.js b/src/Components/CrudFormBox/CrudFormBox.js
deleted file mode 100644
index 71e7ccc..0000000
--- a/src/Components/CrudFormBox/CrudFormBox.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { CrudFormBoxController } from './CrudFormBoxController';
-import { CrudFormBoxModel } from './CrudFormBoxModel';
-import { CrudFormBoxView } from './CrudFormBoxView';
-
-export class CrudFormBox extends Component {
-  #form;
-  constructor({ form, canUpdate, elementClass, existingElement } = {}) {
-    super({
-      modelClass: CrudFormBoxModel,
-      viewClass: CrudFormBoxView,
-      viewParams: {
-        formView: form.view,
-        canUpdate,
-        elementClass,
-      },
-      controllerClass: CrudFormBoxController,
-      existingElement,
-    });
-    this.#form = form;
-    this._children.push(this.#form);
-    this.#form.disable();
-  }
-
-  get form() {
-    return this.#form;
-  }
-
-  enableForm() {
-    this.#form.enable();
-  }
-
-  disableForm() {
-    this.#form.disable();
-  }
-}
diff --git a/src/Components/CrudFormBox/CrudFormBoxController.js b/src/Components/CrudFormBox/CrudFormBoxController.js
deleted file mode 100644
index 4986d87..0000000
--- a/src/Components/CrudFormBox/CrudFormBoxController.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-import { EDIT_FORM, RESET_FORM, SUBMIT_FORM } from '@/modules/Events/Events';
-
-export class CrudFormBoxController extends ComponentController {
-  constructor(model, view, component) {
-    super(model, view, component);
-    this.setHandlers([
-      {
-        event: EDIT_FORM,
-        handler: this.switchToEdit.bind(this),
-      },
-      {
-        event: SUBMIT_FORM,
-        handler: this.submitForm.bind(this),
-      },
-      {
-        event: RESET_FORM,
-        handler: this.resetForm.bind(this),
-      },
-    ]);
-  }
-
-  switchToEdit({ caller }) {
-    if (!Object.is(this._view.formView, caller)) {
-      return;
-    }
-    this._view.editState();
-    this._component.enableForm();
-  }
-
-  resetForm({ caller }) {
-    if (!Object.is(this._view.formView, caller)) {
-      return;
-    }
-    if (!this._component.form.reset()) {
-      return;
-    }
-    this._view.readState();
-    this._component.disableForm();
-  }
-
-  async submitForm({ caller }) {
-    if (!Object.is(this._view.formView, caller)) {
-      return;
-    }
-    const submitResult = await this._component.form.submit();
-    if (!submitResult) {
-      return;
-    }
-    this._view.readState();
-    this._component.disableForm();
-  }
-}
diff --git a/src/Components/CrudFormBox/CrudFormBoxModel.js b/src/Components/CrudFormBox/CrudFormBoxModel.js
deleted file mode 100644
index c31cecc..0000000
--- a/src/Components/CrudFormBox/CrudFormBoxModel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-
-export class CrudFormBoxModel extends ComponentModel {}
diff --git a/src/Components/CrudFormBox/CrudFormBoxView.js b/src/Components/CrudFormBox/CrudFormBoxView.js
deleted file mode 100644
index 465566e..0000000
--- a/src/Components/CrudFormBox/CrudFormBoxView.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import { addEventListeners } from '@/modules/Events/EventUtils';
-import eventBus from '@/modules/Events/EventBus';
-import { EDIT_FORM, SUBMIT_FORM, RESET_FORM } from '@/modules/Events/Events';
-import CrudFormBoxHbs from './crud-form-box.hbs';
-
-const CRUD_FORM_STATE = {
-  READ: 'read',
-  EDIT: 'edit',
-};
-
-export class CrudFormBoxView extends ComponentView {
-  #buttonContainer;
-  #submitButton;
-  #resetButton;
-  #editButton;
-  #canUpdate;
-  #formView;
-  #state = CRUD_FORM_STATE.READ;
-  constructor({ formView, canUpdate, elementClass }) {
-    super({
-      renderParams: { canUpdate, elementClass },
-      template: CrudFormBoxHbs,
-    });
-    this.#canUpdate = canUpdate;
-    this.#formView = formView;
-
-    if (this.#canUpdate) {
-      this.#buttonContainer = this._html.querySelector('.crud-form-box__button-container');
-      this.#editButton = this._html.querySelector('.crud-form-box__edit-button');
-      this.#submitButton = this._html.querySelector('.crud-form-box__form-submit-button');
-      this.#resetButton = this._html.querySelector('.crud-form-box__form-reset-button');
-      this._html.insertBefore(formView.render(), this.#buttonContainer);
-      this.#submitButton.setAttribute('form', this.#formView.getId());
-      this.#resetButton.setAttribute('form', this.#formView.getId());
-      this._eventListeners.push({
-        event: 'click',
-        object: this.#editButton,
-        listener: function () {
-          eventBus.emit(EDIT_FORM, { caller: this.#formView });
-        }.bind(this),
-      });
-    } else {
-      this._html.appendChild(formView.render());
-    }
-    this._eventListeners.push(
-      {
-        event: 'submit',
-        object: this.#formView.render(),
-        listener: function (ev) {
-          ev.preventDefault();
-          eventBus.emit(SUBMIT_FORM, { caller: this.#formView });
-        }.bind(this),
-      },
-
-      {
-        event: 'reset',
-        object: this.#formView.render(),
-        listener: function (ev) {
-          ev.preventDefault();
-          eventBus.emit(RESET_FORM, { caller: this.#formView });
-        }.bind(this),
-      },
-    );
-    addEventListeners(this._eventListeners);
-
-    this.readState();
-  }
-
-  get formView() {
-    return this.#formView;
-  }
-
-  readState() {
-    if (this.#state === CRUD_FORM_STATE.READ) {
-      return;
-    }
-    if (this.#canUpdate) {
-      this.#editButton.hidden = false;
-    }
-    this.#submitButton.hidden = true;
-    this.#resetButton.hidden = true;
-    this.#state = CRUD_FORM_STATE.READ;
-  }
-
-  editState() {
-    if (this.#state === CRUD_FORM_STATE.EDIT) {
-      return;
-    }
-    if (!this.#canUpdate) {
-      return;
-    }
-    this.#editButton.hidden = true;
-    this.#submitButton.hidden = false;
-    this.#resetButton.hidden = false;
-    this.#state = CRUD_FORM_STATE.EDIT;
-  }
-}
diff --git a/src/Components/CrudFormBox/crud-form-box.hbs b/src/Components/CrudFormBox/crud-form-box.hbs
deleted file mode 100644
index 323a1eb..0000000
--- a/src/Components/CrudFormBox/crud-form-box.hbs
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class='{{elementClass}} crud-form-box'>
-  {{#if canUpdate}}
-    <div class='crud-form-box__button-container'>
-      <button
-        type='button'
-        class='crud-form-box__edit-button button button_main-primary'
-      >Редактировать</button>
-      <button
-        type='submit'
-        class='crud-form-box__form-submit-button button button_main-primary'
-        hidden
-      >Сохранить</button>
-      <button
-        type='reset'
-        class='crud-form-box__form-reset-button button button_danger-tertiary'
-        hidden
-      >Отменить</button>
-    </div>
-  {{/if}}
-</div>
\ No newline at end of file
diff --git a/src/Pages/RegistrationPage/RegistrationPage.js b/src/Pages/RegistrationPage/RegistrationPage.js
deleted file mode 100644
index 2d5624d..0000000
--- a/src/Pages/RegistrationPage/RegistrationPage.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { RegistrationPageView } from './RegistrationPageView';
-import { RegistrationPageController } from './RegistrationPageController';
-import { RegistrationPageModel } from './RegistrationPageModel';
-import { Page } from '@/modules/Page/Page';
-import { UserTypeRadiogroup } from '@/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroup';
-import { ApplicantRegistrationForm } from '@/Components/ApplicantRegistrationForm/ApplicantRegistrationForm';
-import { EmployerRegistrationForm } from '@/Components/EmployerRegistrationForm/EmployerRegistrationForm';
-import state from '@/modules/AppState/AppState';
-
-export class RegistrationPage extends Page {
-  constructor({ url }) {
-    super({
-      url,
-      modelClass: RegistrationPageModel,
-      viewClass: RegistrationPageView,
-      controllerClass: RegistrationPageController,
-    });
-    state.userSession.goToHomePageIfLoggedIn();
-  }
-
-  postRenderInit() {
-    this._userTypeRadioGroup = new UserTypeRadiogroup({
-      existingElement: this._view.userTypeRadiogroup,
-    });
-    this._applicantForm = new ApplicantRegistrationForm({
-      existingElement: this._view.applicantForm,
-    });
-    this._employerForm = new EmployerRegistrationForm({ existingElement: this._view.employerForm });
-    this._children.push(this._userTypeRadioGroup, this._applicantForm, this._employerForm);
-  }
-}
diff --git a/src/Pages/RegistrationPage/RegistrationPageController.js b/src/Pages/RegistrationPage/RegistrationPageController.js
deleted file mode 100644
index 6187fd6..0000000
--- a/src/Pages/RegistrationPage/RegistrationPageController.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { CHANGE_USER_TYPE } from '@/modules/Events/Events';
-import { PageController } from '@/modules/Page/Page';
-import USER_TYPE from '@/modules/UserSession/UserType';
-
-export class RegistrationPageController extends PageController {
-  constructor(model, view, component) {
-    super(model, view, component);
-    this.setHandlers([
-      {
-        event: CHANGE_USER_TYPE,
-        handler: this.switchForm.bind(this),
-      },
-    ]);
-  }
-
-  switchForm(userType) {
-    switch (userType) {
-      case USER_TYPE.APPLICANT: {
-        this._view.setApplicantForm();
-        break;
-      }
-      case USER_TYPE.EMPLOYER: {
-        this._view.setEmployerForm();
-        break;
-      }
-    }
-  }
-}
diff --git a/src/Pages/RegistrationPage/RegistrationPageModel.js b/src/Pages/RegistrationPage/RegistrationPageModel.js
deleted file mode 100644
index c079794..0000000
--- a/src/Pages/RegistrationPage/RegistrationPageModel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PageModel } from '@/modules/Page/Page';
-
-export const RegistrationPageModel = PageModel;
diff --git a/src/Pages/RegistrationPage/RegistrationPageView.js b/src/Pages/RegistrationPage/RegistrationPageView.js
deleted file mode 100644
index 34c35fd..0000000
--- a/src/Pages/RegistrationPage/RegistrationPageView.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { PageView } from '@/modules/Page/Page';
-import RegistrationPageHbs from './registration-page.hbs';
-
-export class RegistrationPageView extends PageView {
-  #applicantForm;
-  #employerForm;
-  #userTypeRadiogroup;
-  #submitButton;
-
-  #APPLICANT_FORM = 'applicant-registration-form';
-  #EMPLOYER_FORM = 'employer-registration-form';
-
-  constructor() {
-    super({
-      template: RegistrationPageHbs,
-    });
-    this.#userTypeRadiogroup = this._html.querySelector(
-      '.registration-container__user-type-radiogroup',
-    );
-    this.#applicantForm = this._html.querySelector(
-      '.registration-container__applicant-registration-form',
-    );
-    this.#employerForm = this._html.querySelector(
-      '.registration-container__employer-registration-form',
-    );
-    this.#submitButton = this._html.querySelector('.registration-container__submit-button');
-    this.setApplicantForm();
-  }
-
-  setApplicantForm() {
-    this.#employerForm.style.display = 'none';
-    this.#applicantForm.style.display = 'block';
-    this.#submitButton.setAttribute('form', this.#APPLICANT_FORM);
-  }
-
-  setEmployerForm() {
-    this.#employerForm.style.display = 'block';
-    this.#applicantForm.style.display = 'none';
-    this.#submitButton.setAttribute('form', this.#EMPLOYER_FORM);
-  }
-
-  get userTypeRadiogroup() {
-    return this.#userTypeRadiogroup;
-  }
-
-  get applicantForm() {
-    return this.#applicantForm;
-  }
-
-  get employerForm() {
-    return this.#employerForm;
-  }
-}
diff --git a/src/Pages/RegistrationPage/registration-page.hbs b/src/Pages/RegistrationPage/registration-page.hbs
deleted file mode 100644
index 9984418..0000000
--- a/src/Pages/RegistrationPage/registration-page.hbs
+++ /dev/null
@@ -1,16 +0,0 @@
-<main class='registration-page'>
-  <section class='registration-container registration-page__registration-container'>
-    <header class='registration-container__header'>
-      <h2 class='registration-container__header-text text_roboto-light'>Регистрация</h2>
-    </header>
-    {{> ../../Components/FormInputs/UserTypeRadiogroup/user-type-radiogroup.hbs elementClass="registration-container__user-type-radiogroup"}}
-    {{> ../../Components/ApplicantRegistrationForm/applicant-registration-form.hbs elementClass="registration-container__applicant-registration-form"}}
-    {{> ../../Components/EmployerRegistrationForm/employer-registration-form.hbs elementClass="registration-container__employer-registration-form"}}
-    <div class="registration-container__button-container">
-      <button type='submit' form='applicant-registration-form' class='registration-container__submit-button button button_main-primary'>
-        Зарегистрироваться
-      </button>
-      <a class='registration-container__back-button button button_main-tertiary' href='{{url "vacancies" ""}}'>На главную</a>
-    </div>
-  </section>
-</main>
\ No newline at end of file
diff --git a/src/application/components/frame_series/frame_series.scss b/src/application/components/frame_series/frame_series.scss
new file mode 100644
index 0000000..71aa914
--- /dev/null
+++ b/src/application/components/frame_series/frame_series.scss
@@ -0,0 +1,39 @@
+/* Frame series component */
+.frame-series {
+  &__frame-selector {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--col-margin);
+  }
+
+  &__divider {
+    width: 100%;
+    height: 2px;
+    background-color: var(--color-main-100);
+    margin: var(--col-margin) 0px;
+  }
+
+  &__frame-container {
+    background-color: var(--color-background-800);
+    border-radius: 25px;
+    padding: 24px;
+  }
+}
+
+.frame-choice {
+  font-size: var(--text-size-9);
+  border-radius: 14px;
+  cursor: pointer;
+  padding: 10px;
+
+  &_inactive {
+    background-color: none;
+  }
+
+  &_active {
+    background-color: var(--color-main-500);
+    color: var(--color-background-1000);
+    border-radius: 8px;
+  }
+}
diff --git a/src/application/components/frame_series/frame_series.tsx b/src/application/components/frame_series/frame_series.tsx
new file mode 100644
index 0000000..e38b57f
--- /dev/null
+++ b/src/application/components/frame_series/frame_series.tsx
@@ -0,0 +1,45 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import './frame_series.scss';
+import { VirtualNodeSpec } from '@/modules/vdom/virtual_node';
+
+export interface FrameSeriesProps {
+  elementClass?: string;
+  childrenLabels: Array<string>;
+  activeFrameIndex: number;
+  setActiveFrameIndex: (index: number) => void;
+}
+
+export class FrameSeries extends Component {
+  constructor(
+    { elementClass, childrenLabels, activeFrameIndex, setActiveFrameIndex }: FrameSeriesProps,
+    children: Array<VirtualNodeSpec | string>,
+  ) {
+    super({ elementClass, childrenLabels, activeFrameIndex, setActiveFrameIndex }, children);
+  }
+
+  render() {
+    const activeFrameIndex = this.props.activeFrameIndex ?? 0;
+    const childrenLabels = this.props.childrenLabels as Array<string>;
+    return (
+      <div className={`${this.props.elementClass} frame-series`}>
+        <nav className="frame-series__frame-selector frame-selector">
+          {childrenLabels.map((frameCaption, index) => (
+            <div
+              className={`frame-series__frame-choice ${index === activeFrameIndex ? 'frame-choice_active' : ''} frame-choice`}
+              onClick={() => {
+                (this.props.setActiveFrameIndex as (index: number) => void)(index);
+              }}
+            >
+              {frameCaption}
+            </div>
+          ))}
+        </nav>
+        <div className="frame-series__divider"></div>
+        <div className="frame-series__frame-container frame-container">
+          {this.children[this.props.activeFrameIndex as number]}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/application/components/input/input.tsx b/src/application/components/input/input.tsx
index 29edcab..ac6dfa5 100644
--- a/src/application/components/input/input.tsx
+++ b/src/application/components/input/input.tsx
@@ -68,6 +68,7 @@ export class Input extends Component {
             className={`input__field ${this.props.isValid !== undefined ? (this.props.isValid ? 'input__field_ok' : 'input__field_error') : ''} ${this.props.hasResizeVertical ? 'input__field_resize-vertical' : ''}`}
             name={this.props.name}
             id={this.props.id}
+            value={this.props.value}
           ></textarea>
         )}
         {this.props.isValid === false && this.props.error !== '' ? (
diff --git a/src/application/components/labeled_field/labeled_field.scss b/src/application/components/labeled_field/labeled_field.scss
new file mode 100644
index 0000000..63e19f0
--- /dev/null
+++ b/src/application/components/labeled_field/labeled_field.scss
@@ -0,0 +1,31 @@
+@use '@/scss/variables' as v;
+
+.labeled-field {
+  display: flex;
+  flex-direction: column;
+  &__label {
+    font-size: var(--text-size-5);
+    color: var(--color-support-200);
+    margin-bottom: 16px;
+    width: 100%;
+  }
+  &__field {
+    font-size: var(--text-size-5);
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: v.$mobile-breakpoint) {
+  .labeled-field {
+    display: flex;
+    flex-direction: row;
+    &__label {
+      width: inherit;
+      justify-self: start;
+    }
+    &__field {
+      width: inherit;
+      justify-self: end;
+    }
+  }
+}
diff --git a/src/application/components/labeled_field/labeled_field.tsx b/src/application/components/labeled_field/labeled_field.tsx
new file mode 100644
index 0000000..f2e1bfd
--- /dev/null
+++ b/src/application/components/labeled_field/labeled_field.tsx
@@ -0,0 +1,14 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import './labeled_field.scss';
+
+export class LabeledField extends Component {
+  render() {
+    return (
+      <div className={`${this.props.elementClass} labeled-field`}>
+        <label className="labeled-field__label">{this.props.label}</label>
+        <div className="labeled-field__field">{this.props.field}</div>
+      </div>
+    );
+  }
+}
diff --git a/src/application/components/profile/profile.scss b/src/application/components/profile/profile.scss
new file mode 100644
index 0000000..e614e20
--- /dev/null
+++ b/src/application/components/profile/profile.scss
@@ -0,0 +1,18 @@
+.profile {
+  &__first-name,
+  &__second-name,
+  &__city,
+  &__contacts,
+  &__company-name,
+  &__company-description,
+  &__company-website,
+  &__position,
+  &__education {
+    width: var(--5-col);
+    margin-bottom: var(--col-margin);
+  }
+  &__contacts {
+    width: var(--5-col);
+    margin-bottom: var(16px);
+  }
+}
diff --git a/src/application/components/profile/profile.tsx b/src/application/components/profile/profile.tsx
new file mode 100644
index 0000000..087eaa0
--- /dev/null
+++ b/src/application/components/profile/profile.tsx
@@ -0,0 +1,87 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { UserType } from '@/application/models/user-type';
+import { Applicant } from '@application/models/applicant';
+import { Employer } from '@application/models/employer';
+import { LabeledField } from '../labeled_field/labeled_field';
+import './profile.scss';
+
+export interface ProfileProps {
+  elementClass: string;
+  userType: UserType;
+  userProfile: Applicant | Employer;
+}
+
+export class Profile extends Component {
+  constructor({ elementClass, userType, userProfile }: ProfileProps) {
+    super({ elementClass, userType, userProfile });
+  }
+
+  render() {
+    const userProfile =
+      this.props.userType === UserType.Applicant
+        ? (this.props.userProfile as Applicant)
+        : (this.props.userProfile as Employer);
+    return this.props.userType === UserType.Applicant ? (
+      <div className={`${this.props.elementClass} profile`}>
+        <LabeledField
+          key="first-name"
+          elementClass="profile__first-name"
+          label="Имя"
+          field={userProfile.firstName}
+        />
+        <LabeledField
+          key="second-name"
+          elementClass="profile__second-name"
+          label="Фамилия"
+          field={userProfile.secondName}
+        />
+        <LabeledField
+          key="education"
+          elementClass="profile__education"
+          label="Образование"
+          field={(userProfile as Applicant).education}
+        />
+      </div>
+    ) : (
+      <div className={`${this.props.elementClass} profile`}>
+        <LabeledField
+          key="first-name"
+          elementClass="profile__first-name"
+          label="Имя"
+          field={userProfile.firstName}
+        />
+        <LabeledField
+          key="second-name"
+          elementClass="profile__second-name"
+          label="Фамилия"
+          field={userProfile.secondName}
+        />
+        <LabeledField
+          key="position"
+          elementClass="profile__position"
+          label="Должность"
+          field={(userProfile as Employer).position}
+        />
+        <LabeledField
+          key="company-name"
+          elementClass="profile__company-name"
+          label="Компания"
+          field={(userProfile as Employer).companyName}
+        />
+        <LabeledField
+          key="company-description"
+          elementClass="profile__company-description"
+          label="Описание компании"
+          field={(userProfile as Employer).companyDescription}
+        />
+        <LabeledField
+          key="company-website"
+          elementClass="profile__company-website"
+          label="Сайт компании"
+          field={(userProfile as Employer).companyWebsite}
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/application/components/profile_form/profile_form.tsx b/src/application/components/profile_form/profile_form.tsx
new file mode 100644
index 0000000..25064d7
--- /dev/null
+++ b/src/application/components/profile_form/profile_form.tsx
@@ -0,0 +1,131 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { Input } from '@/application/components/input/input';
+import { UserType } from '@/application/models/user-type';
+
+export interface ProfileFormProps {
+  elementClass: string;
+  userType: UserType;
+}
+
+export class ProfileForm extends Component {
+  constructor({ elementClass, userType }: ProfileFormProps) {
+    super({ elementClass, userType });
+  }
+  render() {
+    return this.props.userType === UserType.Applicant ? (
+      <form
+        className={`${this.props.elementClass} profile-form`}
+        id="profile-form"
+        method="POST"
+        novalidate
+      >
+        <Input
+          key="input-first-name"
+          elementClass="profile-form__first-name"
+          id="first-name"
+          label="Имя"
+          name="firstName"
+          type="text"
+          isRequired={true}
+          maxlength={50}
+        />
+        <Input
+          key="input-second-name"
+          elementClass="profile-form__second-name"
+          id="second-name"
+          label="Фамилия"
+          name="secondName"
+          type="text"
+          isRequired={true}
+          maxlength={50}
+        />
+        <Input
+          key="input-city"
+          elementClass="profile-form__city"
+          id="city"
+          label="Город"
+          name="city"
+          type="text"
+          isRequired={true}
+          maxlength={50}
+        />
+        <Input
+          key="input-education"
+          elementClass="profile-form__education"
+          id="education"
+          label="Образование"
+          name="education"
+          type="textarea"
+          maxlength={500}
+        />
+        <Input
+          key="input-birthdate"
+          elementClass="profile-form__birthdate"
+          id="birthDate"
+          label="Дата рождения"
+          name="birthDate"
+          type="date"
+          isRequired={true}
+          maxlength={50}
+        />
+        <Input
+          key="input-contacts"
+          elementClass="profile-form__contacts"
+          id="contacts"
+          label="Контакты"
+          name="contacts"
+          type="textarea"
+          maxlength={500}
+        />
+      </form>
+    ) : (
+      <form
+        className={`${this.props.elementClass} profile-form`}
+        id="profile-form"
+        method="POST"
+        novalidate
+      >
+        <Input
+          key="input-first-name"
+          elementClass="profile-form__first-name"
+          id="first-name"
+          label="Имя"
+          name="firstName"
+          type="text"
+          isRequired={true}
+          maxlength={50}
+        />
+        <Input
+          key="input-second-name"
+          elementClass="profile-form__second-name"
+          id="second-name"
+          label="Фамилия"
+          name="secondName"
+          type="text"
+          isRequired={true}
+          maxlength={50}
+        />
+        <Input
+          key="input-city"
+          elementClass="profile-form__city"
+          id="city"
+          label="Город"
+          name="city"
+          type="text"
+          isRequired={true}
+          maxlength={50}
+        />
+        <Input
+          key="input-contacts"
+          elementClass="profile-form__contacts"
+          id="contacts"
+          label="Контакты"
+          name="contacts"
+          type="textarea"
+          maxlength={500}
+        />
+      </form>
+    );
+  }
+}
diff --git a/src/application/components/profile_minicard/profile_minicard.scss b/src/application/components/profile_minicard/profile_minicard.scss
new file mode 100644
index 0000000..60ea061
--- /dev/null
+++ b/src/application/components/profile_minicard/profile_minicard.scss
@@ -0,0 +1,49 @@
+.profile-minicard {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 24px;
+  &__user-icon {
+    width: 200px;
+    height: 200px;
+    border-radius: 100px;
+    border: solid 2px var(--color-main-100);
+  }
+
+  &__user-name {
+    font-size: var(--text-size-10);
+    text-align: center;
+  }
+
+  &__geoposition-container {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  &__geoposition-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  &__geoposition {
+    font-size: var(--text-size-5);
+  }
+
+  &__contacts-container {
+    text-align: center;
+    margin-bottom: 24px;
+  }
+
+  &__contacts-header {
+    font-size: var(--text-size-7);
+    margin: 0;
+    margin-bottom: 12px;
+  }
+
+  &__contacts {
+    font-size: var(--text-size-5);
+    line-height: 1.5;
+  }
+}
diff --git a/src/application/components/profile_minicard/profile_minicard.tsx b/src/application/components/profile_minicard/profile_minicard.tsx
new file mode 100644
index 0000000..4ea1c95
--- /dev/null
+++ b/src/application/components/profile_minicard/profile_minicard.tsx
@@ -0,0 +1,38 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import geopositionIconSvg from '@static/img/geoposition-icon.svg';
+import fallbackUserIconSvg from '@static/img/user-icon-80.svg';
+import './profile_minicard.scss';
+
+export interface ProfileMinicardProps {
+  elementClass?: string;
+  fullName: string;
+  city?: string;
+  contacts?: string;
+}
+
+export class ProfileMinicard extends Component {
+  constructor({ elementClass = '', fullName, city, contacts }: ProfileMinicardProps) {
+    super({ elementClass, fullName, city, contacts });
+  }
+
+  render() {
+    return (
+      <div className={`${this.props.elementClass} profile-minicard`}>
+        <img
+          className="profile-minicard__user-icon"
+          src={this.props.avatar ?? fallbackUserIconSvg}
+        />
+        <div className="profile-minicard__user-name">{this.props.fullName}</div>
+        <div className="profile-minicard__geoposition-container">
+          <img className="profile-minicard__geoposition-icon" src={geopositionIconSvg} />
+          <span className="profile-minicard__geoposition">{this.props.city && 'Неизвестно'}</span>
+        </div>
+        <div className="profile-minicard__contacts-container">
+          <h3 className="profile-minicard__contacts-header">Контакты</h3>
+          <div className="profile-minicard__contacts">{this.props.contacts && 'Не указаны'}</div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/application/components/read_update_form_box/read_update_form_box.scss b/src/application/components/read_update_form_box/read_update_form_box.scss
new file mode 100644
index 0000000..e904e93
--- /dev/null
+++ b/src/application/components/read_update_form_box/read_update_form_box.scss
@@ -0,0 +1,7 @@
+.read-update-form-box {
+  &__button-container {
+    display: flex;
+    flex-direction: row;
+    gap: var(--col-margin);
+  }
+}
diff --git a/src/application/components/read_update_form_box/read_update_form_box.tsx b/src/application/components/read_update_form_box/read_update_form_box.tsx
new file mode 100644
index 0000000..733b439
--- /dev/null
+++ b/src/application/components/read_update_form_box/read_update_form_box.tsx
@@ -0,0 +1,75 @@
+import { Component, VirtualNodeSpec } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import './read_update_form_box.scss';
+
+export interface ReadUpdateFormBoxProps {
+  elementClass?: string;
+  canUpdate?: boolean;
+}
+
+export class ReadUpdateFormBox extends Component {
+  private isUpdating: boolean = false;
+  constructor(
+    { elementClass = '', canUpdate = false }: ReadUpdateFormBoxProps,
+    [readChild, updateChild]: Array<VirtualNodeSpec | string>,
+  ) {
+    super({ elementClass, canUpdate }, [readChild, updateChild]);
+  }
+
+  private handleUpdateClick = (ev: Event) => {
+    ev.preventDefault();
+    this.isUpdating = true;
+    this.domNode.virtualNode.root.update();
+  };
+
+  private handleSaveClick = (ev: Event) => {
+    ev.preventDefault();
+    this.isUpdating = false;
+    this.domNode.virtualNode.root.update();
+  };
+
+  private handleResetClick = (ev: Event) => {
+    ev.preventDefault();
+    this.isUpdating = false;
+    this.domNode.virtualNode.root.update();
+  };
+
+  render() {
+    return (
+      <div className={`${this.props.elementClass} read-update-form-box`}>
+        {this.isUpdating ? this.children[1] : this.children[0]}
+        {this.props.canUpdate && (
+          <div className="read-update-form-box__button-container">
+            {!this.isUpdating && (
+              <button
+                type="button"
+                className="read-update-form-box__update-button button button_main-primary"
+                onClick={this.handleUpdateClick}
+              >
+                Редактировать
+              </button>
+            )}
+            {this.isUpdating && (
+              <button
+                type="submit"
+                className="read-update-form-box__form-submit-button button button_main-primary"
+                onClick={this.handleSaveClick}
+              >
+                Сохранить
+              </button>
+            )}
+            {this.isUpdating && (
+              <button
+                type="reset"
+                className="read-update-form-box__form-reset-button button button_danger-tertiary"
+                onClick={this.handleResetClick}
+              >
+                Отменить
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/application/pages/profile_page/profile_page.scss b/src/application/pages/profile_page/profile_page.scss
new file mode 100644
index 0000000..f434815
--- /dev/null
+++ b/src/application/pages/profile_page/profile_page.scss
@@ -0,0 +1,30 @@
+@use '@/scss/variables' as v;
+
+.profile-page {
+  display: flex;
+  flex-direction: column-reverse;
+  width: var(--12-col);
+  margin-top: var(--col-margin);
+  gap: var(--col-margin);
+  align-self: center;
+  align-items: start;
+  &__profile-minicard {
+    width: var(--3-col);
+    background-color: var(--color-background-900);
+    border-radius: var(--radius-l);
+    padding: 16px;
+    color: var(--color-main-100);
+  }
+  &__frame-series {
+    width: var(--9-col);
+    grid-row: 2 / span 1;
+    max-width: var(--9-col);
+  }
+}
+
+@media screen and (min-width: v.$mobile-breakpoint) {
+  .profile-page {
+    display: flex;
+    flex-direction: row;
+  }
+}
diff --git a/src/application/pages/profile_page/profile_page.tsx b/src/application/pages/profile_page/profile_page.tsx
new file mode 100644
index 0000000..8d39d4d
--- /dev/null
+++ b/src/application/pages/profile_page/profile_page.tsx
@@ -0,0 +1,134 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { ProfileMinicard } from '@/application/components/profile_minicard/profile_minicard';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
+import { UserType } from '@/application/models/user-type';
+import { userStore } from '@/application/stores/user_store/user_store';
+import { routerActionCreators } from '@/application/action_creators/router_action_creators';
+import { FrameSeries } from '@/application/components/frame_series/frame_series';
+import { PageContainer } from '@/application/components/page_container/page_container';
+import './profile_page.scss';
+import { ReadUpdateFormBox } from '@/application/components/read_update_form_box/read_update_form_box';
+import { Profile } from '@/application/components/profile/profile';
+import { ProfileForm } from '@/application/components/profile_form/profile_form';
+
+export enum ProfilePageParams {
+  UserId = 'id',
+  UserType = 'userType',
+  StartFrame = 'from',
+}
+
+export enum ProfilePageStartingFrames {
+  Profile = 'profile',
+  CvList = 'cvList',
+  PortfolioList = 'portfolioList',
+  VacancyList = 'vacancyList',
+}
+
+export class ProfilePage extends Component {
+  private isMyProfile: boolean;
+  private userId: number;
+  private userType: UserType;
+  private startFrom: ProfilePageStartingFrames;
+  private activeFrameIdx: number;
+  private setActiveFrameIdx: (frameIdx: number) => void;
+  constructor({ url }: { url: URL }) {
+    super({ url });
+    this.parseUrl();
+    this.activeFrameIdx = 0;
+    this.setActiveFrameIdx = (frameIdx: number) => {
+      this.activeFrameIdx = frameIdx;
+      this.domNode.virtualNode.root.update();
+    };
+  }
+
+  didUpdate(): void {
+    super.didUpdate();
+    this.parseUrl();
+  }
+
+  parseUrl() {
+    const url = this.props.url as URL;
+    const userData = userStore.getData();
+    if (url.pathname === resolveUrl('myProfile', null).pathname) {
+      this.userId = userData.id;
+      this.userType = userData.userType;
+      this.isMyProfile = true;
+    } else {
+      this.userId = Number(url.searchParams.get(ProfilePageParams.UserId));
+      this.userType = url.searchParams.get(ProfilePageParams.UserType) as UserType;
+      this.isMyProfile = userData.id === this.userId;
+    }
+    switch (url.searchParams.get(ProfilePageParams.StartFrame)) {
+      case ProfilePageStartingFrames.CvList: {
+        this.startFrom =
+          this.userType === UserType.Applicant
+            ? ProfilePageStartingFrames.CvList
+            : ProfilePageStartingFrames.Profile;
+        break;
+      }
+      case ProfilePageStartingFrames.PortfolioList: {
+        this.startFrom =
+          this.userType === UserType.Applicant
+            ? ProfilePageStartingFrames.PortfolioList
+            : ProfilePageStartingFrames.Profile;
+        break;
+      }
+      case ProfilePageStartingFrames.VacancyList: {
+        this.startFrom =
+          this.userType === UserType.Employer
+            ? ProfilePageStartingFrames.VacancyList
+            : ProfilePageStartingFrames.Profile;
+        break;
+      }
+      default: {
+        this.startFrom = ProfilePageStartingFrames.Profile;
+      }
+    }
+  }
+
+  render() {
+    const userData = userStore.getData();
+    if (this.isMyProfile && !userData.isLoggedIn) {
+      routerActionCreators.redirect(resolveUrl('login', null));
+      return <div>{false}</div>;
+    }
+    return (
+      <PageContainer key="page-container" elementClass="profile-page__page-container">
+        <div class="profile-page" key="profile-page">
+          <FrameSeries
+            key="frame-series"
+            elementClass="profile-page__frame-series"
+            activeFrameIndex={this.activeFrameIdx}
+            setActiveFrameIndex={(idx: number) => this.setActiveFrameIdx(idx)}
+            childrenLabels={
+              this.userType === UserType.Applicant ? ['Профиль', 'Резюме'] : ['Профиль', 'Вакансии']
+            }
+          >
+            <ReadUpdateFormBox
+              key="read-update-form-box"
+              elementClass="profile-page__read-update-form-box"
+              canUpdate={true}
+            >
+              <Profile
+                key="profile"
+                elementClass="profile-page__profile"
+                userType={this.userType}
+                userProfile={userData.userProfile}
+              />
+              <ProfileForm key="profile-form" elementClass="profile-page__profile-form" />
+            </ReadUpdateFormBox>
+            <div>Hello2</div>
+          </FrameSeries>
+          <ProfileMinicard
+            elementClass="profile-page__profile-minicard"
+            fullName="Иван Иванов"
+            city="Москва"
+            contacts="@tg: hello"
+            key="profile-minicard"
+          />
+        </div>
+      </PageContainer>
+    );
+  }
+}
diff --git a/src/application/pages/registration_page/registration_page.tsx b/src/application/pages/registration_page/registration_page.tsx
index 2b36dc7..95547be 100644
--- a/src/application/pages/registration_page/registration_page.tsx
+++ b/src/application/pages/registration_page/registration_page.tsx
@@ -17,6 +17,7 @@ export class RegistrationPage extends Component {
     super({ url });
     this.setUserType = (userType: UserType) => {
       this.userType = userType;
+      console.log(this.domNode);
       this.domNode.virtualNode.root.update();
     };
   }
@@ -84,7 +85,7 @@ export class RegistrationPage extends Component {
               key="input-birthdate"
               elementClass="registration-page__birthdate"
               id="birthdate"
-              label="Дата Рождения"
+              label="Дата рождения"
               name="birthDate"
               type="date"
               isRequired={true}
diff --git a/src/config/backend.json b/src/config/backend.json
index cb6c589..45bc5f6 100644
--- a/src/config/backend.json
+++ b/src/config/backend.json
@@ -1,3 +1,3 @@
 {
-  "backendPrefix": "http://localhost:8009/api/v1/"
+  "backendPrefix": "http://localhost:8082/api/v1/"
 }
diff --git a/src/index.tsx b/src/index.tsx
index 6365dae..3c9b442 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,21 +1,22 @@
-import { Router } from './application/components/router/router';
+import { Router } from '@/application/components/router/router';
 import * as vdom from '@/modules/vdom/virtual_dom';
 import { LoginPage } from '@/application/pages/login_page/login_page';
 // import { RegistrationPage } from './Pages/RegistrationPage/RegistrationPage';
 // import { ProfilePage } from './Pages/ProfilePage/ProfilePage';
 // import { VacancyPage } from './Pages/VacancyPage/VacancyPage';
 // import { VacancyEditPage } from './Pages/VacancyEditPage/VacancyEditPage';
-import { resolveUrl } from './modules/common_utils/url_utils/url_utils';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
 // import { CvPage } from './Pages/CvPage/CvPage';
 // import { CvEditPage } from './Pages/CvEditPage/CvEditPage';
-import { NotificationBox } from './Components/NotificationBox/NotificationBox';
+import { NotificationBox } from '@/Components/NotificationBox/NotificationBox';
 import { VacanciesPage } from '@/application/pages/vacancies_page/vacancies_page';
 import './scss/index.scss';
-import { storeManager } from './modules/store_manager/store_manager';
-import { routerActionCreators } from './application/action_creators/router_action_creators';
-import { VirtualDomRoot } from './modules/vdom/virtual_dom_root';
-import { userActionCreators } from './application/action_creators/user_action_creators';
-import { RegistrationPage } from './application/pages/registration_page/registration_page';
+import { storeManager } from '@/modules/store_manager/store_manager';
+import { routerActionCreators } from '@/application/action_creators/router_action_creators';
+import { VirtualDomRoot } from '@/modules/vdom/virtual_dom_root';
+import { userActionCreators } from '@/application/action_creators/user_action_creators';
+import { RegistrationPage } from '@/application/pages/registration_page/registration_page';
+import { ProfilePage } from '@/application/pages/profile_page/profile_page';
 
 // eslint-disable-next-line
 const notificationBox = new NotificationBox({
@@ -36,6 +37,8 @@ const appRoot = new VirtualDomRoot(document.getElementById('app'));
 routerActionCreators.addRoute(resolveUrl('vacancies', null), VacanciesPage);
 routerActionCreators.addRoute(resolveUrl('login', null), LoginPage);
 routerActionCreators.addRoute(resolveUrl('register', null), RegistrationPage);
+routerActionCreators.addRoute(resolveUrl('myProfile', null), ProfilePage);
+routerActionCreators.addRoute(resolveUrl('profile', null), ProfilePage);
 routerActionCreators.startRouting(new URL(location.href));
 
 userActionCreators.isAuthorized().finally(() => {
diff --git a/src/modules/vdom/virtual_dom.ts b/src/modules/vdom/virtual_dom.ts
index 183fff4..c32d760 100644
--- a/src/modules/vdom/virtual_dom.ts
+++ b/src/modules/vdom/virtual_dom.ts
@@ -273,6 +273,7 @@ function updateComponentChain(curHtml: NodeWithVirtualNode, firstRender: Virtual
     const newVirtualNode = createVirtualNode(newRender);
     newRender = newVirtualNode.renderedSpec;
     newVirtualNode.parent = lastChainPiece;
+    newVirtualNode.state.domNode = lastChainPiece.state.domNode;
     lastChainPiece = newVirtualNode;
     newOldComponentVirtualNodes.push(newVirtualNode);
   }
@@ -318,7 +319,12 @@ function updateChildren(
       if (newHtmlNode.virtualNode) {
         newHtmlNode.virtualNode.parent = curHtml.originalVirtualNode || curHtml.virtualNode;
       }
-      curHtml.insertBefore(newHtmlNode, curHtml.childNodes[newChildIdx]);
+      const toRemoveChild = curHtml.childNodes[newChildIdx];
+      curHtml.insertBefore(newHtmlNode, toRemoveChild);
+      if (toRemoveChild) {
+        destroyNode(toRemoveChild);
+        curHtml.removeChild(toRemoveChild);
+      }
       if (newHtmlNode.virtualNode && newHtmlNode.virtualNode.state) {
         newHtmlNode.virtualNode.state.didMount();
         if (newHtmlNode.oldComponentVirtualNodes) {
diff --git a/src/scss/_common.scss b/src/scss/_common.scss
index d1247d3..2b286f2 100644
--- a/src/scss/_common.scss
+++ b/src/scss/_common.scss
@@ -1,18 +1,3 @@
-.border_radius-small {
-  border: solid;
-  border-radius: 4px;
-}
-
-.border_radius-medium {
-  border: solid;
-  border-radius: 8px;
-}
-
-.border_radius-large {
-  border: solid;
-  border-radius: 12px;
-}
-
 /* ruler component */
 
 .ruler {
@@ -57,46 +42,6 @@
   }
 }
 
-/* Frame series component */
-.frame-series {
-  &__frame-selector {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    gap: 24px;
-  }
-
-  &__divider {
-    width: 100%;
-    height: 2px;
-    background-color: var(--color-main-100);
-    margin: 24px 0px;
-  }
-
-  &__frame-container {
-    background-color: var(--color-background-800);
-    border-radius: 25px;
-    padding: 24px;
-  }
-}
-
-.frame-choice {
-  font-size: var(--text-size-9);
-  border-radius: 14px;
-  cursor: pointer;
-  padding: 10px;
-
-  &_inactive {
-    background-color: none;
-  }
-
-  &_active {
-    background-color: var(--color-main-500);
-    color: var(--color-background-1000);
-    border-radius: 8px;
-  }
-}
-
 /* crud form box */
 
 .crud-form-box {
diff --git a/src/scss/_profile.scss b/src/scss/_profile.scss
index cd8ffda..f2b3fd5 100644
--- a/src/scss/_profile.scss
+++ b/src/scss/_profile.scss
@@ -1,71 +1,3 @@
-.profile-page {
-  display: grid;
-  margin: auto;
-  width: 1280px;
-  padding-top: 32px;
-  grid-template-columns: 1fr 3fr;
-  &__profile-minicard {
-    background-color: var(--color-background-900);
-    border-radius: 25px;
-    padding: 16px 36px;
-    color: var(--color-main-100);
-  }
-  &__frame-series {
-    margin-left: 32px;
-  }
-}
-
-/* Profile minicard */
-
-.profile-minicard {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 24px;
-  &__user-icon {
-    width: 200px;
-    height: 200px;
-    border-radius: 100px;
-    border: solid 2px var(--color-main-100);
-  }
-
-  &__user-name {
-    font-size: var(--text-size-10);
-    text-align: center;
-  }
-
-  &__geoposition-container {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  &__geoposition-icon {
-    width: 24px;
-    height: 24px;
-  }
-
-  &__geoposition {
-    font-size: var(--text-size-5);
-  }
-
-  &__contacts-container {
-    text-align: center;
-    margin-bottom: 24px;
-  }
-
-  &__contacts-header {
-    font-size: var(--text-size-7);
-    margin: 0;
-    margin-bottom: 12px;
-  }
-
-  &__contacts {
-    font-size: var(--text-size-5);
-    line-height: 1.5;
-  }
-}
-
 /* Profile form */
 
 .applicant-profile-form {
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 1b9b001..f7ece64 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -94,6 +94,8 @@
 
 @media screen and (min-width: v.$mobile-breakpoint) {
   :root {
+    --col-width: #{v.$col-width};
+    --container-width: #{v.$container-width};
     --2-col: #{calc(2 * v.$col-width + v.$col-margin)};
     --3-col: #{calc(3 * v.$col-width + 2 * v.$col-margin)};
     --4-col: #{calc(4 * v.$col-width + 3 * v.$col-margin)};

From 9ebb30c06a9ed83ed678f691ea24768750519230 Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Sun, 15 Dec 2024 03:30:46 +0300
Subject: [PATCH 10/17] fix: removed unused components

---
 .../ApplicantProfileForm.js                   | 93 -------------------
 .../ApplicantProfileFormController.js         | 56 -----------
 .../ApplicantProfileFormModel.js              | 42 ---------
 .../ApplicantProfileFormView.js               | 36 -------
 .../applicant-profile-form.hbs                |  8 --
 .../EmployerProfileForm.js                    | 72 --------------
 .../EmployerProfileFormController.js          | 48 ----------
 .../EmployerProfileFormModel.js               | 34 -------
 .../EmployerProfileFormView.js                | 32 -------
 .../employer-profile-form.hbs                 |  6 --
 src/Components/FrameSeries/FrameSeries.js     | 27 ------
 .../FrameSeries/FrameSeriesController.js      | 22 -----
 .../FrameSeries/FrameSeriesModel.js           |  3 -
 src/Components/FrameSeries/FrameSeriesView.js | 64 -------------
 src/Components/FrameSeries/frame-choice.hbs   |  3 -
 src/Components/FrameSeries/frame-series.hbs   |  7 --
 .../ProfileMinicard/ProfileMinicard.js        | 17 ----
 .../ProfileMinicardController.js              | 23 -----
 .../ProfileMinicard/ProfileMinicardModel.js   | 27 ------
 .../ProfileMinicard/ProfileMinicardView.js    | 35 -------
 .../ProfileMinicard/profile-minicard.hbs      | 13 ---
 21 files changed, 668 deletions(-)
 delete mode 100644 src/Components/ApplicantProfileForm/ApplicantProfileForm.js
 delete mode 100644 src/Components/ApplicantProfileForm/ApplicantProfileFormController.js
 delete mode 100644 src/Components/ApplicantProfileForm/ApplicantProfileFormModel.js
 delete mode 100644 src/Components/ApplicantProfileForm/ApplicantProfileFormView.js
 delete mode 100644 src/Components/ApplicantProfileForm/applicant-profile-form.hbs
 delete mode 100644 src/Components/EmployerProfileForm/EmployerProfileForm.js
 delete mode 100644 src/Components/EmployerProfileForm/EmployerProfileFormController.js
 delete mode 100644 src/Components/EmployerProfileForm/EmployerProfileFormModel.js
 delete mode 100644 src/Components/EmployerProfileForm/EmployerProfileFormView.js
 delete mode 100644 src/Components/EmployerProfileForm/employer-profile-form.hbs
 delete mode 100644 src/Components/FrameSeries/FrameSeries.js
 delete mode 100644 src/Components/FrameSeries/FrameSeriesController.js
 delete mode 100644 src/Components/FrameSeries/FrameSeriesModel.js
 delete mode 100644 src/Components/FrameSeries/FrameSeriesView.js
 delete mode 100644 src/Components/FrameSeries/frame-choice.hbs
 delete mode 100644 src/Components/FrameSeries/frame-series.hbs
 delete mode 100644 src/Components/ProfileMinicard/ProfileMinicard.js
 delete mode 100644 src/Components/ProfileMinicard/ProfileMinicardController.js
 delete mode 100644 src/Components/ProfileMinicard/ProfileMinicardModel.js
 delete mode 100644 src/Components/ProfileMinicard/ProfileMinicardView.js
 delete mode 100644 src/Components/ProfileMinicard/profile-minicard.hbs

diff --git a/src/Components/ApplicantProfileForm/ApplicantProfileForm.js b/src/Components/ApplicantProfileForm/ApplicantProfileForm.js
deleted file mode 100644
index fa3d893..0000000
--- a/src/Components/ApplicantProfileForm/ApplicantProfileForm.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { ApplicantProfileFormView } from './ApplicantProfileFormView';
-import { ApplicantProfileFormModel } from './ApplicantProfileFormModel';
-import { ApplicantProfileFormController } from './ApplicantProfileFormController';
-import { LiteralInput } from '@/Components/FormInputs/LiteralInput/LiteralInput';
-import { DateInput } from '@/Components/FormInputs/DateInput/DateInput';
-import { CityInput } from '@/Components/FormInputs/CityInput/CityInput';
-import { ValidatedTextArea } from '@/Components/FormInputs/ValidatedTextArea/ValidatedTextArea';
-
-export class ApplicantProfileForm extends Component {
-  constructor({ userId, elementClass, existingElement }) {
-    super({
-      modelClass: ApplicantProfileFormModel,
-      modelParams: { userId },
-      viewClass: ApplicantProfileFormView,
-      controllerClass: ApplicantProfileFormController,
-      existingElement,
-      viewParams: elementClass,
-    });
-    this._firstNameField = new LiteralInput({
-      existingElement: this._view.firstNameField,
-      selfValidate: true,
-    });
-    this._secondNameField = new LiteralInput({
-      existingElement: this._view.secondNameField,
-      selfValidate: true,
-    });
-    this._birthDateField = new DateInput({
-      existingElement: this._view.birthDateField,
-      selfValidate: true,
-    });
-    this._cityField = new CityInput({
-      existingElement: this._view.cityField,
-      selfValidate: true,
-    });
-    this._educationField = new ValidatedTextArea({
-      existingElement: this._view.educationField,
-      selfValidate: true,
-    });
-    this._contactsField = new ValidatedTextArea({
-      existingElement: this._view.contactsField,
-      selfValidate: true,
-    });
-    this._children.push(
-      this._firstNameField,
-      this._secondNameField,
-      this._birthDateField,
-      this._cityField,
-      this._educationField,
-      this._contactsField,
-    );
-
-    this.reset();
-  }
-
-  enable() {
-    [
-      this._firstNameField,
-      this._secondNameField,
-      this._birthDateField,
-      this._cityField,
-      this._educationField,
-      this._contactsField,
-    ].forEach((field) => {
-      field.controller.enable();
-    });
-  }
-
-  disable() {
-    [
-      this._firstNameField,
-      this._secondNameField,
-      this._birthDateField,
-      this._cityField,
-      this._educationField,
-      this._contactsField,
-    ].forEach((field) => {
-      field.controller.disable();
-    });
-  }
-
-  reset() {
-    return this._controller.reset();
-  }
-
-  submit() {
-    return this._controller.submit();
-  }
-
-  get view() {
-    return this._view;
-  }
-}
diff --git a/src/Components/ApplicantProfileForm/ApplicantProfileFormController.js b/src/Components/ApplicantProfileForm/ApplicantProfileFormController.js
deleted file mode 100644
index 6851d17..0000000
--- a/src/Components/ApplicantProfileForm/ApplicantProfileFormController.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-import eventBus from '@/modules/Events/EventBus';
-import { NOTIFICATION_OK, USER_UPDATED } from '@/modules/Events/Events';
-import { NOTIFICATION_TIMEOUT } from '@/Components/NotificationBox/NotificationBox';
-
-export class ApplicantProfileFormController extends ComponentController {
-  constructor(model, view, controller) {
-    super(model, view, controller);
-  }
-
-  _validate() {
-    return [
-      this._component._firstNameField.controller.validateInput({
-        callerView: this._component._firstNameField._view,
-      }),
-
-      this._component._secondNameField.controller.validateInput({
-        callerView: this._component._secondNameField._view,
-      }),
-
-      this._component._birthDateField.controller.validateInput({
-        callerView: this._component._birthDateField._view,
-      }),
-
-      this._component._cityField.controller.validateInput({
-        callerView: this._component._cityField._view,
-      }),
-
-      this._component._educationField.controller.validateInput({
-        callerView: this._component._educationField._view,
-      }),
-
-      this._component._contactsField.controller.validateInput({
-        callerView: this._component._contactsField._view,
-      }),
-    ].every((val) => val);
-  }
-
-  async submit() {
-    if (!this._validate() || !(await this._model.submit(this._view.getData()))) {
-      return false;
-    }
-    eventBus.emit(USER_UPDATED);
-    eventBus.emit(NOTIFICATION_OK, {
-      message: 'Успешно сохранено',
-      timeout: NOTIFICATION_TIMEOUT.MEDIUM,
-    });
-    return true;
-  }
-
-  async reset() {
-    const oldData = await this._model.lastValidData;
-    this._view.renderData(oldData);
-    return true;
-  }
-}
diff --git a/src/Components/ApplicantProfileForm/ApplicantProfileFormModel.js b/src/Components/ApplicantProfileForm/ApplicantProfileFormModel.js
deleted file mode 100644
index 64bba50..0000000
--- a/src/Components/ApplicantProfileForm/ApplicantProfileFormModel.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-import {
-  getApplicant as apiGetApplicant,
-  updateApplicantProfile as apiUpdateApplicantProfile,
-} from '@api/api';
-import { Applicant } from '@/modules/models/Applicant';
-import { catchStandardResponseError } from '@/modules/app_errors/Errors';
-import appState from '@/modules/AppState/AppState';
-
-export class ApplicantProfileFormModel extends ComponentModel {
-  #lastValidData;
-  #userId;
-
-  constructor({ userId }) {
-    super();
-    this.#userId = userId;
-    this.#lastValidData = apiGetApplicant(appState.backendUrl, userId).then((response) => {
-      const app = new Applicant(response);
-      app.birthDate = app.birthDate.toISOString().split('T')[0];
-      return app;
-    });
-  }
-
-  get lastValidData() {
-    return this.#lastValidData;
-  }
-
-  async submit(formData) {
-    formData.birthDate = new Date(formData.birthDate);
-    formData.id = this.#userId;
-    try {
-      await apiUpdateApplicantProfile(appState.backendUrl, formData);
-      const app = new Applicant(formData);
-      app.birthDate = app.birthDate.toISOString().split('T')[0];
-      this.#lastValidData = app;
-      return true;
-    } catch (err) {
-      catchStandardResponseError(err);
-    }
-    return false;
-  }
-}
diff --git a/src/Components/ApplicantProfileForm/ApplicantProfileFormView.js b/src/Components/ApplicantProfileForm/ApplicantProfileFormView.js
deleted file mode 100644
index 2a7c79c..0000000
--- a/src/Components/ApplicantProfileForm/ApplicantProfileFormView.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import { getFormData } from '@/modules/FormUtils/FormUtils';
-import ApplicantProfileFormHbs from './applicant-profile-form.hbs';
-
-export class ApplicantProfileFormView extends ComponentView {
-  constructor({ elementClass }, existingElement) {
-    super({
-      renderParams: { elementClass },
-      existingElement,
-      template: ApplicantProfileFormHbs,
-    });
-    this.firstNameField = this._html.querySelector('.applicant-profile-form__first-name');
-    this.secondNameField = this._html.querySelector('.applicant-profile-form__second-name');
-    this.birthDateField = this._html.querySelector('.applicant-profile-form__birthdate');
-    this.cityField = this._html.querySelector('.applicant-profile-form__city');
-    this.educationField = this._html.querySelector('.applicant-profile-form__education');
-    this.contactsField = this._html.querySelector('.applicant-profile-form__contacts');
-  }
-
-  getData() {
-    return getFormData(this._html);
-  }
-
-  getId() {
-    return 'applicant-profile-form';
-  }
-
-  renderData({ firstName, secondName, birthDate, city, education, contacts }) {
-    this.firstNameField.querySelector('.validated-input__input').value = firstName;
-    this.secondNameField.querySelector('.validated-input__input').value = secondName;
-    this.birthDateField.querySelector('.validated-input__input').value = birthDate;
-    this.cityField.querySelector('.validated-input__input').value = city;
-    this.educationField.querySelector('.validated-textarea__textarea').value = education;
-    this.contactsField.querySelector('.validated-textarea__textarea').value = contacts;
-  }
-}
diff --git a/src/Components/ApplicantProfileForm/applicant-profile-form.hbs b/src/Components/ApplicantProfileForm/applicant-profile-form.hbs
deleted file mode 100644
index 90e4de1..0000000
--- a/src/Components/ApplicantProfileForm/applicant-profile-form.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-<form class="{{elementClass}} applicant-profile-form" id="applicant-profile-form" method="POST" novalidate>
-    {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="applicant-profile-form" elementName="first-name" inputName="firstName" inputCaption="Имя" inputType="text"}}
-    {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="applicant-profile-form" elementName="second-name" inputName="secondName" inputCaption="Фамилия" inputType="text"}}
-    {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="applicant-profile-form" elementName="city" inputName="city" inputCaption="Город" inputType="text"}}
-    {{> ../FormInputs/ValidatedTextArea/validated-textarea.hbs formName="applicant-profile-form" elementName="education" inputName="education" inputCaption="Образование"}}
-    {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="applicant-profile-form" elementName="birthdate" inputName="birthDate" inputCaption="Дата Рождения" inputType="date"}}
-    {{> ../FormInputs/ValidatedTextArea/validated-textarea.hbs formName="applicant-profile-form" elementName="contacts" inputName="contacts" inputCaption="Контакты"}}
-</form>
\ No newline at end of file
diff --git a/src/Components/EmployerProfileForm/EmployerProfileForm.js b/src/Components/EmployerProfileForm/EmployerProfileForm.js
deleted file mode 100644
index c435b45..0000000
--- a/src/Components/EmployerProfileForm/EmployerProfileForm.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { EmployerProfileFormView } from './EmployerProfileFormView';
-import { EmployerProfileFormModel } from './EmployerProfileFormModel';
-import { EmployerProfileFormController } from './EmployerProfileFormController';
-import { LiteralInput } from '@/Components/FormInputs/LiteralInput/LiteralInput';
-import { CityInput } from '@/Components/FormInputs/CityInput/CityInput';
-import { ValidatedTextArea } from '@/Components/FormInputs/ValidatedTextArea/ValidatedTextArea';
-
-export class EmployerProfileForm extends Component {
-  constructor({ userId, elementClass, existingElement }) {
-    super({
-      modelClass: EmployerProfileFormModel,
-      viewClass: EmployerProfileFormView,
-      controllerClass: EmployerProfileFormController,
-      modelParams: { userId },
-      existingElement,
-      viewParams: { elementClass },
-    });
-    this._firstNameField = new LiteralInput({
-      existingElement: this._view.firstNameField,
-      selfValidate: true,
-    });
-    this._secondNameField = new LiteralInput({
-      existingElement: this._view.secondNameField,
-      selfValidate: true,
-    });
-    this._cityField = new CityInput({
-      existingElement: this._view.cityField,
-      selfValidate: true,
-    });
-    this._contactsField = new ValidatedTextArea({
-      existingElement: this._view.contactsField,
-      selfValidate: true,
-    });
-    this._children.push(
-      this._firstNameField,
-      this._secondNameField,
-      this._cityField,
-      this._contactsField,
-    );
-
-    this.reset();
-  }
-
-  get view() {
-    return this._view;
-  }
-
-  enable() {
-    [this._firstNameField, this._secondNameField, this._cityField, this._contactsField].forEach(
-      (field) => {
-        field.controller.enable();
-      },
-    );
-  }
-
-  disable() {
-    [this._firstNameField, this._secondNameField, this._cityField, this._contactsField].forEach(
-      (field) => {
-        field.controller.disable();
-      },
-    );
-  }
-
-  reset() {
-    return this._controller.reset();
-  }
-
-  submit() {
-    return this._controller.submit();
-  }
-}
diff --git a/src/Components/EmployerProfileForm/EmployerProfileFormController.js b/src/Components/EmployerProfileForm/EmployerProfileFormController.js
deleted file mode 100644
index 5a59abd..0000000
--- a/src/Components/EmployerProfileForm/EmployerProfileFormController.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-import eventBus from '@/modules/Events/EventBus';
-import { NOTIFICATION_OK, USER_UPDATED } from '@/modules/Events/Events';
-import { NOTIFICATION_TIMEOUT } from '@/Components/NotificationBox/NotificationBox';
-
-export class EmployerProfileFormController extends ComponentController {
-  constructor(model, view, controller) {
-    super(model, view, controller);
-  }
-
-  _validate() {
-    return [
-      this._component._firstNameField.controller.validateInput({
-        callerView: this._component._firstNameField._view,
-      }),
-
-      this._component._secondNameField.controller.validateInput({
-        callerView: this._component._secondNameField._view,
-      }),
-
-      this._component._cityField.controller.validateInput({
-        callerView: this._component._cityField._view,
-      }),
-
-      this._component._contactsField.controller.validateInput({
-        callerView: this._component._contactsField._view,
-      }),
-    ].every((val) => val);
-  }
-
-  async submit() {
-    if (!this._validate() || !(await this._model.submit(this._view.getData()))) {
-      return false;
-    }
-    eventBus.emit(USER_UPDATED);
-    eventBus.emit(NOTIFICATION_OK, {
-      message: 'Успешно сохранено',
-      timeout: NOTIFICATION_TIMEOUT.MEDIUM,
-    });
-    return true;
-  }
-
-  async reset() {
-    const oldData = await this._model.lastValidData;
-    this._view.renderData(oldData);
-    return true;
-  }
-}
diff --git a/src/Components/EmployerProfileForm/EmployerProfileFormModel.js b/src/Components/EmployerProfileForm/EmployerProfileFormModel.js
deleted file mode 100644
index 3ff8259..0000000
--- a/src/Components/EmployerProfileForm/EmployerProfileFormModel.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { catchStandardResponseError } from '@/modules/app_errors/Errors';
-import { ComponentModel } from '@/modules/Components/Component';
-import { Employer } from '@/modules/models/Employer';
-import { getEmployer, updateEmployerProfile } from '@/modules/api/api';
-import appState from '@/modules/AppState/AppState';
-
-export class EmployerProfileFormModel extends ComponentModel {
-  #lastValidData;
-  #userId;
-
-  constructor({ userId }) {
-    super();
-    this.#userId = userId;
-    this.#lastValidData = getEmployer(appState.backendUrl, userId).then(
-      (Response) => new Employer(Response),
-    );
-  }
-
-  get lastValidData() {
-    return this.#lastValidData;
-  }
-
-  async submit(formData) {
-    formData.id = this.#userId;
-    try {
-      await updateEmployerProfile(appState.backendUrl, formData);
-      this.#lastValidData = new Employer(formData);
-      return true;
-    } catch (err) {
-      catchStandardResponseError(err);
-    }
-    return false;
-  }
-}
diff --git a/src/Components/EmployerProfileForm/EmployerProfileFormView.js b/src/Components/EmployerProfileForm/EmployerProfileFormView.js
deleted file mode 100644
index 91836d7..0000000
--- a/src/Components/EmployerProfileForm/EmployerProfileFormView.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import { getFormData } from '@/modules/FormUtils/FormUtils';
-import EmployerProfileFormHbs from './employer-profile-form.hbs';
-
-export class EmployerProfileFormView extends ComponentView {
-  constructor({ elementClass }, existingElement) {
-    super({
-      renderParams: { elementClass },
-      existingElement,
-      template: EmployerProfileFormHbs,
-    });
-    this.firstNameField = this._html.querySelector('.employer-profile-form__first-name');
-    this.secondNameField = this._html.querySelector('.employer-profile-form__second-name');
-    this.cityField = this._html.querySelector('.employer-profile-form__city');
-    this.contactsField = this._html.querySelector('.employer-profile-form__contacts');
-  }
-
-  getData() {
-    return getFormData(this._html);
-  }
-
-  getId() {
-    return 'employer-profile-form';
-  }
-
-  renderData({ firstName, secondName, city, contacts }) {
-    this.firstNameField.querySelector('.validated-input__input').value = firstName;
-    this.secondNameField.querySelector('.validated-input__input').value = secondName;
-    this.cityField.querySelector('.validated-input__input').value = city;
-    this.contactsField.querySelector('.validated-textarea__textarea').value = contacts;
-  }
-}
diff --git a/src/Components/EmployerProfileForm/employer-profile-form.hbs b/src/Components/EmployerProfileForm/employer-profile-form.hbs
deleted file mode 100644
index f62a1ea..0000000
--- a/src/Components/EmployerProfileForm/employer-profile-form.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<form class="{{elementClass}} employer-profile-form" id="employer-profile-form" method="POST" novalidate>
-    {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="employer-profile-form" elementName="first-name" inputName="firstName" inputCaption="Имя" inputType="text"}}
-    {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="employer-profile-form" elementName="second-name" inputName="secondName" inputCaption="Фамилия" inputType="text"}}
-    {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="employer-profile-form" elementName="city" inputName="city" inputCaption="Город" inputType="text"}}
-    {{> ../FormInputs/ValidatedTextArea/validated-textarea.hbs formName="employer-profile-form" elementName="contacts" inputName="contacts" inputCaption="Контакты"}}
-</form>
\ No newline at end of file
diff --git a/src/Components/FrameSeries/FrameSeries.js b/src/Components/FrameSeries/FrameSeries.js
deleted file mode 100644
index 2c14e03..0000000
--- a/src/Components/FrameSeries/FrameSeries.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { FrameSeriesController } from './FrameSeriesController';
-import { FrameSeriesModel } from './FrameSeriesModel';
-import { FrameSeriesView } from './FrameSeriesView';
-
-export class FrameSeries extends Component {
-  constructor({ frames, startingFrame, viewParams, existingElement }) {
-    super({
-      modelClass: FrameSeriesModel,
-      viewClass: FrameSeriesView,
-      viewParams: viewParams,
-      existingElement,
-      controllerClass: FrameSeriesController,
-    });
-    this._frames = {};
-    frames.forEach(this.addFrame.bind(this));
-    if (startingFrame) {
-      this._controller.selectFrame({ frameName: startingFrame });
-    }
-  }
-
-  addFrame({ frameName, frameCaption, frameComponent }) {
-    this._frames[frameName] = frameComponent;
-    this._controller.addFrame({ frameName, frameCaption, frameComponent });
-    this._children.push(frameComponent);
-  }
-}
diff --git a/src/Components/FrameSeries/FrameSeriesController.js b/src/Components/FrameSeries/FrameSeriesController.js
deleted file mode 100644
index 5b4fcab..0000000
--- a/src/Components/FrameSeries/FrameSeriesController.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-import { SELECT_FRAME } from '@/modules/Events/Events';
-
-export class FrameSeriesController extends ComponentController {
-  constructor(model, view, component) {
-    super(model, view, component);
-    this.setHandlers([
-      {
-        event: SELECT_FRAME,
-        handler: this.selectFrame.bind(this),
-      },
-    ]);
-  }
-
-  addFrame({ frameName, frameCaption, frameComponent }) {
-    this._view.addFrame({ frameName, frameCaption, frameRender: frameComponent.render() });
-  }
-
-  selectFrame({ frameName }) {
-    this._view.selectFrame(frameName);
-  }
-}
diff --git a/src/Components/FrameSeries/FrameSeriesModel.js b/src/Components/FrameSeries/FrameSeriesModel.js
deleted file mode 100644
index 8a85932..0000000
--- a/src/Components/FrameSeries/FrameSeriesModel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-
-export const FrameSeriesModel = ComponentModel;
diff --git a/src/Components/FrameSeries/FrameSeriesView.js b/src/Components/FrameSeries/FrameSeriesView.js
deleted file mode 100644
index 1f04d9f..0000000
--- a/src/Components/FrameSeries/FrameSeriesView.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import eventBus from '@/modules/Events/EventBus';
-import { SELECT_FRAME } from '@/modules/Events/Events';
-import { addEventListeners } from '@/modules/Events/EventUtils';
-import FrameSeriesHbs from './frame-series.hbs';
-import FrameChoiceHbs from './frame-choice.hbs';
-
-export class FrameSeriesView extends ComponentView {
-  #frameSelector;
-  #frameContainer;
-  #frames;
-  #active;
-  constructor({ elementClass }, existingElement) {
-    super({
-      renderParams: { elementClass },
-      existingElement,
-      templateName: FrameSeriesHbs,
-    });
-    this.#frameSelector = this._html.querySelector('.frame-series__frame-selector');
-    this.#frameContainer = this._html.querySelector('.frame-series__frame-container');
-    this.#frames = {};
-    this.#active = undefined;
-  }
-
-  addFrame({ frameName, frameCaption, frameRender }) {
-    const frameChoice = new ComponentView({
-      renderParams: {
-        elementClass: `frame-selector__${frameName}`,
-        frameCaption,
-      },
-      template: FrameChoiceHbs,
-    });
-    const frameChoiceHtml = frameChoice.render();
-    if (Object.keys(this.#frames).length > 0) {
-      frameRender.classList.add('hidden');
-    } else {
-      this.#active = frameName;
-      frameChoiceHtml.classList.add('frame-choice_active');
-    }
-    const eventListener = {
-      object: frameChoiceHtml,
-      event: 'click',
-      listener: (ev) => {
-        ev.preventDefault();
-        eventBus.emit(SELECT_FRAME, { frameName });
-      },
-    };
-    this._eventListeners.push(eventListener);
-    addEventListeners([eventListener]);
-    this.#frames[frameName] = frameRender;
-    this.#frameSelector.appendChild(frameChoiceHtml);
-    this.#frameContainer.appendChild(frameRender);
-  }
-
-  selectFrame(frameName) {
-    this.#frames[this.#active].classList.toggle('hidden');
-    const prevButton = this.#frameSelector.querySelector(`.frame-selector__${this.#active}`);
-    prevButton.classList.remove('frame-choice_active');
-    this.#active = frameName;
-    this.#frames[this.#active].classList.toggle('hidden');
-    const selectedButton = this.#frameSelector.querySelector(`.frame-selector__${frameName}`);
-    selectedButton.classList.add('frame-choice_active');
-  }
-}
diff --git a/src/Components/FrameSeries/frame-choice.hbs b/src/Components/FrameSeries/frame-choice.hbs
deleted file mode 100644
index 28cc48a..0000000
--- a/src/Components/FrameSeries/frame-choice.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class='{{elementClass}} frame-choice'>
-  {{frameCaption}}
-</div>
\ No newline at end of file
diff --git a/src/Components/FrameSeries/frame-series.hbs b/src/Components/FrameSeries/frame-series.hbs
deleted file mode 100644
index 410dc05..0000000
--- a/src/Components/FrameSeries/frame-series.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class='{{elementClass}} frame-series'>
-  <nav class='frame-series__frame-selector frame-selector'>
-  </nav>
-  <div class='frame-series__divider'></div>
-  <div class='frame-series__frame-container frame-container'>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/Components/ProfileMinicard/ProfileMinicard.js b/src/Components/ProfileMinicard/ProfileMinicard.js
deleted file mode 100644
index 6b79536..0000000
--- a/src/Components/ProfileMinicard/ProfileMinicard.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { ProfileMinicardView } from './ProfileMinicardView';
-import { ProfileMinicardController } from './ProfileMinicardController';
-import { ProfileMinicardModel } from './ProfileMinicardModel';
-
-export class ProfileMinicard extends Component {
-  constructor({ userId, userType, existingElement }) {
-    super({
-      modelClass: ProfileMinicardModel,
-      viewClass: ProfileMinicardView,
-      controllerClass: ProfileMinicardController,
-      modelParams: { userId, userType },
-      existingElement,
-    });
-    this._controller.updateInfo();
-  }
-}
diff --git a/src/Components/ProfileMinicard/ProfileMinicardController.js b/src/Components/ProfileMinicard/ProfileMinicardController.js
deleted file mode 100644
index d6eb510..0000000
--- a/src/Components/ProfileMinicard/ProfileMinicardController.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { catchStandardResponseError } from '@/modules/app_errors/Errors';
-import { ComponentController } from '@/modules/Components/Component';
-import { USER_UPDATED } from '@/modules/Events/Events';
-
-export class ProfileMinicardController extends ComponentController {
-  constructor(model, view, component) {
-    super(model, view, component);
-    this.setHandlers([
-      {
-        event: USER_UPDATED,
-        handler: this.updateInfo.bind(this),
-      },
-    ]);
-  }
-
-  async updateInfo() {
-    try {
-      this._view.renderData(await this._model.getData());
-    } catch (err) {
-      catchStandardResponseError(err);
-    }
-  }
-}
diff --git a/src/Components/ProfileMinicard/ProfileMinicardModel.js b/src/Components/ProfileMinicard/ProfileMinicardModel.js
deleted file mode 100644
index a5f260b..0000000
--- a/src/Components/ProfileMinicard/ProfileMinicardModel.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-import USER_TYPE from '@/modules/UserSession/UserType';
-import { Applicant } from '@/modules/models/Applicant';
-import { Employer } from '@/modules/models/Employer';
-import { getApplicant, getEmployer } from '@/modules/api/api';
-import appState from '@/modules/AppState/AppState';
-
-export class ProfileMinicardModel extends ComponentModel {
-  #userId;
-  #userType;
-  constructor({ userId, userType }) {
-    super();
-    this.#userId = userId;
-    this.#userType = userType;
-  }
-
-  async getData() {
-    const user =
-      this.#userType === USER_TYPE.APPLICANT
-        ? new Applicant(await getApplicant(appState.backendUrl, this.#userId))
-        : new Employer(await getEmployer(appState.backendUrl, this.#userId));
-    user.fullName = `${user.firstName} ${user.secondName}`;
-    user.city = user.city || 'Неизвестно';
-    user.contacts = user.contacts || 'Не указаны';
-    return user;
-  }
-}
diff --git a/src/Components/ProfileMinicard/ProfileMinicardView.js b/src/Components/ProfileMinicard/ProfileMinicardView.js
deleted file mode 100644
index 1193bf1..0000000
--- a/src/Components/ProfileMinicard/ProfileMinicardView.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import ProfileMinicardHbs from './profile-minicard.hbs';
-import geopositionIconSvg from '@static/img/geoposition-icon.svg';
-
-export class ProfileMinicardView extends ComponentView {
-  #avatar;
-  #fullName;
-  #city;
-  #contacts;
-  constructor(renderParams, existingElement) {
-    renderParams.geopositionIcon = geopositionIconSvg.toString();
-    super({
-      renderParams: renderParams,
-      templateName: ProfileMinicardHbs,
-      existingElement,
-    });
-    this.#avatar = this._html.querySelector('.profile-minicard__user-icon');
-    this.#fullName = this._html.querySelector('.profile-minicard__user-name');
-    this.#city = this._html.querySelector('.profile-minicard__geoposition');
-    this.#contacts = this._html.querySelector('.profile-minicard__contacts');
-  }
-
-  static generateRenderParams() {
-    return {
-      geopositionIcon: geopositionIconSvg,
-    };
-  }
-
-  renderData({ avatar, fullName, city, contacts }) {
-    this.#fullName.innerText = fullName;
-    this.#city.innerText = city;
-    this.#contacts.innerText = contacts;
-    this.#avatar.src = avatar;
-  }
-}
diff --git a/src/Components/ProfileMinicard/profile-minicard.hbs b/src/Components/ProfileMinicard/profile-minicard.hbs
deleted file mode 100644
index 2d5afa3..0000000
--- a/src/Components/ProfileMinicard/profile-minicard.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class='{{elementClass}} profile-minicard'>
-  <img class='profile-minicard__user-icon'/>
-  <div class='profile-minicard__user-name'></div>
-  <div class='profile-minicard__geoposition-container'>
-    <img class='profile-minicard__geoposition-icon' src='{{geopositionIcon}}' />
-    <span class='profile-minicard__geoposition'></span>
-  </div>
-  <div class='profile-minicard__contacts-container'>
-    <h3 class='profile-minicard__contacts-header'>Контакты</h3>
-    <div class='profile-minicard__contacts'>
-    </div>
-  </div>
-</div>
\ No newline at end of file

From db4d50a971785a13eee073a1948d3502c9ed56f4 Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Sun, 15 Dec 2024 14:38:24 +0300
Subject: [PATCH 11/17] feature: profile fully working

---
 .../FormInputs/CityInput/CityInput.js         |  16 --
 .../CityInput/CityInputController.js          |   3 -
 .../FormInputs/CityInput/CityInputModel.js    |   3 -
 .../FormInputs/CityInput/CityInputView.js     |   3 -
 .../FormInputs/LiteralInput/LiteralInput.js   |  16 --
 .../LiteralInput/LiteralInputModel.js         |  10 -
 .../FormInputs/TextInput/TextInput.js         |  16 --
 .../UserTypeRadiogroup/UserTypeRadiogroup.js  |  16 --
 .../UserTypeRadiogroupController.js           |   3 -
 .../UserTypeRadiogroupModel.js                |   3 -
 .../UserTypeRadiogroupView.js                 |  54 ------
 .../user-type-radiogroup.hbs                  |  25 ---
 .../ValidatedInputController.js               |  45 -----
 .../ValidatedInput/ValidatedInputModel.js     |   7 -
 .../ValidatedInput/ValidatedInputView.js      |  76 --------
 .../ValidatedInput/validated-input.hbs        |  14 --
 .../Lists/ApplicantCvList/ApplicantCvList.js  |  22 ---
 .../ApplicantCvListController.js              |   3 -
 .../ApplicantCvList/ApplicantCvListModel.js   |  59 ------
 .../ApplicantCvList/ApplicantCvListView.js    |   3 -
 .../ApplicantPortfolioList.js                 |  21 ---
 .../ApplicantPortfolioListController.js       |   3 -
 .../ApplicantPortfolioListModel.js            |  37 ----
 .../ApplicantPortfolioListView.js             |   3 -
 .../EmployerVacancyList.js                    |  22 ---
 .../EmployerVacancyListController.js          |   3 -
 .../EmployerVacancyListModel.js               |  60 ------
 .../EmployerVacancyListView.js                |   3 -
 src/Components/Lists/List/ListController.js   |  48 -----
 src/Components/Lists/List/ListMixin.js        |  12 --
 src/Components/Lists/List/ListView.js         |  30 ---
 src/Components/Lists/List/list.hbs            |   6 -
 src/Components/Minicard/Minicard.js           |  14 --
 src/Components/Minicard/MinicardView.js       |  28 ---
 src/Components/Minicard/minicard.hbs          |   9 -
 .../profile_action_creators.ts                | 173 ++++++++++++++++++
 .../action_creators/router_action_creators.ts |   4 +-
 .../action_creators/user_action_creators.ts   |  25 ++-
 src/application/components/input/input.tsx    |  11 +-
 .../components/item_list/item_list.scss       |   9 +
 .../components/item_list/item_list.tsx        |  46 +++++
 .../item_list_child/item_list_child.scss      |  35 ++++
 .../item_list_child/item_list_child.tsx       |  51 ++++++
 .../labeled_field/labeled_field.scss          |   6 +-
 .../loading_screen/loading_screen.tsx         |   8 +
 .../components/profile/profile.scss           |   6 +-
 .../components/profile/profile.tsx            |   6 +
 .../components/profile_form/profile_form.scss |  10 +
 .../components/profile_form/profile_form.tsx  | 110 +++++++++--
 .../profile_minicard/profile_minicard.tsx     |   4 +-
 .../read_update_form_box.tsx                  |  40 ++--
 src/application/components/router/router.tsx  |  16 +-
 src/application/models/cv.ts                  |  31 ++++
 src/application/models/utils/get_user.ts      |  12 ++
 src/application/models/vacancy.ts             |  35 ++++
 .../pages/profile_page/profile_page.scss      |   3 +-
 .../pages/profile_page/profile_page.tsx       | 167 +++++++++++++++--
 .../registration_page/registration_page.tsx   | 113 +++++++-----
 .../stores/profile_store/profile_actions.ts   |  47 +++++
 .../stores/profile_store/profile_store.ts     |  82 +++++++++
 .../stores/router_store/router_actions.ts     |   2 +
 .../stores/router_store/router_store.ts       |  12 +-
 .../stores/user_store/user_actions.ts         |   6 +
 .../stores/user_store/user_store.ts           |   6 +
 src/modules/api/src/responses/cv.ts           |   1 +
 src/modules/models/Applicant.js               |  14 --
 src/modules/models/Cv.js                      |  15 --
 src/modules/models/Employer.js                |  13 --
 src/modules/models/Vacancy.js                 |  18 --
 src/modules/store_manager/store_manager.ts    |   2 -
 src/modules/vdom/virtual_dom_root.ts          |   2 +-
 src/scss/_common.scss                         |  49 -----
 src/scss/_login.scss                          |   0
 src/scss/_profile.scss                        |  67 -------
 src/scss/_registration.scss                   |   0
 src/scss/index.scss                           |   3 -
 76 files changed, 950 insertions(+), 1006 deletions(-)
 delete mode 100644 src/Components/FormInputs/CityInput/CityInput.js
 delete mode 100644 src/Components/FormInputs/CityInput/CityInputController.js
 delete mode 100644 src/Components/FormInputs/CityInput/CityInputModel.js
 delete mode 100644 src/Components/FormInputs/CityInput/CityInputView.js
 delete mode 100644 src/Components/FormInputs/LiteralInput/LiteralInput.js
 delete mode 100644 src/Components/FormInputs/LiteralInput/LiteralInputModel.js
 delete mode 100644 src/Components/FormInputs/TextInput/TextInput.js
 delete mode 100644 src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroup.js
 delete mode 100644 src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroupController.js
 delete mode 100644 src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroupModel.js
 delete mode 100644 src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroupView.js
 delete mode 100644 src/Components/FormInputs/UserTypeRadiogroup/user-type-radiogroup.hbs
 delete mode 100644 src/Components/FormInputs/ValidatedInput/ValidatedInputController.js
 delete mode 100644 src/Components/FormInputs/ValidatedInput/ValidatedInputModel.js
 delete mode 100644 src/Components/FormInputs/ValidatedInput/ValidatedInputView.js
 delete mode 100644 src/Components/FormInputs/ValidatedInput/validated-input.hbs
 delete mode 100644 src/Components/Lists/ApplicantCvList/ApplicantCvList.js
 delete mode 100644 src/Components/Lists/ApplicantCvList/ApplicantCvListController.js
 delete mode 100644 src/Components/Lists/ApplicantCvList/ApplicantCvListModel.js
 delete mode 100644 src/Components/Lists/ApplicantCvList/ApplicantCvListView.js
 delete mode 100644 src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioList.js
 delete mode 100644 src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListController.js
 delete mode 100644 src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListModel.js
 delete mode 100644 src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListView.js
 delete mode 100644 src/Components/Lists/EmployerVacancyList/EmployerVacancyList.js
 delete mode 100644 src/Components/Lists/EmployerVacancyList/EmployerVacancyListController.js
 delete mode 100644 src/Components/Lists/EmployerVacancyList/EmployerVacancyListModel.js
 delete mode 100644 src/Components/Lists/EmployerVacancyList/EmployerVacancyListView.js
 delete mode 100644 src/Components/Lists/List/ListController.js
 delete mode 100644 src/Components/Lists/List/ListMixin.js
 delete mode 100644 src/Components/Lists/List/ListView.js
 delete mode 100644 src/Components/Lists/List/list.hbs
 delete mode 100644 src/Components/Minicard/Minicard.js
 delete mode 100644 src/Components/Minicard/MinicardView.js
 delete mode 100644 src/Components/Minicard/minicard.hbs
 create mode 100644 src/application/action_creators/profile_action_creators.ts
 create mode 100644 src/application/components/item_list/item_list.scss
 create mode 100644 src/application/components/item_list/item_list.tsx
 create mode 100644 src/application/components/item_list/item_list_child/item_list_child.scss
 create mode 100644 src/application/components/item_list/item_list_child/item_list_child.tsx
 create mode 100644 src/application/components/loading_screen/loading_screen.tsx
 create mode 100644 src/application/components/profile_form/profile_form.scss
 create mode 100644 src/application/models/cv.ts
 create mode 100644 src/application/models/utils/get_user.ts
 create mode 100644 src/application/models/vacancy.ts
 create mode 100644 src/application/stores/profile_store/profile_actions.ts
 create mode 100644 src/application/stores/profile_store/profile_store.ts
 delete mode 100644 src/modules/models/Applicant.js
 delete mode 100644 src/modules/models/Cv.js
 delete mode 100644 src/modules/models/Employer.js
 delete mode 100644 src/modules/models/Vacancy.js
 delete mode 100644 src/scss/_login.scss
 delete mode 100644 src/scss/_profile.scss
 delete mode 100755 src/scss/_registration.scss

diff --git a/src/Components/FormInputs/CityInput/CityInput.js b/src/Components/FormInputs/CityInput/CityInput.js
deleted file mode 100644
index fa75300..0000000
--- a/src/Components/FormInputs/CityInput/CityInput.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { CityInputController } from './CityInputController';
-import { CityInputView } from './CityInputView';
-import { CityInputModel } from './CityInputModel';
-
-export class CityInput extends Component {
-  constructor({ existingElement, selfValidate = false }) {
-    super({
-      modelClass: CityInputModel,
-      viewClass: CityInputView,
-      existingElement,
-      controllerClass: CityInputController,
-      controllerParams: { selfValidate },
-    });
-  }
-}
diff --git a/src/Components/FormInputs/CityInput/CityInputController.js b/src/Components/FormInputs/CityInput/CityInputController.js
deleted file mode 100644
index d5297a9..0000000
--- a/src/Components/FormInputs/CityInput/CityInputController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ValidatedInputController } from '@/Components/FormInputs/ValidatedInput/ValidatedInputController';
-
-export const CityInputController = ValidatedInputController;
diff --git a/src/Components/FormInputs/CityInput/CityInputModel.js b/src/Components/FormInputs/CityInput/CityInputModel.js
deleted file mode 100644
index f9ae2a7..0000000
--- a/src/Components/FormInputs/CityInput/CityInputModel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { LiteralInputModel } from '@/Components/FormInputs/LiteralInput/LiteralInputModel';
-
-export const CityInputModel = LiteralInputModel;
diff --git a/src/Components/FormInputs/CityInput/CityInputView.js b/src/Components/FormInputs/CityInput/CityInputView.js
deleted file mode 100644
index fedaff3..0000000
--- a/src/Components/FormInputs/CityInput/CityInputView.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ValidatedInputView } from '@/Components/FormInputs/ValidatedInput/ValidatedInputView';
-
-export const CityInputView = ValidatedInputView;
diff --git a/src/Components/FormInputs/LiteralInput/LiteralInput.js b/src/Components/FormInputs/LiteralInput/LiteralInput.js
deleted file mode 100644
index 36b9491..0000000
--- a/src/Components/FormInputs/LiteralInput/LiteralInput.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@/modules/Components/Component.js';
-import { ValidatedInputController } from '@/Components/FormInputs/ValidatedInput/ValidatedInputController';
-import { ValidatedInputView } from '@/Components/FormInputs/ValidatedInput/ValidatedInputView';
-import { LiteralInputModel } from './LiteralInputModel';
-
-export class LiteralInput extends Component {
-  constructor({ existingElement, selfValidate = false }) {
-    super({
-      modelClass: LiteralInputModel,
-      viewClass: ValidatedInputView,
-      existingElement,
-      controllerClass: ValidatedInputController,
-      controllerParams: { selfValidate },
-    });
-  }
-}
diff --git a/src/Components/FormInputs/LiteralInput/LiteralInputModel.js b/src/Components/FormInputs/LiteralInput/LiteralInputModel.js
deleted file mode 100644
index b1b9e5f..0000000
--- a/src/Components/FormInputs/LiteralInput/LiteralInputModel.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-
-export class LiteralInputModel extends ComponentModel {
-  validate(text) {
-    if (!text.match(/^[a-zA-zа-яА-я\- ]*$/)) {
-      return 'Здесь нужно вводить только буквы';
-    }
-    return '';
-  }
-}
diff --git a/src/Components/FormInputs/TextInput/TextInput.js b/src/Components/FormInputs/TextInput/TextInput.js
deleted file mode 100644
index 57e2c9e..0000000
--- a/src/Components/FormInputs/TextInput/TextInput.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { ValidatedInputController } from '@/Components/FormInputs/ValidatedInput/ValidatedInputController';
-import { ValidatedInputView } from '@/Components/FormInputs/ValidatedInput/ValidatedInputView';
-import { ValidatedInputModel } from '@/Components/FormInputs/ValidatedInput/ValidatedInputModel';
-
-export class TextInput extends Component {
-  constructor({ existingElement, selfValidate = false }) {
-    super({
-      modelClass: ValidatedInputModel,
-      viewClass: ValidatedInputView,
-      existingElement,
-      controllerClass: ValidatedInputController,
-      controllerParams: { selfValidate },
-    });
-  }
-}
diff --git a/src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroup.js b/src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroup.js
deleted file mode 100644
index 9d541f6..0000000
--- a/src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroup.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { UserTypeRadiogroupModel } from './UserTypeRadiogroupModel';
-import { UserTypeRadiogroupController } from './UserTypeRadiogroupController';
-import { UserTypeRadiogroupView } from './UserTypeRadiogroupView';
-
-export class UserTypeRadiogroup extends Component {
-  constructor({ renderParams, existingElement }) {
-    super({
-      modelClass: UserTypeRadiogroupModel,
-      controllerClass: UserTypeRadiogroupController,
-      viewClass: UserTypeRadiogroupView,
-      existingElement,
-      viewParams: renderParams,
-    });
-  }
-}
diff --git a/src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroupController.js b/src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroupController.js
deleted file mode 100644
index 4d63747..0000000
--- a/src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroupController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-
-export const UserTypeRadiogroupController = ComponentController;
diff --git a/src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroupModel.js b/src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroupModel.js
deleted file mode 100644
index 655bcf1..0000000
--- a/src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroupModel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-
-export const UserTypeRadiogroupModel = ComponentModel;
diff --git a/src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroupView.js b/src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroupView.js
deleted file mode 100644
index cba5617..0000000
--- a/src/Components/FormInputs/UserTypeRadiogroup/UserTypeRadiogroupView.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import { addEventListeners } from '@/modules/Events/EventUtils';
-import eventBus from '@/modules/Events/EventBus';
-import { CHANGE_USER_TYPE } from '@/modules/Events/Events';
-import USER_TYPE from '@/modules/UserSession/UserType';
-import UserTypeRadiogroupHbs from './user-type-radiogroup.hbs';
-
-export class UserTypeRadiogroupView extends ComponentView {
-  #applicant;
-  #employer;
-  #checked;
-  constructor(renderParams, existingElement) {
-    super({
-      renderParams: renderParams,
-      existingElement,
-      templateName: UserTypeRadiogroupHbs,
-    });
-    this.#applicant = this._html.querySelector('.user-type-radiogroup__applicant');
-    this.#employer = this._html.querySelector('.user-type-radiogroup__employer');
-    this.#checked = this.#applicant;
-
-    this._eventListeners.push(
-      {
-        event: 'click',
-        object: this.#applicant,
-        listener: function () {
-          this.setActive(this.#applicant);
-        }.bind(this),
-      },
-      {
-        event: 'click',
-        object: this.#employer,
-        listener: function () {
-          this.setActive(this.#employer);
-        }.bind(this),
-      },
-    );
-    addEventListeners(this._eventListeners);
-  }
-
-  setActive(element) {
-    if (element === this.#checked) {
-      return;
-    }
-    this.#checked.classList.remove('user-type-radiobutton_checked');
-    this.#checked.querySelector('.user-type-radiobutton__input').removeAttribute('checked');
-    element.classList.add('user-type-radiobutton_checked');
-    element.querySelector('.user-type-radiobutton__input').setAttribute('checked', '');
-    this.#checked = element;
-
-    const eventTarget = element === this.#applicant ? USER_TYPE.APPLICANT : USER_TYPE.EMPLOYER;
-    eventBus.emit(CHANGE_USER_TYPE, eventTarget);
-  }
-}
diff --git a/src/Components/FormInputs/UserTypeRadiogroup/user-type-radiogroup.hbs b/src/Components/FormInputs/UserTypeRadiogroup/user-type-radiogroup.hbs
deleted file mode 100644
index caaf9c6..0000000
--- a/src/Components/FormInputs/UserTypeRadiogroup/user-type-radiogroup.hbs
+++ /dev/null
@@ -1,25 +0,0 @@
-<div class='{{elementClass}} user-type-radiogroup'>
-  <div class='user-type-radiogroup__applicant user-type-radiobutton user-type-radiobutton_checked'>
-    <input
-      type='radio'
-      class='user-type-radiobutton__input'
-      id='applicant'
-      name='userType'
-      value='applicant'
-      checked
-      required
-    />
-    <label for='applicant' class='user-type-radiobutton__label text_roboto-bold'>Соискатель</label>
-  </div>
-  <div class='user-type-radiogroup__employer user-type-radiobutton'>
-    <input
-      type='radio'
-      class='user-type-radiobutton__input'
-      id='employer'
-      name='userType'
-      value='employer'
-      required
-    />
-    <label for='employer' class='user-type-radiobutton__label text_roboto-bold'>Работодатель</label>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/Components/FormInputs/ValidatedInput/ValidatedInputController.js b/src/Components/FormInputs/ValidatedInput/ValidatedInputController.js
deleted file mode 100644
index 1e15eed..0000000
--- a/src/Components/FormInputs/ValidatedInput/ValidatedInputController.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-import { VALIDATE_INPUT } from '@/modules/Events/Events';
-export class ValidatedInputController extends ComponentController {
-  constructor(model, view, component, { selfValidate = false }) {
-    super(model, view, component);
-    this._selfValidate = selfValidate;
-    this.initHandlers();
-  }
-
-  validateInput({ callerView }) {
-    if (!Object.is(callerView, this._view)) {
-      return;
-    }
-    const fieldData = this._view.getData();
-    if (!fieldData.trim()) {
-      this._view.resetValidation();
-    }
-    const validationError = this._model.validate(fieldData);
-    if (validationError) {
-      this._view.declineValidation(validationError);
-      return false;
-    }
-    this._view.approveValidation();
-    return true;
-  }
-
-  initHandlers() {
-    if (this._selfValidate) {
-      this.setHandlers([
-        {
-          event: VALIDATE_INPUT,
-          handler: this.validateInput.bind(this),
-        },
-      ]);
-    }
-  }
-
-  enable() {
-    this._view.enable();
-  }
-
-  disable() {
-    this._view.disable();
-  }
-}
diff --git a/src/Components/FormInputs/ValidatedInput/ValidatedInputModel.js b/src/Components/FormInputs/ValidatedInput/ValidatedInputModel.js
deleted file mode 100644
index 9d03b91..0000000
--- a/src/Components/FormInputs/ValidatedInput/ValidatedInputModel.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-
-export class ValidatedInputModel extends ComponentModel {
-  validate() {
-    return '';
-  }
-}
diff --git a/src/Components/FormInputs/ValidatedInput/ValidatedInputView.js b/src/Components/FormInputs/ValidatedInput/ValidatedInputView.js
deleted file mode 100644
index 23921f3..0000000
--- a/src/Components/FormInputs/ValidatedInput/ValidatedInputView.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import { addEventListeners } from '@/modules/Events/EventUtils';
-import eventBus from '@/modules/Events/EventBus';
-import { VALIDATE_INPUT } from '@/modules/Events/Events';
-import ValidatedInputHbs from './validated-input.hbs';
-
-export class ValidatedInputView extends ComponentView {
-  #field;
-  #state;
-  #error;
-
-  OK_CLASS = 'validated-input__input_ok';
-  ERROR_CLASS = 'validated-input__input_error';
-  NEUTRAL_CLASS = '';
-  DISABLED_CLASS = 'validated-input__input_disabled';
-
-  constructor({ elementClass, inputCaption, inputType, inputName }, existingElement) {
-    super({
-      templateName: ValidatedInputHbs,
-      renderParams: { elementClass, inputCaption, inputType, inputName },
-      existingElement,
-    });
-    this.#field = this._html.querySelector('.validated-input__input');
-    this.#state = this.NEUTRAL_CLASS;
-    this.#error = this._html.querySelector('.validated-input__error');
-
-    this._eventListeners.push({
-      object: this.#field,
-      event: 'focusout',
-      listener: function () {
-        eventBus.emit(VALIDATE_INPUT, { callerView: this });
-      }.bind(this),
-    });
-    addEventListeners(this._eventListeners);
-  }
-
-  getData() {
-    return this.#field.value;
-  }
-
-  switchState(newState) {
-    if (this.#state) {
-      this.#field.classList.remove(this.#state);
-    }
-    this.#state = newState;
-    if (newState) {
-      this.#field.classList.add(newState);
-    }
-  }
-
-  approveValidation() {
-    this.switchState(this.OK_CLASS);
-    this.#error.hidden = true;
-  }
-
-  declineValidation(errorMessage) {
-    this.switchState(this.ERROR_CLASS);
-    this.#error.innerText = errorMessage;
-    this.#error.hidden = false;
-  }
-
-  resetValidation() {
-    this.switchState(this.NEUTRAL_CLASS);
-    this.#error.hidden = true;
-  }
-
-  disable() {
-    this.switchState(this.DISABLED_CLASS);
-    this.#field.disabled = true;
-  }
-
-  enable() {
-    this.resetValidation();
-    this.#field.disabled = false;
-  }
-}
diff --git a/src/Components/FormInputs/ValidatedInput/validated-input.hbs b/src/Components/FormInputs/ValidatedInput/validated-input.hbs
deleted file mode 100644
index 5ca3741..0000000
--- a/src/Components/FormInputs/ValidatedInput/validated-input.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class='{{formName}}__{{elementName}} {{formName}}__validated-input validated-input'>
-  <label
-    for='{{formName}}__{{elementName}}'
-    class='text_roboto-regular validated-input__label'
-  >{{inputCaption}}</label>
-  <input
-    type='{{inputType}}'
-    class='validated-input__input text_roboto-regular'
-    id='{{formName}}__{{elementName}}'
-    name='{{inputName}}'
-    placeholder='{{inputPlaceholder}}'
-  />
-  <span class='validated-input__error text_roboto-regular' hidden>Ошибка! Длина пароля слишком мала!</span>
-</div>
\ No newline at end of file
diff --git a/src/Components/Lists/ApplicantCvList/ApplicantCvList.js b/src/Components/Lists/ApplicantCvList/ApplicantCvList.js
deleted file mode 100644
index 4026d28..0000000
--- a/src/Components/Lists/ApplicantCvList/ApplicantCvList.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { ApplicantCvListModel } from './ApplicantCvListModel';
-import { ApplicantCvListController } from './ApplicantCvListController';
-import { ApplicantCvListView } from './ApplicantCvListView';
-import { ListMixin } from '@/Components/Lists/List/ListMixin';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-
-export class ApplicantCvList extends Component {
-  constructor({ userId, isListOwner, elementClass, existingElement }) {
-    super({
-      modelClass: ApplicantCvListModel,
-      controllerClass: ApplicantCvListController,
-      viewClass: ApplicantCvListView,
-      viewParams: { elementClass, isOwner: isListOwner, addHref: resolveUrl('createCv') },
-      modelParams: { userId, isListOwner },
-      existingElement,
-    });
-    this._controller.loadList();
-  }
-}
-
-Object.assign(ApplicantCvList.prototype, ListMixin);
diff --git a/src/Components/Lists/ApplicantCvList/ApplicantCvListController.js b/src/Components/Lists/ApplicantCvList/ApplicantCvListController.js
deleted file mode 100644
index 9a9afd6..0000000
--- a/src/Components/Lists/ApplicantCvList/ApplicantCvListController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ListController } from '@/Components/Lists/List/ListController';
-
-export const ApplicantCvListController = ListController;
diff --git a/src/Components/Lists/ApplicantCvList/ApplicantCvListModel.js b/src/Components/Lists/ApplicantCvList/ApplicantCvListModel.js
deleted file mode 100644
index dd801e1..0000000
--- a/src/Components/Lists/ApplicantCvList/ApplicantCvListModel.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-import { Minicard } from '@/Components/Minicard/Minicard';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-import { Cv } from '@/modules/models/Cv';
-import { CvPage } from '@/Pages/CvPage/CvPage';
-import appState from '@/modules/AppState/AppState';
-import { getApplicantCvs, deleteCv } from '@api/api';
-
-export class ApplicantCvListModel extends ComponentModel {
-  #userId;
-  #isOwner;
-  #items;
-  constructor({ userId, isListOwner }) {
-    super();
-    this.#userId = userId;
-    this.#isOwner = isListOwner;
-    this.#items = [];
-  }
-
-  async getItems() {
-    const cvsJson = await getApplicantCvs(appState.backendUrl, this.#userId);
-    const cvsObjects = cvsJson.reduce((cvsObjects, cvJsonItem) => {
-      try {
-        const cv = new Cv(cvJsonItem);
-        this.#items.push(cv);
-        const urlSearchQuery = { [`${CvPage.CV_ID_PARAM}`]: cv.id };
-        cvsObjects.push(
-          new Minicard({
-            renderParams: {
-              elementClass: 'applicant-cv-list__minicard',
-              title: cv.positionRu,
-              isCardOwner: this.#isOwner,
-              goToLink: resolveUrl('cv', urlSearchQuery),
-              editButtonUrl: resolveUrl('editCv', urlSearchQuery),
-            },
-          }),
-        );
-        return cvsObjects;
-      } catch {
-        return cvsObjects;
-      }
-    }, []);
-    return cvsObjects;
-  }
-
-  async removeChild(cvArrId) {
-    if (cvArrId >= this.#items.length || cvArrId < 0) {
-      return false;
-    }
-    const cv = this.#items[cvArrId];
-    try {
-      await deleteCv(appState.backendUrl, cv.id);
-      return true;
-    } catch (err) {
-      console.log(err);
-      return false;
-    }
-  }
-}
diff --git a/src/Components/Lists/ApplicantCvList/ApplicantCvListView.js b/src/Components/Lists/ApplicantCvList/ApplicantCvListView.js
deleted file mode 100644
index 36286a8..0000000
--- a/src/Components/Lists/ApplicantCvList/ApplicantCvListView.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ListView } from '@/Components/Lists/List/ListView';
-
-export const ApplicantCvListView = ListView;
diff --git a/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioList.js b/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioList.js
deleted file mode 100644
index f6087e4..0000000
--- a/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioList.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { ApplicantPortfolioListModel } from './ApplicantPortfolioListModel';
-import { ApplicantPortfolioListController } from './ApplicantPortfolioListController';
-import { ApplicantPortfolioListView } from './ApplicantPortfolioListView';
-import { ListMixin } from '@/Components/Lists/List/ListMixin';
-
-export class ApplicantPortfolioList extends Component {
-  constructor({ userId, isListOwner, elementClass, existingElement }) {
-    super({
-      modelClass: ApplicantPortfolioListModel,
-      controllerClass: ApplicantPortfolioListController,
-      viewClass: ApplicantPortfolioListView,
-      viewParams: { elementClass },
-      modelParams: { userId, isListOwner },
-      existingElement,
-    });
-    this._controller.loadList();
-  }
-}
-
-Object.assign(ApplicantPortfolioList.prototype, ListMixin);
diff --git a/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListController.js b/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListController.js
deleted file mode 100644
index 632cc5a..0000000
--- a/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ListController } from '@/Components/Lists/List/ListController';
-
-export const ApplicantPortfolioListController = ListController;
diff --git a/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListModel.js b/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListModel.js
deleted file mode 100644
index 3e9c9e4..0000000
--- a/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListModel.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-import { Api } from '@/modules/api/Api';
-import { Minicard } from '@/Components/Minicard/Minicard';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-
-export class ApplicantPortfolioListModel extends ComponentModel {
-  #userId;
-  #isOwner;
-  constructor({ userId, isListOwner }) {
-    super();
-    this.#userId = userId;
-    this.#isOwner = isListOwner;
-  }
-
-  async getItems() {
-    const portfolioJson = await Api.getApplicantPortfolios({ id: this.#userId });
-    const portfolioObjects = portfolioJson.reduce((portfolioObjects, portfolioJsonItem) => {
-      try {
-        const { id, name } = portfolioJsonItem;
-        portfolioObjects.push(
-          new Minicard({
-            renderParams: {
-              elementClass: 'applicant-portfolio-list__minicard',
-              title: name,
-              isCardOwner: this.#isOwner,
-              editButtonUrl: resolveUrl(`/portfolio/edit/${id}`),
-            },
-          }),
-        );
-        return portfolioObjects;
-      } catch {
-        return portfolioObjects;
-      }
-    }, []);
-    return portfolioObjects;
-  }
-}
diff --git a/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListView.js b/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListView.js
deleted file mode 100644
index e113e87..0000000
--- a/src/Components/Lists/ApplicantPortfolioList/ApplicantPortfolioListView.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ListView } from '@/Components/Lists/List/ListView';
-
-export const ApplicantPortfolioListView = ListView;
diff --git a/src/Components/Lists/EmployerVacancyList/EmployerVacancyList.js b/src/Components/Lists/EmployerVacancyList/EmployerVacancyList.js
deleted file mode 100644
index dc354f9..0000000
--- a/src/Components/Lists/EmployerVacancyList/EmployerVacancyList.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { EmployerVacancyListModel } from './EmployerVacancyListModel';
-import { EmployerVacancyListController } from './EmployerVacancyListController';
-import { EmployerVacancyListView } from './EmployerVacancyListView';
-import { ListMixin } from '@/Components/Lists/List/ListMixin';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-
-export class EmployerVacancyList extends Component {
-  constructor({ userId, isListOwner, elementClass, existingElement }) {
-    super({
-      modelClass: EmployerVacancyListModel,
-      controllerClass: EmployerVacancyListController,
-      viewClass: EmployerVacancyListView,
-      viewParams: { elementClass, isOwner: isListOwner, addHref: resolveUrl('createVacancy') },
-      modelParams: { userId, isListOwner },
-      existingElement,
-    });
-    this._controller.loadList();
-  }
-}
-
-Object.assign(EmployerVacancyList.prototype, ListMixin);
diff --git a/src/Components/Lists/EmployerVacancyList/EmployerVacancyListController.js b/src/Components/Lists/EmployerVacancyList/EmployerVacancyListController.js
deleted file mode 100644
index 702fa81..0000000
--- a/src/Components/Lists/EmployerVacancyList/EmployerVacancyListController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ListController } from '@/Components/Lists/List/ListController';
-
-export const EmployerVacancyListController = ListController;
diff --git a/src/Components/Lists/EmployerVacancyList/EmployerVacancyListModel.js b/src/Components/Lists/EmployerVacancyList/EmployerVacancyListModel.js
deleted file mode 100644
index ae12ba0..0000000
--- a/src/Components/Lists/EmployerVacancyList/EmployerVacancyListModel.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-import { Minicard } from '@/Components/Minicard/Minicard';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-import { Vacancy } from '@/modules/models/Vacancy';
-import { VacancyPage } from '@/Pages/VacancyPage/VacancyPage';
-import { getEmployerVacancies, deleteVacancy } from '@api/api';
-import appState from '@/modules/AppState/AppState';
-
-export class EmployerVacancyListModel extends ComponentModel {
-  #userId;
-  #isOwner;
-  #items;
-  constructor({ userId, isListOwner }) {
-    super();
-    this.#userId = userId;
-    this.#isOwner = isListOwner;
-    this.#items = [];
-  }
-
-  async getItems() {
-    const vacanciesJson = await getEmployerVacancies(appState.backendUrl, this.#userId);
-    const vacanciesObjects = vacanciesJson.reduce((vacanciesObjects, vacancyJson) => {
-      try {
-        const vacancy = new Vacancy(vacancyJson);
-        this.#items.push(vacancy);
-        const urlSearchQuery = {};
-        urlSearchQuery[`${VacancyPage.VACANCY_ID_PARAM}`] = vacancy.id;
-        vacanciesObjects.push(
-          new Minicard({
-            renderParams: {
-              elementClass: 'employer-vacancy-list__minicard',
-              title: vacancy.position,
-              isCardOwner: this.#isOwner,
-              goToLink: resolveUrl('vacancy', urlSearchQuery),
-              editButtonUrl: resolveUrl('editVacancy', urlSearchQuery),
-            },
-          }),
-        );
-        return vacanciesObjects;
-      } catch {
-        return vacanciesObjects;
-      }
-    }, []);
-    return vacanciesObjects;
-  }
-
-  async removeChild(vacancyArrId) {
-    if (vacancyArrId >= this.#items.length || vacancyArrId < 0) {
-      return false;
-    }
-    const vacancy = this.#items[vacancyArrId];
-    try {
-      await deleteVacancy(appState.backendUrl, vacancy.id);
-      return true;
-    } catch (err) {
-      console.log(err);
-      return false;
-    }
-  }
-}
diff --git a/src/Components/Lists/EmployerVacancyList/EmployerVacancyListView.js b/src/Components/Lists/EmployerVacancyList/EmployerVacancyListView.js
deleted file mode 100644
index 62e1df3..0000000
--- a/src/Components/Lists/EmployerVacancyList/EmployerVacancyListView.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ListView } from '@/Components/Lists/List/ListView';
-
-export const EmployerVacancyListView = ListView;
diff --git a/src/Components/Lists/List/ListController.js b/src/Components/Lists/List/ListController.js
deleted file mode 100644
index 5dcfcc2..0000000
--- a/src/Components/Lists/List/ListController.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { catchStandardResponseError } from '@/modules/app_errors/Errors';
-import { ComponentController } from '@/modules/Components/Component';
-import eventBus from '@/modules/Events/EventBus';
-import { MINICARD_DELETE, NOTIFICATION_OK } from '@/modules/Events/Events';
-import { NOTIFICATION_TIMEOUT } from '@/Components/NotificationBox/NotificationBox';
-
-export class ListController extends ComponentController {
-  constructor(model, view, component) {
-    super(model, view, component);
-    this.setHandlers([
-      {
-        event: MINICARD_DELETE,
-        handler: this.removeMinicard.bind(this),
-      },
-    ]);
-  }
-
-  async loadList() {
-    try {
-      const items = await this._model.getItems();
-      items.forEach((item) => {
-        this._view.addChild(item.render());
-        this._component.bindMinicard(item);
-      });
-    } catch (err) {
-      catchStandardResponseError(err);
-    }
-  }
-
-  async removeMinicard({ caller }) {
-    const minicardIndex = this._view.findChildIndex(caller.render());
-    if (minicardIndex >= 0) {
-      try {
-        const removed = await this._model.removeChild(minicardIndex);
-        if (removed) {
-          this._component.unbindMinicard(minicardIndex);
-          this._view.removeChild(minicardIndex);
-          eventBus.emit(NOTIFICATION_OK, {
-            message: 'Успешно удалено',
-            timeout: NOTIFICATION_TIMEOUT.MEDIUM,
-          });
-        }
-      } catch (err) {
-        catchStandardResponseError(err);
-      }
-    }
-  }
-}
diff --git a/src/Components/Lists/List/ListMixin.js b/src/Components/Lists/List/ListMixin.js
deleted file mode 100644
index 9bc4a55..0000000
--- a/src/Components/Lists/List/ListMixin.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export const ListMixin = {
-  _items: [],
-
-  bindMinicard(minicard) {
-    this._items.push(minicard);
-    this._children.push(minicard);
-  },
-
-  unbindMinicard(minicardIndex) {
-    this._items.splice(minicardIndex, 1);
-  },
-};
diff --git a/src/Components/Lists/List/ListView.js b/src/Components/Lists/List/ListView.js
deleted file mode 100644
index 840a18c..0000000
--- a/src/Components/Lists/List/ListView.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import ListHbs from './list.hbs';
-
-export class ListView extends ComponentView {
-  #children;
-
-  constructor(renderParams, existingElement) {
-    super({
-      renderParams,
-      existingElement,
-      template: ListHbs,
-    });
-    this.#children = [];
-    this._html.classList.add('hidden');
-  }
-
-  addChild(listMemberRender) {
-    this._html.appendChild(listMemberRender);
-    this.#children.push(listMemberRender);
-  }
-
-  findChildIndex(childRender) {
-    return this.#children.findIndex(Object.is.bind(Object, childRender));
-  }
-
-  removeChild(childIndex) {
-    this.#children[childIndex].outerHTML = '';
-    this.#children.splice(childIndex, 1);
-  }
-}
diff --git a/src/Components/Lists/List/list.hbs b/src/Components/Lists/List/list.hbs
deleted file mode 100644
index ec7fda9..0000000
--- a/src/Components/Lists/List/list.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="{{elementClass}} list">
-    {{#if isOwner}}
-    <div class='list_add-button-container'>
-        <a class="list__add-button button button_main-primary" href="{{addHref}}">Добавить</a>
-    </div>{{/if}}
-</div>
\ No newline at end of file
diff --git a/src/Components/Minicard/Minicard.js b/src/Components/Minicard/Minicard.js
deleted file mode 100644
index be62873..0000000
--- a/src/Components/Minicard/Minicard.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, ComponentController, ComponentModel } from '@/modules/Components/Component';
-import { MinicardView } from './MinicardView';
-
-export class Minicard extends Component {
-  constructor({ renderParams, existingElement }) {
-    super({
-      modelClass: ComponentModel,
-      viewClass: MinicardView,
-      controllerClass: ComponentController,
-      viewParams: renderParams,
-      existingElement,
-    });
-  }
-}
diff --git a/src/Components/Minicard/MinicardView.js b/src/Components/Minicard/MinicardView.js
deleted file mode 100644
index 4a0ceb9..0000000
--- a/src/Components/Minicard/MinicardView.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import eventBus from '@/modules/Events/EventBus';
-import { MINICARD_DELETE } from '@/modules/Events/Events';
-import { addEventListeners } from '@/modules/Events/EventUtils';
-import MinicardHbs from './minicard.hbs';
-
-export class MinicardView extends ComponentView {
-  #deleteButton;
-  constructor({ elementClass, isCardOwner, editButtonUrl, title, goToLink }, existingElement) {
-    super({
-      renderParams: { elementClass, isCardOwner, editButtonUrl, title, goToLink },
-      existingElement,
-      template: MinicardHbs,
-    });
-    if (isCardOwner) {
-      this.#deleteButton = this._html.querySelector('.minicard__button-remove');
-      this._eventListeners.push({
-        event: 'click',
-        object: this.#deleteButton,
-        listener: function (ev) {
-          ev.preventDefault();
-          eventBus.emit(MINICARD_DELETE, { caller: this });
-        }.bind(this),
-      });
-      addEventListeners(this._eventListeners);
-    }
-  }
-}
diff --git a/src/Components/Minicard/minicard.hbs b/src/Components/Minicard/minicard.hbs
deleted file mode 100644
index e89a518..0000000
--- a/src/Components/Minicard/minicard.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="{{elementClass}} minicard minicard_theme-standard">
-  <a class="minicard__title" {{#if goToLink}}href="{{goToLink}}"{{/if}}>{{title}}</a>
-  {{#if isCardOwner}}
-  <div class="minicard__button-container">
-    <a class="minicard__button-edit button button_main-secondary" href="{{editButtonUrl}}">Изменить</a>
-    <button type="button" class="minicard__button-remove button button_danger-secondary" href="">Удалить</button>
-  </div>
-  {{/if}}
-</div>
\ No newline at end of file
diff --git a/src/application/action_creators/profile_action_creators.ts b/src/application/action_creators/profile_action_creators.ts
new file mode 100644
index 0000000..16984d9
--- /dev/null
+++ b/src/application/action_creators/profile_action_creators.ts
@@ -0,0 +1,173 @@
+import { ProfileFormFields, profileStore } from '../stores/profile_store/profile_store';
+import { ProfileFormData } from '../stores/profile_store/profile_store';
+import { validateOk, validateRequired } from '../validators/validators';
+import { FormValue } from '../models/form_value';
+import { storeManager } from '@/modules/store_manager/store_manager';
+import { ProfileActions } from '../stores/profile_store/profile_actions';
+import { UserType } from '../models/user-type';
+import {
+  getApplicantCvs,
+  getEmployerVacancies,
+  updateApplicantProfile,
+  updateEmployerProfile,
+} from '@api/api';
+import { userStore } from '../stores/user_store/user_store';
+import { backendStore } from '../stores/backend_store/backend_store';
+import { Applicant } from '../models/applicant';
+import { Employer } from '../models/employer';
+import { userActionCreators } from './user_action_creators';
+import { getUser } from '../models/utils/get_user';
+import { UpdateProfilePayload } from '../stores/profile_store/profile_actions';
+import { assertIfError } from '@/modules/common_utils/asserts/asserts';
+import { makeVacancyFromApi } from '../models/vacancy';
+import { makeCvFromApi } from '../models/cv';
+
+const profileFieldsValidators = new Map(
+  Object.entries({
+    firstName: validateRequired,
+    secondName: validateRequired,
+    birthDate: validateRequired,
+    city: validateOk,
+    education: validateOk,
+    contacts: validateOk,
+  }),
+);
+
+function submitProfileFields(data: ProfileFormFields) {
+  const validatedData: ProfileFormData = {};
+  Object.entries(data).forEach(([key, value]) => {
+    (validatedData as { [key: string]: FormValue })[key] = profileFieldsValidators.get(key)(value);
+  });
+  storeManager.dispatch({
+    type: ProfileActions.ProfileFormSubmit,
+    payload: validatedData,
+  });
+}
+
+async function loadProfile(userType: UserType, id: number) {
+  clearProfile();
+  try {
+    const backendOrigin = backendStore.getData().backendOrigin;
+    const loadedProfile = await getUser(backendOrigin, userType, id);
+    storeManager.dispatch({
+      type: ProfileActions.UpdateProfile,
+      payload: {
+        userProfile: loadedProfile,
+        userType: userType,
+        profileLoaded: true,
+      } as UpdateProfilePayload,
+    });
+    switch (userType) {
+      case UserType.Employer: {
+        const vacancyList = await getEmployerVacancies(backendOrigin, id);
+        storeManager.dispatch({
+          type: ProfileActions.UpdateVacancyList,
+          payload: vacancyList.map((vacancy) => makeVacancyFromApi(vacancy)),
+        });
+        break;
+      }
+      case UserType.Applicant: {
+        const cvList = await getApplicantCvs(backendOrigin, id);
+        storeManager.dispatch({
+          type: ProfileActions.UpdateCvList,
+          payload: cvList.map((cv) => makeCvFromApi(cv)),
+        });
+        break;
+      }
+    }
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+    clearProfile(true);
+  }
+}
+
+function clearProfileForm() {
+  storeManager.dispatch({
+    type: ProfileActions.ProfileFormReset,
+  });
+}
+
+function clearProfile(loaded: boolean = false) {
+  storeManager.dispatch({
+    type: ProfileActions.UpdateProfile,
+    payload: {
+      userProfile: null,
+      userType: null,
+      profileLoaded: loaded,
+    } as UpdateProfilePayload,
+  });
+}
+
+async function updateProfile(userType: UserType, body: ProfileFormFields) {
+  submitProfileFields(body as ProfileFormFields);
+  const validatedForm = profileStore.getData().profileForm;
+  let isValid = false;
+  if (userType === UserType.Applicant) {
+    const { firstName, secondName, birthDate, education, contacts, city } = validatedForm;
+    isValid = [firstName, secondName, birthDate, education, contacts, city].every(
+      (field) => field.isValid,
+    );
+  } else {
+    const { firstName, secondName, contacts, city } = validatedForm;
+    isValid = [firstName, secondName, contacts, city].every((field) => field.isValid);
+  }
+  if (!isValid) {
+    storeManager.dispatch({
+      type: ProfileActions.ProfileFormSubmit,
+      payload: {
+        isValid,
+      } as ProfileFormData,
+    });
+    return false;
+  }
+
+  const backendOrigin = backendStore.getData().backendOrigin;
+  const userData = userStore.getData().userProfile;
+  try {
+    if (userType === UserType.Applicant) {
+      await updateApplicantProfile(backendOrigin, {
+        id: userData.id,
+        firstName: body.firstName,
+        secondName: body.secondName,
+        city: body.city,
+        birthDate: new Date(body.birthDate),
+        education: body.education,
+        contacts: body.contacts,
+      });
+      const applicant = userStore.getData().userProfile as Applicant;
+      applicant.firstName = body.firstName;
+      applicant.secondName = body.secondName;
+      applicant.city = body.city;
+      applicant.birthDate = new Date(body.birthDate);
+      applicant.education = body.education;
+      applicant.contacts = body.contacts;
+      userActionCreators.updateProfile(applicant as Applicant);
+    } else {
+      await updateEmployerProfile(backendOrigin, {
+        id: userData.id,
+        firstName: body.firstName,
+        secondName: body.secondName,
+        city: body.city,
+        contacts: body.contacts,
+      });
+      const employer = userStore.getData().userProfile as Employer;
+      employer.firstName = body.firstName;
+      employer.secondName = body.secondName;
+      employer.city = body.city;
+      employer.contacts = body.contacts;
+      userActionCreators.updateProfile(employer);
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export const profileActionCreators = {
+  submitProfileFields,
+  updateProfile,
+  clearProfileForm,
+  loadProfile,
+  clearProfile,
+};
diff --git a/src/application/action_creators/router_action_creators.ts b/src/application/action_creators/router_action_creators.ts
index 1c695d6..55412ac 100644
--- a/src/application/action_creators/router_action_creators.ts
+++ b/src/application/action_creators/router_action_creators.ts
@@ -42,11 +42,12 @@ function redirect(url: URL) {
   } as RedirectAction);
 }
 
-function navigate(url: URL) {
+function navigate(url: URL, modifyHistory: boolean = true) {
   storeManager.dispatch({
     type: RouterActions.Navigate,
     payload: {
       url,
+      modifyHistory,
     } as NavigationActionPayload,
   } as NavigateAction);
 }
@@ -56,6 +57,7 @@ function startRouting(url: URL) {
     type: RouterActions.Start,
     payload: {
       url,
+      modifyHistory: false,
     } as NavigationActionPayload,
   } as StartAction);
 }
diff --git a/src/application/action_creators/user_action_creators.ts b/src/application/action_creators/user_action_creators.ts
index 74949e9..7b480b8 100644
--- a/src/application/action_creators/user_action_creators.ts
+++ b/src/application/action_creators/user_action_creators.ts
@@ -17,8 +17,6 @@ import {
   registerApplicant as apiRegisterApplicant,
   registerEmployer as apiRegisterEmployer,
   getUserAuthenticationStatus,
-  getEmployer,
-  getApplicant,
 } from '@api/api';
 import type {
   registerApplicantOptions,
@@ -26,10 +24,8 @@ import type {
 } from '@/modules/api/src/handlers/auth/register';
 import { backendStore } from '@application/stores/backend_store/backend_store';
 import { UserType } from '@application/models/user-type';
-import { makeApplicantFromApi } from '../models/applicant';
-import { makeEmployerFromApi } from '../models/employer';
-import type { Applicant as ApiApplicant } from '@api/src/responses/applicant';
-import type { Employer as ApiEmployer } from '@api/src/responses/employer';
+import { Applicant } from '../models/applicant';
+import { Employer } from '../models/employer';
 import { assertIfError } from '@/modules/common_utils/asserts/asserts';
 import {
   validateDateOfBirth,
@@ -39,7 +35,8 @@ import {
   validateRequired,
 } from '../validators/validators';
 import { storeManager } from '@/modules/store_manager/store_manager';
-import { FormValue } from '../models/form_value';
+import { FormValue } from '@/application/models/form_value';
+import { getUser } from '@/application/models/utils/get_user';
 
 function validateLoginData({ userType, email, password }: LoginFormFields): LoginFormData {
   const isValid = [userType, email, password].every((field) => field.trim() !== '');
@@ -84,6 +81,13 @@ function submitRegistrationFields(data: RegistrationFormFields) {
   });
 }
 
+function updateProfile(newProfile: Applicant | Employer) {
+  storeManager.dispatch({
+    type: UserActions.UpdateProfile,
+    payload: newProfile,
+  });
+}
+
 async function login({ userType, email, password }: LoginFormFields) {
   const validatedLoginData = validateLoginData({ userType, email, password });
   if (!validatedLoginData.isValid) {
@@ -139,12 +143,6 @@ async function isAuthorized() {
   }
 }
 
-async function getUser(backendOrigin: URL, userType: UserType, id: number) {
-  return userType === UserType.Applicant
-    ? makeApplicantFromApi((await getApplicant(backendOrigin, id)) as ApiApplicant)
-    : makeEmployerFromApi((await getEmployer(backendOrigin, id)) as ApiEmployer);
-}
-
 async function logout() {
   const backendOrigin = backendStore.getData().backendOrigin;
   try {
@@ -254,4 +252,5 @@ export const userActionCreators = {
   logout,
   register,
   submitRegistrationFields,
+  updateProfile,
 };
diff --git a/src/application/components/input/input.tsx b/src/application/components/input/input.tsx
index ac6dfa5..cf372a1 100644
--- a/src/application/components/input/input.tsx
+++ b/src/application/components/input/input.tsx
@@ -14,6 +14,7 @@ export interface InputProps {
   error?: string;
   isValid?: boolean;
   maxlength?: number;
+  onFocusOut?: (ev: Event) => void;
   hasResizeVertical?: boolean;
 }
 
@@ -27,9 +28,11 @@ export class Input extends Component {
     type,
     value,
     placeholder = '',
+    onFocusOut,
     error = '',
     isValid,
     maxlength,
+    hasResizeVertical,
   }: InputProps) {
     super({
       elementClass,
@@ -41,8 +44,10 @@ export class Input extends Component {
       value,
       placeholder,
       error,
+      onFocusOut,
       isValid,
       maxlength,
+      hasResizeVertical,
     });
   }
 
@@ -62,14 +67,16 @@ export class Input extends Component {
             placeholder={this.props.placeholder}
             maxlength={this.props.maxlength}
             value={this.props.value}
+            onFocusOut={this.props.onFocusOut}
           />
         ) : (
           <textarea
             className={`input__field ${this.props.isValid !== undefined ? (this.props.isValid ? 'input__field_ok' : 'input__field_error') : ''} ${this.props.hasResizeVertical ? 'input__field_resize-vertical' : ''}`}
             name={this.props.name}
             id={this.props.id}
-            value={this.props.value}
-          ></textarea>
+          >
+            {this.props.value ?? ''}
+          </textarea>
         )}
         {this.props.isValid === false && this.props.error !== '' ? (
           <span className="input__error-text">{this.props.error ?? false}</span>
diff --git a/src/application/components/item_list/item_list.scss b/src/application/components/item_list/item_list.scss
new file mode 100644
index 0000000..c59e721
--- /dev/null
+++ b/src/application/components/item_list/item_list.scss
@@ -0,0 +1,9 @@
+.item-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  &__add-button-container {
+    display: flex;
+    justify-content: start;
+  }
+}
diff --git a/src/application/components/item_list/item_list.tsx b/src/application/components/item_list/item_list.tsx
new file mode 100644
index 0000000..ecec1ca
--- /dev/null
+++ b/src/application/components/item_list/item_list.tsx
@@ -0,0 +1,46 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { ItemListChild, ItemListChildProps } from './item_list_child/item_list_child';
+import './item_list.scss';
+
+export interface ItemListProps {
+  elementClass: string;
+  isOwner: boolean;
+  addHref: string;
+  childData?: ItemListChildProps[];
+}
+
+export class ItemList extends Component {
+  constructor({ elementClass, isOwner, addHref, childData = [] }: ItemListProps) {
+    super({ elementClass, isOwner, addHref, childData });
+  }
+  render() {
+    const listItems = (this.props.childData as Array<ItemListChildProps>).map((childData) => {
+      return (
+        <ItemListChild
+          elementClass="item-list__item"
+          title={childData.title}
+          goToLink={childData.goToLink}
+          editLink={childData.editLink}
+          handleDelete={childData.handleDelete}
+          isOwner={childData.isOwner}
+        />
+      );
+    });
+    return (
+      <div className={`${this.props.elementClass} item-list`}>
+        {this.props.isOwner && (
+          <div className="item-list__add-button-container">
+            <a
+              className="item-list__add-button button button_main-primary"
+              href={this.props.addHref}
+            >
+              Добавить
+            </a>
+          </div>
+        )}
+        {...listItems}
+      </div>
+    );
+  }
+}
diff --git a/src/application/components/item_list/item_list_child/item_list_child.scss b/src/application/components/item_list/item_list_child/item_list_child.scss
new file mode 100644
index 0000000..408bbe8
--- /dev/null
+++ b/src/application/components/item_list/item_list_child/item_list_child.scss
@@ -0,0 +1,35 @@
+@use '@/scss/variables' as v;
+
+.item-list-child {
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+  align-items: center;
+  gap: 16px;
+
+  &__title {
+    font-size: var(--text-size-7);
+    color: var(--color-main-100);
+    text-decoration: none;
+  }
+
+  &__button-container {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    justify-content: end;
+  }
+
+  &_theme-standard {
+    background-color: var(--color-background-900);
+    padding: 16px;
+    border-radius: var(--radius-l);
+  }
+}
+
+@media screen and (min-width: v.$mobile-breakpoint) {
+  .item-list-child {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
diff --git a/src/application/components/item_list/item_list_child/item_list_child.tsx b/src/application/components/item_list/item_list_child/item_list_child.tsx
new file mode 100644
index 0000000..d6483f1
--- /dev/null
+++ b/src/application/components/item_list/item_list_child/item_list_child.tsx
@@ -0,0 +1,51 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import './item_list_child.scss';
+
+export interface ItemListChildProps {
+  elementClass: string;
+  title: string;
+  goToLink?: string;
+  editLink?: string;
+  handleDelete?: (ev: Event) => void;
+  isOwner: boolean;
+}
+
+export class ItemListChild extends Component {
+  constructor({
+    elementClass,
+    title,
+    goToLink,
+    editLink,
+    isOwner,
+    handleDelete,
+  }: ItemListChildProps) {
+    super({ elementClass, title, goToLink, editLink, isOwner, handleDelete });
+  }
+  render() {
+    return (
+      <div className={`${this.props.elementClass} item-list-child item-list-child_theme-standard`}>
+        <a className="item-list-child__title" href={this.props.goToLink}>
+          {this.props.title}
+        </a>
+        {this.props.isOwner && (
+          <div className="item-list-child__button-container">
+            <a
+              className="item-list-child__button-edit button button_main-secondary"
+              href={this.props.editLink}
+            >
+              Изменить
+            </a>
+            <button
+              type="button"
+              class="item-list-child__button-remove button button_danger-secondary"
+              onClick={this.props.handleDelete}
+            >
+              Удалить
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/application/components/labeled_field/labeled_field.scss b/src/application/components/labeled_field/labeled_field.scss
index 63e19f0..de31024 100644
--- a/src/application/components/labeled_field/labeled_field.scss
+++ b/src/application/components/labeled_field/labeled_field.scss
@@ -19,13 +19,15 @@
   .labeled-field {
     display: flex;
     flex-direction: row;
+    align-items: baseline;
     &__label {
-      width: inherit;
+      width: 50%;
       justify-self: start;
     }
     &__field {
-      width: inherit;
+      width: 50%;
       justify-self: end;
+      text-wrap: pretty;
     }
   }
 }
diff --git a/src/application/components/loading_screen/loading_screen.tsx b/src/application/components/loading_screen/loading_screen.tsx
new file mode 100644
index 0000000..13e3365
--- /dev/null
+++ b/src/application/components/loading_screen/loading_screen.tsx
@@ -0,0 +1,8 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+
+export class LoadingScreen extends Component {
+  render() {
+    return <div class="loading-screen">Загружаем...</div>;
+  }
+}
diff --git a/src/application/components/profile/profile.scss b/src/application/components/profile/profile.scss
index e614e20..4dba4e0 100644
--- a/src/application/components/profile/profile.scss
+++ b/src/application/components/profile/profile.scss
@@ -1,18 +1,14 @@
 .profile {
   &__first-name,
   &__second-name,
-  &__city,
   &__contacts,
   &__company-name,
   &__company-description,
   &__company-website,
   &__position,
+  &__birthdate,
   &__education {
     width: var(--5-col);
     margin-bottom: var(--col-margin);
   }
-  &__contacts {
-    width: var(--5-col);
-    margin-bottom: var(16px);
-  }
 }
diff --git a/src/application/components/profile/profile.tsx b/src/application/components/profile/profile.tsx
index 087eaa0..d72b921 100644
--- a/src/application/components/profile/profile.tsx
+++ b/src/application/components/profile/profile.tsx
@@ -36,6 +36,12 @@ export class Profile extends Component {
           label="Фамилия"
           field={userProfile.secondName}
         />
+        <LabeledField
+          key="birthdate"
+          elementClass="profile__birthdate"
+          label="Дата рождения"
+          field={(userProfile as Applicant).birthDate.toLocaleDateString('ru-RU')}
+        />
         <LabeledField
           key="education"
           elementClass="profile__education"
diff --git a/src/application/components/profile_form/profile_form.scss b/src/application/components/profile_form/profile_form.scss
new file mode 100644
index 0000000..956267e
--- /dev/null
+++ b/src/application/components/profile_form/profile_form.scss
@@ -0,0 +1,10 @@
+.profile-form {
+  &__first-name,
+  &__second-name,
+  &__contacts,
+  &__city,
+  &__birthdate,
+  &__education {
+    margin: var(--col-margin) 0;
+  }
+}
diff --git a/src/application/components/profile_form/profile_form.tsx b/src/application/components/profile_form/profile_form.tsx
index 25064d7..10884af 100644
--- a/src/application/components/profile_form/profile_form.tsx
+++ b/src/application/components/profile_form/profile_form.tsx
@@ -2,23 +2,42 @@ import { Component } from '@/modules/vdom/virtual_node';
 import * as vdom from '@/modules/vdom/virtual_dom';
 import { Input } from '@/application/components/input/input';
 import { UserType } from '@/application/models/user-type';
+import { profileStore } from '@/application/stores/profile_store/profile_store';
+import { userStore } from '@/application/stores/user_store/user_store';
+import { Applicant } from '@/application/models/applicant';
+import { profileActionCreators } from '@/application/action_creators/profile_action_creators';
+import './profile_form.scss';
 
 export interface ProfileFormProps {
   elementClass: string;
   userType: UserType;
+  onSubmit?: () => void;
+  onReset?: () => void;
 }
 
 export class ProfileForm extends Component {
-  constructor({ elementClass, userType }: ProfileFormProps) {
-    super({ elementClass, userType });
+  constructor({ elementClass, userType, onSubmit, onReset }: ProfileFormProps) {
+    super({ elementClass, userType, onSubmit, onReset });
   }
+
+  private handleFocusOut = (ev: Event) => {
+    const target = ev.target as HTMLInputElement;
+    const name = target.name;
+    const value = target.value;
+    profileActionCreators.submitProfileFields({ [name]: value });
+  };
+
   render() {
+    const profileForm = profileStore.getData().profileForm;
+    const userProfile = userStore.getData().userProfile;
     return this.props.userType === UserType.Applicant ? (
       <form
         className={`${this.props.elementClass} profile-form`}
         id="profile-form"
         method="POST"
         novalidate
+        onSubmit={this.props.onSubmit}
+        onReset={this.props.onReset}
       >
         <Input
           key="input-first-name"
@@ -29,6 +48,13 @@ export class ProfileForm extends Component {
           type="text"
           isRequired={true}
           maxlength={50}
+          value={
+            (profileForm && profileForm.firstName && profileForm.firstName.value) ||
+            userProfile.firstName
+          }
+          isValid={profileForm && profileForm.firstName && profileForm.firstName.isValid}
+          error={profileForm && profileForm.firstName && profileForm.firstName.errorMsg}
+          onFocusOut={this.handleFocusOut}
         />
         <Input
           key="input-second-name"
@@ -39,6 +65,13 @@ export class ProfileForm extends Component {
           type="text"
           isRequired={true}
           maxlength={50}
+          value={
+            (profileForm && profileForm.secondName && profileForm.secondName.value) ||
+            userProfile.secondName
+          }
+          isValid={profileForm && profileForm.secondName && profileForm.secondName.isValid}
+          error={profileForm && profileForm.secondName && profileForm.secondName.errorMsg}
+          onFocusOut={this.handleFocusOut}
         />
         <Input
           key="input-city"
@@ -49,15 +82,10 @@ export class ProfileForm extends Component {
           type="text"
           isRequired={true}
           maxlength={50}
-        />
-        <Input
-          key="input-education"
-          elementClass="profile-form__education"
-          id="education"
-          label="Образование"
-          name="education"
-          type="textarea"
-          maxlength={500}
+          value={(profileForm && profileForm.city && profileForm.city.value) || userProfile.city}
+          isValid={profileForm && profileForm.city && profileForm.city.isValid}
+          error={profileForm && profileForm.city && profileForm.city.errorMsg}
+          onFocusOut={this.handleFocusOut}
         />
         <Input
           key="input-birthdate"
@@ -68,6 +96,30 @@ export class ProfileForm extends Component {
           type="date"
           isRequired={true}
           maxlength={50}
+          value={
+            (profileForm && profileForm.birthDate && profileForm.birthDate.value) ||
+            (userProfile as Applicant).birthDate.toISOString().split('T')[0]
+          }
+          isValid={profileForm && profileForm.birthDate && profileForm.birthDate.isValid}
+          error={profileForm && profileForm.birthDate && profileForm.birthDate.errorMsg}
+          onFocusOut={this.handleFocusOut}
+        />
+        <Input
+          key="input-education"
+          elementClass="profile-form__education"
+          id="education"
+          label="Образование"
+          name="education"
+          type="textarea"
+          maxlength={500}
+          value={
+            (profileForm && profileForm.education && profileForm.education.value) ||
+            (userProfile as Applicant).education
+          }
+          isValid={profileForm && profileForm.education && profileForm.education.isValid}
+          error={profileForm && profileForm.education && profileForm.education.errorMsg}
+          onFocusOut={this.handleFocusOut}
+          hasResizeVertical={true}
         />
         <Input
           key="input-contacts"
@@ -77,6 +129,14 @@ export class ProfileForm extends Component {
           name="contacts"
           type="textarea"
           maxlength={500}
+          value={
+            (profileForm && profileForm.contacts && profileForm.contacts.value) ||
+            userProfile.contacts
+          }
+          isValid={profileForm && profileForm.contacts && profileForm.contacts.isValid}
+          error={profileForm && profileForm.contacts && profileForm.contacts.errorMsg}
+          onFocusOut={this.handleFocusOut}
+          hasResizeVertical={true}
         />
       </form>
     ) : (
@@ -85,6 +145,8 @@ export class ProfileForm extends Component {
         id="profile-form"
         method="POST"
         novalidate
+        onSubmit={this.props.onSubmit}
+        onReset={this.props.onReset}
       >
         <Input
           key="input-first-name"
@@ -95,6 +157,13 @@ export class ProfileForm extends Component {
           type="text"
           isRequired={true}
           maxlength={50}
+          value={
+            (profileForm && profileForm.firstName && profileForm.firstName.value) ||
+            userProfile.firstName
+          }
+          isValid={profileForm && profileForm.firstName && profileForm.firstName.isValid}
+          error={profileForm && profileForm.firstName && profileForm.firstName.errorMsg}
+          onFocusOut={this.handleFocusOut}
         />
         <Input
           key="input-second-name"
@@ -105,6 +174,13 @@ export class ProfileForm extends Component {
           type="text"
           isRequired={true}
           maxlength={50}
+          value={
+            (profileForm && profileForm.secondName && profileForm.secondName.value) ||
+            userProfile.secondName
+          }
+          isValid={profileForm && profileForm.secondName && profileForm.secondName.isValid}
+          error={profileForm && profileForm.secondName && profileForm.secondName.errorMsg}
+          onFocusOut={this.handleFocusOut}
         />
         <Input
           key="input-city"
@@ -115,6 +191,10 @@ export class ProfileForm extends Component {
           type="text"
           isRequired={true}
           maxlength={50}
+          value={(profileForm && profileForm.city && profileForm.city.value) || userProfile.city}
+          isValid={profileForm && profileForm.city && profileForm.city.isValid}
+          error={profileForm && profileForm.city && profileForm.city.errorMsg}
+          onFocusOut={this.handleFocusOut}
         />
         <Input
           key="input-contacts"
@@ -124,6 +204,14 @@ export class ProfileForm extends Component {
           name="contacts"
           type="textarea"
           maxlength={500}
+          value={
+            (profileForm && profileForm.contacts && profileForm.contacts.value) ||
+            userProfile.contacts
+          }
+          isValid={profileForm && profileForm.contacts && profileForm.contacts.isValid}
+          error={profileForm && profileForm.contacts && profileForm.contacts.errorMsg}
+          onFocusOut={this.handleFocusOut}
+          hasResizeVertical={true}
         />
       </form>
     );
diff --git a/src/application/components/profile_minicard/profile_minicard.tsx b/src/application/components/profile_minicard/profile_minicard.tsx
index 4ea1c95..81e23c2 100644
--- a/src/application/components/profile_minicard/profile_minicard.tsx
+++ b/src/application/components/profile_minicard/profile_minicard.tsx
@@ -26,11 +26,11 @@ export class ProfileMinicard extends Component {
         <div className="profile-minicard__user-name">{this.props.fullName}</div>
         <div className="profile-minicard__geoposition-container">
           <img className="profile-minicard__geoposition-icon" src={geopositionIconSvg} />
-          <span className="profile-minicard__geoposition">{this.props.city && 'Неизвестно'}</span>
+          <span className="profile-minicard__geoposition">{this.props.city || 'Неизвестно'}</span>
         </div>
         <div className="profile-minicard__contacts-container">
           <h3 className="profile-minicard__contacts-header">Контакты</h3>
-          <div className="profile-minicard__contacts">{this.props.contacts && 'Не указаны'}</div>
+          <div className="profile-minicard__contacts">{this.props.contacts || 'Не указаны'}</div>
         </div>
       </div>
     );
diff --git a/src/application/components/read_update_form_box/read_update_form_box.tsx b/src/application/components/read_update_form_box/read_update_form_box.tsx
index 733b439..f008a6a 100644
--- a/src/application/components/read_update_form_box/read_update_form_box.tsx
+++ b/src/application/components/read_update_form_box/read_update_form_box.tsx
@@ -5,42 +5,38 @@ import './read_update_form_box.scss';
 export interface ReadUpdateFormBoxProps {
   elementClass?: string;
   canUpdate?: boolean;
+  isUpdating: boolean;
+  setIsUpdating: (isUpdating: boolean) => void;
+  formId?: string;
 }
 
 export class ReadUpdateFormBox extends Component {
-  private isUpdating: boolean = false;
   constructor(
-    { elementClass = '', canUpdate = false }: ReadUpdateFormBoxProps,
+    {
+      elementClass = '',
+      canUpdate = false,
+      formId,
+      isUpdating,
+      setIsUpdating,
+    }: ReadUpdateFormBoxProps,
     [readChild, updateChild]: Array<VirtualNodeSpec | string>,
   ) {
-    super({ elementClass, canUpdate }, [readChild, updateChild]);
+    super({ elementClass, canUpdate, formId, isUpdating, setIsUpdating }, [readChild, updateChild]);
   }
 
   private handleUpdateClick = (ev: Event) => {
     ev.preventDefault();
-    this.isUpdating = true;
-    this.domNode.virtualNode.root.update();
-  };
-
-  private handleSaveClick = (ev: Event) => {
-    ev.preventDefault();
-    this.isUpdating = false;
-    this.domNode.virtualNode.root.update();
-  };
-
-  private handleResetClick = (ev: Event) => {
-    ev.preventDefault();
-    this.isUpdating = false;
+    (this.props.setIsUpdating as (isUpdating: boolean) => void)(true);
     this.domNode.virtualNode.root.update();
   };
 
   render() {
     return (
       <div className={`${this.props.elementClass} read-update-form-box`}>
-        {this.isUpdating ? this.children[1] : this.children[0]}
+        {this.props.isUpdating ? this.children[1] : this.children[0]}
         {this.props.canUpdate && (
           <div className="read-update-form-box__button-container">
-            {!this.isUpdating && (
+            {!this.props.isUpdating && (
               <button
                 type="button"
                 className="read-update-form-box__update-button button button_main-primary"
@@ -49,20 +45,20 @@ export class ReadUpdateFormBox extends Component {
                 Редактировать
               </button>
             )}
-            {this.isUpdating && (
+            {this.props.isUpdating && (
               <button
                 type="submit"
+                form={this.props.formId}
                 className="read-update-form-box__form-submit-button button button_main-primary"
-                onClick={this.handleSaveClick}
               >
                 Сохранить
               </button>
             )}
-            {this.isUpdating && (
+            {this.props.isUpdating && (
               <button
                 type="reset"
+                form={this.props.formId}
                 className="read-update-form-box__form-reset-button button button_danger-tertiary"
-                onClick={this.handleResetClick}
               >
                 Отменить
               </button>
diff --git a/src/application/components/router/router.tsx b/src/application/components/router/router.tsx
index 959836e..73191a3 100644
--- a/src/application/components/router/router.tsx
+++ b/src/application/components/router/router.tsx
@@ -1,17 +1,17 @@
 import { Component, VirtualNodeSpec } from '@/modules/vdom/virtual_node';
 import * as vdom from '@/modules/vdom/virtual_dom';
 import { routerStore } from '@/application/stores/router_store/router_store';
-import { PageClass } from '@/application/stores/router_store/router_actions';
+import { RouterActions } from '@/application/stores/router_store/router_actions';
 import { PageSwitchStatus } from '@/application/stores/router_store/router_store';
 import { routerActionCreators } from '@/application/action_creators/router_action_creators';
+import { storeManager } from '@/modules/store_manager/store_manager';
 
 export class Router extends Component {
-  private prevPage?: PageClass;
-
-  didMount() {
+  didCreate() {
+    super.didCreate();
     window.addEventListener('popstate', (ev) => {
       ev.preventDefault();
-      routerActionCreators.navigate(new URL(location.href));
+      routerActionCreators.navigate(new URL(location.href), false);
     });
 
     window.addEventListener('click', (ev) => {
@@ -34,13 +34,15 @@ export class Router extends Component {
     const routerData = routerStore.getData();
     const { currentUrl, switchStatus } = routerData;
     const CurrentPage = routerData.currentPage;
-    if (this.prevPage !== CurrentPage) {
-      this.prevPage = CurrentPage;
+    if (routerData.switchStatus !== PageSwitchStatus.Switched) {
       if (switchStatus === PageSwitchStatus.Navigate) {
         history.pushState(null, '', currentUrl);
       } else {
         history.replaceState(null, '', currentUrl);
       }
+      storeManager.dispatch({
+        type: RouterActions.Switched,
+      });
     }
     return <CurrentPage url={currentUrl} key={CurrentPage.name} />;
   }
diff --git a/src/application/models/cv.ts b/src/application/models/cv.ts
new file mode 100644
index 0000000..f0465c8
--- /dev/null
+++ b/src/application/models/cv.ts
@@ -0,0 +1,31 @@
+import { Cv as ApiCv } from '@/modules/api/src/responses/cv';
+import fallbackUserIcon from '@static/img/user-icon-80.svg';
+
+/** Interface representing curriculum vitae */
+export interface Cv {
+  id: number;
+  applicantId: number;
+  positionRu: string;
+  positionEn: string;
+  description: string;
+  jobSearchStatus: string;
+  workingExperience: string;
+  avatar: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export function makeCvFromApi(apiResponse: ApiCv) {
+  return {
+    id: apiResponse.id,
+    applicantId: apiResponse.applicant,
+    positionRu: apiResponse.positionRu,
+    positionEn: apiResponse.positionEn,
+    description: apiResponse.description,
+    jobSearchStatus: apiResponse.jobSearchStatus,
+    workingExperience: apiResponse.workingExperience,
+    avatar: apiResponse.avatar || fallbackUserIcon,
+    createdAt: new Date(apiResponse.createdAt),
+    updatedAt: new Date(apiResponse.updatedAt),
+  };
+}
diff --git a/src/application/models/utils/get_user.ts b/src/application/models/utils/get_user.ts
new file mode 100644
index 0000000..3d13d2d
--- /dev/null
+++ b/src/application/models/utils/get_user.ts
@@ -0,0 +1,12 @@
+import type { Applicant as ApiApplicant } from '@api/src/responses/applicant';
+import { getEmployer, getApplicant } from '@api/api';
+import type { Employer as ApiEmployer } from '@api/src/responses/employer';
+import { makeApplicantFromApi } from '../applicant';
+import { makeEmployerFromApi } from '../employer';
+import { UserType } from '../user-type';
+
+export async function getUser(backendOrigin: URL, userType: UserType, id: number) {
+  return userType === UserType.Applicant
+    ? makeApplicantFromApi((await getApplicant(backendOrigin, id)) as ApiApplicant)
+    : makeEmployerFromApi((await getEmployer(backendOrigin, id)) as ApiEmployer);
+}
diff --git a/src/application/models/vacancy.ts b/src/application/models/vacancy.ts
new file mode 100644
index 0000000..c65fd14
--- /dev/null
+++ b/src/application/models/vacancy.ts
@@ -0,0 +1,35 @@
+import { Vacancy as ApiVacancy } from '@/modules/api/src/responses/vacancy';
+import fallbackVacancyIcon from '@static/img/company-icon.svg';
+
+/** Interface representing vacancy */
+export interface Vacancy {
+  id: number;
+  employerId: number;
+  companyName: string;
+  salary: number;
+  position: string;
+  location: string;
+  description: string;
+  workType: string;
+  avatar: string;
+  positionGroup: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export function makeVacancyFromApi(apiResponse: ApiVacancy) {
+  return {
+    id: apiResponse.id,
+    employerId: apiResponse.employer,
+    companyName: apiResponse.companyName,
+    salary: apiResponse.salary,
+    position: apiResponse.position,
+    location: apiResponse.location,
+    description: apiResponse.description,
+    workType: apiResponse.workType,
+    avatar: apiResponse.avatar || fallbackVacancyIcon,
+    positionGroup: apiResponse.positionGroup,
+    createdAt: new Date(apiResponse.createdAt),
+    updatedAt: new Date(apiResponse.updatedAt),
+  };
+}
diff --git a/src/application/pages/profile_page/profile_page.scss b/src/application/pages/profile_page/profile_page.scss
index f434815..5057a38 100644
--- a/src/application/pages/profile_page/profile_page.scss
+++ b/src/application/pages/profile_page/profile_page.scss
@@ -10,7 +10,7 @@
   align-items: start;
   &__profile-minicard {
     width: var(--3-col);
-    background-color: var(--color-background-900);
+    background-color: var(--color-background-800);
     border-radius: var(--radius-l);
     padding: 16px;
     color: var(--color-main-100);
@@ -19,6 +19,7 @@
     width: var(--9-col);
     grid-row: 2 / span 1;
     max-width: var(--9-col);
+    box-sizing: border-box;
   }
 }
 
diff --git a/src/application/pages/profile_page/profile_page.tsx b/src/application/pages/profile_page/profile_page.tsx
index 8d39d4d..bbab141 100644
--- a/src/application/pages/profile_page/profile_page.tsx
+++ b/src/application/pages/profile_page/profile_page.tsx
@@ -11,6 +11,11 @@ import './profile_page.scss';
 import { ReadUpdateFormBox } from '@/application/components/read_update_form_box/read_update_form_box';
 import { Profile } from '@/application/components/profile/profile';
 import { ProfileForm } from '@/application/components/profile_form/profile_form';
+import { profileStore } from '@/application/stores/profile_store/profile_store';
+import { LoadingScreen } from '@/application/components/loading_screen/loading_screen';
+import { NotFoundPage } from '../not_found_page/not_found_page';
+import { profileActionCreators } from '@/application/action_creators/profile_action_creators';
+import { ItemList } from '@/application/components/item_list/item_list';
 
 export enum ProfilePageParams {
   UserId = 'id',
@@ -32,22 +37,38 @@ export class ProfilePage extends Component {
   private startFrom: ProfilePageStartingFrames;
   private activeFrameIdx: number;
   private setActiveFrameIdx: (frameIdx: number) => void;
+  private isUpdatingProfile: boolean = false;
+  private setIsUpdatingProfile: (isUpdatingProfile: boolean) => void;
+  private failedToLoadProfile: boolean = false;
+  private lastUrl: URL;
+
+  private invokedLoadingProfile: boolean;
   constructor({ url }: { url: URL }) {
     super({ url });
     this.parseUrl();
-    this.activeFrameIdx = 0;
+    this.lastUrl = url;
+
+    this.invokedLoadingProfile = false;
     this.setActiveFrameIdx = (frameIdx: number) => {
       this.activeFrameIdx = frameIdx;
       this.domNode.virtualNode.root.update();
     };
+    this.setIsUpdatingProfile = (isUpdatingProfile: boolean) => {
+      this.isUpdatingProfile = isUpdatingProfile;
+      this.domNode.virtualNode.root.update();
+    };
   }
 
   didUpdate(): void {
     super.didUpdate();
     this.parseUrl();
+    this.lastUrl = this.props.url as URL;
   }
 
   parseUrl() {
+    if (this.lastUrl === this.props.url) {
+      return;
+    }
     const url = this.props.url as URL;
     const userData = userStore.getData();
     if (url.pathname === resolveUrl('myProfile', null).pathname) {
@@ -57,8 +78,27 @@ export class ProfilePage extends Component {
     } else {
       this.userId = Number(url.searchParams.get(ProfilePageParams.UserId));
       this.userType = url.searchParams.get(ProfilePageParams.UserType) as UserType;
-      this.isMyProfile = userData.id === this.userId;
+      if (this.userType !== UserType.Applicant && this.userType !== UserType.Employer) {
+        this.failedToLoadProfile = true;
+      }
+      this.isMyProfile = userData.id === this.userId && userData.userType === this.userType;
+    }
+    const profileData = profileStore.getData();
+    if (
+      (!profileData.profileLoaded ||
+        !profileData.userProfile ||
+        profileData.userProfile.id !== this.userId ||
+        profileData.userType !== this.userType) &&
+      !this.invokedLoadingProfile
+    ) {
+      profileActionCreators.loadProfile(this.userType, this.userId);
+      this.invokedLoadingProfile = true;
+    } else {
+      if (this.invokedLoadingProfile) {
+        this.failedToLoadProfile = true;
+      }
     }
+
     switch (url.searchParams.get(ProfilePageParams.StartFrame)) {
       case ProfilePageStartingFrames.CvList: {
         this.startFrom =
@@ -85,14 +125,51 @@ export class ProfilePage extends Component {
         this.startFrom = ProfilePageStartingFrames.Profile;
       }
     }
+
+    switch (this.startFrom) {
+      case ProfilePageStartingFrames.CvList: {
+        this.activeFrameIdx = 1;
+        break;
+      }
+      case ProfilePageStartingFrames.PortfolioList: {
+        this.activeFrameIdx = 2;
+        break;
+      }
+      case ProfilePageStartingFrames.VacancyList: {
+        this.activeFrameIdx = 1;
+        break;
+      }
+      default: {
+        this.activeFrameIdx = 0;
+        break;
+      }
+    }
   }
 
   render() {
-    const userData = userStore.getData();
-    if (this.isMyProfile && !userData.isLoggedIn) {
-      routerActionCreators.redirect(resolveUrl('login', null));
-      return <div>{false}</div>;
+    if (this.isMyProfile) {
+      const userData = userStore.getData();
+      if (!userData.isLoggedIn) {
+        routerActionCreators.redirect(resolveUrl('login', null));
+        return <div>{false}</div>;
+      }
+    }
+    const profileData = profileStore.getData();
+    if (!profileData.profileLoaded) {
+      return (
+        <PageContainer key="page-container" elementClass="profile-page__page-container">
+          <LoadingScreen key="loading-screen" />
+        </PageContainer>
+      );
+    }
+    if (this.failedToLoadProfile || !profileData.userProfile) {
+      return <NotFoundPage url={this.props.url} key="not-found-page" />;
     }
+    const userProfile = profileData.userProfile;
+    this.invokedLoadingProfile = false;
+    const profileForm = profileData.profileForm;
+    const cvList = profileData.cvList;
+    const vacancyList = profileData.vacancyList;
     return (
       <PageContainer key="page-container" elementClass="profile-page__page-container">
         <div class="profile-page" key="profile-page">
@@ -108,23 +185,87 @@ export class ProfilePage extends Component {
             <ReadUpdateFormBox
               key="read-update-form-box"
               elementClass="profile-page__read-update-form-box"
-              canUpdate={true}
+              canUpdate={this.isMyProfile}
+              isUpdating={this.isUpdatingProfile}
+              setIsUpdating={this.setIsUpdatingProfile}
+              formId="profile-form"
             >
               <Profile
                 key="profile"
                 elementClass="profile-page__profile"
                 userType={this.userType}
-                userProfile={userData.userProfile}
+                userProfile={userProfile}
+              />
+              <ProfileForm
+                key="profile-form"
+                elementClass="profile-page__profile-form"
+                userType={this.userType}
+                onSubmit={(ev: Event) => {
+                  ev.preventDefault();
+                  const formData = Object.fromEntries(new FormData(ev.target as HTMLFormElement));
+                  profileActionCreators
+                    .updateProfile(this.userType, formData)
+                    .then((ok: boolean) => {
+                      this.setIsUpdatingProfile(!ok);
+                    });
+                }}
+                onReset={(ev: Event) => {
+                  ev.preventDefault();
+                  profileActionCreators.clearProfileForm();
+                  this.setIsUpdatingProfile(false);
+                }}
+                formData={profileForm}
               />
-              <ProfileForm key="profile-form" elementClass="profile-page__profile-form" />
             </ReadUpdateFormBox>
-            <div>Hello2</div>
+            {this.userType === UserType.Applicant ? (
+              <ItemList
+                key="cv-list"
+                elementClass="profile-page__cv-list"
+                isOwner={this.isMyProfile}
+                addHref={resolveUrl('createCv', null)}
+                childData={
+                  cvList &&
+                  cvList.map((cv) => {
+                    return {
+                      title: cv.positionRu + ' / ' + cv.positionEn,
+                      goToLink: resolveUrl('cv', { id: cv.id.toString() }),
+                      editLink: resolveUrl('editCv', { id: cv.id.toString() }),
+                      isOwner: this.isMyProfile,
+                      handleDelete: () => {
+                        console.log('handleDelete');
+                      },
+                    };
+                  })
+                }
+              />
+            ) : (
+              <ItemList
+                key="vacancy-list"
+                elementClass="profile-page__vacancy-list"
+                isOwner={this.isMyProfile}
+                addHref={resolveUrl('createVacancy', null)}
+                childData={
+                  vacancyList &&
+                  vacancyList.map((vacancy) => {
+                    return {
+                      title: vacancy.position,
+                      goToLink: resolveUrl('vacancy', { id: vacancy.id.toString() }),
+                      editLink: resolveUrl('editVacancy', { id: vacancy.id.toString() }),
+                      isOwner: this.isMyProfile,
+                      handleDelete: () => {
+                        console.log('handleDelete');
+                      },
+                    };
+                  })
+                }
+              />
+            )}
           </FrameSeries>
           <ProfileMinicard
             elementClass="profile-page__profile-minicard"
-            fullName="Иван Иванов"
-            city="Москва"
-            contacts="@tg: hello"
+            fullName={`${userProfile.firstName} ${userProfile.secondName}`}
+            city={userProfile.city}
+            contacts={userProfile.contacts}
             key="profile-minicard"
           />
         </div>
diff --git a/src/application/pages/registration_page/registration_page.tsx b/src/application/pages/registration_page/registration_page.tsx
index 95547be..678c1df 100644
--- a/src/application/pages/registration_page/registration_page.tsx
+++ b/src/application/pages/registration_page/registration_page.tsx
@@ -17,11 +17,17 @@ export class RegistrationPage extends Component {
     super({ url });
     this.setUserType = (userType: UserType) => {
       this.userType = userType;
-      console.log(this.domNode);
       this.domNode.virtualNode.root.update();
     };
   }
 
+  handleFocusOut = (ev: Event) => {
+    const target = ev.target as HTMLInputElement;
+    const name = target.name;
+    const value = target.value;
+    userActionCreators.submitRegistrationFields({ [name]: value });
+  };
+
   private handleSubmit = (ev: SubmitEvent) => {
     ev.preventDefault();
     const formData = Object.fromEntries(new FormData(ev.target as HTMLFormElement));
@@ -63,9 +69,10 @@ export class RegistrationPage extends Component {
               placeholder="Иван"
               isRequired={true}
               maxlength={50}
-              value={regForm && regForm.firstName.value}
-              isValid={regForm && regForm.firstName.isValid}
-              error={regForm && regForm.firstName.errorMsg}
+              value={regForm && regForm.firstName && regForm.firstName.value}
+              isValid={regForm && regForm.firstName && regForm.firstName.isValid}
+              error={regForm && regForm.firstName && regForm.firstName.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
             <Input
               key="input-second-name"
@@ -77,9 +84,10 @@ export class RegistrationPage extends Component {
               placeholder="Иванов"
               isRequired={true}
               maxlength={50}
-              value={regForm && regForm.secondName.value}
-              isValid={regForm && regForm.secondName.isValid}
-              error={regForm && regForm.secondName.errorMsg}
+              value={regForm && regForm.secondName && regForm.secondName.value}
+              isValid={regForm && regForm.secondName && regForm.secondName.isValid}
+              error={regForm && regForm.secondName && regForm.secondName.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
             <Input
               key="input-birthdate"
@@ -90,9 +98,10 @@ export class RegistrationPage extends Component {
               type="date"
               isRequired={true}
               maxlength={50}
-              value={regForm && regForm.birthDate.value}
-              isValid={regForm && regForm.birthDate.isValid}
-              error={regForm && regForm.birthDate.errorMsg}
+              value={regForm && regForm.birthDate && regForm.birthDate.value}
+              isValid={regForm && regForm.birthDate && regForm.birthDate.isValid}
+              error={regForm && regForm.birthDate && regForm.birthDate.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
             <Input
               key="input-email"
@@ -104,9 +113,10 @@ export class RegistrationPage extends Component {
               placeholder="example@mail.ru"
               isRequired={true}
               maxlength={50}
-              value={regForm && regForm.email.value}
-              isValid={regForm && regForm.email.isValid}
-              error={regForm && regForm.email.errorMsg}
+              value={regForm && regForm.email && regForm.email.value}
+              isValid={regForm && regForm.email && regForm.email.isValid}
+              error={regForm && regForm.email && regForm.email.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
             <Input
               key="input-password"
@@ -117,9 +127,10 @@ export class RegistrationPage extends Component {
               type="password"
               isRequired={true}
               maxlength={50}
-              value={regForm && regForm.password.value}
-              isValid={regForm && regForm.password.isValid}
-              error={regForm && regForm.password.errorMsg}
+              value={regForm && regForm.password && regForm.password.value}
+              isValid={regForm && regForm.password && regForm.password.isValid}
+              error={regForm && regForm.password && regForm.password.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
             <Input
               key="input-password-repeat"
@@ -130,9 +141,10 @@ export class RegistrationPage extends Component {
               type="password"
               isRequired={true}
               maxlength={50}
-              value={regForm && regForm.passwordRepeat.value}
-              isValid={regForm && regForm.passwordRepeat.isValid}
-              error={regForm && regForm.passwordRepeat.errorMsg}
+              value={regForm && regForm.passwordRepeat && regForm.passwordRepeat.value}
+              isValid={regForm && regForm.passwordRepeat && regForm.passwordRepeat.isValid}
+              error={regForm && regForm.passwordRepeat && regForm.passwordRepeat.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
           </form>
         ) : (
@@ -153,9 +165,10 @@ export class RegistrationPage extends Component {
               placeholder="Иван"
               isRequired={true}
               maxlength={50}
-              value={regForm && regForm.firstName.value}
-              isValid={regForm && regForm.firstName.isValid}
-              error={regForm && regForm.firstName.errorMsg}
+              value={regForm && regForm.firstName && regForm.firstName.value}
+              isValid={regForm && regForm.firstName && regForm.firstName.isValid}
+              error={regForm && regForm.firstName && regForm.firstName.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
             <Input
               key="input-second-name"
@@ -167,9 +180,10 @@ export class RegistrationPage extends Component {
               placeholder="Иванов"
               isRequired={true}
               maxlength={50}
-              value={regForm && regForm.secondName.value}
-              isValid={regForm && regForm.secondName.isValid}
-              error={regForm && regForm.secondName.errorMsg}
+              value={regForm && regForm.secondName && regForm.secondName.value}
+              isValid={regForm && regForm.secondName && regForm.secondName.isValid}
+              error={regForm && regForm.secondName && regForm.secondName.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
             <Input
               key="input-position"
@@ -181,9 +195,10 @@ export class RegistrationPage extends Component {
               placeholder="Ведущий разработчик"
               isRequired={true}
               maxlength={100}
-              value={regForm && regForm.position.value}
-              isValid={regForm && regForm.position.isValid}
-              error={regForm && regForm.position.errorMsg}
+              value={regForm && regForm.position && regForm.position.value}
+              isValid={regForm && regForm.position && regForm.position.isValid}
+              error={regForm && regForm.position && regForm.position.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
             <Input
               key="input-company-name"
@@ -195,9 +210,10 @@ export class RegistrationPage extends Component {
               placeholder="ООО Рога и Копыта"
               isRequired={true}
               maxlength={100}
-              value={regForm && regForm.companyName.value}
-              isValid={regForm && regForm.companyName.isValid}
-              error={regForm && regForm.companyName.errorMsg}
+              value={regForm && regForm.companyName && regForm.companyName.value}
+              isValid={regForm && regForm.companyName && regForm.companyName.isValid}
+              error={regForm && regForm.companyName && regForm.companyName.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
             <Input
               key="input-company-description"
@@ -209,9 +225,10 @@ export class RegistrationPage extends Component {
               isRequired={false}
               maxlength={500}
               hasResizeVertical={true}
-              value={regForm && regForm.companyDescription.value}
-              isValid={regForm && regForm.companyDescription.isValid}
-              error={regForm && regForm.companyDescription.errorMsg}
+              value={regForm && regForm.companyDescription && regForm.companyDescription.value}
+              isValid={regForm && regForm.companyDescription && regForm.companyDescription.isValid}
+              error={regForm && regForm.companyDescription && regForm.companyDescription.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
             <Input
               key="input-company-website"
@@ -223,9 +240,10 @@ export class RegistrationPage extends Component {
               isRequired={false}
               maxlength={100}
               placeholder="https://example.com"
-              value={regForm && regForm.website.value}
-              isValid={regForm && regForm.website.isValid}
-              error={regForm && regForm.website.errorMsg}
+              value={regForm && regForm.website && regForm.website.value}
+              isValid={regForm && regForm.website && regForm.website.isValid}
+              error={regForm && regForm.website && regForm.website.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
             <Input
               key="input-email"
@@ -237,9 +255,10 @@ export class RegistrationPage extends Component {
               placeholder="example@mail.ru"
               isRequired={true}
               maxlength={50}
-              value={regForm && regForm.email.value}
-              isValid={regForm && regForm.email.isValid}
-              error={regForm && regForm.email.errorMsg}
+              value={regForm && regForm.email && regForm.email.value}
+              isValid={regForm && regForm.email && regForm.email.isValid}
+              error={regForm && regForm.email && regForm.email.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
             <Input
               key="input-password"
@@ -250,9 +269,10 @@ export class RegistrationPage extends Component {
               type="password"
               isRequired={true}
               maxlength={50}
-              value={regForm && regForm.password.value}
-              isValid={regForm && regForm.password.isValid}
-              error={regForm && regForm.password.errorMsg}
+              value={regForm && regForm.password && regForm.password.value}
+              isValid={regForm && regForm.password && regForm.password.isValid}
+              error={regForm && regForm.password && regForm.password.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
             <Input
               key="input-password-repeat"
@@ -263,9 +283,10 @@ export class RegistrationPage extends Component {
               type="password"
               isRequired={true}
               maxlength={50}
-              value={regForm && regForm.passwordRepeat.value}
-              isValid={regForm && regForm.passwordRepeat.isValid}
-              error={regForm && regForm.passwordRepeat.errorMsg}
+              value={regForm && regForm.passwordRepeat && regForm.passwordRepeat.value}
+              isValid={regForm && regForm.passwordRepeat && regForm.passwordRepeat.isValid}
+              error={regForm && regForm.passwordRepeat && regForm.passwordRepeat.errorMsg}
+              onFocusOut={this.handleFocusOut}
             />
           </form>
         )}
diff --git a/src/application/stores/profile_store/profile_actions.ts b/src/application/stores/profile_store/profile_actions.ts
new file mode 100644
index 0000000..4347298
--- /dev/null
+++ b/src/application/stores/profile_store/profile_actions.ts
@@ -0,0 +1,47 @@
+/** @fileoverview This file contains actions for profile store */
+
+import { UserType } from '@/application/models/user-type';
+import { Applicant } from '@/application/models/applicant';
+import { Employer } from '@/application/models/employer';
+import { ProfileFormData } from './profile_store';
+import { Vacancy } from '@/application/models/vacancy';
+import { Cv } from '@/application/models/cv';
+
+export enum ProfileActions {
+  UpdateProfile = 'updateProfile',
+  ProfileFormSubmit = 'profileFormSubmit',
+  ProfileFormReset = 'profileFormReset',
+  UpdateVacancyList = 'updateVacancyList',
+  UpdateCvList = 'updateCvList',
+}
+
+export interface UpdateProfileAction {
+  type: ProfileActions.UpdateProfile;
+  payload: Applicant | Employer;
+}
+
+export interface UpdateVacancyListAction {
+  type: ProfileActions.UpdateVacancyList;
+  payload: Vacancy[];
+}
+
+export interface UpdateCvListAction {
+  type: ProfileActions.UpdateCvList;
+  payload: Cv[];
+}
+
+export interface UpdateProfilePayload {
+  userType: UserType;
+  userProfile: Applicant | Employer;
+  profileLoaded: boolean;
+}
+
+export interface ProfileFormSubmitAction {
+  type: ProfileActions.ProfileFormSubmit;
+  payload: ProfileFormData;
+}
+
+export interface ProfileFormResetAction {
+  type: ProfileActions.ProfileFormReset;
+  payload: ProfileFormData;
+}
diff --git a/src/application/stores/profile_store/profile_store.ts b/src/application/stores/profile_store/profile_store.ts
new file mode 100644
index 0000000..00b3d1e
--- /dev/null
+++ b/src/application/stores/profile_store/profile_store.ts
@@ -0,0 +1,82 @@
+import { Applicant } from '@/application/models/applicant';
+import { Employer } from '@/application/models/employer';
+import { FormValue } from '@/application/models/form_value';
+import { Store } from '@/modules/store_manager/store';
+import { Action } from '@/modules/store_manager/action';
+import { UserType } from '@/application/models/user-type';
+import { ProfileActions, UpdateProfilePayload } from './profile_actions';
+import { storeManager } from '@/modules/store_manager/store_manager';
+import { Vacancy } from '@/application/models/vacancy';
+import { Cv } from '@/application/models/cv';
+
+export interface ProfileFormData {
+  firstName?: FormValue;
+  secondName?: FormValue;
+  birthDate?: FormValue;
+  education?: FormValue;
+  contacts?: FormValue;
+  city?: FormValue;
+  isValid?: boolean;
+  errorMsg?: string;
+}
+
+export interface ProfileFormFields {
+  firstName?: string;
+  secondName?: string;
+  birthDate?: string;
+  city?: string;
+  education?: string;
+  contacts?: string;
+}
+
+export interface ProfileData {
+  userType?: UserType;
+  userProfile?: Applicant | Employer;
+  profileLoaded?: boolean;
+  profileForm?: ProfileFormData;
+  vacancyList?: Vacancy[];
+  cvList?: Cv[];
+}
+
+function profileStoreReducer(state: ProfileData, action: Action) {
+  switch (action.type) {
+    case ProfileActions.UpdateProfile: {
+      const payload = action.payload as UpdateProfilePayload;
+      state.userProfile = payload.userProfile;
+      state.userType = payload.userType;
+      state.profileLoaded = payload.profileLoaded;
+      return state;
+    }
+    case ProfileActions.ProfileFormSubmit: {
+      if (!state.profileForm) {
+        state.profileForm = {};
+      }
+      const payload = action.payload as ProfileFormData;
+      Object.entries(payload).forEach(([key, value]) => {
+        (state.profileForm as { [key: string]: unknown })[key] = value;
+      });
+      return state;
+    }
+    case ProfileActions.ProfileFormReset: {
+      delete state.profileForm;
+      return state;
+    }
+
+    case ProfileActions.UpdateVacancyList: {
+      const payload = action.payload as Vacancy[];
+      state.vacancyList = payload;
+      return state;
+    }
+
+    case ProfileActions.UpdateCvList: {
+      const payload = action.payload as Cv[];
+      state.cvList = payload;
+      return state;
+    }
+  }
+  return state;
+}
+
+export const profileStore = new Store<ProfileData>({ profileLoaded: false }, profileStoreReducer);
+
+storeManager.addStore(profileStore);
diff --git a/src/application/stores/router_store/router_actions.ts b/src/application/stores/router_store/router_actions.ts
index e027c98..221ba69 100644
--- a/src/application/stores/router_store/router_actions.ts
+++ b/src/application/stores/router_store/router_actions.ts
@@ -14,12 +14,14 @@ export enum RouterActions {
   AddRoute = 'add_route',
   RemoveRoute = 'remove_route',
   Start = 'start',
+  Switched = 'switched',
 }
 
 /** Payload for navigate and redirect actions */
 export interface NavigationActionPayload {
   /** URL to navigate to */
   url: URL;
+  modifyHistory?: boolean;
 }
 
 /** Payload for add route action */
diff --git a/src/application/stores/router_store/router_store.ts b/src/application/stores/router_store/router_store.ts
index 601d15b..f0e10b0 100644
--- a/src/application/stores/router_store/router_store.ts
+++ b/src/application/stores/router_store/router_store.ts
@@ -13,6 +13,7 @@ import { PageClass } from './router_actions';
 export enum PageSwitchStatus {
   Navigate = 'navigate',
   Redirect = 'redirect',
+  Switched = 'switched',
 }
 
 export interface RouterData {
@@ -28,7 +29,7 @@ function routerStoreReducer(curData: RouterData, action?: Action): RouterData {
   switch (action.type) {
     case RouterActions.Navigate:
     case RouterActions.Redirect: {
-      return switchPageReducer(curData, action, true);
+      return switchPageReducer(curData, action);
     }
     case RouterActions.AddRoute: {
       const addRouteAction = action as AddRouteAction;
@@ -41,7 +42,12 @@ function routerStoreReducer(curData: RouterData, action?: Action): RouterData {
       break;
     }
     case RouterActions.Start: {
-      return switchPageReducer(curData, action, false);
+      return switchPageReducer(curData, action);
+    }
+
+    case RouterActions.Switched: {
+      curData.switchStatus = PageSwitchStatus.Switched;
+      return curData;
     }
   }
   return curData;
@@ -63,7 +69,7 @@ export const routerStore = new Store<RouterData>(
   {
     fallbackPage: NotFoundPage,
     possiblePages: new Map(),
-    switchStatus: PageSwitchStatus.Navigate,
+    switchStatus: PageSwitchStatus.Switched,
     currentUrl: new URL(window.location.href),
     modifyHistory: false,
   },
diff --git a/src/application/stores/user_store/user_actions.ts b/src/application/stores/user_store/user_actions.ts
index 7243ebb..c84a01f 100644
--- a/src/application/stores/user_store/user_actions.ts
+++ b/src/application/stores/user_store/user_actions.ts
@@ -11,6 +11,7 @@ export enum UserActions {
   Login = 'login',
   LoginFormSubmit = 'loginFormSubmit',
   RegistrationFormSubmit = 'registrationFormSubmit',
+  UpdateProfile = 'updateUserProfile',
 }
 
 export interface LogoutAction extends Action {
@@ -37,3 +38,8 @@ export interface RegistrationFormSubmitAction extends Action {
   type: UserActions.RegistrationFormSubmit;
   payload: RegistrationFormData;
 }
+
+export interface UpdateProfileAction extends Action {
+  type: UserActions.UpdateProfile;
+  payload: Applicant | Employer;
+}
diff --git a/src/application/stores/user_store/user_store.ts b/src/application/stores/user_store/user_store.ts
index 9f9a585..9237c03 100644
--- a/src/application/stores/user_store/user_store.ts
+++ b/src/application/stores/user_store/user_store.ts
@@ -101,6 +101,12 @@ function userStoreReducer(state: UserData, action: Action) {
       });
       return state;
     }
+
+    case UserActions.UpdateProfile: {
+      const payload = action.payload as Applicant | Employer;
+      state.userProfile = payload;
+      return state;
+    }
   }
   return state;
 }
diff --git a/src/modules/api/src/responses/cv.ts b/src/modules/api/src/responses/cv.ts
index 7855038..4a74e40 100644
--- a/src/modules/api/src/responses/cv.ts
+++ b/src/modules/api/src/responses/cv.ts
@@ -5,6 +5,7 @@ export interface Cv {
   positionRu: string;
   positionEn: string;
   jobSearchStatus: string;
+  description: string;
   workingExperience: string;
   positionGroup: string;
   avatar: string;
diff --git a/src/modules/models/Applicant.js b/src/modules/models/Applicant.js
deleted file mode 100644
index 640c9c1..0000000
--- a/src/modules/models/Applicant.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import fallbackUserAvatar from '@static/img/user-icon-80.svg';
-export class Applicant {
-  constructor(backendResponse) {
-    this.id = backendResponse.id;
-    this.firstName = backendResponse.firstName;
-    this.secondName = backendResponse.lastName || backendResponse.secondName;
-    this.city = backendResponse.city;
-    this.birthDate = new Date(backendResponse.birthDate);
-    this.avatar = backendResponse.pathToProfileAvatar || fallbackUserAvatar;
-    this.contacts = backendResponse.contacts;
-    this.education = backendResponse.education;
-    this.email = backendResponse.email;
-  }
-}
diff --git a/src/modules/models/Cv.js b/src/modules/models/Cv.js
deleted file mode 100644
index 0614909..0000000
--- a/src/modules/models/Cv.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import fallbackCompanyIcon from '@static/img/company-icon.svg';
-export class Cv {
-  constructor(backendResponse) {
-    this.id = backendResponse.id;
-    this.applicantId = backendResponse.applicant;
-    this.positionRu = backendResponse.positionRu;
-    this.positionEn = backendResponse.positionEn;
-    this.description = backendResponse.description;
-    this.jobSearchStatus = backendResponse.jobSearchStatus;
-    this.workingExperience = backendResponse.workingExperience;
-    this.avatar = backendResponse.avatar || fallbackCompanyIcon;
-    this.createdAt = new Date(backendResponse.createdAt);
-    this.updatedAt = new Date(backendResponse.updatedAt);
-  }
-}
diff --git a/src/modules/models/Employer.js b/src/modules/models/Employer.js
deleted file mode 100644
index 891192b..0000000
--- a/src/modules/models/Employer.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import fallbackUserAvatar from '@static/img/user-icon-80.svg';
-export class Employer {
-  constructor(backendResponse) {
-    this.id = backendResponse.id;
-    this.firstName = backendResponse.firstName;
-    this.secondName = backendResponse.lastName || backendResponse.secondName;
-    this.city = backendResponse.city;
-    this.avatar = backendResponse.pathToProfileAvatar || fallbackUserAvatar;
-    this.contacts = backendResponse.contacts;
-    this.education = backendResponse.education;
-    this.email = backendResponse.email;
-  }
-}
diff --git a/src/modules/models/Vacancy.js b/src/modules/models/Vacancy.js
deleted file mode 100644
index 46d8ada..0000000
--- a/src/modules/models/Vacancy.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import fallbackVacancyIcon from '@static/img/company-icon.svg';
-
-export class Vacancy {
-  constructor(backendResponse) {
-    this.id = backendResponse.id;
-    this.employerId = backendResponse.employer;
-    this.companyName = backendResponse.companyName;
-    this.salary = +backendResponse.salary;
-    this.position = backendResponse.position;
-    this.location = backendResponse.location;
-    this.description = backendResponse.description;
-    this.workType = backendResponse.workType;
-    this.avatar = backendResponse.avatar || fallbackVacancyIcon;
-    this.positionGroup = backendResponse.positionGroup;
-    this.createdAt = new Date(backendResponse.createdAt);
-    this.updatedAt = new Date(backendResponse.updatedAt);
-  }
-}
diff --git a/src/modules/store_manager/store_manager.ts b/src/modules/store_manager/store_manager.ts
index cc5422e..1e84815 100644
--- a/src/modules/store_manager/store_manager.ts
+++ b/src/modules/store_manager/store_manager.ts
@@ -25,10 +25,8 @@ class StoreManager {
   }
 
   private updateVdom() {
-    console.log('updating vdom');
     const someVdomUpdating = this.vdomRoots.some((vdomRoot) => vdomRoot.checkVdomUpdating());
     if (someVdomUpdating) {
-      console.log('blocked updating vdom');
       this.needToUpdateVdom = true;
       return;
     }
diff --git a/src/modules/vdom/virtual_dom_root.ts b/src/modules/vdom/virtual_dom_root.ts
index a5abe36..e96477e 100644
--- a/src/modules/vdom/virtual_dom_root.ts
+++ b/src/modules/vdom/virtual_dom_root.ts
@@ -77,7 +77,7 @@ export class VirtualDomRoot {
       if (targetNode.virtualNode === undefined) {
         return;
       }
-      const virtualNode = targetNode.virtualNode;
+      const virtualNode = targetNode.originalVirtualNode || targetNode.virtualNode;
       bubbleEvent(ev, virtualNode);
     };
     this.domNode.addEventListener(eventName, eventHandler);
diff --git a/src/scss/_common.scss b/src/scss/_common.scss
index 2b286f2..bfa43e5 100644
--- a/src/scss/_common.scss
+++ b/src/scss/_common.scss
@@ -42,55 +42,6 @@
   }
 }
 
-/* crud form box */
-
-.crud-form-box {
-  &__button-container {
-    display: flex;
-    flex-direction: row;
-    gap: 20px;
-  }
-}
-
-/* minicard */
-
-.minicard {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-
-  &__title {
-    font-size: var(--text-size-7);
-    color: var(--color-main-100);
-    text-decoration: none;
-  }
-
-  &__button-container {
-    display: flex;
-    flex-direction: row;
-    gap: 20px;
-    justify-content: end;
-  }
-
-  &_theme-standard {
-    background-color: var(--color-background-900);
-    min-height: 64px;
-    padding: 10px 20px;
-    border-radius: 25px;
-  }
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-  &__add-button-container {
-    display: flex;
-    justify-content: end;
-  }
-}
-
 .hidden {
   display: none !important;
 }
diff --git a/src/scss/_login.scss b/src/scss/_login.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/scss/_profile.scss b/src/scss/_profile.scss
deleted file mode 100644
index f2b3fd5..0000000
--- a/src/scss/_profile.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-/* Profile form */
-
-.applicant-profile-form {
-  &__validated-input {
-    display: grid;
-    grid-template-columns: 1fr 300px 2fr;
-    column-gap: 20px;
-    align-items: baseline;
-    justify-content: space-between;
-    margin-bottom: 20px;
-  }
-
-  &__validated-textarea {
-    display: grid;
-    grid-template-columns: 1fr 300px 2fr;
-    column-gap: 20px;
-    align-items: baseline;
-    justify-content: space-between;
-    margin-bottom: 20px;
-  }
-
-  &__contacts-textarea {
-    resize: vertical;
-  }
-
-  &__education-textarea {
-    resize: vertical;
-  }
-}
-
-.employer-profile-form {
-  &__validated-input {
-    display: grid;
-    grid-template-columns: 1fr 300px 2fr;
-    column-gap: 20px;
-    align-items: baseline;
-    justify-content: space-between;
-    margin-bottom: 20px;
-  }
-
-  &__validated-textarea {
-    display: grid;
-    grid-template-columns: 1fr 300px 2fr;
-    column-gap: 20px;
-    align-items: baseline;
-    justify-content: space-between;
-    margin-bottom: 20px;
-  }
-
-  &__contacts-textarea {
-    resize: vertical;
-  }
-}
-
-.profile-page {
-  &__vacancies-list {
-    min-height: 400px;
-  }
-
-  &__portfolio-list {
-    min-height: 400px;
-  }
-
-  &__cv-list {
-    min-height: 400px;
-  }
-}
diff --git a/src/scss/_registration.scss b/src/scss/_registration.scss
deleted file mode 100755
index e69de29..0000000
diff --git a/src/scss/index.scss b/src/scss/index.scss
index f7ece64..8aa3925 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -1,9 +1,6 @@
 @use 'fonts';
 @use 'button';
 @use 'vacancies';
-@use 'login';
-@use 'registration';
-@use 'profile';
 @use 'vacancy';
 @use 'cv';
 @use 'common';

From d52f809ca4c20d9def06a55d0a5f81017ccd96da Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Sun, 15 Dec 2024 22:52:07 +0300
Subject: [PATCH 12/17] feature: vacancy page

---
 src/Components/AppliersList/AppliersList.js   |  21 ---
 .../AppliersList/AppliersListController.js    |  12 --
 .../AppliersList/AppliersListModel.js         |  33 ----
 .../AppliersList/AppliersListView.js          |  35 ----
 src/Components/AppliersList/appliers-list.hbs |   6 -
 .../ButtonContainer/ButtonContainer.js        |  14 --
 .../ButtonContainer/ButtonContainerView.js    |  84 ---------
 .../vacancy-article__button-container.hbs     |  14 --
 .../VacancyArticle/VacancyArticle.js          |  50 ------
 .../VacancyArticleController.js               |  74 --------
 .../VacancyArticle/VacancyArticleModel.js     |  73 --------
 .../VacancyArticle/VacancyArticleView.js      |  50 ------
 .../VacancyArticle/vacancy-article.hbs        |  16 --
 src/Pages/LoginPage/LoginPage.js              |  28 ---
 src/Pages/ProfilePage/ProfilePage.js          | 161 ------------------
 .../ProfilePage/ProfilePageController.js      |   3 -
 src/Pages/ProfilePage/ProfilePageModel.js     |   3 -
 src/Pages/ProfilePage/ProfilePageView.js      |  20 ---
 src/Pages/ProfilePage/profile-page.hbs        |   9 -
 .../vacancy_action_creators.ts                | 128 ++++++++++++++
 .../appliers_list/appliers_list.scss          |  23 +++
 .../appliers_list/appliers_list.tsx           |  38 +++++
 .../item_list_child/item_list_child.tsx       |   4 +-
 .../vacancy_article/vacancy_article.scss      |  97 +++++++++++
 .../vacancy_article/vacancy_article.tsx       | 128 ++++++++++++++
 .../pages/profile_page/profile_page.tsx       |   4 +-
 .../pages/vacancy_page/vacancy_page.scss      |  44 +++++
 .../pages/vacancy_page/vacancy_page.tsx       | 122 +++++++++++++
 .../stores/vacancy_store/vacancy_actions.ts   |  34 ++++
 .../stores/vacancy_store/vacancy_store.ts     |  45 +++++
 src/index.tsx                                 |   2 +
 .../api/src/handlers/vacancy/appliers.ts      |   9 +-
 src/modules/api/src/responses/appliers.ts     |   6 +
 src/scss/_vacancy.scss                        | 156 -----------------
 src/server/server.mjs                         |  74 --------
 35 files changed, 677 insertions(+), 943 deletions(-)
 delete mode 100644 src/Components/AppliersList/AppliersList.js
 delete mode 100644 src/Components/AppliersList/AppliersListController.js
 delete mode 100644 src/Components/AppliersList/AppliersListModel.js
 delete mode 100644 src/Components/AppliersList/AppliersListView.js
 delete mode 100644 src/Components/AppliersList/appliers-list.hbs
 delete mode 100644 src/Components/VacancyArticle/ButtonContainer/ButtonContainer.js
 delete mode 100644 src/Components/VacancyArticle/ButtonContainer/ButtonContainerView.js
 delete mode 100644 src/Components/VacancyArticle/ButtonContainer/vacancy-article__button-container.hbs
 delete mode 100644 src/Components/VacancyArticle/VacancyArticle.js
 delete mode 100644 src/Components/VacancyArticle/VacancyArticleController.js
 delete mode 100644 src/Components/VacancyArticle/VacancyArticleModel.js
 delete mode 100644 src/Components/VacancyArticle/VacancyArticleView.js
 delete mode 100644 src/Components/VacancyArticle/vacancy-article.hbs
 delete mode 100644 src/Pages/LoginPage/LoginPage.js
 delete mode 100644 src/Pages/ProfilePage/ProfilePage.js
 delete mode 100644 src/Pages/ProfilePage/ProfilePageController.js
 delete mode 100644 src/Pages/ProfilePage/ProfilePageModel.js
 delete mode 100644 src/Pages/ProfilePage/ProfilePageView.js
 delete mode 100644 src/Pages/ProfilePage/profile-page.hbs
 create mode 100644 src/application/action_creators/vacancy_action_creators.ts
 create mode 100644 src/application/components/appliers_list/appliers_list.scss
 create mode 100644 src/application/components/appliers_list/appliers_list.tsx
 create mode 100644 src/application/components/vacancy_article/vacancy_article.scss
 create mode 100644 src/application/components/vacancy_article/vacancy_article.tsx
 create mode 100644 src/application/pages/vacancy_page/vacancy_page.scss
 create mode 100644 src/application/pages/vacancy_page/vacancy_page.tsx
 create mode 100644 src/application/stores/vacancy_store/vacancy_actions.ts
 create mode 100644 src/application/stores/vacancy_store/vacancy_store.ts
 create mode 100644 src/modules/api/src/responses/appliers.ts
 delete mode 100644 src/server/server.mjs

diff --git a/src/Components/AppliersList/AppliersList.js b/src/Components/AppliersList/AppliersList.js
deleted file mode 100644
index 6f3dbc6..0000000
--- a/src/Components/AppliersList/AppliersList.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { AppliersListModel } from './AppliersListModel';
-import { AppliersListController } from './AppliersListController';
-import { AppliersListView } from './AppliersListView';
-import { ListMixin } from '@/Components/Lists/List/ListMixin';
-
-export class AppliersList extends Component {
-  constructor({ vacancyId, elementClass, existingElement }) {
-    super({
-      modelClass: AppliersListModel,
-      controllerClass: AppliersListController,
-      viewClass: AppliersListView,
-      viewParams: { elementClass },
-      modelParams: { vacancyId },
-      existingElement,
-    });
-    this._controller.fillList();
-  }
-}
-
-Object.assign(AppliersList.prototype, ListMixin);
diff --git a/src/Components/AppliersList/AppliersListController.js b/src/Components/AppliersList/AppliersListController.js
deleted file mode 100644
index 8fd18bf..0000000
--- a/src/Components/AppliersList/AppliersListController.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-
-export class AppliersListController extends ComponentController {
-  constructor(model, view, component) {
-    super(model, view, component);
-  }
-
-  async fillList() {
-    const appliers = await this._model.getItems();
-    appliers.forEach((applier) => this._view.addListItem(applier));
-  }
-}
diff --git a/src/Components/AppliersList/AppliersListModel.js b/src/Components/AppliersList/AppliersListModel.js
deleted file mode 100644
index 15d23b9..0000000
--- a/src/Components/AppliersList/AppliersListModel.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-import { getVacancyAppliers } from '@api/api';
-import appState from '@/modules/AppState/AppState';
-import { Applicant } from '@/modules/models/Applicant';
-import { catchStandardResponseError } from '@/modules/app_errors/Errors';
-
-export class AppliersListModel extends ComponentModel {
-  #vacancyId;
-  constructor({ vacancyId }) {
-    super();
-    this.#vacancyId = vacancyId;
-  }
-
-  async getItems() {
-    try {
-      const peopleJson = (await getVacancyAppliers(appState.backendUrl, this.#vacancyId))
-        .subscribers;
-      const applicantObjects = peopleJson.reduce((applicantObjects, applicantJsonItem) => {
-        try {
-          const applicant = new Applicant(applicantJsonItem);
-          applicant.name = `${applicant.firstName} ${applicant.secondName}`;
-          applicantObjects.push(applicant);
-          return applicantObjects;
-        } catch {
-          return applicantObjects;
-        }
-      }, []);
-      return applicantObjects;
-    } catch (err) {
-      catchStandardResponseError(err);
-    }
-  }
-}
diff --git a/src/Components/AppliersList/AppliersListView.js b/src/Components/AppliersList/AppliersListView.js
deleted file mode 100644
index 1f10346..0000000
--- a/src/Components/AppliersList/AppliersListView.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-import USER_TYPE from '@/modules/UserSession/UserType';
-import AppliersListViewHbs from './appliers-list.hbs';
-
-export class AppliersListView extends ComponentView {
-  #listItems;
-  #isEmpty;
-  constructor(renderParams, existingElement) {
-    super({
-      renderParams,
-      existingElement,
-      template: AppliersListViewHbs,
-    });
-    this.list = this._html.querySelector('.appliers-list__list');
-    this.#listItems = [];
-    this.#isEmpty = true;
-    this.list.innerText = 'Пока никто не откликнулся';
-  }
-
-  addListItem({ id, name }) {
-    if (this.#isEmpty) {
-      this.#isEmpty = false;
-      this.list.innerHTML = '';
-    }
-    const listItem = document.createElement('li');
-    const anchorElement = document.createElement('a');
-    anchorElement.href = `${resolveUrl('profile')}?id=${id}&userType=${USER_TYPE.APPLICANT}`;
-    anchorElement.innerText = name;
-    anchorElement.classList.add('appliers-list__list-item');
-    listItem.appendChild(anchorElement);
-    this.list.appendChild(listItem);
-    this.#listItems.push(listItem);
-  }
-}
diff --git a/src/Components/AppliersList/appliers-list.hbs b/src/Components/AppliersList/appliers-list.hbs
deleted file mode 100644
index 55911bb..0000000
--- a/src/Components/AppliersList/appliers-list.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="{{elementClass}} appliers-list">
-    <h1 class="appliers-list__header">Откликнулись</h1>
-    <div class="appliers-list__divider"></div>
-    <ol class="appliers-list__list">
-    </ol>
-</div>
\ No newline at end of file
diff --git a/src/Components/VacancyArticle/ButtonContainer/ButtonContainer.js b/src/Components/VacancyArticle/ButtonContainer/ButtonContainer.js
deleted file mode 100644
index 5487577..0000000
--- a/src/Components/VacancyArticle/ButtonContainer/ButtonContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, ComponentController, ComponentModel } from '@/modules/Components/Component';
-import { ButtonContainerView } from './ButtonContainerView';
-
-export class ButtonContainer extends Component {
-  constructor({ isOwner, isApplied, isApplicant, ownerId, vacancyId, existingElement }) {
-    super({
-      modelClass: ComponentModel,
-      viewClass: ButtonContainerView,
-      controllerClass: ComponentController,
-      viewParams: { isOwner, isApplicant, isApplied, ownerId, vacancyId },
-      existingElement,
-    });
-  }
-}
diff --git a/src/Components/VacancyArticle/ButtonContainer/ButtonContainerView.js b/src/Components/VacancyArticle/ButtonContainer/ButtonContainerView.js
deleted file mode 100644
index 1ad8bfc..0000000
--- a/src/Components/VacancyArticle/ButtonContainer/ButtonContainerView.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import {
-  VACANCY_APPLY,
-  VACANCY_DELETE,
-  VACANCY_EDIT,
-  VACANCY_RESET_APPLY,
-} from '@/modules/Events/Events';
-import { addEventListeners } from '@/modules/Events/EventUtils';
-import { ComponentView } from '@/modules/Components/Component';
-import eventBus from '@/modules/Events/EventBus';
-import ButtonContainerHbs from './vacancy-article__button-container.hbs';
-
-export class ButtonContainerView extends ComponentView {
-  #applyButton;
-  #editButton;
-  #deleteButton;
-  #vacancyId;
-  #isApplied;
-  #resetApplyButton;
-  #activeApplyButton;
-  constructor({ isOwner, isApplicant, ownerId, vacancyId, isApplied }, existingElement) {
-    super({
-      renderParams: { isOwner, isApplicant, ownerId },
-      existingElement,
-      template: ButtonContainerHbs,
-    });
-    this.#isApplied = isApplied;
-    this.#vacancyId = vacancyId;
-    if (isApplicant) {
-      this.#applyButton = this._html.querySelector('.vacancy-article__apply-button');
-      this._eventListeners.push({
-        event: 'click',
-        object: this.#applyButton,
-        listener: function (ev) {
-          ev.preventDefault();
-          eventBus.emit(VACANCY_APPLY, { caller: this, vacancyId: this.#vacancyId });
-        }.bind(this),
-      });
-      this.#resetApplyButton = this._html.querySelector('.vacancy-article__reset-apply-button');
-      this._eventListeners.push({
-        event: 'click',
-        object: this.#resetApplyButton,
-        listener: function (ev) {
-          ev.preventDefault();
-          eventBus.emit(VACANCY_RESET_APPLY, { caller: this, vacancyId: this.#vacancyId });
-        }.bind(this),
-      });
-      this.#activeApplyButton = this.#isApplied ? this.#resetApplyButton : this.#applyButton;
-      this.#activeApplyButton.classList.remove('hidden');
-    } else if (isOwner) {
-      this.#editButton = this._html.querySelector('.vacancy-article__edit-button');
-      this.#deleteButton = this._html.querySelector('.vacancy-article__delete-button');
-      this._eventListeners.push(
-        {
-          event: 'click',
-          object: this.#editButton,
-          listener: function (ev) {
-            ev.preventDefault();
-            eventBus.emit(VACANCY_EDIT, { vacancyId: this.#vacancyId });
-          }.bind(this),
-        },
-        {
-          event: 'click',
-          object: this.#deleteButton,
-          listener: function (ev) {
-            ev.preventDefault();
-            eventBus.emit(VACANCY_DELETE, { vacancyId: this.#vacancyId });
-          }.bind(this),
-        },
-      );
-    }
-    addEventListeners(this._eventListeners);
-  }
-
-  toggleApplyButton() {
-    this.#activeApplyButton.classList.add('hidden');
-    if (Object.is(this.#activeApplyButton, this.#applyButton)) {
-      this.#activeApplyButton = this.#resetApplyButton;
-      this.#resetApplyButton.classList.remove('hidden');
-    } else {
-      this.#activeApplyButton = this.#applyButton;
-      this.#applyButton.classList.remove('hidden');
-    }
-  }
-}
diff --git a/src/Components/VacancyArticle/ButtonContainer/vacancy-article__button-container.hbs b/src/Components/VacancyArticle/ButtonContainer/vacancy-article__button-container.hbs
deleted file mode 100644
index 8bf8fbd..0000000
--- a/src/Components/VacancyArticle/ButtonContainer/vacancy-article__button-container.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="vacancy-article__button-container">
-{{#if isApplicant}}
-    <button type="button" class="vacancy-article__apply-button button button_main-primary hidden" >Откликнуться</button>
-    <button type="button" class="vacancy-article__reset-apply-button button button_danger-primary hidden" >Отменить отклик</button>
-    <a class="vacancy-article__apply-button button button_main-secondary" href="{{url "profile" ""}}?id={{ownerId}}&userType=employer&from=vacancyList">Все вакансии</a>
-{{else}}
-    {{#if isOwner}}
-        <button type="button" class="vacancy-article__edit-button button button_main-primary">Изменить</button>
-        <button type="button" class="vacancy-article__delete-button button button_danger-secondary {
-">Удалить</button>
-    {{/if}}
-{{/if}}
-<div class='vacancy-article__created-at'></div>
-</div>
\ No newline at end of file
diff --git a/src/Components/VacancyArticle/VacancyArticle.js b/src/Components/VacancyArticle/VacancyArticle.js
deleted file mode 100644
index 0903f7b..0000000
--- a/src/Components/VacancyArticle/VacancyArticle.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { VacancyArticleView } from './VacancyArticleView';
-import { VacancyArticleModel } from './VacancyArticleModel';
-import { VacancyArticleController } from './VacancyArticleController';
-import { ButtonContainer } from './ButtonContainer/ButtonContainer';
-import USER_TYPE from '@/modules/UserSession/UserType';
-import { getVacancyApplyStatus } from '@/modules/api/api';
-import appState from '@/modules/AppState/AppState';
-
-export class VacancyArticle extends Component {
-  constructor({ elementClass, vacancyId, userId, userType }) {
-    super({
-      modelClass: VacancyArticleModel,
-      modelParams: { vacancyId },
-      viewClass: VacancyArticleView,
-      controllerClass: VacancyArticleController,
-      viewParams: { elementClass },
-    });
-    this._userId = userId;
-    this._userType = userType;
-    this._vacancyId = vacancyId;
-  }
-
-  async makeButtons() {
-    let modelData = {};
-    let appliedStatus = {};
-    if (this._userType === USER_TYPE.APPLICANT) {
-      [modelData, appliedStatus] = await Promise.all([
-        this._controller.fetchData(),
-        getVacancyApplyStatus(appState.backendUrl, this._vacancyId),
-      ]);
-    } else {
-      modelData = await this._controller.fetchData();
-    }
-    this._buttonContainer = new ButtonContainer({
-      isOwner: modelData.employerId === this._userId && this._userType === USER_TYPE.EMPLOYER,
-      isApplied: appliedStatus.isSubscribed,
-      isApplicant: this._userType === USER_TYPE.APPLICANT,
-      ownerId: modelData.employerId,
-      vacancyId: this._vacancyId,
-    });
-    this._children.push(this._buttonContainer);
-    this._controller.addButtonContainer(this._buttonContainer);
-    this._controller.renderData();
-  }
-
-  async getEmployerId() {
-    return this._model.getEmployerId();
-  }
-}
diff --git a/src/Components/VacancyArticle/VacancyArticleController.js b/src/Components/VacancyArticle/VacancyArticleController.js
deleted file mode 100644
index 50c9173..0000000
--- a/src/Components/VacancyArticle/VacancyArticleController.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-import {
-  GO_TO,
-  REDIRECT_TO,
-  VACANCY_APPLY,
-  VACANCY_DELETE,
-  VACANCY_EDIT,
-  VACANCY_RESET_APPLY,
-} from '@/modules/Events/Events';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-import eventBus from '@/modules/Events/EventBus';
-import { VacancyEditPage } from '@/Pages/VacancyEditPage/VacancyEditPage';
-
-export class VacancyArticleController extends ComponentController {
-  constructor(model, view, component) {
-    super(model, view, component);
-    this.setHandlers([
-      {
-        event: VACANCY_DELETE,
-        handler: this.vacancyDelete.bind(this),
-      },
-      {
-        event: VACANCY_EDIT,
-        handler: this.vacancyEdit.bind(this),
-      },
-      {
-        event: VACANCY_APPLY,
-        handler: this.vacancyApply.bind(this),
-      },
-      {
-        event: VACANCY_RESET_APPLY,
-        handler: this.vacancyResetApply.bind(this),
-      },
-    ]);
-  }
-
-  async fetchData() {
-    return this._model.getVacancyData();
-  }
-
-  async renderData() {
-    return this._view.renderData(await this._model.getVacancyData());
-  }
-
-  addButtonContainer(container) {
-    this._view.addButtonContainer(container.render());
-  }
-
-  async vacancyDelete() {
-    const deleted = await this._model.vacancyDelete();
-    if (deleted) {
-      eventBus.emit(REDIRECT_TO, { redirectUrl: resolveUrl('myProfile') });
-    }
-  }
-
-  async vacancyEdit() {
-    const query = {};
-    const vacancy = await this._model.getVacancyData();
-    query[VacancyEditPage.VACANCY_ID_PARAM] = vacancy.id;
-    eventBus.emit(GO_TO, { redirectUrl: resolveUrl('editVacancy', query) });
-  }
-
-  async vacancyApply({ caller }) {
-    if (this._model.vacancyApply()) {
-      caller.toggleApplyButton();
-    }
-  }
-
-  async vacancyResetApply({ caller }) {
-    if (this._model.vacancyResetApply()) {
-      caller.toggleApplyButton();
-    }
-  }
-}
diff --git a/src/Components/VacancyArticle/VacancyArticleModel.js b/src/Components/VacancyArticle/VacancyArticleModel.js
deleted file mode 100644
index 64ffd91..0000000
--- a/src/Components/VacancyArticle/VacancyArticleModel.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-import { Vacancy } from '@/modules/models/Vacancy';
-import { NotFoundError } from '@/modules/Router/Router';
-import state from '@/modules/AppState/AppState';
-import USER_TYPE from '@/modules/UserSession/UserType';
-import { catchStandardResponseError } from '@/modules/app_errors/Errors';
-import { getVacancy, deleteVacancy, applyToVacancy, resetApplyToVacancy } from '@/modules/api/api';
-
-export class VacancyArticleModel extends ComponentModel {
-  #vacancyData;
-  #vacancyId;
-  #userType;
-
-  constructor({ vacancyId }) {
-    super();
-    this.#vacancyId = vacancyId;
-    this.#vacancyData = getVacancy(state.backendUrl, this.#vacancyId).then(
-      (data) => new Vacancy(data),
-      () => {
-        throw new NotFoundError('vacancy not found');
-      },
-    );
-    this.#userType = state.userSession.userType;
-  }
-
-  async getVacancyData() {
-    return this.#vacancyData;
-  }
-
-  async getEmployerId() {
-    const vacancyData = await this.#vacancyData;
-    return vacancyData.employerId;
-  }
-
-  async vacancyDelete() {
-    if (!this.#vacancyId) {
-      return false;
-    }
-    try {
-      await deleteVacancy(state.backendUrl, this.#vacancyId);
-      return true;
-    } catch (err) {
-      catchStandardResponseError(err);
-      return false;
-    }
-  }
-
-  async vacancyApply() {
-    if (!this.#vacancyId || this.#userType !== USER_TYPE.APPLICANT) {
-      return false;
-    }
-    try {
-      await applyToVacancy(state.backendUrl, this.#vacancyId);
-      return true;
-    } catch (err) {
-      catchStandardResponseError(err);
-      return false;
-    }
-  }
-
-  async vacancyResetApply() {
-    if (!this.#vacancyId || this.#userType !== USER_TYPE.APPLICANT) {
-      return false;
-    }
-    try {
-      await resetApplyToVacancy(state.backendUrl, this.#vacancyId);
-      return true;
-    } catch (err) {
-      catchStandardResponseError(err);
-      return false;
-    }
-  }
-}
diff --git a/src/Components/VacancyArticle/VacancyArticleView.js b/src/Components/VacancyArticle/VacancyArticleView.js
deleted file mode 100644
index 64f5d2c..0000000
--- a/src/Components/VacancyArticle/VacancyArticleView.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import VacancyArticleHbs from './vacancy-article.hbs';
-export class VacancyArticleView extends ComponentView {
-  constructor({ elementClass, isOwner, isApplicant }, existingElement) {
-    super({
-      renderParams: {
-        elementClass,
-        isOwner,
-        isApplicant,
-      },
-      template: VacancyArticleHbs,
-      existingElement,
-    });
-    this._avatar = this._html.querySelector('.vacancy-article__company-picture');
-    this._position = this._html.querySelector('.vacancy-summary__header');
-    this._companyName = this._html.querySelector('.vacancy-summary__company-name');
-    this._salary = this._html.querySelector('.vacancy-summary__salary');
-    this._workType = this._html.querySelector('.vacancy-summary__work-type');
-    this._description = this._html.querySelector('.vacancy-article__description');
-  }
-
-  renderData({
-    avatar,
-    position,
-    companyName,
-    salary,
-    workType,
-    description,
-    location,
-    updatedAt,
-  }) {
-    this._avatar.src = avatar;
-    this._position.innerText = position;
-    this._companyName.innerText = `${companyName}, ${location}`;
-    this._salary.innerText = salary ? `${salary} руб.` : 'Не указана';
-    this._workType.innerText = workType;
-    this._description.innerText = description;
-    this._updatedAt.innerText = `последнее обновление: ${updatedAt.toLocaleDateString('ru-RU', {
-      weekday: 'short',
-      day: 'numeric',
-      month: 'numeric',
-      year: 'numeric',
-    })}`;
-  }
-
-  addButtonContainer(containerRender) {
-    this._html.appendChild(containerRender);
-    this._updatedAt = this._html.querySelector('.vacancy-article__created-at');
-  }
-}
diff --git a/src/Components/VacancyArticle/vacancy-article.hbs b/src/Components/VacancyArticle/vacancy-article.hbs
deleted file mode 100644
index 73cdc8d..0000000
--- a/src/Components/VacancyArticle/vacancy-article.hbs
+++ /dev/null
@@ -1,16 +0,0 @@
-<article class="{{elementClass}} vacancy-article">
-  <div class='vacancy-article__header-container'>
-    <img class='vacancy-article__company-picture' src='{{avatar}}' />
-    <div class='vacancy-article__header vacancy-summary'>
-      <h1 class='vacancy-summary__header'></h1>
-      <div class='vacancy-summary__company-name'></div>
-      <div>
-        <span class='vacancy-summary__salary'></span>
-        <span class="vacancy-summary__work-type pill pill_main"></span>
-      </div>
-    </div>
-    
-  </div>
-  <div class="vacancy-article__divider"></div>
-  <div class='vacancy-article__description'></div>
-</article>
\ No newline at end of file
diff --git a/src/Pages/LoginPage/LoginPage.js b/src/Pages/LoginPage/LoginPage.js
deleted file mode 100644
index 618395f..0000000
--- a/src/Pages/LoginPage/LoginPage.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { LoginPageController } from './LoginPageController';
-import { LoginPageView } from './LoginPageView';
-import { LoginPageModel } from './LoginPageModel';
-import { Page } from '@/modules/Page/Page';
-import { LoginForm } from '@/Components/LoginForm/LoginForm';
-import state from '@/modules/AppState/AppState';
-
-export class LoginPage extends Page {
-  #loginForm;
-  constructor({ url }) {
-    super({
-      url,
-      modelClass: LoginPageModel,
-      viewClass: LoginPageView,
-      controllerClass: LoginPageController,
-    });
-    state.userSession.goToHomePageIfLoggedIn();
-  }
-
-  postRenderInit() {
-    this.#loginForm = new LoginForm({ existingElement: this._view.loginForm });
-    this._children.push(this.#loginForm);
-  }
-
-  get loginForm() {
-    return this.#loginForm;
-  }
-}
diff --git a/src/Pages/ProfilePage/ProfilePage.js b/src/Pages/ProfilePage/ProfilePage.js
deleted file mode 100644
index 1aa8f79..0000000
--- a/src/Pages/ProfilePage/ProfilePage.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import { Header } from '@/Components/Header/Header';
-import { Page } from '@/modules/Page/Page';
-import { ProfilePageController } from './ProfilePageController';
-import { ProfilePageModel } from './ProfilePageModel';
-import { ProfilePageView } from './ProfilePageView';
-import state from '@/modules/AppState/AppState';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-import { FrameSeries } from '@/Components/FrameSeries/FrameSeries';
-import { CrudFormBox } from '@/Components/CrudFormBox/CrudFormBox';
-import { ApplicantProfileForm } from '@/Components/ApplicantProfileForm/ApplicantProfileForm';
-import { EmployerProfileForm } from '@/Components/EmployerProfileForm/EmployerProfileForm';
-import { NotFoundError } from '@/modules/Router/Router';
-import USER_TYPE from '@/modules/UserSession/UserType';
-import { ProfileMinicard } from '@/Components/ProfileMinicard/ProfileMinicard';
-import { EmployerVacancyList } from '@/Components/Lists/EmployerVacancyList/EmployerVacancyList';
-import { ApplicantCvList } from '@/Components/Lists/ApplicantCvList/ApplicantCvList';
-
-export const PROFILE_PAGE_PARAMS = {
-  USER_ID: 'id',
-  USER_TYPE: 'userType',
-  STARTING_FRAME: 'from',
-};
-
-export const PROFILE_STARTING_FRAMES = {
-  PROFILE: 'profile',
-  CVS: 'cvList',
-  PORTFOLIOS: 'portfolioList',
-  VACANCIES: 'vacancyList',
-};
-
-export class ProfilePage extends Page {
-  #isProfileOwner = false;
-  #userId;
-  #userType;
-  #startFrom;
-  constructor({ url }) {
-    super({
-      url,
-      modelClass: ProfilePageModel,
-      viewClass: ProfilePageView,
-      controllerClass: ProfilePageController,
-      viewParams: Header.getViewParams(),
-    });
-    if (url.pathname === resolveUrl('myProfile').pathname) {
-      state.userSession.goToHomePageIfNotLoggedIn();
-      this.#isProfileOwner = true;
-      this.#userId = state.userSession.userId;
-      this.#userType = state.userSession.userType;
-    } else {
-      this.#userId = +url.searchParams.get(PROFILE_PAGE_PARAMS.USER_ID);
-      this.#userType = url.searchParams.get(PROFILE_PAGE_PARAMS.USER_TYPE);
-      this.#isProfileOwner =
-        this.#userId === state.userSession.userId && this.#userType === state.userSession.userType;
-      if (!this.#userId || !this.#userType) {
-        throw new NotFoundError();
-      }
-    }
-    switch (url.searchParams.get(PROFILE_PAGE_PARAMS.STARTING_FRAME)) {
-      case PROFILE_STARTING_FRAMES.CVS: {
-        this.#startFrom =
-          this.#userType === USER_TYPE.APPLICANT
-            ? PROFILE_STARTING_FRAMES.CVS
-            : PROFILE_STARTING_FRAMES.PROFILE;
-        break;
-      }
-      case PROFILE_STARTING_FRAMES.PORTFOLIOS: {
-        this.#startFrom =
-          this.#userType === USER_TYPE.APPLICANT
-            ? PROFILE_STARTING_FRAMES.PORTFOLIOS
-            : PROFILE_STARTING_FRAMES.PROFILE;
-        break;
-      }
-      case PROFILE_STARTING_FRAMES.VACANCIES: {
-        this.#startFrom =
-          this.#userType === USER_TYPE.EMPLOYER
-            ? PROFILE_STARTING_FRAMES.VACANCIES
-            : PROFILE_STARTING_FRAMES.PROFILE;
-        break;
-      }
-      default: {
-        this.#startFrom = PROFILE_STARTING_FRAMES.PROFILE;
-      }
-    }
-  }
-
-  postRenderInit() {
-    this._header = new Header({
-      existingElement: this._view._header,
-    });
-    const frames =
-      this.#userType === USER_TYPE.APPLICANT
-        ? [
-            {
-              frameName: PROFILE_STARTING_FRAMES.PROFILE,
-              frameCaption: 'Профиль',
-              frameComponent: new CrudFormBox({
-                form: new ApplicantProfileForm({
-                  elementClass: 'profile-page__applicant-profile-form',
-                  userId: this.#userId,
-                }),
-                canUpdate: this.#isProfileOwner,
-                elementClass: 'profile-page__personal-data',
-              }),
-            },
-            // {
-            //   frameName: PROFILE_STARTING_FRAMES.PORTFOLIOS,
-            //   frameCaption: 'Портфолио',
-            //   frameComponent: new ApplicantPortfolioList({
-            //     userId: this.#userId,
-            //     isListOwner: this.#isProfileOwner,
-            //     elementClass: 'profile-page__portfolio-list',
-            //   }),
-            // },
-            {
-              frameName: PROFILE_STARTING_FRAMES.CVS,
-              frameCaption: 'Резюме',
-              frameComponent: new ApplicantCvList({
-                userId: this.#userId,
-                isListOwner: this.#isProfileOwner,
-                elementClass: 'profile-page__cv-list',
-              }),
-            },
-          ]
-        : [
-            {
-              frameName: PROFILE_STARTING_FRAMES.PROFILE,
-              frameCaption: 'Профиль',
-              frameComponent: new CrudFormBox({
-                form: new EmployerProfileForm({
-                  elementClass: 'profile-page__employer-profile-form',
-                  userId: this.#userId,
-                }),
-                canUpdate: this.#isProfileOwner,
-                elementClass: 'profile-page__personal-data',
-              }),
-            },
-            {
-              frameName: PROFILE_STARTING_FRAMES.VACANCIES,
-              frameCaption: 'Вакансии',
-              frameComponent: new EmployerVacancyList({
-                userId: this.#userId,
-                isListOwner: this.#isProfileOwner,
-                elementClass: 'profile-page__vacancies-list',
-              }),
-            },
-          ];
-    this._frameSeries = new FrameSeries({
-      frames,
-      existingElement: this._view._frameSeries,
-      startingFrame: this.#startFrom,
-    });
-    this._children.push(this._frameSeries);
-
-    this._profileMinicard = new ProfileMinicard({
-      userId: this.#userId,
-      userType: this.#userType,
-      existingElement: this._view.profileMinicard,
-    });
-    this._children.push(this._profileMinicard);
-  }
-}
diff --git a/src/Pages/ProfilePage/ProfilePageController.js b/src/Pages/ProfilePage/ProfilePageController.js
deleted file mode 100644
index b70f9cf..0000000
--- a/src/Pages/ProfilePage/ProfilePageController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PageController } from '@/modules/Page/Page';
-
-export const ProfilePageController = PageController;
diff --git a/src/Pages/ProfilePage/ProfilePageModel.js b/src/Pages/ProfilePage/ProfilePageModel.js
deleted file mode 100644
index d6fe193..0000000
--- a/src/Pages/ProfilePage/ProfilePageModel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PageModel } from '@/modules/Page/Page';
-
-export const ProfilePageModel = PageModel;
diff --git a/src/Pages/ProfilePage/ProfilePageView.js b/src/Pages/ProfilePage/ProfilePageView.js
deleted file mode 100644
index 45987a5..0000000
--- a/src/Pages/ProfilePage/ProfilePageView.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { PageView } from '@/modules/Page/Page';
-import ProfilePageHbs from './profile-page.hbs';
-import { ProfileMinicardView } from '@/Components/ProfileMinicard/ProfileMinicardView';
-import { zip } from '@common_utils/object_utils/zip';
-
-export class ProfilePageView extends PageView {
-  constructor(renderParams) {
-    super({
-      template: ProfilePageHbs,
-      renderParams: zip(renderParams, ProfileMinicardView.generateRenderParams()),
-    });
-    this._header = this._html.querySelector('.header');
-    this._frameSeries = this._html.querySelector('.profile-page__frame-series');
-    this._profileMinicard = this._html.querySelector('.profile-page__profile-minicard');
-  }
-
-  get profileMinicard() {
-    return this._profileMinicard;
-  }
-}
diff --git a/src/Pages/ProfilePage/profile-page.hbs b/src/Pages/ProfilePage/profile-page.hbs
deleted file mode 100644
index e2d527a..0000000
--- a/src/Pages/ProfilePage/profile-page.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<div>
-  {{> ../../Components/Header/header.hbs}}
-  <div class="profile-page">
-    <div class="profile-page__left-column">
-    {{> ../../Components/ProfileMinicard/profile-minicard.hbs elementClass="profile-page__profile-minicard"}}
-    </div>
-    {{> ../../Components/FrameSeries/frame-series.hbs elementClass="profile-page__frame-series"}}
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/application/action_creators/vacancy_action_creators.ts b/src/application/action_creators/vacancy_action_creators.ts
new file mode 100644
index 0000000..085029b
--- /dev/null
+++ b/src/application/action_creators/vacancy_action_creators.ts
@@ -0,0 +1,128 @@
+import { storeManager } from '@/modules/store_manager/store_manager';
+import { backendStore } from '../stores/backend_store/backend_store';
+import {
+  ClearAction,
+  UpdateAction,
+  UpdateActionPayload,
+  VacancyActions,
+} from '../stores/vacancy_store/vacancy_actions';
+import { makeVacancyFromApi } from '../models/vacancy';
+import {
+  applyToVacancy,
+  deleteVacancy,
+  getVacancy,
+  getVacancyAppliers,
+  getVacancyApplyStatus,
+  resetApplyToVacancy,
+} from '@/modules/api/api';
+import { assertIfError } from '@/modules/common_utils/asserts/asserts';
+import { Application } from '@/modules/api/src/responses/application';
+import { makeApplicantFromApi } from '../models/applicant';
+import { userStore } from '../stores/user_store/user_store';
+import { UserType } from '../models/user-type';
+import { Applicant } from '../models/applicant';
+
+async function loadVacancy(id: number) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  clearVacancy();
+  try {
+    const loadedVacancy = makeVacancyFromApi(await getVacancy(backendOrigin, id));
+    const userData = userStore.getData();
+    let loadedAppliers: Applicant[];
+    if (userData.userType === UserType.Employer && userData.id === loadedVacancy.employerId) {
+      const rawAppliers = await getVacancyAppliers(backendOrigin, id);
+      loadedAppliers = rawAppliers.subscribers.map((apiApplicant) =>
+        makeApplicantFromApi(apiApplicant),
+      );
+    }
+    storeManager.dispatch({
+      type: VacancyActions.Update,
+      payload: {
+        vacancy: loadedVacancy,
+        loaded: true,
+        appliers: loadedAppliers,
+      } as UpdateActionPayload,
+    } as UpdateAction);
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+    storeManager.dispatch({
+      type: VacancyActions.Update,
+      payload: {
+        vacancy: null,
+        loaded: true,
+      } as UpdateActionPayload,
+    } as UpdateAction);
+  }
+}
+
+async function removeVacancy(id: number) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  try {
+    await deleteVacancy(backendOrigin, id);
+    clearVacancy();
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+  }
+}
+
+async function loadApplyStatus(vacancyId: number) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  try {
+    const application = (await getVacancyApplyStatus(backendOrigin, vacancyId)) as Application;
+    if (application.isSubscribed) {
+      storeManager.dispatch({
+        type: VacancyActions.Apply,
+      });
+    } else {
+      storeManager.dispatch({
+        type: VacancyActions.ResetApply,
+      });
+    }
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+  }
+}
+
+async function applyVacancy(vacancyId: number) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  try {
+    await applyToVacancy(backendOrigin, vacancyId);
+    storeManager.dispatch({
+      type: VacancyActions.Apply,
+    });
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+  }
+}
+
+async function removeApplyVacancy(vacancyId: number) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  try {
+    await resetApplyToVacancy(backendOrigin, vacancyId);
+    storeManager.dispatch({
+      type: VacancyActions.ResetApply,
+    });
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+  }
+}
+
+function clearVacancy() {
+  storeManager.dispatch({
+    type: VacancyActions.Clear,
+  } as ClearAction);
+}
+
+export const vacancyActionCreators = {
+  loadVacancy,
+  loadApplyStatus,
+  applyVacancy,
+  removeApplyVacancy,
+  clearVacancy,
+  removeVacancy,
+};
diff --git a/src/application/components/appliers_list/appliers_list.scss b/src/application/components/appliers_list/appliers_list.scss
new file mode 100644
index 0000000..0e603d4
--- /dev/null
+++ b/src/application/components/appliers_list/appliers_list.scss
@@ -0,0 +1,23 @@
+.appliers-list {
+  &__header {
+    margin: 0;
+    padding: 0 var(--col-margin);
+    font-size: var(--text-size-9);
+  }
+  &__divider {
+    margin: 12px 0px;
+    width: 100%;
+    height: 1px;
+    opacity: 0.3;
+    background-color: var(--color-main-100);
+  }
+
+  &__list {
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  &__list-item {
+    color: var(--color-main-200);
+  }
+}
diff --git a/src/application/components/appliers_list/appliers_list.tsx b/src/application/components/appliers_list/appliers_list.tsx
new file mode 100644
index 0000000..978b553
--- /dev/null
+++ b/src/application/components/appliers_list/appliers_list.tsx
@@ -0,0 +1,38 @@
+import './appliers_list.scss';
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { Applicant } from '@/application/models/applicant';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
+
+export interface AppliersListProps {
+  elementClass: string;
+  appliers: Applicant[];
+}
+
+export class AppliersList extends Component {
+  constructor({ elementClass, appliers = [] }: AppliersListProps) {
+    super({ elementClass, appliers });
+  }
+  render() {
+    const appliersList = (this.props.appliers as Applicant[]).map((applier) => {
+      return (
+        <li key={applier.id}>
+          <a
+            key={applier.id}
+            className="appliers-list__list-item"
+            href={`${resolveUrl('profile', null)}?id=${applier.id}&userType=applicant`}
+          >
+            {`${applier.firstName} ${applier.secondName}`}
+          </a>
+        </li>
+      );
+    });
+    return (
+      <div className={`${this.props.elementClass} appliers-list`}>
+        <h1 className="appliers-list__header">Откликнулись</h1>
+        <div className="appliers-list__divider"></div>
+        <ol className="appliers-list__list">{...appliersList}</ol>
+      </div>
+    );
+  }
+}
diff --git a/src/application/components/item_list/item_list_child/item_list_child.tsx b/src/application/components/item_list/item_list_child/item_list_child.tsx
index d6483f1..dee1661 100644
--- a/src/application/components/item_list/item_list_child/item_list_child.tsx
+++ b/src/application/components/item_list/item_list_child/item_list_child.tsx
@@ -36,13 +36,13 @@ export class ItemListChild extends Component {
             >
               Изменить
             </a>
-            <button
+            {/* <button
               type="button"
               class="item-list-child__button-remove button button_danger-secondary"
               onClick={this.props.handleDelete}
             >
               Удалить
-            </button>
+            </button> */}
           </div>
         )}
       </div>
diff --git a/src/application/components/vacancy_article/vacancy_article.scss b/src/application/components/vacancy_article/vacancy_article.scss
new file mode 100644
index 0000000..104c02a
--- /dev/null
+++ b/src/application/components/vacancy_article/vacancy_article.scss
@@ -0,0 +1,97 @@
+.vacancy-article {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  &__header-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    padding: var(--col-margin);
+  }
+
+  &__company-picture {
+    width: 128px;
+    height: 128px;
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    margin-left: 20px;
+  }
+
+  &__description {
+    padding: var(--col-margin) var(--col-margin) 0 var(--col-margin);
+    font-size: var(--text-size-5);
+    line-height: 1.5;
+    color: var(--color-main-100);
+  }
+
+  &__footer {
+    margin-top: 10px;
+  }
+
+  &__apply-button {
+    margin-right: 10px;
+    box-shadow: none;
+    padding: 10px 20px;
+  }
+
+  &__reset-apply-button {
+    margin-right: 10px;
+    box-shadow: none;
+    padding: 10px 20px;
+  }
+
+  &__created-at {
+    color: var(--color-main-100);
+    opacity: 0.7;
+    text-decoration: none;
+    text-transform: lowercase;
+  }
+
+  &_theme-dark {
+    background-color: var(--color-background-800);
+    color: var(--color-main-100);
+  }
+
+  &__divider {
+    display: inline-block;
+    background-color: var(--color-background-100);
+    opacity: 0.3;
+    height: 1px;
+    width: 100%;
+  }
+
+  &__button-container {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    padding: var(--col-margin);
+    justify-content: start;
+  }
+}
+
+.vacancy-summary {
+  display: flex;
+  flex-direction: column;
+  color: var(--color-main-100);
+  &__header {
+    font-size: var(--text-size-10);
+    text-decoration: none;
+    margin-top: 0px;
+    margin-bottom: 8px;
+  }
+
+  &__company-name {
+    font-size: var(--text-size-5);
+    margin-bottom: 8px;
+  }
+
+  &__salary {
+    font-size: var(--text-size-4);
+    margin-right: 20px;
+  }
+}
diff --git a/src/application/components/vacancy_article/vacancy_article.tsx b/src/application/components/vacancy_article/vacancy_article.tsx
new file mode 100644
index 0000000..6147aaa
--- /dev/null
+++ b/src/application/components/vacancy_article/vacancy_article.tsx
@@ -0,0 +1,128 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import './vacancy_article.scss';
+import { Vacancy } from '@/application/models/vacancy';
+import { UserType } from '@/application/models/user-type';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
+import { vacancyActionCreators } from '@/application/action_creators/vacancy_action_creators';
+import { routerActionCreators } from '@/application/action_creators/router_action_creators';
+import {
+  ProfilePageParams,
+  ProfilePageStartingFrames,
+} from '@/application/pages/profile_page/profile_page';
+import { profileActionCreators } from '@/application/action_creators/profile_action_creators';
+
+export interface VacancyArticleProps {
+  elementClass: string;
+  vacancy: Vacancy;
+  userType: UserType;
+  isOwner: boolean;
+  isApplied: boolean;
+}
+
+export class VacancyArticle extends Component {
+  constructor({ elementClass, vacancy, userType, isOwner, isApplied }: VacancyArticleProps) {
+    super({ elementClass, vacancy, userType, isOwner, isApplied });
+  }
+
+  private handleDelete = async (ev: Event) => {
+    ev.preventDefault();
+    const vacancy = this.props.vacancy as Vacancy;
+    try {
+      await vacancyActionCreators.removeVacancy(vacancy.id);
+      await profileActionCreators.loadProfile(this.props.userType as UserType, vacancy.employerId);
+      routerActionCreators.navigate(
+        resolveUrl('myProfile', {
+          [ProfilePageParams.StartFrame]: ProfilePageStartingFrames.VacancyList,
+        }),
+      );
+    } catch {}
+  };
+
+  private handleApply = async (ev: Event) => {
+    ev.preventDefault();
+    vacancyActionCreators.applyVacancy((this.props.vacancy as Vacancy).id);
+  };
+
+  private handleRemoveApply = async (ev: Event) => {
+    ev.preventDefault();
+    vacancyActionCreators.removeApplyVacancy((this.props.vacancy as Vacancy).id);
+  };
+
+  render() {
+    const vacancy = this.props.vacancy as Vacancy;
+    return (
+      <article className={`${this.props.elementClass} vacancy-article`}>
+        <div className="vacancy-article__header-container">
+          <img className="vacancy-article__company-picture" src={vacancy.avatar} />
+          <div className="vacancy-article__header vacancy-summary">
+            <h1 className="vacancy-summary__header">{vacancy.position}</h1>
+            <div className="vacancy-summary__company-name">{vacancy.companyName}</div>
+            <div key="span-box">
+              <span className="vacancy-summary__salary">
+                {vacancy.salary ? vacancy.salary.toString() + ' ₽' : ''}
+              </span>
+              <span className="vacancy-summary__work-type pill pill_main">{vacancy.workType}</span>
+            </div>
+          </div>
+        </div>
+        <div className="vacancy-article__divider"></div>
+        <div className="vacancy-article__description">{vacancy.description}</div>
+        {this.props.userType === UserType.Applicant && (
+          <div className="vacancy-article__button-container">
+            {this.props.isApplied ? (
+              <button
+                type="button"
+                className="vacancy-article__reset-apply-button button button_danger-primary"
+                onClick={(ev: Event) => this.handleRemoveApply(ev)}
+              >
+                Отменить отклик
+              </button>
+            ) : (
+              <button
+                type="button"
+                className="vacancy-article__apply-button button button_main-primary"
+                onClick={(ev: Event) => this.handleApply(ev)}
+              >
+                Откликнуться
+              </button>
+            )}
+
+            <a
+              className="vacancy-article__all-vacancies-button button button_main-secondary"
+              href={
+                resolveUrl('profile', null) +
+                `?id=${vacancy.employerId}&userType=employer&from=vacancyList`
+              }
+            >
+              Все вакансии
+            </a>
+            <div className="vacancy-article__created-at">
+              {`последнее обновление: ${vacancy.createdAt.toLocaleString('ru-RU')}`}
+            </div>
+          </div>
+        )}
+        {this.props.userType === UserType.Employer && this.props.isOwner && (
+          <div className="vacancy-article__button-container">
+            <a
+              className="vacancy-article__edit-button button button_main-primary"
+              href={resolveUrl('editVacancy', null) + `?vacancyId=${vacancy.id}`}
+            >
+              Изменить
+            </a>
+            <button
+              type="button"
+              className="vacancy-article__delete-button button button_danger-secondary"
+              onClick={(ev: Event) => this.handleDelete(ev)}
+            >
+              Удалить
+            </button>
+            <div className="vacancy-article__created-at">
+              {`последнее обновление: ${vacancy.createdAt.toLocaleString('ru-RU')}`}
+            </div>
+          </div>
+        )}
+      </article>
+    );
+  }
+}
diff --git a/src/application/pages/profile_page/profile_page.tsx b/src/application/pages/profile_page/profile_page.tsx
index bbab141..d655b66 100644
--- a/src/application/pages/profile_page/profile_page.tsx
+++ b/src/application/pages/profile_page/profile_page.tsx
@@ -66,10 +66,10 @@ export class ProfilePage extends Component {
   }
 
   parseUrl() {
-    if (this.lastUrl === this.props.url) {
+    const url = this.props.url as URL;
+    if (this.lastUrl === url) {
       return;
     }
-    const url = this.props.url as URL;
     const userData = userStore.getData();
     if (url.pathname === resolveUrl('myProfile', null).pathname) {
       this.userId = userData.id;
diff --git a/src/application/pages/vacancy_page/vacancy_page.scss b/src/application/pages/vacancy_page/vacancy_page.scss
new file mode 100644
index 0000000..b1ec27f
--- /dev/null
+++ b/src/application/pages/vacancy_page/vacancy_page.scss
@@ -0,0 +1,44 @@
+@use '@/scss/variables' as v;
+
+.vacancy-page {
+  display: flex;
+  flex-direction: column;
+  align-items: column-reverse;
+  width: var(--12-col);
+  margin-top: var(--col-margin);
+  gap: var(--col-margin);
+  align-self: center;
+  align-items: start;
+
+  &__side-column {
+    width: var(--3-col);
+  }
+
+  &__profile-minicard {
+    width: var(--3-col);
+    background-color: var(--color-background-800);
+    border-radius: var(--radius-l);
+    padding: 16px;
+    color: var(--color-main-100);
+  }
+
+  &__vacancy-container {
+    width: var(--9-col);
+    border-radius: var(--radius-l);
+    background-color: var(--color-background-800);
+  }
+  &__appliers-list {
+    border-radius: var(--radius-l);
+    padding: 24px 0px;
+    background-color: var(--color-background-800);
+    color: var(--color-main-100);
+    font-size: var(--text-size-5);
+  }
+}
+
+@media screen and (min-width: v.$mobile-breakpoint) {
+  .vacancy-page {
+    display: flex;
+    flex-direction: row;
+  }
+}
diff --git a/src/application/pages/vacancy_page/vacancy_page.tsx b/src/application/pages/vacancy_page/vacancy_page.tsx
new file mode 100644
index 0000000..b85afad
--- /dev/null
+++ b/src/application/pages/vacancy_page/vacancy_page.tsx
@@ -0,0 +1,122 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { PageContainer } from '@/application/components/page_container/page_container';
+import { ProfileMinicard } from '@/application/components/profile_minicard/profile_minicard';
+import { userStore } from '@/application/stores/user_store/user_store';
+import { UserType } from '@/application/models/user-type';
+import { VacancyArticle } from '@/application/components/vacancy_article/vacancy_article';
+import { vacancyStore } from '@/application/stores/vacancy_store/vacancy_store';
+import { LoadingScreen } from '@/application/components/loading_screen/loading_screen';
+import { NotFoundPage } from '../not_found_page/not_found_page';
+import { vacancyActionCreators } from '@/application/action_creators/vacancy_action_creators';
+import { profileStore } from '@/application/stores/profile_store/profile_store';
+import { profileActionCreators } from '@/application/action_creators/profile_action_creators';
+import './vacancy_page.scss';
+import { AppliersList } from '@application/components/appliers_list/appliers_list';
+
+export enum VacancyPageParams {
+  VacancyId = 'id',
+}
+
+export class VacancyPage extends Component {
+  private lastUrl: URL;
+  private failedToLoadVacancy: boolean = false;
+  private invokedLoadingVacancy: boolean = false;
+  private invokedLoadingProfile: boolean = false;
+  constructor({ url }: { url: URL }) {
+    super({ url });
+    this.parseUrl();
+  }
+
+  didUpdate() {
+    super.didUpdate();
+    this.parseUrl();
+  }
+
+  private parseUrl() {
+    const url = this.props.url as URL;
+    if (this.lastUrl === url) {
+      return;
+    }
+    const vacancyId = Number(url.searchParams.get(VacancyPageParams.VacancyId));
+    if (!vacancyId) {
+      this.failedToLoadVacancy = true;
+      return;
+    }
+    const vacancyData = vacancyStore.getData();
+    const vacancySuccessfullyLoaded =
+      vacancyData.loadedVacancy && vacancyData.vacancy && vacancyData.vacancy.id === vacancyId;
+    if (!vacancySuccessfullyLoaded && !this.invokedLoadingVacancy) {
+      vacancyActionCreators.loadVacancy(vacancyId).then(() => {
+        const vacancy = vacancyStore.getData().vacancy;
+        this.invokedLoadingProfile = true;
+        if (!vacancy) {
+          return;
+        }
+        profileActionCreators.loadProfile(UserType.Employer, vacancy.employerId);
+      });
+      if (userStore.getData().userType === UserType.Applicant) {
+        vacancyActionCreators.loadApplyStatus(vacancyId);
+      }
+      this.invokedLoadingVacancy = true;
+    }
+    this.lastUrl = this.props.url as URL;
+  }
+
+  render() {
+    const vacancyData = vacancyStore.getData();
+    const profileData = profileStore.getData();
+    if (!vacancyData.loadedVacancy || !profileData.profileLoaded) {
+      return (
+        <PageContainer key="page-container" elementClass="vacancy-page__page-container">
+          <LoadingScreen key="loading-screen" />
+        </PageContainer>
+      );
+    }
+    if (this.failedToLoadVacancy || !vacancyData.vacancy || !profileData.userProfile) {
+      return <NotFoundPage url={this.props.url} key="not-found-page" />;
+    }
+    this.invokedLoadingVacancy = false;
+    this.invokedLoadingProfile = false;
+    const vacancy = vacancyData.vacancy;
+    const appliers = vacancyData.appliers ?? false;
+    const userData = userStore.getData();
+    const employer = profileStore.getData().userProfile;
+    const userType = userData.userType;
+    const isOwner = userType === UserType.Employer && vacancy.employerId === userData.id;
+    return (
+      <PageContainer key="page-container" elementClass="vacancy-page__page-container">
+        <div className="vacancy-page" key="vacancy-page">
+          <main className="vacancy-page__vacancy-container">
+            <VacancyArticle
+              key="vacancy-article"
+              elementClass="vacancy-page__vacancy-article"
+              vacancy={vacancy}
+              userType={userType}
+              isOwner={isOwner}
+              isApplied={vacancyData.applied}
+            />
+          </main>
+          <div className="vacancy-page__side-column">
+            {userType !== UserType.Employer && (
+              <ProfileMinicard
+                key="profile-minicard"
+                elementClass="vacancy-page__profile-minicard"
+                fullName={`${employer.firstName} ${employer.secondName}`}
+                city={employer.city}
+                contacts={employer.contacts}
+              />
+            )}
+            {userType === UserType.Employer && isOwner && (
+              <AppliersList
+                key="appliers-list"
+                elementClass="vacancy-page__appliers-list"
+                appliers={appliers}
+              />
+            )}
+          </div>
+        </div>
+      </PageContainer>
+    );
+  }
+}
diff --git a/src/application/stores/vacancy_store/vacancy_actions.ts b/src/application/stores/vacancy_store/vacancy_actions.ts
new file mode 100644
index 0000000..dd3bb73
--- /dev/null
+++ b/src/application/stores/vacancy_store/vacancy_actions.ts
@@ -0,0 +1,34 @@
+/** @fileoverview This file contains actions for vacancy store */
+
+import { Vacancy } from '@/application/models/vacancy';
+import { Applicant } from '@/application/models/applicant';
+
+export enum VacancyActions {
+  Apply = 'vacancyApply',
+  ResetApply = 'vacancyResetApply',
+  Update = 'vacancyUpdate',
+  Clear = 'vacancyClear',
+}
+
+export interface UpdateActionPayload {
+  vacancy: Vacancy;
+  loaded: boolean;
+  appliers: Array<Applicant>;
+}
+
+export interface UpdateAction {
+  type: VacancyActions.Update;
+  payload: UpdateActionPayload;
+}
+
+export interface ApplyAction {
+  type: VacancyActions.Apply;
+}
+
+export interface ResetApplyAction {
+  type: VacancyActions.ResetApply;
+}
+
+export interface ClearAction {
+  type: VacancyActions.Clear;
+}
diff --git a/src/application/stores/vacancy_store/vacancy_store.ts b/src/application/stores/vacancy_store/vacancy_store.ts
new file mode 100644
index 0000000..004f8df
--- /dev/null
+++ b/src/application/stores/vacancy_store/vacancy_store.ts
@@ -0,0 +1,45 @@
+import { Vacancy } from '@/application/models/vacancy';
+import { Action } from '@/modules/store_manager/action';
+import { Store } from '@/modules/store_manager/store';
+import { UpdateActionPayload, VacancyActions } from './vacancy_actions';
+import { storeManager } from '@/modules/store_manager/store_manager';
+import { Applicant } from '@/application/models/applicant';
+
+export interface VacancyData {
+  vacancy?: Vacancy;
+  loadedVacancy?: boolean;
+  applied?: boolean;
+  appliers?: Array<Applicant>;
+}
+
+function vacancyStoreReducer(state: VacancyData, action: Action) {
+  switch (action.type) {
+    case VacancyActions.Update: {
+      const payload = action.payload as UpdateActionPayload;
+      state.vacancy = payload.vacancy;
+      state.loadedVacancy = payload.loaded;
+      state.appliers = payload.appliers;
+      return state;
+    }
+    case VacancyActions.Apply: {
+      if (state.vacancy) {
+        state.applied = true;
+      } else {
+        state.applied = false;
+      }
+      return state;
+    }
+    case VacancyActions.ResetApply: {
+      state.applied = false;
+      return state;
+    }
+    case VacancyActions.Clear: {
+      return {};
+    }
+  }
+  return state;
+}
+
+export const vacancyStore = new Store<VacancyData>({}, vacancyStoreReducer);
+
+storeManager.addStore(vacancyStore);
diff --git a/src/index.tsx b/src/index.tsx
index 3c9b442..1096496 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -17,6 +17,7 @@ import { VirtualDomRoot } from '@/modules/vdom/virtual_dom_root';
 import { userActionCreators } from '@/application/action_creators/user_action_creators';
 import { RegistrationPage } from '@/application/pages/registration_page/registration_page';
 import { ProfilePage } from '@/application/pages/profile_page/profile_page';
+import { VacancyPage } from './application/pages/vacancy_page/vacancy_page';
 
 // eslint-disable-next-line
 const notificationBox = new NotificationBox({
@@ -39,6 +40,7 @@ routerActionCreators.addRoute(resolveUrl('login', null), LoginPage);
 routerActionCreators.addRoute(resolveUrl('register', null), RegistrationPage);
 routerActionCreators.addRoute(resolveUrl('myProfile', null), ProfilePage);
 routerActionCreators.addRoute(resolveUrl('profile', null), ProfilePage);
+routerActionCreators.addRoute(resolveUrl('vacancy', null), VacancyPage);
 routerActionCreators.startRouting(new URL(location.href));
 
 userActionCreators.isAuthorized().finally(() => {
diff --git a/src/modules/api/src/handlers/vacancy/appliers.ts b/src/modules/api/src/handlers/vacancy/appliers.ts
index 6ea1f19..14c6e12 100644
--- a/src/modules/api/src/handlers/vacancy/appliers.ts
+++ b/src/modules/api/src/handlers/vacancy/appliers.ts
@@ -1,7 +1,7 @@
 import { fetchCors, HttpMethod } from '@api/src/handlers/utils/fetch_with_cors';
 import { unpackJsonResponseBody } from '@api/src/handlers/utils/unpack_body';
-import type { Applicant } from '@api/src/responses/applicant';
 import type { Application } from '@api/src/responses/application';
+import { AppliersListResponse } from '../../responses/appliers';
 
 /**
  * Get all applicants who applied to a vacancy given its id.
@@ -9,12 +9,15 @@ import type { Application } from '@api/src/responses/application';
  * @param id - The id of the vacancy.
  * @returns A promise that resolves to an array of applicants who applied to that vacancy.
  */
-export async function getVacancyAppliers(apiOrigin: URL, id: number): Promise<Array<Applicant>> {
+export async function getVacancyAppliers(
+  apiOrigin: URL,
+  id: number,
+): Promise<AppliersListResponse> {
   const response = await fetchCors(new URL(apiOrigin.href + `vacancy/${id}/subscribers`), {
     method: HttpMethod.Get,
     credentials: 'include',
   });
-  return (await unpackJsonResponseBody(response)) as Array<Applicant>;
+  return (await unpackJsonResponseBody(response)) as AppliersListResponse;
 }
 
 /**
diff --git a/src/modules/api/src/responses/appliers.ts b/src/modules/api/src/responses/appliers.ts
new file mode 100644
index 0000000..2a51989
--- /dev/null
+++ b/src/modules/api/src/responses/appliers.ts
@@ -0,0 +1,6 @@
+import { Applicant } from './applicant';
+/** Appliers list response */
+export interface AppliersListResponse {
+  subscribers: Array<Applicant>;
+  vacancyId: number;
+}
diff --git a/src/scss/_vacancy.scss b/src/scss/_vacancy.scss
index ed619c0..29f84fe 100644
--- a/src/scss/_vacancy.scss
+++ b/src/scss/_vacancy.scss
@@ -1,159 +1,3 @@
-.vacancy-page {
-  display: grid;
-  align-items: start;
-  margin: auto;
-  width: 1280px;
-  padding-top: 32px;
-  grid-template-columns: 1fr 3fr;
-  &__profile-minicard {
-    background-color: var(--color-background-900);
-    border-radius: 25px;
-    padding: 16px 36px;
-    color: var(--color-main-100);
-  }
-
-  &__vacancy-container {
-    margin-left: 32px;
-    border-radius: 25px;
-    background-color: var(--color-background-900);
-  }
-  &__appliers-list {
-    border-radius: 25px;
-    padding: 24px 0px;
-    background-color: var(--color-background-900);
-    color: var(--color-main-100);
-    font-size: var(--text-size-5);
-  }
-}
-
-/* Vacancy article */
-
-.vacancy-article {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  &__header-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: start;
-    align-items: center;
-    padding: 32px;
-  }
-
-  &__company-picture {
-    width: 128px;
-    height: 128px;
-  }
-
-  &__header {
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-    margin-left: 20px;
-  }
-
-  &__description {
-    padding: 32px 32px 0px 32px;
-    font-size: var(--text-size-5);
-    line-height: 1.5;
-    color: var(--color-main-100);
-  }
-
-  &__footer {
-    margin-top: 10px;
-  }
-
-  &__apply-button {
-    margin-right: 10px;
-    box-shadow: none;
-    padding: 10px 20px;
-  }
-
-  &__reset-apply-button {
-    margin-right: 10px;
-    box-shadow: none;
-    padding: 10px 20px;
-  }
-
-  &__created-at {
-    color: var(--color-main-100);
-    opacity: 0.7;
-    text-decoration: none;
-    text-transform: lowercase;
-  }
-
-  &_theme-dark {
-    background-color: var(--color-background-800);
-    color: var(--color-main-100);
-  }
-
-  &__divider {
-    display: inline-block;
-    background-color: var(--color-background-100);
-    opacity: 0.3;
-    height: 1px;
-    width: 100%;
-  }
-
-  &__button-container {
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-    padding: 32px 32px;
-    justify-content: start;
-  }
-}
-
-/* vacancy-summary component */
-
-.vacancy-summary {
-  display: flex;
-  flex-direction: column;
-  color: var(--color-main-100);
-  &__header {
-    font-size: var(--text-size-10);
-    text-decoration: none;
-    margin-top: 0px;
-    margin-bottom: 8px;
-  }
-
-  &__company-name {
-    font-size: var(--text-size-5);
-    margin-bottom: 8px;
-  }
-
-  &__salary {
-    font-size: var(--text-size-4);
-    margin-right: 20px;
-  }
-}
-
-/* Appliers list */
-
-.appliers-list {
-  &__header {
-    margin: 0;
-    padding: 0 24px;
-    font-size: var(--text-size-9);
-  }
-  &__divider {
-    margin: 12px 0px;
-    width: 100%;
-    height: 1px;
-    opacity: 0.3;
-    background-color: var(--color-main-100);
-  }
-
-  &__list {
-    margin: 0;
-    line-height: 1.5;
-  }
-
-  &__list-item {
-    color: var(--color-main-200);
-  }
-}
-
 /* Vacancy Edit Page */
 
 .vacancy-page-edit {
diff --git a/src/server/server.mjs b/src/server/server.mjs
deleted file mode 100644
index 56735b6..0000000
--- a/src/server/server.mjs
+++ /dev/null
@@ -1,74 +0,0 @@
-import { createServer } from 'node:http';
-import { readFile } from 'node:fs';
-
-const hostname = '0.0.0.0';
-const port = '8000';
-
-const routingTemplates = {
-  '.js$': '.',
-  '(.css|.html|.png|.svg)$': './src/',
-  'index.css$': './src',
-  '.ttf$': '.',
-  'favicon.ico': './src/public/img',
-};
-
-const customContentTypes = {
-  '.js$': 'text/javascript',
-  '.svg$': 'image/svg+xml',
-};
-
-const matchTemplates = (url) => {
-  const matchedUrl = Object.keys(routingTemplates).find((urlRegExp) => RegExp(urlRegExp).test(url));
-  if (!matchedUrl) {
-    return '';
-  }
-  return routingTemplates[matchedUrl] + url;
-};
-
-const printError = (statusCode, statusDescription) => {
-  console.log(`${statusDescription} (${statusCode})`);
-};
-
-const server = createServer((req, res) => {
-  const now = new Date();
-  console.log(
-    '%s:%s:%s | %s %s',
-    now.getHours().toString().padStart(2, '0'),
-    now.getMinutes().toString().padStart(2, '0'),
-    now.getSeconds().toString().padStart(2, '0'),
-    req.method,
-    req.url,
-  );
-
-  if (req.method !== 'GET') {
-    res.statusCode = 405;
-    printError(405, 'METHOD NOT ALLOWED');
-    res.end();
-    return;
-  }
-
-  const fileName = matchTemplates(req.url) || 'src/index.html';
-
-  readFile(fileName, (err, data) => {
-    if (err === null) {
-      res.statusCode = 200;
-      res.setHeader('charset', 'utf8');
-      res.setHeader('lang', 'ru');
-      const matchedContentType = Object.keys(customContentTypes).find((rExp) =>
-        RegExp(rExp).test(fileName),
-      );
-      if (matchedContentType) {
-        res.setHeader('Content-Type', customContentTypes[matchedContentType]);
-      }
-      res.write(data);
-      res.end();
-    } else {
-      printError(404, 'NOT FOUND');
-      res.statusCode = 404;
-      res.end();
-    }
-  });
-});
-
-server.listen(port, hostname);
-console.log(`Started dev server on ${hostname}:${port}`);

From f27227a0a639f5705f6e35ef6bb3408209a8c1f7 Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Mon, 16 Dec 2024 06:13:53 +0300
Subject: [PATCH 13/17] feature: cv edit

---
 src/Components/AlertWindow/AlertWindow.js     |  14 -
 src/Components/AlertWindow/AlertWindowView.js |  17 --
 src/Components/AlertWindow/alert-window.hbs   |   4 -
 .../ButtonContainer/ButtonContainer.js        |  14 -
 .../ButtonContainer/ButtonContainerView.js    |  42 ---
 .../cv-article__button-container.hbs          |  12 -
 src/Components/CvArticle/CvArticle.js         |  38 ---
 .../CvArticle/CvArticleController.js          |  46 ----
 src/Components/CvArticle/CvArticleModel.js    |  44 ----
 src/Components/CvArticle/CvArticleView.js     |  46 ----
 src/Components/CvArticle/cv-article.hbs       |  14 -
 src/Components/CvForm/CvForm.js               |  59 -----
 src/Components/CvForm/CvFormController.js     |  84 ------
 src/Components/CvForm/CvFormModel.js          |  59 -----
 src/Components/CvForm/CvFormView.js           |  48 ----
 src/Components/CvForm/cv-form.hbs             |  19 --
 src/Pages/CvEditPage/CvEditPage.js            |  60 -----
 src/Pages/CvEditPage/CvEditPageController.js  |  11 -
 src/Pages/CvEditPage/CvEditPageModel.js       |   3 -
 src/Pages/CvEditPage/CvEditPageView.js        |  18 --
 src/Pages/CvEditPage/cv-page-edit.hbs         |   8 -
 src/Pages/CvPage/CvPage.js                    |  61 -----
 src/Pages/CvPage/CvPageController.js          |  11 -
 src/Pages/CvPage/CvPageModel.js               |   3 -
 src/Pages/CvPage/CvPageView.js                |  23 --
 src/Pages/CvPage/cv-page.hbs                  |  10 -
 src/Pages/VacancyPage/VacancyPage.js          |  76 ------
 .../VacancyPage/VacancyPageController.js      |  11 -
 src/Pages/VacancyPage/VacancyPageModel.js     |   3 -
 src/Pages/VacancyPage/VacancyPageView.js      |  30 ---
 src/Pages/VacancyPage/vacancy-page.hbs        |  12 -
 .../action_creators/cv_action_creators.ts     | 181 +++++++++++++
 .../profile_action_creators.ts                |   7 +-
 .../action_creators/user_action_creators.ts   |  62 ++---
 .../vacancy_action_creators.ts                |   9 +-
 .../components/alert_window/alert_window.scss |  17 ++
 .../components/alert_window/alert_window.tsx  |  25 ++
 .../components/cv_article/cv_article.scss}    |  90 -------
 .../components/cv_article/cv_article.tsx      | 100 +++++++
 src/application/components/input/input.tsx    |  36 ++-
 .../vacancy_article/vacancy_article.tsx       |   2 +-
 .../pages/cv_edit_page/cv_edit_page.scss      |  48 ++++
 .../pages/cv_edit_page/cv_edit_page.tsx       | 248 ++++++++++++++++++
 src/application/pages/cv_page/cv_page.scss    |  32 +++
 src/application/pages/cv_page/cv_page.tsx     | 108 ++++++++
 .../pages/vacancies_page/vacancies_page.tsx   |   8 +-
 src/application/stores/cv_store/cv_actions.ts |  29 ++
 src/application/stores/cv_store/cv_store.ts   |  50 ++++
 .../stores/user_store/user_actions.ts         |   1 +
 .../stores/user_store/user_store.ts           |   2 +
 src/application/validators/validators.ts      |  15 +-
 src/index.tsx                                 |  26 +-
 src/modules/api/src/errors/errors.ts          |   8 +
 .../api/src/handlers/applicant/profile.ts     |  15 +-
 .../api/src/handlers/auth/is_authenticated.ts |   9 +-
 src/modules/api/src/handlers/cv/cv.ts         |  44 ++--
 .../api/src/handlers/employer/profile.ts      |  15 +-
 .../api/src/handlers/utils/fetch_with_cors.ts |   3 +
 .../api/src/handlers/utils/unpack_body.ts     |  13 +-
 .../api/src/handlers/vacancy/appliers.ts      |  36 ++-
 .../api/src/handlers/vacancy/vacancy.ts       |  44 ++--
 src/modules/api/src/responses/short_user.ts   |   4 +
 src/scss/_common.scss                         |  24 --
 src/scss/index.scss                           |   1 -
 64 files changed, 1074 insertions(+), 1138 deletions(-)
 delete mode 100644 src/Components/AlertWindow/AlertWindow.js
 delete mode 100644 src/Components/AlertWindow/AlertWindowView.js
 delete mode 100644 src/Components/AlertWindow/alert-window.hbs
 delete mode 100644 src/Components/CvArticle/ButtonContainer/ButtonContainer.js
 delete mode 100644 src/Components/CvArticle/ButtonContainer/ButtonContainerView.js
 delete mode 100644 src/Components/CvArticle/ButtonContainer/cv-article__button-container.hbs
 delete mode 100644 src/Components/CvArticle/CvArticle.js
 delete mode 100644 src/Components/CvArticle/CvArticleController.js
 delete mode 100644 src/Components/CvArticle/CvArticleModel.js
 delete mode 100644 src/Components/CvArticle/CvArticleView.js
 delete mode 100644 src/Components/CvArticle/cv-article.hbs
 delete mode 100644 src/Components/CvForm/CvForm.js
 delete mode 100644 src/Components/CvForm/CvFormController.js
 delete mode 100644 src/Components/CvForm/CvFormModel.js
 delete mode 100644 src/Components/CvForm/CvFormView.js
 delete mode 100644 src/Components/CvForm/cv-form.hbs
 delete mode 100644 src/Pages/CvEditPage/CvEditPage.js
 delete mode 100644 src/Pages/CvEditPage/CvEditPageController.js
 delete mode 100644 src/Pages/CvEditPage/CvEditPageModel.js
 delete mode 100644 src/Pages/CvEditPage/CvEditPageView.js
 delete mode 100644 src/Pages/CvEditPage/cv-page-edit.hbs
 delete mode 100644 src/Pages/CvPage/CvPage.js
 delete mode 100644 src/Pages/CvPage/CvPageController.js
 delete mode 100644 src/Pages/CvPage/CvPageModel.js
 delete mode 100644 src/Pages/CvPage/CvPageView.js
 delete mode 100644 src/Pages/CvPage/cv-page.hbs
 delete mode 100644 src/Pages/VacancyPage/VacancyPage.js
 delete mode 100644 src/Pages/VacancyPage/VacancyPageController.js
 delete mode 100644 src/Pages/VacancyPage/VacancyPageModel.js
 delete mode 100644 src/Pages/VacancyPage/VacancyPageView.js
 delete mode 100644 src/Pages/VacancyPage/vacancy-page.hbs
 create mode 100644 src/application/action_creators/cv_action_creators.ts
 create mode 100644 src/application/components/alert_window/alert_window.scss
 create mode 100644 src/application/components/alert_window/alert_window.tsx
 rename src/{scss/_cv.scss => application/components/cv_article/cv_article.scss} (54%)
 create mode 100644 src/application/components/cv_article/cv_article.tsx
 create mode 100644 src/application/pages/cv_edit_page/cv_edit_page.scss
 create mode 100644 src/application/pages/cv_edit_page/cv_edit_page.tsx
 create mode 100644 src/application/pages/cv_page/cv_page.scss
 create mode 100644 src/application/pages/cv_page/cv_page.tsx
 create mode 100644 src/application/stores/cv_store/cv_actions.ts
 create mode 100644 src/application/stores/cv_store/cv_store.ts

diff --git a/src/Components/AlertWindow/AlertWindow.js b/src/Components/AlertWindow/AlertWindow.js
deleted file mode 100644
index 9560298..0000000
--- a/src/Components/AlertWindow/AlertWindow.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, ComponentController, ComponentModel } from '@/modules/Components/Component';
-import { AlertWindowView } from './AlertWindowView';
-
-export class AlertWindow extends Component {
-  constructor({ viewParams, existingElement }) {
-    super({
-      modelClass: ComponentModel,
-      controllerClass: ComponentController,
-      viewClass: AlertWindowView,
-      viewParams,
-      existingElement,
-    });
-  }
-}
diff --git a/src/Components/AlertWindow/AlertWindowView.js b/src/Components/AlertWindow/AlertWindowView.js
deleted file mode 100644
index 9c99e2e..0000000
--- a/src/Components/AlertWindow/AlertWindowView.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import AlertWindowHbs from './alert-window.hbs';
-
-export class AlertWindowView extends ComponentView {
-  constructor({ text, buttonUrl, buttonText, elementClass }, existingElement) {
-    super({
-      renderParams: {
-        text,
-        buttonText,
-        buttonUrl,
-        elementClass,
-      },
-      template: AlertWindowHbs,
-      existingElement,
-    });
-  }
-}
diff --git a/src/Components/AlertWindow/alert-window.hbs b/src/Components/AlertWindow/alert-window.hbs
deleted file mode 100644
index 83ca42e..0000000
--- a/src/Components/AlertWindow/alert-window.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<div class='{{elementClass}} alert-window alert-window_theme-dark'>
-  <div class='alert-window__text'>{{text}}</div>
-  <a class='alert-window__button button button_main-primary' href='{{buttonUrl}}'>{{buttonText}}</a>
-</div>
\ No newline at end of file
diff --git a/src/Components/CvArticle/ButtonContainer/ButtonContainer.js b/src/Components/CvArticle/ButtonContainer/ButtonContainer.js
deleted file mode 100644
index eea6255..0000000
--- a/src/Components/CvArticle/ButtonContainer/ButtonContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, ComponentController, ComponentModel } from '@/modules/Components/Component';
-import { ButtonContainerView } from './ButtonContainerView';
-
-export class ButtonContainer extends Component {
-  constructor({ isOwner, isEmployer, ownerId, cvId, existingElement }) {
-    super({
-      modelClass: ComponentModel,
-      viewClass: ButtonContainerView,
-      controllerClass: ComponentController,
-      viewParams: { isOwner, isEmployer, ownerId, cvId },
-      existingElement,
-    });
-  }
-}
diff --git a/src/Components/CvArticle/ButtonContainer/ButtonContainerView.js b/src/Components/CvArticle/ButtonContainer/ButtonContainerView.js
deleted file mode 100644
index bf196e6..0000000
--- a/src/Components/CvArticle/ButtonContainer/ButtonContainerView.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { CV_DELETE, CV_EDIT } from '@/modules/Events/Events';
-import { addEventListeners } from '@/modules/Events/EventUtils';
-import { ComponentView } from '/src/modules/Components/Component';
-import eventBus from '@/modules/Events/EventBus';
-import ButtonContainerHbs from './cv-article__button-container.hbs';
-
-export class ButtonContainerView extends ComponentView {
-  #editButton;
-  #deleteButton;
-  #cvId;
-  constructor({ isOwner, isEmployer, ownerId, cvId }, existingElement) {
-    super({
-      renderParams: { isOwner, isEmployer, ownerId },
-      existingElement,
-      template: ButtonContainerHbs,
-    });
-    this.#cvId = cvId;
-    if (isOwner) {
-      this.#editButton = this._html.querySelector('.cv-article__edit-button');
-      this.#deleteButton = this._html.querySelector('.cv-article__delete-button');
-      this._eventListeners.push(
-        {
-          event: 'click',
-          object: this.#editButton,
-          listener: function (ev) {
-            ev.preventDefault();
-            eventBus.emit(CV_EDIT, { vacancyId: this.#cvId });
-          }.bind(this),
-        },
-        {
-          event: 'click',
-          object: this.#deleteButton,
-          listener: function (ev) {
-            ev.preventDefault();
-            eventBus.emit(CV_DELETE, { vacancyId: this.#cvId });
-          }.bind(this),
-        },
-      );
-    }
-    addEventListeners(this._eventListeners);
-  }
-}
diff --git a/src/Components/CvArticle/ButtonContainer/cv-article__button-container.hbs b/src/Components/CvArticle/ButtonContainer/cv-article__button-container.hbs
deleted file mode 100644
index 5d675a1..0000000
--- a/src/Components/CvArticle/ButtonContainer/cv-article__button-container.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="cv-article__button-container">
-{{#if isEmployer}}
-    <a class="cv-article__another-button button button_main-secondary" href="{{url "profile" ""}}?id={{ownerId}}&userType=applicant&from=cvList">Все резюме</a>
-{{else}}
-    {{#if isOwner}}
-        <button type="button" class="cv-article__edit-button button button_main-primary">Изменить</button>
-        <button type="button" class="cv-article__delete-button button button_danger-secondary {
-">Удалить</button>
-    {{/if}}
-{{/if}}
-<div class='cv-article__created-at'></div>
-</div>
\ No newline at end of file
diff --git a/src/Components/CvArticle/CvArticle.js b/src/Components/CvArticle/CvArticle.js
deleted file mode 100644
index f6a801f..0000000
--- a/src/Components/CvArticle/CvArticle.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { CvArticleController } from './CvArticleController';
-import { CvArticleModel } from './CvArticleModel';
-import { CvArticleView } from './CvArticleView';
-import { ButtonContainer } from './ButtonContainer/ButtonContainer';
-import USER_TYPE from '@/modules/UserSession/UserType';
-
-export class CvArticle extends Component {
-  constructor({ elementClass, cvId, userId, userType }) {
-    super({
-      modelClass: CvArticleModel,
-      modelParams: { cvId },
-      viewClass: CvArticleView,
-      controllerClass: CvArticleController,
-      viewParams: { elementClass },
-    });
-    this._userId = userId;
-    this._userType = userType;
-    this._cvId = cvId;
-  }
-
-  async makeButtons() {
-    const modelData = await this._controller.fetchData();
-    this._buttonContainer = new ButtonContainer({
-      isOwner: modelData.applicantId === this._userId && this._userType === USER_TYPE.APPLICANT,
-      isEmployer: this._userType === USER_TYPE.EMPLOYER,
-      ownerId: modelData.applicantId,
-      cvId: this._cvId,
-    });
-    this._children.push(this._buttonContainer);
-    this._controller.addButtonContainer(this._buttonContainer);
-    this._controller.renderData();
-  }
-
-  async getApplicantId() {
-    return this._model.getApplicantId();
-  }
-}
diff --git a/src/Components/CvArticle/CvArticleController.js b/src/Components/CvArticle/CvArticleController.js
deleted file mode 100644
index 14ba1aa..0000000
--- a/src/Components/CvArticle/CvArticleController.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-import { GO_TO, REDIRECT_TO, CV_DELETE, CV_EDIT } from '@/modules/Events/Events';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-import { CvPage } from '@/Pages/CvPage/CvPage';
-import eventBus from '@/modules/Events/EventBus';
-
-export class CvArticleController extends ComponentController {
-  constructor(model, view, component) {
-    super(model, view, component);
-    this.setHandlers([
-      {
-        event: CV_DELETE,
-        handler: this.cvDelete.bind(this),
-      },
-      {
-        event: CV_EDIT,
-        handler: this.cvEdit.bind(this),
-      },
-    ]);
-  }
-
-  async fetchData() {
-    return this._model.getCvData();
-  }
-
-  async renderData() {
-    return this._view.renderData(await this._model.getCvData());
-  }
-
-  addButtonContainer(container) {
-    this._view.addButtonContainer(container.render());
-  }
-
-  async cvDelete() {
-    const deleted = await this._model.cvDelete();
-    if (deleted) {
-      eventBus.emit(REDIRECT_TO, { redirectUrl: resolveUrl('myProfile') });
-    }
-  }
-
-  async cvEdit() {
-    const cv = await this._model.getCvData();
-    const query = { [CvPage.CV_ID_PARAM]: cv.id };
-    eventBus.emit(GO_TO, { redirectUrl: resolveUrl('editCv', query) });
-  }
-}
diff --git a/src/Components/CvArticle/CvArticleModel.js b/src/Components/CvArticle/CvArticleModel.js
deleted file mode 100644
index bef547f..0000000
--- a/src/Components/CvArticle/CvArticleModel.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-import { getCv, deleteCv } from '@/modules/api/api';
-import { NotFoundError } from '@/modules/Router/Router';
-import { Cv } from '@/modules/models/Cv';
-import { catchStandardResponseError } from '@/modules/app_errors/Errors';
-import appState from '@/modules/AppState/AppState';
-
-export class CvArticleModel extends ComponentModel {
-  #cvData;
-  #cvId;
-
-  constructor({ cvId }) {
-    super();
-    this.#cvId = cvId;
-    this.#cvData = getCv(appState.backendUrl, this.#cvId).then(
-      (data) => new Cv(data),
-      () => {
-        throw new NotFoundError('cv not found');
-      },
-    );
-  }
-
-  async getCvData() {
-    return this.#cvData;
-  }
-
-  async getApplicantId() {
-    const vacancyData = await this.#cvData;
-    return vacancyData.applicantId;
-  }
-
-  async cvDelete() {
-    if (!this.#cvId) {
-      return false;
-    }
-    try {
-      await deleteCv(appState.backendUrl, this.#cvId);
-      return true;
-    } catch (err) {
-      catchStandardResponseError(err);
-      return false;
-    }
-  }
-}
diff --git a/src/Components/CvArticle/CvArticleView.js b/src/Components/CvArticle/CvArticleView.js
deleted file mode 100644
index cc09b74..0000000
--- a/src/Components/CvArticle/CvArticleView.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import CvArticleHbs from './cv-article.hbs';
-
-export class CvArticleView extends ComponentView {
-  constructor({ elementClass, isOwner, isEmployer }, existingElement) {
-    super({
-      renderParams: {
-        elementClass,
-        isOwner,
-        isEmployer,
-      },
-      template: CvArticleHbs,
-      existingElement,
-    });
-    this._avatar = this._html.querySelector('.cv-article__cv-picture');
-    this._position = this._html.querySelector('.cv-article__header-text');
-    this._jobSearchStatus = this._html.querySelector('.cv-article__job-search-status');
-    this._workingExperience = this._html.querySelector('.cv-article__working-experience');
-    this._description = this._html.querySelector('.cv-article__description');
-  }
-
-  renderData({
-    positionRu,
-    positionEn,
-    description,
-    jobSearchStatus,
-    workingExperience,
-    updatedAt,
-  }) {
-    this._position.innerText = positionEn ? `${positionRu} / ${positionEn}` : positionRu;
-    this._jobSearchStatus.innerText = jobSearchStatus;
-    this._description.innerText = description || 'Не указано';
-    this._workingExperience.innerText = workingExperience || 'Не указан';
-    this._updatedAt.innerText = `последнее обновление: ${updatedAt.toLocaleDateString('ru-RU', {
-      weekday: 'short',
-      day: 'numeric',
-      month: 'numeric',
-      year: 'numeric',
-    })}`;
-  }
-
-  addButtonContainer(containerRender) {
-    this._html.appendChild(containerRender);
-    this._updatedAt = this._html.querySelector('.cv-article__created-at');
-  }
-}
diff --git a/src/Components/CvArticle/cv-article.hbs b/src/Components/CvArticle/cv-article.hbs
deleted file mode 100644
index ae78c15..0000000
--- a/src/Components/CvArticle/cv-article.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-<article class="{{elementClass}} cv-article">
-  <div class='cv-article__header-container'>
-    <div class='cv-article__header'>
-      <h1 class='cv-article__header-text'></h1>
-      <div><span class="cv-article__job-search-status pill pill_main"></span></div>
-    </div>
-  </div>
-  <div class="cv-article__divider"></div>
-  <h2 class='cv-article__description-header'>Описание и достижения</h2>
-  <div class='cv-article__description'></div>
-  <div class="cv-article__divider"></div>
-  <h2 class='cv-article__working-experience-header'>Опыт работы</h2>
-  <div class='cv-article__working-experience'></div>
-</article>
\ No newline at end of file
diff --git a/src/Components/CvForm/CvForm.js b/src/Components/CvForm/CvForm.js
deleted file mode 100644
index ee44a65..0000000
--- a/src/Components/CvForm/CvForm.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Component } from '@/modules/Components/Component';
-import { LiteralInput } from '@/Components/FormInputs/LiteralInput/LiteralInput';
-import { ValidatedTextArea } from '@/Components/FormInputs/ValidatedTextArea/ValidatedTextArea';
-import { CvFormModel } from './CvFormModel';
-import { CvFormView } from './CvFormView';
-import { CvFormController } from './CvFormController';
-
-export class CvForm extends Component {
-  #isNew;
-  constructor({ cvId = null, elementClass, existingElement }) {
-    super({
-      modelClass: CvFormModel,
-      viewClass: CvFormView,
-      controllerClass: CvFormController,
-      modelParams: { cvId },
-      existingElement,
-      viewParams: { elementClass, isNew: !cvId },
-    });
-    this.#isNew = !cvId;
-    this._positionRuField = new LiteralInput({
-      existingElement: this._view.positionRuField,
-      selfValidate: true,
-    });
-    this._positionEnField = new LiteralInput({
-      existingElement: this._view.positionEnField,
-      selfValidate: true,
-    });
-    this._jobSearchStatusField = new LiteralInput({
-      existingElement: this._view.jobSearchStatusField,
-      selfValidate: true,
-    });
-    this._descriptionField = new ValidatedTextArea({
-      existingElement: this._view.descriptionField,
-      selfValidate: true,
-    });
-    this._workingExperienceField = new ValidatedTextArea({
-      existingElement: this._view.workingExperienceField,
-      selfValidate: true,
-    });
-    this._children.push(
-      this._positionEnField,
-      this._positionRuField,
-      this._jobSearchStatusField,
-      this._descriptionField,
-      this._workingExperienceField,
-    );
-    if (!this.#isNew) {
-      this.reset();
-    }
-  }
-
-  get view() {
-    return this._view;
-  }
-
-  reset() {
-    return this._controller.reset();
-  }
-}
diff --git a/src/Components/CvForm/CvFormController.js b/src/Components/CvForm/CvFormController.js
deleted file mode 100644
index 5e11fc1..0000000
--- a/src/Components/CvForm/CvFormController.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ComponentController } from '@/modules/Components/Component';
-import {
-  NOTIFICATION_ERROR,
-  NOTIFICATION_OK,
-  REDIRECT_TO,
-  SUBMIT_FORM,
-} from '@/modules/Events/Events';
-import { CvPage } from '@/Pages/CvPage/CvPage';
-import { Cv } from '@/modules/models/Cv';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-import eventBus from '@/modules/Events/EventBus';
-import { NOTIFICATION_TIMEOUT } from '@/Components/NotificationBox/NotificationBox.js';
-import { catchStandardResponseError } from '@/modules/app_errors/Errors.js';
-
-export class CvFormController extends ComponentController {
-  constructor(model, view, controller) {
-    super(model, view, controller);
-    this.setHandlers([
-      {
-        event: SUBMIT_FORM,
-        handler: this.submit.bind(this),
-      },
-    ]);
-  }
-
-  _validate() {
-    const errorMessage = this._model.validate(this._view.getData());
-    if (errorMessage) {
-      eventBus.emit(NOTIFICATION_ERROR, {
-        message: errorMessage,
-        timeout: NOTIFICATION_TIMEOUT.MEDIUM,
-      });
-      return false;
-    }
-    return [
-      this._component._positionRuField.controller.validateInput({
-        callerView: this._component._positionRuField._view,
-      }),
-      this._component._positionEnField.controller.validateInput({
-        callerView: this._component._positionEnField._view,
-      }),
-      this._component._jobSearchStatusField.controller.validateInput({
-        callerView: this._component._jobSearchStatusField._view,
-      }),
-      this._component._workingExperienceField.controller.validateInput({
-        callerView: this._component._workingExperienceField._view,
-      }),
-      this._component._descriptionField.controller.validateInput({
-        callerView: this._component._descriptionField._view,
-      }),
-    ].every((val) => val);
-  }
-
-  async submit({ caller }) {
-    if (!Object.is(caller, this._view)) {
-      return;
-    }
-    if (!this._validate()) {
-      return;
-    }
-    try {
-      const cv = await this._model.submit(new Cv(this._view.getData()));
-      if (!cv) {
-        return;
-      }
-      const query = {};
-      query[CvPage.CV_ID_PARAM] = cv.id;
-      eventBus.emit(NOTIFICATION_OK, {
-        message: 'Операция проведена успешно',
-        timeout: NOTIFICATION_TIMEOUT.MEDIUM,
-      });
-      eventBus.emit(REDIRECT_TO, { redirectUrl: resolveUrl('cv', query) });
-    } catch (err) {
-      catchStandardResponseError(err);
-      return;
-    }
-  }
-
-  async reset() {
-    const oldData = await this._model.getLastValidData();
-    this._view.renderData(oldData);
-    return true;
-  }
-}
diff --git a/src/Components/CvForm/CvFormModel.js b/src/Components/CvForm/CvFormModel.js
deleted file mode 100644
index f2f1235..0000000
--- a/src/Components/CvForm/CvFormModel.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { ComponentModel } from '@/modules/Components/Component';
-import { Cv } from '@/modules/models/Cv';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-import { zip } from '@common_utils/object_utils/zip';
-import eventBus from '@/modules/Events/EventBus';
-import { REDIRECT_TO } from '@/modules/Events/Events';
-import { catchStandardResponseError } from '@/modules/app_errors/Errors';
-import appState from '@/modules/AppState/AppState';
-import { getCv, createCv, updateCv } from '@api/api';
-
-export class CvFormModel extends ComponentModel {
-  #lastValidData;
-  #cvId;
-  #isNew;
-
-  constructor({ cvId = null }) {
-    super();
-    this.#cvId = cvId;
-    this.#isNew = !this.#cvId;
-    this.#lastValidData = this.#cvId
-      ? getCv(appState.backendUrl, this.#cvId).then(
-          (cv) => new Cv(cv),
-          () => {
-            eventBus.emit(REDIRECT_TO, { redirectUrl: resolveUrl('createCv') });
-          },
-        )
-      : null;
-  }
-
-  async getLastValidData() {
-    return this.#lastValidData;
-  }
-
-  async submit(formData) {
-    try {
-      const cv = this.#isNew
-        ? await createCv(appState.backendUrl, formData)
-        : await updateCv(appState.backendUrl, zip({ id: this.#cvId }, formData));
-      if (cv) {
-        this.#lastValidData = formData;
-        return cv;
-      }
-    } catch (err) {
-      catchStandardResponseError(err);
-    }
-    return null;
-  }
-
-  validate(formData) {
-    const hasEmptyRequiredFields = [formData.positionRu, formData.jobSearchStatus].some(
-      (fieldValue) => {
-        return !fieldValue.trim();
-      },
-    );
-    if (hasEmptyRequiredFields) {
-      return 'Заполните обязательные поля';
-    }
-  }
-}
diff --git a/src/Components/CvForm/CvFormView.js b/src/Components/CvForm/CvFormView.js
deleted file mode 100644
index 371d6f0..0000000
--- a/src/Components/CvForm/CvFormView.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { ComponentView } from '@/modules/Components/Component';
-import eventBus from '@/modules/Events/EventBus';
-import { SUBMIT_FORM } from '@/modules/Events/Events';
-import { addEventListeners } from '@/modules/Events/EventUtils';
-import { getFormData } from '@/modules/FormUtils/FormUtils';
-import CvFormHbs from './cv-form.hbs';
-
-export class CvFormView extends ComponentView {
-  constructor({ elementClass, isNew }, existingElement) {
-    super({
-      renderParams: { elementClass, isNew },
-      existingElement,
-      template: CvFormHbs,
-    });
-    this.positionRuField = this._html.querySelector('.cv-form__position-ru');
-    this.positionEnField = this._html.querySelector('.cv-form__position-en');
-    this.jobSearchStatusField = this._html.querySelector('.cv-form__job-search-status');
-    this.descriptionField = this._html.querySelector('.cv-form__description');
-    this.workingExperienceField = this._html.querySelector('.cv-form__working-experience');
-
-    this._eventListeners.push({
-      event: 'submit',
-      object: this._html,
-      listener: function (ev) {
-        ev.preventDefault();
-        eventBus.emit(SUBMIT_FORM, { caller: this });
-      }.bind(this),
-    });
-    addEventListeners(this._eventListeners);
-  }
-
-  getData() {
-    return getFormData(this._html);
-  }
-
-  getId() {
-    return 'cv-form';
-  }
-
-  renderData({ positionRu, positionEn, jobSearchStatus, description, workingExperience }) {
-    this.positionRuField.querySelector('.validated-input__input').value = positionRu;
-    this.positionEnField.querySelector('.validated-input__input').value = positionEn;
-    this.jobSearchStatusField.querySelector('.validated-input__input').value = jobSearchStatus;
-    this.descriptionField.querySelector('.validated-textarea__textarea').value = description;
-    this.workingExperienceField.querySelector('.validated-textarea__textarea').value =
-      workingExperience;
-  }
-}
diff --git a/src/Components/CvForm/cv-form.hbs b/src/Components/CvForm/cv-form.hbs
deleted file mode 100644
index 49bfa90..0000000
--- a/src/Components/CvForm/cv-form.hbs
+++ /dev/null
@@ -1,19 +0,0 @@
-<form class="{{elementClass}} cv-form" id="cv-form" method="POST" novalidate>
-    {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="cv-form" elementName="position-ru" inputName="positionRu" inputCaption="Должность" inputType="text"}}
-    {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="cv-form" elementName="position-en" inputName="positionEn" inputCaption="Перевод должности на английский" inputType="text"}}
-    {{> ../FormInputs/ValidatedInput/validated-input.hbs formName="cv-form" elementName="job-search-status" inputName="jobSearchStatus" inputCaption="Статус поиска работы" inputType="text"}}
-    {{> ../FormInputs/ValidatedTextArea/validated-textarea.hbs formName="cv-form" elementName="description" inputName="description" inputCaption="Описание и достижения"}}
-    {{> ../FormInputs/ValidatedTextArea/validated-textarea.hbs formName="cv-form" elementName="working-experience" inputName="workingExperience" inputCaption="Опыт работы"}}
-    <div class="cv-form__button-container">
-        {{#if isNew}}
-        <button type="submit" class="cv-form__submit-button button button_main-primary">
-            Создать
-        </button>
-        {{else}}
-        <button type="submit" class="cv-form__submit-button button button_main-primary">
-            Сохранить
-        </button>
-        {{/if}}
-        <a class="cv-form__go-back-button button button_danger-tertiary" href="{{url "myProfile" ""}}">В профиль</a>
-    </div>
-</form>
\ No newline at end of file
diff --git a/src/Pages/CvEditPage/CvEditPage.js b/src/Pages/CvEditPage/CvEditPage.js
deleted file mode 100644
index 5c84ff5..0000000
--- a/src/Pages/CvEditPage/CvEditPage.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Header } from '@/Components/Header/Header';
-import state from '@/modules/AppState/AppState';
-import { Page } from '@/modules/Page/Page';
-import { ForbiddenPage, NotFoundError } from '@/modules/Router/Router';
-import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-import { CvEditPageController } from './CvEditPageController';
-import { CvEditPageModel } from './CvEditPageModel';
-import { CvEditPageView } from './CvEditPageView';
-import { CvForm } from '@/Components/CvForm/CvForm';
-import USER_TYPE from '@/modules/UserSession/UserType';
-import { zip } from '@common_utils/object_utils/zip';
-
-export class CvEditPage extends Page {
-  #cvId;
-
-  static CV_ID_PARAM = 'id';
-
-  constructor({ url }) {
-    if (state.userSession.userType !== USER_TYPE.APPLICANT) {
-      throw new ForbiddenPage(resolveUrl('vacancies'));
-    }
-    let cvId;
-    switch (url.pathname) {
-      case resolveUrl('editCv').pathname: {
-        cvId = +url.searchParams.get(CvEditPage.CV_ID_PARAM);
-        if (!cvId && cvId !== 0) {
-          throw new NotFoundError();
-        }
-        break;
-      }
-      case resolveUrl('createCv').pathname: {
-        cvId = null;
-        break;
-      }
-    }
-    super({
-      url,
-      modelClass: CvEditPageModel,
-      viewClass: CvEditPageView,
-      controllerClass: CvEditPageController,
-      viewParams: zip(Header.getViewParams(), { isNew: !cvId }),
-    });
-    this.#cvId = cvId;
-  }
-
-  postRenderInit() {
-    this._header = new Header({
-      existingElement: this._view.header,
-    });
-    this._children.push(this._header);
-
-    this._cvForm = new CvForm({
-      userId: state.userSession.userId,
-      cvId: this.#cvId,
-      elementClass: 'cv-edit-page__cv-form',
-    });
-    this._children.push(this._cvForm);
-    this._controller.addCvForm(this._cvForm);
-  }
-}
diff --git a/src/Pages/CvEditPage/CvEditPageController.js b/src/Pages/CvEditPage/CvEditPageController.js
deleted file mode 100644
index 17fb660..0000000
--- a/src/Pages/CvEditPage/CvEditPageController.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PageController } from '@/modules/Page/Page';
-
-export class CvEditPageController extends PageController {
-  constructor(model, view, component) {
-    super(model, view, component);
-  }
-
-  addCvForm(cvForm) {
-    this._view.addCvForm(cvForm.render());
-  }
-}
diff --git a/src/Pages/CvEditPage/CvEditPageModel.js b/src/Pages/CvEditPage/CvEditPageModel.js
deleted file mode 100644
index 1494afb..0000000
--- a/src/Pages/CvEditPage/CvEditPageModel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PageModel } from '@/modules/Page/Page';
-
-export const CvEditPageModel = PageModel;
diff --git a/src/Pages/CvEditPage/CvEditPageView.js b/src/Pages/CvEditPage/CvEditPageView.js
deleted file mode 100644
index 97766b6..0000000
--- a/src/Pages/CvEditPage/CvEditPageView.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { PageView } from '@/modules/Page/Page';
-import CvPageEditHbs from './cv-page-edit.hbs';
-
-export class CvEditPageView extends PageView {
-  constructor(renderParams) {
-    super({
-      template: CvPageEditHbs,
-      renderParams: renderParams,
-    });
-    this.header = this._html.querySelector('.header');
-    this.formBox = this._html.querySelector('.cv-page-edit__form-container');
-  }
-
-  addCvForm(formRender) {
-    this.cvForm = formRender;
-    this.formBox.appendChild(formRender);
-  }
-}
diff --git a/src/Pages/CvEditPage/cv-page-edit.hbs b/src/Pages/CvEditPage/cv-page-edit.hbs
deleted file mode 100644
index bfea4c7..0000000
--- a/src/Pages/CvEditPage/cv-page-edit.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-<div>
-  {{> ../../Components/Header/header.hbs}}
-  <div class="cv-page-edit">
-    <main class="cv-page-edit__form-container">
-    <h1 class="cv-page-edit__header">{{#if isNew}}Создание{{else}}Редактирование{{/if}} резюме</h1>
-    </main>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/Pages/CvPage/CvPage.js b/src/Pages/CvPage/CvPage.js
deleted file mode 100644
index 80d49c1..0000000
--- a/src/Pages/CvPage/CvPage.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Header } from '@/Components/Header/Header';
-import { ProfileMinicard } from '@/Components/ProfileMinicard/ProfileMinicard';
-import state from '@/modules/AppState/AppState';
-import { Page } from '@/modules/Page/Page';
-import { NotFoundError } from '@/modules/Router/Router';
-import USER_TYPE from '@/modules/UserSession/UserType';
-import { CvPageController } from './CvPageController';
-import { CvPageModel } from './CvPageModel';
-import { CvPageView } from './CvPageView';
-import { CvArticle } from '@/Components/CvArticle/CvArticle';
-import { zip } from '@common_utils/object_utils/zip';
-
-export class CvPage extends Page {
-  #cvId;
-  #userType;
-  #userId;
-  #applicantId;
-
-  static CV_ID_PARAM = 'id';
-
-  constructor({ url }) {
-    super({
-      url,
-      modelClass: CvPageModel,
-      viewClass: CvPageView,
-      controllerClass: CvPageController,
-      viewParams: zip(Header.getViewParams(), { isAuthorized: state.userSession.isLoggedIn }),
-    });
-    this.#cvId = +url.searchParams.get(CvPage.CV_ID_PARAM);
-    if (!this.#cvId && this.#cvId !== 0) {
-      throw new NotFoundError();
-    }
-    this.#userType = state.userSession.userType;
-    this.#userId = state.userSession.userId;
-  }
-
-  async postRenderInit() {
-    this._header = new Header({
-      existingElement: this._view.header,
-    });
-    this._children.push(this._header);
-
-    this._cvArticle = new CvArticle({
-      elementClass: '.vacancy-page__vacancy-article',
-      userId: this.#userId,
-      cvId: this.#cvId,
-      userType: this.#userType,
-    });
-    await this._cvArticle.makeButtons();
-    this.#applicantId = await this._cvArticle.getApplicantId();
-    this._controller.addCvArticle(this._cvArticle);
-    this._children.push(this._cvArticle);
-
-    this._profileMinicard = new ProfileMinicard({
-      userId: this.#applicantId,
-      userType: USER_TYPE.APPLICANT,
-      existingElement: this._view.profileMinicard,
-    });
-    this._children.push(this._profileMinicard);
-  }
-}
diff --git a/src/Pages/CvPage/CvPageController.js b/src/Pages/CvPage/CvPageController.js
deleted file mode 100644
index 4599237..0000000
--- a/src/Pages/CvPage/CvPageController.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PageController } from '@/modules/Page/Page';
-
-export class CvPageController extends PageController {
-  constructor(model, view, component) {
-    super(model, view, component);
-  }
-
-  addCvArticle(cvArticle) {
-    this._view.addCvArticle(cvArticle.render());
-  }
-}
diff --git a/src/Pages/CvPage/CvPageModel.js b/src/Pages/CvPage/CvPageModel.js
deleted file mode 100644
index c70b24f..0000000
--- a/src/Pages/CvPage/CvPageModel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PageModel } from '@/modules/Page/Page';
-
-export const CvPageModel = PageModel;
diff --git a/src/Pages/CvPage/CvPageView.js b/src/Pages/CvPage/CvPageView.js
deleted file mode 100644
index ba9f248..0000000
--- a/src/Pages/CvPage/CvPageView.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ProfileMinicardView } from '@/Components/ProfileMinicard/ProfileMinicardView';
-import { PageView } from '@/modules/Page/Page';
-import CvPageHbs from './cv-page.hbs';
-import { zip } from '@common_utils/object_utils/zip';
-
-export class CvPageView extends PageView {
-  constructor(renderParams) {
-    renderParams.isEmployer = !renderParams.isApplicant && renderParams.isAuthorized;
-    super({
-      template: CvPageHbs,
-      renderParams: zip(renderParams, ProfileMinicardView.generateRenderParams()),
-    });
-    this.header = this._html.querySelector('.header');
-    this.profileMinicard = this._html.querySelector('.cv-page__profile-minicard');
-    this.cvContainer = this._html.querySelector('.cv-page__cv-container');
-    this.sideColumn = this._html.querySelector('.cv-page__left-column');
-  }
-
-  addCvArticle(render) {
-    this.cvContainer.innerHTML = '';
-    this.cvContainer.appendChild(render);
-  }
-}
diff --git a/src/Pages/CvPage/cv-page.hbs b/src/Pages/CvPage/cv-page.hbs
deleted file mode 100644
index cc9fe3e..0000000
--- a/src/Pages/CvPage/cv-page.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-<div>
-  {{> ../../Components/Header/header.hbs}}
-  <div class="cv-page">
-    <div class="cv-page__left-column">
-    {{> ../../Components/ProfileMinicard/profile-minicard.hbs elementClass="cv-page__profile-minicard"}}
-    </div>
-    <main class="cv-page__cv-container">
-    </main>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/Pages/VacancyPage/VacancyPage.js b/src/Pages/VacancyPage/VacancyPage.js
deleted file mode 100644
index b6cad71..0000000
--- a/src/Pages/VacancyPage/VacancyPage.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Header } from '@/Components/Header/Header';
-import { ProfileMinicard } from '@/Components/ProfileMinicard/ProfileMinicard';
-import state from '@/modules/AppState/AppState';
-import { Page } from '@/modules/Page/Page';
-import { NotFoundError } from '@/modules/Router/Router';
-import USER_TYPE from '@/modules/UserSession/UserType';
-import { VacancyPageController } from './VacancyPageController';
-import { VacancyPageModel } from './VacancyPageModel';
-import { VacancyPageView } from './VacancyPageView';
-import { VacancyArticle } from '@/Components/VacancyArticle/VacancyArticle';
-import { AppliersList } from '@/Components/AppliersList/AppliersList';
-import { zip } from '@common_utils/object_utils/zip';
-
-export class VacancyPage extends Page {
-  #vacancyId;
-  #userType;
-  #userId;
-  #employerId;
-
-  static VACANCY_ID_PARAM = 'id';
-
-  constructor({ url }) {
-    super({
-      url,
-      modelClass: VacancyPageModel,
-      viewClass: VacancyPageView,
-      controllerClass: VacancyPageController,
-      viewParams: zip(Header.getViewParams(), { isAuthorized: state.userSession.isLoggedIn }),
-    });
-    this.#vacancyId = +url.searchParams.get(VacancyPage.VACANCY_ID_PARAM);
-    if (!this.#vacancyId && this.#vacancyId !== 0) {
-      throw new NotFoundError();
-    }
-    this.#userType = state.userSession.userType;
-    this.#userId = state.userSession.userId;
-  }
-
-  async postRenderInit() {
-    this._header = new Header({
-      existingElement: this._view.header,
-    });
-    this._children.push(this._header);
-    try {
-      this._vacancyArticle = new VacancyArticle({
-        elementClass: '.vacancy-page__vacancy-article',
-        userId: this.#userId,
-        vacancyId: this.#vacancyId,
-        userType: this.#userType,
-      });
-      await this._vacancyArticle.makeButtons();
-      this.#employerId = await this._vacancyArticle.getEmployerId();
-      this._controller.addVacancyArticle(this._vacancyArticle);
-      this._children.push(this._vacancyArticle);
-    } catch {
-      throw NotFoundError('failed to fetch page data');
-    }
-
-    if (this.#userType !== USER_TYPE.EMPLOYER) {
-      this._profileMinicard = new ProfileMinicard({
-        userId: this.#employerId,
-        userType: USER_TYPE.EMPLOYER,
-        existingElement: this._view.profileMinicard,
-      });
-      this._children.push(this._profileMinicard);
-    }
-
-    if (this.#userType === USER_TYPE.EMPLOYER && this.#userId === this.#employerId) {
-      this._appliersList = new AppliersList({
-        elementClass: 'vacancy-page__appliers-list',
-        vacancyId: this.#vacancyId,
-      });
-      this._children.push(this._appliersList);
-      this._view.addAppliersList(this._appliersList.render());
-    }
-  }
-}
diff --git a/src/Pages/VacancyPage/VacancyPageController.js b/src/Pages/VacancyPage/VacancyPageController.js
deleted file mode 100644
index c62dc94..0000000
--- a/src/Pages/VacancyPage/VacancyPageController.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PageController } from '@/modules/Page/Page';
-
-export class VacancyPageController extends PageController {
-  constructor(model, view, component) {
-    super(model, view, component);
-  }
-
-  addVacancyArticle(vacancyArticle) {
-    this._view.addVacancyArticle(vacancyArticle.render());
-  }
-}
diff --git a/src/Pages/VacancyPage/VacancyPageModel.js b/src/Pages/VacancyPage/VacancyPageModel.js
deleted file mode 100644
index 59e82c6..0000000
--- a/src/Pages/VacancyPage/VacancyPageModel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PageModel } from '@/modules/Page/Page';
-
-export class VacancyPageModel extends PageModel {}
diff --git a/src/Pages/VacancyPage/VacancyPageView.js b/src/Pages/VacancyPage/VacancyPageView.js
deleted file mode 100644
index 5201bb0..0000000
--- a/src/Pages/VacancyPage/VacancyPageView.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ProfileMinicardView } from '@/Components/ProfileMinicard/ProfileMinicardView';
-import { PageView } from '@/modules/Page/Page';
-import VacancyPageHbs from './vacancy-page.hbs';
-import { zip } from '@common_utils/object_utils/zip';
-
-export class VacancyPageView extends PageView {
-  constructor(renderParams) {
-    renderParams.isEmployer = !renderParams.isApplicant && renderParams.isAuthorized;
-    super({
-      template: VacancyPageHbs,
-      renderParams: zip(renderParams, ProfileMinicardView.generateRenderParams()),
-    });
-    this.header = this._html.querySelector('.header');
-    if (!renderParams.isEmployer) {
-      this.profileMinicard = this._html.querySelector('.vacancy-page__profile-minicard');
-    }
-    this.vacancyContainer = this._html.querySelector('.vacancy-page__vacancy-container');
-    this.sideColumn = this._html.querySelector('.vacancy-page__left-column');
-  }
-
-  addVacancyArticle(render) {
-    this.vacancyContainer.innerHTML = '';
-    this.vacancyContainer.appendChild(render);
-  }
-
-  addAppliersList(render) {
-    this.sideColumn.appendChild(render);
-    render.classList.remove('hidden');
-  }
-}
diff --git a/src/Pages/VacancyPage/vacancy-page.hbs b/src/Pages/VacancyPage/vacancy-page.hbs
deleted file mode 100644
index ecfd8c6..0000000
--- a/src/Pages/VacancyPage/vacancy-page.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<div>
-  {{> ../../Components/Header/header.hbs}}
-  <div class="vacancy-page">
-    <div class="vacancy-page__left-column">
-    {{#unless isEmployer}}
-    {{> ../../Components/ProfileMinicard/profile-minicard.hbs elementClass="vacancy-page__profile-minicard"}}
-    {{/unless}}
-    </div>
-    <main class="vacancy-page__vacancy-container">
-    </main>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/application/action_creators/cv_action_creators.ts b/src/application/action_creators/cv_action_creators.ts
new file mode 100644
index 0000000..6e58363
--- /dev/null
+++ b/src/application/action_creators/cv_action_creators.ts
@@ -0,0 +1,181 @@
+import { storeManager } from '@/modules/store_manager/store_manager';
+import { userStore } from '../stores/user_store/user_store';
+import {
+  ClearAction,
+  CvActions,
+  UpdateAction,
+  UpdateActionPayload,
+} from '../stores/cv_store/cv_actions';
+import { backendStore } from '../stores/backend_store/backend_store';
+import { makeCvFromApi } from '../models/cv';
+import {
+  getCv,
+  deleteCv,
+  createCv as apiCreateCv,
+  updateCv as apiUpdateCv,
+} from '@/modules/api/api';
+import { assertIfError } from '@/modules/common_utils/asserts/asserts';
+import { FormValue } from '../models/form_value';
+import { validateEnglish, validateRequired, validatorTrain } from '../validators/validators';
+import { CvFormData, cvStore } from '../stores/cv_store/cv_store';
+import { UserType } from '../models/user-type';
+
+function clearCv() {
+  storeManager.dispatch({
+    type: CvActions.Clear,
+  } as ClearAction);
+}
+
+async function loadCv(id: number) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  clearCv();
+  try {
+    const loadedCv = makeCvFromApi(await getCv(backendOrigin, id));
+    storeManager.dispatch({
+      type: CvActions.Update,
+      payload: {
+        cv: loadedCv,
+        loaded: true,
+      } as UpdateActionPayload,
+    } as UpdateAction);
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+    storeManager.dispatch({
+      type: CvActions.Update,
+      payload: {
+        cv: null,
+        loaded: true,
+      } as UpdateActionPayload,
+    } as UpdateAction);
+  }
+}
+
+async function removeCv(id: number) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  try {
+    const token = userStore.getData().csrfToken;
+    await deleteCv(backendOrigin, token, id);
+    clearCv();
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+  }
+}
+
+export interface CvFormFields {
+  positionRu?: string;
+  positionEn?: string;
+  jobSearchStatus?: string;
+  description?: string;
+  workingExperience?: string;
+}
+
+const cvFormValidators = new Map(
+  Object.entries({
+    positionRu: validateRequired,
+    positionEn: validatorTrain([validateRequired, validateEnglish]),
+    jobSearchStatus: validateRequired,
+    description: validateRequired,
+    workingExperience: validateRequired,
+  }),
+);
+
+function submitCvFields(data: CvFormFields) {
+  const validatedData: CvFormData = {};
+  Object.entries(data).forEach(([key, value]) => {
+    (validatedData as { [key: string]: FormValue })[key] = cvFormValidators.get(key)(value);
+  });
+  storeManager.dispatch({
+    type: CvActions.FormSubmit,
+    payload: validatedData,
+  });
+}
+
+function validateCvForm(formFields: CvFormFields): boolean {
+  submitCvFields(formFields);
+  let isValid = false;
+  const userData = userStore.getData();
+  if (userData.userType !== UserType.Applicant) {
+    return false;
+  }
+  const { positionRu, positionEn, jobSearchStatus, description, workingExperience } =
+    cvStore.getData().cvFormData;
+  isValid = [positionRu, positionEn, jobSearchStatus, description, workingExperience].every(
+    (field) => field.isValid,
+  );
+  storeManager.dispatch({
+    type: CvActions.FormSubmit,
+    payload: {
+      isValid,
+    } as CvFormData,
+  });
+  return true;
+}
+
+async function createCv(body: CvFormFields) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  if (!validateCvForm(body)) {
+    return;
+  }
+  try {
+    const newCv = makeCvFromApi(
+      await apiCreateCv(backendOrigin, userStore.getData().csrfToken, {
+        positionRu: body.positionRu,
+        positionEn: body.positionEn,
+        jobSearchStatus: body.jobSearchStatus,
+        description: body.description,
+        workingExperience: body.workingExperience,
+      }),
+    );
+    storeManager.dispatch({
+      type: CvActions.Update,
+      payload: {
+        cv: newCv,
+        loaded: true,
+      } as UpdateActionPayload,
+    } as UpdateAction);
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+    cvActionCreators.clearCv();
+  }
+}
+
+async function updateCv(id: number, body: CvFormFields) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  if (!validateCvForm(body)) {
+    return;
+  }
+  try {
+    const updatedCv = makeCvFromApi(
+      await apiUpdateCv(backendOrigin, userStore.getData().csrfToken, {
+        id,
+        positionRu: body.positionRu,
+        positionEn: body.positionEn,
+        jobSearchStatus: body.jobSearchStatus,
+        description: body.description,
+        workingExperience: body.workingExperience,
+      }),
+    );
+    storeManager.dispatch({
+      type: CvActions.Update,
+      payload: {
+        cv: updatedCv,
+        loaded: true,
+      } as UpdateActionPayload,
+    } as UpdateAction);
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+  }
+}
+
+export const cvActionCreators = {
+  loadCv,
+  clearCv,
+  updateCv,
+  createCv,
+  removeCv,
+  submitCvFields,
+};
diff --git a/src/application/action_creators/profile_action_creators.ts b/src/application/action_creators/profile_action_creators.ts
index 16984d9..71a012d 100644
--- a/src/application/action_creators/profile_action_creators.ts
+++ b/src/application/action_creators/profile_action_creators.ts
@@ -123,10 +123,11 @@ async function updateProfile(userType: UserType, body: ProfileFormFields) {
   }
 
   const backendOrigin = backendStore.getData().backendOrigin;
-  const userData = userStore.getData().userProfile;
+  const userData = userStore.getData();
   try {
+    const token = userStore.getData().csrfToken;
     if (userType === UserType.Applicant) {
-      await updateApplicantProfile(backendOrigin, {
+      await updateApplicantProfile(backendOrigin, token, {
         id: userData.id,
         firstName: body.firstName,
         secondName: body.secondName,
@@ -144,7 +145,7 @@ async function updateProfile(userType: UserType, body: ProfileFormFields) {
       applicant.contacts = body.contacts;
       userActionCreators.updateProfile(applicant as Applicant);
     } else {
-      await updateEmployerProfile(backendOrigin, {
+      await updateEmployerProfile(backendOrigin, token, {
         id: userData.id,
         firstName: body.firstName,
         secondName: body.secondName,
diff --git a/src/application/action_creators/user_action_creators.ts b/src/application/action_creators/user_action_creators.ts
index 7b480b8..b3353ad 100644
--- a/src/application/action_creators/user_action_creators.ts
+++ b/src/application/action_creators/user_action_creators.ts
@@ -100,20 +100,12 @@ async function login({ userType, email, password }: LoginFormFields) {
 
   const backendOrigin = backendStore.getData().backendOrigin;
   try {
-    const loginResponse = await apiLogin(backendOrigin, {
+    await apiLogin(backendOrigin, {
       userType,
       email,
       password,
     });
-    const userProfile = await getUser(backendOrigin, userType, loginResponse.id);
-    storeManager.dispatch({
-      type: UserActions.Login,
-      payload: {
-        id: loginResponse.id,
-        userType,
-        userProfile,
-      },
-    } as LoginAction);
+    isAuthorized();
   } catch (err) {
     console.log(err);
     assertIfError(err);
@@ -133,6 +125,7 @@ async function isAuthorized() {
       payload: {
         id: response.id,
         userType: response.userType,
+        csrfToken: response.token,
         userProfile,
       } as LoginActionPayload,
     } as LoginAction);
@@ -211,34 +204,27 @@ async function register(userType: UserType, body: RegistrationFormFields) {
 
   const backendOrigin = backendStore.getData().backendOrigin;
   try {
-    const response =
-      userType === UserType.Applicant
-        ? await apiRegisterApplicant(backendOrigin, {
-            firstName: body.firstName,
-            secondName: body.secondName,
-            birthDate: new Date(body.birthDate),
-            email: body.email,
-            password: body.password,
-          } as registerApplicantOptions)
-        : await apiRegisterEmployer(backendOrigin, {
-            firstName: body.firstName,
-            secondName: body.secondName,
-            email: body.email,
-            position: body.position,
-            companyName: body.companyName,
-            companyDescription: body.companyDescription,
-            companyWebsite: body.website,
-            password: body.password,
-          } as registerEmployerOptions);
-    const userProfile = await getUser(backendOrigin, userType, response.id);
-    storeManager.dispatch({
-      type: UserActions.Login,
-      payload: {
-        id: response.id,
-        userType,
-        userProfile,
-      },
-    });
+    if (userType === UserType.Applicant) {
+      await apiRegisterApplicant(backendOrigin, {
+        firstName: body.firstName,
+        secondName: body.secondName,
+        birthDate: new Date(body.birthDate),
+        email: body.email,
+        password: body.password,
+      } as registerApplicantOptions);
+    } else {
+      await apiRegisterEmployer(backendOrigin, {
+        firstName: body.firstName,
+        secondName: body.secondName,
+        email: body.email,
+        position: body.position,
+        companyName: body.companyName,
+        companyDescription: body.companyDescription,
+        companyWebsite: body.website,
+        password: body.password,
+      } as registerEmployerOptions);
+    }
+    isAuthorized();
   } catch {
     storeManager.dispatch({
       type: UserActions.Logout,
diff --git a/src/application/action_creators/vacancy_action_creators.ts b/src/application/action_creators/vacancy_action_creators.ts
index 085029b..a14f7c3 100644
--- a/src/application/action_creators/vacancy_action_creators.ts
+++ b/src/application/action_creators/vacancy_action_creators.ts
@@ -59,7 +59,8 @@ async function loadVacancy(id: number) {
 async function removeVacancy(id: number) {
   const backendOrigin = backendStore.getData().backendOrigin;
   try {
-    await deleteVacancy(backendOrigin, id);
+    const token = userStore.getData().csrfToken;
+    await deleteVacancy(backendOrigin, token, id);
     clearVacancy();
   } catch (err) {
     assertIfError(err);
@@ -89,7 +90,8 @@ async function loadApplyStatus(vacancyId: number) {
 async function applyVacancy(vacancyId: number) {
   const backendOrigin = backendStore.getData().backendOrigin;
   try {
-    await applyToVacancy(backendOrigin, vacancyId);
+    const token = userStore.getData().csrfToken;
+    await applyToVacancy(backendOrigin, token, vacancyId);
     storeManager.dispatch({
       type: VacancyActions.Apply,
     });
@@ -102,7 +104,8 @@ async function applyVacancy(vacancyId: number) {
 async function removeApplyVacancy(vacancyId: number) {
   const backendOrigin = backendStore.getData().backendOrigin;
   try {
-    await resetApplyToVacancy(backendOrigin, vacancyId);
+    const token = userStore.getData().csrfToken;
+    await resetApplyToVacancy(backendOrigin, token, vacancyId);
     storeManager.dispatch({
       type: VacancyActions.ResetApply,
     });
diff --git a/src/application/components/alert_window/alert_window.scss b/src/application/components/alert_window/alert_window.scss
new file mode 100644
index 0000000..61844c4
--- /dev/null
+++ b/src/application/components/alert_window/alert_window.scss
@@ -0,0 +1,17 @@
+.alert-window {
+  display: flex;
+  flex-direction: column;
+
+  &_theme-dark {
+    background-color: var(--color-background-800);
+    color: var(--color-main-100);
+  }
+
+  &__text {
+    font-size: var(--text-size-3);
+  }
+
+  &__button {
+    margin-top: var(--col-margin);
+  }
+}
diff --git a/src/application/components/alert_window/alert_window.tsx b/src/application/components/alert_window/alert_window.tsx
new file mode 100644
index 0000000..f0d89ee
--- /dev/null
+++ b/src/application/components/alert_window/alert_window.tsx
@@ -0,0 +1,25 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import './alert_window.scss';
+
+export interface AlertWindowProps {
+  elementClass: string;
+  text: string;
+  href: string;
+  buttonText: string;
+}
+export class AlertWindow extends Component {
+  constructor({ elementClass, text }: AlertWindowProps) {
+    super({ elementClass, text });
+  }
+  render() {
+    return (
+      <div className={`${this.props.elementClass} alert-window alert-window_theme-dark`}>
+        <div className="alert-window__text">{this.props.text}</div>
+        <a className="alert-window__button button button_main-primary" href={this.props.href}>
+          {this.props.buttonText}
+        </a>
+      </div>
+    );
+  }
+}
diff --git a/src/scss/_cv.scss b/src/application/components/cv_article/cv_article.scss
similarity index 54%
rename from src/scss/_cv.scss
rename to src/application/components/cv_article/cv_article.scss
index 9843cc9..5bc99e1 100644
--- a/src/scss/_cv.scss
+++ b/src/application/components/cv_article/cv_article.scss
@@ -1,27 +1,3 @@
-.cv-page {
-  display: grid;
-  align-items: start;
-  margin: auto;
-  width: 1280px;
-  padding-top: 32px;
-  grid-template-columns: 1fr 3fr;
-
-  &__profile-minicard {
-    background-color: var(--color-background-900);
-    border-radius: 25px;
-    padding: 16px 36px;
-    color: var(--color-main-100);
-  }
-
-  &__cv-container {
-    margin-left: 32px;
-    border-radius: 25px;
-    background-color: var(--color-background-900);
-  }
-}
-
-/* Vacancy article */
-
 .cv-article {
   display: flex;
   flex-direction: column;
@@ -119,69 +95,3 @@
     padding: 0 32px;
   }
 }
-
-/* Cv Edit Page */
-
-.cv-page-edit {
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: center;
-  max-width: 100vw;
-  width: 100%;
-  min-height: 100vh;
-
-  &__form-container {
-    margin: 32px 0;
-    padding: 20px;
-    border-radius: 14px;
-    width: 100%;
-    max-width: 600px;
-    box-sizing: border-box;
-    background-color: var(--color-background-900);
-  }
-
-  &__description-header {
-    font-size: var(--text-size-8);
-    color: var(--color-main-100);
-    text-align: center;
-  }
-}
-
-/* Cv Form */
-
-.cv-form {
-  &__position-ru {
-    margin-bottom: 10px;
-  }
-
-  &__position-en {
-    margin-bottom: 10px;
-  }
-
-  &__job-search-status {
-    margin-bottom: 10px;
-  }
-
-  &__working-experience {
-    margin-bottom: 20px;
-  }
-
-  &__description {
-    margin-bottom: 10px;
-  }
-
-  &__description-textarea {
-    resize: vertical;
-  }
-
-  &__working-experience-textarea {
-    resize: vertical;
-  }
-
-  &__button-container {
-    display: flex;
-    align-items: baseline;
-    gap: 20px;
-  }
-}
diff --git a/src/application/components/cv_article/cv_article.tsx b/src/application/components/cv_article/cv_article.tsx
new file mode 100644
index 0000000..78f2ddd
--- /dev/null
+++ b/src/application/components/cv_article/cv_article.tsx
@@ -0,0 +1,100 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { Cv } from '@/application/models/cv';
+import './cv_article.scss';
+import { UserType } from '@/application/models/user-type';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
+import { cvActionCreators } from '@/application/action_creators/cv_action_creators';
+import { profileActionCreators } from '@/application/action_creators/profile_action_creators';
+import { routerActionCreators } from '@/application/action_creators/router_action_creators';
+import {
+  ProfilePageParams,
+  ProfilePageStartingFrames,
+} from '@/application/pages/profile_page/profile_page';
+
+export interface CvArticleProps {
+  elementClass: string;
+  cv: Cv;
+  userType: UserType;
+  isOwner: boolean;
+}
+
+export class CvArticle extends Component {
+  constructor({ elementClass, cv, userType, isOwner }: CvArticleProps) {
+    super({ elementClass, cv, userType, isOwner });
+  }
+
+  private handleDelete = async (ev: Event) => {
+    ev.preventDefault();
+    const cv = this.props.cv as Cv;
+    try {
+      await cvActionCreators.removeCv(cv.id);
+      await profileActionCreators.loadProfile(UserType.Applicant, cv.applicantId);
+      routerActionCreators.navigate(
+        resolveUrl('myProfile', {
+          [ProfilePageParams.StartFrame]: ProfilePageStartingFrames.CvList,
+        }),
+      );
+    } catch {}
+  };
+  render() {
+    const cv = this.props.cv as Cv;
+    const userType = this.props.userType;
+    const isOwner = this.props.isOwner;
+    return (
+      <article className={`${this.props.elementClass} cv-article`}>
+        <div className="cv-article__header-container">
+          <div className="cv-article__header">
+            <h1 className="cv-article__header-text">{`${cv.positionRu} / ${cv.positionEn}`}</h1>
+            <div>
+              <span className="cv-article__job-search-status pill pill_main">
+                {cv.jobSearchStatus}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div className="cv-article__divider"></div>
+        <h2 className="cv-article__description-header">Описание и достижения</h2>
+        <div className="cv-article__description">{cv.description}</div>
+        <div className="cv-article__divider"></div>
+        <h2 className="cv-article__working-experience-header">Опыт работы</h2>
+        <div className="cv-article__working-experience">{cv.workingExperience}</div>
+        {userType === UserType.Employer ? (
+          <div className="cv-article__button-container">
+            <a
+              className="cv-article__another-button button button_main-secondary"
+              href={`${resolveUrl('profile', null)}?id=${cv.applicantId}&userType=applicant&from=cvList`}
+            >
+              Все резюме
+            </a>
+
+            <div className="cv-article__created-at">
+              {`последнее обновление: ${cv.updatedAt.toLocaleString('ru-RU')}`}
+            </div>
+          </div>
+        ) : (
+          isOwner && (
+            <div className="cv-article__button-container">
+              <a
+                className="cv-article__edit-button button button_main-primary"
+                href={`${resolveUrl('editCv', null)}?id=${cv.id}`}
+              >
+                Изменить
+              </a>
+              <button
+                type="button"
+                className="cv-article__delete-button button button_danger-secondary"
+                onClick={(ev: Event) => this.handleDelete(ev)}
+              >
+                Удалить
+              </button>
+              <div className="cv-article__created-at">
+                {`последнее обновление: ${cv.updatedAt.toLocaleString('ru-RU')}`}
+              </div>
+            </div>
+          )
+        )}
+      </article>
+    );
+  }
+}
diff --git a/src/application/components/input/input.tsx b/src/application/components/input/input.tsx
index cf372a1..3c1d1c0 100644
--- a/src/application/components/input/input.tsx
+++ b/src/application/components/input/input.tsx
@@ -2,6 +2,11 @@ import { Component } from '@/modules/vdom/virtual_node';
 import * as vdom from '@/modules/vdom/virtual_dom';
 import './input.scss';
 
+export interface Option {
+  value: string;
+  label: string;
+}
+
 export interface InputProps {
   elementClass?: string;
   id: string;
@@ -16,6 +21,7 @@ export interface InputProps {
   maxlength?: number;
   onFocusOut?: (ev: Event) => void;
   hasResizeVertical?: boolean;
+  options?: Array<Option>;
 }
 
 export class Input extends Component {
@@ -31,6 +37,7 @@ export class Input extends Component {
     onFocusOut,
     error = '',
     isValid,
+    options = [],
     maxlength,
     hasResizeVertical,
   }: InputProps) {
@@ -47,6 +54,7 @@ export class Input extends Component {
       onFocusOut,
       isValid,
       maxlength,
+      options,
       hasResizeVertical,
     });
   }
@@ -58,7 +66,17 @@ export class Input extends Component {
           {this.props.label}
           {this.props.isRequired ? <span className="input__required-sign">*</span> : ''}
         </label>
-        {this.props.type !== 'textarea' ? (
+        {this.props.type === 'textarea' && (
+          <textarea
+            className={`input__field ${this.props.isValid !== undefined ? (this.props.isValid ? 'input__field_ok' : 'input__field_error') : ''} ${this.props.hasResizeVertical ? 'input__field_resize-vertical' : ''}`}
+            name={this.props.name}
+            id={this.props.id}
+            maxlength={this.props.maxlength}
+          >
+            {this.props.value ?? ''}
+          </textarea>
+        )}
+        {this.props.type !== 'textarea' && this.props.type !== 'select' && (
           <input
             type={this.props.type}
             className={`input__field ${this.props.isValid !== undefined ? (this.props.isValid ? 'input__field_ok' : 'input__field_error') : ''}`}
@@ -69,14 +87,20 @@ export class Input extends Component {
             value={this.props.value}
             onFocusOut={this.props.onFocusOut}
           />
-        ) : (
-          <textarea
-            className={`input__field ${this.props.isValid !== undefined ? (this.props.isValid ? 'input__field_ok' : 'input__field_error') : ''} ${this.props.hasResizeVertical ? 'input__field_resize-vertical' : ''}`}
+        )}
+        {this.props.type === 'select' && (
+          <select
+            className={`input__field ${this.props.isValid !== undefined ? (this.props.isValid ? 'input__field_ok' : 'input__field_error') : ''}`}
             name={this.props.name}
             id={this.props.id}
+            value={this.props.value}
           >
-            {this.props.value ?? ''}
-          </textarea>
+            {(this.props.options as Option[]).map((option) => (
+              <option value={option.value} key={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
         )}
         {this.props.isValid === false && this.props.error !== '' ? (
           <span className="input__error-text">{this.props.error ?? false}</span>
diff --git a/src/application/components/vacancy_article/vacancy_article.tsx b/src/application/components/vacancy_article/vacancy_article.tsx
index 6147aaa..7fc4450 100644
--- a/src/application/components/vacancy_article/vacancy_article.tsx
+++ b/src/application/components/vacancy_article/vacancy_article.tsx
@@ -118,7 +118,7 @@ export class VacancyArticle extends Component {
               Удалить
             </button>
             <div className="vacancy-article__created-at">
-              {`последнее обновление: ${vacancy.createdAt.toLocaleString('ru-RU')}`}
+              {`последнее обновление: ${vacancy.updatedAt.toLocaleString('ru-RU')}`}
             </div>
           </div>
         )}
diff --git a/src/application/pages/cv_edit_page/cv_edit_page.scss b/src/application/pages/cv_edit_page/cv_edit_page.scss
new file mode 100644
index 0000000..73f9b41
--- /dev/null
+++ b/src/application/pages/cv_edit_page/cv_edit_page.scss
@@ -0,0 +1,48 @@
+@use '@/scss/variables' as v;
+
+.cv-edit-page {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  width: var(--4-col);
+  max-width: 425px;
+  padding: 16px;
+  margin-top: 16px;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  border-radius: var(--radius-m);
+  background-color: var(--color-background-900);
+
+  &__description-header {
+    font-size: var(--text-size-8);
+    color: var(--color-main-100);
+    text-align: center;
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__header {
+    text-align: center;
+  }
+
+  &__position-ru,
+  &__position-en,
+  &__job-search-status,
+  &__working-experience,
+  &__description {
+    margin-bottom: 20px;
+  }
+
+  &__button-container {
+    display: flex;
+    align-items: baseline;
+    gap: var(--col-margin);
+  }
+}
diff --git a/src/application/pages/cv_edit_page/cv_edit_page.tsx b/src/application/pages/cv_edit_page/cv_edit_page.tsx
new file mode 100644
index 0000000..f8ae83f
--- /dev/null
+++ b/src/application/pages/cv_edit_page/cv_edit_page.tsx
@@ -0,0 +1,248 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
+import { Input, Option } from '@/application/components/input/input';
+import './cv_edit_page.scss';
+import { cvActionCreators } from '@/application/action_creators/cv_action_creators';
+import { cvStore } from '@/application/stores/cv_store/cv_store';
+import { LoadingScreen } from '@/application/components/loading_screen/loading_screen';
+import { NotFoundPage } from '../not_found_page/not_found_page';
+import { routerActionCreators } from '@/application/action_creators/router_action_creators';
+import { userStore } from '@/application/stores/user_store/user_store';
+import { PageContainer } from '@/application/components/page_container/page_container';
+
+export enum CvEditPageParams {
+  Id = 'id',
+}
+
+export class CvEditPage extends Component {
+  private lastUrl: URL;
+  private failedToLoadCv: boolean = false;
+  private isCreatingCv: boolean = false;
+  private cvId?: number;
+  private invokedLoadingCv: boolean = false;
+  private jobSearchStatusOptions: Array<Option> = [
+    { value: 'Активно ищу работу', label: 'Активно ищу работу' },
+    { value: 'Не ищу работу', label: 'Не ищу работу' },
+  ];
+
+  constructor({ url }: { url: URL }) {
+    super({ url });
+    this.parseUrl();
+    if (this.isCreatingCv) {
+      cvActionCreators.clearCv();
+    }
+  }
+
+  didUpdate(): void {
+    super.didUpdate();
+    this.parseUrl();
+  }
+
+  private parseUrl(): void {
+    const url = this.props.url as URL;
+    this.isCreatingCv = url.pathname === resolveUrl('createCv', null).pathname;
+    if (!this.isCreatingCv) {
+      if (this.lastUrl === url) {
+        return;
+      }
+      this.cvId = Number(url.searchParams.get(CvEditPageParams.Id));
+      if (!this.cvId) {
+        this.failedToLoadCv = true;
+        return;
+      }
+      const cvData = cvStore.getData();
+      const cvSuccessfullyLoaded = cvData.loadedCv && cvData.cv && cvData.cv.id === this.cvId;
+      if (!cvSuccessfullyLoaded && !this.invokedLoadingCv) {
+        cvActionCreators.loadCv(this.cvId);
+        this.invokedLoadingCv = true;
+      } else {
+        if (this.invokedLoadingCv) {
+          this.failedToLoadCv = true;
+        }
+      }
+      this.lastUrl = url;
+    }
+  }
+
+  private handleSubmit = (ev: Event) => {
+    ev.preventDefault();
+    const formData = Object.fromEntries(new FormData(ev.target as HTMLFormElement));
+    if (this.isCreatingCv) {
+      cvActionCreators.createCv(formData).then(() => {
+        const cv = cvStore.getData().cv;
+        routerActionCreators.redirect(
+          resolveUrl('cv', { [CvEditPageParams.Id]: cv.id.toString() }),
+        );
+      });
+    } else {
+      cvActionCreators
+        .updateCv(this.cvId, formData)
+        .then(() =>
+          routerActionCreators.redirect(
+            resolveUrl('cv', { [CvEditPageParams.Id]: this.cvId.toString() }),
+          ),
+        );
+    }
+  };
+
+  handleFocusOut = (ev: Event) => {
+    const target = ev.target as HTMLInputElement;
+    const name = target.name;
+    const value = target.value;
+    cvActionCreators.submitCvFields({ [name]: value });
+  };
+
+  render() {
+    const userData = userStore.getData();
+    if (!userData.isLoggedIn) {
+      routerActionCreators.redirect(resolveUrl('login', null));
+      return <div>{false}</div>;
+    }
+    const formData = cvStore.getData().cvFormData;
+    if (!this.isCreatingCv) {
+      const cvData = cvStore.getData();
+      if (!cvData.loadedCv) {
+        return (
+          <PageContainer key="page-container" elementClass="profile-page__page-container">
+            <LoadingScreen key="loading-screen" />
+          </PageContainer>
+        );
+      }
+      if (this.failedToLoadCv || !cvData.cv) {
+        return <NotFoundPage url={this.props.url} key="not-found-page" />;
+      }
+    }
+    const cvData = cvStore.getData().cv;
+    return (
+      <main className="cv-edit-page cv-edit-page_theme-dark">
+        <h2 className="cv-edit-page__header">
+          {this.isCreatingCv ? 'Создание резюме' : 'Редактирование резюме'}
+        </h2>
+        <form
+          className="cv-edit-page__form"
+          method="POST"
+          novalidate
+          onSubmit={(ev: Event) => {
+            this.handleSubmit(ev);
+          }}
+        >
+          <Input
+            key="input-position-ru"
+            elementClass="cv-edit-page__position-ru"
+            id="position-ru"
+            name="positionRu"
+            type="text"
+            label="Должность"
+            placeholder="Актер"
+            isRequired={true}
+            maxlength={50}
+            onFocusOut={this.handleFocusOut}
+            value={
+              (formData && formData.positionRu && formData.positionRu.value) ||
+              (cvData && cvData.positionRu)
+            }
+            isValid={formData && formData.positionRu && formData.positionRu.isValid}
+            error={formData && formData.positionRu && formData.positionRu.errorMsg}
+          />
+          <Input
+            key="input-position-en"
+            elementClass="cv-edit-page__position-en"
+            id="position-en"
+            name="positionEn"
+            type="text"
+            label="Перевод должности на английский"
+            placeholder="Actor"
+            isRequired={true}
+            maxlength={50}
+            onFocusOut={this.handleFocusOut}
+            value={
+              (formData && formData.positionEn && formData.positionEn.value) ||
+              (cvData && cvData.positionEn)
+            }
+            isValid={formData && formData.positionEn && formData.positionEn.isValid}
+            error={formData && formData.positionEn && formData.positionEn.errorMsg}
+          />
+          <Input
+            key="input-job-search-status"
+            type="select"
+            label="Статус поиска работы"
+            options={this.jobSearchStatusOptions}
+            elementClass="cv-edit-page__job-search-status"
+            id="job-search-status"
+            name="jobSearchStatus"
+            isRequired={true}
+            onFocusOut={this.handleFocusOut}
+            value={
+              (formData && formData.jobSearchStatus && formData.jobSearchStatus.value) ||
+              (cvData && cvData.jobSearchStatus)
+            }
+            isValid={formData && formData.jobSearchStatus && formData.jobSearchStatus.isValid}
+            error={formData && formData.jobSearchStatus && formData.jobSearchStatus.errorMsg}
+          />
+          <Input
+            key="input-description"
+            type="textarea"
+            hasResizeVertical={true}
+            elementClass="cv-edit-page__description"
+            id="description"
+            name="description"
+            label="Описание и достижения"
+            placeholder="Расскажите о себе"
+            isRequired={true}
+            maxlength={500}
+            onFocusOut={this.handleFocusOut}
+            value={
+              (formData && formData.description && formData.description.value) ||
+              (cvData && cvData.description)
+            }
+            isValid={formData && formData.description && formData.description.isValid}
+            error={formData && formData.description && formData.description.errorMsg}
+          />
+          <Input
+            key="input-working-experience"
+            type="textarea"
+            hasResizeVertical={true}
+            elementClass="cv-edit-page__working-experience"
+            id="working-experience"
+            name="workingExperience"
+            label="Опыт работы"
+            placeholder="Расскажите о своем опыте работы"
+            isRequired={true}
+            maxlength={500}
+            onFocusOut={this.handleFocusOut}
+            value={
+              (formData && formData.workingExperience && formData.workingExperience.value) ||
+              (cvData && cvData.workingExperience)
+            }
+            isValid={formData && formData.workingExperience && formData.workingExperience.isValid}
+            error={formData && formData.workingExperience && formData.workingExperience.errorMsg}
+          />
+          <div className="cv-edit-page__button-container">
+            {this.isCreatingCv ? (
+              <button
+                type="submit"
+                className="cv-edit-page__submit-button button button_main-primary"
+              >
+                Создать
+              </button>
+            ) : (
+              <button
+                type="submit"
+                className="cv-edit-page__submit-button button button_main-primary"
+              >
+                Сохранить
+              </button>
+            )}
+            <a
+              className="cv-form__cancel-button button button_main-secondary"
+              href={resolveUrl('myProfile', { from: 'cvList' })}
+            >
+              В профиль
+            </a>
+          </div>
+        </form>
+      </main>
+    );
+  }
+}
diff --git a/src/application/pages/cv_page/cv_page.scss b/src/application/pages/cv_page/cv_page.scss
new file mode 100644
index 0000000..72eed12
--- /dev/null
+++ b/src/application/pages/cv_page/cv_page.scss
@@ -0,0 +1,32 @@
+@use '@/scss/variables' as v;
+
+.cv-page {
+  display: flex;
+  flex-direction: column-reverse;
+  width: var(--12-col);
+  margin-top: var(--col-margin);
+  align-items: start;
+  align-self: center;
+  gap: var(--col-margin);
+
+  &__profile-minicard {
+    width: var(--3-col);
+    background-color: var(--color-background-800);
+    border-radius: var(--radius-l);
+    padding: 16px;
+    color: var(--color-main-100);
+  }
+
+  &__cv-container {
+    width: var(--9-col);
+    max-width: var(--9-col);
+    border-radius: var(--radius-l);
+    background-color: var(--color-background-800);
+  }
+}
+@media screen and (min-width: v.$mobile-breakpoint) {
+  .cv-page {
+    display: flex;
+    flex-direction: row;
+  }
+}
diff --git a/src/application/pages/cv_page/cv_page.tsx b/src/application/pages/cv_page/cv_page.tsx
new file mode 100644
index 0000000..e4a1235
--- /dev/null
+++ b/src/application/pages/cv_page/cv_page.tsx
@@ -0,0 +1,108 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { cvStore } from '@/application/stores/cv_store/cv_store';
+import { cvActionCreators } from '@/application/action_creators/cv_action_creators';
+import { profileActionCreators } from '@/application/action_creators/profile_action_creators';
+import { UserType } from '@/application/models/user-type';
+import { profileStore } from '@/application/stores/profile_store/profile_store';
+import { PageContainer } from '@/application/components/page_container/page_container';
+import { NotFoundPage } from '../not_found_page/not_found_page';
+import { LoadingScreen } from '@/application/components/loading_screen/loading_screen';
+import { userStore } from '@/application/stores/user_store/user_store';
+import { ProfileMinicard } from '@/application/components/profile_minicard/profile_minicard';
+import { Applicant } from '@/application/models/applicant';
+import { CvArticle } from '@/application/components/cv_article/cv_article';
+import './cv_page.scss';
+
+export enum CvPageParams {
+  id = 'id',
+}
+
+export class CvPage extends Component {
+  private lastUrl: URL;
+  private failedToLoadCv: boolean = false;
+  private invokedLoadingCv: boolean = false;
+  private invokedLoadingProfile: boolean = false;
+
+  constructor({ url }: { url: URL }) {
+    super({ url });
+    this.parseUrl();
+  }
+
+  didUpdate(): void {
+    super.didUpdate();
+    this.parseUrl();
+  }
+
+  private parseUrl(): void {
+    const url = this.props.url as URL;
+    if (this.lastUrl === url) {
+      return;
+    }
+    const cvId = Number(url.searchParams.get(CvPageParams.id));
+    if (!cvId) {
+      this.failedToLoadCv = true;
+      return;
+    }
+    const cvData = cvStore.getData();
+    const cvSuccessfullyLoaded = cvData.loadedCv && cvData.cv && cvData.cv.id === cvId;
+    if (!cvSuccessfullyLoaded && !this.invokedLoadingCv) {
+      cvActionCreators.loadCv(cvId).then(() => {
+        const cv = cvStore.getData().cv;
+        this.invokedLoadingProfile = true;
+        if (!cv) {
+          return;
+        }
+        profileActionCreators.loadProfile(UserType.Applicant, cv.applicantId);
+      });
+      this.invokedLoadingCv = true;
+    }
+    this.lastUrl = url;
+  }
+
+  render() {
+    const cvData = cvStore.getData();
+    const profileData = profileStore.getData();
+    if (!cvData.loadedCv || !profileData.profileLoaded) {
+      return (
+        <PageContainer key="page-container" elementClass="cv-page__page-container">
+          <LoadingScreen key="loading-screen" />
+        </PageContainer>
+      );
+    }
+    if (this.failedToLoadCv || !cvData.cv || !profileData.userProfile) {
+      return <NotFoundPage url={this.props.url} key="not-found-page" />;
+    }
+    this.invokedLoadingCv = false;
+    this.invokedLoadingProfile = false;
+    const cv = cvData.cv;
+    const userData = userStore.getData();
+    const userType = userData.userType;
+    const userProfile = profileStore.getData().userProfile as Applicant;
+    const isOwner = userType === UserType.Applicant && userData.id === cv.applicantId;
+    return (
+      <PageContainer key="page-container" elementClass="cv-page__page-container">
+        <div className="cv-page">
+          <main className="cv-page__cv-container">
+            <CvArticle
+              key="cv-article"
+              elementClass="cv-page__cv-article"
+              cv={cv}
+              userType={userType}
+              isOwner={isOwner}
+            />
+          </main>
+          <div className="cv-page__side-column">
+            <ProfileMinicard
+              key="profile-minicard"
+              elementClass="cv-page__profile-minicard"
+              city={userProfile.city}
+              fullName={`${userProfile.firstName} ${userProfile.secondName}`}
+              contacts={userProfile.contacts}
+            />
+          </div>
+        </div>
+      </PageContainer>
+    );
+  }
+}
diff --git a/src/application/pages/vacancies_page/vacancies_page.tsx b/src/application/pages/vacancies_page/vacancies_page.tsx
index 19f1ef6..6b072f2 100644
--- a/src/application/pages/vacancies_page/vacancies_page.tsx
+++ b/src/application/pages/vacancies_page/vacancies_page.tsx
@@ -9,7 +9,13 @@ export class VacanciesPage extends Component {
   render() {
     return (
       <PageContainer key="page-container" elementClass="vacancies-page__page-container">
-        <h1 className="vacancies-page__header">Вакансии</h1>
+        <div className="vacancies-page vacancies-page_theme-dark">
+          <div className="vacancies-page__side-column"></div>
+          <div className="vacancies-page__content content-body content-body_theme-dark">
+            <h1 className="content-body__header">Вакансии на сегодня</h1>
+            <div className="content-body__vacancy-container vacancy-container ruler ruler_theme-dark ruler_direction-vertical"></div>
+          </div>
+        </div>
       </PageContainer>
     );
   }
diff --git a/src/application/stores/cv_store/cv_actions.ts b/src/application/stores/cv_store/cv_actions.ts
new file mode 100644
index 0000000..c202d27
--- /dev/null
+++ b/src/application/stores/cv_store/cv_actions.ts
@@ -0,0 +1,29 @@
+/** @fileoverview This file contains actions for cv store */
+
+import { Cv } from '@/application/models/cv';
+import { CvFormData } from './cv_store';
+
+export enum CvActions {
+  Update = 'cvUpdate',
+  Clear = 'cvClear',
+  FormSubmit = 'cvFormSubmit',
+}
+
+export interface UpdateActionPayload {
+  cv: Cv;
+  loaded: boolean;
+}
+
+export interface UpdateAction {
+  type: CvActions.Update;
+  payload: UpdateActionPayload;
+}
+
+export interface ClearAction {
+  type: CvActions.Clear;
+}
+
+export interface CvFormSubmitAction {
+  type: CvActions.FormSubmit;
+  payload: CvFormData;
+}
diff --git a/src/application/stores/cv_store/cv_store.ts b/src/application/stores/cv_store/cv_store.ts
new file mode 100644
index 0000000..b6f820e
--- /dev/null
+++ b/src/application/stores/cv_store/cv_store.ts
@@ -0,0 +1,50 @@
+import { Cv } from '@/application/models/cv';
+import { CvActions, UpdateActionPayload } from './cv_actions';
+import { Store } from '@/modules/store_manager/store';
+import { storeManager } from '@/modules/store_manager/store_manager';
+import { Action } from '@/modules/store_manager/action';
+import { FormValue } from '@/application/models/form_value';
+
+export interface CvData {
+  cv?: Cv;
+  loadedCv?: boolean;
+  cvFormData?: CvFormData;
+}
+export interface CvFormData {
+  positionRu?: FormValue;
+  positionEn?: FormValue;
+  jobSearchStatus?: FormValue;
+  description?: FormValue;
+  workingExperience?: FormValue;
+  isValid?: boolean;
+  errorMsg?: string;
+}
+
+function cvStoreReducer(state: CvData, action: Action) {
+  switch (action.type) {
+    case CvActions.Update: {
+      const payload = action.payload as UpdateActionPayload;
+      state.cv = payload.cv;
+      state.loadedCv = payload.loaded;
+      return state;
+    }
+    case CvActions.Clear: {
+      return {};
+    }
+    case CvActions.FormSubmit: {
+      const payload = action.payload as CvFormData;
+      if (!state.cvFormData) {
+        state.cvFormData = {};
+      }
+      Object.entries(payload).forEach(([key, value]) => {
+        (state.cvFormData as { [key: string]: unknown })[key] = value;
+      });
+      return state;
+    }
+  }
+  return state;
+}
+
+export const cvStore = new Store<CvData>({}, cvStoreReducer);
+
+storeManager.addStore(cvStore);
diff --git a/src/application/stores/user_store/user_actions.ts b/src/application/stores/user_store/user_actions.ts
index c84a01f..126c140 100644
--- a/src/application/stores/user_store/user_actions.ts
+++ b/src/application/stores/user_store/user_actions.ts
@@ -22,6 +22,7 @@ export interface LoginActionPayload {
   id: number;
   userType: UserType;
   userProfile: Applicant | Employer;
+  csrfToken?: string;
 }
 
 export interface LoginAction extends Action {
diff --git a/src/application/stores/user_store/user_store.ts b/src/application/stores/user_store/user_store.ts
index 9237c03..f469dc8 100644
--- a/src/application/stores/user_store/user_store.ts
+++ b/src/application/stores/user_store/user_store.ts
@@ -60,6 +60,7 @@ export interface UserData {
   userType?: UserType;
   russianUserType?: string;
   id?: number;
+  csrfToken?: string;
   userProfile?: Applicant | Employer;
   loginForm?: LoginFormData;
   registrationForm?: RegistrationFormData;
@@ -82,6 +83,7 @@ function userStoreReducer(state: UserData, action: Action) {
         id: payload.id,
         userProfile: payload.userProfile,
         loginForm: state.loginForm,
+        csrfToken: payload.csrfToken,
       };
     }
 
diff --git a/src/application/validators/validators.ts b/src/application/validators/validators.ts
index c2b78e0..fbe7b70 100644
--- a/src/application/validators/validators.ts
+++ b/src/application/validators/validators.ts
@@ -27,6 +27,15 @@ export function validateOk(value: unknown): FormValue {
   };
 }
 
+export function validateEnglish(value: string): FormValue {
+  const isValid = /^[a-zA-Z1-9\- ]+$/.test(value);
+  return {
+    value,
+    isValid,
+    errorMsg: isValid ? '' : 'Сюда нужно написать английский текст',
+  };
+}
+
 export function validateRequired(value: string): FormValue {
   return {
     value,
@@ -63,13 +72,15 @@ export function validateDateOfBirth(date: string): FormValue {
 
 export function validatorTrain(validators: { (value: string): FormValue }[]) {
   return function (field: string) {
-    let formValue: FormValue;
     for (const validator of validators) {
       const formValue = validator(field);
       if (!formValue.isValid) {
         return formValue;
       }
     }
-    return formValue;
+    return {
+      value: field,
+      isValid: true,
+    };
   };
 }
diff --git a/src/index.tsx b/src/index.tsx
index 1096496..534e346 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,7 @@
 import { Router } from '@/application/components/router/router';
 import * as vdom from '@/modules/vdom/virtual_dom';
 import { LoginPage } from '@/application/pages/login_page/login_page';
-// import { RegistrationPage } from './Pages/RegistrationPage/RegistrationPage';
-// import { ProfilePage } from './Pages/ProfilePage/ProfilePage';
-// import { VacancyPage } from './Pages/VacancyPage/VacancyPage';
-// import { VacancyEditPage } from './Pages/VacancyEditPage/VacancyEditPage';
 import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
-// import { CvPage } from './Pages/CvPage/CvPage';
-// import { CvEditPage } from './Pages/CvEditPage/CvEditPage';
 import { NotificationBox } from '@/Components/NotificationBox/NotificationBox';
 import { VacanciesPage } from '@/application/pages/vacancies_page/vacancies_page';
 import './scss/index.scss';
@@ -18,21 +12,14 @@ import { userActionCreators } from '@/application/action_creators/user_action_cr
 import { RegistrationPage } from '@/application/pages/registration_page/registration_page';
 import { ProfilePage } from '@/application/pages/profile_page/profile_page';
 import { VacancyPage } from './application/pages/vacancy_page/vacancy_page';
+import { CvPage } from './application/pages/cv_page/cv_page';
+import { CvEditPage } from './application/pages/cv_edit_page/cv_edit_page';
 
 // eslint-disable-next-line
 const notificationBox = new NotificationBox({
   existingElement: document.querySelector('.notification-box'),
 });
 
-// router.addRoute(resolveUrl('myProfile', null).pathname, ProfilePage);
-// router.addRoute(resolveUrl('profile', null).pathname, ProfilePage);
-// router.addRoute(resolveUrl('vacancy', null).pathname, VacancyPage);
-// router.addRoute(resolveUrl('createVacancy', null).pathname, VacancyEditPage);
-// router.addRoute(resolveUrl('editVacancy', null).pathname, VacancyEditPage);
-// router.addRoute(resolveUrl('cv', null).pathname, CvPage);
-// router.addRoute(resolveUrl('createCv', null).pathname, CvEditPage);
-// router.addRoute(resolveUrl('editCv', null).pathname, CvEditPage);
-
 const appRoot = new VirtualDomRoot(document.getElementById('app'));
 
 routerActionCreators.addRoute(resolveUrl('vacancies', null), VacanciesPage);
@@ -41,9 +28,18 @@ routerActionCreators.addRoute(resolveUrl('register', null), RegistrationPage);
 routerActionCreators.addRoute(resolveUrl('myProfile', null), ProfilePage);
 routerActionCreators.addRoute(resolveUrl('profile', null), ProfilePage);
 routerActionCreators.addRoute(resolveUrl('vacancy', null), VacancyPage);
+routerActionCreators.addRoute(resolveUrl('cv', null), CvPage);
+routerActionCreators.addRoute(resolveUrl('editCv', null), CvEditPage);
+routerActionCreators.addRoute(resolveUrl('createCv', null), CvEditPage);
 routerActionCreators.startRouting(new URL(location.href));
 
 userActionCreators.isAuthorized().finally(() => {
+  setInterval(
+    () => {
+      userActionCreators.isAuthorized();
+    },
+    1000 * 60 * 25,
+  ); // 25 min
   storeManager.bindVirtualDom(appRoot);
   appRoot.render(<Router key="router" />);
 });
diff --git a/src/modules/api/src/errors/errors.ts b/src/modules/api/src/errors/errors.ts
index 68e6bba..49e1b28 100644
--- a/src/modules/api/src/errors/errors.ts
+++ b/src/modules/api/src/errors/errors.ts
@@ -25,3 +25,11 @@ export class ResponseError extends Error {
     Object.setPrototypeOf(this, ResponseError.prototype);
   }
 }
+
+/** CsrfError happens when api returned csrf error */
+export class CsrfError extends Error {
+  constructor(message: string) {
+    super(message);
+    Object.setPrototypeOf(this, CsrfError.prototype);
+  }
+}
diff --git a/src/modules/api/src/handlers/applicant/profile.ts b/src/modules/api/src/handlers/applicant/profile.ts
index 1d9a298..58993f1 100644
--- a/src/modules/api/src/handlers/applicant/profile.ts
+++ b/src/modules/api/src/handlers/applicant/profile.ts
@@ -48,6 +48,7 @@ export interface updateApplicantProfileOptions {
  */
 export async function updateApplicantProfile(
   apiOrigin: URL,
+  token: string,
   {
     id,
     firstName,
@@ -65,10 +66,14 @@ export async function updateApplicantProfile(
   data.append('education', education);
   data.append('birthDate', birthDate.toISOString());
   data.append('contacts', contacts);
-  const response = await fetchCors(new URL(apiOrigin.href + `applicant/${id}/profile`), {
-    method: HttpMethod.Put,
-    credentials: 'include',
-    body: data,
-  });
+  const response = await fetchCors(
+    new URL(apiOrigin.href + `applicant/${id}/profile`),
+    {
+      method: HttpMethod.Put,
+      credentials: 'include',
+      body: data,
+    },
+    token,
+  );
   return (await unpackJsonResponseBody(response)) as Applicant;
 }
diff --git a/src/modules/api/src/handlers/auth/is_authenticated.ts b/src/modules/api/src/handlers/auth/is_authenticated.ts
index e4d66d4..9652700 100644
--- a/src/modules/api/src/handlers/auth/is_authenticated.ts
+++ b/src/modules/api/src/handlers/auth/is_authenticated.ts
@@ -1,15 +1,18 @@
 import { HttpMethod, fetchCors } from '@api/src/handlers/utils/fetch_with_cors';
 import { unpackJsonResponseBody } from '@api/src/handlers/utils/unpack_body';
-import { ShortUser } from '@api/src/responses/short_user';
+import { ShortUserWithToken } from '@api/src/responses/short_user';
 
 /** Check if user is logged in
  * @param apiOrigin The URL to send the check request to.
  * @returns A promise that resolves to the logged-in user.
  */
-export async function getUserAuthenticationStatus(apiOrigin: URL): Promise<ShortUser> {
+export async function getUserAuthenticationStatus(apiOrigin: URL): Promise<ShortUserWithToken> {
   const response = await fetchCors(new URL(apiOrigin.href + 'authorized'), {
     method: HttpMethod.Get,
     credentials: 'include',
   });
-  return (await unpackJsonResponseBody(response)) as ShortUser;
+  const csrf_token = response.headers.get('x-csrf-token');
+  const unpackedResponse = await unpackJsonResponseBody(response);
+  (unpackedResponse as { [key: string]: unknown }).token = csrf_token;
+  return unpackedResponse as ShortUserWithToken;
 }
diff --git a/src/modules/api/src/handlers/cv/cv.ts b/src/modules/api/src/handlers/cv/cv.ts
index 8fe3cfe..a97ea50 100644
--- a/src/modules/api/src/handlers/cv/cv.ts
+++ b/src/modules/api/src/handlers/cv/cv.ts
@@ -43,6 +43,7 @@ export interface createCvOptions {
  */
 export async function createCv(
   apiOrigin: URL,
+  token: string,
   { positionRu, positionEn, workingExperience, jobSearchStatus, description }: createCvOptions,
 ): Promise<Cv> {
   const data = new FormData();
@@ -51,11 +52,15 @@ export async function createCv(
   data.append('workingExperience', workingExperience);
   data.append('jobSearchStatus', jobSearchStatus);
   data.append('description', description);
-  const response = await fetchCors(new URL(apiOrigin.href + 'cv'), {
-    method: HttpMethod.Post,
-    credentials: 'include',
-    body: data,
-  });
+  const response = await fetchCors(
+    new URL(apiOrigin.href + 'cv'),
+    {
+      method: HttpMethod.Post,
+      credentials: 'include',
+      body: data,
+    },
+    token,
+  );
   return (await unpackJsonResponseBody(response)) as Cv;
 }
 
@@ -65,11 +70,15 @@ export async function createCv(
  * @param id - The ID of the CV to delete
  * @returns A promise that resolves to the deleted CV
  */
-export async function deleteCv(apiOrigin: URL, id: number): Promise<Cv> {
-  const response = await fetchCors(new URL(apiOrigin.href + `cv/${id}`), {
-    method: HttpMethod.Delete,
-    credentials: 'include',
-  });
+export async function deleteCv(apiOrigin: URL, token: string, id: number): Promise<Cv> {
+  const response = await fetchCors(
+    new URL(apiOrigin.href + `cv/${id}`),
+    {
+      method: HttpMethod.Delete,
+      credentials: 'include',
+    },
+    token,
+  );
   return (await unpackJsonResponseBody(response)) as Cv;
 }
 
@@ -90,6 +99,7 @@ interface updateCvOptions extends createCvOptions {
  */
 export async function updateCv(
   apiOrigin: URL,
+  token: string,
   { id, positionRu, positionEn, workingExperience, jobSearchStatus, description }: updateCvOptions,
 ): Promise<Cv> {
   const data = new FormData();
@@ -98,10 +108,14 @@ export async function updateCv(
   data.append('workingExperience', workingExperience);
   data.append('jobSearchStatus', jobSearchStatus);
   data.append('description', description);
-  const response = await fetchCors(new URL(apiOrigin.href + `cv/${id}`), {
-    method: HttpMethod.Put,
-    body: data,
-    credentials: 'include',
-  });
+  const response = await fetchCors(
+    new URL(apiOrigin.href + `cv/${id}`),
+    {
+      method: HttpMethod.Put,
+      body: data,
+      credentials: 'include',
+    },
+    token,
+  );
   return (await unpackJsonResponseBody(response)) as Cv;
 }
diff --git a/src/modules/api/src/handlers/employer/profile.ts b/src/modules/api/src/handlers/employer/profile.ts
index 52ad777..b2f0fb7 100644
--- a/src/modules/api/src/handlers/employer/profile.ts
+++ b/src/modules/api/src/handlers/employer/profile.ts
@@ -40,6 +40,7 @@ export interface updateEmployerProfileOptions {
  */
 export async function updateEmployerProfile(
   apiOrigin: URL,
+  token: string,
   { id, firstName, secondName, city, contacts }: updateEmployerProfileOptions,
 ): Promise<Employer> {
   const data = new FormData();
@@ -48,10 +49,14 @@ export async function updateEmployerProfile(
   data.append('city', city);
   data.append('contacts', contacts);
   data.append('id', id.toString());
-  const response = await fetchCors(new URL(apiOrigin.href + `employer/${id}/profile`), {
-    credentials: 'include',
-    method: HttpMethod.Put,
-    body: data,
-  });
+  const response = await fetchCors(
+    new URL(apiOrigin.href + `employer/${id}/profile`),
+    {
+      credentials: 'include',
+      method: HttpMethod.Put,
+      body: data,
+    },
+    token,
+  );
   return (await unpackJsonResponseBody(response)) as Employer;
 }
diff --git a/src/modules/api/src/handlers/utils/fetch_with_cors.ts b/src/modules/api/src/handlers/utils/fetch_with_cors.ts
index 76a9235..401915e 100644
--- a/src/modules/api/src/handlers/utils/fetch_with_cors.ts
+++ b/src/modules/api/src/handlers/utils/fetch_with_cors.ts
@@ -20,18 +20,21 @@ export interface FetchOptions {
  * @param url The url where fetch goes
  * @param method Http method
  * @param credentials Fetch credentials policy
+ * @param csrfToken CSRF token
  * @param body Request body
  * @returns A promise that resolves to the basic api response
  */
 export async function fetchCors(
   url: URL,
   { method = HttpMethod.Get, credentials, body }: FetchOptions,
+  csrfToken?: string,
 ): Promise<Response> {
   try {
     return fetch(url, {
       method,
       headers: {
         Accept: 'application/json',
+        'X-CSRF-Token': csrfToken ?? '',
       },
       mode: 'cors',
       credentials,
diff --git a/src/modules/api/src/handlers/utils/unpack_body.ts b/src/modules/api/src/handlers/utils/unpack_body.ts
index 51d2050..92393c7 100644
--- a/src/modules/api/src/handlers/utils/unpack_body.ts
+++ b/src/modules/api/src/handlers/utils/unpack_body.ts
@@ -1,4 +1,4 @@
-import { UnmarshallError, ResponseError } from '@api/src/errors/errors';
+import { UnmarshallError, ResponseError, CsrfError } from '@api/src/errors/errors';
 import { HTTP_STATUSCODE } from '@/modules/api/src/types/http_status_code';
 
 /** A common json response body of api handlers */
@@ -8,6 +8,11 @@ export interface BaseResponseBody {
   readonly body: unknown; // generalized response body
 }
 
+export enum CsrfErrors {
+  NoToken = 'csrf token is empty',
+  TokenExpired = 'csrf token expired',
+}
+
 /** unpackJsonResponseBody unpacks api response json body and throwing error
  * if something is wrong
  * @param response The response to unpack
@@ -27,6 +32,12 @@ export async function unpackJsonResponseBody(response: Response): Promise<unknow
     if (!responseBody.error) {
       throw new UnmarshallError('Expected error in json, but not found');
     }
+    if (
+      responseBody.error === CsrfErrors.NoToken ||
+      responseBody.error === CsrfErrors.TokenExpired
+    ) {
+      throw new CsrfError(responseBody.error);
+    }
     throw new ResponseError(responseBody.error);
   }
   if (!responseBody.body && responseBody.body !== null) {
diff --git a/src/modules/api/src/handlers/vacancy/appliers.ts b/src/modules/api/src/handlers/vacancy/appliers.ts
index 14c6e12..dd3b621 100644
--- a/src/modules/api/src/handlers/vacancy/appliers.ts
+++ b/src/modules/api/src/handlers/vacancy/appliers.ts
@@ -40,11 +40,19 @@ export async function getVacancyApplyStatus(apiOrigin: URL, id: number): Promise
  * @param id - The id of the vacancy.
  * @returns A promise that resolves to the application to that vacancy.
  */
-export async function applyToVacancy(apiOrigin: URL, id: number): Promise<Application> {
-  const response = await fetchCors(new URL(apiOrigin.href + `vacancy/${id}/subscription`), {
-    method: HttpMethod.Post,
-    credentials: 'include',
-  });
+export async function applyToVacancy(
+  apiOrigin: URL,
+  token: string,
+  id: number,
+): Promise<Application> {
+  const response = await fetchCors(
+    new URL(apiOrigin.href + `vacancy/${id}/subscription`),
+    {
+      method: HttpMethod.Post,
+      credentials: 'include',
+    },
+    token,
+  );
   return (await unpackJsonResponseBody(response)) as Application;
 }
 
@@ -54,10 +62,18 @@ export async function applyToVacancy(apiOrigin: URL, id: number): Promise<Applic
  * @param id - The id of the vacancy.
  * @returns A promise that resolves to null;
  */
-export async function resetApplyToVacancy(apiOrigin: URL, id: number): Promise<Application> {
-  const response = await fetchCors(new URL(apiOrigin.href + `vacancy/${id}/subscription`), {
-    method: HttpMethod.Delete,
-    credentials: 'include',
-  });
+export async function resetApplyToVacancy(
+  apiOrigin: URL,
+  token: string,
+  id: number,
+): Promise<Application> {
+  const response = await fetchCors(
+    new URL(apiOrigin.href + `vacancy/${id}/subscription`),
+    {
+      method: HttpMethod.Delete,
+      credentials: 'include',
+    },
+    token,
+  );
   return (await unpackJsonResponseBody(response)) as null;
 }
diff --git a/src/modules/api/src/handlers/vacancy/vacancy.ts b/src/modules/api/src/handlers/vacancy/vacancy.ts
index 22954c5..8029540 100644
--- a/src/modules/api/src/handlers/vacancy/vacancy.ts
+++ b/src/modules/api/src/handlers/vacancy/vacancy.ts
@@ -41,6 +41,7 @@ export interface createVacancyOptions {
  */
 export async function createVacancy(
   apiOrigin: URL,
+  token: string,
   { position, salary, location, description, workType, positionGroup }: createVacancyOptions,
 ): Promise<Vacancy> {
   const data = new FormData();
@@ -50,11 +51,15 @@ export async function createVacancy(
   data.append('description', description);
   data.append('workType', workType);
   data.append('group', positionGroup);
-  const response = await fetchCors(new URL(apiOrigin + `vacancy`), {
-    method: HttpMethod.Post,
-    body: data,
-    credentials: 'include',
-  });
+  const response = await fetchCors(
+    new URL(apiOrigin + `vacancy`),
+    {
+      method: HttpMethod.Post,
+      body: data,
+      credentials: 'include',
+    },
+    token,
+  );
   return (await unpackJsonResponseBody(response)) as Vacancy;
 }
 
@@ -63,11 +68,15 @@ export async function createVacancy(
  * @param id The id of the vacancy to delete
  * @returns A promise that resolves to the deleted vacancy
  */
-export async function deleteVacancy(apiOrigin: URL, id: number): Promise<Vacancy> {
-  const response = await fetchCors(new URL(apiOrigin.href + `vacancy/${id}`), {
-    method: HttpMethod.Delete,
-    credentials: 'include',
-  });
+export async function deleteVacancy(apiOrigin: URL, token: string, id: number): Promise<Vacancy> {
+  const response = await fetchCors(
+    new URL(apiOrigin.href + `vacancy/${id}`),
+    {
+      method: HttpMethod.Delete,
+      credentials: 'include',
+    },
+    token,
+  );
   return (await unpackJsonResponseBody(response)) as Vacancy;
 }
 
@@ -89,6 +98,7 @@ interface updateVacancyOptions extends createVacancyOptions {
  */
 export async function updateVacancy(
   apiOrigin: URL,
+  token: string,
   { id, salary, position, location, description, workType, positionGroup }: updateVacancyOptions,
 ): Promise<Vacancy> {
   const data = new FormData();
@@ -98,10 +108,14 @@ export async function updateVacancy(
   data.append('description', description);
   data.append('workType', workType);
   data.append('group', positionGroup);
-  const response = await fetchCors(new URL(apiOrigin.href + `vacancy/${id}`), {
-    method: HttpMethod.Put,
-    body: data,
-    credentials: 'include',
-  });
+  const response = await fetchCors(
+    new URL(apiOrigin.href + `vacancy/${id}`),
+    {
+      method: HttpMethod.Put,
+      body: data,
+      credentials: 'include',
+    },
+    token,
+  );
   return (await unpackJsonResponseBody(response)) as Vacancy;
 }
diff --git a/src/modules/api/src/responses/short_user.ts b/src/modules/api/src/responses/short_user.ts
index eed594d..1e8a1a5 100644
--- a/src/modules/api/src/responses/short_user.ts
+++ b/src/modules/api/src/responses/short_user.ts
@@ -5,3 +5,7 @@ export interface ShortUser {
   id: number;
   userType: UserType;
 }
+
+export interface ShortUserWithToken extends ShortUser {
+  token: string;
+}
diff --git a/src/scss/_common.scss b/src/scss/_common.scss
index bfa43e5..3f0050d 100644
--- a/src/scss/_common.scss
+++ b/src/scss/_common.scss
@@ -22,30 +22,6 @@
   }
 }
 
-/* Alert window component */
-
-.alert-window {
-  display: flex;
-  flex-direction: column;
-
-  &_theme-dark {
-    background-color: var(--color-background-800);
-    color: var(--color-main-100);
-  }
-
-  &__text {
-    font-size: var(--text-size-3);
-  }
-
-  &__button {
-    margin-top: 10px;
-  }
-}
-
-.hidden {
-  display: none !important;
-}
-
 .pill {
   text-align: center;
   &_main {
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 8aa3925..d04cdef 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -2,7 +2,6 @@
 @use 'button';
 @use 'vacancies';
 @use 'vacancy';
-@use 'cv';
 @use 'common';
 @use 'variables' as v;
 

From bd9b953332b7469f730d3e008dc931ba60dd5ac5 Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Mon, 16 Dec 2024 09:12:13 +0300
Subject: [PATCH 14/17] feature: favorite vacancies

---
 .../profile_action_creators.ts                |  6 ++
 .../vacancy_action_creators.ts                | 64 ++++++++++++++++++-
 src/application/components/header/header.tsx  |  9 +++
 .../components/item_list/item_list.tsx        | 26 ++++----
 .../item_list_child/item_list_child.scss      |  1 +
 .../vacancy_article/vacancy_article.scss      | 13 +++-
 .../vacancy_article/vacancy_article.tsx       | 31 ++++++++-
 .../pages/profile_page/profile_page.tsx       | 35 ++++++++--
 .../pages/vacancy_page/vacancy_page.tsx       |  2 +
 .../stores/profile_store/profile_actions.ts   |  6 ++
 .../stores/profile_store/profile_store.ts     |  7 ++
 .../stores/vacancy_store/vacancy_actions.ts   | 10 +++
 .../stores/vacancy_store/vacancy_store.ts     | 12 ++++
 src/modules/api/api.ts                        |  5 ++
 .../handlers/vacancy/applicant_vacancies.ts   | 46 +++++++++++++
 .../api/src/handlers/vacancy/appliers.ts      | 18 ++++--
 src/public/img/card-bookmark-filled.svg       |  3 +
 src/public/img/card-bookmark-whole.svg        |  3 +
 src/public/img/card-bookmark.svg              |  1 -
 19 files changed, 268 insertions(+), 30 deletions(-)
 create mode 100644 src/modules/api/src/handlers/vacancy/applicant_vacancies.ts
 create mode 100644 src/public/img/card-bookmark-filled.svg
 create mode 100644 src/public/img/card-bookmark-whole.svg
 delete mode 100644 src/public/img/card-bookmark.svg

diff --git a/src/application/action_creators/profile_action_creators.ts b/src/application/action_creators/profile_action_creators.ts
index 71a012d..3e93367 100644
--- a/src/application/action_creators/profile_action_creators.ts
+++ b/src/application/action_creators/profile_action_creators.ts
@@ -7,6 +7,7 @@ import { ProfileActions } from '../stores/profile_store/profile_actions';
 import { UserType } from '../models/user-type';
 import {
   getApplicantCvs,
+  getApplicantFavoriteVacancies,
   getEmployerVacancies,
   updateApplicantProfile,
   updateEmployerProfile,
@@ -72,6 +73,11 @@ async function loadProfile(userType: UserType, id: number) {
           type: ProfileActions.UpdateCvList,
           payload: cvList.map((cv) => makeCvFromApi(cv)),
         });
+        const favoriteVacancyList = await getApplicantFavoriteVacancies(backendOrigin, id);
+        storeManager.dispatch({
+          type: ProfileActions.UpdateFavoriteVacancyList,
+          payload: favoriteVacancyList.map((vacancy) => makeVacancyFromApi(vacancy)),
+        });
         break;
       }
     }
diff --git a/src/application/action_creators/vacancy_action_creators.ts b/src/application/action_creators/vacancy_action_creators.ts
index a14f7c3..2d02545 100644
--- a/src/application/action_creators/vacancy_action_creators.ts
+++ b/src/application/action_creators/vacancy_action_creators.ts
@@ -13,6 +13,9 @@ import {
   getVacancy,
   getVacancyAppliers,
   getVacancyApplyStatus,
+  addVacancyToFavorites,
+  getApplicantFavoriteVacancies,
+  removeVacancyFromFavorites,
   resetApplyToVacancy,
 } from '@/modules/api/api';
 import { assertIfError } from '@/modules/common_utils/asserts/asserts';
@@ -71,7 +74,11 @@ async function removeVacancy(id: number) {
 async function loadApplyStatus(vacancyId: number) {
   const backendOrigin = backendStore.getData().backendOrigin;
   try {
-    const application = (await getVacancyApplyStatus(backendOrigin, vacancyId)) as Application;
+    const application = (await getVacancyApplyStatus(
+      backendOrigin,
+      userStore.getData().csrfToken,
+      vacancyId,
+    )) as Application;
     if (application.isSubscribed) {
       storeManager.dispatch({
         type: VacancyActions.Apply,
@@ -87,6 +94,30 @@ async function loadApplyStatus(vacancyId: number) {
   }
 }
 
+async function loadFavoriteStatus(vacancyId: number) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  try {
+    const userData = userStore.getData();
+    if (userData.userType !== UserType.Applicant) {
+      return;
+    }
+    const favoriteVacancyList = await getApplicantFavoriteVacancies(backendOrigin, userData.id);
+    const isFavorite = favoriteVacancyList.some((vacancy) => vacancy.id === vacancyId);
+    if (isFavorite) {
+      storeManager.dispatch({
+        type: VacancyActions.AddToFavorite,
+      });
+    } else {
+      storeManager.dispatch({
+        type: VacancyActions.RemoveFromFavorite,
+      });
+    }
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+  }
+}
+
 async function applyVacancy(vacancyId: number) {
   const backendOrigin = backendStore.getData().backendOrigin;
   try {
@@ -101,6 +132,34 @@ async function applyVacancy(vacancyId: number) {
   }
 }
 
+async function addVacancyToFavorite(vacancyId: number) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  try {
+    const token = userStore.getData().csrfToken;
+    await addVacancyToFavorites(backendOrigin, token, vacancyId);
+    storeManager.dispatch({
+      type: VacancyActions.AddToFavorite,
+    });
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+  }
+}
+
+async function removeVacancyFromFavorite(vacancyId: number) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  try {
+    const token = userStore.getData().csrfToken;
+    await removeVacancyFromFavorites(backendOrigin, token, vacancyId);
+    storeManager.dispatch({
+      type: VacancyActions.RemoveFromFavorite,
+    });
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+  }
+}
+
 async function removeApplyVacancy(vacancyId: number) {
   const backendOrigin = backendStore.getData().backendOrigin;
   try {
@@ -124,8 +183,11 @@ function clearVacancy() {
 export const vacancyActionCreators = {
   loadVacancy,
   loadApplyStatus,
+  loadFavoriteStatus,
   applyVacancy,
   removeApplyVacancy,
   clearVacancy,
   removeVacancy,
+  addVacancyToFavorite,
+  removeVacancyFromFavorite,
 };
diff --git a/src/application/components/header/header.tsx b/src/application/components/header/header.tsx
index 04f9e2c..5c180d3 100644
--- a/src/application/components/header/header.tsx
+++ b/src/application/components/header/header.tsx
@@ -79,6 +79,15 @@ export class Header extends Component {
                     Мои вакансии
                   </a>
                 )}
+                {userData.userType === UserType.Applicant && (
+                  <a
+                    className="header__vacancy-button menu__element"
+                    href={resolveUrl('myProfile', { from: 'vacancyList' }).toString()}
+                  >
+                    <img className="menu__element-icon" src={vacancyMenuIconSvg} />
+                    Мои избранные вакансии
+                  </a>
+                )}
                 <a
                   className="header__logout-button menu__element"
                   onClick={() => userActionCreators.logout()}
diff --git a/src/application/components/item_list/item_list.tsx b/src/application/components/item_list/item_list.tsx
index ecec1ca..94810d5 100644
--- a/src/application/components/item_list/item_list.tsx
+++ b/src/application/components/item_list/item_list.tsx
@@ -15,18 +15,20 @@ export class ItemList extends Component {
     super({ elementClass, isOwner, addHref, childData });
   }
   render() {
-    const listItems = (this.props.childData as Array<ItemListChildProps>).map((childData) => {
-      return (
-        <ItemListChild
-          elementClass="item-list__item"
-          title={childData.title}
-          goToLink={childData.goToLink}
-          editLink={childData.editLink}
-          handleDelete={childData.handleDelete}
-          isOwner={childData.isOwner}
-        />
-      );
-    });
+    const listItems =
+      this.props.childData &&
+      (this.props.childData as Array<ItemListChildProps>).map((childData) => {
+        return (
+          <ItemListChild
+            elementClass="item-list__item"
+            title={childData.title}
+            goToLink={childData.goToLink}
+            editLink={childData.editLink}
+            handleDelete={childData.handleDelete}
+            isOwner={childData.isOwner}
+          />
+        );
+      });
     return (
       <div className={`${this.props.elementClass} item-list`}>
         {this.props.isOwner && (
diff --git a/src/application/components/item_list/item_list_child/item_list_child.scss b/src/application/components/item_list/item_list_child/item_list_child.scss
index 408bbe8..ef385b5 100644
--- a/src/application/components/item_list/item_list_child/item_list_child.scss
+++ b/src/application/components/item_list/item_list_child/item_list_child.scss
@@ -11,6 +11,7 @@
     font-size: var(--text-size-7);
     color: var(--color-main-100);
     text-decoration: none;
+    cursor: pointer;
   }
 
   &__button-container {
diff --git a/src/application/components/vacancy_article/vacancy_article.scss b/src/application/components/vacancy_article/vacancy_article.scss
index 104c02a..bcc8ecc 100644
--- a/src/application/components/vacancy_article/vacancy_article.scss
+++ b/src/application/components/vacancy_article/vacancy_article.scss
@@ -8,6 +8,17 @@
     justify-content: start;
     align-items: center;
     padding: var(--col-margin);
+    flex-grow: 1;
+  }
+
+  &__bookmark {
+    justify-self: end;
+    align-self: start;
+    width: 32px;
+    height: 32px;
+    &_active {
+      color: var(--color-support-500);
+    }
   }
 
   &__company-picture {
@@ -34,13 +45,11 @@
   }
 
   &__apply-button {
-    margin-right: 10px;
     box-shadow: none;
     padding: 10px 20px;
   }
 
   &__reset-apply-button {
-    margin-right: 10px;
     box-shadow: none;
     padding: 10px 20px;
   }
diff --git a/src/application/components/vacancy_article/vacancy_article.tsx b/src/application/components/vacancy_article/vacancy_article.tsx
index 7fc4450..b432d54 100644
--- a/src/application/components/vacancy_article/vacancy_article.tsx
+++ b/src/application/components/vacancy_article/vacancy_article.tsx
@@ -11,6 +11,8 @@ import {
   ProfilePageStartingFrames,
 } from '@/application/pages/profile_page/profile_page';
 import { profileActionCreators } from '@/application/action_creators/profile_action_creators';
+import BookmarkIconFilled from '@static/img/card-bookmark-filled.svg';
+import BookmarkIconWhole from '@static/img/card-bookmark-whole.svg';
 
 export interface VacancyArticleProps {
   elementClass: string;
@@ -18,11 +20,19 @@ export interface VacancyArticleProps {
   userType: UserType;
   isOwner: boolean;
   isApplied: boolean;
+  isFavorite: boolean;
 }
 
 export class VacancyArticle extends Component {
-  constructor({ elementClass, vacancy, userType, isOwner, isApplied }: VacancyArticleProps) {
-    super({ elementClass, vacancy, userType, isOwner, isApplied });
+  constructor({
+    elementClass,
+    vacancy,
+    userType,
+    isOwner,
+    isApplied,
+    isFavorite,
+  }: VacancyArticleProps) {
+    super({ elementClass, vacancy, userType, isOwner, isApplied, isFavorite });
   }
 
   private handleDelete = async (ev: Event) => {
@@ -49,6 +59,16 @@ export class VacancyArticle extends Component {
     vacancyActionCreators.removeApplyVacancy((this.props.vacancy as Vacancy).id);
   };
 
+  private handleFavorite = async (ev: Event) => {
+    ev.preventDefault();
+    vacancyActionCreators.addVacancyToFavorite((this.props.vacancy as Vacancy).id);
+  };
+
+  private handleRemoveFavorite = async (ev: Event) => {
+    ev.preventDefault();
+    vacancyActionCreators.removeVacancyFromFavorite((this.props.vacancy as Vacancy).id);
+  };
+
   render() {
     const vacancy = this.props.vacancy as Vacancy;
     return (
@@ -65,6 +85,13 @@ export class VacancyArticle extends Component {
               <span className="vacancy-summary__work-type pill pill_main">{vacancy.workType}</span>
             </div>
           </div>
+          {this.props.userType === UserType.Applicant && (
+            <img
+              src={this.props.isFavorite ? BookmarkIconFilled : BookmarkIconWhole}
+              className={`vacancy-article__bookmark ${this.props.isFavorite ? 'vacancy-article__bookmark_active' : ''}`}
+              onClick={this.props.isFavorite ? this.handleRemoveFavorite : this.handleFavorite}
+            />
+          )}
         </div>
         <div className="vacancy-article__divider"></div>
         <div className="vacancy-article__description">{vacancy.description}</div>
diff --git a/src/application/pages/profile_page/profile_page.tsx b/src/application/pages/profile_page/profile_page.tsx
index d655b66..48c804f 100644
--- a/src/application/pages/profile_page/profile_page.tsx
+++ b/src/application/pages/profile_page/profile_page.tsx
@@ -115,10 +115,7 @@ export class ProfilePage extends Component {
         break;
       }
       case ProfilePageStartingFrames.VacancyList: {
-        this.startFrom =
-          this.userType === UserType.Employer
-            ? ProfilePageStartingFrames.VacancyList
-            : ProfilePageStartingFrames.Profile;
+        this.startFrom = ProfilePageStartingFrames.VacancyList;
         break;
       }
       default: {
@@ -132,11 +129,15 @@ export class ProfilePage extends Component {
         break;
       }
       case ProfilePageStartingFrames.PortfolioList: {
-        this.activeFrameIdx = 2;
+        this.activeFrameIdx = 3;
         break;
       }
       case ProfilePageStartingFrames.VacancyList: {
-        this.activeFrameIdx = 1;
+        if (this.userType === UserType.Applicant) {
+          this.activeFrameIdx = 2;
+        } else {
+          this.activeFrameIdx = 1;
+        }
         break;
       }
       default: {
@@ -170,6 +171,7 @@ export class ProfilePage extends Component {
     const profileForm = profileData.profileForm;
     const cvList = profileData.cvList;
     const vacancyList = profileData.vacancyList;
+    const favoriteVacancyList = profileData.favoriteVacancyList;
     return (
       <PageContainer key="page-container" elementClass="profile-page__page-container">
         <div class="profile-page" key="profile-page">
@@ -179,7 +181,9 @@ export class ProfilePage extends Component {
             activeFrameIndex={this.activeFrameIdx}
             setActiveFrameIndex={(idx: number) => this.setActiveFrameIdx(idx)}
             childrenLabels={
-              this.userType === UserType.Applicant ? ['Профиль', 'Резюме'] : ['Профиль', 'Вакансии']
+              this.userType === UserType.Applicant
+                ? ['Профиль', 'Резюме', 'Избранные вакансии']
+                : ['Профиль', 'Вакансии']
             }
           >
             <ReadUpdateFormBox
@@ -260,6 +264,23 @@ export class ProfilePage extends Component {
                 }
               />
             )}
+            {this.userType === UserType.Applicant && (
+              <ItemList
+                key="favorite-vacancy-list"
+                elementClass="profile-page__favorite-vacancy-list"
+                isOwner={false}
+                childData={
+                  favoriteVacancyList instanceof Array &&
+                  favoriteVacancyList.map((vacancy) => {
+                    return {
+                      goToLink: resolveUrl('vacancy', { id: vacancy.id.toString() }),
+                      title: vacancy.position,
+                      isOwner: false,
+                    };
+                  })
+                }
+              />
+            )}
           </FrameSeries>
           <ProfileMinicard
             elementClass="profile-page__profile-minicard"
diff --git a/src/application/pages/vacancy_page/vacancy_page.tsx b/src/application/pages/vacancy_page/vacancy_page.tsx
index b85afad..d81261b 100644
--- a/src/application/pages/vacancy_page/vacancy_page.tsx
+++ b/src/application/pages/vacancy_page/vacancy_page.tsx
@@ -57,6 +57,7 @@ export class VacancyPage extends Component {
       });
       if (userStore.getData().userType === UserType.Applicant) {
         vacancyActionCreators.loadApplyStatus(vacancyId);
+        vacancyActionCreators.loadFavoriteStatus(vacancyId);
       }
       this.invokedLoadingVacancy = true;
     }
@@ -95,6 +96,7 @@ export class VacancyPage extends Component {
               userType={userType}
               isOwner={isOwner}
               isApplied={vacancyData.applied}
+              isFavorite={vacancyData.favorite}
             />
           </main>
           <div className="vacancy-page__side-column">
diff --git a/src/application/stores/profile_store/profile_actions.ts b/src/application/stores/profile_store/profile_actions.ts
index 4347298..55428aa 100644
--- a/src/application/stores/profile_store/profile_actions.ts
+++ b/src/application/stores/profile_store/profile_actions.ts
@@ -13,6 +13,7 @@ export enum ProfileActions {
   ProfileFormReset = 'profileFormReset',
   UpdateVacancyList = 'updateVacancyList',
   UpdateCvList = 'updateCvList',
+  UpdateFavoriteVacancyList = 'updateFavoriteVacancyList',
 }
 
 export interface UpdateProfileAction {
@@ -25,6 +26,11 @@ export interface UpdateVacancyListAction {
   payload: Vacancy[];
 }
 
+export interface UpdateFavoriteVacancyListAction {
+  type: ProfileActions.UpdateFavoriteVacancyList;
+  payload: Vacancy[];
+}
+
 export interface UpdateCvListAction {
   type: ProfileActions.UpdateCvList;
   payload: Cv[];
diff --git a/src/application/stores/profile_store/profile_store.ts b/src/application/stores/profile_store/profile_store.ts
index 00b3d1e..cb8cd64 100644
--- a/src/application/stores/profile_store/profile_store.ts
+++ b/src/application/stores/profile_store/profile_store.ts
@@ -36,6 +36,7 @@ export interface ProfileData {
   profileForm?: ProfileFormData;
   vacancyList?: Vacancy[];
   cvList?: Cv[];
+  favoriteVacancyList?: Vacancy[];
 }
 
 function profileStoreReducer(state: ProfileData, action: Action) {
@@ -73,6 +74,12 @@ function profileStoreReducer(state: ProfileData, action: Action) {
       state.cvList = payload;
       return state;
     }
+
+    case ProfileActions.UpdateFavoriteVacancyList: {
+      const payload = action.payload as Vacancy[];
+      state.favoriteVacancyList = payload;
+      return state;
+    }
   }
   return state;
 }
diff --git a/src/application/stores/vacancy_store/vacancy_actions.ts b/src/application/stores/vacancy_store/vacancy_actions.ts
index dd3bb73..1a11409 100644
--- a/src/application/stores/vacancy_store/vacancy_actions.ts
+++ b/src/application/stores/vacancy_store/vacancy_actions.ts
@@ -6,6 +6,8 @@ import { Applicant } from '@/application/models/applicant';
 export enum VacancyActions {
   Apply = 'vacancyApply',
   ResetApply = 'vacancyResetApply',
+  AddToFavorite = 'vacancyAddToFavorite',
+  RemoveFromFavorite = 'vacancyRemoveFromFavorite',
   Update = 'vacancyUpdate',
   Clear = 'vacancyClear',
 }
@@ -29,6 +31,14 @@ export interface ResetApplyAction {
   type: VacancyActions.ResetApply;
 }
 
+export interface AddToFavoriteAction {
+  type: VacancyActions.AddToFavorite;
+}
+
+export interface RemoveFromFavoriteAction {
+  type: VacancyActions.RemoveFromFavorite;
+}
+
 export interface ClearAction {
   type: VacancyActions.Clear;
 }
diff --git a/src/application/stores/vacancy_store/vacancy_store.ts b/src/application/stores/vacancy_store/vacancy_store.ts
index 004f8df..a294376 100644
--- a/src/application/stores/vacancy_store/vacancy_store.ts
+++ b/src/application/stores/vacancy_store/vacancy_store.ts
@@ -9,6 +9,7 @@ export interface VacancyData {
   vacancy?: Vacancy;
   loadedVacancy?: boolean;
   applied?: boolean;
+  favorite?: boolean;
   appliers?: Array<Applicant>;
 }
 
@@ -33,6 +34,17 @@ function vacancyStoreReducer(state: VacancyData, action: Action) {
       state.applied = false;
       return state;
     }
+
+    case VacancyActions.AddToFavorite: {
+      state.favorite = true;
+      return state;
+    }
+
+    case VacancyActions.RemoveFromFavorite: {
+      state.favorite = false;
+      return state;
+    }
+
     case VacancyActions.Clear: {
       return {};
     }
diff --git a/src/modules/api/api.ts b/src/modules/api/api.ts
index 6685092..226f4d5 100644
--- a/src/modules/api/api.ts
+++ b/src/modules/api/api.ts
@@ -10,6 +10,11 @@ export { getApplicantCvs } from './src/handlers/cv/applicant_cv';
 export { createCv, deleteCv, getCv, updateCv } from './src/handlers/cv/cv';
 export { getEmployer, updateEmployerProfile } from './src/handlers/employer/profile';
 export { getApplicantPortfolios } from './src/handlers/portfolio/applicant_portfolios';
+export {
+  getApplicantFavoriteVacancies,
+  addVacancyToFavorites,
+  removeVacancyFromFavorites,
+} from './src/handlers/vacancy/applicant_vacancies';
 export {
   applyToVacancy,
   getVacancyAppliers,
diff --git a/src/modules/api/src/handlers/vacancy/applicant_vacancies.ts b/src/modules/api/src/handlers/vacancy/applicant_vacancies.ts
new file mode 100644
index 0000000..63fdd22
--- /dev/null
+++ b/src/modules/api/src/handlers/vacancy/applicant_vacancies.ts
@@ -0,0 +1,46 @@
+import { Vacancy } from '../../responses/vacancy';
+import { HttpMethod } from '../utils/fetch_with_cors';
+import { fetchCors } from '../utils/fetch_with_cors';
+import { unpackJsonResponseBody } from '../utils/unpack_body';
+
+export async function getApplicantFavoriteVacancies(
+  apiOrigin: URL,
+  id: number,
+): Promise<Array<Vacancy>> {
+  const response = await fetchCors(new URL(apiOrigin.href + `applicant/${id}/favorite-vacancy`), {
+    method: HttpMethod.Get,
+  });
+  return (await unpackJsonResponseBody(response)) as Array<Vacancy>;
+}
+
+export async function addVacancyToFavorites(
+  apiOrigin: URL,
+  token: string,
+  id: number,
+): Promise<void> {
+  const response = await fetchCors(
+    new URL(apiOrigin.href + `applicant/${id}/favorite-vacancy`),
+    {
+      method: HttpMethod.Post,
+      credentials: 'include',
+    },
+    token,
+  );
+  return (await unpackJsonResponseBody(response)) as Promise<void>;
+}
+
+export async function removeVacancyFromFavorites(
+  apiOrigin: URL,
+  token: string,
+  id: number,
+): Promise<void> {
+  const response = await fetchCors(
+    new URL(apiOrigin.href + `applicant/${id}/favorite-vacancy`),
+    {
+      method: HttpMethod.Delete,
+      credentials: 'include',
+    },
+    token,
+  );
+  return (await unpackJsonResponseBody(response)) as Promise<void>;
+}
diff --git a/src/modules/api/src/handlers/vacancy/appliers.ts b/src/modules/api/src/handlers/vacancy/appliers.ts
index dd3b621..724a4e9 100644
--- a/src/modules/api/src/handlers/vacancy/appliers.ts
+++ b/src/modules/api/src/handlers/vacancy/appliers.ts
@@ -26,11 +26,19 @@ export async function getVacancyAppliers(
  * @param id - The id of the vacancy.
  * @returns A promise that resolves to the status of the application to that vacancy.
  */
-export async function getVacancyApplyStatus(apiOrigin: URL, id: number): Promise<Application> {
-  const response = await fetchCors(new URL(apiOrigin.href + `vacancy/${id}/subscription`), {
-    method: HttpMethod.Get,
-    credentials: 'include',
-  });
+export async function getVacancyApplyStatus(
+  apiOrigin: URL,
+  token: string,
+  id: number,
+): Promise<Application> {
+  const response = await fetchCors(
+    new URL(apiOrigin.href + `vacancy/${id}/subscription`),
+    {
+      method: HttpMethod.Get,
+      credentials: 'include',
+    },
+    token,
+  );
   return (await unpackJsonResponseBody(response)) as Application;
 }
 
diff --git a/src/public/img/card-bookmark-filled.svg b/src/public/img/card-bookmark-filled.svg
new file mode 100644
index 0000000..758d9b9
--- /dev/null
+++ b/src/public/img/card-bookmark-filled.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fce588" viewBox="0 0 16 16">
+  <path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2"/>
+</svg>
\ No newline at end of file
diff --git a/src/public/img/card-bookmark-whole.svg b/src/public/img/card-bookmark-whole.svg
new file mode 100644
index 0000000..39e72e3
--- /dev/null
+++ b/src/public/img/card-bookmark-whole.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke='#829ab1' stroke-width="0.5" viewBox="0 0 16 16">
+  <path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2"/>
+</svg>
\ No newline at end of file
diff --git a/src/public/img/card-bookmark.svg b/src/public/img/card-bookmark.svg
deleted file mode 100644
index 9f436b3..0000000
--- a/src/public/img/card-bookmark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 12.8125 2 C 12.335938 2.089844 11.992188 2.511719 12 3 L 12 47 C 11.996094 47.359375 12.1875 47.691406 12.496094 47.871094 C 12.804688 48.054688 13.1875 48.054688 13.5 47.875 L 25 41.15625 L 36.5 47.875 C 36.8125 48.054688 37.195313 48.054688 37.503906 47.871094 C 37.8125 47.691406 38.003906 47.359375 38 47 L 38 3 C 38 2.449219 37.550781 2 37 2 L 13 2 C 12.96875 2 12.9375 2 12.90625 2 C 12.875 2 12.84375 2 12.8125 2 Z M 14 4 L 36 4 L 36 45.25 L 25.5 39.125 C 25.191406 38.945313 24.808594 38.945313 24.5 39.125 L 14 45.25 Z"/></svg>
\ No newline at end of file

From 35a4d0e39530c11e9c90d143dec6479b0da1dfdf Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Mon, 16 Dec 2024 12:55:36 +0300
Subject: [PATCH 15/17] feature: notifications

---
 .../action_creators/cv_action_creators.ts     |  26 ++++++
 .../components/cv_article/cv_article.scss     |  10 +++
 .../components/cv_article/cv_article.tsx      |  11 +++
 src/application/components/header/header.scss |  23 ++++-
 src/application/components/header/header.tsx  |  32 ++++++-
 .../notification_list/notification_list.scss  |  18 ++++
 .../notification_list/notification_list.tsx   |  46 ++++++++++
 .../vacancy_edit_page/vacancy_edit_page.scss  |   0
 .../vacancy_edit_page/vacancy_edit_page.tsx   |  83 ++++++++++++++++++
 .../stores/backend_store/backend_store.ts     |   2 +
 src/application/stores/cv_store/cv_actions.ts |   7 ++
 src/application/stores/cv_store/cv_store.ts   |   9 ++
 .../stores/user_store/user_actions.ts         |   5 ++
 .../stores/user_store/user_store.ts           |   9 ++
 src/config/backend.json                       |   3 +-
 src/modules/api/api.ts                        |   2 +-
 src/modules/api/src/handlers/cv/cv.ts         |   8 ++
 src/modules/api/src/responses/notification.ts |   9 ++
 src/modules/api/src/responses/pdf.ts          |   3 +
 .../notification_manager.ts                   |  38 ++++++++
 src/public/img/icon-pdf-50.png                | Bin 0 -> 860 bytes
 21 files changed, 339 insertions(+), 5 deletions(-)
 create mode 100644 src/application/components/notification_list/notification_list.scss
 create mode 100644 src/application/components/notification_list/notification_list.tsx
 create mode 100644 src/application/pages/vacancy_edit_page/vacancy_edit_page.scss
 create mode 100644 src/application/pages/vacancy_edit_page/vacancy_edit_page.tsx
 create mode 100644 src/modules/api/src/responses/notification.ts
 create mode 100644 src/modules/api/src/responses/pdf.ts
 create mode 100644 src/modules/api/src/websockets/notification_manager./notification_manager.ts
 create mode 100644 src/public/img/icon-pdf-50.png

diff --git a/src/application/action_creators/cv_action_creators.ts b/src/application/action_creators/cv_action_creators.ts
index 6e58363..cc834fb 100644
--- a/src/application/action_creators/cv_action_creators.ts
+++ b/src/application/action_creators/cv_action_creators.ts
@@ -13,6 +13,7 @@ import {
   deleteCv,
   createCv as apiCreateCv,
   updateCv as apiUpdateCv,
+  convertCvToPdf,
 } from '@/modules/api/api';
 import { assertIfError } from '@/modules/common_utils/asserts/asserts';
 import { FormValue } from '../models/form_value';
@@ -171,6 +172,30 @@ async function updateCv(id: number, body: CvFormFields) {
   }
 }
 
+async function loadPdf(cvId: number) {
+  const backendOrigin = backendStore.getData().backendOrigin;
+  try {
+    const pdf = await convertCvToPdf(backendOrigin, cvId);
+    storeManager.dispatch({
+      type: CvActions.LoadPdf,
+      payload: pdf,
+    });
+    const pdfBlob = new Blob([pdf.location], { type: 'application/pdf' });
+    const pdfUrl = URL.createObjectURL(pdfBlob);
+    const a = document.createElement('a');
+    a.setAttribute('href', pdfUrl);
+    a.setAttribute('download', 'cv.pdf');
+    a.click();
+  } catch (err) {
+    assertIfError(err);
+    console.log(err);
+    storeManager.dispatch({
+      type: CvActions.LoadPdf,
+      payload: null,
+    });
+  }
+}
+
 export const cvActionCreators = {
   loadCv,
   clearCv,
@@ -178,4 +203,5 @@ export const cvActionCreators = {
   createCv,
   removeCv,
   submitCvFields,
+  loadPdf,
 };
diff --git a/src/application/components/cv_article/cv_article.scss b/src/application/components/cv_article/cv_article.scss
index 5bc99e1..e4099c2 100644
--- a/src/application/components/cv_article/cv_article.scss
+++ b/src/application/components/cv_article/cv_article.scss
@@ -1,6 +1,7 @@
 .cv-article {
   display: flex;
   flex-direction: column;
+  position: relative;
   align-items: start;
 
   &__header-container {
@@ -31,6 +32,15 @@
     margin-bottom: 32px;
   }
 
+  &__pdf-button {
+    position: absolute;
+    top: var(--col-margin);
+    width: 36px;
+    height: 36px;
+    right: var(--col-margin);
+    cursor: pointer;
+  }
+
   &__working-experience {
     padding: 0px 32px;
     font-size: var(--text-size-5);
diff --git a/src/application/components/cv_article/cv_article.tsx b/src/application/components/cv_article/cv_article.tsx
index 78f2ddd..d62ace3 100644
--- a/src/application/components/cv_article/cv_article.tsx
+++ b/src/application/components/cv_article/cv_article.tsx
@@ -11,6 +11,7 @@ import {
   ProfilePageParams,
   ProfilePageStartingFrames,
 } from '@/application/pages/profile_page/profile_page';
+import IconPdf from '@static/img/icon-pdf-50.png';
 
 export interface CvArticleProps {
   elementClass: string;
@@ -88,12 +89,22 @@ export class CvArticle extends Component {
               >
                 Удалить
               </button>
+
               <div className="cv-article__created-at">
                 {`последнее обновление: ${cv.updatedAt.toLocaleString('ru-RU')}`}
               </div>
             </div>
           )
         )}
+        <img
+          src={IconPdf}
+          onClick={() => {
+            cvActionCreators.loadPdf(cv.id);
+          }}
+          className="cv-article__pdf-button"
+        >
+          PDF
+        </img>
       </article>
     );
   }
diff --git a/src/application/components/header/header.scss b/src/application/components/header/header.scss
index d7727c6..cb518ea 100644
--- a/src/application/components/header/header.scss
+++ b/src/application/components/header/header.scss
@@ -48,15 +48,34 @@
     height: 48px;
   }
 
+  &__notifications {
+    position: relative;
+  }
   &__notification-button {
     width: 36px;
     height: 36px;
-    visibility: hidden;
+    &:hover {
+      background-color: var(--color-background-600);
+      border-radius: var(--radius-xs);
+    }
+  }
+
+  &__notify-dropdown {
+    position: absolute;
+    top: calc(50% + 30px);
+    right: 0%;
+    background-color: var(--color-background-700);
+    border-radius: 8px;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    font-size: var(--text-size-5);
   }
 
   &__dropdown {
     position: absolute;
-    top: 60px;
+    top: calc(50% + 30px);
     right: 0;
     background-color: var(--color-background-700);
     border-radius: 8px;
diff --git a/src/application/components/header/header.tsx b/src/application/components/header/header.tsx
index 5c180d3..7ab0c1c 100644
--- a/src/application/components/header/header.tsx
+++ b/src/application/components/header/header.tsx
@@ -12,10 +12,13 @@ import { Dropdown } from '@/application/components/dropdown/dropdown';
 import { UserType } from '@/application/models/user-type';
 import './header.scss';
 import { userActionCreators } from '@/application/action_creators/user_action_creators';
+import { NotificationList } from '../notification_list/notification_list';
 
 export class Header extends Component {
   private isDropdownOpen: boolean;
   private setIsDropdownOpen: (newIsDropdownOpen: boolean) => void;
+  private isNotifyDropdownOpen: boolean = false;
+  private setIsNotifyDropdownOpen: (newIsNotifyDropdownOpen: boolean) => void;
   constructor({ elementClass }: { elementClass?: string }) {
     super({ elementClass });
     this.isDropdownOpen = false;
@@ -23,10 +26,18 @@ export class Header extends Component {
       this.isDropdownOpen = newIsDropdownOpen;
       this.domNode.virtualNode.root.update();
     };
+    this.isNotifyDropdownOpen = false;
+    this.setIsNotifyDropdownOpen = (newIsNotifyDropdownOpen: boolean) => {
+      this.isNotifyDropdownOpen = newIsNotifyDropdownOpen;
+      this.domNode.virtualNode.root.update();
+    };
   }
 
   render(): VirtualNodeSpec {
     const userData = userStore.getData();
+    const notifications = userData.notificationManager
+      ? userData.notificationManager.getNotifications()
+      : [];
     return (
       <nav className={`${this.props.elementClass} header`}>
         <a className="header__logo" href={resolveUrl('vacancies', null).toString()}>
@@ -34,7 +45,26 @@ export class Header extends Component {
         </a>
         {userData.isLoggedIn ? (
           <div className="header__authorized-container">
-            <img className="header__notification-button" src={notificationIconSvg} />
+            {userData.userType === UserType.Employer && (
+              <div className="header__notifications">
+                <img
+                  className="header__notification-button"
+                  src={notificationIconSvg}
+                  onClick={() => this.setIsNotifyDropdownOpen(!this.isNotifyDropdownOpen)}
+                />
+                <Dropdown
+                  key="notify-dropdown"
+                  elementClass="header__notify-dropdown"
+                  isOpen={this.isNotifyDropdownOpen}
+                  setIsOpen={this.setIsNotifyDropdownOpen}
+                >
+                  <NotificationList
+                    elementClass="header__notification-list"
+                    notifications={notifications}
+                  />
+                </Dropdown>
+              </div>
+            )}
             <img className="header__user-avatar" src={userData.userProfile.avatar} />
             <img
               className="header__menu-open-button"
diff --git a/src/application/components/notification_list/notification_list.scss b/src/application/components/notification_list/notification_list.scss
new file mode 100644
index 0000000..b8d53d3
--- /dev/null
+++ b/src/application/components/notification_list/notification_list.scss
@@ -0,0 +1,18 @@
+.notification-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: var(--3-col);
+  padding: 8px;
+  background-color: var(--color-background-800);
+  border-radius: var(--radius-s);
+  &__notification {
+    font-size: var(--text-size-2);
+  }
+  &__notification-text {
+    font-size: var(--text-size-2);
+  }
+  &__empty {
+    font-size: var(--text-size-2);
+  }
+}
diff --git a/src/application/components/notification_list/notification_list.tsx b/src/application/components/notification_list/notification_list.tsx
new file mode 100644
index 0000000..833bc5f
--- /dev/null
+++ b/src/application/components/notification_list/notification_list.tsx
@@ -0,0 +1,46 @@
+import { Component } from '@/modules/vdom/virtual_node';
+import * as vdom from '@/modules/vdom/virtual_dom';
+import { Notification } from '@/modules/api/src/responses/notification';
+import { userStore } from '@/application/stores/user_store/user_store';
+import './notification_list.scss';
+
+export interface NotificationListProps {
+  elementClass?: string;
+  notifications: Array<Notification>;
+}
+
+export class NotificationList extends Component {
+  render() {
+    const unreadNotifications = (this.props.notifications as Notification[]).filter(
+      (notification) => !notification.isRead,
+    );
+    return (
+      <div className={`${this.props.elementClass} notification-list`}>
+        {unreadNotifications.map((notification) => {
+          return (
+            <div
+              className="notification-list__notification"
+              onHover={() => {
+                const notificationManager = userStore.getData().notificationManager;
+                if (notificationManager) {
+                  notificationManager.setNotificationRead(notification.id);
+                }
+              }}
+            >
+              <div className="notification-list__notification-text">
+                {notification.notificationText}
+              </div>
+              <div className="notification-list__createdAt">
+                {new Date(notification.createdAt).toLocaleDateString('ru-RU')}
+              </div>
+            </div>
+          );
+        }) && (
+          <div key="empty" className="notification-list__empty">
+            Новых уведомлений нет
+          </div>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/application/pages/vacancy_edit_page/vacancy_edit_page.scss b/src/application/pages/vacancy_edit_page/vacancy_edit_page.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/application/pages/vacancy_edit_page/vacancy_edit_page.tsx b/src/application/pages/vacancy_edit_page/vacancy_edit_page.tsx
new file mode 100644
index 0000000..4fd456c
--- /dev/null
+++ b/src/application/pages/vacancy_edit_page/vacancy_edit_page.tsx
@@ -0,0 +1,83 @@
+// import { Component } from '@/modules/vdom/virtual_node';
+// import * as vdom from '@/modules/vdom/virtual_dom';
+// import { vacancyActionCreators } from '@/application/action_creators/vacancy_action_creators';
+// import { resolveUrl } from '@/modules/common_utils/url_utils/url_utils';
+// import { vacancyStore } from '@/application/stores/vacancy_store/vacancy_store';
+// import { routerActionCreators } from '@/application/action_creators/router_action_creators';
+
+// export enum VacancyEditPageParams {
+//   Id = 'id',
+// }
+
+// export class VacancyEditPage extends Component {
+//   private lastUrl: URL;
+//   private failedToLoadVacancy: boolean = false;
+//   private isCreatingVacancy: boolean = false;
+//   private vacancyId?: number;
+//   private invokedLoadingVacancy: boolean = false;
+
+//   constructor({ url }: { url: URL }) {
+//     super({ url });
+//     this.parseUrl();
+//     if (this.isCreatingVacancy) {
+//       vacancyActionCreators.clearVacancy();
+//     }
+//   }
+
+//   private parseUrl(): void {
+//     const url = this.props.url as URL;
+//     this.isCreatingVacancy = url.pathname === resolveUrl('createVacancy', null).pathname;
+//     if (!this.isCreatingVacancy) {
+//       if (this.lastUrl === url) {
+//         return;
+//       }
+//       this.vacancyId = Number(url.searchParams.get(VacancyEditPageParams.Id));
+//       if (!this.vacancyId) {
+//         this.failedToLoadVacancy = true;
+//         return;
+//       }
+//       const vacancyData = vacancyStore.getData();
+//       const vacancySuccessfullyLoaded =
+//         vacancyData.loadedVacancy &&
+//         vacancyData.vacancy &&
+//         vacancyData.vacancy.id === this.vacancyId;
+//       if (!vacancySuccessfullyLoaded && !this.invokedLoadingVacancy) {
+//         vacancyActionCreators.loadVacancy(this.vacancyId);
+//         this.invokedLoadingVacancy = true;
+//       } else {
+//         if (this.invokedLoadingVacancy) {
+//           this.failedToLoadVacancy = true;
+//         }
+//       }
+//       this.lastUrl = url;
+//     }
+//   }
+
+//   private handleSubmit = (ev: Event) => {
+//     ev.preventDefault();
+//     const formData = Object.fromEntries(new FormData(ev.target as HTMLFormElement));
+//     if (this.isCreatingVacancy) {
+//       vacancyActionCreators.createVacancy(formData).then(() => {
+//         const vacancy = vacancyStore.getData().vacancy;
+//         routerActionCreators.redirect(
+//           resolveUrl('vacancy', { [VacancyEditPageParams.Id]: vacancy.id.toString() }),
+//         );
+//       });
+//     } else {
+//       vacancyActionCreators
+//         .updateVacancy(this.vacancyId, formData)
+//         .then(() =>
+//           routerActionCreators.redirect(
+//             resolveUrl('vacancy', { [VacancyEditPageParams.Id]: this.vacancyId.toString() }),
+//           ),
+//         );
+//     }
+//   };
+
+//   handleFocusOut = (ev: Event) => {
+//     const target = ev.target as HTMLInputElement;
+//     const name = target.name;
+//     const value = target.value;
+//     vacancyActionCreators.submitVacancyFields({ [name]: value });
+//   };
+// }
diff --git a/src/application/stores/backend_store/backend_store.ts b/src/application/stores/backend_store/backend_store.ts
index a5dc102..ed074bd 100644
--- a/src/application/stores/backend_store/backend_store.ts
+++ b/src/application/stores/backend_store/backend_store.ts
@@ -4,6 +4,7 @@ import backendConfig from '@/config/backend.json';
 
 export interface BackendData {
   backendOrigin: URL;
+  notificationsUrl: URL;
 }
 
 function backendStoreReducer(curData: BackendData): BackendData {
@@ -13,6 +14,7 @@ function backendStoreReducer(curData: BackendData): BackendData {
 export const backendStore = new Store<BackendData>(
   {
     backendOrigin: new URL(backendConfig.backendPrefix),
+    notificationsUrl: new URL(backendConfig.notificationsUrl),
   },
   backendStoreReducer,
 );
diff --git a/src/application/stores/cv_store/cv_actions.ts b/src/application/stores/cv_store/cv_actions.ts
index c202d27..06b1130 100644
--- a/src/application/stores/cv_store/cv_actions.ts
+++ b/src/application/stores/cv_store/cv_actions.ts
@@ -2,11 +2,18 @@
 
 import { Cv } from '@/application/models/cv';
 import { CvFormData } from './cv_store';
+import { PdfLocation } from '@/modules/api/src/responses/pdf';
 
 export enum CvActions {
   Update = 'cvUpdate',
   Clear = 'cvClear',
   FormSubmit = 'cvFormSubmit',
+  LoadPdf = 'cvLoadPdf',
+}
+
+export interface LoadPdfAction {
+  type: CvActions.LoadPdf;
+  payload: PdfLocation;
 }
 
 export interface UpdateActionPayload {
diff --git a/src/application/stores/cv_store/cv_store.ts b/src/application/stores/cv_store/cv_store.ts
index b6f820e..84ddebf 100644
--- a/src/application/stores/cv_store/cv_store.ts
+++ b/src/application/stores/cv_store/cv_store.ts
@@ -4,11 +4,13 @@ import { Store } from '@/modules/store_manager/store';
 import { storeManager } from '@/modules/store_manager/store_manager';
 import { Action } from '@/modules/store_manager/action';
 import { FormValue } from '@/application/models/form_value';
+import { PdfLocation } from '@/modules/api/src/responses/pdf';
 
 export interface CvData {
   cv?: Cv;
   loadedCv?: boolean;
   cvFormData?: CvFormData;
+  pdf?: string;
 }
 export interface CvFormData {
   positionRu?: FormValue;
@@ -31,6 +33,13 @@ function cvStoreReducer(state: CvData, action: Action) {
     case CvActions.Clear: {
       return {};
     }
+
+    case CvActions.LoadPdf: {
+      const payload = action.payload as PdfLocation;
+      state.pdf = payload.location;
+      return state;
+    }
+
     case CvActions.FormSubmit: {
       const payload = action.payload as CvFormData;
       if (!state.cvFormData) {
diff --git a/src/application/stores/user_store/user_actions.ts b/src/application/stores/user_store/user_actions.ts
index 126c140..a79f75f 100644
--- a/src/application/stores/user_store/user_actions.ts
+++ b/src/application/stores/user_store/user_actions.ts
@@ -12,6 +12,7 @@ export enum UserActions {
   LoginFormSubmit = 'loginFormSubmit',
   RegistrationFormSubmit = 'registrationFormSubmit',
   UpdateProfile = 'updateUserProfile',
+  NotificationsUpdated = 'notificationsUpdated',
 }
 
 export interface LogoutAction extends Action {
@@ -44,3 +45,7 @@ export interface UpdateProfileAction extends Action {
   type: UserActions.UpdateProfile;
   payload: Applicant | Employer;
 }
+
+export interface NotificationsUpdatedAction extends Action {
+  type: UserActions.NotificationsUpdated;
+}
diff --git a/src/application/stores/user_store/user_store.ts b/src/application/stores/user_store/user_store.ts
index f469dc8..2a454b3 100644
--- a/src/application/stores/user_store/user_store.ts
+++ b/src/application/stores/user_store/user_store.ts
@@ -6,6 +6,8 @@ import { Action } from '@/modules/store_manager/action';
 import { LoginActionPayload, UserActions } from './user_actions';
 import { UserType } from '@/application/models/user-type';
 import { FormValue } from '@/application/models/form_value';
+import { backendStore } from '../backend_store/backend_store';
+import { NotificationManager } from '@/modules/api/src/websockets/notification_manager./notification_manager';
 
 export interface LoginFormData {
   userType: FormValue;
@@ -64,11 +66,15 @@ export interface UserData {
   userProfile?: Applicant | Employer;
   loginForm?: LoginFormData;
   registrationForm?: RegistrationFormData;
+  notificationManager?: NotificationManager;
 }
 
 function userStoreReducer(state: UserData, action: Action) {
   switch (action.type) {
     case UserActions.Logout: {
+      if (state.notificationManager) {
+        state.notificationManager.closeConnection();
+      }
       return {
         isLoggedIn: false,
       } as UserData;
@@ -76,6 +82,8 @@ function userStoreReducer(state: UserData, action: Action) {
 
     case UserActions.Login: {
       const payload = action.payload as LoginActionPayload;
+      const manager = new NotificationManager(backendStore.getData().notificationsUrl.toString());
+      manager.establishConnection();
       return {
         isLoggedIn: true,
         userType: payload.userType,
@@ -84,6 +92,7 @@ function userStoreReducer(state: UserData, action: Action) {
         userProfile: payload.userProfile,
         loginForm: state.loginForm,
         csrfToken: payload.csrfToken,
+        notificationManager: manager,
       };
     }
 
diff --git a/src/config/backend.json b/src/config/backend.json
index 45bc5f6..540a981 100644
--- a/src/config/backend.json
+++ b/src/config/backend.json
@@ -1,3 +1,4 @@
 {
-  "backendPrefix": "http://localhost:8082/api/v1/"
+  "backendPrefix": "http://localhost:8082/api/v1/",
+  "notificationsUrl": "ws://localhost:8087/api/v1/notifications"
 }
diff --git a/src/modules/api/api.ts b/src/modules/api/api.ts
index 226f4d5..3d3f18e 100644
--- a/src/modules/api/api.ts
+++ b/src/modules/api/api.ts
@@ -7,7 +7,7 @@ export { getUserAuthenticationStatus } from './src/handlers/auth/is_authenticate
 export { login, logout } from './src/handlers/auth/login';
 export { registerApplicant, registerEmployer } from './src/handlers/auth/register';
 export { getApplicantCvs } from './src/handlers/cv/applicant_cv';
-export { createCv, deleteCv, getCv, updateCv } from './src/handlers/cv/cv';
+export { createCv, deleteCv, getCv, updateCv, convertCvToPdf } from './src/handlers/cv/cv';
 export { getEmployer, updateEmployerProfile } from './src/handlers/employer/profile';
 export { getApplicantPortfolios } from './src/handlers/portfolio/applicant_portfolios';
 export {
diff --git a/src/modules/api/src/handlers/cv/cv.ts b/src/modules/api/src/handlers/cv/cv.ts
index a97ea50..5b800ff 100644
--- a/src/modules/api/src/handlers/cv/cv.ts
+++ b/src/modules/api/src/handlers/cv/cv.ts
@@ -1,6 +1,7 @@
 import { fetchCors, HttpMethod } from '@api/src/handlers/utils/fetch_with_cors';
 import { unpackJsonResponseBody } from '@api/src/handlers/utils/unpack_body';
 import { Cv } from '@api/src/responses/cv';
+import { PdfLocation } from '@api/src/responses/pdf';
 
 /**
  * Get CV given its id
@@ -119,3 +120,10 @@ export async function updateCv(
   );
   return (await unpackJsonResponseBody(response)) as Cv;
 }
+
+export async function convertCvToPdf(apiOrigin: URL, cvId: number): Promise<PdfLocation> {
+  const response = await fetchCors(new URL(apiOrigin.href + `cv-to-pdf/${cvId}`), {
+    method: HttpMethod.Get,
+  });
+  return (await unpackJsonResponseBody(response)) as PdfLocation;
+}
diff --git a/src/modules/api/src/responses/notification.ts b/src/modules/api/src/responses/notification.ts
new file mode 100644
index 0000000..1c229b0
--- /dev/null
+++ b/src/modules/api/src/responses/notification.ts
@@ -0,0 +1,9 @@
+export interface Notification {
+  id: number;
+  notificationText: string;
+  applicantId: number;
+  employerId: number;
+  vacancyId: number;
+  isRead: boolean;
+  createdAt: string;
+}
diff --git a/src/modules/api/src/responses/pdf.ts b/src/modules/api/src/responses/pdf.ts
new file mode 100644
index 0000000..b3e9ece
--- /dev/null
+++ b/src/modules/api/src/responses/pdf.ts
@@ -0,0 +1,3 @@
+export interface PdfLocation {
+  location: string;
+}
diff --git a/src/modules/api/src/websockets/notification_manager./notification_manager.ts b/src/modules/api/src/websockets/notification_manager./notification_manager.ts
new file mode 100644
index 0000000..c9a3d98
--- /dev/null
+++ b/src/modules/api/src/websockets/notification_manager./notification_manager.ts
@@ -0,0 +1,38 @@
+import { Notification } from '../../responses/notification';
+
+export class NotificationManager {
+  private websocket?: WebSocket;
+  private notifications: Array<Notification> = [];
+
+  constructor(private url: string) {}
+
+  establishConnection() {
+    this.websocket = new WebSocket(this.url);
+    this.websocket.onmessage = (ev) => this.onMessage(ev);
+  }
+
+  async onMessage(ev: MessageEvent) {
+    const response = JSON.parse(ev.data).body as Array<Notification>;
+    this.notifications = response;
+  }
+
+  getNotifications() {
+    return this.notifications;
+  }
+
+  checkConnection() {
+    return this.websocket && this.websocket.readyState;
+  }
+
+  setNotificationRead(...notificationsId: Array<number>) {
+    if (this.websocket && this.websocket.OPEN) {
+      notificationsId.forEach((id) => this.websocket.send(id.toString()));
+    }
+  }
+
+  closeConnection() {
+    if (this.websocket) {
+      this.websocket.close();
+    }
+  }
+}
diff --git a/src/public/img/icon-pdf-50.png b/src/public/img/icon-pdf-50.png
new file mode 100644
index 0000000000000000000000000000000000000000..545f21d26e2dbe45712783bc185d0dfa17c63b72
GIT binary patch
literal 860
zcmV-i1Ec(jP)<h;3K|Lk000e1NJLTq001%o001%w1^@s69zTe&00009a7bBm000XU
z000XU0RWnu7ytkPHfcjcP*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-pOwu}Z^G6hP05
zqT*011aWY9lPD;*>R`sCEkzKl)gj5&q@hY_5?)@_euSf22N!q0z{yc?Q2YY_Kym8e
z5Fvwu2%hQO!{u_psMvL<VU%GIYt?Q#()D~f`@{@W0MH4u)NZv70OBN$_`&BZ0^oVm
zt~(9>#(bD64NQRTZj^-}DnS22ry9f<FoS-oLEHhRI%(HHJOHI$?k_+o$o&l{DcAEs
zd;n(8^?Weq05iya1u%7VsR3$9I#Or7Q!T5OWl6i61d%)*WjY#Uaz73el_sjAqb`vD
z2f$*!*ls#<t!i0&>-;mW=gZvQj}U-ZdMsK&I8^7~DvX`q=i<hA84hn@dQ!CAE4bN!
zh3lfNR-wEF_v0_X#!vm|T2EpC001CkNK#Dz0D2_=0Dyx40Qvs_0D$NK08$750ToyP
z06Lcd02go9S|5-A00E#$L_t(|+U(ZPD+N&$!0~y0g%wI6_DU()St);jKR_wjTPrJt
zEG0V;>laHK%0}7Pc*V1^`AW({C_mzvYja*rx0&%~N^@_W#p%wOJGbUD_nzhi#+V>3
z0P~M=4fFv))<}Bapdd(YjBAif87n}q&ya55BG1ma1_|<FT!iGpxC+UPaT$^c<2s~a
zj1Q28Fup+k#P|eB#rOtE#P|q_#rO&dq!+8ydovfi-&~;(g(yTJ3Q>rQkP~1NSOfNf
zyU5%Puq|`Dz?HT33|P0~z9`6;)lPH>&HyWNuSLcZuoPLl9Mg`R7YS(sYQQnj3=CV4
z1K<G|mHfzpYyr0tpG8CJ`GkD=7Yky5Q^}_-NZExNu_5C?EASNqsR8XkzsryiIF#L(
ziaA>K=LhBZg%QY1q}acUF7{3t2Y_k{WJusY3B~?VB%}l^0z1HKWX^_!KpW6w9j!g!
zNg{NmMobE%D*2=j#hwOPkbJ{e$UHDB*CW82Z;;hU5qAM|z+=pxz3fBN_zpa4_p1<v
mC`2I&QHVkmq7Ww_zXJe&uje%x`}<7*0000<MNUMnLSTYtns6`x

literal 0
HcmV?d00001


From 973be8aa7b6de635f12d93f8dc5569b68aba9bef Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Mon, 16 Dec 2024 14:05:05 +0300
Subject: [PATCH 16/17] fix: pdf url

---
 src/application/action_creators/cv_action_creators.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/application/action_creators/cv_action_creators.ts b/src/application/action_creators/cv_action_creators.ts
index cc834fb..ec0e194 100644
--- a/src/application/action_creators/cv_action_creators.ts
+++ b/src/application/action_creators/cv_action_creators.ts
@@ -180,10 +180,8 @@ async function loadPdf(cvId: number) {
       type: CvActions.LoadPdf,
       payload: pdf,
     });
-    const pdfBlob = new Blob([pdf.location], { type: 'application/pdf' });
-    const pdfUrl = URL.createObjectURL(pdfBlob);
     const a = document.createElement('a');
-    a.setAttribute('href', pdfUrl);
+    a.setAttribute('href', pdf.location);
     a.setAttribute('download', 'cv.pdf');
     a.click();
   } catch (err) {

From ef00a1a61f79952d996363ed68e3e106a5877924 Mon Sep 17 00:00:00 2001
From: Ilya Andriyanov <ilyaandry35@gmail.com>
Date: Mon, 16 Dec 2024 14:09:22 +0300
Subject: [PATCH 17/17] fix: pdf field

---
 src/application/action_creators/cv_action_creators.ts | 2 +-
 src/application/stores/cv_store/cv_store.ts           | 2 +-
 src/modules/api/src/responses/pdf.ts                  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/application/action_creators/cv_action_creators.ts b/src/application/action_creators/cv_action_creators.ts
index ec0e194..fcac003 100644
--- a/src/application/action_creators/cv_action_creators.ts
+++ b/src/application/action_creators/cv_action_creators.ts
@@ -181,7 +181,7 @@ async function loadPdf(cvId: number) {
       payload: pdf,
     });
     const a = document.createElement('a');
-    a.setAttribute('href', pdf.location);
+    a.setAttribute('href', pdf.FileName);
     a.setAttribute('download', 'cv.pdf');
     a.click();
   } catch (err) {
diff --git a/src/application/stores/cv_store/cv_store.ts b/src/application/stores/cv_store/cv_store.ts
index 84ddebf..3b56324 100644
--- a/src/application/stores/cv_store/cv_store.ts
+++ b/src/application/stores/cv_store/cv_store.ts
@@ -36,7 +36,7 @@ function cvStoreReducer(state: CvData, action: Action) {
 
     case CvActions.LoadPdf: {
       const payload = action.payload as PdfLocation;
-      state.pdf = payload.location;
+      state.pdf = payload.FileName;
       return state;
     }
 
diff --git a/src/modules/api/src/responses/pdf.ts b/src/modules/api/src/responses/pdf.ts
index b3e9ece..6157751 100644
--- a/src/modules/api/src/responses/pdf.ts
+++ b/src/modules/api/src/responses/pdf.ts
@@ -1,3 +1,3 @@
 export interface PdfLocation {
-  location: string;
+  FileName: string;
 }