24 files changed, 379 insertions, 149 deletions
diff --git a/src/404.jade b/src/404.jade
new file mode 100644
index 0000000..172c126
--- /dev/null
+++ b/src/404.jade
@@ -0,0 +1,9 @@
+extends ./include/layout-main.jade
+
+block menu
+  -var selected = ''
+
+block header
+  -var header_jumbotron = true
+  -var header_title = '404'
+  -var header_subtitle = 'Congrats. You did it: you broke my website.'
+\ No newline at end of file
diff --git a/src/about.jade b/src/about.jade
index 2c424d4..7781682 100644
--- a/src/about.jade
+++ b/src/about.jade
@@ -3,19 +3,19 @@ extends ./include/layout-main.jade
 block menu
   -var selected = '/about'
 
+block header
+  -var header_jumbotron = false
+  -var header_title = 'About'
+
 block content
   .row
-    .col-lg-6
-      h4 Subheading
-      p Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
-      h4 Subheading
-      p Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
-      h4 Subheading
-      p Maecenas sed diam eget risus varius blandit sit amet non magna.
-    .col-lg-6
-      h4 Subheading
-      p Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
-      h4 Subheading
-      p Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
-      h4 Subheading
-      p Maecenas sed diam eget risus varius blandit sit amet non magna.
-\ No newline at end of file
+    .col-lg-12: :markdown
+      Botleagues is an open source software solution with three aspects:
+      
+      * A Game Controller that lets software bots play games against each other (handled by Java)
+      * A semi-RESTful API that allows users to register, create competitions and play against other bots (with Laravel 4.2 and Dingo API)
+      * A front-end to the API (entirely client-side code, using Bootstrap and jade)
+      
+      You may find more information on [GitHub](https://github.com/camilstaps/Botleagues).
+
+      If you wish to contact the developers, please consider adding an issue on GitHub. If that's not what you want: you can reach us at info [at] camilstaps [dot] nl.
+\ No newline at end of file
diff --git a/src/css/bootswatch-lumen.less b/src/css/bootswatch-lumen.less
new file mode 100644
index 0000000..91e1dcb
--- /dev/null
+++ b/src/css/bootswatch-lumen.less
@@ -0,0 +1,3 @@
+.header {
+    margin-top: 6px;
+}
+\ No newline at end of file
diff --git a/src/css/bootswatch-superhero.less b/src/css/bootswatch-superhero.less
new file mode 100644
index 0000000..50e18c8
--- /dev/null
+++ b/src/css/bootswatch-superhero.less
@@ -0,0 +1,3 @@
+.text-muted {
+    color: #abc;
+}
+\ No newline at end of file
diff --git a/src/css/forms.less b/src/css/forms.less
index 233bde5..2a714ce 100644
--- a/src/css/forms.less
+++ b/src/css/forms.less
@@ -1,3 +1,13 @@
-label {
+#login-block {
+    display: none;
+
+    #login-form {
+        display: inline-block;
+        float: right;
+        margin-bottom: 0.5em;
+    }
+}
+
+form.form-register label {
     display: block;
 }
 \ No newline at end of file
diff --git a/src/css/general.less b/src/css/general.less
new file mode 100644
index 0000000..1218018
--- /dev/null
+++ b/src/css/general.less
@@ -0,0 +1,4 @@
+a.no-style {
+    color: inherit !important;
+    text-decoration: inherit !important;
+}
+\ No newline at end of file
diff --git a/src/css/profile.less b/src/css/profile.less
new file mode 100644
index 0000000..85d708c
--- /dev/null
+++ b/src/css/profile.less
@@ -0,0 +1,3 @@
+#banner-email {
+    font-size: 80%;
+}
+\ No newline at end of file
diff --git a/src/css/style.less b/src/css/style.less
deleted file mode 100644
index f32a0b2..0000000
--- a/src/css/style.less
+++ /dev/null
@@ -1 +0,0 @@
-@import 'forms.less';
-\ No newline at end of file
diff --git a/src/include/foot.jade b/src/include/foot.jade
index 1e383f2..4c8a7a1 100644
--- a/src/include/foot.jade
+++ b/src/include/foot.jade
@@ -2,4 +2,6 @@ script(src='/assets/js/script.js', type='text/javascript')
 script(src='/assets/js/Botleagues.js', type='text/javascript')
 script(src='/assets/js/BotleaguesCallback.js', type='text/javascript')
 script(src='/assets/js/BotleaguesFrontend.js', type='text/javascript')
