refactor login page and add user avatar to header

src/components/LoggedInLayout.vue

@@ -33,7 +33,7 @@ export default {
     return {
       isOpenForm: false,
       updatedClients: false,
-      url: "https://astra-dev.dopcore.com",
+      url: "https://astra-dev.dopcore.com/api/store/",
       createdClientId: "",
     };
   },

src/components/TheHeader.vue

@@ -34,9 +34,9 @@
           padding="0",
           style="color: var(--font-grey-color)"
         )
-          base-avatar(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}}
+          base-avatar(:size="36", :color="userData?.color", v-if="!userData?.avatar") {{changeName}}
           base-avatar(:size="32", v-else)
-            img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar")
+            img.h-full.object-cover(:src="url + userData?.avatar", alt="Avatar")
           .h-6.w-6.flex.items-center.justify-center.ml-1.pt-1
             q-icon.arrow(name="app:down-arrow", size="24px")
           q-menu(
@@ -104,8 +104,8 @@ export default {
     redirectHomePage() {
       this.$router.push("/calendar");
     },
-    logout() {
-      localStorage.removeItem("tokenAccess");
+    async logout() {
+      await fetchWrapper.post("auth/logout");
       this.$router.go("/login");
     },
     openPopup() {

src/components/base/BaseInput.vue

@@ -24,11 +24,14 @@
       :shadow-text="shadowText",
       :autofocus="autofocus",
       hide-bottom-space
+      :error="error"
     )
       template(v-slot:prepend, v-if="iconLeft")
         slot(name="iconLeft")
       template(v-slot:append, v-if="iconRight")
         slot(name="iconRight")
+      template(#error v-if="error")
+        slot(name="error")
       slot(v-if="!iconLeft && !iconRight")
 </template>
 
@@ -80,6 +83,7 @@ export default {
     size: String,
     circle: Boolean,
     height: String,
+    error: Boolean,
   },
   emits: ["update:modelValue"],
   computed: {

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("/");
         });
     },
   },