refactor login page and add user avatar to header

src/pages/login/TheLogin.vue

@@ -12,28 +12,33 @@
         .flex.flex-col.gap-y-5
           .flex.flex-col.gap-y-px
             base-input.blue-color(
-              :rule="[wrongData => !!wrongData || 'Этого телефона нет в системе']",
+              :error="authError"
               v-model="user.username",
               placeholder="+7 (915) 224–21–31",
               label="Номер телефона",
               size="L"
+              @keypress.enter="login"
             )
+              template(#error) Этого телефона нет в системе
           .flex.flex-col.gap-y-px
             base-input.blue-color(
-              :rule="[wrongData => !!wrongData || 'Неверный пароль']",
+              :error="authError"
               v-model="user.password",
-              :type="changeType",
+              :type="passwordInputType",
               placeholder="Введите ваш пароль",
               label="Пароль",
               size="L"
+              @keypress.enter="login"
             )
-              .flex.items-center.cursor-pointer(@click="changeView", v-if="!wrongData && user.password")
-                img(:src="!isView ? eye_close : eye_open")
-          .flex.items-center.gap-x-8px.-ml-2
-            q-checkbox(v-model="person", type="checkbox")
-            .flex.non-italic.font-medium.base Запомнить меня
+              .flex.items-center.cursor-pointer(@click="changePasswordInputType", v-if="user.password")
+                q-icon(name="app:eye" v-if="showPassword")
+                q-icon(name="app:eye-open" v-else)
+              template(#error) Неверный логин или пароль
+          .flex.items-center.-ml-2
+            q-checkbox(v-model="rememberMe", type="checkbox")
+              .font-medium.base Запомнить меня
         base-button(
-          :disable="disabledButton",
+          :disable="canPressLoginButton",
           label="Войти в аккаунт",
           size="L",
           @click="login",
@@ -46,8 +51,6 @@
 import { fetchWrapper } from "@/shared/fetchWrapper";
 import logoMark from "@/assets/images/logoMark.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
-import eye_open from "@/assets/icons/eye_open.svg";
-import eye_close from "@/assets/icons/eye_close.svg";
 import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
@@ -55,36 +58,26 @@ export default {
   components: { BaseInput, BaseButton },
   data() {
     return {
-      isView: false,
+      showPassword: false,
       logoMark,
-      eye_close,
-      eye_open,
       authorized: true,
       user: {},
       userData: {},
-      person: false,
+      rememberMe: false,
+      authError: false,
     };
   },
   computed: {
-    wrongData() {
-      return !this.authorized;
+    passwordInputType() {
+      return !this.showPassword ? "password" : "text";
     },
-    changeType() {
-      return !this.isView ? "password" : "text";
-    },
-    disabledButton() {
+    canPressLoginButton() {
       return !(this.user.username && this.user.password);
     },
-    showBorder() {
-      return !this.authorized && !this.user.username && !this.user.password;
-    },
   },
   methods: {
-    changeView() {
-      this.isView = !this.isView;
-    },
-    async auth() {
-      this.userData = await fetchWrapper.get("users/me");
+    changePasswordInputType() {
+      this.showPassword = !this.showPassword;
     },
     login() {
       fetchWrapper
@@ -92,14 +85,9 @@ export default {
           user_name: this.user.username,
           password: this.user.password,
         })
-        .then(() => {
-          this.auth().then(() => this.$router.push("/"));
-        })
-        .catch(() => {
-          this.authorized = false;
-          this.user.username = "";
-          this.user.password = "";
-          this.$router.push("/login");
+        .then((data) => {
+          if (!data) this.authError = true;
+          else this.$router.push("/");
         });
     },
   },