<i18n>
{
"en": {
"SIGN_IN": "SIGN IN",
"SIGN_UP": "SIGN UP",
"LOGIN": "LOGIN",
"PASSWORD": "PASSWORD",
"KEEP_ME_SIGNED_IN": "KEEP ME SIGNED IN",
"EMAIL": "EMAIL",
"CONFIRM_PASSWORD": "CONFIRM PASSWORD",
"Forgot_your_password?": "Forgot your password?",
"RESTORE": "RESTORE",
"SEND": "SEND"
},
"ru": {
"SIGN_IN": "ВОЙТИ",
"SIGN_UP": "РЕГИСТРАЦИЯ",
"LOGIN": "ЛОГИН",
"PASSWORD": "ПАРОЛЬ",
"KEEP_ME_SIGNED_IN": "ЗАПОМНИТЬ МЕНЯ",
"EMAIL": "EMAIL",
"CONFIRM_PASSWORD": "ПОДТВЕРДИТЬ ПАРОЛЬ",
"Forgot_your_password?": "Забыли пароль?",
"RESTORE": "ВОСТАНОВИТЬ",
"SEND": "ОТПРАВИТЬ"
}
}
</i18n>
<template>
<div class="frame">
<div class="nav">
<label>
<input
type="radio"
name="auth"
@change="page = 0"
v-bind:checked="page == 0"
/>
<span>
{{ $t("SIGN_IN") }}
</span>
</label>
<label>
<input
type="radio"
name="auth"
@change="page = 1"
v-bind:checked="page == 1"
/>
<span>
{{ $t("SIGN_UP") }}
</span>
</label>
<label v-bind:style="page == 2 ? { opacity: 1 } : { opacity: 0 }">
<input
type="radio"
name="auth"
v-bind:checked="page == 2"
v-bind:disabled="page != 2"
/>
<span>
{{ $t("RESTORE") }}
</span>
</label>
</div>
<div class="body">
<div class="signin" v-swipe="{ myPage: 0, curentPage: page }">
<div class="body__block">
<div class="body__text">{{ $t("LOGIN") }}</div>
<input type="text" class="body__input" />
</div>
<div class="body__block">
<div class="body__text">{{ $t("PASSWORD") }}</div>
<input type="password" class="body__input" minlength="8" />
</div>
<div class="keepme body__block">
<label class="keepme__check">
<input type="checkbox" />
<span></span>
</label>
<span>{{ $t("KEEP_ME_SIGNED_IN") }}</span>
</div>
<button class="body__submit body__block">{{ $t("LOGIN") }}</button>
<hr class="body__block" />
<button class="forgot body__block" @click="page = 2">
{{ $t("Forgot_your_password?") }}
</button>
</div>
<div class="signup" v-swipe="{ myPage: 1, curentPage: page }">
<div class="body__block">
<div class="body__text">{{ $t("LOGIN") }}</div>
<input type="text" class="body__input" />
</div>
<div class="body__block">
<div class="body__text">{{ $t("EMAIL") }}</div>
<input type="email" class="body__input" />
</div>
<div class="body__block">
<div class="body__text">{{ $t("PASSWORD") }}</div>
<input type="password" class="body__input" minlength="8" />
</div>
<div class="body__block">
<div class="body__text">{{ $t("CONFIRM_PASSWORD") }}</div>
<input type="password" class="body__input" minlength="8" />
</div>
<button class="body__submit body__block">{{ $t("SIGN_UP") }}</button>
</div>
<div class="restore" v-swipe="{ myPage: 2, curentPage: page }">
<div class="body__block">
<div class="body__text">{{ $t("EMAIL") }}</div>
<input type="text" class="body__input" />
</div>
<button class="body__submit body__block">
{{ $t("SEND") }} {{ $t("PASSWORD") }}
</button>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
@font-face {
font-family: OpenSans;
src: local("Open Sans Regular"), local("OpenSans-Regular"),
url("../assets/fonts/OpenSans/OpenSans-Regular.ttf");
}
$transition-slow: 0.5s;
$transition-fast: 0.25s;
* {
box-sizing: border-box;
}
.frame {
width: 50vmin; //! удалить и переделать на Authorization
//transition: width $transition-slow ease;
display: flex;
flex-direction: column;
font-family: OpenSans;
border-radius: 0.75vmin;
background: linear-gradient(rgba(35, 43, 85, 0.75), rgba(35, 43, 85, 0.95));
.nav {
display: flex;
padding: 0 5vmin;
width: 100%;
margin-top: 7vmin;
label {
font-size: 2.5vmin;
margin: 0 1vmin;
transition: opacity $transition-fast ease;
}
input {
display: none;
}
input + span {
cursor: pointer;
transition: padding $transition-fast ease, color $transition-fast ease;
color: rgba(255, 255, 255, 0.3);
}
input:checked + span {
border-bottom: solid 0.3vmin #1059ff;
padding-bottom: 1.25vmin;
color: white;
}
}
.body {
display: flex;
margin-top: 7vmin;
width: 100%;
transition: height $transition-slow ease;
position: relative;
height: 0;
overflow: hidden;
& > div {
display: flex;
flex-direction: column;
flex-shrink: 0;
transition: opacity $transition-slow ease, left $transition-slow ease;
width: 100%;
padding: 0 5vmin;
position: absolute;
opacity: 0;
}
&__block {
margin: 0 0 2vmin 0;
}
&__text {
font-weight: 400;
font-size: 1.75vmin;
color: rgba(255, 255, 255, 0.7);
margin-left: 2vmin;
margin-bottom: 0.5vmin;
}
&__input {
width: 100%;
height: 4vmin;
background: rgba(255, 255, 255, 0.2);
border-radius: 2vmin;
border: none;
outline: none;
padding: 1vmin 2vmin;
color: white;
font-size: 2vmin;
display: flex;
align-items: center;
}
&__submit {
width: 100%;
font-weight: 700;
font-size: 1.75vmin;
text-align: center;
color: white;
height: 4.5vmin;
border: none;
border-radius: 3vmin;
outline: none;
background-color: #1059ff;
cursor: pointer;
}
.signin {
.keepme {
display: flex;
align-items: center;
font-size: 1.75vmin;
color: rgba(255, 255, 255, 0.7);
&__check {
margin-right: 2vmin;
$width: 8vmin;
$heigth: 4vmin;
$transition: 0.2s;
$round: $heigth / 3;
$padding: ($heigth - $round) /2;
cursor: pointer;
input {
display: none;
}
* {
box-sizing: border-box;
}
input + span {
width: $width;
height: $heigth;
border-radius: $heigth/2;
font-size: 1.75vmin;
line-height: 1;
transition: background-color $transition ease;
position: relative;
display: flex;
align-items: center;
}
input + span:before {
height: $round;
width: $round;
border-radius: 50%;
transition: left $transition ease;
}
input:not(:checked) + span {
background: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.7);
}
input:not(:checked) + span:before {
content: "";
position: absolute;
left: $padding;
background: rgba(255, 255, 255, 0.2);
}
input:not(:checked) + span:after {
content: "NO";
position: absolute;
right: $padding;
}
input:checked + span {
background: #0f4fe6;
color: white;
}
input:checked + span::before {
content: "";
background: white;
position: absolute;
left: $width - $padding -$round;
}
input:checked + span::after {
content: "YES";
position: absolute;
left: $padding;
}
}
}
hr {
border: none;
background: rgba(255, 255, 255, 0.16);
width: 100%;
height: 0.1vmin;
}
.forgot {
color: rgba(255, 255, 255, 0.3);
display: flex;
margin-right: auto;
margin-left: auto;
outline: none;
background: transparent;
padding: 0;
border: none;
cursor: pointer;
font-size: 1.75vmin;
}
}
}
}
</style>
<script>
export default {
name: "Auth",
data() {
return {
page: 0,
};
},
methods: {},
mounted() {},
directives: {
swipe: {
inserted(el, binding) {
if (binding.value.myPage == binding.value.curentPage) {
el.style.left = "0";
el.style.opacity = "1";
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
let minSide = height < width ? (minSide = height) : (minSide = width);
el.parentElement.style.height =
(100 * el.scrollHeight) / minSide + 7 + "vmin";
} else {
if (binding.value.myPage > binding.value.curentPage) {
el.style.left = "100%";
el.style.opacity = "0";
}
if (binding.value.myPage < binding.value.curentPage) {
el.style.left = "-100%";
el.style.opacity = "0";
}
}
},
updated: function pageUpdated(el, binding) {
alert(el, binding);
},
},
},
};
</script>
