0.0.10 update registrarion and login form

static/css/styles.css

@@ -98,25 +98,42 @@ html, body{
 /*Стилизация radio button */
 
 .form_radio_btn {
-	display: inline-block;
+	width: 375px;
-	margin-right: 10px;
+    border-radius: 14px;
+    background: #FFF;
+    display: flex;
+    height: 70px;
+    align-items: center;
+    margin-bottom: 40px;
 }
 .form_radio_btn input[type=radio] {
 	display: none;
 }
 .form_radio_btn label {
-	display: inline-block;
+	text-decoration: none;
-	cursor: pointer;
+    color: black;
-	padding: 0px 15px;
+    /* Body text 1 */
-	line-height: 34px;
+    font-family: Inter;
-	border: 1px solid #999;
+    font-size: 16px;
-	border-radius: 6px;
+    font-style: normal;
-	user-select: none;
+    font-weight: 500;
+    line-height: 22px;
+    border-radius: 10px;
+    display: flex;
+    width: 169px;
+    height: 44px;
+    padding: 8px 16px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+    margin: 0px 3px;
 }
 
 /* Checked */
 .form_radio_btn input[type=radio]:checked + label {
-	background: #ffe0a6;
+	 background: #FF613A;
+    color: white;
 }
 
 /* Hover */
@@ -512,13 +529,12 @@ section.register>form {
     background: #FFF;
     display: flex;
     height: 70px;
-    align-items: center;
     margin-bottom: 40px;
 }
 
 
 
-a.active {
+input.active {
     text-decoration: none;
     color: #FFF;
     /* Body text 1 */
@@ -540,7 +556,7 @@ a.active {
     margin: 0px 3px;
 }
 
-a.deadctive {
+input.deactive {
     text-decoration: none;
     display: flex;
     width: 100%;
@@ -631,7 +647,7 @@ section.login>h1 {
     margin-bottom: 40px;
 }
 
-section.login>div {
+section.login>form {
     width: 420px;
     margin: auto;
     text-align: center;
@@ -651,7 +667,7 @@ section.login>div {
     padding-left: 10px;
 }
 
-section.login>div>div:nth-child(4) {
+section.login>form>div>div:nth-child(4) {
     color: rgba(39, 36, 36, 0.60);
     text-align: center;
     /* Body text 3 */
@@ -663,7 +679,7 @@ section.login>div>div:nth-child(4) {
     margin-top: 20px;
 }
 
-section.login>div>div:nth-child(5) {
+section.login>form>div>div:nth-child(5) {
     color: #272424;
     text-align: center;
     /* Heading 5 */
@@ -689,7 +705,7 @@ section.login>div>div:nth-child(5) {
     margin-bottom: 20px;
 }
 
-section.login>div>div:nth-child(7) {
+section.login>form>div>div:nth-child(7) {
     color: rgba(39, 36, 36, 0.60);
     /* Body text 1 */
     font-family: Inter;
@@ -699,7 +715,7 @@ section.login>div>div:nth-child(7) {
     line-height: 22px;
 }
 
-section.login>div>div:nth-child(7)>a {
+section.login>form>div>div:nth-child(7)>a {
     text-decoration: none;
     color: rgba(39, 36, 36, 0.60);
 }

static/js/authorization.js

@@ -0,0 +1,25 @@
+function SendLoginForm(el){
+    event.preventDefault()
+    let form = el.form;
+    let formData = new FormData(form);
+
+    $.ajax({
+        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
+        url: '/ru/user_account/login/',
+        type: "POST",
+        // async: true,
+        cache: false,
+        processData: false,
+        contentType: false,
+        // enctype: 'json',
+        data: formData,
+        success: function(data){
+
+            location.href = '/profile'
+        },
+        error: function (data, exception){
+            document.querySelector(".login").innerHTML = data.responseJSON.html
+        }
+    });
+}
+

static/js/registration.js

@@ -15,7 +15,7 @@ function SendRegistrationForm(el){
         data: formData,
         success: function(data){
 
-            // location.href = '/'
+            location.href = '/profile'
         },
         error: function (data, exception){
             document.querySelector(".register").innerHTML = data.responseJSON.html

templates/blocks/b_login.html

@@ -1,18 +0,0 @@
-<section class="login">
-    <h1>Войдите в профиль</h1>
-    <div>
-      <div class="inputs_l">
-        <input type="text" placeholder="Логин">
-      </div>
-      <div class="inputs_l">
-        <input type="password" placeholder="Пароль">
-      </div>
-      <div class="button_register"><button>Войти</button></div>
-      <div>Авторизуясь, вы соглашаетесь с Лицензионным соглашением Политикой конфиденциальности</div>
-      <div>Или</div>
-      <div class="google"><img src="./style/img/google.png" alt="">
-        <div>Войти через Google</div>
-      </div>
-      <div>Нет аккаунта? <a href="#">Зарегистрируйтесь</a></div>
-    </div>
-  </section>

templates/forms/f_login.html

@@ -0,0 +1,27 @@
+<section class="login">
+    <h1>Войдите в профиль</h1>
+ <form name="registration_form" method="post">
+ {% csrf_token %}
+    <div>
+      <div class="inputs_l">
+        <input name="username" type="text" placeholder="Логин" {% if form.data.username %} value="{{ form.data.username }}"{% endif %}>
+        {% if form.username and form.errors.username %}
+       <span>{{ form.errors.username }}</span>
+             {% endif %}
+      </div>
+      <div class="inputs_l">
+        <input name="password" type="password" placeholder="Пароль"{% if form.data.password %} value="{{ form.data.password }}"{% endif %}>
+        {% if form.password and form.errors.password %}
+       <span>{{ form.errors.password }}</span>
+             {% endif %}
+      </div>
+      <div class="button_register"><button onclick="SendLoginForm(this)">Войти</button></div>
+      <div>Авторизуясь, вы соглашаетесь с Лицензионным соглашением Политикой конфиденциальности</div>
+      <div>Или</div>
+      <div class="google"><img src="./style/img/google.png" alt="">
+        <div>Войти через Google</div>
+      </div>
+      <div>Нет аккаунта? <a href="#">Зарегистрируйтесь</a></div>
+    </div>
+ </form>>
+  </section>

templates/forms/f_registration.html

@@ -4,10 +4,22 @@
     <form name="registration_form" method="post">
         {% csrf_token %}
 
-          <div class="switch">
+{#          <div class="switch">#}
-            <div><a class="active" href="#">Перевозчик</a></div>
+{#            <div><a class="active" href="#">Перевозчик</a></div>#}
-            <div><a class="deadctive" href="#">Отправитель</a></div>
+{#            <div><a class="deadctive" href="#">Отправитель</a></div>#}
-          </div>
+{#          </div>#}
+        <div class="switch">
+            <div class="form_radio_btn">
+
+                <input class="{% if account_type == "mover" %}active {% else  %} deactive{% endif %}" id="radio-1" type="radio" name="account_type" value="mover" >
+                <label for="radio-1">Перевозчик</label>
+            </div>
+            <div class="form_radio_btn">
+                <input class="{% if account_type == "sender" %}active {% else  %} deactive{% endif %}" id="radio-2" type="radio" name="account_type" value="sender">
+                <label for="radio-2">Отправитель</label>
+            </div>
+        </div>
+
 
           <div class="inputs">
             <div><input name="firstname" type="text" placeholder="Имя"{% if form.data.firstname %} value="{{ form.data.firstname }}"{% endif %}></div>
@@ -40,8 +52,11 @@
              {% endif %}
           </div>
           <div class="agree"><div class="checkbox">
-            <input class="custom-checkbox" type="checkbox" id="color-1" name="color-1" value="indigo">
+            <input class="custom-checkbox" type="checkbox" id="agreement" name="agreement" value="true" {% if form.data.agreement %} value="{{ form.data.agreement}}"{% endif %}>
-            <label for="color-1"></label>
+            <label for="agreement"></label>
+           {% if form.errors and form.errors.agreement %}
+                 <span>{{ form.errors.agreement }}</span>
+             {% endif %}
           </div><div>Регистрируясь, я соглашаюсь с Лицензионным соглашениеми и Политикой конфиденциальности</div></div>
           <div class="button_register">
                <button id="registration" onclick="SendRegistrationForm(this)"> Зарегистрироваться </button>

templates/inter/meta.html

@@ -1,4 +1,5 @@
 {% load static %}
 <script src='{% static "js/jquery_v3_6_4.js" %}'> </script>
 <script src='{% static "js/registration.js" %}'></script>
+<script src='{% static "js/authorization.js" %}'></script>
 <link rel="stylesheet" href="{% static 'css/styles.css' %}">

templates/pages/p_main.html

@@ -8,7 +8,6 @@
 <body>
 <div class="wrapper">
     {% include 'blocks/b_header.html' %}
-    {% include 'blocks/b_login.html' %}
     {% include 'blocks/b_footer.html' %}
 
 </div>

templates/pages/profile/p_login.html

@@ -8,7 +8,7 @@
 <body>
 <div class="wrapper">
     {% include 'blocks/b_header.html' %}
-    {% include 'blocks/b_login.html' %}
+    {% include 'forms/f_login.html' %}
     {% include 'blocks/b_footer.html' %}
 
 </div>