From 7f3fb2b4b421da200ef49057b3024e59a069059d Mon Sep 17 00:00:00 2001
From: Vitaly Baev <dj@vitalybaev.ru>
Date: Mon, 22 Jan 2018 14:19:30 +0300
Subject: [PATCH] =?UTF-8?q?LIL-87=20Front-end=20=D0=A0=D0=B5=D0=B3=D0=B8?=
 =?UTF-8?q?=D1=81=D1=82=D1=80=D0=B0=D1=86=D0=B8=D1=8F,=20=D0=B0=D0=B2?=
 =?UTF-8?q?=D1=82=D0=BE=D1=80=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5=D0=BB?=
 =?UTF-8?q?=D1=8F=20=D0=B8=20=D0=B2=D0=BE=D1=81=D1=81=D1=82=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=B0=D1=80?=
 =?UTF-8?q?=D0=BE=D0=BB=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/templates/lilcity/index.html | 696 ++++++++++++++++-----------
 web/build/js/app.js                  | 678 ++++++++++++++++++++++++--
 web/src/js/app.js                    |   1 -
 web/src/js/modules/auth.js           | 211 +++++++-
 4 files changed, 1261 insertions(+), 325 deletions(-)
diff --git a/project/templates/lilcity/index.html b/project/templates/lilcity/index.html
index 6a6b3b9d..186cc8b9 100644
--- a/project/templates/lilcity/index.html
+++ b/project/templates/lilcity/index.html
@@ -2,317 +2,469 @@
 <!DOCTYPE html>
 <html>
 
-  <head>
-    <meta charset="utf-8">
-    <title>Index Page</title>
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
-    <meta name="theme-color" content="#fff">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="description" content="Page description">
-    <!--Twitter Card data-->
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:site" content="@publisher_handle">
-    <meta name="twitter:title" content="Page Title">
-    <meta name="twitter:description" content="Page description less than 200 characters">
-    <meta name="twitter:creator" content="@author_handle">
-    <meta name="twitter:image" content="http://www.example.com/image.jpg">
-    <!--Open Graph data-->
-    <meta property="og:title" content="Title Here">
-    <meta property="og:type" content="article">
-    <meta property="og:url" content="http://www.example.com/">
-    <meta property="og:image" content="http://example.com/image.jpg">
-    <meta property="og:description" content="Description Here">
-    <meta property="og:site_name" content="Site Name, i.e. Moz">
-    <meta property="fb:admins" content="Facebook numeric ID">
-    <meta name="csrf-token" content="{{ csrf_token }}">
-    <link rel="stylesheet" media="all" href={% static "css/app.css" %}>
-    <script>
+<head>
+  <meta charset="utf-8">
+  <title>Index Page</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <meta name="theme-color" content="#fff">
+  <meta name="format-detection" content="telephone=no">
+  <meta name="description" content="Page description">
+  <!--Twitter Card data-->
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:site" content="@publisher_handle">
+  <meta name="twitter:title" content="Page Title">
+  <meta name="twitter:description" content="Page description less than 200 characters">
+  <meta name="twitter:creator" content="@author_handle">
+  <meta name="twitter:image" content="http://www.example.com/image.jpg">
+  <!--Open Graph data-->
+  <meta property="og:title" content="Title Here">
+  <meta property="og:type" content="article">
+  <meta property="og:url" content="http://www.example.com/">
+  <meta property="og:image" content="http://example.com/image.jpg">
+  <meta property="og:description" content="Description Here">
+  <meta property="og:site_name" content="Site Name, i.e. Moz">
+  <meta property="fb:admins" content="Facebook numeric ID">
+  <meta name="csrf-token" content="{{ csrf_token }}">
+  <link rel="stylesheet" media="all" href={% static "css/app.css" %}>
+  <script>
       var viewportmeta = document.querySelector('meta[name="viewport"]');
