From bbc537b90eea304d3dfc833ae7d71eb36ac78774 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Thu, 3 Nov 2022 17:30:25 +0300
Subject: [PATCH 1/2] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?=
 =?UTF-8?q?=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B4=D0=BB=D1=8F=20=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=B2=D0=B5=D1=80=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=BB=D0=BE?=
 =?UTF-8?q?=D0=B3=D0=B8=D0=BD=D0=B0=20=D0=B8=D0=BB=D0=B8=20=D0=BF=D0=B0?=
 =?UTF-8?q?=D1=80=D0=BE=D0=BB=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass   |   1 +
 src/components/TheHeader.vue     |   2 +-
 src/pages/login/TheLogin.vue     |  32 +++++--
 src/pages/login/TheLoginCopy.vue | 138 +++++++++++++++++++++++++++++++
 4 files changed, 167 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/login/TheLoginCopy.vue

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index bc5089d..19e65c6 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -33,3 +33,4 @@
   --btn-light-green-color: rgba(60, 217, 75, 0.2)
   --border-light-grey-color-1: rgba(211, 212, 220, 0.5)
   --bg-white-color-0: rgba(255, 255, 255, 0.3)
+  --border-red-color: #ff6565
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index b0732f7..e3d4e72 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -36,7 +36,7 @@ export default {
   },
   methods: {
     logout() {
-      localStorage.clear();
+      localStorage.clear("");
       this.$router.push("/login");
     },
   },
diff --git a/src/pages/login/TheLogin.vue b/src/pages/login/TheLogin.vue
index ebc9183..f10f99d 100644
--- a/src/pages/login/TheLogin.vue
+++ b/src/pages/login/TheLogin.vue
@@ -11,11 +11,20 @@
         .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 Запомнить меня
@@ -43,7 +52,9 @@ export default {
       hidePassword: hidePasswordIcon,
       loginBackground,
       logoMark,
+      authorized: true,
       user: { username: "", password: "" },
+      redColor: "var(--border-red-color)",
     };
   },
   computed: {
@@ -61,6 +72,7 @@ export default {
     changeView() {
       this.isView = !this.isView;
     },
+
     persist() {
       localStorage.username = this.user.username;
       localStorage.password = this.user.password;
@@ -72,10 +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);
-          this.$router.push("/");
+          if (token) {
+            localStorage.setItem("tokenAccess", token.access);
+            this.$router.push("/");
+          } else {
+            this.$router.push("/login");
+          }
         });
     },
   },
