Add anim in login page

SamuelTallet · SamuelTallet · commit aa51204b49ec · 2020-07-26T11:16:29.000+02:00
diff --git a/static/css/mpg.login.css b/static/css/mpg.login.css
@@ -1,4 +1,30 @@
 
+/**
+ * @see https://teamtreehouse.com/community/shake-effect-with-javascript-only
+ */
+ 
+@keyframes shake {
+    10%, 90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%, 80% {
+        transform: translate3d(2px, 0, 0);
+    }
+
+    30%, 50%, 70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+
+    40%, 60% {
+        transform: translate3d(4px, 0, 0);
+    }
+}
+
+.apply-shake {
+    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+}
+
 /**
  * Based on a snippet made by Mutiullah Samim.
  *
diff --git a/static/js/mpg.login.js b/static/js/mpg.login.js
@@ -0,0 +1,46 @@
+
+/**
+ * MongoDB PHP GUI namespace.
+ * 
+ * @type {object}
+ */
+var MPG = {};
+
+/**
+ * Event listeners sub-namespace.
+ * 
+ * @type {object}
+ */
+MPG.eventListeners = {};
+
+/**
+ * Adds an event listener on "Login" button.
+ * 
+ * @returns {void}
+ */
+MPG.eventListeners.addLogin = function() {
+
+    document.querySelector('.card').addEventListener('animationend', function(event) {
+
+        event.currentTarget.classList.remove('apply-shake');
+
+    });
+
+    document.querySelector('#mpg-login-button').addEventListener('click', function(_event) {
+
+        if ( document.querySelector('input[name="host"]').value === '' 
+            || document.querySelector('input[name="port"]').value === '' )
+        {
+            document.querySelector('.card').classList.add('apply-shake');
+        }
+
+    });
+
+};
+
+// When document is ready:
+window.addEventListener('DOMContentLoaded', function(_event) {
+
+    MPG.eventListeners.addLogin();
+
+});
diff --git a/views/login.tpl.php b/views/login.tpl.php
@@ -11,6 +11,8 @@
     <link rel="stylesheet" href="<?php echo MPG_BASE_URL; ?>/static/css/bootstrap.min.css">
     <link rel="stylesheet" href="<?php echo MPG_BASE_URL; ?>/static/css/mpg.login.css">
 
+    <script src="<?php echo MPG_BASE_URL; ?>/static/js/mpg.login.js"></script>
+
 </head>
 
 <body>
@@ -77,7 +79,7 @@
                         </div>
 
                         <div class="form-group">
-                            <input type="submit" name="login" value="Login" class="btn btn-primary float-right">
+                            <input id="mpg-login-button" type="submit" name="login" value="Login" class="btn btn-primary float-right">
                         </div>
 
                     </form>
