Fix login page background

Author: SamuelTallet

login.css

@@ -0,0 +1,161 @@
+/* Bootstrap reset */
+
+.form-control:focus, .btn.focus, .btn:focus {
+
+    box-shadow: unset;
+    
+}
+
+.input-group-text {
+
+    border: unset;
+
+}
+
+/**
+ * Shake effect.
+ * 
+ * @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);
+    }
+
+}
+
+.shake {
+
+    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
+    
+}
+
+/**
+ * Template based on a snippet created by Mutiullah Samim.
+ *
+ * @see https://bootsnipp.com/snippets/vl4R7
+ */
+
+#mpg-background {
+
+    background-image: url("../../assets/images/login-background.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+
+}
+
+#mpg-background .credit-link {
+    
+    bottom: 10px;
+    color: rgba(255, 255, 255, 0.7);
+    position: absolute;
+    right: 10px;
+
+}
+
+html, body {
+
+    height: 100%;
+
+}
+
+body {
+
+    font-family: Arial, sans-serif;
+    
+}
+
+.alert {
+
+    max-width: 290px;
+    margin: 15px auto;
+
+}
+
+#mpg-cards {
+
+    min-height: 191px;
+    perspective: 1000px;
+    transform-style: preserve-3d;
+    width: 322px;
+
+}
+
+.card {
+
+    background-color: rgba(255, 255, 255, 0.7);
+
+}
+
+.mpg-card-front, .mpg-card-back {
+
+    -webkit-backface-visibility: hidden; /* For Safari */
+    backface-visibility: hidden;
+    position: absolute;
+    transition: transform 0.6s;
+
+}
+
+.mpg-card-front {
+
+    transform: rotateY(0deg);
+
+}
+
+#mpg-cards.flipped .mpg-card-front {
+
+    transform: rotateY(-180deg);
+
+}
+
+.mpg-card-back {
+
+    transform: rotateY(180deg);
+
+}
+
+#mpg-cards.flipped .mpg-card-back {
+
+    transform: rotateY(0deg);
+
+}
+
+.mpg-card-header-title {
+
+    font-family: Ubuntu, ubuntu-medium;
+
+}
+
+.input-group-text {
+
+    width: 40px;
+
+    background-color: #5dad1d;
+    color: white;
+
+}
+
+.mpg-flip-card-button {
+
+    padding-left: 0;
+
+}

login.esm.js

@@ -0,0 +1,76 @@
+/**
+ * MongoDB PHP GUI login.
+ */
+class Login {
+
+  constructor() {
+
+    this.cardsContainer = document.getElementById('mpg-cards')
+    this.flipCardButtons = document.querySelectorAll('.mpg-flip-card-button')
+    this.requiredInputs = document.querySelectorAll('input[required]')
+    this.forms = document.querySelectorAll('form')
+
+  }
+
+  /**
+   * Adds an event listener on each "Flip card" button.
+   */
+  listenFlipCardButtons() {
+
+    this.flipCardButtons.forEach(flipCardButton => {
+      flipCardButton.addEventListener('click', event => {
+        event.preventDefault()
+        this.cardsContainer.classList.toggle('flipped')
+      })
+    })
+
+  }
+
+  /**
+   * Adds an event listener on each required input field.
+   */
+  listenRequiredInputs() {
+
+    this.cardsContainer.addEventListener('animationend', _event => {
+      this.cardsContainer.classList.remove('shake')
+    })
+
+    this.requiredInputs.forEach(requiredInput => {
+      requiredInput.addEventListener('invalid', _event => {
+        this.cardsContainer.classList.add('shake')
+      })
+    })
+
+  }
+
+  /**
+   * Adds an event listener on each form.
+   */
+  listenForms() {
+
+    this.forms.forEach(form => {
+      form.addEventListener('submit', event => {
+        event.preventDefault()
+
+        /**
+         * TODO: Submit form if credentials are good.
+         *
+         * @see https://github.com/SamuelTallet/MongoDB-PHP-GUI/issues/21
+         */
+        form.submit()
+      })
+    })
+
+  }
+
+}
+
+(function onDocumentReady() {
+
+  const login = new Login()
+
+  login.listenFlipCardButtons()
+  login.listenRequiredInputs()
+  login.listenForms()
+
+})()