diff --git a/src/pages/login/TheLoginCopy.vue b/src/pages/login/TheLoginCopy.vue
new file mode 100644
index 0000000..29c7f7a
--- /dev/null
+++ b/src/pages/login/TheLoginCopy.vue
@@ -0,0 +1,138 @@
+<template lang="pug">
+  .login-wrapper.flex
+    .left-col.flex.flex-col.items-center
+      .logo-wrapper.absolute.left-12.top-12
+        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 Добро пожаловать!
+          .text-under.flex.not-italic.font-medium.text-base(
+            :style="{color: this.underTextColor}") Очень рады вас видеть. Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
+        .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(
+            :style="{borderColor: !this.authorized ? this.borderColor : ''}"
+            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(
+            :style="{borderColor: this.authorized ? '' : this.borderColor}"
+            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.borderColor}", 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
+</template>
+
+<script>
+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 },
+  data() {
+    return {
+      underTextColor: "var(--font-grey-color)",
+      isView: false,
+      viewPassword: viewPasswordIcon,
+      hidePassword: hidePasswordIcon,
+      loginBackground,
+      logoMark,
+      authorized: true,
+      user: { username: "", password: "" },
+      borderColor: "var(--border-red-color)",
+    };
+  },
+  computed: {
+    changeIcon() {
+      return !this.isView ? this.viewPassword : this.hidePassword;
+    },
+    changeType() {
+      return !this.isView ? "password" : "text";
+    },
+    disabledButton() {
+      return this.user.username && this.user.password ? false : true;
+    },
+  },
+  methods: {
+    changeView() {
+      this.isView = !this.isView;
+    },
+
+    persist() {
+      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) => {
+          if (token) {
+            localStorage.setItem("tokenAccess", token.access);
+            this.$router.push("/");
+          } else {
+            this.authorized = false;
+            this.$router.push("/login");
+          }
+        });
+    },
+  },
+
+  mounted() {
+    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
+  display: flex
+  justify-content: center
+  background-color: var(--default-white)
+  height: 100%
+  width: 40%
+.logo-wrapper
+  width: 89.28px
+  height: 74.64px
+.login-panel
+  width: 444px
+  height: 422px
+.text-welcome
+  letter-spacing: 0.02em
+  color: var(--font-dark-blue-color)
+.input-wrapper
+  border-width: 1.5px
+.right-col
+  height: 100%
+  background-color: var(--font-dark-blue-color)
+  width: 60%
+  background-image: url("@/assets/images/loginBG.svg")
+  background-size: cover
+  background-repeat: no-repeat
+  background-position: center
+</style>

From 9f436cd40ce22c6863acdd0643154cd1b6ea54f9 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Thu, 3 Nov 2022 17:32:12 +0300
Subject: [PATCH 2/2] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B9=20=D0=BA=D0=BE=D0=BC=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TheHeader.vue     |   2 +-
 src/pages/login/TheLoginCopy.vue | 138 -------------------------------
 2 files changed, 1 insertion(+), 139 deletions(-)
 delete mode 100644 src/pages/login/TheLoginCopy.vue

diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index e3d4e72..b0732f7 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -36,7 +36,7 @@ export default {
   },
   methods: {
     logout() {
-      localStorage.clear("");
+      localStorage.clear();
       this.$router.push("/login");
     },
   },
diff --git a/src/pages/login/TheLoginCopy.vue b/src/pages/login/TheLoginCopy.vue
deleted file mode 100644
index 29c7f7a..0000000
--- a/src/pages/login/TheLoginCopy.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template lang="pug">
-  .login-wrapper.flex
-    .left-col.flex.flex-col.items-center
-      .logo-wrapper.absolute.left-12.top-12
-        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 Добро пожаловать!
-          .text-under.flex.not-italic.font-medium.text-base(
-            :style="{color: this.underTextColor}") Очень рады вас видеть. Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
-        .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(
-            :style="{borderColor: !this.authorized ? this.borderColor : ''}"
-            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(
-            :style="{borderColor: this.authorized ? '' : this.borderColor}"
-            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.borderColor}", 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
-</template>
-
-<script>
-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 },
-  data() {
-    return {
-      underTextColor: "var(--font-grey-color)",
-      isView: false,
-      viewPassword: viewPasswordIcon,
-      hidePassword: hidePasswordIcon,
-      loginBackground,
-      logoMark,
-      authorized: true,
-      user: { username: "", password: "" },
-      borderColor: "var(--border-red-color)",
-    };
-  },
-  computed: {
-    changeIcon() {
-      return !this.isView ? this.viewPassword : this.hidePassword;
-    },
-    changeType() {
-      return !this.isView ? "password" : "text";
-    },
-    disabledButton() {
-      return this.user.username && this.user.password ? false : true;
-    },
-  },
-  methods: {
-    changeView() {
-      this.isView = !this.isView;
-    },
-
-    persist() {
-      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) => {
-          if (token) {
-            localStorage.setItem("tokenAccess", token.access);
-            this.$router.push("/");
-          } else {
-            this.authorized = false;
-            this.$router.push("/login");
-          }
-        });
-    },
-  },
-
-  mounted() {
-    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
-  display: flex
-  justify-content: center
-  background-color: var(--default-white)
-  height: 100%
-  width: 40%
-.logo-wrapper
-  width: 89.28px
-  height: 74.64px
-.login-panel
-  width: 444px
-  height: 422px
-.text-welcome
-  letter-spacing: 0.02em
-  color: var(--font-dark-blue-color)
-.input-wrapper
-  border-width: 1.5px
-.right-col
-  height: 100%
-  background-color: var(--font-dark-blue-color)
-  width: 60%
-  background-image: url("@/assets/images/loginBG.svg")
-  background-size: cover
-  background-repeat: no-repeat
-  background-position: center
-</style>