From c92aa41e28833034de42e3cfbd4f101cbdc8abba Mon Sep 17 00:00:00 2001 From: Rob H Date: Wed, 20 Aug 2014 10:33:32 +1000 Subject: [PATCH] Adding introduction and details pages to registration process --- .../registration_controller.js.coffee | 13 ++++--- .../services/registration_service.js.coffee | 26 ++++++++++++++ .../templates/registration.html.haml | 8 +++++ .../templates/registration/details.html.haml | 34 +++++++++++++++++++ .../registration/introduction.html.haml | 32 +++++++++++++++++ .../templates/registration/steps.html.haml | 6 ++++ app/controllers/registration_controller.rb | 3 ++ app/views/layouts/registration.html.haml | 2 +- app/views/registration/authenticate.html.haml | 1 + app/views/registration/index.html.haml | 3 +- config/routes.rb | 1 + .../registration_controller_spec.rb | 8 +++++ spec/features/consumer/registration_spec.rb | 33 ++++++++++++++++++ 13 files changed, 163 insertions(+), 7 deletions(-) create mode 100644 app/assets/javascripts/darkswarm/services/registration_service.js.coffee create mode 100644 app/assets/javascripts/templates/registration.html.haml create mode 100644 app/assets/javascripts/templates/registration/details.html.haml create mode 100644 app/assets/javascripts/templates/registration/introduction.html.haml create mode 100644 app/assets/javascripts/templates/registration/steps.html.haml create mode 100644 app/views/registration/authenticate.html.haml create mode 100644 spec/controllers/registration_controller_spec.rb create mode 100644 spec/features/consumer/registration_spec.rb diff --git a/app/assets/javascripts/darkswarm/controllers/registration_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/registration_controller.js.coffee index 1e26f157d1..33e4d03af4 100644 --- a/app/assets/javascripts/darkswarm/controllers/registration_controller.js.coffee +++ b/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 = {} \ No newline at end of file diff --git a/app/assets/javascripts/darkswarm/services/registration_service.js.coffee b/app/assets/javascripts/darkswarm/services/registration_service.js.coffee new file mode 100644 index 0000000000..0d7bfd2e73 --- /dev/null +++ b/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 "/" \ No newline at end of file diff --git a/app/assets/javascripts/templates/registration.html.haml b/app/assets/javascripts/templates/registration.html.haml new file mode 100644 index 0000000000..f6dcea10fd --- /dev/null +++ b/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 diff --git a/app/assets/javascripts/templates/registration/details.html.haml b/app/assets/javascripts/templates/registration/details.html.haml new file mode 100644 index 0000000000..17020259c1 --- /dev/null +++ b/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')" } } + + \ No newline at end of file diff --git a/app/assets/javascripts/templates/registration/introduction.html.haml b/app/assets/javascripts/templates/registration/introduction.html.haml new file mode 100644 index 0000000000..bca22b7567 --- /dev/null +++ b/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')" } } + \ No newline at end of file diff --git a/app/assets/javascripts/templates/registration/steps.html.haml b/app/assets/javascripts/templates/registration/steps.html.haml new file mode 100644 index 0000000000..c54d0b947b --- /dev/null +++ b/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 }} + + \ No newline at end of file diff --git a/app/controllers/registration_controller.rb b/app/controllers/registration_controller.rb index 4aa170645f..c1d79db49c 100644 --- a/app/controllers/registration_controller.rb +++ b/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 diff --git a/app/views/layouts/registration.html.haml b/app/views/layouts/registration.html.haml index ff81ba8871..8946a27de1 100644 --- a/app/views/layouts/registration.html.haml +++ b/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" diff --git a/app/views/registration/authenticate.html.haml b/app/views/registration/authenticate.html.haml new file mode 100644 index 0000000000..2b65757a5d --- /dev/null +++ b/app/views/registration/authenticate.html.haml @@ -0,0 +1 @@ +%div{"ng-controller" => "AuthenticationCtrl"} \ No newline at end of file diff --git a/app/views/registration/index.html.haml b/app/views/registration/index.html.haml index 7221f2e9fe..a1e8da858d 100644 --- a/app/views/registration/index.html.haml +++ b/app/views/registration/index.html.haml @@ -1,2 +1 @@ -%div{"ng-controller" => "RegistrationCtrl"} -%div{"ng-controller" => "AuthenticationCtrl"} \ No newline at end of file +%div{ "ng-controller" => "RegistrationCtrl" } \ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb index f503fba839..6447715926 100644 --- a/config/routes.rb +++ b/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 diff --git a/spec/controllers/registration_controller_spec.rb b/spec/controllers/registration_controller_spec.rb new file mode 100644 index 0000000000..458a5fc33d --- /dev/null +++ b/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 diff --git a/spec/features/consumer/registration_spec.rb b/spec/features/consumer/registration_spec.rb new file mode 100644 index 0000000000..c0bdba9810 --- /dev/null +++ b/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 + \ No newline at end of file