Implement wizard setup

app/assets/js/start.js

@@ -126,4 +126,50 @@ $(function() {
         $('#banner-view').remove();
         $('input[name=remove_banner]').val('1');
     });
+
+    // Setup wizard
+    $('.wizard-next').on('click', function () {
+        var $form   = $('#setup-form'),
+            $btn    = $(this),
+            current = $btn.data('currentBlock'),
+            next    = $btn.data('nextBlock');
+
+        $btn.button('loading');
+
+        // Only validate going forward. If current group is invalid, do not go further
+        if (next > current) {
+            var url = '/setup/step' + current;
+            $.post(url, $form.serializeObject())
+                .done(function(response) {
+                    goForward(current, next);
+                })
+                .fail(function(response) {
+                    var errors = _.toArray(response.responseJSON.errors);
+                    _.each(errors, function(error) {
+                        (new CachetHQ.Notifier()).notify(error);
+                    });
+                })
+                .always(function() {
+                    $btn.button('reset');
+                });
+
+            return false;
+        }
+    });
+
+    function goForward(current, next) {
+        // validation was ok. We can go on next step.
+        $('.block-' + current)
+          .removeClass('show')
+          .addClass('hidden');
+
+        $('.block-' + next)
+          .removeClass('hidden')
+          .addClass('show');
+
+        $('.steps .step')
+            .removeClass("active")
+            .filter(":lt(" + (next) + ")")
+            .addClass("active");
+    }
 });

app/assets/sass/main.scss

@@ -22,6 +22,7 @@ html, body {
 
 // Styles for specific page
 @import "pages/login";
+@import "pages/setup";
 
 // Styles for plugins
 @import "plugins/messenger";

app/assets/sass/pages/_setup.scss

@@ -0,0 +1,66 @@
+.setup-page {
+    padding-top: 60px;
+    .logo {
+        display: block;
+        margin: 0 auto 30px;
+    }
+    .steps {
+        @extend .row;
+        margin: 0 auto;
+        border-radius: 2px 2px 0 0;
+        margin-bottom: 20px;
+        .step {
+            @extend .col-xs-4;
+            padding: 20px 0;
+            text-align: center;
+            position: relative;
+            font-size: 13px;
+            &:not(:last-child):after {
+                content: '';
+                position: absolute;
+                bottom: 31px;
+                left: 55%;
+                display: block;
+                height: 1px;
+                background: #94A1B8;
+                width: 100%;
+            }
+            span {
+                width: 23px;
+                height: 23px;
+                display: block;
+                position: relative;
+                margin: 0 auto;
+                margin-top: 13px;
+                border-radius: 25px;
+                background: $cachet-base-medium;
+                border: 1px solid #94A1B8;
+                -webkit-transition: all 0.2s linear;
+                -moz-transition: all 0.2s linear;
+                -ms-transition: all 0.2s linear;
+                -o-transition: all 0.2s linear;
+                transition: all 0.2s linear;
+            }
+
+            &.active {
+                span {
+                    background: $cachet-primary;
+                }
+            }
+        }
+    }
+    .setup-success {
+        text-align: center;
+        i {
+            font-size: 47px;
+        }
+        h3 {
+            margin-top: 25px;
+            font-size: 21px;
+            color: #556579;
+        }
+        .btn {
+            margin-top: 40px;
+        }
+    }
+}