Updated event form to allow for time input

api/event/event.model.js

@@ -24,7 +24,10 @@ var EventSchema = new Schema({
     },
     updated : Date,
     title : String,
-    dates : [Date],
+    dates : [{
+        date : Date,
+        times : [Date]
+    }],
     emails : [{
         email : String
     }],
@@ -43,7 +46,7 @@ var EventSchema = new Schema({
     participants : [{
         id : Schema.Types.ObjectId,
         name : String,
-        dates : [Boolean]
+        votes : [Date]
     }],
     isClosed : {
         type : Boolean,

bower.json

@@ -24,6 +24,7 @@
     "jquery": "~2.1.3",
     "angular-hotkeys": "~0.2.2",
     "ng-tags-input": "2.1.1",
-    "angular-animate": "~1.3.10"
+    "angular-animate": "~1.3.10",
+    "datejs": "~1.0.0-rc3"
   }
 }

public/js/controllers/newevent.controller.js

@@ -3,9 +3,26 @@ angular.module('rallly')
 
     $scope.title = "Schedule a New Event";
     $scope.description = "Fill in the form below to create your event and share it with your friends and colleagues.";
+    $scope.event = {};
+
+    var states = [
+        'newevent.general',
+        'newevent.datetime',
+        'newevent.invite'
+    ];
+
+    $scope.page = 1;
+
+    var goTo = function(page){
+        $scope.page = page;
+        $state.go(states[page-1]);
+    }
+
+    goTo($scope.page);
+
 
     $scope.submit = function(){
-        if ($scope.form.$valid){
+        if ($scope.form.$valid && $scope.page == states.length){
             $http.post('/api/event', $scope.event)
             .success(function(event, status, headers, config){
                 $scope.event = event;
@@ -14,6 +31,8 @@ angular.module('rallly')
                 }, {
                     absolute : true
                 });
+                $scope.page++;
+                $state.go('newevent.success');
             })
             .error(function(){
                 var modal = new ConfirmModal({
@@ -22,6 +41,9 @@ angular.module('rallly')
                     cancelText : 'OK'
                 });
             });
+        } else if ($scope.form.$valid) {
+            $scope.form.$setPristine();
+            $scope.nextPage();
         } else {
             var notification = new Notification({
                 title : 'Not so fast',
@@ -31,5 +53,12 @@ angular.module('rallly')
         }
     }
 
-    $scope.clearDates = null
+    $scope.nextPage = function(){
+        goTo($scope.page+1);
+    }
+
+    $scope.prevPage = function(){
+        goTo($scope.page-1);
+    }
+
 });

public/js/directives/datepicker.directive.js

@@ -1,5 +1,5 @@
 angular.module('rallly')
-.directive('datepicker', function(){
+.directive('datepicker', function(DatePickerService){
     return {
         restrict : 'A',
         require : 'ngModel',
@@ -8,34 +8,36 @@ angular.module('rallly')
             control : '='
         },
         link : function(scope, el, attrs, ngModel){
-            scope.model = scope.model || [];
+            var dateService  = new DatePickerService(scope.model),
+                dateBuffer = dateService.getDatesArray();
+
             angular.element(el).datepicker({
                 multidate : true,
                 todayHighlight: true
             })
             .on('changeDate', function(e){
-                var dates = e.dates;
+                var datePickerDates = e.dates;
-                dates.sort(function(a, b){
+                if (datePickerDates.length > dateBuffer.length) {
-                    if (a.getTime() > b.getTime()) return true;
+                    var dateAdded = datePickerDates[datePickerDates.length-1];
-                    return false;
+                    dateService.addDate(dateAdded);
-                });
+                } else {
-                ngModel.$setViewValue(dates, e);
+                    var dateRemoved = dateService.diffDates(dateBuffer, datePickerDates);
-            });
+                    if (dateRemoved)
-
+                        dateService.removeDate(dateRemoved);
-            var update = function(modelValue, oldValue){
-                if (!modelValue || !oldValue || (modelValue.length == oldValue.length)) return;
-                var dates = [];
-                for (var i = 0; i < modelValue.length; i++){
-                    dates.push(new Date(modelValue[i]));
                 }
-                angular.element(el).datepicker('setDates', dates);
+                ngModel.$setViewValue(dateService.getDates())
-            }
+                dateBuffer = datePickerDates;
-            scope.$watchCollection('model', update);
+            });
-
             scope.control = scope.control || {};
+            scope.$watchCollection('model', function(newValue, oldValue){
+                var datePickerDates = angular.element(el).datepicker('getDates');
+                var modelDates = dateService.getDatesArray();
+                if (datePickerDates.length != modelDates.length){
+                    angular.element(el).datepicker('setDates', modelDates);
+                }
+            });
             scope.control.unsetDate = function(date){
-                var index = scope.model.indexOf(date);
+                dateService.removeDate(date);
-                scope.model.splice(index, 1);
             }
 
             ngModel.$validators.required = function(modelValue, viewValue){
@@ -47,4 +49,47 @@ angular.module('rallly')
 
         }
     }
+})
+.service('DatePickerService', function(){
+    return function(defaultStore){
+
+        var store = defaultStore || [];
+
+        this.addDate = function(date){
+            store.push({ date : date });
+            store.sort(function(a, b){
+                if (Date.compare(a.date, b.date) > 0) return true;
+                return false;
+            });
+        }
+        this.removeDate = function(date){
+            for (var i = 0; i < store.length; i++){
+                if (Date.equals(store[i].date, date)){
+                    store.splice(i,1);
+                }
+            }
+        }
+        this.getDates = function(){
+            return (store.length > 0) ? store : null;
+        }
+        this.getDatesArray = function(){
+            var dates = [];
+            for (var i = 0; i < store.length; i++){
+                dates.push(store[i].date);
+            }
+            return dates;
+        }
+        this.diffDates = function(bigArr, smallArr){
+            var shouldReturn = true;
+            for (var i = 0; i < bigArr.length; i++){
+                shouldReturn = true;
+                for (var j = 0; j < smallArr.length; j++) {
+                    if (Date.equals(bigArr[i], smallArr[j])) {
+                        shouldReturn = false;
+                    }
+                }
+                if (shouldReturn) return bigArr[i];
+            }
+        }
+    };
 });

public/js/directives/form.directive.js

@@ -15,7 +15,7 @@ angular.module('rallly')
             event : '=',
             form : '='
         },
-        templateUrl : 'templates/directives/eventForm/userForm.html',
+        templateUrl : 'templates/form/userForm.html',
         link : function(scope, el, attrs) {
             scope.errors = {};
 
@@ -37,7 +37,7 @@ angular.module('rallly')
             event : '=',
             form : '='
         },
-        templateUrl : 'templates/directives/eventForm/eventForm.html',
+        templateUrl : 'templates/form/eventForm.html',
         link : function(scope, el, attrs) {
             scope.errors = {};
 
@@ -58,7 +58,7 @@ angular.module('rallly')
             event : '=',
             form : '='
         },
-        templateUrl : 'templates/directives/eventForm/dateForm.html'
+        templateUrl : 'templates/form/dateForm.html'
     }
 })
 .directive('participantsForm', function(FormHelper){
@@ -67,7 +67,7 @@ angular.module('rallly')
             event : '=',
             form : '='
         },
-        templateUrl : 'templates/directives/eventForm/participantsForm.html',
+        templateUrl : 'templates/form/participantsForm.html',
         link : function(scope, el, attrs){
             scope.emailRegex = FormHelper.emailRegexString;
         }
@@ -79,7 +79,7 @@ angular.module('rallly')
             event : '=',
             form : '='
         },
