anatolykopyl/registration
1
0
Fork 0
mirror of https://github.com/anatolykopyl/registration.git synced 2026-03-26 12:55:25 +00:00
Code Issues Projects Releases Wiki Activity

Анимация сообщения и подсветка валидной почты

Browse Source
This commit is contained in:
Anatoly Kopyl
2021-06-03 21:55:10 +03:00
parent 61518b4fb4
commit 1222e4911a
3 changed files with 40 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@@ -1,5 +1,5 @@
{
"name": "frontend",
"name": "gora",
"version": "0.1.0",
"private": true,
"scripts": {

2
frontend/public/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏔</text></svg>">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

39
frontend/src/components/Login.vue
View File

@@ -9,6 +9,7 @@
left-icon-name="email"
class="maz-mb-2"
:color=validateEmail()
:class="{'is-focused': validateEmail() === 'success'}"
clearable
/>
<PassNBtns loginMethod="phone" @flip="usePhone = !usePhone" @auth="auth" />
@@ -27,7 +28,7 @@
</div>
</transition>
<transition name="slide">
<div v-if="msg" class="msg" v-bind:key="msg">
<div v-if="msg" class="msg" v-bind:key="msg" :class="{'bounce animated': animated}">
{{msg}}
</div>
</transition>
@@ -49,6 +50,7 @@ export default {
data() {
return {
msg: '',
animated: false,
usePhone: false,
email: '',
phone: '',
@@ -85,12 +87,23 @@ export default {
this.$emit('auth', this.src)
}).finally(() => {
if (!onload) {
if (this.msg != '') {
this.animate()
}
this.msg = 'Invalid credentials'
}
});
} else {
if (this.msg != '') {
this.animate()
}
this.msg = 'Please enter your credentials'
}
},
animate: function() {
var self = this;
self.animated = true;
setTimeout(function(){ self.animated = false; }, 1000);
}
},
mounted() {
@@ -128,4 +141,28 @@ export default {
.slide-enter, .slide-leave {
transform: translateY(-100px);
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
</style>