From 1222e4911a50fb81b02c697d64aad2b29ef42a2c Mon Sep 17 00:00:00 2001 From: Anatoly Date: Thu, 3 Jun 2021 21:55:10 +0300 Subject: [PATCH] =?UTF-8?q?=D0=90=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D1=8F=20=D1=81=D0=BE=D0=BE=D0=B1=D1=89=D0=B5=D0=BD=D0=B8=D1=8F?= =?UTF-8?q?=20=D0=B8=20=D0=BF=D0=BE=D0=B4=D1=81=D0=B2=D0=B5=D1=82=D0=BA?= =?UTF-8?q?=D0=B0=20=D0=B2=D0=B0=D0=BB=D0=B8=D0=B4=D0=BD=D0=BE=D0=B9=20?= =?UTF-8?q?=D0=BF=D0=BE=D1=87=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 2 +- frontend/public/index.html | 2 +- frontend/src/components/Login.vue | 39 ++++++++++++++++++++++++++++++- 3 files changed, 40 insertions(+), 3 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index d03cf5c..8c7ce23 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,5 +1,5 @@ { - "name": "frontend", + "name": "gora", "version": "0.1.0", "private": true, "scripts": { diff --git a/frontend/public/index.html b/frontend/public/index.html index 3e5a139..82024a2 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -4,7 +4,7 @@ - + <%= htmlWebpackPlugin.options.title %> diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue index 6f5afb7..26762a2 100644 --- a/frontend/src/components/Login.vue +++ b/frontend/src/components/Login.vue @@ -9,6 +9,7 @@ left-icon-name="email" class="maz-mb-2" :color=validateEmail() + :class="{'is-focused': validateEmail() === 'success'}" clearable /> @@ -27,7 +28,7 @@ -
+
{{msg}}
@@ -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; + } \ No newline at end of file