anatolykopyl/registration
1
0
Fork 0
mirror of https://github.com/anatolykopyl/registration.git synced 2026-03-26 21:05:26 +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", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {

2
frontend/public/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>

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

@@ -9,6 +9,7 @@
left-icon-name="email" left-icon-name="email"
class="maz-mb-2" class="maz-mb-2"
:color=validateEmail() :color=validateEmail()
:class="{'is-focused': validateEmail() === 'success'}"
clearable clearable
/> />
<PassNBtns loginMethod="phone" @flip="usePhone = !usePhone" @auth="auth" /> <PassNBtns loginMethod="phone" @flip="usePhone = !usePhone" @auth="auth" />
@@ -27,7 +28,7 @@
</div> </div>
</transition> </transition>
<transition name="slide"> <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}} {{msg}}
</div> </div>
</transition> </transition>
@@ -49,6 +50,7 @@ export default {
data() { data() {
return { return {
msg: '', msg: '',
animated: false,
usePhone: false, usePhone: false,
email: '', email: '',
phone: '', phone: '',
@@ -85,12 +87,23 @@ export default {
this.$emit('auth', this.src) this.$emit('auth', this.src)
}).finally(() => { }).finally(() => {
if (!onload) { if (!onload) {
if (this.msg != '') {
this.animate()
}
this.msg = 'Invalid credentials' this.msg = 'Invalid credentials'
} }
}); });
} else { } else {
if (this.msg != '') {
this.animate()
}
this.msg = 'Please enter your credentials' this.msg = 'Please enter your credentials'
} }
},
animate: function() {
var self = this;
self.animated = true;
setTimeout(function(){ self.animated = false; }, 1000);
} }
}, },
mounted() { mounted() {
@@ -128,4 +141,28 @@ export default {
.slide-enter, .slide-leave { .slide-enter, .slide-leave {
transform: translateY(-100px); 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> </style>