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

2026-03-26 12:55:25 +00:00 · 2021-06-03 21:55:10 +03:00
parent 61518b4fb4
commit 1222e4911a
3 changed files with 40 additions and 3 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "gora",
  "version": "0.1.0",
  "private": true,
  "scripts": {
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -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>
--- 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
        />
        <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>