-        templateUrl : 'templates/directives/eventForm/settingsForm.html',
+        templateUrl : 'templates/form/settingsForm.html',
         link : function(scope, el, attrs){
             scope.deleteEvent = function(){
                 if (scope.deleteRequestSent) return;
@@ -117,4 +117,53 @@ angular.module('rallly')
             });
         }
     }
+})
+.directive('timeForm', function(DatePickerService){
+    return {
+        scope : {
+            event : '=',
+            form : '='
+        },
+        templateUrl : 'templates/form/timeForm.html',
+        link : function(scope, el, attrs){
+            var init = false;
+            var dateService;
+            var deregister = scope.$watch('event.dates', function(value){
+                if (value && !init) {
+                    deregister();
+                }
+                init = true;
+                dateService = new DatePickerService(scope.event.dates);
+                scope.unsetDate = function(date){
+                    dateService.removeDate(date);
+                }
+            });
+        }
+    }
+})
+.directive('timePicker', function(){
+    return {
+        scope : {
+            model : '=ngModel'
+        },
+        require : 'ngModel',
+        link : function(scope, el, attrs, ngModel){
+            ngModel.$viewChangeListeners.push(function(){
+                scope.model = Date.parse(ngModel.$modelValue);
+                ngModel.$setViewValue(scope.model.toString("hh:mm tt"));
+                ngModel.$render();
+            });
+
+            ngModel.$validators.time = function(modelValue, viewValue){
+                if (ngModel.$isEmpty(modelValue)) return true;
+                var time = Date.parse(modelValue);
+                if (time) {
+                    ngModel.$setViewValue(time.toString("hh:mm tt"));
+                    ngModel.$render();
+                    return true;
+                }
+                return false;
+            }
+        }
+    }
 });

public/js/main.js

