client js login system + login card styling + fixed template issues

.eslintignore

@@ -0,0 +1,2 @@
+# web javascript causes a lot of eslint warnings
+assets/js/*.js

assets/css/pretendo-auth.css

@@ -3,6 +3,19 @@ body.flex.center {
     align-items: center;
 }
 
+body footer {
+    padding: 0;
+    background-color: transparent;
+}
+body footer .content {
+    border-radius: 0;
+    background-color: transparent;
+    padding: 1em 0;
+    box-shadow: none;
+    width: 30rem;
+    max-width: 100vw;
+}
+
 /* login/register card */
 .card {
     background-color: white;

assets/js/auth.js

@@ -0,0 +1,26 @@
+function postAjax(url, data, success) {
+	var params = (typeof data == 'string') ? data : Object.keys(data).map(function (k) {
+		return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) 
+	}).join('&');
+
+	var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
+	xhr.open('POST', url);
+	xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+	xhr.send(params);
+	return xhr;
+}
+
+function login() {
+	var xhr = postAjax('/api/v1/login', {
+		email: document.getElementById('email_input').value,
+		password: document.getElementById('password_input').value
+	});
+	xhr.onload = function () {
+		console.log(xhr.responseText);
+		response = JSON.parse(xhr.responseText);
+		if (response.success === true) {
+			location.pathname = '/pnid/dashboard';
+		}
+	}
+}

views/admin.hbs

@@ -121,7 +121,7 @@
         <a href="/admin/api/v1/check">Check if logged in</a>
         <br>    
         <a href="/admin/api/v1/logout">Logout</a>
-
+        </div>
         {{> footer-default }}
     </body>
 </html>

views/contact.hbs

@@ -25,7 +25,7 @@
                     </form>
                 </div>
             </section>
-
+        </div>
         {{> footer-default }}
     </body>
 </html>

views/dashboard.hbs

@@ -13,7 +13,7 @@
                 <p class="txt-highlight">ERROR</p>
                 <h1 class="txt-title small">ERROR</h1>
             </section>
-        </div>
+        </div>  
         {{> footer-default }}
     </body>
 </html>

views/home.hbs

@@ -102,6 +102,7 @@
                     </div>
                 </div>
             </section>
+        </div>
         {{> footer-default }}
 	</body>
 </html>

views/login.hbs

@@ -14,13 +14,14 @@
                 <h1 class="txt-title small">{{ locales.login_card.title }}</h1>
                 <form action="/api/v1/sendmessage" method="POST">
                     <label for="email">{{ locales.login_card.email_text }}</label>
-                    <input type="text" class="hasLabel" id="email" name="email">
+                    <input type="text" class="hasLabel" id="email_input" name="email">
                     <label for="email">{{ locales.login_card.password_text }}</label>
-                    <input type="password" class="hasLabel" id="password" name="password">
+                    <input type="password" class="hasLabel" id="password_input" name="password">
                 </form>
-                <button class="btn btnMargin">{{ locales.login_card.button_text }}</button>
+                <button class="btn btnMargin" onclick="login()">{{ locales.login_card.button_text }}</button>
                 <p class="lowText">ERROR <a href="#">ERROR</a></p>
             </div>
         </div>
+        {{> footer-default }}
     </body>
 </html>

views/partials/footer-default.hbs

@@ -1,4 +1,3 @@
-</div>
 <footer>
     <div class="content">
         <p>{{ locales.footer.text }}</p>

views/post-collection.hbs

@@ -23,7 +23,7 @@
                     -->
                 </div>
             </section>
-
+        </div>
         {{> footer-default }}
     </body>
 </html>

views/post.hbs

@@ -22,7 +22,7 @@
 					</div>
                 </div>
             </section>
-
+        </div>
         {{> footer-default }}
     </body>
 </html>

views/progress.hbs

@@ -38,7 +38,7 @@
                     {{/each}}
                 </div>
             </section>
-
+        </div>
         {{> footer-default }}
     </body>
 </html>