react-saasify
Version:
React components for Saasify web clients.
1,449 lines (1,272 loc) • 194 kB
JavaScript
import React, { Component, Fragment, useCallback, useState, PureComponent } from 'react';
import PropTypes from 'prop-types';
import { inject, observer } from 'mobx-react';
import { Redirect, Route, Link as Link$2, NavLink } from 'react-router-dom';
import { observable, autorun, trace, toJS, decorate, computed, reaction } from 'mobx';
import cs from 'classnames';
import 'antd/es/avatar/style/css';
import 'antd/es/button/style/css';
import 'antd/es/checkbox/style/css';
import 'antd/es/divider/style/css';
import 'antd/es/empty/style/css';
import 'antd/es/form/style/css';
import 'antd/es/icon/style/css';
import 'antd/es/input/style/css';
import 'antd/es/input-number/style/css';
import 'antd/es/modal/style/css';
import 'antd/es/popconfirm/style/css';
import 'antd/es/result/style/css';
import 'antd/es/select/style/css';
import 'antd/es/spin/style/css';
import 'antd/es/statistic/style/css';
import 'antd/es/steps/style/css';
import 'antd/es/tag/style/css';
import 'antd/es/tooltip/style/css';
import 'antd/es/table/style/css';
import 'antd/es/message/style/css';
import 'antd/es/dropdown/style/css';
import 'antd/es/menu/style/css';
import 'antd/es/switch/style/css';
import 'antd/es/notification/style/css';
import Avatar from 'antd/es/avatar';
export { default as Avatar } from 'antd/es/avatar';
import AutoComplete from 'antd/es/auto-complete';
export { default as AutoComplete } from 'antd/es/auto-complete';
import Button from 'antd/es/button';
export { default as Button } from 'antd/es/button';
import Checkbox from 'antd/es/checkbox';
export { default as Checkbox } from 'antd/es/checkbox';
import Divider from 'antd/es/divider';
export { default as Divider } from 'antd/es/divider';
export { default as Empty } from 'antd/es/empty';
import Form from 'antd/es/form';
export { default as Form } from 'antd/es/form';
import Icon from 'antd/es/icon';
export { default as Icon } from 'antd/es/icon';
import Input from 'antd/es/input';
export { default as Input } from 'antd/es/input';
import InputNumber from 'antd/es/input-number';
export { default as InputNumber } from 'antd/es/input-number';
import Modal from 'antd/es/modal';
export { default as Modal } from 'antd/es/modal';
import Popconfirm from 'antd/es/popconfirm';
export { default as Popconfirm } from 'antd/es/popconfirm';
export { default as Result } from 'antd/es/result';
import Select from 'antd/es/select';
export { default as Select } from 'antd/es/select';
export { default as Statistic } from 'antd/es/statistic';
export { default as Steps } from 'antd/es/steps';
export { default as Spin } from 'antd/es/spin';
import Tag from 'antd/es/tag';
export { default as Tag } from 'antd/es/tag';
import Tooltip from 'antd/es/tooltip';
export { default as Tooltip } from 'antd/es/tooltip';
import Table from 'antd/es/table';
export { default as Table } from 'antd/es/table';
export { default as message } from 'antd/es/message';
import Dropdown from 'antd/es/dropdown';
export { default as Dropdown } from 'antd/es/dropdown';
import Menu from 'antd/es/menu';
export { default as Menu } from 'antd/es/menu';
export { default as Switch } from 'antd/es/switch';
import notification from 'antd/es/notification';
export { default as notification } from 'antd/es/notification';
import qs from 'qs';
import SaasifyClient from 'saasify-client';
import localforage from 'localforage';
import _debug from 'debug';
import { injectStripe, StripeProvider, Elements, CardElement } from 'react-stripe-elements';
import raf from 'raf';
import Hoverable from 'react-event-as-prop/lib/Hoverable';
import slugify from '@sindresorhus/slugify';
import copyTextToClipboard from 'copy-text-to-clipboard';
import { format } from 'date-fns';
import titleize from 'titleize';
import Colr from 'colr';
import random from 'random';
import sizeMe from 'react-sizeme';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light';
import defaultCodeTheme from 'react-syntax-highlighter/dist/esm/styles/hljs/tomorrow';
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python';
import ruby from 'react-syntax-highlighter/dist/esm/languages/hljs/ruby';
import bash from 'react-syntax-highlighter/dist/esm/languages/hljs/bash';
import mem from 'mem';
import isDeepEqual from 'fast-deep-equal';
import mediumZoom from 'medium-zoom';
import mime from 'mime-types';
import fileType from 'file-type';
import detectCsv from 'detect-csv';
import isHtml from 'is-html';
import download from 'downloadjs';
import ReactFromJSON from 'react-from-json';
import ReactMarkdown from 'react-markdown';
import codeTheme from 'react-syntax-highlighter/dist/esm/styles/hljs/vs2015';
import Editor from 'react-simple-code-editor';
import prettier from 'prettier/standalone';
import prettierBabylon from 'prettier/parser-babylon';
import Fuse from 'fuse.js';
import getServiceExamples from 'saasify-codegen';
import SaasifySDK from 'saasify-faas-sdk';
import ReactDOM from 'react-dom';
import EventEmitter3 from 'eventemitter3';
import ms from 'ms';
import uniqBy from 'lodash.uniqby';
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);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _extends() {
_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;
};
return _extends.apply(this, arguments);
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _initializerDefineProperty(target, property, descriptor, context) {
if (!descriptor) return;
Object.defineProperty(target, property, {
enumerable: descriptor.enumerable,
configurable: descriptor.configurable,
writable: descriptor.writable,
value: descriptor.initializer ? descriptor.initializer.call(context) : void 0
});
}
function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
var desc = {};
Object.keys(descriptor).forEach(function (key) {
desc[key] = descriptor[key];
});
desc.enumerable = !!desc.enumerable;
desc.configurable = !!desc.configurable;
if ('value' in desc || desc.initializer) {
desc.writable = true;
}
desc = decorators.slice().reverse().reduce(function (desc, decorator) {
return decorator(target, property, desc) || desc;
}, desc);
if (context && desc.initializer !== void 0) {
desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
desc.initializer = undefined;
}
if (desc.initializer === void 0) {
Object.defineProperty(target, property, desc);
desc = null;
}
return desc;
}
var styles = {"section":"okta-module_section__3C6V-","title":"okta-module_title__7O1oG","subtitle":"okta-module_subtitle__2pQn3","content":"okta-module_content__LUjyp","theme-okta":"okta-module_theme-okta__iN0o9","light":"okta-module_light__2w-1n","header":"okta-module_header__1WlW3","link":"okta-module_link___U-L6","detail":"okta-module_detail__2hQvP","cta-button":"okta-module_cta-button__qGo57","live-service-demo":"okta-module_live-service-demo__1XylH","output__cta__message":"okta-module_output__cta__message__2u8dG","footer__service__name":"okta-module_footer__service__name__4ALiU","docs-page":"okta-module_docs-page__3LlBL","logo":"okta-module_logo__2hB_O","logo--light":"okta-module_logo--light__3U9mY","plan":"okta-module_plan__22aI0","features":"okta-module_features__2473Y"};
var okta = function okta(opts) {
if (opts === void 0) {
opts = {};
}
return _extends({}, styles, {
'@name': 'okta',
'@section-bg': true,
'@section-fg-color': '#23303a',
'@section-bg-color': '#1e3a54',
'@primary-color': '#d23d67'
}, opts);
};
var themes = {
__proto__: null,
okta: okta
};
var _class, _descriptor, _temp;
var ThemeManagerClass = (_class = (_temp = function ThemeManagerClass() {
var _this = this;
_initializerDefineProperty(this, "theme", _descriptor, this);
this._themes = {};
this.registerTheme = function (name, themeFactory) {
if (process.env.NODE_ENV === 'development') {
console.log('register theme', name);
}
_this._themes[name] = themeFactory;
};
this.setTheme = function (opts) {
var name;
if (typeof opts === 'object') {
name = opts.name;
} else {
name = opts;
opts = {};
}
var themeFactory = name && _this._themes[name];
if (themeFactory) {
_this.theme = themeFactory(opts);
} else {
console.error();
console.error("ThemeManager.setTheme(" + name + ") theme not found");
console.error('Must call ThemeManager.registerTheme first');
console.error();
}
};
}, _temp), (_descriptor = _applyDecoratedDescriptor(_class.prototype, "theme", [observable], {
configurable: true,
enumerable: true,
writable: true,
initializer: function initializer() {
return {};
}
})), _class);
var ThemeManager = observable(new ThemeManagerClass());
window.ThemeManager = ThemeManager;
for (var _i = 0, _Object$entries = Object.entries(themes); _i < _Object$entries.length; _i++) {
var _Object$entries$_i = _Object$entries[_i],
k = _Object$entries$_i[0],
v = _Object$entries$_i[1];
ThemeManager.registerTheme(k, v);
}
if (process.env.NODE_ENV === 'development') {
autorun(function () {
trace();
console.log('theme', toJS(ThemeManager.theme));
}, {
name: 'Theme change (development)'
});
}
var themeUtil = function themeUtil(styles, id) {
var theme = ThemeManager.theme;
for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
args[_key - 2] = arguments[_key];
}
return cs.apply(void 0, [styles && styles[id], theme[id]].concat(args));
};
var variables = ['@name', '@section-fg-color', '@section-bg-color', 'light', 'codeTheme', '@primary-color', '@link-color', '@success-color', '@warning-color', '@error-color', '@font-size-base', '@heading-color', '@text-color', '@text-color-secondary ', '@disabled-color ', '@border-radius-base', '@border-color-base', '@box-shadow-base'];
var _loop = function _loop() {
var v = _variables[_i$1];
Object.defineProperty(themeUtil, v, {
get: function get() {
return ThemeManager.theme[v];
}
});
};
for (var _i$1 = 0, _variables = variables; _i$1 < _variables.length; _i$1++) {
_loop();
}
decorate(themeUtil, variables.reduce(function (acc, k) {
acc[k] = computed;
return acc;
}, {}));
var theme = themeUtil;
var styles$1 = {"loading":"styles-module_loading__2lJ-K","title":"styles-module_title__3WAEn","loading-icon":"styles-module_loading-icon__2Sw0s"};
var Loading =
/*#__PURE__*/
function (_Component) {
_inheritsLoose(Loading, _Component);
function Loading() {
return _Component.apply(this, arguments) || this;
}
var _proto = Loading.prototype;
_proto.render = function render() {
var _this$props = this.props,
className = _this$props.className,
title = _this$props.title,
rest = _objectWithoutPropertiesLoose(_this$props, ["className", "title"]);
return h("div", _extends({
className: themeUtil(styles$1, 'loading', className)
}, rest), title && h("h3", {
className: themeUtil(styles$1, 'title', className)
}, title), h(Icon, {
className: themeUtil(styles$1, 'loading-icon', className),
type: "loading"
}));
};
return Loading;
}(Component);
var _dec, _class$1, _class2, _temp$1;
var AuthenticatedRoute = (_dec = inject('auth'), _dec(_class$1 = observer(_class$1 = (_temp$1 = _class2 =
/*#__PURE__*/
function (_Component) {
_inheritsLoose(AuthenticatedRoute, _Component);
function AuthenticatedRoute() {
return _Component.apply(this, arguments) || this;
}
var _proto = AuthenticatedRoute.prototype;
_proto.render = function render() {
var _this$props = this.props,
Component = _this$props.component,
redirect = _this$props.redirect,
auth = _this$props.auth,
rest = _objectWithoutPropertiesLoose(_this$props, ["component", "redirect", "auth"]);
if (auth.isBootstrapping) {
return h(Loading, null);
}
if (!auth.isAuthenticated) {
return h(Redirect, {
to: {
pathname: redirect
}
});
}
return h(Route, _extends({}, rest, {
render: function render(props) {
return auth.isAuthenticated ? h(Component, props) : h(Redirect, {
to: {
pathname: redirect,
state: {
from: props.location
}
}
});
}
}));
};
return AuthenticatedRoute;
}(Component), _class2.propTypes = {
component: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
auth: PropTypes.object.isRequired,
redirect: PropTypes.string
}, _class2.defaultProps = {
redirect: '/login'
}, _temp$1)) || _class$1) || _class$1);
var isProd = process.env.NODE_ENV === 'production';
var apiBaseUrl = process.env.REACT_APP_SAASIFY_API_BASE_URL || 'https://api.saasify.sh';
var redirectUri = 'https://auth.saasify.sh';
var origin = typeof window !== 'undefined' ? window.location.origin : 'localhost:3000';
var githubRedirectUri = origin + "/auth/github";
var googleRedirectUri = origin + "/auth/google";
var stripeRedirectUri = origin + "/auth/stripe";
var spotifyRedirectUri = origin + "/auth/spotify";
var twitterRedirectUri = origin + "/auth/twitter";
var linkedinRedirectUri = origin + "/auth/linkedin";
var githubRedirectQuery = qs.stringify({
uri: githubRedirectUri
});
var saasifyProviderStripePublicKeyTest = 'pk_test_FvYaeQlk6RbGIL9E36p9xNRo';
var saasifyProviderStripePublicKeyLive = 'pk_live_3vousdHKwzzKdrP0quCQPWcr';
var saasifyProviderStripeClientIdDev = 'ca_GqgriKmt3i5JYrKOaHzJbAceDdB0Yc5k';
var saasifyProviderStripeClientIdPrd = 'ca_Gqgr4b80VSYylXdUDsh548bNb1wqdue8';
var saasifyProviderGitHubClientIdDev = '86d73532d0105da51a4d';
var saasifyProviderGitHubClientIdPrd = '6525c812c9b4430147c3';
var saasifyProviderSpotifyClientIdDev = '99702e2b2d9d45b7bb457b4e8a9e7d68';
var saasifyProviderSpotifyClientIdPrd = '99702e2b2d9d45b7bb457b4e8a9e7d68';
var saasifyProviderLinkedInClientId = '78vssc1d6gg0c2';
var env = {
isProd: isProd,
apiBaseUrl: apiBaseUrl,
redirectUri: redirectUri,
githubRedirectUri: redirectUri + "?" + githubRedirectQuery,
providerGitHubClientId: isProd ? saasifyProviderGitHubClientIdPrd : saasifyProviderGitHubClientIdDev,
googleRedirectUri: googleRedirectUri,
stripeRedirectUri: stripeRedirectUri,
providerStripeClientId: isProd ? saasifyProviderStripeClientIdPrd : saasifyProviderStripeClientIdDev,
stripePublicKey: isProd ? saasifyProviderStripePublicKeyLive : saasifyProviderStripePublicKeyTest,
spotifyRedirectUri: spotifyRedirectUri,
providerSpotifyClientId: isProd ? saasifyProviderSpotifyClientIdPrd : saasifyProviderSpotifyClientIdDev,
twitterRedirectUri: twitterRedirectUri,
linkedinRedirectUri: linkedinRedirectUri,
providerLinkedInClientId: saasifyProviderLinkedInClientId
};
var API = new SaasifyClient({
baseUrl: env.apiBaseUrl
});
var cache = {};
var LocalStore =
/*#__PURE__*/
function () {
function LocalStore() {}
LocalStore.get = function get() {
var key = arguments.length <= 0 ? undefined : arguments[0];
var cached = cache[key];
if (cached) return Promise.resolve(cached);
var value = localforage.getItem.apply(localforage, arguments);
cache[key] = value;
return value;
};
LocalStore.set = function set() {
var key = arguments.length <= 0 ? undefined : arguments[0];
var value = arguments.length <= 1 ? undefined : arguments[1];
cache[key] = value;
return localforage.setItem.apply(localforage, arguments);
};
LocalStore.remove = function remove() {
var key = arguments.length <= 0 ? undefined : arguments[0];
delete cache[key];
return localforage.removeItem.apply(localforage, arguments);
};
return LocalStore;
}();
var authTwitter = function authTwitter() {
try {
var stateRaw = JSON.stringify({
uri: env.twitterRedirectUri,
route: window.location.pathname
});
var state = btoa(stateRaw);
var params = {
state: state
};
var opts = qs.stringify(params);
var redirectUri = env.redirectUri + "?" + opts;
return Promise.resolve(API.getTwitterAuthUrl({
redirectUri: redirectUri
})).then(function (_ref4) {
var authUrl = _ref4.url;
console.log({
redirectUri: redirectUri,
authUrl: authUrl
});
return Promise.resolve(storeState()).then(function () {
window.location = authUrl;
});
});
} catch (e) {
return Promise.reject(e);
}
};
var authSpotify = function authSpotify(_ref3) {
var _ref3$scope = _ref3.scope,
scope = _ref3$scope === void 0 ? '' : _ref3$scope;
try {
var stateRaw = JSON.stringify({
uri: env.spotifyRedirectUri,
route: window.location.pathname
});
var state = btoa(stateRaw);
var params = {
response_type: 'code',
client_id: env.providerSpotifyClientId,
redirect_uri: env.redirectUri,
scope: scope,
state: state
};
var opts = qs.stringify(params);
return Promise.resolve(storeState()).then(function () {
window.location = "https://accounts.spotify.com/authorize?" + opts;
});
} catch (e) {
return Promise.reject(e);
}
};
var authStripe = function authStripe(_ref2) {
var auth = _ref2.auth,
_ref2$express = _ref2.express,
express = _ref2$express === void 0 ? false : _ref2$express;
try {
var stateRaw = JSON.stringify({
uri: env.stripeRedirectUri,
route: window.location.pathname
});
var state = btoa(stateRaw);
var scope = express ? undefined : 'read_write';
var params = {
response_type: 'code',
client_id: env.providerStripeClientId,
scope: scope,
state: state
};
if (auth) {
var _auth$user;
params['stripe_user[email]'] = (_auth$user = auth.user) === null || _auth$user === void 0 ? void 0 : _auth$user.email;
}
var opts = qs.stringify(params);
return Promise.resolve(storeState()).then(function () {
if (express) {
window.location = "https://connect.stripe.com/express/oauth/authorize?" + opts;
} else {
window.location = "https://connect.stripe.com/oauth/authorize?" + opts;
}
});
} catch (e) {
return Promise.reject(e);
}
};
var authGoogle = function authGoogle(params) {
try {
return Promise.resolve(API.getGoogleAuthUrl(params)).then(function (_ref) {
var url = _ref.url;
var authUrl = new URL(url);
var state = JSON.stringify({
uri: env.googleRedirectUri,
route: window.location.pathname
});
var state64 = btoa(state);
authUrl.searchParams.set('state', state64);
var finalUrl = authUrl.toString();
console.log('authenticating with google', {
url: url,
finalUrl: finalUrl
});
return Promise.resolve(storeState()).then(function () {
window.location = finalUrl;
});
});
} catch (e) {
return Promise.reject(e);
}
};
var authLinkedIn = function authLinkedIn() {
try {
var scope = 'r_liteprofile r_emailaddress';
var stateRaw = JSON.stringify({
uri: env.linkedinRedirectUri,
route: window.location.pathname
});
var state = btoa(stateRaw);
var opts = qs.stringify({
client_id: env.providerLinkedInClientId,
redirect_uri: env.redirectUri,
response_type: 'code',
scope: scope,
state: state
});
return Promise.resolve(storeState()).then(function () {
window.location = "https://www.linkedin.com/oauth/v2/authorization?" + opts;
});
} catch (e) {
return Promise.reject(e);
}
};
var authGitHub = function authGitHub() {
try {
var scope = 'read:user user:email';
var opts = qs.stringify(_extends({}, githubConfig, {
scope: scope
}));
return Promise.resolve(storeState()).then(function () {
window.location = "https://github.com/login/oauth/authorize?" + opts;
});
} catch (e) {
return Promise.reject(e);
}
};
var storeState = function storeState() {
try {
return Promise.resolve(LocalStore.set(storeKey, window.location.href));
} catch (e) {
return Promise.reject(e);
}
};
var storeKey = 'auth:location';
var githubConfig = {
client_id: env.providerGitHubClientId,
redirect_uri: env.githubRedirectUri
};
var debug = _debug('app');
var styles$2 = {"form":"styles-module_form__yUzwU","title":"styles-module_title__muMf6","forgot":"styles-module_forgot__7hJYu","submit":"styles-module_submit__1k3Id","or-signup":"styles-module_or-signup__dvibh"};
var _dec$1, _dec2, _class$2, _class2$1, _temp$2;
var FormItem = Form.Item;
var LoginForm = (_dec$1 = inject('auth'), _dec2 = Form.create(), _dec$1(_class$2 = _dec2(_class$2 = (_temp$2 = _class2$1 =
/*#__PURE__*/
function (_Component) {
_inheritsLoose(LoginForm, _Component);
function LoginForm() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
_this.state = {
loading: false
};
_this._onSubmit = function (e) {
e.preventDefault();
_this.props.form.validateFields(function (err, data) {
if (!err) {
_this.setState({
loading: true
});
_this.props.auth.signin(data).then(_this.props.onAuth)["catch"](function (err) {
var _err$response, _err$response$data;
debug(err);
_this.setState({
loading: false
});
notification.error({
message: 'Error logging in',
description: (err === null || err === void 0 ? void 0 : (_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.error) || err.message,
duration: 10
});
});
}
});
};
_this._onClickGitHub = function (e) {
e.preventDefault();
authGitHub();
};
_this._onClickGoogle = function (e) {
e.preventDefault();
authGoogle(_this.props.authParams);
};
_this._onClickTwitter = function (e) {
e.preventDefault();
authTwitter();
};
_this._onClickLinkedIn = function (e) {
e.preventDefault();
authLinkedIn();
};
return _this;
}
var _proto = LoginForm.prototype;
_proto.render = function render() {
var _authConfig$github, _authConfig$google, _authConfig$twitter, _authConfig$linkedin, _authConfig$default;
var _this$props = this.props,
className = _this$props.className,
authConfig = _this$props.authConfig;
var getFieldDecorator = this.props.form.getFieldDecorator;
var loading = this.state.loading;
var iconUser = h(Icon, {
type: "user",
style: {
color: 'rgba(0,0,0,.25)'
}
});
var iconLock = h(Icon, {
type: "lock",
style: {
color: 'rgba(0,0,0,.25)'
}
});
var hasGitHubAuth = ((_authConfig$github = authConfig.github) === null || _authConfig$github === void 0 ? void 0 : _authConfig$github.enabled) !== false;
var hasGoogleAuth = ((_authConfig$google = authConfig.google) === null || _authConfig$google === void 0 ? void 0 : _authConfig$google.enabled) !== false;
var hasTwitterAuth = ((_authConfig$twitter = authConfig.twitter) === null || _authConfig$twitter === void 0 ? void 0 : _authConfig$twitter.enabled) !== false;
var hasLinkedInAuth = ((_authConfig$linkedin = authConfig.linkedin) === null || _authConfig$linkedin === void 0 ? void 0 : _authConfig$linkedin.enabled) !== false;
var hasDefaultAuth = ((_authConfig$default = authConfig["default"]) === null || _authConfig$default === void 0 ? void 0 : _authConfig$default.enabled) !== false;
return h(Form, {
className: themeUtil(styles$2, 'form', themeUtil.light, className),
onSubmit: this._onSubmit
}, h("h2", {
className: themeUtil(styles$2, 'title')
}, "Login"), authConfig.preBody, hasGitHubAuth && h(FormItem, null, h(Button, {
className: themeUtil(styles$2, 'submit'),
icon: "github",
onClick: this._onClickGitHub
}, "Log in with GitHub")), hasGoogleAuth && h(FormItem, null, h(Button, {
className: themeUtil(styles$2, 'submit'),
icon: "google",
onClick: this._onClickGoogle
}, "Log in with Google")), hasTwitterAuth && h(FormItem, null, h(Button, {
className: themeUtil(styles$2, 'submit'),
icon: "twitter",
onClick: this._onClickTwitter
}, "Log in with Twitter")), hasLinkedInAuth && h(FormItem, null, h(Button, {
className: themeUtil(styles$2, 'submit'),
icon: "linkedin",
onClick: this._onClickLinkedIn
}, "Log in with LinkedIn")), (hasGitHubAuth || hasGoogleAuth || hasTwitterAuth || hasLinkedInAuth) && hasDefaultAuth && h(Divider, null, "Or"), hasDefaultAuth && h(React.Fragment, null, h(FormItem, null, getFieldDecorator('username', {
rules: [{
required: true,
message: 'Please enter your username or email.'
}]
})(h(Input, {
prefix: iconUser,
placeholder: "Username"
}))), h(FormItem, null, getFieldDecorator('password', {
rules: [{
required: true,
message: 'Please enter your password.'
}]
})(h(Input, {
prefix: iconLock,
type: "password",
placeholder: "Password"
}))), h(FormItem, null, getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true
})(h(Checkbox, null, "Remember me"))), h(Button, {
type: "primary",
htmlType: "submit",
className: themeUtil(styles$2, 'submit'),
loading: loading
}, "Log in")), authConfig.orSignup !== false && h("div", {
className: themeUtil(styles$2, 'or-signup')
}, authConfig.orSignup || h("span", null, "Or ", h(Link$2, {
to: "/signup"
}, "sign up!"))), authConfig.postBody);
};
return LoginForm;
}(Component), _class2$1.propTypes = {
auth: PropTypes.object.isRequired,
form: PropTypes.object.isRequired,
authConfig: PropTypes.object,
authParams: PropTypes.object,
className: PropTypes.string,
onAuth: PropTypes.func
}, _class2$1.defaultProps = {
authConfig: {},
authParams: {},
onAuth: function onAuth() {
return undefined;
}
}, _temp$2)) || _class$2) || _class$2);
var styles$3 = {"form":"styles-module_form__QEYKq","title":"styles-module_title__2b9xU","submit":"styles-module_submit__2hmyi"};
var _dec$2, _dec2$1, _class$3, _class2$2, _temp$3;
var FormItem$1 = Form.Item;
var SignupForm = (_dec$2 = inject('auth'), _dec2$1 = Form.create(), _dec$2(_class$3 = _dec2$1(_class$3 = (_temp$3 = _class2$2 =
/*#__PURE__*/
function (_Component) {
_inheritsLoose(SignupForm, _Component);
function SignupForm() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
_this.state = {
loading: false
};
_this._onSubmit = function (e) {
e.preventDefault();
_this.props.form.validateFields(function (err, data) {
if (!err) {
_this.setState({
loading: true
});
_this.props.auth.signup(data).then(_this.props.onAuth)["catch"](function (err) {
var _err$response, _err$response$data;
debug(err);
_this.setState({
loading: false
});
notification.error({
message: 'Error signing up',
description: (err === null || err === void 0 ? void 0 : (_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.error) || err.message,
duration: 10
});
});
}
});
};
_this._onClickGitHub = function (e) {
e.preventDefault();
authGitHub();
};
_this._onClickGoogle = function (e) {
e.preventDefault();
authGoogle(_this.props.authParams);
};
_this._onClickTwitter = function (e) {
e.preventDefault();
authTwitter();
};
_this._onClickLinkedIn = function (e) {
e.preventDefault();
authLinkedIn();
};
return _this;
}
var _proto = SignupForm.prototype;
_proto.render = function render() {
var _authConfig$github, _authConfig$google, _authConfig$twitter, _authConfig$linkedin, _authConfig$default;
var _this$props = this.props,
className = _this$props.className,
authConfig = _this$props.authConfig;
var getFieldDecorator = this.props.form.getFieldDecorator;
var loading = this.state.loading;
var iconUser = h(Icon, {
type: "user",
style: {
color: 'rgba(0,0,0,.25)'
}
});
var iconLock = h(Icon, {
type: "lock",
style: {
color: 'rgba(0,0,0,.25)'
}
});
var hasGitHubAuth = ((_authConfig$github = authConfig.github) === null || _authConfig$github === void 0 ? void 0 : _authConfig$github.enabled) !== false;
var hasGoogleAuth = ((_authConfig$google = authConfig.google) === null || _authConfig$google === void 0 ? void 0 : _authConfig$google.enabled) !== false;
var hasTwitterAuth = ((_authConfig$twitter = authConfig.twitter) === null || _authConfig$twitter === void 0 ? void 0 : _authConfig$twitter.enabled) !== false;
var hasLinkedInAuth = ((_authConfig$linkedin = authConfig.linkedin) === null || _authConfig$linkedin === void 0 ? void 0 : _authConfig$linkedin.enabled) !== false;
var hasDefaultAuth = ((_authConfig$default = authConfig["default"]) === null || _authConfig$default === void 0 ? void 0 : _authConfig$default.enabled) !== false;
return h(Form, {
className: themeUtil(styles$3, 'form', themeUtil.light, className),
onSubmit: this._onSubmit
}, h("h2", {
className: themeUtil(styles$3, 'title')
}, "Sign up"), authConfig.preBody, hasGitHubAuth && h(FormItem$1, null, h(Button, {
className: themeUtil(styles$3, 'submit'),
icon: "github",
onClick: this._onClickGitHub
}, "Sign up with GitHub")), hasGoogleAuth && h(FormItem$1, null, h(Button, {
className: themeUtil(styles$3, 'submit'),
icon: "google",
onClick: this._onClickGoogle
}, "Sign up with Google")), hasTwitterAuth && h(FormItem$1, null, h(Button, {
className: themeUtil(styles$3, 'submit'),
icon: "twitter",
onClick: this._onClickTwitter
}, "Sign up with Twitter")), hasLinkedInAuth && h(FormItem$1, null, h(Button, {
className: themeUtil(styles$3, 'submit'),
icon: "linkedin",
onClick: this._onClickLinkedIn
}, "Sign up with LinkedIn")), (hasGitHubAuth || hasGoogleAuth || hasTwitterAuth || hasLinkedInAuth) && hasDefaultAuth && h(Divider, null, "Or"), hasDefaultAuth && h(React.Fragment, null, h(FormItem$1, null, getFieldDecorator('email', {
rules: [{
required: true,
message: 'Please enter your email.'
}]
})(h(Input, {
prefix: iconUser,
placeholder: "Email"
}))), h(FormItem$1, null, getFieldDecorator('username', {
rules: [{
required: true,
message: 'Please enter a username.'
}]
})(h(Input, {
prefix: iconUser,
placeholder: "Username"
}))), h(FormItem$1, null, getFieldDecorator('password', {
rules: [{
required: true,
message: 'Please enter a password.'
}]
})(h(Input, {
prefix: iconLock,
type: "password",
placeholder: "Password"
}))), h(FormItem$1, null, getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true
})(h(Checkbox, null, "Remember me"))), h(Button, {
type: "primary",
htmlType: "submit",
className: themeUtil(styles$3, 'submit'),
loading: loading
}, "Sign up")), authConfig.postBody);
};
return SignupForm;
}(Component), _class2$2.propTypes = {
auth: PropTypes.object.isRequired,
form: PropTypes.object.isRequired,
authConfig: PropTypes.object,
authParams: PropTypes.object,
className: PropTypes.string,
onAuth: PropTypes.func
}, _class2$2.defaultProps = {
authConfig: {},
authParams: {},
onAuth: function onAuth() {
return undefined;
}
}, _temp$3)) || _class$3) || _class$3);
var styles$4 = {"form":"styles-module_form__IMIw5","title":"styles-module_title__202A0","submit":"styles-module_submit__3cAJZ","label":"styles-module_label__1mKjb","input":"styles-module_input__2PQy2","detail":"styles-module_detail__1-Z3w"};
var _dec$3, _class$4, _class2$3, _temp$4, _class3, _class4, _temp2;
var createOptions = function createOptions(fontSize) {
if (fontSize === void 0) {
fontSize = 16;
}
return {
style: {
base: {
fontSize: fontSize,
color: '#424770',
letterSpacing: '0.025em',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#9e2146'
}
}
};
};
var CheckoutForm = (_dec$3 = inject('config'), _dec$3(_class$4 = observer(_class$4 = (_temp$4 = _class2$3 =
/*#__PURE__*/
function (_Component) {
_inheritsLoose(CheckoutForm, _Component);
function CheckoutForm() {
return _Component.apply(this, arguments) || this;
}
var _proto = CheckoutForm.prototype;
_proto.render = function render() {
return h(StripeProvider, {
apiKey: env.stripePublicKey
}, h(Elements, null, h(CheckoutFormImpl, this.props)));
};
return CheckoutForm;
}(Component), _class2$3.propTypes = {
onSubmit: PropTypes.func.isRequired,
loading: PropTypes.bool,
title: PropTypes.string,
action: PropTypes.node,
footer: PropTypes.node,
className: PropTypes.string,
config: PropTypes.object.isRequired
}, _temp$4)) || _class$4) || _class$4);
var CheckoutFormImpl = injectStripe(_class3 = (_temp2 = _class4 =
/*#__PURE__*/
function (_Component2) {
_inheritsLoose(CheckoutFormImpl, _Component2);
function CheckoutFormImpl() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _Component2.call.apply(_Component2, [this].concat(args)) || this;
_this._onSubmit = function (e) {
try {
e.preventDefault();
var name = e.target.name.value;
var coupon = e.target.coupon && e.target.coupon.value;
_this.props.onSubmit({
name: name,
coupon: coupon,
stripe: _this.props.stripe
});
return Promise.resolve();
} catch (e) {
return Promise.reject(e);
}
};
return _this;
}
var _proto2 = CheckoutFormImpl.prototype;
_proto2.render = function render() {
var _this$props = this.props,
config = _this$props.config,
loading = _this$props.loading,
title = _this$props.title,
action = _this$props.action,
footer = _this$props.footer,
className = _this$props.className;
return h("form", {
className: themeUtil(styles$4, 'form', className, themeUtil(styles$4, 'light')),
onSubmit: this._onSubmit
}, title && h("h2", {
className: themeUtil(styles$4, 'title')
}, title), h("label", {
className: themeUtil(styles$4, 'label')
}, "Name", h("input", {
className: themeUtil(styles$4, 'input'),
name: "name",
type: "text",
placeholder: "John Doe",
required: true
})), h("label", {
className: themeUtil(styles$4, 'label')
}, "Card Details", h(Tooltip, {
placement: "right",
title: "All payment info is securely handled by Stripe."
}, h(Icon, {
className: themeUtil(styles$4, 'detail'),
type: "question-circle"
})), h(CardElement, createOptions())), config.coupons && config.coupons.length > 0 && h("label", {
className: themeUtil(styles$4, 'label')
}, "Promo Code", h("input", {
className: themeUtil(styles$4, 'input'),
name: "coupon",
type: "text",
placeholder: ""
})), action && h(Button, {
type: "primary",
htmlType: "submit",
className: themeUtil(styles$4, 'submit'),
loading: loading
}, action), footer);
};
return CheckoutFormImpl;
}(Component), _class4.propTypes = {
config: PropTypes.object.isRequired,
stripe: PropTypes.object.isRequired,
onSubmit: PropTypes.func.isRequired,
loading: PropTypes.bool,
title: PropTypes.string,
action: PropTypes.node,
footer: PropTypes.node,
className: PropTypes.string
}, _class4.defaultProps = {
loading: false
}, _temp2)) || _class3;
var styles$5 = {"cta-button":"styles-module_cta-button__3AKzj","inline":"styles-module_inline__1QeA5"};
var _class$5;
var CTAButton = Hoverable(_class$5 = observer(_class$5 =
/*#__PURE__*/
function (_Component) {
_inheritsLoose(CTAButton, _Component);
function CTAButton() {
return _Component.apply(this, arguments) || this;
}
var _proto = CTAButton.prototype;
_proto.render = function render() {
var _this$props = this.props,
hovered = _this$props.hovered,
_this$props$type = _this$props.type,
type = _this$props$type === void 0 ? 'primary' : _this$props$type,
inline = _this$props.inline,
className = _this$props.className,
children = _this$props.children,
_this$props$style = _this$props.style,
style = _this$props$style === void 0 ? {} : _this$props$style,
rest = _objectWithoutPropertiesLoose(_this$props, ["hovered", "type", "inline", "className", "children", "style"]);
var primaryColor = themeUtil['@primary-color'];
var borderColor = type === 'secondary' || !hovered ? primaryColor : 'transparent';
var ownStyle = {
border: "2px solid " + borderColor
};
if (type === 'secondary') {
ownStyle.background = hovered ? primaryColor : 'transparent';
}
return h(Button, _extends({
type: type,
className: themeUtil(styles$5, 'cta-button', className, type, styles$5[type], inline && themeUtil(styles$5, 'inline')),
style: _extends({}, ownStyle, {}, style)
}, rest), children);
};
return CTAButton;
}(Component)) || _class$5) || _class$5;
var styles$6 = {"logo":"styles-module_logo__CDiMd"};
var _dec$4, _class$6;
var Logo = (_dec$4 = inject('config'), _dec$4(_class$6 = observer(_class$6 =
/*#__PURE__*/
function (_Component) {
_inheritsLoose(Logo, _Component);
function Logo() {
return _Component.apply(this, arguments) || this;
}
var _proto = Logo.prototype;
_proto.render = function render() {
var _config$deployment, _config$deployment$sa;
var _this$props = this.props,
className = _this$props.className,
_this$props$style = _this$props.style,
style = _this$props$style === void 0 ? {} : _this$props$style,
light = _this$props.light,
config = _this$props.config,
rest = _objectWithoutPropertiesLoose(_this$props, ["className", "style", "light", "config"]);
return config.logo ? h("img", _extends({
className: themeUtil(styles$6, 'logo', className),
src: light && ((_config$deployment = config.deployment) === null || _config$deployment === void 0 ? void 0 : (_config$deployment$sa = _config$deployment.saas) === null || _config$deployment$sa === void 0 ? void 0 : _config$deployment$sa.logoLight) || config.logo,
alt: config.name + " Logo",
style: style
}, rest)) : h("div", _extends({
className: themeUtil(styles$6, 'logo', className),
style: style
}, rest), config.name);
};
return Logo;
}(Component)) || _class$6) || _class$6);
var styles$7 = {"nav-header":"styles-module_nav-header__1B5br","content":"styles-module_content__1AUWq","content-body":"styles-module_content-body__1Omfb","attached":"styles-module_attached__2xShN","primary":"styles-module_primary__1cin0","logo-image":"styles-module_logo-image__2ur8t","logo":"styles-module_logo__3yU03","logo--light":"styles-module_logo--light__3Pv3B","logo-text":"styles-module_logo-text__KGXVL","links":"styles-module_links__3DD6V","link":"styles-module_link__oAvSn","active-link":"styles-module_active-link__1Hooy","container":"styles-module_container__2vHAE","menuWrapper":"styles-module_menuWrapper__2252q","actions":"styles-module_actions__RSgiO","action":"styles-module_action__3O1Yp","burger":"styles-module_burger__1fkY1","icon":"styles-module_icon__3CHwg","expanded":"styles-module_expanded__39KUP"};
var Link = (function (_ref) {
var children = _ref.children,
label = _ref.label,
to = _ref.to,
href = _ref.href,
className = _ref.className,
rest = _objectWithoutPropertiesLoose(_ref, ["children", "label", "to", "href", "className"]);
return to ? h(NavLink, _extends({
to: to,
className: themeUtil(styles$7, 'link', className),
activeClassName: themeUtil(styles$7, 'active-link', className),
exact: true
}, rest), label || children) : h("a", _extends({
href: href,
className: themeUtil(styles$7, 'link', className)
}, rest), label || children);
});
var _dec$5, _dec2$2, _class$7, _class2$4, _temp$5;
var isServer = typeof window === 'undefined';
var NavHeader = (_dec$5 = inject('config'), _dec2$2 = inject('auth'), _dec$5(_class$7 = _dec2$2(_class$7 = observer(_class$7 = (_temp$5 = _class2$4 =
/*#__PURE__*/
function (_Component) {
_inheritsLoose(NavHeader, _Component);
function NavHeader() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
_this.state = {
attached: isServer || window.scrollY > 0,
expanded: false,
width: isServer ? 1000 : window.clientWidth || window.innerWidth
};
_this._onToggleMainNav = function () {
_this.setState({
expanded: !_this.state.expanded
});
};
_this._onScroll = function () {
if (!_this._resetRaf) {
_this._resetRaf = raf(_this._onReset);
}
};
_this._onResize = function () {
if (!_this._resetRaf) {
_this._resetRaf = raf(_this._onReset);
}
};
_this._onReset = function () {
_this._resetRaf = null;
_this.setState({
attached: isServer || window.scrollY > 0,
width: window.clientWidth || window.innerWidth
});
};
return _this;
}
var _proto = NavHeader.prototype;
_proto.componentDidMount = function componentDidMount() {
if (!isServer) {
window.addEventListener('scroll', this._onScroll);
window.addEventListener('resize', this._onResize);
this._onReset();
}
};
_proto.componentWillUnmount = function componentWillUnmount() {
if (!isServer) {
window.removeEventListener('scroll', this._onScroll);
window.removeEventListener('resize', this._onResize);
}
if (this._resetRaf) {
raf.cancel(this._resetRaf);
this._resetRaf = null;
}
};
_proto.render = function render() {
var _config$deployment, _config$deployment$sa, _config$header, _sections$navHeader, _config$header2, _sections$navHeader2, _config$deployment2, _config$deployment2$s;
var _this$props = this.props,
auth = _this$props.auth,
config = _this$props.config,
fixed = _this$props.fixed,
className = _this$props.className;
var _this$state = this.state,
attached = _this$state.attached,
expanded = _this$state.expanded,
width = _this$state.width;
var sections = config === null || config === void 0 ? void 0 : (_config$deployment = config.deployment) === null || _config$deployment === void 0 ? void 0 : (_config$deployment$sa = _config$deployment.saas) === null || _config$deployment$sa === void 0 ? void 0 : _config$deployment$sa.sections;
var actions = ((_config$header = config.header) === null || _config$header === void 0 ? void 0 : _config$header.actions) || [];
if (typeof actions === 'function') {
actions = actions({
config: config,
auth: auth,
fixed: fixed,
attached: attached
});
}
var actionsMenu = actions && auth.isAuthenticated && h(Menu, {
onClick: function onClick(e) {
return console.log(e);
}
}, actions.map(function (action, index) {
if (typeof action === 'function') {
action = action({
config: config,
auth: auth,
fixed: fixed,
attached: attached
});
if (!action) return null;
}
var _action = action,
to = _action.to,
href = _action.href,
label = _action.label,
icon = _action.icon,
rest = _objectWithoutPropertiesLoose(_action, ["key", "to", "href", "label", "icon"]);
var validKey = action.key || action.to || action.href || index;
return h(Menu.Item, {
key: validKey
}, h(Link, _extends({
key: validKey,
to: to,
href: href
}, rest), icon && h(Icon, {
type: icon,
className: styles$7.icon
}), label));
}));
return h("header", {
className: themeUtil(styles$7, 'nav-header', attached || fixed ? themeUtil(styles$7, 'attached') : null, expanded ? themeUtil(styles$7, 'expanded') : null, className),
style: {
background: attached || fixed || expanded ? themeUtil['@section-fg-color'] : 'transparent',
paddingBottom: expanded ? 24 : undefined
}
}, h("div", {
className: themeUtil(styles$7, 'content')
}, h("div", {
className: themeUtil(styles$7, 'primary')
}, h(Link, {
to: "/"
}, config.logo && (sections === null || sections === void 0 ? void 0 : (_sections$navHeader = sections.navHeader) === null || _sections$navHeader === void 0 ? void 0 : _sections$navHeader.logo) !== false && h("span", {
className: themeUtil(styles$7, 'logo-image')
}, h(Logo, {
className: themeUtil(styles$7, 'logo')
}), h(Logo, {
className: themeUtil(styles$7, 'logo', themeUtil(styles$7, 'logo--light')),
light: true
})), config.logo && (config === null || config === void 0 ? void 0 : (_config$header2 = config.header) === null || _config$header2 === void 0 ? void 0 : _config$header2.displayName) !== false && (sections === null || sections === void 0 ? void 0 : (_sections$navHeader2 = sections.navHeader) === null || _sections$navHeader2 === void 0 ? void 0 : _sections$navHeader2.displayName) !== false && h("span", {
className: themeUtil(styles$7, 'logo-text')
}, (config === null || config === void 0 ? void 0 : (_config$deployment2 = config.deployment) === null || _config$deployment2 === void 0 ? void 0 : (_config$deployment2$s = _config$deployment2.saas) === null || _config$deployment2$s === void 0 ? void 0 : _config$deployment2$s.headerName) ? config.deployment.saas.headerName : config === null || config === void 0 ? void 0 : config.name)), h("div", {
className: themeUtil(styles$7, 'burger')
}, h(Button, {
type: "secondary",
onClick: this._onToggleMainNav,
icon: "menu"
}))), h("div", {
className: themeUtil(styles$7, 'content-body')
}, h("div", {
className: themeUtil(styles$7, 'links')
}, config.header.links.map(function (link) {
if (typeof link === 'function') {
link = link({
config: config,
auth: auth,
fixed: fixed,
attached: attached
});
if (!link) return null;
}
var _link = link,
label = _link.label,
rest = _objectWithoutPropertiesLoose(_link, ["label", "icon"]);
return h(Link, _extends({
key: link.to || link.href
}, rest), label);
})), actions ? expanded && width < 768 || !auth.isAuthenticated ? h("div", {
className: themeUtil(styles$7, 'actions')
}, actions.map(function (action, index) {
if (typeof action === 'function') {
action = action({
config: config,
auth: auth,
fixed: fixed,
attached: attached
});
if (!action) return null;
}
var _action2 = action,
to = _action2.to,
href = _action2.href,
label = _action2.label,
rest = _objectWithoutPropertiesLoose(_action2, ["key