From 4c0a88a1316174e02b16420f83401dc40a2db820 Mon Sep 17 00:00:00 2001
From: Dominik Picheta <dominikpicheta@gmail.com>
Date: Thu, 10 May 2018 23:33:48 +0100
Subject: [PATCH] Create login modal.

---
 redesign/forum.nim     | 58 ++++++++++++++++++++++++++++++++----------
 redesign/nimforum.scss |  6 +++--
 2 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/redesign/forum.nim b/redesign/forum.nim
index efa4780..219d75a 100644
--- a/redesign/forum.nim
+++ b/redesign/forum.nim
@@ -25,20 +25,50 @@ proc onPopState(event: dom.Event) =
   redraw()
 
 proc genHeader(): VNode =
-  result = buildHtml(header(id="main-navbar")):
-    tdiv(class="navbar container grid-xl"):
-      section(class="navbar-section"):
-        a(href=makeUri("/")):
-          img(src="images/crown.png", id="img-logo") # TODO: Customisation.
-      section(class="navbar-section"):
-        tdiv(class="input-group input-inline"):
-          input(class="form-input input-sm", `type`="text", placeholder="search")
-        button(class="btn btn-primary btn-sm"):
-          italic(class="fas fa-user-plus")
-          text " Sign up"
-        button(class="btn btn-primary btn-sm"):
-          italic(class="fas fa-sign-in-alt")
-          text " Log in"
+  result = buildHtml(tdiv()):
+    header(id="main-navbar"):
+      tdiv(class="navbar container grid-xl"):
+        section(class="navbar-section"):
+          a(href=makeUri("/")):
+            img(src="images/crown.png", id="img-logo") # TODO: Customisation.
+        section(class="navbar-section"):
+          tdiv(class="input-group input-inline"):
+            input(class="search-input input-sm", `type`="text", placeholder="search")
+          button(class="btn btn-primary btn-sm"):
+            italic(class="fas fa-user-plus")
+            text " Sign up"
+          a(href="#login-modal"):
+            button(class="btn btn-primary btn-sm"):
+              italic(class="fas fa-sign-in-alt")
+              text " Log in"
+
+    # Modals
+    tdiv(class="modal modal-sm", id="login-modal"):
+      a(href="#", class="modal-overlay", "aria-label"="close")
+      tdiv(class="modal-container"):
+        tdiv(class="modal-header"):
+          a(href="#", class="btn btn-clear float-right", "aria-label"="close")
+          tdiv(class="modal-title h5"):
+            text "Log in"
+        tdiv(class="modal-body"):
+          tdiv(class="content"):
+            form():
+              tdiv(class="form-group"):
+                label(class="form-label", `for`="username"):
+                  text "Username"
+                input(class="form-input", `type`="text", id="username")
+              tdiv(class="form-group"):
+                label(class="form-label", `for`="password"):
+                  text "Password"
+                input(class="form-input", `type`="password", id="password")
+            button(class="btn btn-link"):
+              text "Reset your password"
+        tdiv(class="modal-footer"):
+          button(class="btn btn-primary"):
+            text "Log in"
+          button(class="btn"):
+            text "Create account"
+
 
 const appName = "/karax"
 type Params = Table[string, string]
diff --git a/redesign/nimforum.scss b/redesign/nimforum.scss
index 00925d6..a819796 100644
--- a/redesign/nimforum.scss
+++ b/redesign/nimforum.scss
@@ -60,12 +60,14 @@ $logo-height: $navbar-height - 20px;
   }
 
   // Unfortunately we must colour the controls in the navbar manually.
-  .form-input {
+  .search-input {
+    @extend .form-input;
     border-color: $navbar-border-color-dark;
   }
 
-  .form-input:focus {
+  .search-input:focus {
     box-shadow: none;
+    border-color: $navbar-border-color-dark;
   }
 
   .btn-primary {