diff --git a/src/assets/icons/eye_close.svg b/src/assets/icons/eye_close.svg
new file mode 100644
index 0000000..09fb041
--- /dev/null
+++ b/src/assets/icons/eye_close.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/eye_open.svg b/src/assets/icons/eye_open.svg
new file mode 100644
index 0000000..e50622c
--- /dev/null
+++ b/src/assets/icons/eye_open.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/pages/login/TheLogin.vue b/src/pages/login/TheLogin.vue
index 13346cd..fe704a1 100644
--- a/src/pages/login/TheLogin.vue
+++ b/src/pages/login/TheLogin.vue
@@ -5,44 +5,46 @@
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(
+ .flex.not-italic.font-bold.text-5xl.letter-spacing Добро пожаловать!
+ .flex.not-italic.font-medium.text-base(
:style="{color: this.underTextColor}"
) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
.flex.flex-col.gap-y-5
- base-input.font-medium(
- :rule="[wrongData => !!wrongData]",
- v-model="user.username",
- placeholder="Введите ваш логин",
- label="Логин",
- outlined
- )
- base-input(
- :rule="[wrongData => !!wrongData]",
- v-model="user.password",
- :type="changeType",
- placeholder="Введите ваш пароль",
- label="Пароль",
- outlined
- )
- .flex.items-center.cursor-pointer
- q-icon(
- v-if="!wrongData && user.password"
- :name="!isView ? 'visibility_off' : 'visibility'",
- @click="changeView"
- )
- span.font-medium(:style="{color: this.redColor}", v-if="wrongData") Неверный логин или пароль
- .flex.items-center.gap-x-8px
- q-checkbox(@click="persist", v-model="isView", type="checkbox")
+ .flex.flex-col.gap-y-px
+ base-input.input(
+ :rule="[wrongData => !!wrongData]",
+ v-model="user.username",
+ placeholder="+7 (915) 224–21–31",
+ label="Номер телефона",
+ outlined,
+ no-error-icon
+ )
+ .red-color.text-smm.font-semibold(v-if="wrongData") Этого телефона нет в системе
+ .flex.flex-col.gap-y-px
+ base-input.input(
+ :rule="[wrongData => !!wrongData]",
+ v-model="user.password",
+ :type="changeType",
+ placeholder="Введите ваш пароль",
+ label="Пароль",
+ outlined,
+ no-error-icon
+ )
+ .flex.items-center.cursor-pointer(@click="changeView", v-if="!wrongData && user.password")
+ img(:src="eye_close", v-if="!isView")
+ img(:src="eye_open", v-else)
+ .red-color.text-smm.font-semibold(v-if="wrongData") Неверный пароль
+ .flex.items-center.gap-x-8px.-ml-2
+ q-checkbox(@click="persist", v-model="person", type="checkbox")
.flex.non-italic.font-medium.base Запомнить меня
q-btn(
:disable="disabledButton",
@click="login",
label="Войти в аккаунт",
color="primary",
- no-caps
+ no-caps,
)
- .absolute.left-12.bottom-12 2023 © Астра
+ .absolute.left-12.bottom-12.text-smm.font-medium 2023 © Астра
.right-col.flex.items-center.justify-center.relative
@@ -50,6 +52,8 @@
import { fetchWrapper } from "@/shared/fetchWrapper";
import BaseInput from "@/components/base/BaseInput";
import logoMark from "@/assets/images/logoMark.svg";
+import eye_open from "@/assets/icons/eye_open.svg";
+import eye_close from "@/assets/icons/eye_close.svg";
export default {
name: "TheLogin",
@@ -59,10 +63,12 @@ export default {
underTextColor: "var(--font-grey-color)",
isView: false,
logoMark,
+ eye_close,
+ eye_open,
authorized: true,
user: { username: "", password: "" },
- redColor: "var(--border-red-color)",
userData: {},
+ person: false,
};
},
computed: {
@@ -86,6 +92,7 @@ export default {
this.isView = !this.isView;
},
persist() {
+ if (!this.person) return;
localStorage.username = this.user.username;
localStorage.password = this.user.password;
},
@@ -126,8 +133,9 @@ export default {