Rework login page to be AJAX/Vue.js based

app/assets/less/form.less

@@ -0,0 +1,182 @@
+@keyframes loading-bar {
+  0% {
+    left: 0;
+    width: 0;
+  }
+
+  5% {
+    left: 0;
+    width: 12.5%;
+  }
+
+  10% {
+    left: 0;
+    width: 25%;
+  }
+
+  15% {
+    left: 0;
+    width: 37.5%;
+  }
+
+  20% {
+    left: 0;
+    width: 50%;
+  }
+
+  25% {
+    left: 0;
+    width: 62.5%;
+  }
+
+  30% {
+    left: 0;
+    width: 75%;
+  }
+
+  35% {
+    left: 0;
+    width: 87.5%;
+  }
+
+  40% {
+    left: 0;
+    width: 100%;
+  }
+
+  50% {
+    left: 0;
+    width: 100%;
+  }
+
+  55% {
+    left: 12.5%;
+    width: 87.5%;
+  }
+
+  60% {
+    left: 25%;
+    width: 75%;
+  }
+
+  65% {
+    left: 37.5%;
+    width: 62.5%;
+  }
+
+  70% {
+    left: 50%;
+    width: 50%;
+  }
+
+  75% {
+    left: 62.5%;
+    width: 37.5%;
+  }
+
+  80% {
+    left: 75%;
+    width: 25%;
+  }
+
+  85% {
+    left: 87.5%;
+    width: 12.5%;
+  }
+
+  90% {
+    left: 100%;
+    width: 0;
+  }
+
+  100% {
+    left: 0;
+    width: 0;
+  }
+}
+
+.coreid-form input {
+  border-radius: 0;
+  border: none;
+  border-bottom: 2px solid #aaa;
+  font-size: 1.2em;
+  background: none;
+  box-shadow: none;
+
+  &:focus {
+    box-shadow: none;
+    border-bottom: 2px solid #666;
+  }
+}
+
+.coreid-login-form {
+  border: 2px solid #ddd;
+  border-radius: 7px;
+
+  .coreid-login-form-inner {
+    padding: 30px;
+    padding-top: 170px;
+    padding-bottom: 160px;
+  }
+
+  .coreid-login-form-header {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+  }
+
+  .coreid-login-form-message {
+    margin-bottom: 40px;
+  }
+
+  .buttons {
+    margin-top: 40px;
+    margin-bottom: 0;
+
+    .btn {
+      background: #666;
+      border-color: #444;
+
+      &:hover {
+        background: #777;
+      }
+
+      &:focus {
+        background: #888;
+        box-shadow: #333;
+      }
+    }
+  }
+
+  .coreid-loading-spinner {
+    overflow: hidden;
+    background-color: #ddd;
+    height: 7px;
+    margin: 0;
+    padding: 0;
+    width: calc(100% + 30px);
+    margin-left: -15px;
+    border-radius: 0 0 5px 5px;
+
+    .inner {
+      height: 7px;
+      width: 50px;
+      background-color: #bbb;
+      position: absolute;
+      left: 0;
+      border-radius: 0 0 5px 5px;
+      animation-name: loading-bar;
+      animation-duration: 1.5s;
+      animation-fill-mode: both;
+      animation-iteration-count: infinite;
+    }
+  }
+
+  .error-message {
+    color: darkred;
+    font-size: 0.8em;
+  }
+
+  .other-message {
+    font-size: 0.8em;
+  }
+}

app/assets/less/public.less

@@ -0,0 +1,12 @@
+.masthead {
+  height: 100vh;
+  min-height: 500px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.app-container {
+  background: #eee;
+  color: #666;
+}

app/assets/less/welcome.less

@@ -0,0 +1,9 @@
+#about {
+  background: #666;
+  color: #eee;
+
+  a {
+    color: white;
+    text-decoration: underline;
+  }
+}