-      if (viewportmeta)
-      {
-        if (screen.width <= 360)
-        {
-          var newScale = screen.width / 360;
-          viewportmeta.content = 'width=360, minimum-scale=' + newScale + ', user-scalable=0, maximum-scale=1, initial-scale=' + newScale + '';
-        }
-        else
-        {
-          viewportmeta.content = 'width=device-width, maximum-scale=1.6, initial-scale=1.0';
-        }
+      if (viewportmeta) {
+          if (screen.width <= 360) {
+              var newScale = screen.width / 360;
+              viewportmeta.content = 'width=360, minimum-scale=' + newScale + ', user-scalable=0, maximum-scale=1, initial-scale=' + newScale + '';
+          }
+          else {
+              viewportmeta.content = 'width=device-width, maximum-scale=1.6, initial-scale=1.0';
+          }
       }
 
-    </script>
-  </head>
+  </script>
+</head>
 
-  <body>
-    <div class="outer js-outer">
-      <header class="header js-header">
-        <div class="header__center center">
-          <div class="header__container"><button class="header__menu js-header-menu"><svg class="icon icon-menu"><use xlink:href={% static "img/sprite.svg" %}#icon-menu></use></svg></button><a class="header__logo logo" href="#"></a>
-            <div class="header__wrap js-header-wrap">
-              <div class="header__top"><button class="header__close js-header-close"><svg class="icon icon-close"><use xlink:href={% static "img/sprite.svg" %}#icon-close></use></svg></button>
-                <form class="header__search search js-search" action=""><input class="search__input js-search-input" type="text"><button class="search__btn js-search-btn" type="submit"><svg class="icon icon-search"><use xlink:href={% static "img/sprite.svg" %}#icon-search></use></svg></button></form>
+<body>
+<div class="outer js-outer">
+  <header class="header js-header">
+    <div class="header__center center">
+      <div class="header__container">
+        <button class="header__menu js-header-menu">
+          <svg class="icon icon-menu">
+            <use xlink:href={% static "img/sprite.svg" %}#icon-menu></use>
+          </svg>
+        </button>
+        <a class="header__logo logo" href="#"></a>
+        <div class="header__wrap js-header-wrap">
+          <div class="header__top">
+            <button class="header__close js-header-close">
+              <svg class="icon icon-close">
+                <use xlink:href={% static "img/sprite.svg" %}#icon-close></use>
+              </svg>
+            </button>
+            <form class="header__search search js-search" action=""><input class="search__input js-search-input"
+                                                                           type="text">
+              <button class="search__btn js-search-btn" type="submit">
+                <svg class="icon icon-search">
+                  <use xlink:href={% static "img/sprite.svg" %}#icon-search></use>
+                </svg>
+              </button>
+            </form>
+          </div>
+          <nav class="header__nav">
+            <div class="header__group"><a class="header__section header__section_sub js-header-section active" href="#">ОНЛАЙН-ШКОЛА</a>
+              <div class="header__list js-header-list">
+                <a class="header__link" href="#">
+                  <div class="header__title">О школе</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">Процесс</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">Преимущества</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">Отзывы</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">Галерея</div>
+                </a>
+                <a class="header__link active" href="#">
+                  <div class="header__title">Расписание</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">Преподаватели</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">Частые вопросы</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">Оплата</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">Контакты</div>
+                </a>
               </div>
-              <nav class="header__nav">
-                <div class="header__group"><a class="header__section header__section_sub js-header-section active" href="#">ОНЛАЙН-ШКОЛА</a>
-                  <div class="header__list js-header-list">
-                    <a class="header__link" href="#">
-                      <div class="header__title">О школе</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">Процесс</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">Преимущества</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">Отзывы</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">Галерея</div>
-                    </a>
-                    <a class="header__link active" href="#">
-                      <div class="header__title">Расписание</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">Преподаватели</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">Частые вопросы</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">Оплата</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">Контакты</div>
-                    </a>
-                  </div>
-                </div>
-                <div class="header__group"><a class="header__section header__section_sub js-header-section" href="#">ВИДЕО-КУРСЫ</a>
-                  <div class="header__list js-header-list">
-                    <a class="header__link" href="#">
-                      <div class="header__title">ПЕРСОНАЖ</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">АКВАРЕЛЬ</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">ИЛЛЮСТРАЦИЯ</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">АНИМАЦИЯ</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">ПАСТЕЛЬ</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">ПЛАСТИЛИН</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">КРЕАТИВНОЕ МЫШЛЕНИЕ</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">МОТОРИКА</div>
-                    </a>
-                    <a class="header__link" href="#">
-                      <div class="header__title">ЖИВОПИСЬ</div>
-                    </a>
-                  </div>
-                </div>
-                <div class="header__group"><a class="header__section" href="#">БЛОГ</a></div>
-              </nav>
-            </div><button class="header__enter js-header-enter" data-popup=".js-popup-auth">ВХОД<svg class="icon icon-user"><use xlink:href={% static "img/sprite.svg" %}#icon-user></use></svg></button></div>
-        </div>
-      </header>
-      <div class="container">
-        <div class="center" style="padding-top: 50px; padding-bottom: 50px;">
-          <div><a href="email/index.html">email.html</a></div><br>
-          <div><a href="ui-kit.html">ui-kit.html</a></div><br>
-          <div><a href="main.html">main.html</a></div>
-          <div><a href="main-online.html">main-online.html</a></div>
-          <div><a href="main-online-soon.html">main-online-soon.html</a></div>
-          <div><a href="courses.html">courses.html</a></div>
-          <div><a href="result.html">result.html</a></div>
-          <div><a href="result-empty.html">result-empty.html</a></div>
-          <div><a href="course.html">course.html</a></div>
-          <div><a href="course-v2.html">course-v2.html</a></div>
-          <div><a href="course-soon.html">course-soon.html</a></div>
-          <div><a href="course-lock.html">course-lock.html</a></div>
-          <div><a href="course-bought.html">course-bought.html</a></div>
-          <div><a href="lesson.html">lesson.html</a></div>
-          <div><a href="profile.html">profile.html</a></div>
-          <div><a href="profile-settings.html">profile-settings.html</a></div>
-          <div><a href="profile-alerts.html">profile-alerts.html</a></div>
-          <div><a href="become-author.html">become-author.html</a></div>
-          <div><a href="history-transactions.html">history-transactions.html</a></div>
-          <div><a href="success-payment.html">success-payment.html</a></div>
-          <div><a href="success-application.html">success-application.html</a></div><br>
-          <div><a href="course-add.html">course-add.html</a></div>
-          <div><a href="course-add-lessons.html">course-add-lessons.html</a></div>
-          <div><a href="lesson-add.html">lesson-add.html</a></div>
-        </div>
-      </div>
-      <footer class="footer">
-        <div class="footer__center center">
-          <div class="footer__row footer__row_first">
-            <div class="footer__col footer__col_md"><a class="footer__logo logo" href="#"></a>
-              <div class="footer__content">Первая онлайн-школа креативного мышления Lil City School</div>
             </div>
-            <div class="footer__col">
-              <div class="footer__title">КОМПАНИЯ</div>
-              <nav class="footer__nav"><a class="footer__link" href="#">О нас</a><a class="footer__link" href="#">Преподаватели</a><a class="footer__link" href="#">Блог</a><a class="footer__link" href="#">Наши приложения</a><a class="footer__link" href="#">Медиа-кит</a></nav>
-            </div>
-            <div class="footer__col">
-              <div class="footer__title">Программы</div>
-              <nav class="footer__nav"><a class="footer__link" href="#">Онлайн-школа</a><a class="footer__link" href="#">Онлайн-курсы</a><a class="footer__link" href="#">Стать автором</a></nav>
-            </div>
-            <div class="footer__col">
-              <div class="footer__title">Контакты</div>
-              <div class="footer__contact">Общие вопросы: <a href='mailto:school@lil.city'>school@lil.city</a></div>
-              <div class="footer__contact">Сотрудничество: <a href='mailto:partnership@lil.city'>partnership@lil.city</a></div>
-            </div>
-            <div class="footer__col footer__col_md">
-              <div class="footer__title">ПОДПИСАТЬСЯ НА НОВОСТИ</div>
-              <div class="subscribe">
-                <div class="subscribe__field"><input class="subscribe__input" type="text" placeholder="Email"></div><button class="subscribe__btn btn btn_light">ПОДПИСАТЬСЯ</button>
-                <div class="subscribe__content">Мы сами не любим спам, поэтому вы будете подучать от только важные новости о школе, новых курсах и бонусах от Lil City. </div>
+            <div class="header__group"><a class="header__section header__section_sub js-header-section" href="#">ВИДЕО-КУРСЫ</a>
+              <div class="header__list js-header-list">
+                <a class="header__link" href="#">
+                  <div class="header__title">ПЕРСОНАЖ</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">АКВАРЕЛЬ</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">ИЛЛЮСТРАЦИЯ</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">АНИМАЦИЯ</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">ПАСТЕЛЬ</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">ПЛАСТИЛИН</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">КРЕАТИВНОЕ МЫШЛЕНИЕ</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">МОТОРИКА</div>
+                </a>
+                <a class="header__link" href="#">
+                  <div class="header__title">ЖИВОПИСЬ</div>
+                </a>
               </div>
             </div>
+            <div class="header__group"><a class="header__section" href="#">БЛОГ</a></div>
+          </nav>
+        </div>
+        <button class="header__enter js-header-enter" data-popup=".js-popup-auth">ВХОД
+          <svg class="icon icon-user">
+            <use xlink:href={% static "img/sprite.svg" %}#icon-user></use>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </header>
+  <div class="container">
+    <div class="center" style="padding-top: 50px; padding-bottom: 50px;">
+      <div><a href="email/index.html">email.html</a></div>
+      <br>
+      <div><a href="ui-kit.html">ui-kit.html</a></div>
+      <br>
+      <div><a href="main.html">main.html</a></div>
+      <div><a href="main-online.html">main-online.html</a></div>
+      <div><a href="main-online-soon.html">main-online-soon.html</a></div>
+      <div><a href="courses.html">courses.html</a></div>
+      <div><a href="result.html">result.html</a></div>
+      <div><a href="result-empty.html">result-empty.html</a></div>
+      <div><a href="course.html">course.html</a></div>
+      <div><a href="course-v2.html">course-v2.html</a></div>
+      <div><a href="course-soon.html">course-soon.html</a></div>
+      <div><a href="course-lock.html">course-lock.html</a></div>
+      <div><a href="course-bought.html">course-bought.html</a></div>
+      <div><a href="lesson.html">lesson.html</a></div>
+      <div><a href="profile.html">profile.html</a></div>
+      <div><a href="profile-settings.html">profile-settings.html</a></div>
+      <div><a href="profile-alerts.html">profile-alerts.html</a></div>
+      <div><a href="become-author.html">become-author.html</a></div>
+      <div><a href="history-transactions.html">history-transactions.html</a></div>
+      <div><a href="success-payment.html">success-payment.html</a></div>
+      <div><a href="success-application.html">success-application.html</a></div>
+      <br>
+      <div><a href="course-add.html">course-add.html</a></div>
+      <div><a href="course-add-lessons.html">course-add-lessons.html</a></div>
+      <div><a href="lesson-add.html">lesson-add.html</a></div>
+    </div>
+  </div>
+  <footer class="footer">
+    <div class="footer__center center">
+      <div class="footer__row footer__row_first">
+        <div class="footer__col footer__col_md"><a class="footer__logo logo" href="#"></a>
+          <div class="footer__content">Первая онлайн-школа креативного мышления Lil City School</div>
+        </div>
+        <div class="footer__col">
+          <div class="footer__title">КОМПАНИЯ</div>
+          <nav class="footer__nav"><a class="footer__link" href="#">О нас</a><a class="footer__link" href="#">Преподаватели</a><a
+              class="footer__link" href="#">Блог</a><a class="footer__link" href="#">Наши приложения</a><a
+              class="footer__link" href="#">Медиа-кит</a></nav>
+        </div>
+        <div class="footer__col">
+          <div class="footer__title">Программы</div>
+          <nav class="footer__nav"><a class="footer__link" href="#">Онлайн-школа</a><a class="footer__link" href="#">Онлайн-курсы</a><a
+              class="footer__link" href="#">Стать автором</a></nav>
+        </div>
+        <div class="footer__col">
+          <div class="footer__title">Контакты</div>
+          <div class="footer__contact">Общие вопросы: <a href='mailto:school@lil.city'>school@lil.city</a></div>
+          <div class="footer__contact">Сотрудничество: <a href='mailto:partnership@lil.city'>partnership@lil.city</a>
           </div>
-          <div class="footer__row footer__row_second">
-            <div class="footer__col footer__col_md">
-              <div class="footer__socials socials"><a class="socials__item" href="#"><svg class="icon icon-instagram"><use xlink:href={% static "img/sprite.svg" %}#icon-instagram></use></svg></a><a class="socials__item" href="#"><svg class="icon icon-twitter"><use xlink:href={% static "img/sprite.svg" %}#icon-twitter></use></svg></a>
-                <a
-                  class="socials__item" href="#"><svg class="icon icon-fb"><use xlink:href={% static "img/sprite.svg" %}#icon-fb></use></svg></a><a class="socials__item" href="#"><svg class="icon icon-youtube"><use xlink:href={% static "img/sprite.svg" %}#icon-youtube></use></svg></a></div>
-            </div>
-            <div class="footer__col footer__col_lg">
-              <div class="footer__group">
-                <div class="footer__copyright">2017 © Lil City, UAB.</div>
-                <div class="footer__links"><a class="footer__link" href="#">Договор-оферта</a>
-                  <div class="footer__divider">|</div><a class="footer__link" href="#">Политика обработки персональных данных</a></div>
-              </div>
+        </div>
+        <div class="footer__col footer__col_md">
+          <div class="footer__title">ПОДПИСАТЬСЯ НА НОВОСТИ</div>
+          <div class="subscribe">
+            <div class="subscribe__field"><input class="subscribe__input" type="text" placeholder="Email"></div>
+            <button class="subscribe__btn btn btn_light">ПОДПИСАТЬСЯ</button>
+            <div class="subscribe__content">Мы сами не любим спам, поэтому вы будете подучать от только важные новости о
+              школе, новых курсах и бонусах от Lil City.
             </div>
           </div>
         </div>
-      </footer>
-      <div class="popup js-popup-auth">
-        <div class="popup__wrap js-popup-wrap"><button class="popup__close js-popup-close"><svg class="icon icon-close"><use xlink:href={% static "img/sprite.svg" %}#icon-close></use></svg></button>
-          <div class="popup__body">
-            <div class="auth js-auth">
-              <div class="auth__login js-auth-login">
-                <div class="auth__nav"><a class="auth__type js-auth-type active" href="#">Войти</a><a class="auth__type js-auth-type" href="#">РЕГИСТРАЦИЯ</a></div>
-                <div class="auth__body">
-                  <div class="auth__tab js-auth-tab" style="display: block;">
-                    <div class="auth__enter js-auth-enter">
-                      <div class="auth__field field">
-                        <div class="field__label">ПОЧТА</div>
-                        <div class="field__wrap"><input class="field__input" type="email" placeholder="name@website.com"></div>
-                      </div>
-                      <div class="auth__field field">
-                        <div class="field__label">ПАРОЛЬ<a class="field__link js-auth-go-pass" href="#">Забыли пароль?</a></div>
-                        <div class="field__wrap"><input class="field__input" type="password" placeholder="Минимум 5 символов"></div>
+      </div>
+      <div class="footer__row footer__row_second">
+        <div class="footer__col footer__col_md">
+          <div class="footer__socials socials"><a class="socials__item" href="#">
+            <svg class="icon icon-instagram">
+              <use xlink:href={% static "img/sprite.svg" %}#icon-instagram></use>
+            </svg>
+          </a><a class="socials__item" href="#">
+            <svg class="icon icon-twitter">
+              <use xlink:href={% static "img/sprite.svg" %}#icon-twitter></use>
+            </svg>
+          </a>
+            <a
+                class="socials__item" href="#">
+              <svg class="icon icon-fb">
+                <use xlink:href={% static "img/sprite.svg" %}#icon-fb></use>
+              </svg>
+            </a><a class="socials__item" href="#">
+              <svg class="icon icon-youtube">
+                <use xlink:href={% static "img/sprite.svg" %}#icon-youtube></use>
+              </svg>
+            </a></div>
+        </div>
+        <div class="footer__col footer__col_lg">
+          <div class="footer__group">
+            <div class="footer__copyright">2017 © Lil City, UAB.</div>
+            <div class="footer__links"><a class="footer__link" href="#">Договор-оферта</a>
+              <div class="footer__divider">|</div>
+              <a class="footer__link" href="#">Политика обработки персональных данных</a></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+  <div class="popup js-popup-auth">
+    <div class="popup__wrap js-popup-wrap">
+      <button class="popup__close js-popup-close">
+        <svg class="icon icon-close">
+          <use xlink:href={% static "img/sprite.svg" %}#icon-close></use>
+        </svg>
+      </button>
+      <div class="popup__body">
+        <div class="auth js-auth">
+          <div class="auth__login js-auth-login">
+            <div class="auth__nav"><a class="auth__type js-auth-type active" href="#">Войти</a><a
+                class="auth__type js-auth-type" href="#">РЕГИСТРАЦИЯ</a></div>
+            <div class="auth__body">
+              <form id="learner-auth-form" method="post" action="{% url 'lilcity:login' %}">
+                {% csrf_token %}
+                <div class="auth__tab js-auth-tab" style="display: block;">
+                  <div class="auth__enter js-auth-enter">
+                    <div id="learner-auth-field__username" class="auth__field field learner-auth-form__field">
+                      <div class="field__label">ПОЧТА</div>
+                      <div class="field__wrap"><input id="learner-auth-form__email" class="field__input" type="email"
+                                                      name="username"
+                                                      placeholder="name@website.com" tabindex="1"></div>
+                      <div id="learner-auth-field-error__username"
+                           class="field__error learner-auth-form__field-error"></div>
+                    </div>
+                    <div id="learner-auth-field__password" class="auth__field field learner-auth-form__field">
+                      <div class="field__label">ПАРОЛЬ<a class="field__link js-auth-go-pass" href="#" tabindex="4">Забыли
+                        пароль?</a></div>
+                      <div class="field__wrap"><input id="learner-auth-form__password" class="field__input"
+                                                      name="password"
+                                                      type="password" placeholder="Минимум 5 символов" tabindex="2">
                       </div>
-                      <div class="auth__foot"><button class="auth__btn btn btn_light">ВОЙТИ</button>
-                        <div class="auth__or">или</div><button class="auth__btn btn btn_fb"><svg class="icon icon-facebook"><use xlink:href={% static "img/sprite.svg" %}#icon-facebook></use></svg><span class="btn__title">ЧЕРЕЗ FACEBOOK</span></button></div>
+                      <div id="learner-auth-field-error__password"
+                           class="field__error learner-auth-form__field-error"></div>
+
+                      <div id="learner-auth-field-error__all" class="learner-auth-form__field-error"></div>
+                    </div>
+                    <div class="auth__foot">
+                      <button class="auth__btn btn btn_light" tabindex="3">ВОЙТИ</button>
+                      <div class="auth__or">или</div>
+                      <button class="auth__btn btn btn_fb">
+                        <svg class="icon icon-facebook">
+                          <use xlink:href={% static "img/sprite.svg" %}#icon-facebook></use>
+                        </svg>
+                        <span class="btn__title">ЧЕРЕЗ FACEBOOK</span></button>
                     </div>
                   </div>
-                  <div class="auth__tab js-auth-tab">
-                    <div class="auth__fieldset">
-                      <div class="auth__field field">
-                        <div class="field__label">ИМЯ</div>
-                        <div class="field__wrap"><input class="field__input" type="text" placeholder="Sasha"></div>
-                      </div>
-                      <div class="auth__field field">
-                        <div class="field__label">ФАМИЛИЯ</div>
-                        <div class="field__wrap"><input class="field__input" type="text" placeholder="Kru"></div>
-                      </div>
+                </div>
+              </form>
+              <form id="learner-registration-form" method="post" action="{% url 'lilcity:registration-learner' %}">
+                {% csrf_token %}
+                <div class="auth__tab js-auth-tab">
+                  <div class="auth__fieldset">
+                    <div id="learner-registration-field__first-name"
+                         class="auth__field field learner-registration-form__field">
+                      <div class="field__label">ИМЯ</div>
+                      <div class="field__wrap"><input id="learner-registration-form__first-name" class="field__input"
+                                                      type="text" name="first_name" placeholder="Sasha"></div>
+                      <div id="learner-registration-field-error__first-name"
+                           class="field__error learner-registration-form__field-error"></div>
                     </div>
-                    <div class="auth__field field">
-                      <div class="field__label">ПОЧТА</div>
-                      <div class="field__wrap"><input class="field__input" type="email" placeholder="name@website.com"></div>
+                    <div id="learner-registration-field__last-name"
+                         class="auth__field field learner-registration-form__field">
+                      <div class="field__label">ФАМИЛИЯ</div>
+                      <div class="field__wrap"><input id="learner-registration-form__last-name" class="field__input"
+                                                      type="text" name="last_name" placeholder="Kru"></div>
+                      <div id="learner-registration-field-error__last-name"
+                           class="field__error learner-registration-form__field-error"></div>
                     </div>
-                    <div class="auth__field field">
-                      <div class="field__label">ПАРОЛЬ</div>
-                      <div class="field__wrap"><input class="field__input" type="password" placeholder="Минимум 5 символов"></div>
+                  </div>
+                  <div id="learner-registration-field__email"
+                       class="auth__field field learner-registration-form__field">
+                    <div class="field__label">ПОЧТА</div>
+                    <div class="field__wrap"><input id="learner-registration-form__email" class="field__input"
+                                                    type="email" name="email" placeholder="name@website.com"></div>
+                    <div id="learner-registration-field-error__email"
+                         class="field__error learner-registration-form__field-error"></div>
+                  </div>
+                  <div id="learner-registration-field__password"
+                       class="auth__field field learner-registration-form__field">
+                    <div class="field__label">ПАРОЛЬ</div>
+                    <div class="field__wrap"><input id="learner-registration-form__password" class="field__input"
+                                                    type="password" name="password" placeholder="Минимум 5 символов">
                     </div>
-                    <div class="auth__foot"><button class="auth__btn btn btn_light">ЗАРЕГИСТРИРОВАТЬСЯ</button>
-                      <div class="auth__or">или</div><button class="auth__btn btn btn_fb"><svg class="icon icon-facebook"><use xlink:href={% static "img/sprite.svg" %}#icon-facebook></use></svg><span class="btn__title">ЧЕРЕЗ FACEBOOK</span></button></div>
+                    <div id="learner-registration-field-error__password"
+                         class="field__error learner-registration-form__field-error"></div>
+
+                    <div id="learner-registration-field-error__all"
+                         class="learner-registration-form__field-error"></div>
+                  </div>
+                  <div class="auth__foot">
+                    <button id="learner-registration-form__submit-button" class="auth__btn btn btn_light">
+                      ЗАРЕГИСТРИРОВАТЬСЯ
+                    </button>
+                    <div class="auth__or">или</div>
+                    <button class="auth__btn btn btn_fb">
+                      <svg class="icon icon-facebook">
+                        <use xlink:href={% static "img/sprite.svg" %}#icon-facebook></use>
+                      </svg>
+                      <span class="btn__title">ЧЕРЕЗ FACEBOOK</span></button>
                   </div>
                 </div>
-              </div>
-              <div class="auth__pass js-auth-pass">
-                <div class="auth__nav">
-                  <div class="auth__type active">ВОССТАНОВЛЕНИЕ ПАРОЛЯ</div>
-                </div>
-                <div class="auth__body">
+              </form>
+            </div>
+          </div>
+          <div class="auth__pass js-auth-pass">
+            <div class="auth__nav">
+              <div class="auth__type active">ВОССТАНОВЛЕНИЕ ПАРОЛЯ</div>
+            </div>
+            <div class="auth__body">
+              <div id="password-reset__form-wrapper">
+                <form id="password-reset-form" method="post" action="{% url 'lilcity:password_reset' %}">
+                  {% csrf_token %}
                   <div class="auth__enter js-auth-enter">
-                    <div class="auth__field field">
+                    <div id="password-reset__email-field" class="auth__field field">
                       <div class="field__label">ПОЧТА<a class="field__link js-auth-go-enter" href="#">Войти</a></div>
-                      <div class="field__wrap"><input class="field__input" type="email" placeholder="name@website.com"></div>
+                      <div class="field__wrap"><input id="password-reset__email" class="field__input" type="email"
+                                                      name="email" placeholder="name@website.com">
+                      </div>
+                      <div id="password-reset-field-error__email"
+                           class="field__error password-reset-form__field-error"></div>
+                      <div id="password-reset-field-error__all"
+                           class="password-reset-form__field-error"></div>
+                    </div>
+                    <div class="auth__foot">
+                      <button class="auth__btn btn btn_light">ОТПРАВИТЬ</button>
                     </div>
-                    <div class="auth__foot"><button class="auth__btn btn btn_light">ОТПРАВИТЬ</button></div>
                   </div>
+                </form>
+              </div>
+              <div id="password-reset__sent" style="display: none;">
+                <p>На ваш email отправлены инструкции по восстановлению пароля</p>
+                <div class="auth__foot">
+                  <button id="password-reset__success-hide" class="auth__btn btn btn_light" type="button">Хорошо</button>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="popup js-popup-buy">
-        <div class="popup__wrap popup__wrap_lg js-popup-wrap"><button class="popup__close js-popup-close"><svg class="icon icon-close"><use xlink:href={% static "img/sprite.svg" %}#icon-close></use></svg></button>
-          <div class="popup__body">
-            <div class="buy">
-              <div class="buy__row">
-                <div class="buy__col">
-                  <div class="buy__head buy__head_main">
-                    <div class="buy__title">Выбор урока/дня</div>
-                    <div class="buy__content">При записи на 5 уроков скидка 10%.</div>
-                  </div>
+    </div>
+  </div>
+  <div class="popup js-popup-buy">
+    <div class="popup__wrap popup__wrap_lg js-popup-wrap">
+      <button class="popup__close js-popup-close">
+        <svg class="icon icon-close">
+          <use xlink:href={% static "img/sprite.svg" %}#icon-close></use>
+        </svg>
+      </button>
+      <div class="popup__body">
+        <div class="buy">
+          <div class="buy__row">
+            <div class="buy__col">
+              <div class="buy__head buy__head_main">
+                <div class="buy__title">Выбор урока/дня</div>
+                <div class="buy__content">При записи на 5 уроков скидка 10%.</div>
+              </div>
+            </div>
+            <div class="buy__col">
+              <div class="buy__head">
+                <div class="buy__label">Месяц:</div>
+                <div class="buy__title">Январь</div>
+                <div class="buy__content">Если вы оплачиваете после 15 числа, доступ к урокам будет с 1-го следующего
+                  месяца.
                 </div>
-                <div class="buy__col">
-                  <div class="buy__head">
-                    <div class="buy__label">Месяц:</div>
-                    <div class="buy__title">Январь</div>
-                    <div class="buy__content">Если вы оплачиваете после 15 числа, доступ к урокам будет с 1-го следующего месяца.</div>
+              </div>
+            </div>
+            <div class="buy__col">
+              <div class="buy__list"><label class="switch switch_lesson"><input class="switch__input"
+                                                                                type="checkbox"><span
+                  class="switch__content"><span class="switch__cell">ПОНЕДЕЛЬНИК</span><span
+                  class="switch__cell">5+</span><span class="switch__cell">Персонаж</span><span class="switch__cell">600р</span></span></label>
+                <label
+                    class="switch switch_lesson"><input class="switch__input" type="checkbox" checked><span
+                    class="switch__content"><span class="switch__cell">Вторник</span><span
+                    class="switch__cell">5+</span><span class="switch__cell">Пластилиновая живопись</span><span
+                    class="switch__cell">600р</span></span>
+                </label><label class="switch switch_lesson"><input class="switch__input" type="checkbox"><span
+                    class="switch__content"><span class="switch__cell">Среда</span><span
+                    class="switch__cell">5+</span><span class="switch__cell">Персонаж</span><span class="switch__cell">600р</span></span></label>
+                <label
+                    class="switch switch_lesson"><input class="switch__input" type="checkbox" checked><span
+                    class="switch__content"><span class="switch__cell">Четверг</span><span
+                    class="switch__cell">5+</span><span class="switch__cell">Персонаж</span><span class="switch__cell">600р</span></span>
+                </label><label class="switch switch_lesson"><input class="switch__input" type="checkbox"><span
+                    class="switch__content"><span class="switch__cell">Пятница</span><span
+                    class="switch__cell">5+</span><span class="switch__cell">Развитие креативного мышления</span><span
+                    class="switch__cell">600р</span></span></label>
+                <label
+                    class="switch switch_lesson"><input class="switch__input" type="checkbox"><span
+                    class="switch__content"><span class="switch__cell">Суббота</span><span
+                    class="switch__cell">7+</span><span class="switch__cell">Персонаж</span><span class="switch__cell">600р</span></span>
+                </label><label class="switch switch_lesson"><input class="switch__input" type="checkbox" checked><span
+                    class="switch__content"><span class="switch__cell">Воскресенье</span><span
+                    class="switch__cell">7+</span><span class="switch__cell">Персонаж</span><span class="switch__cell">600р</span></span></label>
+              </div>
+            </div>
+            <div class="buy__col">
+              <div class="order">
+                <div class="order__wrap">
+                  <div class="order__title">Ваш заказ:</div>
+                  <div class="order__preview"><img class="order__pic" src={% static "img/order.jpg" %}></div>
+                  <div class="order__info">
+                    <div class="order__label">ШКОЛА</div>
+                    <div class="order__days">Вторник, Четверг, Воскресенье</div>
                   </div>
-                </div>
-                <div class="buy__col">
-                  <div class="buy__list"><label class="switch switch_lesson"><input class="switch__input" type="checkbox"><span class="switch__content"><span class="switch__cell">ПОНЕДЕЛЬНИК</span><span class="switch__cell">5+</span><span class="switch__cell">Персонаж</span><span class="switch__cell">600р</span></span></label>
-                    <label
-                      class="switch switch_lesson"><input class="switch__input" type="checkbox" checked><span class="switch__content"><span class="switch__cell">Вторник</span><span class="switch__cell">5+</span><span class="switch__cell">Пластилиновая живопись</span><span class="switch__cell">600р</span></span>
-                      </label><label class="switch switch_lesson"><input class="switch__input" type="checkbox"><span class="switch__content"><span class="switch__cell">Среда</span><span class="switch__cell">5+</span><span class="switch__cell">Персонаж</span><span class="switch__cell">600р</span></span></label>
-                      <label
-                        class="switch switch_lesson"><input class="switch__input" type="checkbox" checked><span class="switch__content"><span class="switch__cell">Четверг</span><span class="switch__cell">5+</span><span class="switch__cell">Персонаж</span><span class="switch__cell">600р</span></span>
-                        </label><label class="switch switch_lesson"><input class="switch__input" type="checkbox"><span class="switch__content"><span class="switch__cell">Пятница</span><span class="switch__cell">5+</span><span class="switch__cell">Развитие креативного мышления</span><span class="switch__cell">600р</span></span></label>
-                        <label
-                          class="switch switch_lesson"><input class="switch__input" type="checkbox"><span class="switch__content"><span class="switch__cell">Суббота</span><span class="switch__cell">7+</span><span class="switch__cell">Персонаж</span><span class="switch__cell">600р</span></span>
-                          </label><label class="switch switch_lesson"><input class="switch__input" type="checkbox" checked><span class="switch__content"><span class="switch__cell">Воскресенье</span><span class="switch__cell">7+</span><span class="switch__cell">Персонаж</span><span class="switch__cell">600р</span></span></label></div>
-                </div>
-                <div class="buy__col">
-                  <div class="order">
-                    <div class="order__wrap">
-                      <div class="order__title">Ваш заказ:</div>
-                      <div class="order__preview"><img class="order__pic" src={% static "img/order.jpg" %}></div>
-                      <div class="order__info">
-                        <div class="order__label">ШКОЛА</div>
-                        <div class="order__days">Вторник, Четверг, Воскресенье</div>
-                      </div>
-                      <div class="order__foot">
-                        <div class="order__subtitle">Итого, за месяц:</div>
-                        <div class="order__total">1800р.</div>
-                      </div>
-                    </div>
+                  <div class="order__foot">
+                    <div class="order__subtitle">Итого, за месяц:</div>
+                    <div class="order__total">1800р.</div>
                   </div>
                 </div>
               </div>
-              <div class="buy__foot"><a class="buy__btn btn btn_md" href="#">ПЕРЕЙТИ К ОПЛАТЕ</a></div>
             </div>
           </div>
+          <div class="buy__foot"><a class="buy__btn btn btn_md" href="#">ПЕРЕЙТИ К ОПЛАТЕ</a></div>
         </div>
       </div>
     </div>
-    <script type="text/javascript" src={% static "js/app.js" %}></script>
-  </body>
+  </div>
+</div>
+<script type="text/javascript" src={% static "js/app.js" %}></script>
+</body>
 
 </html>
diff --git a/web/build/js/app.js b/web/build/js/app.js
index deec53c0..68475053 100755
--- a/web/build/js/app.js
+++ b/web/build/js/app.js
@@ -61,34 +61,13 @@ var app =
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ 	return __webpack_require__(__webpack_require__.s = 2);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-"use strict";
-
-
-__webpack_require__(2);
-
-__webpack_require__(4);
-
-__webpack_require__(5);
-
-__webpack_require__(6);
-
-__webpack_require__(7);
-
-__webpack_require__(8);
-
-__webpack_require__(9);
-
-/***/ }),
-/* 1 */
-/***/ (function(module, exports, __webpack_require__) {
-
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
  * jQuery JavaScript Library v3.3.1
  * https://jquery.com/
@@ -10456,6 +10435,18 @@ return jQuery;
 } );
 
 
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var MOBILE_WIDTH = exports.MOBILE_WIDTH = 600;
+
 /***/ }),
 /* 2 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -10463,11 +10454,56 @@ return jQuery;
 "use strict";
 
 
-var _jquery = __webpack_require__(1);
+__webpack_require__(3);
+
+__webpack_require__(4);
+
+__webpack_require__(5);
+
+__webpack_require__(6);
+
+__webpack_require__(7);
+
+__webpack_require__(8);
+
+__webpack_require__(9);
+
+__webpack_require__(10);
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _jquery = __webpack_require__(0);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
-var _constants = __webpack_require__(3);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _jquery2.default)(document).ready(function () {
+    // Добавляем заголовок X-CSRFToken для всех AJAX запросов JQuery.
+    _jquery2.default.ajaxSetup({
+        headers: {
+            'X-CSRFToken': (0, _jquery2.default)('meta[name="csrf-token"]').attr('content')
+        }
+    });
+});
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _jquery = __webpack_require__(0);
+
+var _jquery2 = _interopRequireDefault(_jquery);
+
+var _constants = __webpack_require__(1);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -10506,29 +10542,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 });
 
 /***/ }),
