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 }}
+    
+    

app/controllers/registration_controller.rb

@@ -2,5 +2,8 @@ class RegistrationController < BaseController
   layout 'registration'
 
   def index
+    if spree_current_user.nil?
+      redirect_to registration_auth_path(anchor: "login?after_login=/register")
+    end
   end
 end

app/views/layouts/registration.html.haml

@@ -19,7 +19,7 @@
     = render "layouts/bugherd_script"
     = csrf_meta_tags
 
-  %body.off-canvas{"ng-app" => "Darkswarm"}
+  %body.off-canvas{"ng-app" => "Darkswarm", style: 'background-image: url("/assets/home/ofn_bg_1.jpg")' }
     / [if lte IE 8]
       = render partial: "shared/ie_warning"
       = javascript_include_tag "iehack"

app/views/registration/authenticate.html.haml

@@ -0,0 +1 @@
+%div{"ng-controller" => "AuthenticationCtrl"}

app/views/registration/index.html.haml

@@ -1,2 +1 @@
-%div{"ng-controller" => "RegistrationCtrl"}
-%div{"ng-controller" => "AuthenticationCtrl"}
+%div{ "ng-controller" => "RegistrationCtrl" }

config/routes.rb

@@ -6,6 +6,7 @@ Openfoodnetwork::Application.routes.draw do
   get "/map", to: "map#index", as: :map
 
   get "/register", to: "registration#index", as: :registration
+  get "/register/auth", to: "registration#authenticate", as: :registration_auth
 
   resource :shop, controller: "shop" do
     get :products

spec/controllers/registration_controller_spec.rb

@@ -0,0 +1,8 @@
+require 'spec_helper'
+
+describe RegistrationController do
+  it "redirects to authentication page when user not logged in" do
+    get :index
+    response.should redirect_to registration_auth_path(anchor: "login?after_login=/register")
+  end
+end

spec/features/consumer/registration_spec.rb

@@ -0,0 +1,33 @@
+require 'spec_helper'
+
+feature "Registration", js: true do
+  describe "Registering a Profile" do
+    let(:user) { create(:user, password: "password", password_confirmation: "password") }
+
+    it "Allows a logged in user to register a profile" do
+      visit registration_path
+
+      expect(URI.parse(current_url).path).to eq registration_auth_path
+
+      # Logging in
+      fill_in "Email", with: user.email
+      fill_in "Password", with: user.password
+      click_button 'Log in'
+      
+      # Log in was successful, introduction shown
+      expect(page).to have_content "This wizard will step you through creating a Profile on the Open Food Network."
+      expect(URI.parse(current_url).path).to eq registration_path
+
+      # Done reading introduction
+      click_button "Let's get started!"
+      
+      # Filling in details
+      expect(page).to have_content "Woot! First we need to know what sort of enterprise you are:"
+      
+      fill_in 'enterprise_name', with: "My Awesome Enterprise"
+      click_link "both"
+      click_button "Continue"
+    end
+  end
+end
+