1 | 'use strict';
|
---|
2 |
|
---|
3 | Object.defineProperty(exports, "__esModule", {
|
---|
4 | value: true
|
---|
5 | });
|
---|
6 |
|
---|
7 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
---|
8 |
|
---|
9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
---|
10 |
|
---|
11 | var _react = require('react');
|
---|
12 |
|
---|
13 | var _react2 = _interopRequireDefault(_react);
|
---|
14 |
|
---|
15 | var _propTypes = require('prop-types');
|
---|
16 |
|
---|
17 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
---|
18 |
|
---|
19 | var _facebook = require('../styles/facebook.scss');
|
---|
20 |
|
---|
21 | var _facebook2 = _interopRequireDefault(_facebook);
|
---|
22 |
|
---|
23 | var _objectToParams = require('./objectToParams');
|
---|
24 |
|
---|
25 | var _objectToParams2 = _interopRequireDefault(_objectToParams);
|
---|
26 |
|
---|
27 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
---|
28 |
|
---|
29 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
---|
30 |
|
---|
31 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
---|
32 |
|
---|
33 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
---|
34 |
|
---|
35 | var getIsMobile = function getIsMobile() {
|
---|
36 | var isMobile = false;
|
---|
37 |
|
---|
38 | try {
|
---|
39 | isMobile = !!(window.navigator && window.navigator.standalone || navigator.userAgent.match('CriOS') || navigator.userAgent.match(/mobile/i));
|
---|
40 | } catch (ex) {
|
---|
41 | // continue regardless of error
|
---|
42 | }
|
---|
43 |
|
---|
44 | return isMobile;
|
---|
45 | };
|
---|
46 |
|
---|
47 | // https://www.w3.org/TR/html5/disabled-elements.html#disabled-elements
|
---|
48 | var _shouldAddDisabledProp = function _shouldAddDisabledProp(tag) {
|
---|
49 | return ['button', 'input', 'select', 'textarea', 'optgroup', 'option', 'fieldset'].indexOf((tag + '').toLowerCase()) >= 0;
|
---|
50 | };
|
---|
51 |
|
---|
52 | var FacebookLogin = function (_React$Component) {
|
---|
53 | _inherits(FacebookLogin, _React$Component);
|
---|
54 |
|
---|
55 | function FacebookLogin() {
|
---|
56 | var _ref;
|
---|
57 |
|
---|
58 | var _temp, _this, _ret;
|
---|
59 |
|
---|
60 | _classCallCheck(this, FacebookLogin);
|
---|
61 |
|
---|
62 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
---|
63 | args[_key] = arguments[_key];
|
---|
64 | }
|
---|
65 |
|
---|
66 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FacebookLogin.__proto__ || Object.getPrototypeOf(FacebookLogin)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
---|
67 | isSdkLoaded: false,
|
---|
68 | isProcessing: false
|
---|
69 | }, _this.responseApi = function (authResponse) {
|
---|
70 | window.FB.api('/me', { locale: _this.props.language, fields: _this.props.fields }, function (me) {
|
---|
71 | _extends(me, authResponse);
|
---|
72 | _this.props.callback(me);
|
---|
73 | });
|
---|
74 | }, _this.checkLoginState = function (response) {
|
---|
75 | _this.setStateIfMounted({ isProcessing: false });
|
---|
76 | if (response.authResponse) {
|
---|
77 | _this.responseApi(response.authResponse);
|
---|
78 | } else {
|
---|
79 | if (_this.props.callback) {
|
---|
80 | _this.props.callback({ status: response.status });
|
---|
81 | }
|
---|
82 | }
|
---|
83 | }, _this.checkLoginAfterRefresh = function (response) {
|
---|
84 | if (response.status === 'connected') {
|
---|
85 | _this.checkLoginState(response);
|
---|
86 | } else {
|
---|
87 | window.FB.login(function (loginResponse) {
|
---|
88 | return _this.checkLoginState(loginResponse);
|
---|
89 | }, true);
|
---|
90 | }
|
---|
91 | }, _this.click = function (e) {
|
---|
92 | if (!_this.state.isSdkLoaded || _this.state.isProcessing || _this.props.isDisabled) {
|
---|
93 | return;
|
---|
94 | }
|
---|
95 | _this.setState({ isProcessing: true });
|
---|
96 | var _this$props = _this.props,
|
---|
97 | scope = _this$props.scope,
|
---|
98 | appId = _this$props.appId,
|
---|
99 | onClick = _this$props.onClick,
|
---|
100 | reAuthenticate = _this$props.reAuthenticate,
|
---|
101 | redirectUri = _this$props.redirectUri,
|
---|
102 | disableMobileRedirect = _this$props.disableMobileRedirect;
|
---|
103 |
|
---|
104 |
|
---|
105 | if (typeof onClick === 'function') {
|
---|
106 | onClick(e);
|
---|
107 | if (e.defaultPrevented) {
|
---|
108 | return;
|
---|
109 | }
|
---|
110 | }
|
---|
111 |
|
---|
112 | var params = {
|
---|
113 | client_id: appId,
|
---|
114 | redirect_uri: redirectUri,
|
---|
115 | state: 'facebookdirect',
|
---|
116 | scope: scope
|
---|
117 | };
|
---|
118 |
|
---|
119 | if (reAuthenticate) {
|
---|
120 | params.auth_type = 'reauthenticate';
|
---|
121 | }
|
---|
122 |
|
---|
123 | if (_this.props.isMobile && !disableMobileRedirect) {
|
---|
124 | window.location.href = '//www.facebook.com/dialog/oauth?' + (0, _objectToParams2.default)(params);
|
---|
125 | } else {
|
---|
126 | window.FB.login(_this.checkLoginState, { scope: scope, auth_type: params.auth_type });
|
---|
127 | }
|
---|
128 | }, _temp), _possibleConstructorReturn(_this, _ret);
|
---|
129 | }
|
---|
130 |
|
---|
131 | _createClass(FacebookLogin, [{
|
---|
132 | key: 'componentDidMount',
|
---|
133 | value: function componentDidMount() {
|
---|
134 | this._isMounted = true;
|
---|
135 | if (document.getElementById('facebook-jssdk')) {
|
---|
136 | this.sdkLoaded();
|
---|
137 | return;
|
---|
138 | }
|
---|
139 | this.setFbAsyncInit();
|
---|
140 | this.loadSdkAsynchronously();
|
---|
141 | var fbRoot = document.getElementById('fb-root');
|
---|
142 | if (!fbRoot) {
|
---|
143 | fbRoot = document.createElement('div');
|
---|
144 | fbRoot.id = 'fb-root';
|
---|
145 | document.body.appendChild(fbRoot);
|
---|
146 | }
|
---|
147 | }
|
---|
148 | }, {
|
---|
149 | key: 'componentWillUnmount',
|
---|
150 | value: function componentWillUnmount() {
|
---|
151 | this._isMounted = false;
|
---|
152 | }
|
---|
153 | }, {
|
---|
154 | key: 'setStateIfMounted',
|
---|
155 | value: function setStateIfMounted(state) {
|
---|
156 | if (this._isMounted) {
|
---|
157 | this.setState(state);
|
---|
158 | }
|
---|
159 | }
|
---|
160 | }, {
|
---|
161 | key: 'setFbAsyncInit',
|
---|
162 | value: function setFbAsyncInit() {
|
---|
163 | var _this2 = this;
|
---|
164 |
|
---|
165 | var _props = this.props,
|
---|
166 | appId = _props.appId,
|
---|
167 | xfbml = _props.xfbml,
|
---|
168 | cookie = _props.cookie,
|
---|
169 | version = _props.version,
|
---|
170 | autoLoad = _props.autoLoad;
|
---|
171 |
|
---|
172 | window.fbAsyncInit = function () {
|
---|
173 | window.FB.init({
|
---|
174 | version: 'v' + version,
|
---|
175 | appId: appId,
|
---|
176 | xfbml: xfbml,
|
---|
177 | cookie: cookie
|
---|
178 | });
|
---|
179 | _this2.setStateIfMounted({ isSdkLoaded: true });
|
---|
180 | if (autoLoad || window.location.search.includes('facebookdirect')) {
|
---|
181 | window.FB.getLoginStatus(_this2.checkLoginAfterRefresh);
|
---|
182 | }
|
---|
183 | };
|
---|
184 | }
|
---|
185 | }, {
|
---|
186 | key: 'sdkLoaded',
|
---|
187 | value: function sdkLoaded() {
|
---|
188 | this.setState({ isSdkLoaded: true });
|
---|
189 | }
|
---|
190 | }, {
|
---|
191 | key: 'loadSdkAsynchronously',
|
---|
192 | value: function loadSdkAsynchronously() {
|
---|
193 | var language = this.props.language;
|
---|
194 |
|
---|
195 | (function (d, s, id) {
|
---|
196 | var element = d.getElementsByTagName(s)[0];
|
---|
197 | var fjs = element;
|
---|
198 | var js = element;
|
---|
199 | if (d.getElementById(id)) {
|
---|
200 | return;
|
---|
201 | }
|
---|
202 | js = d.createElement(s);js.id = id;
|
---|
203 | js.src = '//connect.facebook.net/' + language + '/all.js';
|
---|
204 | fjs.parentNode.insertBefore(js, fjs);
|
---|
205 | })(document, 'script', 'facebook-jssdk');
|
---|
206 | }
|
---|
207 | }, {
|
---|
208 | key: 'style',
|
---|
209 | value: function style() {
|
---|
210 | var defaultCSS = this.constructor.defaultProps.cssClass;
|
---|
211 | if (this.props.cssClass === defaultCSS) {
|
---|
212 | return _react2.default.createElement('style', { dangerouslySetInnerHTML: { __html: _facebook2.default } });
|
---|
213 | }
|
---|
214 | return false;
|
---|
215 | }
|
---|
216 |
|
---|
217 | // [AdGo] 20.11.2016 - coult not get container class to work
|
---|
218 |
|
---|
219 | }, {
|
---|
220 | key: 'containerStyle',
|
---|
221 | value: function containerStyle() {
|
---|
222 | var style = { transition: 'opacity 0.5s' };
|
---|
223 | if (this.state.isProcessing || !this.state.isSdkLoaded || this.props.isDisabled) {
|
---|
224 | style.opacity = 0.6;
|
---|
225 | }
|
---|
226 | return _extends(style, this.props.containerStyle);
|
---|
227 | }
|
---|
228 | }, {
|
---|
229 | key: 'render',
|
---|
230 | value: function render() {
|
---|
231 | var _props2 = this.props,
|
---|
232 | cssClass = _props2.cssClass,
|
---|
233 | size = _props2.size,
|
---|
234 | icon = _props2.icon,
|
---|
235 | textButton = _props2.textButton,
|
---|
236 | typeButton = _props2.typeButton,
|
---|
237 | buttonStyle = _props2.buttonStyle;
|
---|
238 |
|
---|
239 | var isIconString = typeof icon === 'string';
|
---|
240 | var optionalProps = {};
|
---|
241 | if (this.props.isDisabled && _shouldAddDisabledProp(this.props.tag)) {
|
---|
242 | optionalProps.disabled = true;
|
---|
243 | }
|
---|
244 | return _react2.default.createElement(
|
---|
245 | 'span',
|
---|
246 | { style: this.containerStyle() },
|
---|
247 | isIconString && _react2.default.createElement('link', {
|
---|
248 | rel: 'stylesheet',
|
---|
249 | href: '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'
|
---|
250 | }),
|
---|
251 | _react2.default.createElement(
|
---|
252 | this.props.tag,
|
---|
253 | _extends({
|
---|
254 | type: typeButton,
|
---|
255 | className: cssClass + ' ' + size,
|
---|
256 | style: buttonStyle,
|
---|
257 | onClick: this.click
|
---|
258 | }, optionalProps),
|
---|
259 | icon && isIconString && _react2.default.createElement('i', { className: 'fa ' + icon }),
|
---|
260 | icon && !isIconString && icon,
|
---|
261 | textButton
|
---|
262 | ),
|
---|
263 | this.style()
|
---|
264 | );
|
---|
265 | }
|
---|
266 | }]);
|
---|
267 |
|
---|
268 | return FacebookLogin;
|
---|
269 | }(_react2.default.Component);
|
---|
270 |
|
---|
271 | FacebookLogin.propTypes = {
|
---|
272 | isDisabled: _propTypes2.default.bool,
|
---|
273 | callback: _propTypes2.default.func.isRequired,
|
---|
274 | appId: _propTypes2.default.string.isRequired,
|
---|
275 | xfbml: _propTypes2.default.bool,
|
---|
276 | cookie: _propTypes2.default.bool,
|
---|
277 | reAuthenticate: _propTypes2.default.bool,
|
---|
278 | scope: _propTypes2.default.string,
|
---|
279 | redirectUri: _propTypes2.default.string,
|
---|
280 | textButton: _propTypes2.default.string,
|
---|
281 | typeButton: _propTypes2.default.string,
|
---|
282 | autoLoad: _propTypes2.default.bool,
|
---|
283 | disableMobileRedirect: _propTypes2.default.bool,
|
---|
284 | isMobile: _propTypes2.default.bool,
|
---|
285 | size: _propTypes2.default.string,
|
---|
286 | fields: _propTypes2.default.string,
|
---|
287 | cssClass: _propTypes2.default.string,
|
---|
288 | version: _propTypes2.default.string,
|
---|
289 | icon: _propTypes2.default.any,
|
---|
290 | language: _propTypes2.default.string,
|
---|
291 | onClick: _propTypes2.default.func,
|
---|
292 | containerStyle: _propTypes2.default.object,
|
---|
293 | buttonStyle: _propTypes2.default.object,
|
---|
294 | tag: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.func])
|
---|
295 | };
|
---|
296 | FacebookLogin.defaultProps = {
|
---|
297 | textButton: 'Login with Facebook',
|
---|
298 | typeButton: 'button',
|
---|
299 | redirectUri: typeof window !== 'undefined' ? window.location.href : '/',
|
---|
300 | scope: 'public_profile,email',
|
---|
301 | xfbml: false,
|
---|
302 | cookie: false,
|
---|
303 | reAuthenticate: false,
|
---|
304 | size: 'metro',
|
---|
305 | fields: 'name',
|
---|
306 | cssClass: 'kep-login-facebook',
|
---|
307 | version: '2.3',
|
---|
308 | language: 'en_US',
|
---|
309 | disableMobileRedirect: false,
|
---|
310 | isMobile: getIsMobile(),
|
---|
311 | tag: 'button'
|
---|
312 | };
|
---|
313 | exports.default = FacebookLogin; |
---|