From 0439e38306ed3ef9f2206e2b7d765a7ee6935f88 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Tue, 1 Nov 2022 15:33:27 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=B8=D0=BD=D0=BF=D1=83=D1=82=D1=8B,=20=D0=BA=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=BF=D0=BA=D1=83=20=D0=B8=20=D1=87=D0=B5=D0=BA=D0=B1?=
 =?UTF-8?q?=D0=BE=D0=BA=D1=81=20=D0=BD=D0=B0=20LoginPage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/eye.svg     |  3 +++
 src/assets/icons/openEye.svg |  4 ++++
 src/pages/login/TheLogin.vue | 41 +++++++++++++++++++++++++++++++-----
 tailwind.config.js           |  1 +
 4 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/icons/eye.svg
 create mode 100644 src/assets/icons/openEye.svg

diff --git a/src/assets/icons/eye.svg b/src/assets/icons/eye.svg
new file mode 100644
index 0000000..b70023e
--- /dev/null
+++ b/src/assets/icons/eye.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 9.99894L18.2185 10.2139C18.2605 10.0736 18.2605 9.92405 18.2185 9.78373L17.5 9.99894ZM2.5 10.0011L1.78148 9.78614C1.73949 9.92647 1.73951 10.076 1.78154 10.2163L2.5 10.0011ZM4.59543 7.68799C4.86387 7.37254 4.82575 6.89919 4.51029 6.63076C4.19484 6.36232 3.72149 6.40044 3.45306 6.7159L4.59543 7.68799ZM12.3361 15.9849C12.7349 15.8728 12.9672 15.4587 12.8551 15.06C12.743 14.6612 12.3289 14.4288 11.9302 14.5409L12.3361 15.9849ZM3.82281 2.80148C3.52905 2.50945 3.05418 2.51086 2.76216 2.80462C2.47013 3.09838 2.47154 3.57325 2.7653 3.86527L3.82281 2.80148ZM16.1779 17.1986C16.4716 17.4906 16.9465 17.4892 17.2385 17.1955C17.5306 16.9017 17.5291 16.4268 17.2354 16.1348L16.1779 17.1986ZM11.581 11.5714L11.0523 12.1033H11.0523L11.581 11.5714ZM10.0003 8.52782C10.8249 8.52782 11.4858 9.19114 11.4858 10H12.9858C12.9858 8.35434 11.645 7.02782 10.0003 7.02782V8.52782ZM10.0003 5.19449C13.2064 5.19449 15.9125 7.31305 16.7815 10.2142L18.2185 9.78373C17.1631 6.26044 13.8821 3.69449 10.0003 3.69449V5.19449ZM9.99967 14.8056C6.79363 14.8056 4.08747 12.687 3.21846 9.78593L1.78154 10.2163C2.83693 13.7396 6.11793 16.3056 9.99967 16.3056V14.8056ZM3.21852 10.2161C3.49956 9.27689 3.9734 8.41899 4.59543 7.68799L3.45306 6.7159C2.6994 7.60157 2.12347 8.6432 1.78148 9.78614L3.21852 10.2161ZM11.9302 14.5409C11.3174 14.7132 10.67 14.8056 9.99967 14.8056V16.3056C10.8085 16.3056 11.5925 16.194 12.3361 15.9849L11.9302 14.5409ZM6.11024 6.35148C7.22574 5.62032 8.56171 5.19449 10.0003 5.19449V3.69449C8.26125 3.69449 6.64076 4.21025 5.28796 5.09694L6.11024 6.35148ZM2.7653 3.86527L5.17034 6.25611L6.22786 5.19231L3.82281 2.80148L2.7653 3.86527ZM13.7726 14.8075L16.1779 17.1986L17.2354 16.1348L14.8301 13.7437L13.7726 14.8075ZM16.7815 9.78395C16.3029 11.3835 15.2648 12.7472 13.8901 13.6484L14.7125 14.9028C16.3758 13.8124 17.6362 12.1601 18.2185 10.2139L16.7815 9.78395ZM11.0523 12.1033L13.7726 14.8075L14.8301 13.7437L12.1098 11.0395L11.0523 12.1033ZM11.4858 10C11.4858 10.4053 11.3215 10.7719 11.0523 11.0395L12.1098 12.1033C12.6497 11.5666 12.9858 10.8221 12.9858 10H11.4858ZM5.17034 6.25611L7.8909 8.96059L8.94841 7.89679L6.22786 5.19231L5.17034 6.25611ZM7.8909 8.96059L11.0523 12.1033L12.1098 11.0395L8.94841 7.89679L7.8909 8.96059ZM8.94841 8.96059C9.21769 8.69291 9.58849 8.52782 10.0003 8.52782V7.02782C9.1776 7.02782 8.43069 7.36019 7.8909 7.89679L8.94841 8.96059Z" fill="#252850"/>
+</svg>
diff --git a/src/assets/icons/openEye.svg b/src/assets/icons/openEye.svg
new file mode 100644
index 0000000..9a6e20e
--- /dev/null
+++ b/src/assets/icons/openEye.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.53883 10.2508C2.4871 10.0896 2.48705 9.9151 2.53869 9.75386C3.57827 6.50764 6.52628 4.16675 10.0007 4.16675C13.4734 4.16675 16.4203 6.50547 17.4612 9.74933C17.5129 9.91054 17.5129 10.0851 17.4613 10.2463C16.4217 13.4925 13.4737 15.8334 9.99934 15.8334C6.52659 15.8334 3.57971 13.4947 2.53883 10.2508Z" stroke="#4772F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.2464 10.0001C12.2464 11.2887 11.2407 12.3334 10 12.3334C8.75942 12.3334 7.7537 11.2887 7.7537 10.0001C7.7537 8.71142 8.75942 7.66675 10 7.66675C11.2407 7.66675 12.2464 8.71142 12.2464 10.0001Z" stroke="#4772F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/pages/login/TheLogin.vue b/src/pages/login/TheLogin.vue
index 4c0afd0..8fca138 100644
--- a/src/pages/login/TheLogin.vue
+++ b/src/pages/login/TheLogin.vue
@@ -11,14 +11,15 @@
         .flex.flex-col.gap-y-5
           .flex.flex-col.gap-y-6px
             .flex Логин
