Basic user authentication page and provider support

app/assets/javascripts/user/app/app.js.coffee

@@ -1,22 +1,6 @@
 @App = Ember.Application.create
   LOG_TRANSITIONS: true
   rootElement: '#ember-app-container'
-  obtain_token: (message)->
-    message ||= ''
-    auth_win = window.open $obtain_token_url, "_blank", "location=no"
-    auth_win.addEventListener "loadstart", (event)=>
-      if event.url.match 'close_window'
-        user_id = event.url.match(/user_id=([\w+-]+)/)[1]
-        auth_token = event.url.match(/authentication_token=([\w-]+)/)[1]
-        @handleAuthInfo(user_id, auth_token)
-        auth_win.close()
-    true
-  handleAuthInfo: (user_id, auth_token)->
-    Qstorage.setItem 'user_id', user_id
-    Qstorage.setItem 'auth_token', auth_token
-    controller = @__container__.lookup('controller:application')
-    controller.setCurrentList()
-    controller.set 'notice', t('messages.authenticated')
 App.deferReadiness()
 Ember.$.ajaxPrefilter (options) ->
   if options.type.toUpperCase() == 'GET'

app/assets/javascripts/user/app/controllers/sign_in_controller.js.coffee

@@ -0,0 +1,3 @@
+App.SignInController = Ember.Controller.extend
+  actions:
+    signIn: (provider = 'facebook') -> @send 'obtain_token', provider: provider

app/assets/javascripts/user/app/controllers/table_controller.js.coffee

@@ -23,7 +23,6 @@ App.TableController = Ember.ObjectController.extend
       else
         @store.createRecord 'product_order', product: product, price: product.get('price')
     joinOccupiedTable: ->
-      #@secured =>
       Ember.$.post("#{$data_host}/user/join_occupied_table.json", table_id: @get('model.id'))
       @set 'controllers.application.join_request_sent', true # keeps the button deactivated
     toggleProductCategory: (product_category)->

app/assets/javascripts/user/app/modifications/controller_modifications.js.coffee

@@ -8,17 +8,14 @@ ControllerExtensions = Ember.Mixin.create
       else
         callback.call(@, emberError)
     handler
-
+  secured: (callback)->
+    unless Qstorage.getItem('auth_token')
+      return @transitionToRoute 'sign_in'
+    callback.call(@) if callback
 Ember.ArrayController.reopen ControllerExtensions
 Ember.Controller.reopen ControllerExtensions
 Ember.ObjectController.reopen ControllerExtensions
 Ember.Controller.reopen
-  secured: (callback)->
-    unless Qstorage.getItem('auth_token') && typeof(Qstorage.getItem('auth_token')) == 'string' && Qstorage.getItem('auth_token').length > 0
-      return App.obtain_token()
-    @authentication_string = 'auth_token='+Qstorage.getItem('auth_token')
-    @authentication_object = {auth_token: Qstorage.getItem('auth_token')}
-    callback.call(@) if callback
   redirect_to: (route, args...)->
     route = 'index' if route == 'user_root'
     route_object= App.Router.router.recognizer.names[route]
@@ -55,12 +52,6 @@ Ember.Controller.reopen
     #$('#confirm-modal').css('visibility', 'visible').show()
 
 Ember.ArrayController.reopen
-  secured: (callback)->
-    unless Qstorage.getItem('auth_token') && typeof(Qstorage.getItem('auth_token')) == 'string' && Qstorage.getItem('auth_token').length > 0
-      return App.obtain_token()
-    @authentication_string = 'auth_token='+Qstorage.getItem('auth_token')
-    @authentication_object = {auth_token: Qstorage.getItem('auth_token')}
-    callback.call(@) if callback
   redirect_to: (route, options={})->
     route = 'index' if route == 'user_root'
     @transitionToRoute(route).then =>

app/assets/javascripts/user/app/router.js.coffee

@@ -17,3 +17,4 @@ App.Router.map ->
   @route 'error'
   @route 'about'
   @route 'scanning'
+  @route 'sign_in'

app/assets/javascripts/user/app/routes/application_route.js.coffee.erb

@@ -13,9 +13,26 @@ App.ApplicationRoute = Ember.Route.extend
   unauthorized: ->
     Qstorage.setItem('auth_token', '')
     @controllerFor('application').set 'list', null
-    App.obtain_token(t('messages.unauthorized'))
+    @send 'obtain_token'
     @controllerFor('application').redirect_to 'index', message: 'unauthorized'
