[WIP] Добавил quasar input, стили, заменил маски

src/pages/login/TheLogin.vue

@@ -1,29 +1,34 @@
 <template lang="pug">
-  .login-wrapper.flex
-    .left-col.flex.flex-col.items-center
+  .flex.h-full.w-full.relative.overflow-hidden
+    .left-col.flex.flex-col.items-center.justify-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
+            :style="{color: this.underTextColor}"
+          ) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
+        .flex.flex-col.gap-y-2
           base-input.font-medium(
-            :borderError="wrongData",
+            :rule="[wrongData => !!wrongData]",
             v-model="user.username",
             placeholder="Введите ваш логин",
             label="Логин"
           )
-          .flex.flex-col.gap-y-6px.relative
-            .flex.non-italic.font-semibold.text-sm.opacity-40 Пароль
-            base-input(
-              :borderError="wrongData",
-              v-model="user.password",
-              :type="changeType",
-              placeholder="Введите ваш пароль"
+          base-input(
+            :rule="[wrongData => !!wrongData]",
+            v-model="user.password",
+            :type="changeType",
+            placeholder="Введите ваш пароль",
+            label="Пароль",
+            withIcon
+          )
+            q-icon(
+              v-if="!wrongData && user.password"
+              :name="isView ? 'visibility_off' : 'visibility'",
+              @click="changeView"
             )
-            img.absolute.z-10.right-4.bottom-10px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
           span.font-medium(:style="{color: this.redColor}", v-show="wrongData") Неверный логин или пароль
           .flex.items-center.gap-x-11px
             input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")
@@ -37,8 +42,6 @@
 import { fetchWrapper } from "@/shared/fetchWrapper";
 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 logoMark from "@/assets/images/logoMark.svg";
 export default {
   name: "TheLogin",
@@ -47,8 +50,6 @@ export default {
     return {
       underTextColor: "var(--font-grey-color)",
       isView: false,
-      viewPassword: viewPasswordIcon,
-      hidePassword: hidePasswordIcon,
       logoMark,
       authorized: true,
       user: { username: "", password: "" },
@@ -60,9 +61,6 @@ export default {
     wrongData() {
       return !this.authorized && !this.user.username && !this.user.password;
     },
-    changeIcon() {
-      return !this.isView ? this.viewPassword : this.hidePassword;
-    },
     changeType() {
       return !this.isView ? "password" : "text";
     },
@@ -118,28 +116,26 @@ export default {
 </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
+  width: 90px
+  height: 75px
+
 .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)