151 lines
4.6 KiB
Vue
151 lines
4.6 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
|
|
.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
|
|
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.non-italic.font-medium.base Запомнить меня
|
|
base-button.font-semibold(:disabled="disabledButton", :size="48", @click="login") Войти в аккаунт
|
|
.absolute.left-12.bottom-12 2022 © Астра
|
|
.right-col.flex.items-center.justify-center.relative
|
|
</template>
|
|
|
|
<script>
|
|
import { fetchWrapper } from "@/shared/fetchWrapper";
|
|
import BaseInput from "@/components/base/BaseInput";
|
|
import BaseButton from "@/components/base/BaseButton";
|
|
import logoMark from "@/assets/images/logoMark.svg";
|
|
|
|
export default {
|
|
name: "TheLogin",
|
|
components: { BaseInput, BaseButton },
|
|
data() {
|
|
return {
|
|
underTextColor: "var(--font-grey-color)",
|
|
isView: false,
|
|
logoMark,
|
|
authorized: true,
|
|
user: { username: "", password: "" },
|
|
redColor: "var(--border-red-color)",
|
|
userData: {},
|
|
};
|
|
},
|
|
computed: {
|
|
wrongData() {
|
|
return !this.authorized && !this.user.username && !this.user.password;
|
|
},
|
|
changeType() {
|
|
return !this.isView ? "password" : "text";
|
|
},
|
|
disabledButton() {
|
|
return this.user.username && this.user.password ? false : true;
|
|
},
|
|
showBorder() {
|
|
return !this.authorized && !this.user.username && !this.user.password
|
|
? true
|
|
: false;
|
|
},
|
|
},
|
|
methods: {
|
|
changeView() {
|
|
this.isView = !this.isView;
|
|
},
|
|
persist() {
|
|
localStorage.username = this.user.username;
|
|
localStorage.password = this.user.password;
|
|
},
|
|
async auth() {
|
|
let res = await fetchWrapper.get("auth/users/me/");
|
|
res = await res;
|
|
let data = await fetchWrapper.get(`accounts/users/${res.id}/detail`);
|
|
data = await data;
|
|
this.userData = data;
|
|
localStorage.setItem("userData", JSON.stringify(this.userData));
|
|
},
|
|
login() {
|
|
fetchWrapper
|
|
.post("auth/jwt/create/", {
|
|
username: this.user.username,
|
|
password: this.user.password,
|
|
})
|
|
.then((token) => {
|
|
if (token.access) {
|
|
localStorage.setItem("tokenAccess", token.access);
|
|
this.auth().then(() => this.$router.push("/"));
|
|
} else {
|
|
this.authorized = false;
|
|
this.user.username = "";
|
|
this.user.password = "";
|
|
this.$router.push("/login");
|
|
}
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
if (localStorage.username) this.user.username = localStorage.username;
|
|
if (localStorage.password) this.user.password = localStorage.password;
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.left-col
|
|
background-color: var(--default-white)
|
|
height: 100%
|
|
width: 40%
|
|
|
|
.logo-wrapper
|
|
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)
|
|
width: 60%
|
|
background-image: url("@/assets/images/loginBG.svg")
|
|
background-size: cover
|
|
background-repeat: no-repeat
|
|
background-position: center
|
|
</style>
|