-/* 3 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var MOBILE_WIDTH = exports.MOBILE_WIDTH = 600;
-
-/***/ }),
-/* 4 */
+/* 5 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _jquery = __webpack_require__(1);
+var _jquery = __webpack_require__(0);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
-var _constants = __webpack_require__(3);
+var _constants = __webpack_require__(1);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -10560,13 +10584,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 });
 
 /***/ }),
-/* 5 */
+/* 6 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _jquery = __webpack_require__(1);
+var _jquery = __webpack_require__(0);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -10582,16 +10606,28 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 });
 
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _jquery = __webpack_require__(1);
+var _jquery = __webpack_require__(0);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
+var _isEmail = __webpack_require__(33);
+
+var _isEmail2 = _interopRequireDefault(_isEmail);
+
+var _isEmpty = __webpack_require__(55);
+
+var _isEmpty2 = _interopRequireDefault(_isEmpty);
+
+var _isLength = __webpack_require__(56);
+
+var _isLength2 = _interopRequireDefault(_isLength);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 (0, _jquery2.default)(document).ready(function () {
@@ -10627,16 +10663,212 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         pass.hide();
         login.fadeIn();
     });
+
+    (0, _jquery2.default)('#password-reset__success-hide').on('click', function (e) {
+        e.preventDefault();
+        (0, _jquery2.default)('#password-reset__form-wrapper').show();
+        (0, _jquery2.default)('#password-reset__sent').hide();
+    });
+
+    var passwordResetForm = (0, _jquery2.default)('#password-reset-form');
+    passwordResetForm.on('submit', function (e) {
+        e.preventDefault();
+
+        var passwordResetAllowed = true;
+        (0, _jquery2.default)('#password-reset__email-field').removeClass('error');
+        (0, _jquery2.default)('.password-reset-form__field-error').text('');
+
+        var emailValue = (0, _jquery2.default)('#password-reset__email').val();
+        if ((0, _isEmpty2.default)(emailValue)) {
+            (0, _jquery2.default)('#password-reset__email-field').addClass('error');
+            (0, _jquery2.default)('#password-reset-field-error__email').text('Укажите почту');
+            passwordResetAllowed = false;
+        } else if (!(0, _isEmail2.default)(emailValue)) {
+            (0, _jquery2.default)('#password-reset__email-field').addClass('error');
+            (0, _jquery2.default)('#password-reset-field-error__email').text('Похоже, вы допустили ошибку в почте');
+            passwordResetAllowed = false;
+        }
+
+        if (!passwordResetAllowed) {
+            return;
+        }
+
+        _jquery2.default.ajax(passwordResetForm.attr('action'), {
+            method: 'POST',
+            data: passwordResetForm.serialize()
+        }).done(function (data) {
+            if (data.success === true) {
+                (0, _jquery2.default)('#password-reset__form-wrapper').hide();
+                (0, _jquery2.default)('#password-reset__sent').show();
+            }
+        }).fail(function (xhr) {
+            console.log('error', xhr);
+            if (xhr.status === 400) {
+                if (xhr.responseJSON.errors) {
+                    for (var errorField in xhr.responseJSON.errors) {
+                        if (!xhr.responseJSON.errors.hasOwnProperty(errorField)) {
+                            continue;
+                        }
+                        var errorMessage = xhr.responseJSON.errors[errorField][0].message;
+                        if (errorField === '__all__') {
+                            (0, _jquery2.default)('#password-reset-field-error__all').text(errorMessage);
+                        } else {
+                            (0, _jquery2.default)('#password-reset-field-error__' + errorField).text(errorMessage);
+                            (0, _jquery2.default)('#password-reset__' + errorField + '-field').addClass('error');
+                        }
+                    }
+
+                    return;
+                }
+            }
+            (0, _jquery2.default)('#learner-auth-field-error__all').text('Произошла незвестная ошибка');
+        });
+    });
+
+    var authForm = (0, _jquery2.default)('#learner-auth-form');
+    authForm.on('submit', function (e) {
+        e.preventDefault();
+
+        var authAllowed = true;
+        (0, _jquery2.default)('.learner-auth-form__field').removeClass('error');
+        (0, _jquery2.default)('.learner-auth-form__field-error').text('');
+
+        var emailValue = (0, _jquery2.default)('#learner-auth-form__email').val();
+        if ((0, _isEmpty2.default)(emailValue)) {
+            (0, _jquery2.default)('#learner-auth-field__email').addClass('error');
+            (0, _jquery2.default)('#learner-auth-field-error__username').text('Укажите почту');
+            authAllowed = false;
+        } else if (!(0, _isEmail2.default)(emailValue)) {
+            (0, _jquery2.default)('#learner-auth-field__email').addClass('error');
+            (0, _jquery2.default)('#learner-auth-field-error__username').text('Похоже, вы допустили ошибку в почте');
+            authAllowed = false;
+        }
+
+        if (!(0, _isLength2.default)((0, _jquery2.default)('#learner-auth-form__password').val(), { min: 5, max: undefined })) {
+            (0, _jquery2.default)('#learner-auth-field__password').addClass('error');
+            (0, _jquery2.default)('#learner-auth-field-error__password').text('Наберите ваш пароль, минимум 5 символов в длину');
+            authAllowed = false;
+        }
+
+        if (!authAllowed) {
+            return;
+        }
+
+        _jquery2.default.ajax(authForm.attr('action'), {
+            method: 'POST',
+            data: authForm.serialize()
+        }).done(function (data) {
+            if (data.success === true) {
+                alert("DEV - Успешный вход");
+                // TODO: Куда редиректить пользователя?
+            }
+        }).fail(function (xhr) {
+            console.log('error', xhr);
+            if (xhr.status === 400) {
+                if (xhr.responseJSON.errors) {
+                    for (var errorField in xhr.responseJSON.errors) {
+                        if (!xhr.responseJSON.errors.hasOwnProperty(errorField)) {
+                            continue;
+                        }
+                        var errorMessage = xhr.responseJSON.errors[errorField][0].message;
+                        if (errorField === '__all__') {
+                            (0, _jquery2.default)('#learner-auth-field-error__all').text(errorMessage);
+                        } else {
+                            (0, _jquery2.default)('#learner-auth-field-error__' + errorField).text(errorMessage);
+                            (0, _jquery2.default)('#learner-auth-field__' + errorField).addClass('error');
+                        }
+                    }
+
+                    return;
+                }
+            }
+            (0, _jquery2.default)('#learner-auth-field-error__all').text('Произошла незвестная ошибка');
+        });
+    });
+
+    var registrationForm = (0, _jquery2.default)('#learner-registration-form');
+    registrationForm.on('submit', function (e) {
+        e.preventDefault();
+
+        var registrationAllowed = true;
+
+        (0, _jquery2.default)('.learner-registration-form__field').removeClass('error');
+        (0, _jquery2.default)('.learner-registration-form__field-error').text('');
+
+        if ((0, _isEmpty2.default)((0, _jquery2.default)('#learner-registration-form__first-name').val())) {
+            (0, _jquery2.default)('#learner-registration-field__first-name').addClass('error');
+            (0, _jquery2.default)('#learner-registration-field-error__first-name').text('Укажите имя');
+            registrationAllowed = false;
+        }
+        if ((0, _isEmpty2.default)((0, _jquery2.default)('#learner-registration-form__last-name').val())) {
+            (0, _jquery2.default)('#learner-registration-field__last-name').addClass('error');
+            (0, _jquery2.default)('#learner-registration-field-error__last-name').text('Укажите фамилию');
+            registrationAllowed = false;
+        }
+
+        var emailValue = (0, _jquery2.default)('#learner-registration-form__email').val();
+        if ((0, _isEmpty2.default)(emailValue)) {
+            (0, _jquery2.default)('#learner-registration-field__email').addClass('error');
+            (0, _jquery2.default)('#learner-registration-field-error__email').text('Укажите почту');
+            registrationAllowed = false;
+        } else if (!(0, _isEmail2.default)(emailValue)) {
+            (0, _jquery2.default)('#learner-registration-field__email').addClass('error');
+            (0, _jquery2.default)('#learner-registration-field-error__email').text('Похоже, вы допустили ошибку в почте');
+            registrationAllowed = false;
+        }
+
+        if (!(0, _isLength2.default)((0, _jquery2.default)('#learner-registration-form__password').val(), { min: 5, max: undefined })) {
+            (0, _jquery2.default)('#learner-registration-field__password').addClass('error');
+            (0, _jquery2.default)('#learner-registration-field-error__password').text('Укажите пароль, минимум 5 символов в длину');
+            registrationAllowed = false;
+        }
+
+        if (!registrationAllowed) {
+            return;
+        }
+
+        _jquery2.default.ajax(registrationForm.attr('action'), {
+            method: 'POST',
+            data: registrationForm.serialize()
+        }).done(function (data) {
+            if (data.success === true) {
+                alert("DEV - Успешная регистрация");
+                // TODO: Куда редиректить пользователя?
+            }
+        }).fail(function (xhr) {
+            console.log('error', xhr);
+            if (xhr.status === 400) {
+                if (xhr.responseJSON.errors) {
+                    for (var errorField in xhr.responseJSON.errors) {
+                        if (!xhr.responseJSON.errors.hasOwnProperty(errorField)) {
+                            continue;
+                        }
+                        var errorMessage = xhr.responseJSON.errors[errorField][0].message;
+                        if (errorField === '__all__') {
+                            (0, _jquery2.default)('#learner-registration-field-error__all').text(errorMessage);
+                        } else {
+                            (0, _jquery2.default)('#learner-registration-field-error__' + errorField).text(errorMessage);
+                            (0, _jquery2.default)('#learner-registration-field__' + errorField).addClass('error');
+                        }
+                    }
+
+                    return;
+                }
+            }
+
+            (0, _jquery2.default)('#learner-registration-field-error__all').text('Произошла незвестная ошибка');
+        });
+    });
 });
 
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _jquery = __webpack_require__(1);
+var _jquery = __webpack_require__(0);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -10686,13 +10918,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 });
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _jquery = __webpack_require__(1);
+var _jquery = __webpack_require__(0);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -10722,13 +10954,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 });
 
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _jquery = __webpack_require__(1);
+var _jquery = __webpack_require__(0);
 
 var _jquery2 = _interopRequireDefault(_jquery);
 
@@ -10783,6 +11015,354 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     }
 });
 
+/***/ }),
+/* 11 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = assertString;
+function assertString(input) {
+  var isString = typeof input === 'string' || input instanceof String;
+
+  if (!isString) {
+    throw new TypeError('This library (validator.js) validates strings only');
+  }
+}
+module.exports = exports['default'];
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = merge;
+function merge() {
+  var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var defaults = arguments[1];
+
+  for (var key in defaults) {
+    if (typeof obj[key] === 'undefined') {
+      obj[key] = defaults[key];
+    }
+  }
+  return obj;
+}
+module.exports = exports['default'];
+
+/***/ }),
+/* 13 */,
+/* 14 */,
+/* 15 */,
+/* 16 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isFQDN;
+
+var _assertString = __webpack_require__(11);
+
+var _assertString2 = _interopRequireDefault(_assertString);
+
+var _merge = __webpack_require__(12);
+
+var _merge2 = _interopRequireDefault(_merge);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var default_fqdn_options = {
+  require_tld: true,
+  allow_underscores: false,
+  allow_trailing_dot: false
+};
+
+function isFQDN(str, options) {
+  (0, _assertString2.default)(str);
+  options = (0, _merge2.default)(options, default_fqdn_options);
+
+  /* Remove the optional trailing dot before checking validity */
+  if (options.allow_trailing_dot && str[str.length - 1] === '.') {
+    str = str.substring(0, str.length - 1);
+  }
+  var parts = str.split('.');
+  if (options.require_tld) {
+    var tld = parts.pop();
+    if (!parts.length || !/^([a-z\u00a1-\uffff]{2,}|xn[a-z0-9-]{2,})$/i.test(tld)) {
+      return false;
+    }
+    // disallow spaces
+    if (/[\s\u2002-\u200B\u202F\u205F\u3000\uFEFF\uDB40\uDC20]/.test(tld)) {
+      return false;
+    }
+  }
+  for (var part, i = 0; i < parts.length; i++) {
+    part = parts[i];
+    if (options.allow_underscores) {
+      part = part.replace(/_/g, '');
+    }
+    if (!/^[a-z\u00a1-\uffff0-9-]+$/i.test(part)) {
+      return false;
+    }
+    // disallow full-width chars
+    if (/[\uff01-\uff5e]/.test(part)) {
+      return false;
+    }
+    if (part[0] === '-' || part[part.length - 1] === '-') {
+      return false;
+    }
+  }
+  return true;
+}
+module.exports = exports['default'];
+
+/***/ }),
+/* 17 */,
+/* 18 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+exports.default = isByteLength;
+
+var _assertString = __webpack_require__(11);
+
+var _assertString2 = _interopRequireDefault(_assertString);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable prefer-rest-params */
+function isByteLength(str, options) {
+  (0, _assertString2.default)(str);
+  var min = void 0;
+  var max = void 0;
+  if ((typeof options === 'undefined' ? 'undefined' : _typeof(options)) === 'object') {
+    min = options.min || 0;
+    max = options.max;
+  } else {
+    // backwards compatibility: isByteLength(str, min [, max])
+    min = arguments[1];
+    max = arguments[2];
+  }
+  var len = encodeURI(str).split(/%..|./).length - 1;
+  return len >= min && (typeof max === 'undefined' || len <= max);
+}
+module.exports = exports['default'];
+
+/***/ }),
+/* 19 */,
+/* 20 */,
+/* 21 */,
+/* 22 */,
+/* 23 */,
+/* 24 */,
+/* 25 */,
+/* 26 */,
+/* 27 */,
+/* 28 */,
+/* 29 */,
+/* 30 */,
+/* 31 */,
+/* 32 */,
+/* 33 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isEmail;
+
+var _assertString = __webpack_require__(11);
+
+var _assertString2 = _interopRequireDefault(_assertString);
+
+var _merge = __webpack_require__(12);
+
+var _merge2 = _interopRequireDefault(_merge);
+
+var _isByteLength = __webpack_require__(18);
+
+var _isByteLength2 = _interopRequireDefault(_isByteLength);
+
+var _isFQDN = __webpack_require__(16);
+
+var _isFQDN2 = _interopRequireDefault(_isFQDN);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var default_email_options = {
+  allow_display_name: false,
+  require_display_name: false,
+  allow_utf8_local_part: true,
+  require_tld: true
+};
+
+/* eslint-disable max-len */
+/* eslint-disable no-control-regex */
+var displayName = /^[a-z\d!#\$%&'\*\+\-\/=\?\^_`{\|}~\.\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+[a-z\d!#\$%&'\*\+\-\/=\?\^_`{\|}~\,\.\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF\s]*<(.+)>$/i;
+var emailUserPart = /^[a-z\d!#\$%&'\*\+\-\/=\?\^_`{\|}~]+$/i;
+var quotedEmailUser = /^([\s\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e]|(\\[\x01-\x09\x0b\x0c\x0d-\x7f]))*$/i;
+var emailUserUtf8Part = /^[a-z\d!#\$%&'\*\+\-\/=\?\^_`{\|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+$/i;
+var quotedEmailUserUtf8 = /^([\s\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|(\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*$/i;
+/* eslint-enable max-len */
+/* eslint-enable no-control-regex */
+
+function isEmail(str, options) {
+  (0, _assertString2.default)(str);
+  options = (0, _merge2.default)(options, default_email_options);
+
+  if (options.require_display_name || options.allow_display_name) {
+    var display_email = str.match(displayName);
+    if (display_email) {
+      str = display_email[1];
+    } else if (options.require_display_name) {
+      return false;
+    }
+  }
+
+  var parts = str.split('@');
+  var domain = parts.pop();
+  var user = parts.join('@');
+
+  var lower_domain = domain.toLowerCase();
+  if (lower_domain === 'gmail.com' || lower_domain === 'googlemail.com') {
+    user = user.replace(/\./g, '').toLowerCase();
+  }
+
+  if (!(0, _isByteLength2.default)(user, { max: 64 }) || !(0, _isByteLength2.default)(domain, { max: 254 })) {
+    return false;
+  }
+
+  if (!(0, _isFQDN2.default)(domain, { require_tld: options.require_tld })) {
+    return false;
+  }
+
+  if (user[0] === '"') {
+    user = user.slice(1, user.length - 1);
+    return options.allow_utf8_local_part ? quotedEmailUserUtf8.test(user) : quotedEmailUser.test(user);
+  }
+
+  var pattern = options.allow_utf8_local_part ? emailUserUtf8Part : emailUserPart;
+
+  var user_parts = user.split('.');
+  for (var i = 0; i < user_parts.length; i++) {
+    if (!pattern.test(user_parts[i])) {
+      return false;
+    }
+  }
+
+  return true;
+}
+module.exports = exports['default'];
+
+/***/ }),
+/* 34 */,
+/* 35 */,
+/* 36 */,
+/* 37 */,
+/* 38 */,
+/* 39 */,
+/* 40 */,
+/* 41 */,
+/* 42 */,
+/* 43 */,
+/* 44 */,
+/* 45 */,
+/* 46 */,
+/* 47 */,
+/* 48 */,
+/* 49 */,
+/* 50 */,
+/* 51 */,
+/* 52 */,
+/* 53 */,
+/* 54 */,
+/* 55 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isEmpty;
+
+var _assertString = __webpack_require__(11);
+
+var _assertString2 = _interopRequireDefault(_assertString);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function isEmpty(str) {
+  (0, _assertString2.default)(str);
+  return str.length === 0;
+}
+module.exports = exports['default'];
+
+/***/ }),
+/* 56 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+exports.default = isLength;
+
+var _assertString = __webpack_require__(11);
+
+var _assertString2 = _interopRequireDefault(_assertString);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable prefer-rest-params */
+function isLength(str, options) {
+  (0, _assertString2.default)(str);
+  var min = void 0;
+  var max = void 0;
+  if ((typeof options === 'undefined' ? 'undefined' : _typeof(options)) === 'object') {
+    min = options.min || 0;
+    max = options.max;
+  } else {
+    // backwards compatibility: isLength(str, min [, max])
+    min = arguments[1];
+    max = arguments[2];
+  }
+  var surrogatePairs = str.match(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g) || [];
+  var len = str.length - surrogatePairs.length;
+  return len >= min && (typeof max === 'undefined' || len <= max);
+}
+module.exports = exports['default'];
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=app.js.map
\ No newline at end of file
diff --git a/web/src/js/app.js b/web/src/js/app.js
index 653214bd..9eb50dea 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -1,7 +1,6 @@
 /**
  * Входная точка клиентского приложения.
  */
-
 import "./modules/common";
 import "./modules/header";
 import "./modules/search";
diff --git a/web/src/js/modules/auth.js b/web/src/js/modules/auth.js
index 862fe580..624b0102 100644
--- a/web/src/js/modules/auth.js
+++ b/web/src/js/modules/auth.js
@@ -1,4 +1,7 @@
 import $ from 'jquery';
+import isEmail from 'validator/lib/isEmail';
+import isEmpty from 'validator/lib/isEmpty';
+import isLength from 'validator/lib/isLength';
 
 $(document).ready(function () {
     let auth = $('.js-auth'),
@@ -9,7 +12,7 @@ $(document).ready(function () {
         goPass = auth.find('.js-auth-go-pass'),
         goEnter = auth.find('.js-auth-go-enter');
 
-    type.on('click', function(e){
+    type.on('click', function (e) {
         e.preventDefault();
         let _this = $(this),
             index = _this.index();
@@ -20,17 +23,219 @@ $(document).ready(function () {
         tab.eq(index).fadeIn();
     });
 
-    goPass.on('click', function(e){
+    goPass.on('click', function (e) {
         e.preventDefault();
 
         login.hide();
         pass.fadeIn();
     });
 
-    goEnter.on('click', function(e){
+    goEnter.on('click', function (e) {
         e.preventDefault();
 
         pass.hide();
         login.fadeIn();
     });
+    
+    $('#password-reset__success-hide').on('click', function (e) {
+        e.preventDefault();
+        $('#password-reset__form-wrapper').show();
+        $('#password-reset__sent').hide();
+    });
+
+    let passwordResetForm = $('#password-reset-form');
+    passwordResetForm.on('submit', function (e) {
+        e.preventDefault();
+
+        let passwordResetAllowed = true;
+        $('#password-reset__email-field').removeClass('error');
+        $('.password-reset-form__field-error').text('');
+
+        const emailValue = $('#password-reset__email').val();
+        if (isEmpty(emailValue)) {
+            $('#password-reset__email-field').addClass('error');
+            $('#password-reset-field-error__email').text('Укажите почту');
+            passwordResetAllowed = false;
+        } else if (!isEmail(emailValue)) {
+            $('#password-reset__email-field').addClass('error');
+            $('#password-reset-field-error__email').text('Похоже, вы допустили ошибку в почте');
+            passwordResetAllowed = false;
+        }
+
+        if (!passwordResetAllowed) {
+            return;
+        }
+
+        $.ajax(passwordResetForm.attr('action'), {
+            method: 'POST',
+            data: passwordResetForm.serialize(),
+        })
+            .done(function (data) {
+                if (data.success === true) {
+                    $('#password-reset__form-wrapper').hide();
+                    $('#password-reset__sent').show();
+                }
+            })
+            .fail(function (xhr) {
+                console.log('error', xhr);
+                if (xhr.status === 400) {
+                    if (xhr.responseJSON.errors) {
+                        for (let errorField in xhr.responseJSON.errors) {
+                            if (!xhr.responseJSON.errors.hasOwnProperty(errorField)) {
+                                continue;
+                            }
+                            const errorMessage = xhr.responseJSON.errors[errorField][0].message;
+                            if (errorField === '__all__') {
+                                $('#password-reset-field-error__all').text(errorMessage);
+                            } else {
+                                $(`#password-reset-field-error__${errorField}`).text(errorMessage);
+                                $(`#password-reset__${errorField}-field`).addClass('error');
+                            }
+                        }
+
+                        return;
+                    }
+                }
+                $('#learner-auth-field-error__all').text('Произошла незвестная ошибка');
+            });
+    });
+
+    let authForm = $('#learner-auth-form');
+    authForm.on('submit', function (e) {
+        e.preventDefault();
+
+        let authAllowed = true;
+        $('.learner-auth-form__field').removeClass('error');
+        $('.learner-auth-form__field-error').text('');
+
+        const emailValue = $('#learner-auth-form__email').val();
+        if (isEmpty(emailValue)) {
+            $('#learner-auth-field__email').addClass('error');
+            $('#learner-auth-field-error__username').text('Укажите почту');
+            authAllowed = false;
+        } else if (!isEmail(emailValue)) {
+            $('#learner-auth-field__email').addClass('error');
+            $('#learner-auth-field-error__username').text('Похоже, вы допустили ошибку в почте');
+            authAllowed = false;
+        }
+
+        if (!isLength($('#learner-auth-form__password').val(), {min: 5, max: undefined})) {
+            $('#learner-auth-field__password').addClass('error');
+            $('#learner-auth-field-error__password').text('Наберите ваш пароль, минимум 5 символов в длину');
+            authAllowed = false;
+        }
+
+        if (!authAllowed) {
+            return;
+        }
+
+        $.ajax(authForm.attr('action'), {
+            method: 'POST',
+            data: authForm.serialize(),
+        })
+            .done(function (data) {
+                if (data.success === true) {
+                    alert("DEV - Успешный вход");
+                    // TODO: Куда редиректить пользователя?
+                }
+            })
+            .fail(function (xhr) {
+                console.log('error', xhr);
+                if (xhr.status === 400) {
+                    if (xhr.responseJSON.errors) {
+                        for (let errorField in xhr.responseJSON.errors) {
+                            if (!xhr.responseJSON.errors.hasOwnProperty(errorField)) {
+                                continue;
+                            }
+                            const errorMessage = xhr.responseJSON.errors[errorField][0].message;
+                            if (errorField === '__all__') {
+                                $('#learner-auth-field-error__all').text(errorMessage);
+                            } else {
+                                $(`#learner-auth-field-error__${errorField}`).text(errorMessage);
+                                $(`#learner-auth-field__${errorField}`).addClass('error');
+                            }
+                        }
+
+                        return;
+                    }
+                }
+                $('#learner-auth-field-error__all').text('Произошла незвестная ошибка');
+            });
+    });
+
+    let registrationForm = $('#learner-registration-form');
+    registrationForm.on('submit', function (e) {
+        e.preventDefault();
+
+        let registrationAllowed = true;
+
+        $('.learner-registration-form__field').removeClass('error');
+        $('.learner-registration-form__field-error').text('');
+
+        if (isEmpty($('#learner-registration-form__first-name').val())) {
+            $('#learner-registration-field__first-name').addClass('error');
+            $('#learner-registration-field-error__first-name').text('Укажите имя');
+            registrationAllowed = false;
+        }
+        if (isEmpty($('#learner-registration-form__last-name').val())) {
+            $('#learner-registration-field__last-name').addClass('error');
+            $('#learner-registration-field-error__last-name').text('Укажите фамилию');
+            registrationAllowed = false;
+        }
+
+        const emailValue = $('#learner-registration-form__email').val();
+        if (isEmpty(emailValue)) {
+            $('#learner-registration-field__email').addClass('error');
+            $('#learner-registration-field-error__email').text('Укажите почту');
+            registrationAllowed = false;
+        } else if (!isEmail(emailValue)) {
+            $('#learner-registration-field__email').addClass('error');
+            $('#learner-registration-field-error__email').text('Похоже, вы допустили ошибку в почте');
+            registrationAllowed = false;
+        }
+
+        if (!isLength($('#learner-registration-form__password').val(), {min: 5, max: undefined})) {
+            $('#learner-registration-field__password').addClass('error');
+            $('#learner-registration-field-error__password').text('Укажите пароль, минимум 5 символов в длину');
+            registrationAllowed = false;
+        }
+
+        if (!registrationAllowed) {
+            return;
+        }
+
+        $.ajax(registrationForm.attr('action'), {
+            method: 'POST',
+            data: registrationForm.serialize(),
+        })
+            .done(function (data) {
+                if (data.success === true) {
+                    alert("DEV - Успешная регистрация");
+                    // TODO: Куда редиректить пользователя?
+                }
+            })
+            .fail(function (xhr) {
+                console.log('error', xhr);
+                if (xhr.status === 400) {
+                    if (xhr.responseJSON.errors) {
+                        for (let errorField in xhr.responseJSON.errors) {
+                            if (!xhr.responseJSON.errors.hasOwnProperty(errorField)) {
+                                continue;
+                            }
+                            const errorMessage = xhr.responseJSON.errors[errorField][0].message;
+                            if (errorField === '__all__') {
+                                $('#learner-registration-field-error__all').text(errorMessage);
+                            } else {
+                                $(`#learner-registration-field-error__${errorField}`).text(errorMessage);
+                                $(`#learner-registration-field__${errorField}`).addClass('error');
+                            }
+                        }
+
+                        return;
+                    }
+                }
+
+                $('#learner-registration-field-error__all').text('Произошла незвестная ошибка');
+            });
+    });
 });
\ No newline at end of file