-script(src='/assets/js/forms.js', type='text/javascript')
-\ No newline at end of file
+
+script(src='/assets/js/forms.js', type='text/javascript')
+script(src='/assets/js/main.js', type='text/javascript')
+\ No newline at end of file
diff --git a/src/include/layout-main.jade b/src/include/layout-main.jade
index 72331ee..12c283e 100644
--- a/src/include/layout-main.jade
+++ b/src/include/layout-main.jade
@@ -9,22 +9,59 @@ html(lang="en")
       block menu
         -var selected = '/'; //default
 
-      -var menu = { 'Home': '/', 'About': '/about', 'Contact': '/contact' };
+      -var menu = { 'Home': '/', 'About': '/about' };
 
       .header.clearfix
-        nav: ul.nav.nav-pills.pull-right
+        nav: ul.nav.nav-pills.pull-right#nav
           each val, key in menu
             if selected === val
               li.active(role='presentation'): a(href=val,title=key)= key
             else
               li(role='presentation'): a(href=val,title=key)= key
-        h3 Botleagues
+          li.login-link(role='presentation'): a.btn-botleagues-login(href='#',title='Login') Login
+        h3: a.no-style(href='/') Botleagues
 
       #messages
 
+      #login-block
+        form.form-inline#login-form(action='#',method='post')
+          .form-group
+            input.form-control#login-email(type='email',placeholder='Email')
+          | &nbsp;
+          .form-group
+            input.form-control#login-password(type='password',placeholder='Password')
+          | &nbsp;
+          .form-group
+            button.btn.btn-default.pull-right#login-submit(role='submit') Login
+        br(style='clear:both;')
+
+      -var header_jumbotron = false
+      block header
+
+      -if (header_jumbotron)
+        .jumbotron
+          h1= header_title
+          -if (header_subtitle)
+            p.lead= header_subtitle
+          p.row
+            block header_content
+      -else
+        .row
+          .col-lg-12
+            .bs-component
+              h1= header_title
+              -if (header_subtitle)
+                p.lead= header_subtitle
+              p.row
+                block header_content
+
       block content
 
       footer.footer: :markdown
         &copy; [ViviSoft](http://vivisoft.nl/) 2015
 
-    include ./foot.jade
-\ No newline at end of file
+    script(type='text/javascript')!= 'var selected_page = "' + selected + '";'
+
+    include ./foot.jade
+
+    block js
+\ No newline at end of file
diff --git a/src/index.jade b/src/index.jade
index f405884..a9e7ef5 100644
--- a/src/index.jade
+++ b/src/index.jade
@@ -3,22 +3,31 @@ extends ./include/layout-main.jade
 block menu
   -var selected = '/'
 
-block content
-  .jumbotron
-    h1 Welcome
-    p.lead Botleagues: write Java bots for different games, join competitions and win prizes!
-    p.row
-      a.btn.btn-lg.btn-success.pull-right(href='/register', role='button') Register now
+block header
+  -var header_jumbotron = true
+  -var header_title = 'Welcome'
+  -var header_subtitle = 'Botleagues: write Java bots for different games, join competitions and win prizes!'
+
+block header_content
+  a.btn.btn-lg.btn-success.pull-right(href='/register', role='button') Register now
 
+block content
   .row
-    .col-lg-6
+    .col-lg-4
+      h4 Subheading
+      p Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
+      h4 Subheading
+      p Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
+      h4 Subheading
+      p Maecenas sed diam eget risus varius blandit sit amet non magna.
+    .col-lg-4
       h4 Subheading
       p Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
       h4 Subheading
       p Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
       h4 Subheading
       p Maecenas sed diam eget risus varius blandit sit amet non magna.
-    .col-lg-6
+    .col-lg-4
       h4 Subheading
       p Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
       h4 Subheading
diff --git a/src/js/Botleagues.coffee b/src/js/Botleagues.coffee
new file mode 100644
index 0000000..06ace76
--- /dev/null
+++ b/src/js/Botleagues.coffee
@@ -0,0 +1,54 @@
+$.cookie.json = true
+
+@Botleagues =
+
+    url: 'https://api.local.botleagues.camilstaps.nl'
+
+    cookie_login_email: 'botleagues_login_email'
+    cookie_login_user_id: 'botleagues_login_user_id'
+    cookie_login_token: 'botleagues_login_token'
+    cookie_login_valid_till: 'botleagues_login_valid_till'
+
+    request: (user_options) ->
+        callback = user_options.callback
+
+        options =
+            method: 'GET'
+            dataType: 'json'
+            complete: (data) ->
+                callback data.responseJSON
+
+        url = Botleagues.url + '/' + user_options.endpoint
+        delete user_options.callback
+        delete user_options.endpoint
+
+        for key, option of user_options
+            options[key] = option
+
+        jQuery.ajax url, options
+
+        return
+
+    login: (email, password) ->
+        Botleagues.request
+            endpoint: 'user_token'
+            method: 'POST'
+            callback: BotleaguesCallback.login
+            headers:
+                'Authorization': 'Basic ' + btoa(email + ':' + password)
+
+        $.cookie Botleagues.cookie_login_email, email
+
+        return
+
+    logout: ->
+        Botleagues.clearLoginCookies()
+        window.location = '/'
+        return
+
+    clearLoginCookies: ->
+        $.removeCookie Botleagues.cookie_login_email
+        $.removeCookie Botleagues.cookie_login_user_id
+        $.removeCookie Botleagues.cookie_login_token
+        $.removeCookie Botleagues.cookie_login_valid_till
+        return
+\ No newline at end of file
diff --git a/src/js/Botleagues.js b/src/js/Botleagues.js
deleted file mode 100644
index f9d34b7..0000000
--- a/src/js/Botleagues.js
+++ /dev/null
@@ -1,26 +0,0 @@
-function Botleagues(){}
-
-Botleagues.url = 'https://api.local.botleagues.camilstaps.nl';
-
-Botleagues.request = function(user_options, callback) {
-    var options = {
-        endpoint: null,
-        method: 'GET',
-        dataType: 'json',
-        complete: function(data) {
-            callback(data.responseJSON);
-        }
-    };
-    for (var name in user_options) {
-        options[name] = user_options[name];
-    }
-
-    var url = Botleagues.url + '/' + options['endpoint'];
-    delete options['endpoint'];
-
-    jQuery.ajax(url, options);
-};
-
-Botleagues.redirect = function(user_options) {
-    window.location = Botleagues.url + '/' + user_options['endpoint'];
-};
-\ No newline at end of file
diff --git a/src/js/BotleaguesCallback.coffee b/src/js/BotleaguesCallback.coffee
new file mode 100644
index 0000000..a02ee59
--- /dev/null
+++ b/src/js/BotleaguesCallback.coffee
@@ -0,0 +1,52 @@
+@BotleaguesCallback =
+
+    register: (data) ->
+        $ 'form.form-register .form-group'
+            .removeClass 'has-feedback has-success has-warning has-error'
+            .find '.form-control-feedback'
+            .remove()
+
+        if data.error?
+            BotleaguesFrontend.error
+                message: data.error
+                prepend_to: $ 'form.form-register'
+
+            for key, msgs of data.errors
+                error_msg = msgs.join '; '
+
+                $('#register-' + key)
+                    .attr 'title', error_msg
+                    .parent()
+                    .addClass 'has-feedback has-error'
+                    .append(
+                        $ '<span>'
+                            .addClass 'glyphicon glyphicon-remove form-control-feedback'
+                            .attr 'aria-hidden', true
+                    )
+                    .find 'label'
+                    .append(
+                        $ '<span>'
+                            .addClass 'pull-right text-danger'
+                            .text error_msg
+                    )
+
+        return
+
+    login: (data) ->
+        if data.user_token?
+            BotleaguesFrontend.success
+                message: 'Login successful! Refreshing the page...'
+
+            $.cookie Botleagues.cookie_login_user_id, data.user_token.userId
+            $.cookie Botleagues.cookie_login_token, data.user_token.token
+            $.cookie Botleagues.cookie_login_valid_till, (new Date()).getTime() + Date.parse(data.user_token.valid_till) - Date.parse(data.user_token.updated_at)
+
+            window.setTimeout (-> window.location = 'profile'), 1000
+
+        else
+            BotleaguesFrontend.error
+                message: if data.error? then data.error else "Could not login."
+
+            $.removeCookie Botleagues.cookie_login_email
+
+        return
+\ No newline at end of file
diff --git a/src/js/BotleaguesCallback.js b/src/js/BotleaguesCallback.js
deleted file mode 100644
index f162e7c..0000000
--- a/src/js/BotleaguesCallback.js
+++ /dev/null
@@ -1,32 +0,0 @@
-function BotleaguesCallback(){}
-
-BotleaguesCallback.register = function(data) {
-    $('form.form-register .form-group')
-        .removeClass('has-feedback has-success has-warning, has-error')
-        .find('.form-control-feedback').remove();
-
-    if (typeof data.error !== 'undefined') {
-        BotleaguesFrontend.error({message: data.error, prepend_to: $('form.form-register')});
-        if (typeof data.errors !== 'undefined') {
-            for (var key in data.errors) {
-                var error_msg = data.errors[key].join('; ');
-
-                $('#register-' + key)
-                    .attr('title', error_msg)
-                    .parent()
-                    .addClass('has-feedback has-error')
-                    .append(
-                        $('<span>')
-                            .addClass('glyphicon glyphicon-remove form-control-feedback')
-                            .attr('aria-hidden', true)
-                    )
-                    .find('label')
-                    .append(
-                        $('<span>')
-                            .addClass('pull-right text-danger')
-                            .text(error_msg)
-                    );
-            }
-        }
-    }
-};
-\ No newline at end of file
diff --git a/src/js/BotleaguesFrontend.coffee b/src/js/BotleaguesFrontend.coffee
new file mode 100644
index 0000000..5c2d116
--- /dev/null
+++ b/src/js/BotleaguesFrontend.coffee
@@ -0,0 +1,42 @@
+@BotleaguesFrontend =
+    
+    message: (user_options) ->
+        options =
+            dismissable: true
+            prepend_to: $ '#messages'
+            type: 'info'
+
+        for key, option of user_options
+            options[key] = option
+
+        html = '<div class="alert alert-' + options.type + '">'
+        if options.dismissable
+            html += '<a href="#" class="close" data-dismiss="alert">&times;</a>'
+        html += options.message
+        html += '</div>'
+
+        html = $ html
+        html
+            .hide()
+            .prependTo options.prepend_to
+            .slideDown()
+            .delay 3000
+            .fadeOut()
+            .queue html.remove
+
+        return
+
+    error: (user_options) ->
+        user_options.type = 'danger'
+        BotleaguesFrontend.message user_options
+
+    danger: (user_options) ->
+        BotleaguesFrontend.error user_options
+
+    success: (user_options) ->
+        user_options.type = 'success'
+        BotleaguesFrontend.message user_options
+
+    warning: (user_options) ->
+        user_options.type = 'warning'
+        BotleaguesFrontend.message user_options
+\ No newline at end of file
diff --git a/src/js/BotleaguesFrontend.js b/src/js/BotleaguesFrontend.js
deleted file mode 100644
index e9ab570..0000000
--- a/src/js/BotleaguesFrontend.js
+++ /dev/null
@@ -1,28 +0,0 @@
-function BotleaguesFrontend(){}
-
-BotleaguesFrontend.error = function(user_options) {
-    options = {
-        dismissable: true,
-        prepend_to: $('#messages'),
-        type: 'danger'
-    };
-    for (var key in user_options) {
-        options[key] = user_options[key];
-    }
-
-    var html = '<div class="alert alert-' + options.type + '">';
-    if (options.dismissable === true)
-        html += '<a href="#" class="close" data-dismiss="alert">&times;</a>';
-    html += options.message;
-    html += '</div>';
-
-    html = $(html);
-
-    html.prependTo(options.prepend_to).delay(3000).fadeOut().queue(html.remove);
-};
-
-BotleaguesFrontend.login = function() {
-    Botleagues.redirect({
-        endpoint: 'user/login?redirect=http://local.botleagues.camilstaps.nl/'
-    });
-};
-\ No newline at end of file
diff --git a/src/js/forms.coffee b/src/js/forms.coffee
new file mode 100644
index 0000000..fe237c2
--- /dev/null
+++ b/src/js/forms.coffee
@@ -0,0 +1,33 @@
+# Request API for registering
+$ 'form.form-register'
+    .submit ->
+        Botleagues.request
+            endpoint: 'user'
+            method: 'POST'
+            data:
+                email: 
+                    $ this
+                    .find 'input[name="email"]'
+                    .val()
+                password: 
+                    $ this
+                    .find 'input[name="password"]'
+                    .val()
+            callback: BotleaguesCallback.register
+
+        false
+
+# Show login form on click
+$ '.btn-botleagues-login'
+    .focus ->
+        $ '#login-block'
+            .slideDown()
+        $ '#login-email'
+            .focus()
+        false
+
+# Request API for logging in
+$ '#login-form'
+    .submit ->
+        Botleagues.login ($ '#login-email').val(), ($ '#login-password').val()
+        false
+\ No newline at end of file
diff --git a/src/js/forms.js b/src/js/forms.js
deleted file mode 100644
index 24f0f43..0000000
--- a/src/js/forms.js
+++ /dev/null
@@ -1,12 +0,0 @@
-$('form.form-register').submit(function(){
-    Botleagues.request({
-        endpoint: 'user',
-        method: 'POST',
-        data: {
-            email: $(this).find('input[name="email"]').val(),
-            password: $(this).find('input[name="password"]').val()
-        }
-    }, BotleaguesCallback.register);
-
-    event.preventDefault();
-});
-\ No newline at end of file
diff --git a/src/js/main.coffee b/src/js/main.coffee
new file mode 100644
index 0000000..5d21ede
--- /dev/null
+++ b/src/js/main.coffee
@@ -0,0 +1,31 @@
+$ -> 
+    # Show extra links if user is logged in
+    email = $.cookie Botleagues.cookie_login_email
+    setupLoginMenu() if email? && $.cookie(Botleagues.cookie_login_valid_till) > (new Date()).getTime()
+    return
+
+# Show extra links if user is logged in
+setupLoginMenu = ->
+    $ '#nav .login-link'
+        .remove()
+
+    extra_links = 
+        'Leagues': '/leagues'
+        'My Bots': '/profile/bots'
+        'Profile': '/profile'
+        'Logout': '/logout'
+
+    for title, link of extra_links
+        li = $ '<li>'
+                .append(
+                    $ '<a>'
+                        .attr 'role', 'presentation'
+                        .attr 'title', title
+                        .attr 'href', link
+                        .text title
+                )
+        if link == selected_page
+            li.addClass 'active'
+        li.appendTo ($ '#nav')
+
+    return
+\ No newline at end of file
diff --git a/src/js/profile.coffee b/src/js/profile.coffee
new file mode 100644
index 0000000..7942088
--- /dev/null
+++ b/src/js/profile.coffee
@@ -0,0 +1,17 @@
+$ ->
+    # Show email address in page when logged in
+    setupGreeter()
+    return
+
+# Show email address in page when logged in
+setupGreeter = ->
+    $ '.jumbotron .lead'
+        .append (' ' + $.cookie Botleagues.cookie_login_email)
+    $ '.header h3'
+        .append(
+            $ '<span>'
+                .attr 'id', 'banner-email'
+                .addClass 'text-muted'
+                .text(' / ' + $.cookie Botleagues.cookie_login_email)
+        )
+    return
+\ No newline at end of file
diff --git a/src/logout.jade b/src/logout.jade
new file mode 100644
index 0000000..14c9aac
--- /dev/null
+++ b/src/logout.jade
@@ -0,0 +1,10 @@
+extends ./include/layout-main.jade
+
+block menu
+  -var selected = '/logout'
+
+block content
+  p Logging you out...
+
+block js
+  script(type='text/javascript') $(document).ready(function(){ Botleagues.logout(); });
+\ No newline at end of file
diff --git a/src/profile.jade b/src/profile.jade
new file mode 100644
index 0000000..5b97b30
--- /dev/null
+++ b/src/profile.jade
@@ -0,0 +1,12 @@
+extends ./include/layout-main.jade
+
+block menu
+  -var selected = '/profile'
+
+block header
+  -var header_jumbotron = true
+  -var header_title = 'Welcome back'
+  -var header_subtitle = "You're logged in as"
+
+block js
+  script(src='/assets/js/profile.js', type='text/javascript')
+\ No newline at end of file
diff --git a/src/register.jade b/src/register.jade
index 8f79715..ca8cc83 100644
--- a/src/register.jade
+++ b/src/register.jade
@@ -3,28 +3,26 @@ extends ./include/layout-main.jade
 block menu
   -var selected = '/register'
 
+block header
+  -var header_title = 'Register'
+
 block content
   .row
     .col-lg-6
-      h4 Register
-      form.form-register(action='#')
-        .form-group
-          label(for="register-email") Email
-          input.form-control#register-email(type='email',name='email',placeholder="Enter email")
-        .form-group
-          label(for="register-password") Password
-          input.form-control#register-password(type='password',name='password',placeholder="Enter password")
-        .form-group
-          label(for="register-password2") Password (confirmation)
-          input.form-control#register-password2(type='password',name='password',placeholder="Enter password again")
-        .checkbox: label
-          input#accepts-toc(type='checkbox',name="accepts-toc")
-          | I accept the terms and conditions
-        button.btn.btn-lg.btn-success.pull-right(type='submit') Register
-    .col-lg-6
-      h4 Subheading
-      p Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
-      h4 Subheading
-      p Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
-      h4 Subheading
-      p Maecenas sed diam eget risus varius blandit sit amet non magna.
-\ No newline at end of file
+      div.well.bs-component
+        h4 Register
+        form.form-register(action='#')
+          .form-group
+            label(for="register-email") Email
+            input.form-control#register-email(type='email',name='email',placeholder="Enter email")
+          .form-group
+            label(for="register-password") Password
+            input.form-control#register-password(type='password',name='password',placeholder="Enter password")
+          .form-group
+            label(for="register-password2") Password (confirmation)
+            input.form-control#register-password2(type='password',name='password',placeholder="Enter password again")
+          .checkbox: label
+            input#accepts-toc(type='checkbox',name="accepts-toc")
+            | I accept the terms and conditions
+          button.btn.btn-lg.btn-success.pull-right(type='submit') Register
+          br(style='clear:both;')
+\ No newline at end of file