144 lines
4.1 KiB
Vue
144 lines
4.1 KiB
Vue
<template lang="pug">
|
||
.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
|
||
.flex.not-italic.font-bold.text-5xl.letter-spacing Добро пожаловать!
|
||
.flex.not-italic.font-medium.text-base(
|
||
:style="{color: 'var(--font-grey-color)'}"
|
||
) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
|
||
.flex.flex-col.gap-y-5
|
||
.flex.flex-col.gap-y-px
|
||
base-input.blue-color(
|
||
:rule="[wrongData => !!wrongData || 'Этого телефона нет в системе']",
|
||
v-model="user.username",
|
||
placeholder="+7 (915) 224–21–31",
|
||
label="Номер телефона",
|
||
size="L"
|
||
)
|
||
.flex.flex-col.gap-y-px
|
||
base-input.blue-color(
|
||
:rule="[wrongData => !!wrongData || 'Неверный пароль']",
|
||
v-model="user.password",
|
||
:type="changeType",
|
||
placeholder="Введите ваш пароль",
|
||
label="Пароль",
|
||
size="L"
|
||
)
|
||
.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 Запомнить меня
|
||
base-button(
|
||
:disable="disabledButton",
|
||
label="Войти в аккаунт",
|
||
size="L",
|
||
@click="login",
|
||
)
|
||
.absolute.left-12.bottom-12.text-smm.font-medium 2023 © Астра
|
||
.right-col.flex.items-center.justify-center.relative
|
||
</template>
|
||
|
||
<script>
|
||
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 {
|
||
name: "TheLogin",
|
||
components: { BaseInput, BaseButton },
|
||
data() {
|
||
return {
|
||
isView: false,
|
||
logoMark,
|
||
eye_close,
|
||
eye_open,
|
||
authorized: true,
|
||
user: {},
|
||
userData: {},
|
||
person: false,
|
||
};
|
||
},
|
||
computed: {
|
||
wrongData() {
|
||
return !this.authorized;
|
||
},
|
||
changeType() {
|
||
return !this.isView ? "password" : "text";
|
||
},
|
||
disabledButton() {
|
||
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");
|
||
},
|
||
login() {
|
||
fetchWrapper
|
||
.post("auth/login", {
|
||
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");
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="sass" scoped>
|
||
.left-col
|
||
background-color: var(--default-white)
|
||
color: var(--font-dark-blue-color)
|
||
height: 100%
|
||
width: calc(1920px - 1108px)
|
||
|
||
.logo-wrapper
|
||
width: 90px
|
||
height: 75px
|
||
|
||
.login-panel
|
||
width: 444px
|
||
height: 422px
|
||
|
||
.letter-spacing
|
||
letter-spacing: 0.02em
|
||
|
||
.right-col
|
||
background-color: var(--font-dark-blue-color)
|
||
width: calc(100vw - 812px)
|
||
background-image: url("@/assets/images/loginBG.svg")
|
||
background-size: cover
|
||
background-repeat: no-repeat
|
||
background-position: center
|
||
|
||
.red-color
|
||
color: var(--border-red-color)
|
||
|
||
.q-btn
|
||
height: 48px
|
||
|
||
.blue-color :deep(.label)
|
||
color: var(--font-dark-blue-color)
|
||
</style>
|