admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[WIP] Добавил инпуты, кнопку и чекбокс на LoginPage

Browse Source
This commit is contained in:
megavrilinvv
2022-11-01 15:33:27 +03:00
parent e3f1a68937
commit 0439e38306
4 changed files with 44 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/icons/eye.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5 9.99894L18.2185 10.2139C18.2605 10.0736 18.2605 9.92405 18.2185 9.78373L17.5 9.99894ZM2.5 10.0011L1.78148 9.78614C1.73949 9.92647 1.73951 10.076 1.78154 10.2163L2.5 10.0011ZM4.59543 7.68799C4.86387 7.37254 4.82575 6.89919 4.51029 6.63076C4.19484 6.36232 3.72149 6.40044 3.45306 6.7159L4.59543 7.68799ZM12.3361 15.9849C12.7349 15.8728 12.9672 15.4587 12.8551 15.06C12.743 14.6612 12.3289 14.4288 11.9302 14.5409L12.3361 15.9849ZM3.82281 2.80148C3.52905 2.50945 3.05418 2.51086 2.76216 2.80462C2.47013 3.09838 2.47154 3.57325 2.7653 3.86527L3.82281 2.80148ZM16.1779 17.1986C16.4716 17.4906 16.9465 17.4892 17.2385 17.1955C17.5306 16.9017 17.5291 16.4268 17.2354 16.1348L16.1779 17.1986ZM11.581 11.5714L11.0523 12.1033H11.0523L11.581 11.5714ZM10.0003 8.52782C10.8249 8.52782 11.4858 9.19114 11.4858 10H12.9858C12.9858 8.35434 11.645 7.02782 10.0003 7.02782V8.52782ZM10.0003 5.19449C13.2064 5.19449 15.9125 7.31305 16.7815 10.2142L18.2185 9.78373C17.1631 6.26044 13.8821 3.69449 10.0003 3.69449V5.19449ZM9.99967 14.8056C6.79363 14.8056 4.08747 12.687 3.21846 9.78593L1.78154 10.2163C2.83693 13.7396 6.11793 16.3056 9.99967 16.3056V14.8056ZM3.21852 10.2161C3.49956 9.27689 3.9734 8.41899 4.59543 7.68799L3.45306 6.7159C2.6994 7.60157 2.12347 8.6432 1.78148 9.78614L3.21852 10.2161ZM11.9302 14.5409C11.3174 14.7132 10.67 14.8056 9.99967 14.8056V16.3056C10.8085 16.3056 11.5925 16.194 12.3361 15.9849L11.9302 14.5409ZM6.11024 6.35148C7.22574 5.62032 8.56171 5.19449 10.0003 5.19449V3.69449C8.26125 3.69449 6.64076 4.21025 5.28796 5.09694L6.11024 6.35148ZM2.7653 3.86527L5.17034 6.25611L6.22786 5.19231L3.82281 2.80148L2.7653 3.86527ZM13.7726 14.8075L16.1779 17.1986L17.2354 16.1348L14.8301 13.7437L13.7726 14.8075ZM16.7815 9.78395C16.3029 11.3835 15.2648 12.7472 13.8901 13.6484L14.7125 14.9028C16.3758 13.8124 17.6362 12.1601 18.2185 10.2139L16.7815 9.78395ZM11.0523 12.1033L13.7726 14.8075L14.8301 13.7437L12.1098 11.0395L11.0523 12.1033ZM11.4858 10C11.4858 10.4053 11.3215 10.7719 11.0523 11.0395L12.1098 12.1033C12.6497 11.5666 12.9858 10.8221 12.9858 10H11.4858ZM5.17034 6.25611L7.8909 8.96059L8.94841 7.89679L6.22786 5.19231L5.17034 6.25611ZM7.8909 8.96059L11.0523 12.1033L12.1098 11.0395L8.94841 7.89679L7.8909 8.96059ZM8.94841 8.96059C9.21769 8.69291 9.58849 8.52782 10.0003 8.52782V7.02782C9.1776 7.02782 8.43069 7.36019 7.8909 7.89679L8.94841 8.96059Z" fill="#252850"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

4
src/assets/icons/openEye.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.53883 10.2508C2.4871 10.0896 2.48705 9.9151 2.53869 9.75386C3.57827 6.50764 6.52628 4.16675 10.0007 4.16675C13.4734 4.16675 16.4203 6.50547 17.4612 9.74933C17.5129 9.91054 17.5129 10.0851 17.4613 10.2463C16.4217 13.4925 13.4737 15.8334 9.99934 15.8334C6.52659 15.8334 3.57971 13.4947 2.53883 10.2508Z" stroke="#4772F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.2464 10.0001C12.2464 11.2887 11.2407 12.3334 10 12.3334C8.75942 12.3334 7.7537 11.2887 7.7537 10.0001C7.7537 8.71142 8.75942 7.66675 10 7.66675C11.2407 7.66675 12.2464 8.71142 12.2464 10.0001Z" stroke="#4772F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 794 B

41
src/pages/login/TheLogin.vue
View File

@@ -11,14 +11,15 @@
.flex.flex-col.gap-y-5
.flex.flex-col.gap-y-6px
.flex Логин
base-input(placeholder="Введите ваш логин")
.flex.flex-col.gap-y-6px
base-input.h-12(v-model:value="user.login" type="text" placeholder="Введите ваш логин")
.flex.flex-col.gap-y-6px.relative
.flex Пароль
base-input(type="password" placeholder="Введите ваш пароль")
base-input.h-12(v-model:value="user.password" :type="changeType" placeholder="Введите ваш пароль")
img.absolute.z-10.right-4.bottom-14px.cursor-pointer(:src="changeIcon" alt="eyePassword" @click="changeView")
.flex.items-center.gap-x-11px
input.w-4.h-4.checkbox.cursor-pointer(type="checkbox" @change="(e) => check(e)")
input.w-4.h-4.checkbox.cursor-pointer(@click="persist" type="checkbox")
.flex Запомнить меня
base-button.font-semibold(:size="48") Войти в аккаунт
base-button.font-semibold(:disabled="disabledButton" :size="48") Войти в аккаунт
.absolute.left-12.bottom-12 2022 © Астра
.right-col.flex.items-center.justify-center.relative
img.logo-img.absolute.z-10(src="@/assets/images/bigLogo.svg" alt="bigLogo")
@@ -30,14 +31,44 @@
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseButton from "@/components/base/BaseButton";
import viewPass from "@/assets/icons/eye.svg";
import notViewPass from "@/assets/icons/openEye.svg";
export default {
name: "TheLogin",
components: { BaseInput, BaseButton },
data() {
return {
colorUnderText: "var(--font-grey-color)",
isView: false,
img: viewPass,
notimg: notViewPass,
user: { login: "", password: "" },
};
},
computed: {
changeIcon() {
return !this.isView ? this.img : this.notimg;
},
changeType() {
return !this.isView ? "password" : "text";
},
disabledButton() {
return this.user.login && this.user.password ? false : true;
},
},
methods: {
changeView() {
this.isView = !this.isView;
},
persist() {
localStorage.login = this.user.login;
localStorage.password = this.user.password;
},
},
mounted() {
if (localStorage.login) this.user.login = localStorage.login;
if (localStorage.password) this.user.password = localStorage.password;
},
};
</script>