@@ -10,8 +10,20 @@ angular.module('rallly', ['ui.router','ngResource','btford.modal','ngTagsInput',
         })
         .state('newevent',{
             url : '/new',
-            templateUrl : 'templates/newevent.html',
+            templateUrl : 'templates/newEvent/layout.html',
-            controller : 'NewEventCtrl'
+            controller : 'NewEventCtrl',
+        })
+        .state('newevent.general', {
+            templateUrl : 'templates/newEvent/general.html'
+        })
+        .state('newevent.datetime', {
+            templateUrl : 'templates/newEvent/datetime.html'
+        })
+        .state('newevent.invite', {
+            templateUrl : 'templates/newEvent/invite.html'
+        })
+        .state('newevent.success', {
+            templateUrl : 'templates/newEvent/success.html'
         })
         .state('about', {
             url : '/about',

public/js/templates.js

@@ -3,13 +3,20 @@ $templateCache.put("templates/confirmmodal.html","<div class=\"rl-modal-overlay\
 $templateCache.put("templates/editevent.html","<div ng-show=\"event._id\">\n    <div class=\"box\">\n\n        <div class=\"box-title\">Edit Event</div>\n        <div class=\"box-description\">\n            You can makes changes to your existing event by changing the fields in the form below.\n        </div>\n\n        <form novalidate name=\"form\" ng-submit=\"submit()\">\n\n            <section class=\"box-section\" user-form form=\"form\" event=\"event\">\n\n            </section>\n\n            <section class=\"box-section\" event-form form=\"form\" event=\"event\">\n\n            </section>\n            <section class=\"box-section\" date-form form=\"form\" event=\"event\">\n\n            </section>\n\n            <section class=\"box-section\" settings-form form=\"form\" event=\"event\">\n\n            </section>\n\n            <div class=\"box-controls box-bottom-sticky\">\n                <button type=\"submit\" ng-show=\"didChange()\" class=\"btn btn-primary\" ng-class=\"{disabled : !didChange()}\">\n                    Save Changes\n                </button>\n                <button type=\"button\" ng-click=\"undoChanges()\" class=\"btn\" ng-show=\"didChange()\">Undo Changes</button>\n                <a href=\"/{{event._id}}\" class=\"btn\" ng-hide=\"didChange()\">Done</a>\n            </div>\n\n        </form>\n\n    </div>\n\n</div>\n");
 $templateCache.put("templates/event.html","<div ng-show=\"event._id && !event.isDeleted\">\n    <div class=\"box \">\n        <div class=\"event-header\">\n            <div class=\"avatar\">\n                <img src=\"/images/eventicon.png\" width=\"32\" />\n            </div>\n            <div class=\"details\">\n                <div class=\"title\">\n                    {{event.title}}\n                    <span class=\"title-label danger\" ng-show=\"event.isClosed\">Poll Closed</span>\n                    <span class=\"title-label success\" ng-hide=\"event.isClosed\">Poll Open</span>\n                </div>\n                <div class=\"subtitle\">\n                    Created by <a href=\"mailto:{{event.creator.email}}\">{{event.creator.name}}</a> &bull; {{event.created | elapsed}}\n                </div>\n            </div>\n            <div class=\"actions\">\n                <button class=\"btn\" ng-click=\"editEvent()\">Edit Event</button>\n            </div>\n        </div>\n        <div class=\"box-side-sticky event-description\" ng-show=\"event.description\">{{event.description}}</div>\n        <div class=\"box-bottom-sticky event-location\" ng-show=\"event.location\">\n            <img src=\"/images/location.png\" width=\"18\" /><a href=\"http://google.com/maps?q={{event.location}}\" target=\"_blank\">{{event.location}}</a>\n        </div>\n\n    </div>\n    <div class=\"box box-x-scroll\">\n        <div poll event=\"event\" class=\"poll\">\n        </div>\n    </div>\n\n    <div class=\"box\" ng-hide=\"event.comments.length == 0 && event.isClosed\">\n        <div class=\"box-title\">\n            Discussion\n        </div>\n        <div class=\"box-description\">\n            You can discuss the event with your friends by leaving a comment below.\n        </div>\n        <div discussion event=\"event\">\n\n        </div>\n    </div>\n</div>\n");
 $templateCache.put("templates/home.html","<div class=\"page-placeholder\">\n    <div class=\"image\">\n        <img src=\"/images/mark_large.png\" width=\"67\" />\n    </div>\n    <div class=\"title\">\n        Schedule an Event\n    </div>\n    <div class=\"content\">\n        Want to host an event but can’t decide on a date? Click on the button below to start!\n    </div>\n    <button ng-click=\"newEvent()\" class=\"btn\">Schedule New Event</button>\n</div>\n");
-$templateCache.put("templates/newevent.html","<div ng-hide=\"eventUrl\">\n    <div class=\"box\" ng-class=\"{\'animated shake\': form.$submitted && form.$invalid }\">\n\n        <div class=\"box-title\">Schedule a New Event</div>\n        <div class=\"box-description\">\n            Fill in the form below to create your event and share it with your friends and colleagues.\n        </div>\n\n        <form novalidate autocomplete=\"off\" name=\"form\" ng-submit=\"submit()\">\n            <section class=\"box-section\" user-form form=\"form\" event=\"event\">\n\n            </section>\n\n            <section class=\"box-section\" event-form form=\"form\" event=\"event\">\n\n            </section>\n\n            <section class=\"box-section\" date-form form=\"form\" event=\"event\">\n\n            </section>\n\n            <section class=\"box-section\" participants-form form=\"form\" event=\"event\">\n\n            </section>\n\n            <div class=\"box-controls box-bottom-sticky\">\n                <button type=\"submit\" class=\"btn btn-primary\">Create Event</button>\n            </div>\n\n        </form>\n    </div>\n</div>\n<div ng-show=\"eventUrl\" class=\"box\">\n    <div class=\"box-message\">\n            <div class=\"main-image\">\n                <img src=\"/images/success_large.png\" width=\"100\" />\n            </div>\n    <div class=\"title\">Event Created</div>\n    <div class=\"content\">\n        Your event has been created successfully! You should receive an email shortly with instructions to verify your email address.\n    </div>\n    <div class=\"mini-divider\">\n    </div>\n    <div class=\"form-group\">\n        <input type=\"text\" class=\"form-control\" disabled=\"true\" value=\"{{eventUrl}}\" />\n        <a href=\"{{eventUrl}}\" class=\"btn form-btn\">GO</a>\n    </div>\n    </div>\n</div>\n");
+$templateCache.put("templates/newevent.html","<div ng-if=\"!eventUrl\">\n    <div class=\"box\" ng-class=\"{\'animated shake\': form.$submitted && form.$invalid }\">\n\n        <div class=\"box-title\">Schedule a New Event</div>\n        <div class=\"box-description\">\n            Fill in the form below to create your event and share it with your friends and colleagues.\n        </div>\n\n        <form novalidate autocomplete=\"off\" name=\"form\" ng-submit=\"submit()\">\n            <div ng-if=\"page == 1\">\n\n                <section class=\"box-section\" user-form form=\"form\" event=\"event\">\n\n                </section>\n\n                <section class=\"box-section\" event-form form=\"form\" event=\"event\">\n\n                </section>\n            </div>\n            <div ng-if=\"page==2\">\n\n                <section class=\"box-section\" date-form form=\"form\" event=\"event\">\n\n                </section>\n\n                <section class=\"box-section\" ng-show=\"event.dates.length\" time-form form=\"form\" event=\"event\">\n\n                </section>\n            </div>\n\n            <div ng-if=\"page==3\">\n\n            <section class=\"box-section\" participants-form form=\"form\" event=\"event\">\n\n            </section>\n\n            </div>\n\n\n            <div class=\"box-controls box-bottom-sticky\">\n                <button type=\"button\" ng-if=\"page!=1\" class=\"btn\" ng-click=\"prevPage()\">Back</button>\n                <button type=\"button\" ng-if=\"page!=3\" class=\"btn\" ng-click=\"nextPage()\">Next</button>\n                <button type=\"submit\" ng-if=\"page==3\" class=\"btn btn-primary\">Create Event</button>\n            </div>\n\n        </form>\n    </div>\n\n</div>\n<div ng-if=\"eventUrl\" class=\"box\">\n    <div class=\"box-message\">\n            <div class=\"main-image\">\n                <img src=\"/images/success_large.png\" width=\"100\" />\n            </div>\n    <div class=\"title\">Event Created</div>\n    <div class=\"content\">\n        Your event has been created successfully! You should receive an email shortly with instructions to verify your email address.\n    </div>\n    <div class=\"mini-divider\">\n    </div>\n    <div class=\"form-group\">\n        <input type=\"text\" class=\"form-control\" disabled=\"true\" value=\"{{eventUrl}}\" />\n        <a href=\"{{eventUrl}}\" class=\"btn form-btn\">GO</a>\n    </div>\n    </div>\n</div>\n");
 $templateCache.put("templates/notfound.html","<h1>Error 404</h1>\n<h2>Not Found</h2>\n");
 $templateCache.put("templates/notification.html","<div class=\"notification {{notification.type}}\" ng-click=\"notification.close()\">\n    <div class=\"title\">\n        {{notification.title}}\n    </div>\n    <div class=\"message\">\n        {{notification.message}}\n    </div>\n</div>\n");
 $templateCache.put("templates/directives/discussion.html","<ul class=\"comment-thread\" ng-show=\"event.comments.length\">\n    <li ng-repeat=\"comment in event.comments\" class=\"comment\">\n        <div class=\"avatar-section\">\n            <img src=\"/images/avatar.png\" />\n        </div>\n        <div class=\"comment-section\">\n            <a href=\"#\" class=\"comment-delete\" ng-click=\"deleteComment(comment)\">&times;</a>\n            <div class=\"meta\">\n                <span class=\"name\">{{comment.author.name}}</span>\n                <span class=\"time\">{{comment.created | elapsed}}</span>\n            </div>\n            <div class=\"content\">{{comment.content}}</div>\n        </div>\n    </li>\n</ul>\n<form novalidate ng-submit=\"postComment()\" name=\"commentForm\" class=\"comment-form\">\n    <div class=\"avatar-section\">\n        <img src=\"/images/avatar.png\" />\n    </div>\n    <div class=\"input-section form-group\">\n        <div class=\"content-section\">\n            <textarea class=\"form-control\" required ng-model=\"comment.content\" placeholder=\"Write a comment...\"></textarea>\n        </div>\n        <div class=\"name-section\">\n            <div class=\"name-container\">\n                <input type=\"text\" class=\"form-control\" required placeholder=\"Your Name\" ng-model=\"comment.author.name\" />\n                <button type=\"submit\" class=\"btn\">Post Comment</button>\n                <span class=\"form-error\" ng-show=\"commentForm.$submitted && commentForm.$error\">\n                    <img src=\"/images/error.png\" width=\"14\" /> Make sure you fill in all the fields.\n                </span>\n            </div>\n        </div>\n    </div>\n</form>\n");
 $templateCache.put("templates/directives/poll.html","<div class=\"poll-header\">\n    <div class=\"header participants-header\">\n        {{event.participants.length}} participants\n    </div>\n    <div class=\"header date-header\" ng-repeat=\"date in event.dates\">\n        <div class=\"daticon\">\n            <div class=\"dow\">\n                {{date | date: \'EEE\'}}\n            </div>\n            <div class=\"day\">\n                {{date | date: \'d\'}}\n            </div>\n            <div class=\"month\">\n                {{date | date : \'MMM\'}}\n            </div>\n            <span class=\"count\" ng-show=\"selectedDate($index)\" ng-class={top:isTopDate($index)}>{{selectedDate($index)}}</span>\n        </div>\n    </div>\n    <div class=\"header actions-header\">\n\n    </div>\n</div>\n<div class=\"poll-body\">\n    <div class=\"poll-entry\" ng-repeat=\"participant in event.participants\">\n        <form novalidate ng-submit=\"update(participant); editMode = false\">\n            <div class=\"cell name-cell\">\n                <span class=\"avatar style-{{$index + 1}}\">\n                    <img src=\"/images/user.png\" width=\"11\" />\n                </span>\n                <input required autocomplete=\"off\" type=\"text\" class=\"form-control\" ng-model=\"participant.name\" ng-show=\"editMode\" value=\"participant.name\"/>\n                <span ng-hide=\"editMode\" class=\"name editable\" ng-click=\"editMode = true && !event.isClosed; edit(participant)\">{{participant.name}}</span>\n            </div>\n            <div class=\"cell vote-cell\" ng-repeat=\"date in event.dates\">\n                <img src=\"/images/tick@2x.png\"  width=\"16\" ng-hide=\"editMode\" ng-if=\"participant.dates[$index]\" />\n                <img src=\"/images/nope@2x.png\" width=\"8\" ng-hide=\"editMode\" ng-if=\"!participant.dates[$index]\" />\n                <input ng-model=\"participant.dates[$index]\" ng-show=\"editMode\" ng-false-value=\"false\" type=\"checkbox\" />\n                <div class=\"overlay\" ng-show=\"editMode\" ng-click=\"participant.dates[$index] = !participant.dates[$index]\"></div>\n            </div>\n            <div class=\"cell action-cell\" ng-hide=\"event.isClosed\">\n                <button type=\"button\" ng-hide=\"editMode\" ng-click=\"editMode = true; edit(participant)\" class=\"btn hover\">Edit</button>\n                <button type=\"button\" ng-hide=\"editMode\" ng-click=\"delete(participant)\" class=\"btn danger hover\">Delete</button>\n                <button type=\"submit\" ng-show=\"editMode\" class=\"btn\">Save</button>\n                <button type=\"button\" ng-show=\"editMode\" ng-click=\"editMode = false; cancel($index)\" class=\"btn\">Cancel</button>\n            </div>\n        </form>\n    </div>\n    <div class=\"poll-example\" ng-class=\"{hidden : event.participants.length > 0}\">\n        <div class=\"poll-entry\" ng-repeat=\"example in examples\">\n            <div class=\"cell name-cell\">\n                <span class=\"avatar style-{{$index + 1}}\">\n                    <img src=\"/images/user.png\" width=\"11\" />\n                </span>\n                <span class=\"name\">{{example.name}}</span>\n            </div>\n            <div class=\"cell vote-cell\" ng-repeat=\"date in event.dates\">\n                <img src=\"/images/tick@2x.png\"  width=\"16\" ng-if=\"example.dates[$index]\" />\n                <img src=\"/images/nope@2x.png\" width=\"8\" ng-if=\"!example.dates[$index]\" />\n            </div>\n            <div class=\"cell action-cell\">\n\n            </div>\n        </div>\n        <div class=\"overlay\">\n            <div class=\"overlay-text\">\n                Fill in the form below to get started\n            </div>\n        </div>\n    </div>\n    <div ng-hide=\"event.isClosed\" class=\"poll-entry highlight\">\n        <form novalidate name=\"formnew\" ng-submit=\"save()\">\n            <div class=\"cell name-cell\">\n                <span class=\"avatar style-{{participant.style}}\">\n                    <img src=\"/images/user.png\" width=\"11\" />\n                </span>\n                <input autocomplete=\"off\" name=\"username\" type=\"text\" class=\"form-control\" placeholder=\"Your name...\" ng-model=\"participant.name\" required value=\"participant.name\"/>\n            </div>\n            <div class=\"cell vote-cell\" ng-repeat=\"date in event.dates\">\n                <input ng-model=\"participant.dates[$index]\" ng-false-value=\"false\" type=\"checkbox\" />\n                <div class=\"overlay\" ng-click=\"participant.dates[$index] = !participant.dates[$index]\"></div>\n            </div>\n            <div class=\"cell action-cell\">\n                <button type=\"submit\" ng-class=\"{ \'animated shake\' : formnew.$submitted && formnew.$invalid  }\" class=\"btn\">Save</button>\n            </div>\n        </form>\n    </div>\n</div>\n");
-$templateCache.put("templates/directives/eventForm/dateForm.html","<div class=\"section-details\">\n    <div class=\"section-title\">Choose Dates</div>\n    <ul class=\"daticon-list\">\n        <li ng-repeat=\"date in event.dates\">\n            <div class=\"daticon\">\n                <div class=\"dow\">\n                    {{date | date: \'EEE\'}}\n                </div>\n                <div class=\"day\">\n                    {{date | date: \'d\'}}\n                </div>\n                <div class=\"month\">\n                    {{date | date : \'MMM\'}}\n                </div>\n                <span class=\"delete\" ng-click=\"datepicker.unsetDate(date)\"></span>\n            </div>\n        </li>\n    </ul>\n</div>\n<div class=\"section-main\">\n    <div class=\"form-row\">\n        <div class=\"form-group\">\n            <label for=\"email\">Calendar</label>\n            <span class=\"form-error\" ng-show=\"(form.datepicker.$dirty || form.$submitted) && form.datepicker.$error.required\">\n                <img src=\"/images/error.png\" width=\"14\" /> You need to select a few dates\n            </span>\n            <div datepicker required name=\"datepicker\" control=\"datepicker\" ng-model=\"event.dates\">\n\n            </div>\n        </div>\n    </div>\n</div>\n");
+$templateCache.put("templates/directives/timePicker.html","<div class=\"time-picker\">\n    <div class=\"time-picker-col\">\n        <div class=\"daticon\">\n            <div class=\"dow\">\n                {{date | date: \'EEE\'}}\n            </div>\n            <div class=\"day\">\n                {{date | date: \'d\'}}\n            </div>\n            <div class=\"month\">\n                {{date | date : \'MMM\'}}\n            </div>\n            <!-- <span class=\"delete\" ng-click=\"datepicker.unsetDate(date)\"></span> -->\n        </div>\n    </div>\n    <div class=\"time-picker-col\" ng-repeat=\"time in date.times track by $index\">\n        <input type=\"text\" class=\"time-picker-input\" time-picker ng-model=\"time\" ng-model-options=\"{ updateOn: \'blur\' }\" />\n    </div>\n</div>\n");
-$templateCache.put("templates/directives/eventForm/eventForm.html","<div class=\"section-details\">\n    <div class=\"section-title\">Event Details</div>\n</div>\n<div class=\"section-main\">\n    <div class=\"form-row\">\n        <div class=\"form-col\">\n            <div class=\"form-group\">\n                <label for=\"title\">Title</label>\n                <span class=\"form-error\" ng-show=\"(form.title.$touched || form.$submitted) && errors.title\">\n                    <img src=\"/images/error.png\" width=\"14\" /> {{errors.title}}\n                </span>\n                <input id=\"title\" name=\"title\" ng-maxlength=\"30\" required ng-model=\"event.title\" type=\"text\" placeholder=\"Monthly Meetup...\" class=\"form-control extend\"/>\n            </div>\n        </div>\n        <div class=\"form-col\">\n            <div class=\"form-group optional\">\n                <label for=\"location\">Location</label>\n                <span class=\"form-error\" ng-show=\"(form.location.$touched || form.$submitted) && errors.location\">\n                    <img src=\"/images/error.png\" width=\"14\" /> {{errors.location}}\n                </span>\n                <input id=\"location\" name=\"location\" ng-model=\"event.location\" ng-maxlength=\"50\" type=\"text\" placeholder=\"Rick\'s Cafe...\" class=\"form-control extend\"/>\n            </div>\n        </div>\n    </div>\n    <div class=\"form-row\">\n        <div class=\"form-group optional\">\n            <label for=\"description\" >Description</label>\n            <textarea id=\"description\" name=\"description\" ng-model=\"event.description\" placeholder=\"Enter Description...\" class=\"form-control extend\"></textarea>\n        </div>\n    </div>\n</div>\n");
+$templateCache.put("templates/form/dateForm.html","<div class=\"section-details\">\n    <div class=\"section-title\">Choose Dates</div>\n    <ul class=\"daticon-list\">\n        <li ng-repeat=\"d in event.dates\">\n            <div class=\"daticon\">\n                <div class=\"dow\">\n                    {{d.date | date: \'EEE\'}}\n                </div>\n                <div class=\"day\">\n                    {{d.date | date: \'d\'}}\n                </div>\n                <div class=\"month\">\n                    {{d.date | date : \'MMM\'}}\n                </div>\n                <span class=\"delete\" ng-click=\"datepicker.unsetDate(d.date)\"></span>\n            </div>\n        </li>\n    </ul>\n</div>\n<div class=\"section-main\">\n    <div class=\"form-row\">\n        <div class=\"form-group\">\n            <label for=\"email\">Calendar</label>\n            <span class=\"form-error\" ng-show=\"form.$submitted && form.datepicker.$error.required\">\n                <img src=\"/images/error.png\" width=\"14\" /> You need to select a few dates\n            </span>\n            <div datepicker required name=\"datepicker\" control=\"datepicker\" ng-model=\"event.dates\">\n\n            </div>\n        </div>\n    </div>\n</div>\n");
-$templateCache.put("templates/directives/eventForm/participantsForm.html","<div class=\"section-details\">\n    <div class=\"section-title\">Invite Participants</div>\n</div>\n<div class=\"section-main\">\n    <div class=\"form-row\">\n        <div class=\"form-group optional\">\n            <label>Participant\'s Emails</label>\n                <tags-input max-length=\"50\" allowed-tags-pattern=\"{{emailRegex}}\" display-property=\"email\" ng-model=\"event.emails\" placeholder=\"Add an Email\" type=\"email\" autocomplete=\"off\"></tags-input>\n        </div>\n    </div>\n</div>\n</section>\n");
+$templateCache.put("templates/form/eventForm.html","<div class=\"section-details\">\n    <div class=\"section-title\">Event Details</div>\n</div>\n<div class=\"section-main\">\n    <div class=\"form-row\">\n        <div class=\"form-col\">\n            <div class=\"form-group\">\n                <label for=\"title\">Title</label>\n                <span class=\"form-error\" ng-show=\"(form.title.$touched || form.$submitted) && errors.title\">\n                    <img src=\"/images/error.png\" width=\"14\" /> {{errors.title}}\n                </span>\n                <input id=\"title\" name=\"title\" ng-maxlength=\"30\" required ng-model=\"event.title\" type=\"text\" placeholder=\"Monthly Meetup...\" class=\"form-control extend\"/>\n            </div>\n        </div>\n        <div class=\"form-col\">\n            <div class=\"form-group optional\">\n                <label for=\"location\">Location</label>\n                <span class=\"form-error\" ng-show=\"(form.location.$touched || form.$submitted) && errors.location\">\n                    <img src=\"/images/error.png\" width=\"14\" /> {{errors.location}}\n                </span>\n                <input id=\"location\" name=\"location\" ng-model=\"event.location\" ng-maxlength=\"50\" type=\"text\" placeholder=\"Rick\'s Cafe...\" class=\"form-control extend\"/>\n            </div>\n        </div>\n    </div>\n    <div class=\"form-row\">\n        <div class=\"form-group optional\">\n            <label for=\"description\" >Description</label>\n            <textarea id=\"description\" name=\"description\" ng-model=\"event.description\" placeholder=\"Enter Description...\" class=\"form-control extend\"></textarea>\n        </div>\n    </div>\n</div>\n");
-$templateCache.put("templates/directives/eventForm/settingsForm.html","<div class=\"section-details\">\n    <div class=\"section-title\">Settings</div>\n</div>\n<div class=\"section-main\">\n    <div class=\"switch-row\">\n        <div class=\"switch-details\">\n            <div class=\"title\">\n                Poll Status\n            </div>\n            <div class=\"description\">\n                Let people vote on the poll.\n            </div>\n        </div>\n        <div class=\"switch\">\n            <div class=\"switch-value\">\n                {{event.isClosed ? \'Closed\' : \'Open\' }}\n            </div>\n            <div switch-toggle ng-model=\"event.isClosed\" invert>\n            </div>\n        </div>\n    </div>\n    <div class=\"switch-row\">\n        <div class=\"switch-details\">\n            <div class=\"title\">\n                Notifications\n            </div>\n            <div class=\"description\">\n                Send email notifications to the creator of this event.\n            </div>\n        </div>\n        <div class=\"switch\">\n            <div class=\"switch-value\">\n                {{event.creator.allowNotifications ? \'Enabled\' : \'Disabled\' }}\n            </div>\n            <div switch-toggle ng-model=\"event.creator.allowNotifications\">\n            </div>\n        </div>\n    </div>\n    <div class=\"switch-row\">\n        <div class=\"switch-details\">\n            <div class=\"title\">\n                Delete Event\n            </div>\n            <div class=\"description\">\n                Once you delete an event it will no longer be accessible.\n            </div>\n        </div>\n        <div class=\"switch\">\n            <button type=\"button\" ng-click=\"deleteEvent()\" class=\"btn\" ng-class=\"{danger : !deleteRequestSent, disabled : deleteRequestSent}\">{{deleteRequestSent ? \'Request Sent\' : \'Delete Event\' }}</button>\n        </div>\n    </div>\n</div>\n</section>\n");
+$templateCache.put("templates/form/participantsForm.html","<div class=\"section-details\">\n    <div class=\"section-title\">Invite Participants</div>\n</div>\n<div class=\"section-main\">\n    <div class=\"form-row\">\n        <div class=\"form-group optional\">\n            <label>Participant\'s Emails</label>\n            <tags-input max-length=\"50\" allowed-tags-pattern=\"{{emailRegex}}\" display-property=\"email\" ng-model=\"event.emails\" placeholder=\"Add an Email\" type=\"email\" autocomplete=\"off\"></tags-input>\n            <input type=\"hidden\" name=\"shouldCreate\" value=\"true\" />\n\n        </div>\n    </div>\n</div>\n</section>\n");
-$templateCache.put("templates/directives/eventForm/userForm.html","<div class=\"section-details\">\n    <div class=\"section-title\">Your Details</div>\n</div>\n<div class=\"section-main\">\n    <div class=\"form-row\">\n        <div class=\"form-col\">\n            <div class=\"form-group\">\n                <label for=\"name\">Name</label>\n                <span class=\"form-error\" ng-show=\"(form.name.$touched || form.$submitted) && errors.name\">\n                    <img src=\"/images/error.png\" width=\"14\" /> {{errors.name}}\n                </span>\n                <input id=\"name\" name=\"name\" ng-maxlength=\"30\" required ng-model=\"event.creator.name\" type=\"text\" placeholder=\"John Doe...\" class=\"form-control extend\"/>\n            </div>\n        </div>\n        <div class=\"form-col\">\n            <div class=\"form-group\">\n                <label for=\"email\">Email</label>\n                <span class=\"form-error\" ng-show=\"(form.email.$touched || form.$submitted) && errors.email\">\n                    <img src=\"/images/error.png\" width=\"14\" /> {{errors.email}}\n                </span>\n                <input type=\"email\" id=\"email\" name=\"email\" ng-pattern=\"emailRegex\" required ng-model=\"event.creator.email\" placeholder=\"john.doe@email.com...\" class=\"form-control extend\"/>\n            </div>\n        </div>\n    </div>\n</div>\n");}]);
+$templateCache.put("templates/form/settingsForm.html","<div class=\"section-details\">\n    <div class=\"section-title\">Settings</div>\n</div>\n<div class=\"section-main\">\n    <div class=\"switch-row\">\n        <div class=\"switch-details\">\n            <div class=\"title\">\n                Poll Status\n            </div>\n            <div class=\"description\">\n                Let people vote on the poll.\n            </div>\n        </div>\n        <div class=\"switch\">\n            <div class=\"switch-value\">\n                {{event.isClosed ? \'Closed\' : \'Open\' }}\n            </div>\n            <div switch-toggle ng-model=\"event.isClosed\" invert>\n            </div>\n        </div>\n    </div>\n    <div class=\"switch-row\">\n        <div class=\"switch-details\">\n            <div class=\"title\">\n                Notifications\n            </div>\n            <div class=\"description\">\n                Send email notifications to the creator of this event.\n            </div>\n        </div>\n        <div class=\"switch\">\n            <div class=\"switch-value\">\n                {{event.creator.allowNotifications ? \'Enabled\' : \'Disabled\' }}\n            </div>\n            <div switch-toggle ng-model=\"event.creator.allowNotifications\">\n            </div>\n        </div>\n    </div>\n    <div class=\"switch-row\">\n        <div class=\"switch-details\">\n            <div class=\"title\">\n                Delete Event\n            </div>\n            <div class=\"description\">\n                Once you delete an event it will no longer be accessible.\n            </div>\n        </div>\n        <div class=\"switch\">\n            <button type=\"button\" ng-click=\"deleteEvent()\" class=\"btn\" ng-class=\"{danger : !deleteRequestSent, disabled : deleteRequestSent}\">{{deleteRequestSent ? \'Request Sent\' : \'Delete Event\' }}</button>\n        </div>\n    </div>\n</div>\n</section>\n");
+$templateCache.put("templates/form/timeForm.html","<div class=\"section-details\">\n    <div class=\"section-title\">Choose Times</div>\n</div>\n<div class=\"section-main\">\n    <table class=\"time-form\">\n        <tr ng-repeat=\"d in event.dates\">\n            <td>\n                <div class=\"daticon\">\n                    <div class=\"dow\">\n                        {{d.date | date: \'EEE\'}}\n                    </div>\n                    <div class=\"day\">\n                        {{d.date | date: \'d\'}}\n                    </div>\n                    <div class=\"month\">\n                        {{d.date | date : \'MMM\'}}\n                    </div>\n                    <span class=\"delete\" ng-click=\"unsetDate(d.date)\"></span>\n                </div>\n            </td>\n            <td ng-repeat=\"time in [1,2,3] track by $index\">\n                <input type=\"text\" time-picker ng-model-options=\"{ updateOn: \'blur\' }\" ng-model=\"d.times[$index]\" class=\"time-picker-input form-control\" />\n            </td>\n        </tr>\n    </table>\n</div>\n");
+$templateCache.put("templates/form/userForm.html","<div class=\"section-details\">\n    <div class=\"section-title\">Your Details</div>\n</div>\n<div class=\"section-main\">\n    <div class=\"form-row\">\n        <div class=\"form-col\">\n            <div class=\"form-group\">\n                <label for=\"name\">Name</label>\n                <span class=\"form-error\" ng-show=\"(form.name.$touched || form.$submitted) && errors.name\">\n                    <img src=\"/images/error.png\" width=\"14\" /> {{errors.name}}\n                </span>\n                <input id=\"name\" name=\"name\" ng-maxlength=\"30\" required ng-model=\"event.creator.name\" type=\"text\" placeholder=\"John Doe...\" class=\"form-control extend\"/>\n            </div>\n        </div>\n        <div class=\"form-col\">\n            <div class=\"form-group\">\n                <label for=\"email\">Email</label>\n                <span class=\"form-error\" ng-show=\"(form.email.$touched || form.$submitted) && errors.email\">\n                    <img src=\"/images/error.png\" width=\"14\" /> {{errors.email}}\n                </span>\n                <input type=\"email\" id=\"email\" name=\"email\" ng-pattern=\"emailRegex\" required ng-model=\"event.creator.email\" placeholder=\"john.doe@email.com...\" class=\"form-control extend\"/>\n            </div>\n        </div>\n    </div>\n</div>\n");
+$templateCache.put("templates/newEvent/datetime.html","<section class=\"box-section\" date-form form=\"form\" event=\"event\">\n\n</section>\n\n<section class=\"box-section\" ng-show=\"event.dates.length\" time-form form=\"form\" event=\"event\">\n\n</section>\n\n<div class=\"box-controls box-bottom-sticky\">\n    <button type=\"button\" class=\"btn\" ng-click=\"prevPage()\">Previous</button>\n    <button type=\"submit\" class=\"btn\">Next</button>\n</div>\n");
+$templateCache.put("templates/newEvent/general.html","<section class=\"box-section\" user-form form=\"form\" event=\"event\">\n\n</section>\n\n<section class=\"box-section\" event-form form=\"form\" event=\"event\">\n\n</section>\n\n<div class=\"box-controls box-bottom-sticky\">\n    <button type=\"submit\" class=\"btn\">Next Step</button>\n</div>\n");
+$templateCache.put("templates/newEvent/invite.html","<section class=\"box-section\" participants-form form=\"form\" event=\"event\">\n\n</section>\n\n<div class=\"box-controls box-bottom-sticky\">\n    <button type=\"button\" class=\"btn\" ng-click=\"prevPage()\">Previous</button>\n    <button type=\"submit\" class=\"btn\">Create</button>\n</div>\n");
+$templateCache.put("templates/newEvent/layout.html","<div class=\"box\" ng-class=\"{\'animated shake\': form.$submitted && form.$invalid }\">\n\n    <div class=\"box-title\">Schedule a New Event</div>\n    <div class=\"box-description\">\n        Fill in the form below to create your event and share it with your friends and colleagues.\n    </div>\n    <ol class=\"box-steps\">\n        <li class=\"step active\">\n            General Details\n        </li>\n        <li class=\"step\" ng-class=\"{ active : page > 1 }\">\n            Dates &amp; Times\n        </li>\n        <li class=\"step\" ng-class=\"{ active : page > 2 }\">\n            Invites\n        </li>\n        <li class=\"step\" ng-class=\"{ active : page > 3 }\">\n            Done\n        </li>\n    </ol>\n    <form novalidate autocomplete=\"off\" name=\"form\" ng-submit=\"submit()\">\n        <div ui-view>\n\n        </div>\n    </form>\n</div>\n");
+$templateCache.put("templates/newEvent/success.html","<div class=\"box-message\">\n    <div class=\"main-image\">\n        <img src=\"/images/success_large.png\" width=\"100\" />\n    </div>\n    <div class=\"title\">Event Created</div>\n    <div class=\"content\">\n        Your event has been created successfully! You should receive an email shortly with instructions to verify your email address.\n    </div>\n    <div class=\"mini-divider\">\n    </div>\n    <div class=\"form-group\">\n        <input type=\"text\" class=\"form-control\" disabled=\"true\" value=\"{{eventUrl}}\" />\n        <a href=\"{{eventUrl}}\" class=\"btn form-btn\">GO</a>\n    </div>\n</div>\n");}]);

