From 6cfacc6ec97dfe624d186a7232ac1633a76b179a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 13 Dec 2018 17:07:58 +0100
Subject: [PATCH] Basic login and register forms. Simple bootstrap frontpage

---
 docker-compose.yml |  1 +
 server.coffee      |  6 ++---
 src/index.coffee   | 48 ++++++++++++++++++++++++++++++++++-----
 views/index.pug    | 56 ++++++++++++++++++++++++++++++++++++----------
 4 files changed, 91 insertions(+), 20 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 0d4e427..ce4ec78 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -7,6 +7,7 @@ services:
     restart: "no"
     volumes:
       - "${PWD}/src:/app/src"
+      - "${PWD}/views:/app/views:ro"
       - "${PWD}/public_html:/app/public_html"
       - "${PWD}/fftcg.db:/app/fftcg.db"
     ports:
diff --git a/server.coffee b/server.coffee
index 503daf0..c47aa47 100644
--- a/server.coffee
+++ b/server.coffee
@@ -33,9 +33,9 @@ io.on 'connection', (socket) ->
     console.log 'a user disconnected'
     return
 
-  socket.on 'login', (msg) ->
-    console.log 'message:', msg.uname, msg.password
-    fftcgdb.adduser msg.uname, msg.password
+  socket.on 'login', (uname, password) ->
+    console.log 'message:', uname, password
+    fftcgdb.adduser uname, password
 
 # Create server
 web.listen 3000, ->
diff --git a/src/index.coffee b/src/index.coffee
index df09196..b7cdaf8 100644
--- a/src/index.coffee
+++ b/src/index.coffee
@@ -12,10 +12,48 @@ $ ->
   # init Socket.IO
   socket = io()
 
-  $('form[name="fftcg-login"]').submit ->
-    data =
-      uname:    $('input[name="uname"]').val()
-      password: $('input[name="password"]').val()
+
+  # login form
+  $('form[name="login"]').submit ->
+    # gather form data
+    uname = $('input[name="uname"]', @)
+    password = $('input[name="password"]', @)
+
+    # transmit form data
+    socket.emit 'login', uname.val(), password.val()
+    console.log 'emitted "login", "%s", "%s"', uname.val(), password.val()
+
+    # reset form
     @reset()
-    socket.emit 'login', data
+    # inhibit actual submission
+    false
+
+  # register form
+  $('form[name="register"]').submit ->
+    # gather form data
+    uname = $('input[name="uname"]', @)
+    password = $('input[name="password"]', @)
+    confirm = $('input[name="confirm"]', @)
+
+    # check form data
+    if password.val() == confirm.val()
+
+      # transmit form data
+      socket.emit 'register', uname.val(), password.val()
+      console.log 'emitted "register", "%s", "%s"', uname.val(), password.val()
+
+      # reset form
+      $('input', @).each ->
+        $(@).removeClass 'is-invalid'
+        $(@).removeClass 'is-valid'
+        return
+
+      @reset()
+
+    else
+      confirm.val ''
+      confirm.addClass 'is-invalid'
+      confirm.focus()
+
+    # inhibit actual submission
     false
diff --git a/views/index.pug b/views/index.pug
index f6c5528..be30e71 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -1,18 +1,50 @@
 doctype html
 html
+  
   head
     title Crafty Things
     script(src='/index.bundle.js')
+    
   body
-    h1 Hello World!
-    h2 App under development, please don't send valuable data!
-    form(name="fftcg-login" method="post" action="#")
-      fieldset
-        legend Login-Details
-        div
-          label(for="uname") Username:
-          input(name="uname" required) 
-          label(for="password") Password:
-          input(name="password", type="password", placeholder="6 digits, a combination of numbers and letters" required)
-        div
-          input(name="login" type="submit" value="Login") 
+    
+    header.jumbotron.jumbotron-fluid.py-4.bg-primary.text-light.text-center
+      div.container
+        h1 Hello World!
+        h2 App under development, please don't send valuable data!
+      
+    div.container
+      div.row
+        
+        div.col-md-6
+          h3 Yavook!FFTCG
+          p Lorem ipsum dolor sit amet
+        
+        div.col-md-3
+          h3 Login
+          form(name="login")
+            div.form-group
+              label(for="uname") User name:
+              input.form-control(name="uname" required)
+                
+            div.form-group
+              label(for="password") Password:
+              input.form-control(name="password" type="password" required)
+                
+            div.form-group
+              button.btn.btn-primary(type="submit") Login
+              
+        div.col-md-3
+          h3 Register
+          form(name="register")
+            div.form-group
+              label(for="uname") User name:
+              input.form-control(name="uname" required)
+              div.invalid-feedback User name not available.
+              
+            div.form-group
+              label(for="password") Password:
+              input.form-control(name="password" type="password" required)
+              label(for="confirm") Confirm password:
+              input.form-control(name="confirm" type="password")
+                
+            button.btn.btn-primary(type="submit") Register