| 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; |
|---|