public/scss/modules/_mixins.scss

@@ -0,0 +1,17 @@
+@mixin form-input {
+    border-radius: 2px;
+    border: 1px solid $border-clr;
+    font-size:em(18px);
+    @include transition(border-color 0.1s ease-in-out);
+    &:focus {
+        border-color: $blue-clr;
+        outline:none;
+        background: white;
+    }
+    &.extend {
+        width:100%;
+    }
+    @include placeholder {
+        color: rgba($text-3-clr,0.7);
+    }
+}

public/scss/modules/_vars.scss

@@ -11,6 +11,6 @@ $text-2-clr: #828B9A;
 $text-3-clr: #AEB4BE;
 $border-clr: #D9DDE3;
 $navigation-bg-clr: $dark-blue-clr;
-$background-clr: #F5F5F5;
+$background-clr: $light-blue-clr;
 
 $color-collection: (#8A75AE, #80A1DA, #B3DD8B, #7EE4E4, #FCD285, #F7967F, #E8669D, #F7B6E7, #F99D7B, #88D0CB);

public/scss/partials/ui/_box.scss

@@ -7,8 +7,8 @@ $box-h-pad: 25px;
     border-radius: 3px;
     margin: 0 auto 20px auto;
     max-width: 800px;
+    overflow:hidden;
     padding: $box-v-pad $box-h-pad;
-    box-shadow: 0 0 1px $border-clr;
     &.box-x-scroll {
         overflow-x: scroll;
     }
@@ -51,6 +51,9 @@ $box-h-pad: 25px;
 }
 .box-section {
     padding-top: 20px;
+    &:first-child {
+        border:0;
+    }
     @include row;
     .section-details {
         @include span-columns(3);
@@ -62,13 +65,14 @@ $box-h-pad: 25px;
     }
     .section-main {
         @include span-columns(9);
+
     }
 }
 
 .box-message {
     text-align:center;
     padding:40px;
-    max-width:450px;
+    max-width:500px;
     margin:0 auto;
     .main-image {
         margin-bottom: 20px;
@@ -122,3 +126,38 @@ $box-h-pad: 25px;
     margin-top: $box-v-pad;
     padding: 15px $box-h-pad;
 }
+
+.box-steps {
+    @include display(flex);
+    width:100%;
+    list-style-position:inside;
+    padding:0;
+    margin:0 0 20px 0;
+    .step {
+        @include flex(1);
+        color: $text-2-clr;
+        font-size: em(14px);
+        margin: 0 0 0 0;
+        padding: 0 0 10px 0;
+        border-bottom:2px solid $border-clr;
+        position:relative;
+        @include transition(all 0.2s ease-in-out);
+        &:after {
+            content: "";
+            position:absolute;
+            bottom:-2px;
+            left:0;
+            height: 2px;
+            width:0;
+            background: $green-clr;
+            @include transition(all 0.2s ease-in-out);
+        }
+        &.active {
+            color: $text-clr;
+            font-weight:bold;
+            &:after {
+                width:100%;
+            }
+        }
+    }
+}

public/scss/partials/ui/_datepicker.scss

@@ -147,14 +147,8 @@
     list-style:none;
     padding:5px;
     text-align:left;
-    .placeholder {
-        line-height: em(18px);
-        font-size: em(12px);
-        color: #ccc;
-    }
     li {
-        margin: 5px;
+        margin-bottom: 10px;
-        display:inline-block;
     }
 }
 

