From 4482f698366ca1bba6de38c20a68e35129b3f05f Mon Sep 17 00:00:00 2001
From: hanez <you@hanez.org>
Date: Fri, 20 Dec 2024 01:47:29 +0100
Subject: [PATCH] Added login form to /account/ and fixes for other forms.

---
 _sass/_forms.scss    | 58 ++++++++++++++++++++++++++++++++++++++------
 account/account.html | 41 ++++++++++++++++++++++++++++++-
 contact/contact.html | 36 ++++++++++++++-------------
 3 files changed, 109 insertions(+), 26 deletions(-)

diff --git a/_sass/_forms.scss b/_sass/_forms.scss
index 79125f8..f2761d7 100644
--- a/_sass/_forms.scss
+++ b/_sass/_forms.scss
@@ -1,12 +1,14 @@
+// Contact form
 #contactform {
-  padding: 20px;
-  border: 1px solid $grey-color;
-  background: $grey-color-light;
+  //padding: 20px;
+  //border: 1px solid $grey-color;
+  //background: $grey-color-light;
+  //display: inline;
 }
 
 #contactform label, #contactform input, #contactform textarea {
   display: block;
-  width: 97%;
+  width: 98%;
   resize: none;
 }
 
@@ -40,15 +42,55 @@
   background: $headline-color;
 }
 
-#searchform {
-  padding: 20px;
+// Login form
+#loginform {
+  //background: $grey-color-light;
+  //border: 1px solid $grey-color;
+  display: inline;
+  //padding: 20px;
+  //width: 380px;
+}
+
+#loginform label, #loginform input{
+  //display: block;
+  resize: none;
+}
+
+#loginform label { margin: 10px 0; }
+
+#loginform label:first-child { margin-top: 0; }
+
+#loginform input {
   border: 1px solid $grey-color;
-  background: $grey-color-light;
+  font-family: $base-font-family;
+  line-height: $base-line-height;
+  font-size: $base-font-size;
+  //font-weight: 300;
+  margin: 10px;
+  padding: 10px;
+}
+
+#loginform input[type=submit] {
+  border: 0;
+  background: $brand-color;
+  color: #fff;
+  cursor: pointer;
+}
+
+#loginform input[type=submit]:hover {
+  background: $headline-color;
+}
+
+// Search form
+#searchform {
+  //padding: 20px;
+  //border: 1px solid $grey-color;
+  //background: $grey-color-light;
 }
 
 #searchform label, #searchform input, #searchform textarea {
   display: block;
-  width: 97%;
+  width: 98%;
   resize: none;
 }
 
diff --git a/account/account.html b/account/account.html
index af5d781..140327d 100644
--- a/account/account.html
+++ b/account/account.html
@@ -9,4 +9,43 @@ subtitle: Manage your account here...
 permalink: /account/
 ---
 
-<h2>TODO! :P :D :)</h2>
+<h2>Login</h2>
+
+<script>
+function doSubmit() {
+  window.alert("Not implemented yet... ;)");
+  //$("#loader").removeClass("hidden");
+  event.preventDefault();
+  var form = $('#loginform')[0];
+  var data = new FormData(form);
+  $.ajax({
+    type: "POST",
+    enctype: 'multipart/form-data',
+    data: data,
+    url: "/cgi/login/",
+    processData: false,
+    contentType: false,
+    cache: false,
+    success: function(data){
+      //window.alert(data);
+      //$("#challenge").load("/cgi/challenge/");
+      $("#loader").addClass("hidden");
+    }
+  });
+  return false;
+}
+//$(document).ready(function(){
+//  $("#challenge").load("/cgi/challenge/");
+//});
+</script>
+
+<div style="margin:0;padding0;text-align:center;">
+  <form id="loginform" method="post" onsubmit="return doSubmit();">
+    <div style="margin:0;padding0;"><label>Username:</label>
+    <input type="text" name="username" id="username" required></div>
+    <div style="margin:0;padding0;"><label>Password:</label>
+    <input type="password" name="password" id="password" required></div>
+    <div style="margin:0;padding0;text-align:right;"><input type="submit" value="Login!" id="button"></div>
+  </form>
+</div>
+
diff --git a/contact/contact.html b/contact/contact.html
index 1b0eede..a361345 100644
--- a/contact/contact.html
+++ b/contact/contact.html
@@ -39,28 +39,30 @@ $(document).ready(function(){
 });
 </script>
 
-<form id="contactform" method="post" onsubmit="return doSubmit();">
-  <div><label>Name:<span style="color:red;">*</span></label>
-  <input type="text" name="name" id="name" required></div>
+<div style="margin:0;padding0;text-align:left;">
+  <form id="contactform" method="post" onsubmit="return doSubmit();">
+    <div><label>Name:<span style="color:red;">*</span></label>
+    <input type="text" name="name" id="name" required></div>
 
-  <div><label>Email:</label>
-  <input type="email" name="email" id="email"></div>
+    <div><label>Email:</label>
+    <input type="email" name="email" id="email"></div>
 
-  <div><label>Website:</label>
-  <input type="text" name="website" id="website"></div>
+    <div><label>Website:</label>
+    <input type="text" name="website" id="website"></div>
 
-  <div><label>Subject:</label>
-  <input type="text" name="subject" id="subject"></div>
+    <div><label>Subject:</label>
+    <input type="text" name="subject" id="subject"></div>
 
-  <div><label>Message:<span style="color:red;">*</span></label>
-  <textarea name="message" id="message" required style="font-size:1em;font-family:OpenSans-Regular;"></textarea></div>
+    <div><label>Message:<span style="color:red;">*</span></label>
+    <textarea name="message" id="message" required style="font-size:1em;font-family:OpenSans-Regular;"></textarea></div>
 
-  <div style="text-align:left;width:50%;float:left;"><label>Challenge: <span id="challenge" name="challenge">NULL</span>?
-  <span style="color:red;">*</span></label>
-  <input style="width:10%;text-align:center;" type="text" name="sum" id="sum" required></div>
+    <div style="text-align:left;width:50%;float:left;"><label>Challenge: <span id="challenge" name="challenge">NULL</span>?
+    <span style="color:red;">*</span></label>
+    <input style="width:10%;text-align:center;" type="text" name="sum" id="sum" required></div>
 
-  <div style="text-align:right;width:50%;float:right;"><span style="color:red;">*</span> = Required fields</div>
+    <div style="text-align:right;width:50%;float:right;"><span style="color:red;">*</span> = Required fields</div>
 
-  <div><input type="submit" value="Send!" id="button"></div>
-</form>
+    <div><input type="submit" value="Send!" id="button"></div>
+  </form>
+</div>