From dcfc7ec3a89bacba9ada9cd5d0791d2db6a8b580 Mon Sep 17 00:00:00 2001 From: Eliran Amar Date: Mon, 26 Mar 2018 16:41:09 +0300 Subject: [PATCH] dont disable button for already loaded auth2 script added gray color for disabled color pointer cursor for button, prettyfied code changed disabled cursor add contributor to readme --- README.md | 7 ++- package.json | 2 +- src/GoogleAuthorize.js | 111 +++++++++++++++++++++-------------------- 3 files changed, 64 insertions(+), 56 deletions(-) diff --git a/README.md b/README.md index 37e1fbf..31514b7 100644 --- a/README.md +++ b/README.md @@ -148,4 +148,9 @@ Pull requests and stars are always welcome. For bugs and feature requests, [plea **Alon Diamant (advance512)** * [github/advance512](https://github.com/advance512) -* [Homepage](http://www.alondiamant.com) \ No newline at end of file +* [Homepage](http://www.alondiamant.com) + +## Contributors + +**Eliran Amar** +* [github/eliranamar](https://github.com/eliranamar) diff --git a/package.json b/package.json index c699642..62e7b06 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-google-authorize", - "version": "1.0.1", + "version": "1.0.2", "description": "A Google Authorize Component for React", "main": "dist/google-authorize.js", "scripts": { diff --git a/src/GoogleAuthorize.js b/src/GoogleAuthorize.js index 82754f8..720c9eb 100755 --- a/src/GoogleAuthorize.js +++ b/src/GoogleAuthorize.js @@ -1,5 +1,5 @@ /* eslint-disable no-console,no-restricted-syntax */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; const scriptLoadCallbacks = []; @@ -8,6 +8,7 @@ function addScript(d, s, id, cb) { scriptLoadCallbacks.push(cb); if (d.getElementById(id) != null) { + cb(); return; } @@ -53,25 +54,25 @@ class GoogleAuthorize extends Component { e.preventDefault(); // to prevent submit if used within form } - const {disabled} = this.state; + const { disabled } = this.state; if (disabled) { return; } - const {clientId, cookiePolicy, loginHint, hostedDomain, fetchBasicProfile, redirectUri, discoveryDocs, onFailure, uxMode, scope, responseType, onSuccess, onRequest, prompt} = this.props; + const { clientId, cookiePolicy, loginHint, hostedDomain, fetchBasicProfile, redirectUri, discoveryDocs, onFailure, uxMode, scope, responseType, onSuccess, onRequest, prompt } = this.props; const params = { - client_id: clientId, - cookie_policy: cookiePolicy, - login_hint: loginHint, - hosted_domain: hostedDomain, - fetch_basic_profile: fetchBasicProfile, + client_id: clientId, + cookie_policy: cookiePolicy, + login_hint: loginHint, + hosted_domain: hostedDomain, + fetch_basic_profile: fetchBasicProfile, + ux_mode: uxMode, + redirect_uri: redirectUri, + include_granted_scopes: true, discoveryDocs, - ux_mode: uxMode, - redirect_uri: redirectUri, prompt, scope, - include_granted_scopes: true, }; if (responseType === 'code') { @@ -106,17 +107,18 @@ class GoogleAuthorize extends Component { } = this.props; const disabled = this.state.disabled || this.props.disabled; const initialStyle = { - display: 'inline-block', - background: '#d14836', - color: '#fff', - width: 190, - paddingTop: 10, + display: 'inline-block', + background: '#d14836', + color: '#fff', + width: 190, + paddingTop: 10, paddingBottom: 10, - borderRadius: 2, - border: '1px solid transparent', - fontSize: 16, - fontWeight: 'bold', - fontFamily: 'Roboto' + borderRadius: 2, + border: '1px solid transparent', + fontSize: 16, + fontWeight: 'bold', + fontFamily: 'Roboto', + cursor: 'pointer', }; const styleProp = (() => { if (style) { @@ -136,7 +138,7 @@ class GoogleAuthorize extends Component { tag, { onClick: this.handleClick, - style: defaultStyle, + style: defaultStyle, type, disabled, className @@ -148,44 +150,45 @@ class GoogleAuthorize extends Component { } GoogleAuthorize.propTypes = { - onSuccess: PropTypes.func.isRequired, - onFailure: PropTypes.func.isRequired, - clientId: PropTypes.string.isRequired, - onRequest: PropTypes.func, - buttonText: PropTypes.string, - scope: PropTypes.string, - className: PropTypes.string, - redirectUri: PropTypes.string, - cookiePolicy: PropTypes.string, - loginHint: PropTypes.string, - hostedDomain: PropTypes.string, - children: PropTypes.node, - style: PropTypes.object, - disabledStyle: PropTypes.object, + onSuccess: PropTypes.func.isRequired, + onFailure: PropTypes.func.isRequired, + clientId: PropTypes.string.isRequired, + onRequest: PropTypes.func, + buttonText: PropTypes.string, + scope: PropTypes.string, + className: PropTypes.string, + redirectUri: PropTypes.string, + cookiePolicy: PropTypes.string, + loginHint: PropTypes.string, + hostedDomain: PropTypes.string, + children: PropTypes.node, + style: PropTypes.object, + disabledStyle: PropTypes.object, fetchBasicProfile: PropTypes.bool, - prompt: PropTypes.string, - tag: PropTypes.string, - disabled: PropTypes.bool, - discoveryDocs: PropTypes.array, - uxMode: PropTypes.string, - responseType: PropTypes.string, - type: PropTypes.string + prompt: PropTypes.string, + tag: PropTypes.string, + disabled: PropTypes.bool, + discoveryDocs: PropTypes.array, + uxMode: PropTypes.string, + responseType: PropTypes.string, + type: PropTypes.string }; GoogleAuthorize.defaultProps = { - type: 'button', - tag: 'button', - buttonText: 'Login with Google', - scope: 'profile email', - prompt: '', - cookiePolicy: 'single_host_origin', + type: 'button', + tag: 'button', + buttonText: 'Login with Google', + scope: 'profile email', + prompt: '', + cookiePolicy: 'single_host_origin', fetchBasicProfile: true, - uxMode: 'popup', - disabledStyle: { - opacity: 0.6 + uxMode: 'popup', + disabledStyle: { + opacity: 0.6, + background: '#9c9c9c', + cursor: 'not-allowed', }, - onRequest: () => { - } + onRequest: () => {} }; export default GoogleAuthorize;