Merge branch 'frontend-only' of ../../Botleagues_old

16 files changed, 473 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..de3532b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+bower_components/*
+node_modules/*
+build/*
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..ea0dd59
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,22 @@
+{
+  "name": "Botleagues Client",
+  "version": "0.0.0",
+  "homepage": "https://github.com/camilstaps/Botleagues",
+  "authors": [
+    "Camil Staps <info@camilstaps.nl>"
+  ],
+  "license": "GPL v3.0",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "build"
+  ],
+  "dependencies": {
+    "bootstrap": "~3.3.2",
+    "bootswatch": "~3.3.4+1",
+    "fontawesome": "~4.3.0",
+    "jquery-cookie": "~1.4.1"
+  }
+}
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..a3c28e1
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,181 @@
+// see https://github.com/tugberkugurlu/gulp-bootswatch-sample/
+
+var gulp = require('gulp'),
+    changed = require('gulp-changed'),
+    concat = require('gulp-concat'),
+    debug = require('gulp-debug'),
+    foreach = require('gulp-foreach'),
+    gulpif = require('gulp-if'),
+    gutil = require('gulp-util'),
+    imagemin = require('gulp-imagemin'),
+    jade = require('gulp-jade'),
+    jshint = require('gulp-jshint'),
+    less = require('gulp-less'),
+    minifycss = require('gulp-minify-css'),
+    minifyhtml = require('gulp-minify-html'),
+    order = require('gulp-order'),
+    rename = require('gulp-rename'),
+    stripdebug = require('gulp-strip-debug'),
+    uglify = require('gulp-uglify'),
+    path = require('path'),
+    merge = require('merge-stream'),
+    del = require('del');
+
+var bootswatch_theme = 'superhero';
+
+var production = false;
+
+gulp.task('default', [], function() {
+    gulp.start('styles', 'scripts', 'images', 'jade');
+});
+
+gulp.task('all', [], function() {
+    gulp.start('fonts', 'styles', 'scripts', 'images', 'jade');
+});
+
+gulp.task('rebuild', ['clean'], function() {
+    gulp.start('all');
+});
+
+gulp.task('clean', function(cb) {
+    del(['./build/assets/css', './build/assets/js', './build/assets/less', './build/assets/img', './build/assets/fonts', './build/*.html'], cb)
+});
+
+gulp.task('fonts', function() {
+    
+    var fileList = [
+        './bower_components/bootstrap/dist/fonts/*', 
+        './bower_components/fontawesome/fonts/*'
+    ];
+
+    var dst = './build/assets/fonts';
+    
+    return gulp.src(fileList)
+        .pipe(changed(dst))
+        .pipe(gulp.dest(dst));
+});
+
+gulp.task('styles', function() {
+    
+    var baseContent = 
+        '@import "./bower_components/bootstrap/less/bootstrap.less";' + 
+        '@import "./bower_components/bootswatch/' + bootswatch_theme + '/variables.less";' + 
+        '@import "./bower_components/bootswatch/' + bootswatch_theme + '/bootswatch.less";' + 
+        '@import "./bower_components/bootstrap/less/utilities.less";';
+    
+    var isBootswatchFile = function(file) {
+        var suffix = 'bootswatch.less';
+        return file.path.indexOf(suffix, file.path.length - suffix.length) !== -1;
+    }
+    
+    var isBootstrapFile = function(file) {
+        var suffix = 'bootstrap-',
+            fileName = path.basename(file.path);
+        
+        return fileName.indexOf(suffix) == 0;
+    }
+    
+    var fileList = [
+        './bower_components/bootswatch/' + bootswatch_theme + '/bootswatch.less', 
+        './bower_components/fontawesome/css/font-awesome.css',
+        './src/css/style.less'
+    ];
+
+    var dst = './build/assets/css';
+    var bootswatch_dst = 'bootswatch.css';
+    
+    return gulp.src(fileList)
+        .pipe(changed(dst, {extension: '.css', destination: function(file){
+            if (isBootswatchFile(file)) {
+                return 'bootswatch.css';
+            } else {
+                return file;
+            }
+        }}))
+        .pipe(gulpif(isBootswatchFile, foreach(function(stream, file) {
+            var themeName = path.basename(path.dirname(file.path)),
+                content = replaceAll(baseContent, bootswatch_theme, themeName),
+                file = string_src('bootstrap-' +  themeName + '.less', content);
+
+            return file;
+        })))
+        .pipe(less())
+        .pipe(gulpif(isBootstrapFile, foreach(function(stream, file) {
+            var fileName = path.basename(file.path),
+                themeName = fileName.substring(fileName.indexOf('-') + 1, fileName.indexOf('.'));
+            
+            // http://stackoverflow.com/questions/21719833/gulp-how-to-add-src-files-in-the-middle-of-a-pipe
+            // https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md
+            return merge(stream, gulp.src(['./build/assets/css/font-awesome.css', './build/assets/css/main.css']))
+                .pipe(concat('bootswatch.css'))
+                .pipe(gulp.dest(dst))
+                .pipe(rename({suffix: '.min'}))
+                .pipe(minifycss());
+        })))
+        .pipe(minifycss())
+        .pipe(gulp.dest(dst));
+});
+
+gulp.task('scripts', function(){
+    var fileList = [
+        './bower_components/jquery/dist/jquery.min.js',
+        './bower_components/bootstrap/dist/js/bootstrap.min.js',
+        './bower_components/jquery-cookie/jquery.cookie.js'
+    ];
+
+    var dst = './build/assets/js';
+
+    gulp.src(fileList)
+        .pipe(changed(dst, {destination: 'script.js'}))
+        .pipe(concat('script.js'))
+        .pipe(stripdebug())
+        .pipe(uglify())
+        .pipe(gulp.dest(dst));
+
+    var src = './src/js/*.js';
+
+    gulp.src(src)
+        .pipe(changed(dst))
+        .pipe(gulpif(production, stripdebug()))
+        .pipe(uglify())
+        .pipe(gulp.dest(dst));
+});
+
+gulp.task('images', function(){
+    var src = './src/img/**/*',
+        dst = './build/img';
+
+    gulp.src(src)
+        .pipe(changed(dst))
+        .pipe(imagemin())
+        .pipe(gulp.dest(dst));
+});
+
+gulp.task('jade', function(){
+    var src = './src/*.jade',
+        dst = './build';
+
+    gulp.src(src)
+        .pipe(changed(dst, {extension: 'html'}))
+        .pipe(jade())
+        .pipe(minifyhtml())
+        .pipe(gulp.dest(dst));
+});
+
+// http://stackoverflow.com/questions/1144783/replacing-all-occurrences-of-a-string-in-javascript
+function escapeRegExp(string) {
+    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
+}
+
+function replaceAll(string, find, replace) {
+  return string.replace(new RegExp(escapeRegExp(find), 'g'), replace);
+}
+
+function string_src(filename, string) {
+  var src = require('stream').Readable({ objectMode: true })
+  src._read = function () {
+    this.push(new gutil.File({ cwd: "", base: "", path: filename, contents: new Buffer(string) }))
+    this.push(null)
+  }
+  return src
+}
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d5c122a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "Botleagues",
+  "version": "0.0.0",
+  "description": "",
+  "main": ".",
+  "dependencies": {},
+  "devDependencies": {
+    "del": "^1.1.1",
+    "gulp": "^3.8.11",
+    "gulp-autoprefixer": "^2.1.0",
+    "gulp-changed": "~1.2.1",
+    "gulp-concat": "~2.5.2",
+    "gulp-debug": "^2.0.0",
+    "gulp-foreach": "^0.1.0",
+    "gulp-if": "^1.2.5",
+    "gulp-imagemin": "~2.2.1",
+    "gulp-jade": "~1.0.0",
+    "gulp-jshint": "^1.9.2",
+    "gulp-less": "^3.0.0",
+    "gulp-minify-css": "^0.4.5",
+    "gulp-minify-html": "~1.0.2",
+    "gulp-order": "^1.1.1",
+    "gulp-rename": "^1.2.0",
+    "gulp-strip-debug": "~1.0.2",
+    "gulp-uglify": "~1.2.0",
+    "gulp-util": "^3.0.3",
+    "markdown-js": "0.0.3",
+    "merge-stream": "^0.1.7"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/camilstaps/Botleagues"
+  },
+  "author": "Camil Staps <info@camilstaps.nl>",
+  "license": "GPL v3.0",
+  "bugs": {
+    "url": "https://github.com/camilstaps/Botleagues/issues"
+  },
+  "homepage": "https://github.com/camilstaps/Botleagues"
+}
diff --git a/src/about.jade b/src/about.jade
new file mode 100644
index 0000000..2c424d4
--- /dev/null
+++ b/src/about.jade
@@ -0,0 +1,21 @@
+extends ./include/layout-main.jade
+
+block menu
+  -var selected = '/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
diff --git a/src/css/forms.less b/src/css/forms.less
new file mode 100644
index 0000000..233bde5
--- /dev/null
+++ b/src/css/forms.less
@@ -0,0 +1,3 @@
+label {
+    display: block;
+}
\ No newline at end of file
diff --git a/src/css/style.less b/src/css/style.less
new file mode 100644
index 0000000..f32a0b2
--- /dev/null
+++ b/src/css/style.less
@@ -0,0 +1 @@
+@import 'forms.less';
\ No newline at end of file
diff --git a/src/include/foot.jade b/src/include/foot.jade
new file mode 100644
index 0000000..1e383f2
--- /dev/null
+++ b/src/include/foot.jade
@@ -0,0 +1,5 @@
+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
diff --git a/src/include/head.jade b/src/include/head.jade
new file mode 100644
index 0000000..b3b12e4
--- /dev/null
+++ b/src/include/head.jade
@@ -0,0 +1,9 @@
+title Botleagues
+
+meta(charset='utf-8')
+meta(http-equiv='X-UA-Compatible', content='IE=edge')
+meta(name='viewport', content='width=device-width, initial-scale=1')
+
+link(rel='stylesheet', href='/assets/css/bootswatch.css', type='text/css')
+link(rel='stylesheet', href='/assets/css/font-awesome.css', type='text/css')
+link(rel='stylesheet', href='/assets/css/style.css', type='text/css')
\ No newline at end of file
diff --git a/src/include/layout-main.jade b/src/include/layout-main.jade
new file mode 100644
index 0000000..72331ee
--- /dev/null
+++ b/src/include/layout-main.jade
@@ -0,0 +1,30 @@
+doctype html
+html(lang="en")
+  head
+    include ./head.jade
+    
+  body
+    .container
+
+      block menu
+        -var selected = '/'; //default
+
+      -var menu = { 'Home': '/', 'About': '/about', 'Contact': '/contact' };
+
+      .header.clearfix
+        nav: ul.nav.nav-pills.pull-right
+          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
+
+      #messages
+
+      block content
+
+      footer.footer: :markdown
+        &copy; [ViviSoft](http://vivisoft.nl/) 2015
+
+    include ./foot.jade
\ No newline at end of file
diff --git a/src/index.jade b/src/index.jade
new file mode 100644
index 0000000..f405884
--- /dev/null
+++ b/src/index.jade
@@ -0,0 +1,27 @@
+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
+
+  .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
diff --git a/src/js/Botleagues.js b/src/js/Botleagues.js
new file mode 100644
index 0000000..f9d34b7
--- /dev/null
+++ b/src/js/Botleagues.js
@@ -0,0 +1,26 @@
+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.js b/src/js/BotleaguesCallback.js
new file mode 100644
index 0000000..f162e7c
--- /dev/null
+++ b/src/js/BotleaguesCallback.js
@@ -0,0 +1,32 @@
+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.js b/src/js/BotleaguesFrontend.js
new file mode 100644
index 0000000..e9ab570
--- /dev/null
+++ b/src/js/BotleaguesFrontend.js
@@ -0,0 +1,28 @@
+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.js b/src/js/forms.js
new file mode 100644
index 0000000..24f0f43
--- /dev/null
+++ b/src/js/forms.js
@@ -0,0 +1,12 @@
+$('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/register.jade b/src/register.jade
new file mode 100644
index 0000000..8f79715
--- /dev/null
+++ b/src/register.jade
@@ -0,0 +1,30 @@
+extends ./include/layout-main.jade
+
+block menu
+  -var selected = '/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