@@ -33,3 +33,4 @@
|
|||||||
--btn-light-green-color: rgba(60, 217, 75, 0.2)
|
--btn-light-green-color: rgba(60, 217, 75, 0.2)
|
||||||
--border-light-grey-color-1: rgba(211, 212, 220, 0.5)
|
--border-light-grey-color-1: rgba(211, 212, 220, 0.5)
|
||||||
--bg-white-color-0: rgba(255, 255, 255, 0.3)
|
--bg-white-color-0: rgba(255, 255, 255, 0.3)
|
||||||
|
--border-red-color: #ff6565
|
||||||
|
|||||||
@@ -11,11 +11,20 @@
|
|||||||
.flex.flex-col.gap-y-5
|
.flex.flex-col.gap-y-5
|
||||||
.flex.flex-col.gap-y-6px
|
.flex.flex-col.gap-y-6px
|
||||||
.flex.non-italic.font-semibold.text-xss Логин
|
.flex.non-italic.font-semibold.text-xss Логин
|
||||||
base-input.h-12.font-medium(v-model:value="user.username", type="text", placeholder="Введите ваш логин")
|
base-input.h-12.font-medium(
|
||||||
|
:style="{borderColor: !this.authorized ? this.redColor : ''}"
|
||||||
|
v-model:value="user.username"
|
||||||
|
type="text"
|
||||||
|
placeholder="Введите ваш логин")
|
||||||
.flex.flex-col.gap-y-6px.relative
|
.flex.flex-col.gap-y-6px.relative
|
||||||
.flex.non-italic.font-semibold.text-xss Пароль
|
.flex.non-italic.font-semibold.text-xss Пароль
|
||||||
base-input.h-12(v-model:value="user.password", :type="changeType", placeholder="Введите ваш пароль")
|
base-input.h-12(
|
||||||
|
:style="{borderColor: this.authorized ? '' : this.redColor}"
|
||||||
|
v-model:value="user.password"
|
||||||
|
:type="changeType"
|
||||||
|
placeholder="Введите ваш пароль")
|
||||||
img.absolute.z-10.right-4.bottom-14px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
|
img.absolute.z-10.right-4.bottom-14px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
|
||||||
|
span.font-medium(:style="{color: this.redColor}", v-show="!authorized") Неверный логин или пароль
|
||||||
.flex.items-center.gap-x-11px
|
.flex.items-center.gap-x-11px
|
||||||
input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")
|
input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")
|
||||||
.flex.non-italic.font-medium.base Запомнить меня
|
.flex.non-italic.font-medium.base Запомнить меня
|
||||||
@@ -43,7 +52,9 @@ export default {
|
|||||||
hidePassword: hidePasswordIcon,
|
hidePassword: hidePasswordIcon,
|
||||||
loginBackground,
|
loginBackground,
|
||||||
logoMark,
|
logoMark,
|
||||||
|
authorized: true,
|
||||||
user: { username: "", password: "" },
|
user: { username: "", password: "" },
|
||||||
|
redColor: "var(--border-red-color)",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -61,6 +72,7 @@ export default {
|
|||||||
changeView() {
|
changeView() {
|
||||||
this.isView = !this.isView;
|
this.isView = !this.isView;
|
||||||
},
|
},
|
||||||
|
|
||||||
persist() {
|
persist() {
|
||||||
localStorage.username = this.user.username;
|
localStorage.username = this.user.username;
|
||||||
localStorage.password = this.user.password;
|
localStorage.password = this.user.password;
|
||||||
@@ -72,10 +84,20 @@ export default {
|
|||||||
body: JSON.stringify(this.user),
|
body: JSON.stringify(this.user),
|
||||||
};
|
};
|
||||||
fetch("http://45.84.227.122:8080/auth/jwt/create/", requestOptions)
|
fetch("http://45.84.227.122:8080/auth/jwt/create/", requestOptions)
|
||||||
.then((result) => result.json())
|
.then((result) => {
|
||||||
|
if (result.status === 200) {
|
||||||
|
return result.json();
|
||||||
|
} else {
|
||||||
|
return (this.authorized = false);
|
||||||
|
}
|
||||||
|
})
|
||||||
.then((token) => {
|
.then((token) => {
|
||||||
localStorage.setItem("tokenAccess", token.access);
|
if (token) {
|
||||||
this.$router.push("/");
|
localStorage.setItem("tokenAccess", token.access);
|
||||||
|
this.$router.push("/");
|
||||||
|
} else {
|
||||||
|
this.$router.push("/login");
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user