Merge branch 'master' into UC-37

src/pages/login/TheLogin.vue

@@ -2,7 +2,7 @@
   .login-wrapper.flex
     .left-col.flex.flex-col.items-center
       .logo-wrapper.absolute.left-12.top-12
-        img(src="@/assets/images/logoText.svg" alt="logoText")
+        img(:src="logoMark")
       .login-panel.flex.flex-col.justify-center.gap-y-10
         .flex.flex-col.gap-y-2
           .text-welcome.flex.not-italic.font-bold.text-5xl Добро пожаловать!
@@ -11,21 +11,26 @@
         .flex.flex-col.gap-y-5
           .flex.flex-col.gap-y-6px
             .flex.non-italic.font-semibold.text-xss Логин
-            base-input.h-12.font-medium(v-model:value="user.username", type="text", placeholder="Введите ваш логин")
+            base-input.h-12.font-medium(
+            :style="{borderColor: !this.authorized ? this.redColor : ''}"
+            v-model:value="user.username"
+            type="text"
+            placeholder="Введите ваш логин")
           .flex.flex-col.gap-y-6px.relative
             .flex.non-italic.font-semibold.text-xss Пароль
-            base-input.h-12(v-model:value="user.password", :type="changeType", placeholder="Введите ваш пароль")
+            base-input.h-12(
+            :style="{borderColor: this.authorized ? '' : this.redColor}"
+            v-model:value="user.password"
+            :type="changeType"
+            placeholder="Введите ваш пароль")
             img.absolute.z-10.right-4.bottom-14px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
+          span.font-medium(:style="{color: this.redColor}", v-show="!authorized") Неверный логин или пароль
           .flex.items-center.gap-x-11px
             input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")
             .flex.non-italic.font-medium.base Запомнить меня
         base-button.font-semibold(:disabled="disabledButton", :size="48", @click="login") Войти в аккаунт
       .absolute.left-12.bottom-12 2022 © Астра
     .right-col.flex.items-center.justify-center.relative
-      img.absolute.z-10(src="@/assets/images/bigLogo.svg" alt="bigLogo")
-      img.absolute.z-10.absolute.left-0.bottom-0(src="@/assets/images/ellipseBottom.svg" alt="ellipseBottom")
-      img.absolute.z-10.absolute.right-0.top-0(src="@/assets/images/ellipseTop.svg" alt="ellipseTop")
-      img.opacity-10(src="@/assets/images/dots.svg" alt="Logo")
 </template>
 
 <script>
@@ -33,6 +38,9 @@ import BaseInput from "@/components/base/BaseInput";
 import BaseButton from "@/components/base/BaseButton";
 import viewPasswordIcon from "@/assets/icons/eye.svg";
 import hidePasswordIcon from "@/assets/icons/openEye.svg";
+import loginBackground from "@/assets/images/loginBG.svg";
+
+import logoMark from "@/assets/images/logoMark.svg";
 export default {
   name: "TheLogin",
   components: { BaseInput, BaseButton },
@@ -42,7 +50,11 @@ export default {
       isView: false,
       viewPassword: viewPasswordIcon,
       hidePassword: hidePasswordIcon,
+      loginBackground,
+      logoMark,
+      authorized: true,
       user: { username: "", password: "" },
+      redColor: "var(--border-red-color)",
     };
   },
   computed: {
@@ -60,6 +72,7 @@ export default {
     changeView() {
       this.isView = !this.isView;
     },
+
     persist() {
       localStorage.username = this.user.username;
       localStorage.password = this.user.password;
@@ -71,9 +84,20 @@ export default {
         body: JSON.stringify(this.user),
       };
       fetch("http://45.84.227.122:8080/auth/jwt/create/", requestOptions)
-        .then((result) => result.json())
+        .then((result) => {
+          if (result.status === 200) {
+            return result.json();
+          } else {
+            return (this.authorized = false);
+          }
+        })
         .then((token) => {
-          localStorage.setItem("tokenAccess", token.access);
+          if (token) {
+            localStorage.setItem("tokenAccess", token.access);
+            this.$router.push("/");
+          } else {
+            this.$router.push("/login");
+          }
         });
     },
   },
@@ -96,8 +120,7 @@ export default {
   justify-content: center
   background-color: var(--default-white)
   height: 100%
-  width: 812px
-  flex: 1 1 auto
+  width: 40%
 .logo-wrapper
   width: 89.28px
   height: 74.64px
@@ -111,7 +134,10 @@ export default {
   border-width: 1.5px
 .right-col
   height: 100%
-  width: 1105px
   background-color: var(--font-dark-blue-color)
-  flex: 1 1 auto
+  width: 60%
+  background-image: url("@/assets/images/loginBG.svg")
+  background-size: cover
+  background-repeat: no-repeat
+  background-position: center
 </style>