From 5ccc64c24ffbaa0f67e2f8c22a63940b76f31f46 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Wed, 2 Nov 2022 17:58:34 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20LoginPage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/login/TheLogin.vue | 80 +++++++++++++++++++++++-------------
 tailwind.config.js           |  1 +
 2 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/src/pages/login/TheLogin.vue b/src/pages/login/TheLogin.vue
index 8fca138..954e719 100644
--- a/src/pages/login/TheLogin.vue
+++ b/src/pages/login/TheLogin.vue
@@ -1,59 +1,59 @@
 <template lang="pug">
   .login-wrapper.flex
-    .left-col.flex.flex-col.items-center.relative
+    .left-col.flex.flex-col.items-center
       .logo-wrapper.absolute.left-12.top-12
-        img.logo-img(src="@/assets/images/logoText.svg" alt="logoText")
+        img(src="@/assets/images/logoText.svg" alt="logoText")
       .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 Добро пожаловать!
           .text-under.flex.not-italic.font-medium.text-base(
-            :style="{color: this.colorUnderText}") Очень рады вас видеть. Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
+            :style="{color: this.underTextColor}") Очень рады вас видеть. Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
         .flex.flex-col.gap-y-5
           .flex.flex-col.gap-y-6px
-            .flex Логин
-            base-input.h-12(v-model:value="user.login" type="text" placeholder="Введите ваш логин")
+            .flex.non-italic.font-semibold.text-xss Логин
+            base-input.h-12.font-medium(v-model:value="user.username", type="text", placeholder="Введите ваш логин")
           .flex.flex-col.gap-y-6px.relative
-            .flex Пароль
-            base-input.h-12(v-model:value="user.password" :type="changeType" placeholder="Введите ваш пароль")
-            img.absolute.z-10.right-4.bottom-14px.cursor-pointer(:src="changeIcon" alt="eyePassword" @click="changeView")
+            .flex.non-italic.font-semibold.text-xss Пароль
+            base-input.h-12(v-model:value="user.password", :type="changeType", placeholder="Введите ваш пароль")
+            img.absolute.z-10.right-4.bottom-14px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
           .flex.items-center.gap-x-11px
-            input.w-4.h-4.checkbox.cursor-pointer(@click="persist" type="checkbox")
-            .flex Запомнить меня
-        base-button.font-semibold(:disabled="disabledButton" :size="48") Войти в аккаунт
+            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.logo-img.absolute.z-10(src="@/assets/images/bigLogo.svg" alt="bigLogo")
-      img.logo-img.absolute.z-10.absolute.left-0.bottom-0(src="@/assets/images/ellipseBottom.svg" alt="ellipseBottom")
-      img.logo-img.absolute.z-10.absolute.right-0.top-0(src="@/assets/images/ellipseTop.svg" alt="ellipseTop")
-      img.logo-img.opacity-10(src="@/assets/images/dots.svg" alt="Logo")
+      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>
 import BaseInput from "@/components/base/BaseInput";
 import BaseButton from "@/components/base/BaseButton";
-import viewPass from "@/assets/icons/eye.svg";
-import notViewPass from "@/assets/icons/openEye.svg";
+import viewPasswordIcon from "@/assets/icons/eye.svg";
+import hidePasswordIcon from "@/assets/icons/openEye.svg";
 export default {
   name: "TheLogin",
   components: { BaseInput, BaseButton },
   data() {
     return {
-      colorUnderText: "var(--font-grey-color)",
+      underTextColor: "var(--font-grey-color)",
       isView: false,
-      img: viewPass,
-      notimg: notViewPass,
-      user: { login: "", password: "" },
+      viewPassword: viewPasswordIcon,
+      hidePassword: hidePasswordIcon,
+      user: { username: "", password: "" },
     };
   },
   computed: {
     changeIcon() {
-      return !this.isView ? this.img : this.notimg;
+      return !this.isView ? this.viewPassword : this.hidePassword;
     },
     changeType() {
       return !this.isView ? "password" : "text";
     },
     disabledButton() {
-      return this.user.login && this.user.password ? false : true;
+      return this.user.username && this.user.password ? false : true;
     },
   },
   methods: {
@@ -61,23 +61,44 @@ export default {
       this.isView = !this.isView;
     },
     persist() {
-      localStorage.login = this.user.login;
+      localStorage.username = this.user.username;
       localStorage.password = this.user.password;
     },
+    login() {
+      const requestOptions = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(this.user),
+      };
+      fetch("http://45.84.227.122:8080/auth/jwt/create", requestOptions)
+        .then((result) => result.json())
+        .then((token) => {
+          localStorage.setItem("tokenAccess", token.access);
+          token.cookie("tokenRefresh", token.refresh, { httpOnly: true });
+        });
+    },
   },
+
   mounted() {
-    if (localStorage.login) this.user.login = localStorage.login;
+    if (localStorage.username) this.user.username = localStorage.username;
     if (localStorage.password) this.user.password = localStorage.password;
   },
 };
 </script>
 
 <style lang="sass" scoped>
+.login-wrapper
+  width: 100%
+  height: 100%
+  position: relative
+  overflow: hidden
 .left-col
-  padding: 329px 185px
+  display: flex
+  justify-content: center
   background-color: var(--default-white)
-  height: 1080px
+  height: 100%
   width: 812px
+  flex: 1 1 auto
 .logo-wrapper
   width: 89.28px
   height: 74.64px
@@ -87,8 +108,11 @@ export default {
 .text-welcome
   letter-spacing: 0.02em
   color: var(--font-dark-blue-color)
+.input-wrapper
+  border-width: 1.5px
 .right-col
-  height: 1080px
+  height: 100%
   width: 1105px
   background-color: var(--font-dark-blue-color)
+  flex: 1 1 auto
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
index ab42283..a0e5ea0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
         ins: ["11px", { lineHeight: "12px" }],
         xxs: ["12px", { lineHeight: "14px" }],
         xs: ["13px", { lineHeight: "15px" }],
+        xss: ["13px", { lineHeight: "19px" }],
         sm: ["14px", { lineHeight: "16px" }],
         base: ["16px", { lineHeight: "19px" }],
         m: ["16px", { lineHeight: "21.6px" }],