Basic login and register forms. Simple bootstrap frontpage

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:

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, ->

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

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