Adding introduction and details pages to registration process

app/assets/javascripts/darkswarm/controllers/registration_controller.js.coffee

@@ -1,5 +1,10 @@
-Darkswarm.controller "RegistrationCtrl", ($scope, $location, AuthenticationService, CurrentUser)->
-  if CurrentUser is undefined
-    $location.search('after_login', '/register/')
-    AuthenticationService.open()
+Darkswarm.controller "RegistrationCtrl", ($scope, RegistrationService, CurrentUser) ->
+  $scope.current_user = CurrentUser
+  
+  $scope.currentStep = RegistrationService.currentStep
+  $scope.select = RegistrationService.select
 
+  $scope.steps = ['details']
+  # ,'address','contact','about','images','social'
+
+  $scope.enterprise = {}

app/assets/javascripts/darkswarm/services/registration_service.js.coffee

@@ -0,0 +1,26 @@
+Darkswarm.factory "RegistrationService", (Navigation, $modal, $location)->
+
+  new class RegistrationService
+    current_step: 'introduction'
+
+    constructor: ->
+      @open()
+
+    open: =>
+      @modalInstance = $modal.open
+        templateUrl: 'registration.html'
+        windowClass: "login-modal medium"
+      @modalInstance.result.then @close, @close
+      @select @current_step
+
+    select: (step)=>
+      @current_step = step
+      Navigation.navigate '/' + @current_step
+
+    active: Navigation.active
+    
+    currentStep: =>
+      @current_step
+
+    close: ->
+      Navigation.navigate "/"

app/assets/javascripts/templates/registration.html.haml

@@ -0,0 +1,8 @@
+%div.registration-modal{"ng-controller" => "RegistrationCtrl"}
+  %div{ ng: { show: "currentStep() == 'introduction'" } }
+    %ng-include{ src: "'registration/introduction.html'" }
+  %div{ ng: { repeat: 'step in steps', show: "currentStep() == step" } }
+    %ng-include{ src: "'registration/'+ step + '.html'" }
+        
+%a.close-reveal-modal{"ng-click" => "$close()"}  
+  %i.ofn-i_009-close

app/assets/javascripts/templates/registration/details.html.haml

@@ -0,0 +1,34 @@
+%div
+  .row
+    %h2 Let's Get Started
+  .row
+    %h5 Woot! First we need to know what sort of enterprise you are:
+  %ng-include{ src: "'registration/steps.html'" }
+  .row
+    .small-12.columns{ style: 'background-color: #fff;'}
+      .row
+        %label{ for: 'enterprise_name'} Enterprise Name:
+      .row
+        %input.small-12.columns{ id: 'enterprise_name', placeholder: "eg. Charlie's Awesome Farm" }
+      .row
+        Choose One:
+      .row{ 'data-equalizer' => true }
+        %a#producer.small-4.columns{ 'data-equalizer-watch' => true, style: 'background-color: #efefef;', href: "#", ng: { click: "enterprise.type = 'producer'" } }
+          %div.small-1.columns
+          %div.small-11.columns
+            %h6 I'm A Producer
+            %span Producers are anyone making things to eat & drink - whether you grow it, raise it, brew it, bake it, ferment it, milk it or mould it.
+        %a#hub.small-4.columns{ 'data-equalizer-watch' => true, style: 'background-color: #efefef;', href: "#", ng: { click: "enterprise.type = 'hub'" } }
+          %div.small-1.columns
+          %div.small-11.columns
+            %h6 I'm A Hub
+            %span Hubs are anyone connecting the producer to the eater. Hubs may be a co-op, and independent retailer, a buying group, a CSA box scheme, a farm-gate stall, a wholesaler, etc...
+        %a#both.small-4.columns{ 'data-equalizer-watch' => true, style: 'background-color: #efefef;', href: "#", ng: { click: "enterprise.type = 'both'" } }
+          %div.small-1.columns
+          %div.small-11.columns
+            %h6 I'm Both
+            %span Hey there, Jack-of-all-trades! Not only do you produce yummy things to eat and/or drink, you also want to connect directly to those who love buying your products!
+  .row
+    %input.button.primary{ type: "button", value: "Continue", ng: { click: "select('address')" } }
+        
+    

app/assets/javascripts/templates/registration/introduction.html.haml

@@ -0,0 +1,32 @@
+%div
+  .row
+    %h2 Hi there!
+  .row
+    %h5 This wizard will step you through creating a Profile on the Open Food Network.
+  .row
+    .small-2.columns  
+    .small-10.columns{ style: 'line-height: 150%;'} Your profile gives you an online presence on the Open Food Network, allowing you to easily connect with potential customers or partners. You can always choose to update your info later, as well as choose to upgrade your Profile to and Online Store, where you can sell products, track orders and receive payments.
+  %br
+  .row
+    .small-12.columns{ 'data-equalizer' => true }
+      .small-6.columns{ style: 'font-size: 80%' }
+        %span Creating a profile usually takes about 5-10 minutes.
+        %h6 You'll need the following:
+        %ol{ style: 'font-size: 100%' }
+          %li Your enterprise address and contact details
+          %li Your logo image
+          %li A pretty image to serve as your profile header
+          %li Some 'About Us' text
+      .small-6.columns{ style: 'background-color: #FFFFFF;'}
+        %h6 Your profile entitles you to:
+        A searchable listing in Hub / Producer view
+        %br
+        A pin on the OFN map to help users find you
+  .row
+    .large-12.columns
+      .row
+        Ready to go?
+      %br
+      .row
+        %input.button.primary{ type: "button", value: "Let's get started!", ng: { click: "select('details')" } }
+  

app/assets/javascripts/templates/registration/steps.html.haml

@@ -0,0 +1,6 @@
+.row
+  .small-2.columns{ ng: { repeat: 'step in steps', class: "{active: currentStep == step}" } }
+    %div{ style: 'text-transform: uppercase; text-align: center;background-color: #000; color: #fff;'}
+      {{ step }}
+    
+