public/scss/partials/ui/_form.scss

@@ -57,22 +57,7 @@ form {
         }
     }
     input.form-control, textarea.form-control {
-        border-radius: 3px;
+        @include form-input;
-        border: 1px solid $border-clr;
-        font-size:em(18px);
-        @include transition(border-color 0.1s ease-in-out);
-        &:focus {
-            border-color: $blue-clr;
-            box-shadow: 0 0 3px rgba($blue-clr, 0.5);
-            outline:none;
-            background: white;
-        }
-        &.extend {
-            width:100%;
-        }
-        @include placeholder {
-            color: rgba($text-3-clr,0.7);
-        }
     }
     .form-btn {
         padding: em(12px) em(15px);

public/scss/partials/ui/_timepicker.scss

@@ -0,0 +1,49 @@
+.time-picker {
+    width:100%;
+    padding: 10px;
+    .time-picker-col {
+        display:table-cell;
+        vertical-align:middle;
+    }
+    .time-picker-input {
+        padding: 5px;
+        border-radius: 3px;
+        border: 1px solid $border-clr;
+        outline:0;
+        font-size: 18px;
+        &:focus {
+            border-color: $blue-clr;
+            box-shadow: 0 0 3px rgba($blue-clr, 0.5);
+            outline:0;
+        }
+    }
+}
+
+.time-picker-input {
+    @include form-input;
+    padding: em(5px) 0;
+    text-align:center;
+    font-size:em(26px);
+    &.ng-invalid {
+        border-color: $red-clr;
+        &:focus {
+            box-shadow: 0 0 3px rgba($red-clr, 0.5);
+        }
+    }
+    &.ng-valid.ng-dirty {
+        border-color: $green-clr;
+    }
+    &:focus {
+        color: $text-clr;
+    }
+}
+
+.time-form {
+    width:100%;
+    td {
+        padding: 10px 10px 10px 0;
+        input {
+            width: 100%;
+        }
+    }
+}

public/scss/style.scss

@@ -28,6 +28,7 @@ a {
 @import "partials/ui/comments";
 @import "partials/ui/switch";
 @import "partials/ui/notification";
+@import "partials/ui/timepicker";
 
 @import "partials/pages/home";
 @import "partials/pages/event";

public/templates/directives/timePicker.html

@@ -0,0 +1,19 @@
+<div class="time-picker">
+    <div class="time-picker-col">
+        <div class="daticon">
+            <div class="dow">
+                {{date | date: 'EEE'}}
+            </div>
+            <div class="day">
+                {{date | date: 'd'}}
+            </div>
+            <div class="month">
+                {{date | date : 'MMM'}}
+            </div>
+            <!-- <span class="delete" ng-click="datepicker.unsetDate(date)"></span> -->
+        </div>
+    </div>
+    <div class="time-picker-col" ng-repeat="time in date.times track by $index">
+        <input type="text" class="time-picker-input" time-picker ng-model="time" ng-model-options="{ updateOn: 'blur' }" />
+    </div>
+</div>

public/templates/form/dateForm.html

@@ -1,18 +1,18 @@
 <div class="section-details">
     <div class="section-title">Choose Dates</div>
     <ul class="daticon-list">
-        <li ng-repeat="date in event.dates">
+        <li ng-repeat="d in event.dates">
             <div class="daticon">
                 <div class="dow">
-                    {{date | date: 'EEE'}}
+                    {{d.date | date: 'EEE'}}
                 </div>
                 <div class="day">
-                    {{date | date: 'd'}}
+                    {{d.date | date: 'd'}}
                 </div>
                 <div class="month">
-                    {{date | date : 'MMM'}}
+                    {{d.date | date : 'MMM'}}
                 </div>
-                <span class="delete" ng-click="datepicker.unsetDate(date)"></span>
+                <span class="delete" ng-click="datepicker.unsetDate(d.date)"></span>
             </div>
         </li>
     </ul>
@@ -21,7 +21,7 @@
     <div class="form-row">
         <div class="form-group">
             <label for="email">Calendar</label>
-            <span class="form-error" ng-show="(form.datepicker.$dirty || form.$submitted) && form.datepicker.$error.required">
+            <span class="form-error" ng-show="form.$submitted && form.datepicker.$error.required">
                 <img src="/images/error.png" width="14" /> You need to select a few dates
             </span>
             <div datepicker required name="datepicker" control="datepicker" ng-model="event.dates">

public/templates/form/participantsForm.html

@@ -6,6 +6,8 @@
         <div class="form-group optional">
             <label>Participant's Emails</label>
             <tags-input max-length="50" allowed-tags-pattern="{{emailRegex}}" display-property="email" ng-model="event.emails" placeholder="Add an Email" type="email" autocomplete="off"></tags-input>
+            <input type="hidden" name="shouldCreate" value="true" />
+
         </div>
     </div>
 </div>

public/templates/form/timeForm.html

@@ -0,0 +1,26 @@
+<div class="section-details">
+    <div class="section-title">Choose Times</div>
+</div>
+<div class="section-main">
+    <table class="time-form">
+        <tr ng-repeat="d in event.dates">
+            <td>
+                <div class="daticon">
+                    <div class="dow">
+                        {{d.date | date: 'EEE'}}
+                    </div>
+                    <div class="day">
+                        {{d.date | date: 'd'}}
+                    </div>
+                    <div class="month">
+                        {{d.date | date : 'MMM'}}
+                    </div>
+                    <span class="delete" ng-click="unsetDate(d.date)"></span>
+                </div>
+            </td>
+            <td ng-repeat="time in [1,2,3] track by $index">
+                <input type="text" time-picker ng-model-options="{ updateOn: 'blur' }" ng-model="d.times[$index]" class="time-picker-input form-control" />
+            </td>
+        </tr>
+    </table>
+</div>

public/templates/newEvent/datetime.html

@@ -0,0 +1,12 @@
+<section class="box-section" date-form form="form" event="event">
+
+</section>
+
+<section class="box-section" ng-show="event.dates.length" time-form form="form" event="event">
+
+</section>
+
+<div class="box-controls box-bottom-sticky">
+    <button type="button" class="btn" ng-click="prevPage()">Previous</button>
+    <button type="submit" class="btn">Next</button>
+</div>

public/templates/newEvent/general.html

@@ -0,0 +1,11 @@
+<section class="box-section" user-form form="form" event="event">
+
+</section>
+
+<section class="box-section" event-form form="form" event="event">
+
+</section>
+
+<div class="box-controls box-bottom-sticky">
+    <button type="submit" class="btn">Next Step</button>
+</div>

public/templates/newEvent/invite.html

@@ -0,0 +1,8 @@
+<section class="box-section" participants-form form="form" event="event">
+
+</section>
+
+<div class="box-controls box-bottom-sticky">
+    <button type="button" class="btn" ng-click="prevPage()">Previous</button>
+    <button type="submit" class="btn">Create</button>
+</div>

public/templates/newEvent/layout.html

@@ -0,0 +1,26 @@
+<div class="box" ng-class="{'animated shake': form.$submitted && form.$invalid }">
+
+    <div class="box-title">Schedule a New Event</div>
+    <div class="box-description">
+        Fill in the form below to create your event and share it with your friends and colleagues.
+    </div>
+    <ol class="box-steps">
+        <li class="step active">
+            General Details
+        </li>
+        <li class="step" ng-class="{ active : page > 1 }">
+            Dates &amp; Times
+        </li>
+        <li class="step" ng-class="{ active : page > 2 }">
+            Invites
+        </li>
+        <li class="step" ng-class="{ active : page > 3 }">
+            Done
+        </li>
+    </ol>
+    <form novalidate autocomplete="off" name="form" ng-submit="submit()">
+        <div ui-view>
+
+        </div>
+    </form>
+</div>

public/templates/newEvent/success.html

@@ -0,0 +1,15 @@
+<div class="box-message">
+    <div class="main-image">
+        <img src="/images/success_large.png" width="100" />
+    </div>
+    <div class="title">Event Created</div>
+    <div class="content">
+        Your event has been created successfully! You should receive an email shortly with instructions to verify your email address.
+    </div>
+    <div class="mini-divider">
+    </div>
+    <div class="form-group">
+        <input type="text" class="form-control" disabled="true" value="{{eventUrl}}" />
+        <a href="{{eventUrl}}" class="btn form-btn">GO</a>
+    </div>
+</div>

public/templates/newevent.html

@@ -1,4 +1,4 @@
-<div ng-hide="eventUrl">
+<div ng-if="!eventUrl">
     <div class="box" ng-class="{'animated shake': form.$submitted && form.$invalid }">
 
         <div class="box-title">Schedule a New Event</div>
@@ -7,6 +7,8 @@
         </div>
 
         <form novalidate autocomplete="off" name="form" ng-submit="submit()">
+            <div ng-if="page == 1">
+
                 <section class="box-section" user-form form="form" event="event">
 
                 </section>
@@ -14,23 +16,38 @@
                 <section class="box-section" event-form form="form" event="event">
 
                 </section>
+            </div>
+            <div ng-if="page==2">
 
                 <section class="box-section" date-form form="form" event="event">
 
                 </section>
 
+                <section class="box-section" ng-show="event.dates.length" time-form form="form" event="event">
+
+                </section>
+            </div>
+
+            <div ng-if="page==3">
+
             <section class="box-section" participants-form form="form" event="event">
 
             </section>
 
+            </div>
+
+
             <div class="box-controls box-bottom-sticky">
-                <button type="submit" class="btn btn-primary">Create Event</button>
+                <button type="button" ng-if="page!=1" class="btn" ng-click="prevPage()">Back</button>
+                <button type="button" ng-if="page!=3" class="btn" ng-click="nextPage()">Next</button>
+                <button type="submit" ng-if="page==3" class="btn btn-primary">Create Event</button>
             </div>
 
         </form>
     </div>
+
 </div>
-<div ng-show="eventUrl" class="box">
+<div ng-if="eventUrl" class="box">
     <div class="box-message">
             <div class="main-image">
                 <img src="/images/success_large.png" width="100" />

views/index.ejs

@@ -22,6 +22,7 @@
         <meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
         <link rel="stylesheet" href="/css/style.css" media="screen" charset="utf-8">
         <script type="text/javascript" src="/vendor/jquery/dist/jquery.min.js"></script>
+        <script type="text/javascript" src="/vendor/datejs/build/production/date.min.js"></script>
         <script type="text/javascript" src="/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
         <script type="text/javascript" src="/vendor/angular/angular.min.js"></script>
         <script type="text/javascript" src="/vendor/angular-resource/angular-resource.min.js"></script>