@5calls/react-components
Version:
React component library for 5 Calls webapp
251 lines (250 loc) • 13.3 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_router_dom_1 = require("react-router-dom");
var EmailValidator = __importStar(require("email-validator"));
var CustomLoginUi = /** @class */ (function (_super) {
__extends(CustomLoginUi, _super);
function CustomLoginUi(props) {
var _this = _super.call(this, props) || this;
_this.toggleMenu = function () {
_this.setState({ userMenuHidden: !_this.state.userMenuHidden });
};
_this.toggleModal = function () {
console.log("needed login modal");
_this.setState({ shouldDisplayLoginModal: !_this.state.shouldDisplayLoginModal });
};
_this.signup = function () {
var email = _this.state.email;
var password = _this.state.password;
var invalid = _this.validateEmailPassword(email, password);
if (invalid) {
_this.setState({ errorMessage: invalid });
}
else {
_this.props.signup(_this.state.email, _this.state.password)
.then(function (results) { return _this.setLoginState(results); })
.catch(function (error) { return _this.setLoginState(error); });
}
};
_this.login = function () {
var email = _this.state.email;
var password = _this.state.password;
var invalid = _this.validateEmailPassword(email, password);
if (invalid) {
_this.setState({ errorMessage: invalid });
}
else {
_this.props.login(_this.state.email, _this.state.password)
.then(function (results) { return _this.setLoginState(results); })
.catch(function (error) { return _this.setLoginState(error); });
}
};
_this.validateEmailPassword = function (email, password) {
if (!email || !password) {
return 'Email and password is required';
}
// Check email format
// Email regex taken from OWASP Regex Validation Repository:
// https://www.owasp.org/index.php/OWASP_Validation_Regex_Repository
var emailRegex = '^[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,7}$';
if (!email.match(emailRegex)) {
return 'Email is in the wrong format';
}
else {
return '';
}
};
_this.twitterLogin = function () {
_this.props.twitterLogin();
_this.setLoginState();
};
_this.facebookLogin = function () {
_this.props.facebookLogin();
_this.setLoginState();
};
_this.setLoginState = function (loginResults) {
if (loginResults) {
_this.setState({ errorMessage: loginResults });
}
else {
_this.setState({
shouldDisplayLoginModal: false,
});
_this.setState({ errorMessage: '' });
}
};
_this.logout = function () {
_this.props.logout();
_this.toggleMenu();
};
_this.changeEmailOpt = function (e) {
_this.setState({ emailOptIn: !_this.state.emailOptIn });
};
_this.changeEmail = function (e) {
_this.setState({ currentEmail: e.currentTarget.value });
};
_this.formsubmit = function (e) {
e.preventDefault();
_this.submitEmail();
};
_this.submitEmail = function () {
if (EmailValidator.validate(_this.state.currentEmail)) {
_this.setState({ emailIsValid: true });
_this.props.refreshHandler(_this.state.currentEmail, _this.state.emailOptIn);
}
else {
_this.setState({ emailIsValid: false });
}
};
_this.showLoginModal = function () {
if (_this.props.profile) {
_this.toggleMenu();
}
else {
_this.setState({ shouldDisplayLoginModal: true });
}
};
_this.showCampaignLogo = function () {
// if we pass a campaign url, customize the design
if (_this.props.auth0Config.campaignName) {
return true;
}
return false;
};
_this.headerPhotoURL = function () {
if (_this.props.auth0Config.campaignPhotoURL) {
return _this.props.auth0Config.campaignPhotoURL;
}
return '/img/5calls-stars.png';
};
_this.loginModalMarkup = function () {
if (_this.state.shouldDisplayLoginModal) {
return (React.createElement("span", null,
React.createElement("div", { className: "login-modal-mask", onClick: _this.toggleModal }, "\u00A0"),
React.createElement("div", { className: "login-modal" },
React.createElement("div", { className: "login-header" },
React.createElement("p", { className: "login-header-explainer" }, "Track your calls, join call teams and see your impact on issues you care about!"),
_this.showCampaignLogo()
? React.createElement("div", { className: "login-header-logo" },
React.createElement("a", { href: _this.props.auth0Config.poweredURL, target: "_blank" },
React.createElement("img", { className: "stars", src: "/img/5calls-stars.png", alt: "Powered by 5 Calls" })),
React.createElement("p", { className: "login-header-logo-powered" },
"Powered by ",
React.createElement("strong", null, "5 Calls")))
: React.createElement("span", null)),
React.createElement("div", { className: "login-choices" },
React.createElement("div", { className: "login-header-logo" },
React.createElement("img", { className: "stars", src: _this.headerPhotoURL(), alt: _this.props.auth0Config.campaignName ? _this.props.auth0Config.campaignName : '5 Calls' }),
React.createElement("p", { className: "login-header-logo-campaign" }, _this.props.auth0Config.campaignName
? React.createElement("span", null,
"Log in to call for",
React.createElement("br", null),
_this.props.auth0Config.campaignName)
: React.createElement("span", null,
"Log in to",
React.createElement("br", null),
"5 Calls"))),
React.createElement("div", { className: "btn-block" },
React.createElement("button", { type: "button", id: "btn-twitter", className: "app-login-button btn-twitter", onClick: _this.twitterLogin },
React.createElement("i", { className: "fab fa-twitter" }),
"Log In with Twitter")),
React.createElement("div", { className: "btn-block" },
React.createElement("button", { type: "button", id: "btn-facebook", className: "app-login-button btn-facebook", onClick: _this.facebookLogin },
React.createElement("i", { className: "fab fa-facebook-square" }),
"Log In with Facebook")),
React.createElement("div", { className: "btn-block" },
React.createElement("a", { className: "button-cancel", onClick: _this.toggleModal }, "Cancel"))))));
}
else {
return React.createElement("span", null);
}
};
_this.emailTextOrError = function () {
if (_this.state.emailIsValid === undefined || _this.state.emailIsValid === true) {
return 'We never share your email without your permission';
}
return 'Please enter a valid email';
};
_this.emailModalMarkup = function () {
if (_this.props.showEmailModal) {
return (React.createElement("span", null,
React.createElement("div", { className: "login-modal-mask" }, "\u00A0"),
React.createElement("div", { className: "login-modal email" },
React.createElement("h2", null, "Enter your email to finish signing up:"),
React.createElement("p", null, _this.emailTextOrError()),
React.createElement("form", { onSubmit: _this.formsubmit },
React.createElement("input", { type: "email", name: "email", placeholder: "example@gmail.com", onChange: _this.changeEmail, required: true }),
React.createElement("label", null,
React.createElement("input", { type: "checkbox", checked: _this.state.emailOptIn, onChange: _this.changeEmailOpt }),
React.createElement("p", null, "Send me high-priority calls once a week")),
React.createElement("div", { className: "btn-block" },
React.createElement("button", { type: "button", className: "btn-send", onClick: _this.submitEmail }, "OK"))))));
}
else {
return React.createElement("span", null);
}
};
_this.loginUIMarkup = function () {
return (React.createElement("span", null,
React.createElement("div", { className: "userHeader" },
React.createElement("a", { onClick: _this.showLoginModal },
React.createElement("img", { className: "stars", src: _this.props.profile ? _this.props.profile.picture : '/img/5calls-stars.png', alt: "Make your voice heard" })),
React.createElement("p", null,
React.createElement("a", { onClick: _this.showLoginModal }, _this.props.profile ? _this.props.profile.name : 'Log in')),
!_this.state.userMenuHidden &&
React.createElement("div", { className: "userHeader__menu" },
React.createElement("ul", null,
_this.props.auth0Config.popupAuth
? React.createElement("span", null)
: React.createElement("li", null,
React.createElement(react_router_dom_1.Link, { to: "/profile" }, "My Profile")),
React.createElement("li", { className: "line" }),
React.createElement("li", null,
React.createElement("a", { href: "#", onClick: _this.logout },
React.createElement("strong", null, "Log out")))))),
_this.loginModalMarkup(),
_this.emailModalMarkup()));
};
_this.state = {
email: '',
password: '',
errorMessage: '',
shouldDisplayLoginModal: false,
userMenuHidden: true,
currentEmail: '',
emailIsValid: undefined,
emailOptIn: true,
};
return _this;
}
CustomLoginUi.prototype.componentDidMount = function () {
console.log("starting to listen for event");
this.props.eventEmitter.addListener('showLogin', this.toggleModal);
console.log("current listeners login", this.props.eventEmitter.getListeners('showLogin'));
};
CustomLoginUi.prototype.componentWillUnmount = function () {
};
CustomLoginUi.prototype.render = function () {
return (this.loginUIMarkup());
};
return CustomLoginUi;
}(React.Component));
exports.CustomLoginUi = CustomLoginUi;