Map-Twiddle

authenticators.torii.js

import Ember from 'ember';
import Torii from 'ember-simple-auth/authenticators/torii';

export default Torii.extend({
  torii: Ember.inject.service(),
  store: Ember.inject.service(),
  session: Ember.inject.service()
});

components.map-widget.js

import Ember from 'ember';
import $ from 'jquery';

export default Ember.Component.extend({
  didRender() {
  	// Here I would like to access the model data e.g. Facebook posts so that I can for example create pins for my map
  }
});

initializers.current-user.js

import Ember from 'ember'

export function initialize(application) {
  const service = Ember.ObjectProxy.create({isServiceFactory: true})

  application.register('service:current-user', service, {
    instantiate: false,
    singleton: true
  })
  application.inject('route', 'currentUser', 'service:current-user')
  application.inject('controller', 'currentUser', 'service:current-user')
  application.inject('component', 'currentUser', 'service:current-user')
}

export default {
  name: 'current-user',
  initialize
}

initializers.facebook.js

import ENV from '../config/environment'

export function initialize(application) {
  if (window.FB) {
    return
  }

  application.deferReadiness();

  var fbAsyncInit = function() {
    initFacebook(window.FB)
    application.advanceReadiness()
  }

  loadFacebookSDK()

  window.fbAsyncInit = fbAsyncInit
}

function loadFacebookSDK() {
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0]
    if (d.getElementById(id)) {
      return
    }
    js = d.createElement(s);
    js.id = id
    js.src = "//connect.facebook.net/en_US/sdk.js"
    fjs.parentNode.insertBefore(js, fjs)
  }(document, 'script', 'facebook-jssdk'))
}

function initFacebook(FB) {
  FB.init(ENV.FB)
}

export default {
  name: 'facebook',
  initialize: initialize
}

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('map');
});

export default Router;

routes.application.js

import Ember from 'ember';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin'

export default Ember.Route.extend(ApplicationRouteMixin, {
  fetchCurrentUser() {
    const data = this.get('session.data.authenticated');
    const {accessToken} = data;

    if (accessToken) {
      return new Promise(resolve => {
        FB.api('/me?fields=name&access_token=' + accessToken, response => {
          resolve()
        })
      })
    }
  },

  model() {
    return this.fetchCurrentUser();
  },

  beforeModel(transition) {
    this._super(transition);
    if (this.get('session.isAuthenticated')) {
      return this.fetchCurrentUser()
    }
  },

  actions: {
    login() {
      return this
        .get('session')
        .authenticate('authenticator:torii', 'facebook-connect')
        .then(() => {
          this.fetchCurrentUser();
        })
        .catch(err => console.error(err));
    },

    sessionAuthenticationSucceeded() {
      return this
        .fetchCurrentUser()
        .then(() => this.transitionTo('world'))
    },

    logout() {
      return this
        .get('session')
        .invalidate()
    }
  }
});

routes.index.js

import Ember from 'ember';
import UnauthenticatedRouteMixin from 'ember-simple-auth/mixins/unauthenticated-route-mixin';

export default Ember.Route.extend(UnauthenticatedRouteMixin);

routes.map.js

import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin);

templates.application.hbs

{{outlet}}

templates.components.map-widget.hbs

<div id="map-container"></div>
{{yield}}

templates.index.hbs

{{map-widget}}

templates.map.hbs

{{map-widget}}

twiddle.json

{
  "version": "0.8.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.1",
    "ember-template-compiler": "2.5.1"
  }
}