From 2661f8fd7e39de884799e211ab15f787d041c1aa Mon Sep 17 00:00:00 2001 From: megavrilinvv Date: Tue, 11 Jul 2023 18:01:33 +0300 Subject: [PATCH 1/3] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=83=20?= =?UTF-8?q?=D0=B0=D0=B2=D1=82=D0=BE=D1=80=D0=B8=D0=B7=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D0=B8,=20=D1=81=D0=BE=D0=B3=D0=BB=D0=B0=D1=81=D0=BD=D0=BE=20?= =?UTF-8?q?=D1=82=D1=80=D0=B5=D0=B1=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F?= =?UTF-8?q?=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/eye_close.svg | 3 ++ src/assets/icons/eye_open.svg | 3 ++ src/pages/login/TheLogin.vue | 92 +++++++++++++++++++++------------- 3 files changed, 64 insertions(+), 34 deletions(-) create mode 100644 src/assets/icons/eye_close.svg create mode 100644 src/assets/icons/eye_open.svg 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 { From 64c4110cb5db522620265a7a764e2fe02e51da90 Mon Sep 17 00:00:00 2001 From: megavrilinvv Date: Tue, 11 Jul 2023 18:01:33 +0300 Subject: [PATCH 2/3] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=83=20?= =?UTF-8?q?=D0=B0=D0=B2=D1=82=D0=BE=D1=80=D0=B8=D0=B7=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D0=B8,=20=D1=81=D0=BE=D0=B3=D0=BB=D0=B0=D1=81=D0=BD=D0=BE=20?= =?UTF-8?q?=D1=82=D1=80=D0=B5=D0=B1=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F?= =?UTF-8?q?=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/eye_close.svg | 3 ++ src/assets/icons/eye_open.svg | 3 ++ src/pages/login/TheLogin.vue | 90 +++++++++++++++++++++------------- 3 files changed, 63 insertions(+), 33 deletions(-) create mode 100644 src/assets/icons/eye_close.svg create mode 100644 src/assets/icons/eye_open.svg 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 9b28dc0..da4f871 100644 --- a/src/pages/login/TheLogin.vue +++ b/src/pages/login/TheLogin.vue @@ -5,35 +5,37 @@ 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 Запомнить меня base-button( :disable="disabledButton", @@ -41,7 +43,7 @@ size="L", @click="login", ) - .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 BaseButton from "@/components/base/BaseButton.vue"; +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 { From 28cd329fb3cb4630e315cf781359504827eeadd2 Mon Sep 17 00:00:00 2001 From: megavrilinvv Date: Tue, 11 Jul 2023 18:12:45 +0300 Subject: [PATCH 3/3] =?UTF-8?q?=D0=A4=D0=B8=D0=BA=D1=81=20=D1=81=D1=82?= =?UTF-8?q?=D0=B8=D0=BB=D0=B5=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/login/TheLogin.vue | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/pages/login/TheLogin.vue b/src/pages/login/TheLogin.vue index 218a3d7..9c78cea 100644 --- a/src/pages/login/TheLogin.vue +++ b/src/pages/login/TheLogin.vue @@ -7,7 +7,7 @@ .flex.flex-col.gap-y-2 .flex.not-italic.font-bold.text-5xl.letter-spacing Добро пожаловать! .flex.not-italic.font-medium.text-base( - :style="{color: this.underTextColor}" + :style="{color: 'var(--font-grey-color)'}" ) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра». .flex.flex-col.gap-y-5 .flex.flex-col.gap-y-px @@ -40,8 +40,8 @@ base-button( :disable="disabledButton", label="Войти в аккаунт", - color="primary", - no-caps + size="L", + @click="login", ) .absolute.left-12.bottom-12.text-smm.font-medium 2023 © Астра .right-col.flex.items-center.justify-center.relative @@ -51,13 +51,15 @@ import { fetchWrapper } from "@/shared/fetchWrapper"; import BaseInput from "@/components/base/BaseInput"; 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"; export default { name: "TheLogin", components: { BaseInput, BaseButton }, data() { return { - underTextColor: "var(--font-grey-color)", isView: false, logoMark, eye_close,