Instagram Login/Registration (#2562)

* Add instagram login/registration

* Add browser policy

* Fix user name not showing on navbar

* Add styling to instagram button

* browser policy for instagram images

* add instagram translation

* sign in formatting

* Display user's profile name

* revert padding, was applying to incorrect location

* update browser policy

.meteor/packages

@@ -29,7 +29,7 @@ logging@1.1.17
 reload@1.1.11
 ejson@1.0.13
 less@2.7.9
-service-configuration@1.0.11
+service-configuration
 mdg:validated-method
 shell-server@0.2.4
 dynamic-import@0.1.1
@@ -93,3 +93,4 @@ johanbrook:publication-collector
 
 # Custom Packages
 abernix:standard-minifier-js@2.1.0-beta.0
+bozhao:accounts-instagram

.meteor/versions

@@ -26,6 +26,7 @@ blaze@2.3.2
 blaze-html-templates@1.1.2
 blaze-tools@1.0.10
 boilerplate-generator@1.1.1
+bozhao:accounts-instagram@0.2.2
 browser-policy@1.1.0
 browser-policy-common@1.0.11
 browser-policy-content@1.1.0

client/modules/accounts/components/auth/loginButtons.js

@@ -33,6 +33,7 @@ class LoginButtons extends Component {
 
               {this.props.currentView === "loginFormSignInView" &&
                 <span>
+                  &nbsp;
                   <Translation defaultValue="Sign in with"  i18nKey="accountsUI.signInWith" />
                 </span>
               }

client/modules/accounts/containers/dropdown/mainDropdownContainer.js

@@ -70,18 +70,21 @@ class MainDropdownContainer extends Component {
 
 function getCurrentUser() {
   const shopId = Reaction.getShopId();
-  const user = Accounts.user();
+  const user = Accounts.user() || {};
 
   if (!shopId || typeof user !== "object") {
     return null;
   }
 
+
   // shoppers should always be guests
   const isGuest = Roles.userIsInRole(user, "guest", shopId);
   // but if a user has never logged in then they are anonymous
   const isAnonymous = Roles.userIsInRole(user, "anonymous", shopId);
 
-  return isGuest && !isAnonymous ? user : null;
+  const account = Collections.Accounts.findOne(user._id);
+
+  return isGuest && !isAnonymous ? account : null;
 }
 
 function getUserGravatar(currentUser, size) {

client/modules/accounts/helpers/util.js

@@ -10,7 +10,8 @@ function capitalize(str) {
 const providers = {
   Facebook: {},
   Google: {},
-  Twitter: {}
+  Twitter: {},
+  Instagram: {}
 };
 
 providers.Facebook.fields = function () {
@@ -34,6 +35,13 @@ providers.Twitter.fields = function () {
   ];
 };
 
+providers.Instagram.fields = function () {
+  return [
+    { property: "clientId", label: "Client ID" },
+    { property: "secret", label: "Client secret" }
+  ];
+};
+
 export class ServiceConfigHelper {
   availableServices() {
     const services = Package["accounts-oauth"] ? Accounts.oauth.serviceNames() : [];

client/modules/accounts/templates/profile/profile.js

@@ -1,7 +1,9 @@
 import { Meteor } from "meteor/meteor";
 import { Template } from "meteor/templating";
+import { Roles } from "meteor/alanning:roles";
 import { ReactiveVar } from "meteor/reactive-var";
 import { Reaction } from "/client/api";
+import { i18next } from  "/client/api";
 import * as Collections from "/lib/collections";
 
 /**
@@ -58,6 +60,30 @@ Template.accountProfile.helpers({
     return Collections.Accounts.findOne();
   },
 
+  /**
+   * User's display name
+   * @return {String} display name
+   */
+  displayName() {
+    const userId = Meteor.userId() || {};
+    const user = Collections.Accounts.findOne(userId);
+
+    if (user) {
+      if (user.name) {
+        return user.name;
+      } else if (user.username) {
+        return user.username;
+      } else if (user.profile && user.profile.name) {
+        return user.profile.name;
+      }
+    }
+
+    if (Roles.userIsInRole(user._id || user.userId, "account/profile",
+      Reaction.getShopId())) {
+      return i18next.t("accountsUI.guest", { defaultValue: "Guest" });
+    }
+  },
+
   /**
    * Returns the address book default view
    * @return {String} "addressBookGrid" || "addressBookAdd"

private/data/i18n/en.json

@@ -546,6 +546,7 @@
         "facebook": "Facebook",
         "google": "Google",
         "github": "GitHub",
+        "instagram": "Instagram",
         "meetup": "Meetup",
         "ok": "Ok",
         "twitter": "Twitter",

server/security/policy.js

@@ -37,6 +37,7 @@ BrowserPolicy.content.allowOriginForAll("*.facebook.com");
 BrowserPolicy.content.allowOriginForAll("*.fbcdn.net");
 BrowserPolicy.content.allowOriginForAll("connect.facebook.net");
 BrowserPolicy.content.allowOriginForAll("*.googleusercontent.com");
+BrowserPolicy.content.allowOriginForAll("*.cdninstagram.com");
 
 BrowserPolicy.content.allowImageOrigin("fbcdn-profile-a.akamaihd.net");
 BrowserPolicy.content.allowImageOrigin("secure.gravatar.com");