Merge pull request #95 from dderbentsov/UC-29

[WIP] Изменил стили LoginPage

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 Логин
+            .flex.non-italic.font-semibold.text-xss Логин
-            base-input.h-12(v-model:value="user.login" type="text" placeholder="Введите ваш логин")
+            base-input.h-12.font-medium(v-model:value="user.username", type="text", placeholder="Введите ваш логин")
           .flex.flex-col.gap-y-6px.relative
-            .flex Пароль
+            .flex.non-italic.font-semibold.text-xss Пароль
-            base-input.h-12(v-model:value="user.password" :type="changeType" placeholder="Введите ваш пароль")
+            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")
+            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")
+            input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")
-            .flex Запомнить меня
+            .flex.non-italic.font-medium.base Запомнить меня
-        base-button.font-semibold(:disabled="disabledButton" :size="48") Войти в аккаунт
+        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.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.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.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.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 viewPasswordIcon from "@/assets/icons/eye.svg";
-import notViewPass from "@/assets/icons/openEye.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,
+      viewPassword: viewPasswordIcon,
-      notimg: notViewPass,
+      hidePassword: hidePasswordIcon,
-      user: { login: "", password: "" },
+      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>

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" }],