-            base-input(placeholder="Введите ваш логин")
-          .flex.flex-col.gap-y-6px
+            base-input.h-12(v-model:value="user.login" type="text" placeholder="Введите ваш логин")
+          .flex.flex-col.gap-y-6px.relative
             .flex Пароль
-            base-input(type="password" 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")
           .flex.items-center.gap-x-11px
-            input.w-4.h-4.checkbox.cursor-pointer(type="checkbox" @change="(e) => check(e)")
+            input.w-4.h-4.checkbox.cursor-pointer(@click="persist" type="checkbox")
             .flex Запомнить меня
-        base-button.font-semibold(:size="48") Войти в аккаунт
+        base-button.font-semibold(:disabled="disabledButton" :size="48") Войти в аккаунт
       .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")
@@ -30,14 +31,44 @@
 <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";
 export default {
   name: "TheLogin",
   components: { BaseInput, BaseButton },
   data() {
     return {
       colorUnderText: "var(--font-grey-color)",
+      isView: false,
+      img: viewPass,
+      notimg: notViewPass,
+      user: { login: "", password: "" },
     };
   },
+  computed: {
+    changeIcon() {
+      return !this.isView ? this.img : this.notimg;
+    },
+    changeType() {
+      return !this.isView ? "password" : "text";
+    },
+    disabledButton() {
+      return this.user.login && this.user.password ? false : true;
+    },
+  },
+  methods: {
+    changeView() {
+      this.isView = !this.isView;
+    },
+    persist() {
+      localStorage.login = this.user.login;
+      localStorage.password = this.user.password;
+    },
+  },
+  mounted() {
+    if (localStorage.login) this.user.login = localStorage.login;
+    if (localStorage.password) this.user.password = localStorage.password;
+  },
 };
 </script>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 236fe3e..ab42283 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -33,6 +33,7 @@ module.exports = {
         "6px": "6px",
         "10px": "10px",
         "13px": "13px",
+        "14px": "14px",
         "15px": "15px",
         "19px": "19px",
         "23px": "23px",