+
+  handleAuthInfo: (user_id, auth_token)->
+    Qstorage.setItem 'user_id', user_id
+    Qstorage.setItem 'auth_token', auth_token
+    controller = @controllerFor('application')
+    controller.setCurrentList()
+    controller.set 'notice', t('messages.authenticated')
   actions:
+    obtain_token: ( options = {} ) ->
+      provider = options.provider || 'facebook'
+      auth_win = window.open "#{$obtain_token_url}?provider=#{provider}", "_blank", "location=no"
+      auth_win.addEventListener "loadstart", (event)=>
+        if event.url.match 'close_window'
+          user_id = event.url.match(/user_id=([\w+-]+)/)[1]
+          auth_token = event.url.match(/authentication_token=([\w-]+)/)[1]
+          @handleAuthInfo(user_id, auth_token)
+          auth_win.close()
+      true
     openModal: (modalName, model)->
       @controllerFor(modalName).set('model', model)
       @render modalName,
@@ -102,6 +119,7 @@ App.ApplicationRoute = Ember.Route.extend
             message = 'general_error'
           appcontroller.redirect_to 'index', message: message
     scanQr: ->
+      return @transitionTo('sign_in') unless Qstorage.getItem('auth_token')
 <% if Rails.env.user_app? %>
       ar = @
       scanner = cordova.require("cordova/plugin/BarcodeScanner")

app/assets/javascripts/user/app/templates/settings.emblem

@@ -1,10 +1,10 @@
 .settings.page
-  .row: h3=t 'settings.title'
+  .row: .small-12.columns: h3.page-title=t 'settings.title'
   .display-row
     .display-label=t 'settings.language'
     .display-field
       each locale in locales
-        App.SettingsLocaleView locale=locale
+        = view 'settings-locale' locale=locale
   .display-row
     .display-label  
     .display-field: a.button href="./index.html"=t 'settings.reload_application'

app/assets/javascripts/user/app/templates/sign_in.emblem

@@ -0,0 +1,15 @@
+.row
+  .small-12.columns
+    h3.page-title= t 'sign_in.title'
+    p= t 'sign_in.introduction'
+.row
+  .small-12.columns.text-center
+    button.sign-in-button.facebook{ action "signIn" "facebook"}
+      span.icon
+      span.tex Login with Facebook
+.row
+  .small-12.columns.text-center
+    button.sign-in-button.instagram{ action "signIn" "instagram"}
+      span.icon
+      span.tex Login with Instagram
+.row: .small-12.columns: p= t 'sign_in.footer'

app/assets/javascripts/user/flat/application.js.coffee.erb

@@ -7,7 +7,6 @@
 
 @Qstorage = localStorage
 
-
 $.extend($translations.en, <%= I18n.t('user', locale: :en).to_json %>);
 $.extend($translations.nl, <%= I18n.t('user', locale: :nl).to_json %>);
 

app/assets/stylesheets/user/foundation/pages/_sign_in.css.sass

@@ -0,0 +1,15 @@
+.sign-in-button
+  &.facebook
+    +button($bg: #2d4486)
+    .icon
+      @extend .fa, .fa-2x, .fa-facebook
+      margin-right: 10px
+    .text
+      // huh?
+  &.instagram
+    +button($bg: #ddd)
+    .icon
+      @extend .fa, .fa-2x, .fa-instagram
+      margin-right: 10px
+    .text
+      // huh?

app/views/dashboard/close_window.html.erb

@@ -2,8 +2,8 @@
 <html>
 <head>
 <script>
-if(window.parent && window.opener.App && window.opener.App.handleAuthInfo){
+if(window.parent && window.opener.App && window.opener.App.__container__){
-  window.opener.App.handleAuthInfo('<%= params[:user_id] %>', '<%= params[:authentication_token] %>');
+  window.opener.App.__container__.lookup('route:application').handleAuthInfo('<%= params[:user_id] %>', '<%= params[:authentication_token] %>');
   window.close();
 }else{
   localStorage.setItem('auth_token', '<%= params[:authentication_token] %>');

config/locales/user.en.yml

@@ -124,3 +124,11 @@ en:
         submit: Submit feedback
         received: Thank you for your feedback. We appreciate your opinion!
         empty_content: No feedback given
+    sign_in:
+      title: Sign in
+      introduction: |
+        In order to be recognizable for the place where you want to order you have to authenticate using
+        a well known identity platform. Your information will be handled with extreme care and not shared
+        with external parties.
+        <br>
+      footer: <br>