Added support for custom oauth2 connections

README.md

@@ -154,14 +154,27 @@ var options = {
   theme: {
     labeledSubmitButton: false,
     logo: "https://example.com/assets/logo.png",
-    primaryColor: "green"
+    primaryColor: "green",
+    authButtons: {
+      connectionName: {
+        displayName: "...", 
+        primaryColor: "...", 
+        foregroundColor: "...", 
+        icon: "url(...)"
+      }
+    }
   }
 };
 ```
 
 - **labeledSubmitButton {Boolean}**: Indicates whether or not the submit button should have a label. Defaults to `true`. When set to `false` a icon will be shown. The labels can be customized through the `languageDictionary`.
 - **logo {String}**: Url for an image that will be placed in the Lock's header. Defaults to Auth0's logo.
 - **primaryColor {String}**: Defines the primary color of the Lock, all colors used in the widget will be calculated from it. This option is useful when providing a custom `logo` to ensure all colors go well together with the logo's color palette. Defaults to `"#ea5323"`.
+- **authButtons {Object}**: Allows the customization of the custom oauth2 login buttons.
+  + **displayName {String}**: The name to show instead of the connection name.
+  + **primaryColor {String}**: The button's background color. Defaults to `"#eb5424"`.
+  + **foregroundColor {String}**: The button's text color. Defaults to `"#FFFFFF"`.
+  + **icon {String}**: The connection's icon. It should be a valid CSS `background-image` value. For example:`"url(http://site.com/logo.png)"`.
 
 #### Authentication options
 

src/connection/social/index.js

@@ -52,6 +52,9 @@ export function initSocial(m, options) {
 }
 
 export function displayName(connection) {
+  if (["oauth1", "oauth2"].indexOf(connection.get("strategy")) !== -1) {
+    return connection.get("name");
+  }
   return STRATEGIES[connection.get("strategy")];
 }
 
@@ -71,6 +74,10 @@ export function socialConnections(m) {
   return l.connections(m, "social");
 }
 
+export function authButtonsTheme(m) {
+  return l.ui.authButtonsTheme(m);
+}
+
 export function useBigButtons(m, notFoundLimit) {
   const style = get(m, "socialButtonStyle");
   return style

src/core/client/index.js

@@ -39,6 +39,8 @@ function strategyNameToConnectionType(str) {
     return "social";
   } else if (ENTERPRISE_STRATEGIES[str]) {
     return "enterprise";
+  } else if (["oauth1", "oauth2"].indexOf(str) !== -1) {
+    return "social";
   } else {
     return "unknown";
   }

src/core/index.js

@@ -102,7 +102,7 @@ export function stopRendering(m) {
 function extractUIOptions(id, options) {
   const closable = options.container ? false : undefined === options.closable ? true : !!options.closable;
   const theme = options.theme || {};
-  const { labeledSubmitButton, logo, primaryColor } = theme;
+  const { labeledSubmitButton, logo, primaryColor, authButtons } = theme;
 
   const avatar = options.avatar !== null;
   const customAvatarProvider = options.avatar
@@ -127,7 +127,8 @@ function extractUIOptions(id, options) {
     mobile: undefined === options.mobile ? false : !!options.mobile,
     popupOptions: undefined === options.popupOptions ? {} : options.popupOptions,
     primaryColor: typeof primaryColor === "string" ? primaryColor : undefined,
-    rememberLastLogin: undefined === options.rememberLastLogin ? true : !!options.rememberLastLogin
+    rememberLastLogin: undefined === options.rememberLastLogin ? true : !!options.rememberLastLogin,
+    authButtonsTheme: typeof authButtons === "object" ? authButtons : {}
   });
 }
 
@@ -149,6 +150,7 @@ export const ui = {
   mobile: lock => getUIAttribute(lock, "mobile"),
   popupOptions: lock => getUIAttribute(lock, "popupOptions"),
   primaryColor: lock => getUIAttribute(lock, "primaryColor"),
+  authButtonsTheme: lock => getUIAttribute(lock, "authButtonsTheme"),
   rememberLastLogin: m => tget(
     m,
     "rememberLastLogin",

src/field/social/social_buttons_pane.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import AuthButton from '../../ui/button/auth_button';
 import * as l from '../../core/index';
 import { logIn } from '../../quick-auth/actions';
-import { displayName, socialConnections } from '../../connection/social/index';
+import { displayName, socialConnections, authButtonsTheme } from '../../connection/social/index';
 
 export default class SocialButtonsPane extends React.Component {
 
@@ -21,15 +21,26 @@ export default class SocialButtonsPane extends React.Component {
     const headerText = instructions || null;
     const header = headerText && <p>{headerText}</p>;
 
-    const buttons = socialConnections(lock).map(x => (
-      <AuthButton
+    const themes = authButtonsTheme(lock);
+
+    const buttons = socialConnections(lock).map(x => {
+      const buttonTheme = themes.get(x.get("name"));
+      const connectionName = buttonTheme && buttonTheme.get("displayName");
+      const primaryColor = buttonTheme && buttonTheme.get("primaryColor");
+      const foregroundColor = buttonTheme && buttonTheme.get("foregroundColor");
+      const icon = buttonTheme && buttonTheme.get("icon");
+
+      return(<AuthButton
         isBig={bigButtons}
         key={x.get("name")}
-        label={labelFn(signUp ? "signUpWithLabel" : "loginWithLabel", displayName(x))}
+        label={labelFn(signUp ? "signUpWithLabel" : "loginWithLabel", connectionName || displayName(x))}
         onClick={() => logIn(l.id(lock), x)}
         strategy={x.get("strategy")}
-      />
-    ));
+        primaryColor={primaryColor}
+        foregroundColor={foregroundColor}
+        icon={icon}
+      />)
+    });
 
     const loading = showLoading
       && <div className="auth0-loading-container">

src/quick-auth/actions.js

@@ -10,7 +10,7 @@ export function skipQuickAuth(id) {
 export function logIn(id, connection, loginHint) {
   const m = read(getEntity, "lock", id);
   const connectionScopes = l.auth.connectionScopes(m);
-  const scopes = connectionScopes.get(connection.get("strategy"));
+  const scopes = connectionScopes.get(connection.get("name"));
   const params = {
     connection: connection.get("name"), 
     connection_scope: scopes ? scopes.toJS() : []

src/ui/button/auth_button.jsx

@@ -1,21 +1,35 @@
 import React from 'react';
 
 const AuthButton = (props) => {
-  const { disabled, isBig, label, onClick, strategy } = props;
+  const { 
+    disabled, 
+    isBig, 
+    label, 
+    onClick, 
+    strategy, 
+    icon,
+    primaryColor,
+    foregroundColor 
+  } = props;
 
   let className = "auth0-lock-social-button";
   if (isBig) className += " auth0-lock-social-big-button";
 
+  const backgroundStyle = primaryColor ? { backgroundColor: primaryColor } : {};
+  const foregroundStyle = foregroundColor ? { color: foregroundColor } : {};
+  const iconStyle = icon ? { backgroundImage: icon } : {};
+
   return (
     <button
       className={className}
       data-provider={strategy}
       disabled={disabled}
       onClick={onClick}
+      style={backgroundStyle}
       type="button"
     >
-      <div className="auth0-lock-social-button-icon" />
-      <div className="auth0-lock-social-button-text">
+      <div className="auth0-lock-social-button-icon" style={iconStyle} />
+      <div className="auth0-lock-social-button-text" style={foregroundStyle} >
         {label}
       </div>
     </button>
@@ -27,7 +41,10 @@ AuthButton.propTypes = {
   isBig: React.PropTypes.bool.isRequired,
   label: React.PropTypes.string.isRequired,
   onClick: React.PropTypes.func.isRequired,
-  strategy: React.PropTypes.string.isRequired
+  strategy: React.PropTypes.string.isRequired,
+  icon: React.PropTypes.string,
+  primaryColor: React.PropTypes.string,
+  foregroundColor: React.PropTypes.string
 };
 
 AuthButton.defaultProps = {