Удалил лишний компонент
This commit is contained in:
@@ -1,138 +0,0 @@
|
||||
<template lang="pug">
|
||||
.login-wrapper.flex
|
||||
.left-col.flex.flex-col.items-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
|
||||
.flex.flex-col.gap-y-6px
|
||||
.flex.non-italic.font-semibold.text-xss Логин
|
||||
base-input.h-12.font-medium(
|
||||
:style="{borderColor: !this.authorized ? this.borderColor : ''}"
|
||||
v-model:value="user.username"
|
||||
type="text"
|
||||
placeholder="Введите ваш логин")
|
||||
.flex.flex-col.gap-y-6px.relative
|
||||
.flex.non-italic.font-semibold.text-xss Пароль
|
||||
base-input.h-12(
|
||||
:style="{borderColor: this.authorized ? '' : this.borderColor}"
|
||||
v-model:value="user.password"
|
||||
:type="changeType"
|
||||
placeholder="Введите ваш пароль")
|
||||
img.absolute.z-10.right-4.bottom-14px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
|
||||
span.font-medium(:style="{color: this.borderColor}", v-show="!authorized") Неверный логин или пароль
|
||||
.flex.items-center.gap-x-11px
|
||||
input.w-4.h-4.checkbox.cursor-pointer(@click="persist", 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 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 loginBackground from "@/assets/images/loginBG.svg";
|
||||
|
||||
import logoMark from "@/assets/images/logoMark.svg";
|
||||
export default {
|
||||
name: "TheLogin",
|
||||
components: { BaseInput, BaseButton },
|
||||
data() {
|
||||
return {
|
||||
underTextColor: "var(--font-grey-color)",
|
||||
isView: false,
|
||||
viewPassword: viewPasswordIcon,
|
||||
hidePassword: hidePasswordIcon,
|
||||
loginBackground,
|
||||
logoMark,
|
||||
authorized: true,
|
||||
user: { username: "", password: "" },
|
||||
borderColor: "var(--border-red-color)",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
changeIcon() {
|
||||
return !this.isView ? this.viewPassword : this.hidePassword;
|
||||
},
|
||||
changeType() {
|
||||
return !this.isView ? "password" : "text";
|
||||
},
|
||||
disabledButton() {
|
||||
return this.user.username && this.user.password ? false : true;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changeView() {
|
||||
this.isView = !this.isView;
|
||||
},
|
||||
|
||||
persist() {
|
||||
localStorage.username = this.user.username;
|
||||
localStorage.password = this.user.password;
|
||||
},
|
||||
login() {
|
||||
const requestOptions = {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(this.user),
|
||||
};
|
||||
fetch("http://45.84.227.122:8080/auth/jwt/create/", requestOptions)
|
||||
.then((result) => result.json())
|
||||
.then((token) => {
|
||||
if (token) {
|
||||
localStorage.setItem("tokenAccess", token.access);
|
||||
this.$router.push("/");
|
||||
} else {
|
||||
this.authorized = false;
|
||||
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>
|
||||
.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
|
||||
.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>
|
||||
Reference in New Issue
Block a user