From 31255761f23313677230ca0400aee8130ea42e41 Mon Sep 17 00:00:00 2001 From: German Lena Date: Mon, 17 Oct 2016 15:04:10 -0300 Subject: [PATCH 1/8] added support for custom oauth2 connections --- css/social_icons.css | 6 ++++++ src/connection/social/index.js | 7 +++++++ src/core/client/index.js | 2 ++ src/core/index.js | 6 ++++-- src/field/social/social_buttons_pane.jsx | 23 +++++++++++++++++------ src/ui/button/auth_button.jsx | 24 ++++++++++++++++++++---- 6 files changed, 56 insertions(+), 12 deletions(-) diff --git a/css/social_icons.css b/css/social_icons.css index 8b10d580d..0d3261e2d 100644 --- a/css/social_icons.css +++ b/css/social_icons.css @@ -36,6 +36,9 @@ .auth0-lock-social-button[data-provider="github"] { background-color: #333; } +.auth0-lock-social-button[data-provider="oauth2"] { + background-color: #eb5424; +} .auth0-lock-social-button[data-provider="paypal"] { background-color: #009cde; } @@ -156,6 +159,9 @@ .auth0-lock-social-button[data-provider^=miicard] .auth0-lock-social-button-icon { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjkxcHgiIGhlaWdodD0iNjFweCIgdmlld0JveD0iMCAwIDkxIDYxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy40ICgxNTU4OCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+bWlpY2FyZDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxnIGlkPSJtaWljYXJkIiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPHBhdGggZD0iTTQxLjUsNS42ODggQzY0LjE4OCwyLjU2MyA3NywwLjg3NSA3Ny42MjUsMC44NzUgQzc5LjQzOCwwLjg3NSA4MC44NzUsMS4zMTMgODIuNDM4LDIuMzc1IEM4My44MTMsMy4zNzUgODUuMDAxLDUuMTg4IDg1LjM3Niw2LjgxMyBDODUuNjg5LDguMzc2IDkwLjMxNCw0Mi41NjMgOTAuMzE0LDQzLjUwMSBDOTAuMzE0LDQ3LjE4OSA4Ny40MzksNTAuNTY0IDgzLjgxNCw1MS4xMjYgQzgwLjgxNCw1MS42MjYgMTMuMTg5LDYwLjc1MSAxMi41NjQsNjAuNzUxIEM5LjE4OSw2MC43NTEgNi4zMTQsNTguNjI2IDUuMTg5LDU1LjM3NiBDNS4wMDEsNTQuOTM4IDQuMTI2LDQ4LjYyNiAyLjUwMSwzNi44MTMgQzAuMjUxLDIwLjU2MyAwLjA2MywxOC43NSAwLjA2MywxNy43NSBDMC4xMjYsMTYuNSAwLjQzOCwxNS41NjIgMC45MzgsMTQuNSBDMS45MzgsMTIuNjg3IDMuNzUxLDExLjE4NyA1LjY4OCwxMC42ODcgQzYuMDYzLDEwLjU2MiAyMi4xODgsOC4zMTIgNDEuNTAxLDUuNjg3IEw0MS41LDUuNjg4IFogTTYyLjU2Myw4LjE4OCBDNjEuMzEzLDcuODEzIDYwLjEyNSw4LjA2MyA1OS4xODgsOS4wMDEgQzU4LjMxMyw5Ljg3NiA1OC4wNjMsMTEuMDAxIDU4LjQzOCwxMi4zMTQgQzU4LjY4OCwxMy4xODkgNTkuNTYzLDE0LjA2NCA2MC4zNzYsMTQuMjUyIEM2MS42ODksMTQuNjI3IDYzLjAwMSwxNC4zMTUgNjMuODc2LDEzLjM3NyBDNjUuMzE0LDExLjY4OSA2NC42MjYsOC44NzcgNjIuNTYzLDguMTg5IEw2Mi41NjMsOC4xODggWiBNNzguNjI1LDguMTg4IEM3Ny4zMTIsNy44MTMgNzYuMTI1LDguMDYzIDc1LjI1LDkuMDAxIEM3NC4zMTIsOS44NzYgNzQuMDYyLDExLjAwMSA3NC40MzcsMTIuMzE0IEM3NC42ODcsMTMuMTg5IDc1LjU2MiwxNC4wNjQgNzYuMzc1LDE0LjI1MiBDNzcuNzUsMTQuNjI3IDc5LjA2MywxNC4zMTUgNzkuODc1LDEzLjM3NyBDODEuMzc1LDExLjY4OSA4MC42ODgsOC44NzcgNzguNjI1LDguMTg5IEw3OC42MjUsOC4xODggWiBNMjQuMzEzLDE4LjU2MyBDMjMuOTM4LDE4LjQzOCAyMy4wNjMsMTguMzEzIDIyLjI1LDE4LjMxMyBDMTguNTYyLDE4LjE4OCAxNS42ODcsMTkuNjg4IDEzLjU2MiwyMi45MzggQzEzLjM3NCwyMy4yNTEgMTMuMzc0LDIzLjE4OCAxMy4xODcsMjAuMDYzIEwxMy4xMjQsMTguODEzIEwxMC44MTEsMTguODEzIEM4LjgxMSwxOC44NzYgOC40OTgsMTguODc2IDguNTYxLDE5LjA2MyBDOC42MjQsMTkuMTI2IDguNjI0LDI1LjM3NiA4LjY4NiwzMi44NzYgTDguNzQ5LDQ2LjUwMSBMMTMuODc0LDQ2LjUwMSBMMTMuOTk5LDI4LjA2MyBMMTQuMjQ5LDI3LjQzOCBDMTQuODEyLDI2LjA2MyAxNS4zNzQsMjUuMjUgMTYuMTI0LDI0LjQzOCBDMTguMDYyLDIyLjUgMjAuNjI0LDIyLjA2MyAyMi44MTIsMjMuMTg4IEMyNC4xMjUsMjMuODEzIDI1LjEyNSwyNS4yNTEgMjUuNjg3LDI3LjA2MyBDMjUuODc1LDI3LjkzOCAyNS44NzUsMjguMTI2IDI1LjkzNywzNy4yNTEgTDI2LDQ2LjU2NCBMMzEuMDYzLDQ2LjU2NCBMMzEuMTI2LDM3LjI1MSBDMzEuMTI2LDI4LjAwMSAzMS4xMjYsMjguMDAxIDMxLjM3NiwyNy4yNTEgQzMxLjg3NiwyNS43NTEgMzMuMDY0LDI0LjI1MSAzNC4yNTEsMjMuNTAxIEMzNS40MzksMjIuNjg4IDM3LjEyNiwyMi40MzggMzguNTAxLDIyLjY4OCBDNDAuNjI2LDIzLjEyNiA0Mi4wNjQsMjQuNjI2IDQyLjgxNCwyNy4zMTMgQzQzLjA2NCwyOC4xODggNDMuMDY0LDI4LjMxMyA0My4xMjcsMzcuMzc2IEw0My4xOSw0Ni41MDEgTDQ4LjMxNSw0Ni41MDEgTDQ4LjMxNSwzNy41NjMgQzQ4LjMxNSwyOC4xODggNDguMjUyLDI3LjY4OCA0Ny43NTIsMjUuNjg4IEM0Ni44MTQsMjEuODc1IDQ0LjYyNywxOS40MzggNDEuMzE0LDE4LjUgQzQwLjI1MSwxOC4yNSAzNy41NjQsMTguMjUgMzYuNTAxLDE4LjUgQzM1LjQzOCwxOC44MTMgMzQuMjUxLDE5LjMxMyAzMy4zMTMsMTkuOTM4IEMzMi4zNzUsMjAuNjI2IDMwLjkzOCwyMi4xMjYgMzAuMzEzLDIzLjAwMSBMMjkuODc1LDIzLjY4OSBMMjkuNSwyMi44NzYgQzI4LjQzNywyMC42ODggMjYuNSwxOS4xMjYgMjQuMzEyLDE4LjU2MyBMMjQuMzEzLDE4LjU2MyBaIE02NC4xMjUsMzIuNjg4IEw2NC4xMjUsMTguODc1IEw2MS41LDE4LjgxMiBDNTkuNSwxOC44MTIgNTguOTM3LDE4LjgxMiA1OC44NzUsMTguOTM3IEM1OC44MTMsMTkuMDYyIDU4LjgxMiwyNS4yNSA1OC44MTIsMzIuODEyIEw1OC44NzUsNDYuNSBMNjQuMTI1LDQ2LjUgTDY0LjEyNSwzMi42ODcgTDY0LjEyNSwzMi42ODggWiBNODAuMTI1LDMyLjY4OCBMODAuMTI1LDE4Ljg3NSBMNzcuNTYyLDE4LjgxMiBDNzUuNDk5LDE4LjgxMiA3NC45MzcsMTguODEyIDc0Ljg3NCwxOC45MzcgTDc0Ljg3NCw0Ni41IEw4MC4xMjQsNDYuNSBMODAuMTI0LDMyLjY4NyBMODAuMTI1LDMyLjY4OCBaIiBpZD0iU2hhcGUiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="); } +.auth0-lock-social-button[data-provider^=oauth2] .auth0-lock-social-button-icon { + background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNTAuMSAxNjcuOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTUwLjEgMTY3LjgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSIzMSwxMzUuOCAzMC45LDEzNS44IDc1LjEsMTY3LjggMTE5LjIsMTM1LjggNzUuMSwxMDMuNyAJIi8+DQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTMuNyw1MS45TDMuNyw1MS45Qy02LjYsODMuNiw1LjMsMTE3LjIsMzEsMTM1LjhsMCwwbDE2LjktNTEuOUwzLjcsNTEuOWw1NC41LDBMNzUuMSwwbDAsMEgyMC41TDMuNyw1MS45eg0KCQkiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTQ2LjUsNTEuOUwxNDYuNSw1MS45TDE0Ni41LDUxLjlMMTI5LjYsMEg3NS4xbDAsMGwxNi45LDUxLjlMMTQ2LjUsNTEuOWwtNDQuMSwzMi4xbDE2LjgsNTEuOQ0KCQlDMTQ2LjIsMTE2LjIsMTU2LjMsODIsMTQ2LjUsNTEuOXoiLz4NCjwvZz4NCjwvc3ZnPg0K"); +} .auth0-lock-social-button[data-provider^=paypal] .auth0-lock-social-button-icon { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYzcHgiIGhlaWdodD0iNjVweCIgdmlld0JveD0iMCAwIDYzIDY1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy40ICgxNTU4OCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+cGF5cGFsPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9InBheXBhbCIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgZmlsbD0iI0ZGRkZGRiI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDU3LjY4OCBMMTYuNDM4LDU3LjY4OCBMMjAuNTAxLDM4Ljc1IEwzMi4xODksMzguNzUgQzM3LjkzOSwzOC43NSA0Mi44NzcsMzcuMTI1IDQ3LjEyNywzMy43NSBDNTEuMzc3LDMwLjQzNyA1NC4xMjcsMjUuODc1IDU1LjM3NywyMC4wNjIgQzU2LjAwMiwxNi43NDkgNTYuMDAyLDEzLjg3NCA1NS4zNzcsMTEuNDM3IEM1NC43NTIsOSA1My42MjcsNi45OTkgNTIuMDY0LDUuMzc0IEM1MC40MzksMy44MTEgNDguNjI2LDIuNjI0IDQ2LjYyNiwxLjgxMSBDNDQuNjI2LDEuMDYxIDQyLjU2MywwLjY4NiA0MC40MzgsMC42ODYgTDEyLjQzOCwwLjY4NiBMMCw1Ny42ODggWiBNNi4zNzUsNjQuNjg4IEw3LjEyNSw2MS41NjMgTDIwLjkzOCw2MS41NjMgTDI0LjkzOCw0Mi42ODggTDM2LjY4OCw0Mi42ODggQzQyLjM3Niw0Mi42ODggNDcuMzc2LDQxIDUxLjYyNiwzNy42ODggQzU1Ljg3NiwzNC4zNzYgNTguNjI2LDI5LjgxMyA1OS44MTQsMjQgQzYwLjc1MiwxOS44NzUgNjAuNTAyLDE2LjI1IDU5LjA2NCwxMy4xMjUgQzYyLjEyNywxNi42ODggNjMuMDAyLDIxLjM3NSA2MS44MTQsMjcuMTI1IEM2MC41NjQsMzIuOTM4IDU3LjgxNCwzNy41IDUzLjU2NCw0MC44MTMgQzQ5LjM3Niw0NC4xMjYgNDQuMzc2LDQ1LjgxMyAzOC42MjYsNDUuODEzIEwyNi44NzYsNDUuODEzIEwyMi44NzYsNjQuNjg4IEw2LjM3Niw2NC42ODggTDYuMzc1LDY0LjY4OCBaIE0yMi44NzUsMjcuODc1IEwyNi4zNzUsMTIuMjUgTDM0LjM3NSwxMi4yNSBDMzUuNzUsMTIuMjUgMzYuOTM4LDEyLjYyNSAzNy45MzgsMTMuMzc1IEMzOC45MzgsMTQuMTI1IDM5LjYyNiwxNS4xMjUgMzkuOTM4LDE2LjM3NSBDMzkuMzEzLDE2LjI1IDM4LjkzOCwxNi4xODcgMzguODc1LDE2LjE4NyBMMzAuODc1LDE2LjE4NyBMMjguMTg3LDI3Ljg3NSBMMjIuODc0LDI3Ljg3NSBMMjIuODc1LDI3Ljg3NSBaIE0zMC44NzUsMjcuODEzIEwzMi43NSwxOS4zMTMgTDQwLjA2MywxOS4zMTMgQzQwLjA2MywxOS4zNzYgNDAuMDYzLDE5LjUwMSA0MCwxOS42ODggQzM5LjkzNywxOS44NzUgMzkuOTM3LDIwLjAwMSAzOS45MzcsMjAuMDYzIEMzOS40MzcsMjIuMTg4IDM4LjM3NCwyMy45MzggMzYuNTYyLDI1LjQzOCBDMzQuODEyLDI2LjkzOCAzMi44NzQsMjcuNzUxIDMwLjg3NCwyNy44MTMgTDMwLjg3NSwyNy44MTMgWiIgaWQ9IlNoYXBlIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4="); } diff --git a/src/connection/social/index.js b/src/connection/social/index.js index c97fb1ec9..9a305bf97 100644 --- a/src/connection/social/index.js +++ b/src/connection/social/index.js @@ -52,6 +52,9 @@ export function initSocial(m, options) { } export function displayName(connection) { + if ("oauth2" === connection.get("strategy")) { + return connection.get("name"); + } return STRATEGIES[connection.get("strategy")]; } @@ -71,6 +74,10 @@ export function socialConnections(m) { return l.connections(m, "social"); } +export function socialButtonsTheme(m) { + return l.ui.socialButtonsTheme(m); +} + export function useBigButtons(m, notFoundLimit) { const style = get(m, "socialButtonStyle"); return style diff --git a/src/core/client/index.js b/src/core/client/index.js index e05f5addf..b952ddcea 100644 --- a/src/core/client/index.js +++ b/src/core/client/index.js @@ -39,6 +39,8 @@ function strategyNameToConnectionType(str) { return "social"; } else if (ENTERPRISE_STRATEGIES[str]) { return "enterprise"; + } else if (str === "oauth2") { + return "social"; } else { return "unknown"; } diff --git a/src/core/index.js b/src/core/index.js index aebfca98c..65186180b 100644 --- a/src/core/index.js +++ b/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, socialButtons } = 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, + socialButtonsTheme: typeof socialButtons === "object" ? socialButtons : {} }); } @@ -149,6 +150,7 @@ export const ui = { mobile: lock => getUIAttribute(lock, "mobile"), popupOptions: lock => getUIAttribute(lock, "popupOptions"), primaryColor: lock => getUIAttribute(lock, "primaryColor"), + socialButtonsTheme: lock => getUIAttribute(lock, "socialButtonsTheme"), rememberLastLogin: m => tget( m, "rememberLastLogin", diff --git a/src/field/social/social_buttons_pane.jsx b/src/field/social/social_buttons_pane.jsx index 5caad5857..d5a56b2a0 100644 --- a/src/field/social/social_buttons_pane.jsx +++ b/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, socialButtonsTheme } 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 &&

{headerText}

; - const buttons = socialConnections(lock).map(x => ( - { + const buttonTheme = theme.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( logIn(l.id(lock), x)} strategy={x.get("strategy")} - /> - )); + primaryColor={primaryColor} + foregroundColor={foregroundColor} + icon={icon} + />) + }); const loading = showLoading &&
diff --git a/src/ui/button/auth_button.jsx b/src/ui/button/auth_button.jsx index 250914e80..f800d8c41 100644 --- a/src/ui/button/auth_button.jsx +++ b/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 ( @@ -27,7 +41,9 @@ 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, + background: React.PropTypes.string }; AuthButton.defaultProps = { From ceb2f98e989850af37e288b218efc16d72e4315c Mon Sep 17 00:00:00 2001 From: German Lena Date: Mon, 17 Oct 2016 15:18:55 -0300 Subject: [PATCH 2/8] added info to the readme --- README.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b89952f5e..330ca02e5 100644 --- a/README.md +++ b/README.md @@ -154,7 +154,15 @@ var options = { theme: { labeledSubmitButton: false, logo: "https://example.com/assets/logo.png", - primaryColor: "green" + primaryColor: "green", + socialButtons: { + connectionName: { + displayName: "...", + primaryColor: "...", + foregroundColor: "...", + icon: "url(...)" + } + } } }; ``` @@ -162,6 +170,11 @@ var options = { - **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"`. +- **socialButtons {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 From 1ba46dfbd6ee1fe205ac021485ea7354441582ec Mon Sep 17 00:00:00 2001 From: German Lena Date: Mon, 17 Oct 2016 15:30:35 -0300 Subject: [PATCH 3/8] custom scopes should use the conn name instead of strategy --- src/quick-auth/actions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/quick-auth/actions.js b/src/quick-auth/actions.js index 312352eda..885185d10 100644 --- a/src/quick-auth/actions.js +++ b/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() : [] From 5bfd6f17d70bf97e38280b8ed060772103083be0 Mon Sep 17 00:00:00 2001 From: German Lena Date: Tue, 18 Oct 2016 15:33:12 -0300 Subject: [PATCH 4/8] fixed propt types --- src/ui/button/auth_button.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ui/button/auth_button.jsx b/src/ui/button/auth_button.jsx index f800d8c41..120141116 100644 --- a/src/ui/button/auth_button.jsx +++ b/src/ui/button/auth_button.jsx @@ -43,7 +43,8 @@ AuthButton.propTypes = { onClick: React.PropTypes.func.isRequired, strategy: React.PropTypes.string.isRequired, icon: React.PropTypes.string, - background: React.PropTypes.string + primaryColor: React.PropTypes.string, + foregroundColor: React.PropTypes.string }; AuthButton.defaultProps = { From f115730890bdfcf644c99b92e4e4ed85b2d4bbdf Mon Sep 17 00:00:00 2001 From: German Lena Date: Tue, 18 Oct 2016 16:06:53 -0300 Subject: [PATCH 5/8] support oauth1 + rename configuration --- README.md | 2 +- src/connection/social/index.js | 6 +++--- src/core/index.js | 6 +++--- src/field/social/social_buttons_pane.jsx | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 330ca02e5..7d3cd3a42 100644 --- a/README.md +++ b/README.md @@ -155,7 +155,7 @@ var options = { labeledSubmitButton: false, logo: "https://example.com/assets/logo.png", primaryColor: "green", - socialButtons: { + authButtons: { connectionName: { displayName: "...", primaryColor: "...", diff --git a/src/connection/social/index.js b/src/connection/social/index.js index 9a305bf97..505825894 100644 --- a/src/connection/social/index.js +++ b/src/connection/social/index.js @@ -52,7 +52,7 @@ export function initSocial(m, options) { } export function displayName(connection) { - if ("oauth2" === connection.get("strategy")) { + if (["oauth1", "oauth2"].indexOf(connection.get("strategy")) !== -1) { return connection.get("name"); } return STRATEGIES[connection.get("strategy")]; @@ -74,8 +74,8 @@ export function socialConnections(m) { return l.connections(m, "social"); } -export function socialButtonsTheme(m) { - return l.ui.socialButtonsTheme(m); +export function authButtonsTheme(m) { + return l.ui.authButtonsTheme(m); } export function useBigButtons(m, notFoundLimit) { diff --git a/src/core/index.js b/src/core/index.js index 65186180b..75fd63317 100644 --- a/src/core/index.js +++ b/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, socialButtons } = theme; + const { labeledSubmitButton, logo, primaryColor, authButtons } = theme; const avatar = options.avatar !== null; const customAvatarProvider = options.avatar @@ -128,7 +128,7 @@ function extractUIOptions(id, options) { popupOptions: undefined === options.popupOptions ? {} : options.popupOptions, primaryColor: typeof primaryColor === "string" ? primaryColor : undefined, rememberLastLogin: undefined === options.rememberLastLogin ? true : !!options.rememberLastLogin, - socialButtonsTheme: typeof socialButtons === "object" ? socialButtons : {} + authButtonsTheme: typeof authButtons === "object" ? authButtons : {} }); } @@ -150,7 +150,7 @@ export const ui = { mobile: lock => getUIAttribute(lock, "mobile"), popupOptions: lock => getUIAttribute(lock, "popupOptions"), primaryColor: lock => getUIAttribute(lock, "primaryColor"), - socialButtonsTheme: lock => getUIAttribute(lock, "socialButtonsTheme"), + authButtonsTheme: lock => getUIAttribute(lock, "authButtonsTheme"), rememberLastLogin: m => tget( m, "rememberLastLogin", diff --git a/src/field/social/social_buttons_pane.jsx b/src/field/social/social_buttons_pane.jsx index d5a56b2a0..026fa8c3f 100644 --- a/src/field/social/social_buttons_pane.jsx +++ b/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, socialButtonsTheme } from '../../connection/social/index'; +import { displayName, socialConnections, authButtonsTheme } from '../../connection/social/index'; export default class SocialButtonsPane extends React.Component { @@ -21,10 +21,10 @@ export default class SocialButtonsPane extends React.Component { const headerText = instructions || null; const header = headerText &&

{headerText}

; - const theme = socialButtonsTheme(lock); + const themes = authButtonsTheme(lock); const buttons = socialConnections(lock).map(x => { - const buttonTheme = theme.get(x.get("name")); + 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"); From 228c4543c82f92d339f3b835d759390a950c90b1 Mon Sep 17 00:00:00 2001 From: German Lena Date: Tue, 18 Oct 2016 16:07:57 -0300 Subject: [PATCH 6/8] =?UTF-8?q?forgot=20the=20that=20mention=20?= =?UTF-8?q?=F0=9F=90=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7d3cd3a42..4ae8605cc 100644 --- a/README.md +++ b/README.md @@ -170,7 +170,7 @@ var options = { - **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"`. -- **socialButtons {Object}**: Allows the customization of the custom oauth2 login buttons. +- **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"`. From a4681ba0f65bd3314ea8527d6a0d21884f41017f Mon Sep 17 00:00:00 2001 From: German Lena Date: Tue, 18 Oct 2016 16:10:49 -0300 Subject: [PATCH 7/8] check the strategy to group --- src/core/client/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/client/index.js b/src/core/client/index.js index b952ddcea..da66edaee 100644 --- a/src/core/client/index.js +++ b/src/core/client/index.js @@ -39,7 +39,7 @@ function strategyNameToConnectionType(str) { return "social"; } else if (ENTERPRISE_STRATEGIES[str]) { return "enterprise"; - } else if (str === "oauth2") { + } else if (["oauth1", "oauth2"].indexOf(str) !== -1) { return "social"; } else { return "unknown"; From cec5d6d5dbae60d069194282157fbaa86541e34a Mon Sep 17 00:00:00 2001 From: German Lena Date: Tue, 18 Oct 2016 16:27:07 -0300 Subject: [PATCH 8/8] forced the icon to be a url --- README.md | 4 ++-- src/ui/button/auth_button.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4ae8605cc..f991d2c81 100644 --- a/README.md +++ b/README.md @@ -160,7 +160,7 @@ var options = { displayName: "...", primaryColor: "...", foregroundColor: "...", - icon: "url(...)" + icon: "http://.../logo.png" } } } @@ -174,7 +174,7 @@ var options = { + **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)"`. + + **icon {String}**: The icon's url for the connection. For example:`"http://site.com/logo.png"`. #### Authentication options diff --git a/src/ui/button/auth_button.jsx b/src/ui/button/auth_button.jsx index 120141116..5b480cbfe 100644 --- a/src/ui/button/auth_button.jsx +++ b/src/ui/button/auth_button.jsx @@ -17,7 +17,7 @@ const AuthButton = (props) => { const backgroundStyle = primaryColor ? { backgroundColor: primaryColor } : {}; const foregroundStyle = foregroundColor ? { color: foregroundColor } : {}; - const iconStyle = icon ? { backgroundImage: icon } : {}; + const iconStyle = icon ? { backgroundImage: `url('${icon}')` } : {}; return (