Skip to content

Accept an onClick property #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Accept an onClick property #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,23 @@

```jsx harmony
<TwitterLogin
loginUrl="http://localhost:4000/api/v1/auth/twitter"
loginUrl='http://localhost:4000/api/v1/auth/twitter'
onClick={this.setLoading}
onFailure={this.onFailed}
onSuccess={this.onSuccess}
requestTokenUrl="http://localhost:4000/api/v1/auth/twitter/reverse"
requestTokenUrl='http://localhost:4000/api/v1/auth/twitter/reverse'
/>
```

Custom content that overrides default content:

```jsx harmony
<TwitterLogin
loginUrl="http://localhost:4000/api/v1/auth/twitter"
loginUrl='http://localhost:4000/api/v1/auth/twitter'
onClick={this.setLoading}
onFailure={this.onFailed}
onSuccess={this.onSuccess}
requestTokenUrl="http://localhost:4000/api/v1/auth/twitter/reverse"
requestTokenUrl='http://localhost:4000/api/v1/auth/twitter/reverse'
showIcon={true}
customHeaders={customHeader}
>
Expand All @@ -49,6 +51,7 @@ Custom content that overrides default content:
| text | string | Sign in with Twitter | text that will be shown in component |
| loginUrl | string | | URL that will be used to finish 3rd step of authentication process |
| requestTokenUrl | string | | URL that will be used to get request token |
| onClick | function | | function that will be called once the button is clicked before attempting to log in |
| onFailure | function | | function that will be called if user cannot be authenticated |
| onSuccess | function | | function that will be called if user is successfully authenticated |
| disabled | boolean | false | disable component |
Expand Down
58 changes: 30 additions & 28 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import "whatwg-fetch";
import "url-search-params-polyfill";
import TwitterIcon from "react-icons/lib/fa/twitter";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import 'whatwg-fetch';
import 'url-search-params-polyfill';
import TwitterIcon from 'react-icons/lib/fa/twitter';

class TwitterLogin extends Component {
constructor(props) {
Expand All @@ -13,12 +13,13 @@ class TwitterLogin extends Component {

onButtonClick(e) {
e.preventDefault();
this.props.onClick && this.props.onClick();
return this.getRequestToken();
}

getHeaders() {
const headers = Object.assign({}, this.props.customHeaders);
headers["Content-Type"] = "application/json";
headers['Content-Type'] = 'application/json';
return headers;
}

Expand All @@ -27,7 +28,7 @@ class TwitterLogin extends Component {

return window
.fetch(this.props.requestTokenUrl, {
method: "POST",
method: 'POST',
credentials: this.props.credentials,
headers: this.getHeaders()
})
Expand Down Expand Up @@ -61,15 +62,15 @@ class TwitterLogin extends Component {
const top = screen.height / 2 - h / 2;

return window.open(
"",
"",
"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=" +
'',
'',
'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' +
w +
", height=" +
', height=' +
h +
", top=" +
', top=' +
top +
", left=" +
', left=' +
left
);
}
Expand All @@ -78,7 +79,7 @@ class TwitterLogin extends Component {
const polling = setInterval(() => {
if (!popup || popup.closed || popup.closed === undefined) {
clearInterval(polling);
this.props.onFailure(new Error("Popup has been closed by user"));
this.props.onFailure(new Error('Popup has been closed by user'));
}

const closeDialog = () => {
Expand All @@ -88,24 +89,24 @@ class TwitterLogin extends Component {

try {
if (
!popup.location.hostname.includes("api.twitter.com") &&
!popup.location.hostname == ""
!popup.location.hostname.includes('api.twitter.com') &&
!popup.location.hostname == ''
) {
if (popup.location.search) {
const query = new URLSearchParams(popup.location.search);

const oauthToken = query.get("oauth_token");
const oauthVerifier = query.get("oauth_verifier");
const oauthToken = query.get('oauth_token');
const oauthVerifier = query.get('oauth_verifier');

closeDialog();
return this.getOauthToken(oauthVerifier, oauthToken);
} else {
closeDialog();
return this.props.onFailure(
new Error(
"OAuth redirect has occurred but no query or hash parameters were found. " +
"They were either not set during the redirect, or were removed—typically by a " +
"routing library—before Twitter react component could read it."
'OAuth redirect has occurred but no query or hash parameters were found. ' +
'They were either not set during the redirect, or were removed—typically by a ' +
'routing library—before Twitter react component could read it.'
)
);
}
Expand All @@ -124,7 +125,7 @@ class TwitterLogin extends Component {
this.props.loginUrl
}?oauth_verifier=${oAuthVerifier}&oauth_token=${oauthToken}`,
{
method: "POST",
method: 'POST',
credentials: this.props.credentials,
headers: this.getHeaders()
}
Expand All @@ -139,7 +140,7 @@ class TwitterLogin extends Component {

getDefaultButtonContent() {
const defaultIcon = this.props.showIcon ? (
<TwitterIcon color="#00aced" size={25} />
<TwitterIcon color='#00aced' size={25} />
) : null;

return (
Expand Down Expand Up @@ -171,29 +172,30 @@ TwitterLogin.propTypes = {
requestTokenUrl: PropTypes.string.isRequired,
onFailure: PropTypes.func.isRequired,
onSuccess: PropTypes.func.isRequired,
onClick: PropTypes.func,
disabled: PropTypes.bool,
style: PropTypes.object,
className: PropTypes.string,
dialogWidth: PropTypes.number,
dialogHeight: PropTypes.number,
showIcon: PropTypes.bool,
credentials: PropTypes.oneOf(["omit", "same-origin", "include"]),
credentials: PropTypes.oneOf(['omit', 'same-origin', 'include']),
customHeaders: PropTypes.object,
forceLogin: PropTypes.bool,
screenName: PropTypes.string
};

TwitterLogin.defaultProps = {
tag: "button",
text: "Sign in with Twitter",
tag: 'button',
text: 'Sign in with Twitter',
disabled: false,
dialogWidth: 600,
dialogHeight: 400,
showIcon: true,
credentials: "same-origin",
credentials: 'same-origin',
customHeaders: {},
forceLogin: false,
screenName: ""
screenName: ''
};

export default TwitterLogin;
15 changes: 6 additions & 9 deletions tests/component.property.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@ import { expect } from 'chai';
import { mount } from 'enzyme';

describe('Twitter Login Component', () => {

let component;
let propsObj;

describe('With default props',() => {
describe('With default props', () => {
beforeEach(() => {
propsObj = {
onSuccess: (response) => {},
onFailure: (error) => {},
onClick: () => {},
onSuccess: response => {},
onFailure: error => {},
loginUrl: 'http://localhost:3000/login-url',
requestTokenUrl: 'http://localhost:3000/request-token'
};
component = mount(<TwitterLogin {...propsObj}/>);
component = mount(<TwitterLogin {...propsObj} />);
});

it('shows the button', () => {
Expand All @@ -30,8 +30,5 @@ describe('Twitter Login Component', () => {
expect(component.props().dialogWidth).to.equal(600);
expect(component.props().dialogHeight).to.equal(400);
});



})
});
});