(this._container = chart)} />;
28 | }
29 | }
30 |
31 | C3Wrapper.propTypes = {
32 | config: PropTypes.object.isRequired
33 | };
34 |
--------------------------------------------------------------------------------
/src/components/CustomCardControl/CustomCardControl.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { FormattedMessage, injectIntl } from 'react-intl';
5 | import { CardControl } from 'cf-component-card';
6 | import { Button } from 'cf-component-button';
7 | import {
8 | planNeedsUpgrade,
9 | getLocalizedPlanId,
10 | FREE_PLAN,
11 | getPlanUpdateParam
12 | } from '../../constants/Plans.js';
13 | import { getConfigValue } from '../../selectors/config.js';
14 | import { openWindow720x720 } from '../../utils/utils.js';
15 |
16 | class CustomCardControl extends Component {
17 | render() {
18 | let {
19 | activeZone,
20 | purchaseSubscription,
21 | purchaseSubscriptionPath
22 | } = this.props;
23 |
24 | if (purchaseSubscription && purchaseSubscriptionPath) {
25 | let upgradeLink = `https://dash.cloudflare.com/${activeZone.account.id}/${activeZone.name}${purchaseSubscriptionPath}`;
26 | return (
27 |
28 | {purchaseSubscription ? (
29 |
35 | ) : (
36 | this.props.children
37 | )}
38 |
39 | );
40 | }
41 |
42 | var currentPlan = this.props.hasOwnProperty('currentPlan')
43 | ? this.props.currentPlan
44 | : FREE_PLAN;
45 | var minimumPlan = this.props.hasOwnProperty('minimumPlan')
46 | ? this.props.minimumPlan
47 | : FREE_PLAN;
48 | var needToUpgrade = planNeedsUpgrade(currentPlan, minimumPlan);
49 | var localizedPlanId = getLocalizedPlanId(minimumPlan);
50 |
51 | // Upgrade Plan Page can get the following parameters
52 | // /a/upgrade-plan?pt=[f|p|b|]
53 | let upgradeLink = `https://dash.cloudflare.com?to=/:account/${activeZone.name}/update-plan`;
54 | upgradeLink += '&pt=' + getPlanUpdateParam(minimumPlan);
55 |
56 | return (
57 |
58 | {needToUpgrade ? (
59 |
66 | ) : (
67 | this.props.children
68 | )}
69 |
70 | );
71 | }
72 | }
73 |
74 | CustomCardControl.propTypes = {
75 | name: PropTypes.string,
76 | indentifier: PropTypes.string.isRequired,
77 | integrationName: PropTypes.string,
78 | activeZone: PropTypes.object.isRequired,
79 | currentPlan: PropTypes.string,
80 | minimumPlan: PropTypes.string,
81 | purchaseSubscription: PropTypes.bool,
82 | purchaseSubscriptionPath: PropTypes.string,
83 | children: PropTypes.node
84 | };
85 |
86 | function mapStateToProps(state) {
87 | return {
88 | integrationName: getConfigValue(state.config, 'integrationName'),
89 | activeZone: state.activeZone
90 | };
91 | }
92 | export default injectIntl(connect(mapStateToProps)(CustomCardControl));
93 |
--------------------------------------------------------------------------------
/src/components/FeatureManager/FeatureManager.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export default class FeatureManager extends Component {
5 | render() {
6 | return (
7 |
8 | {this.props.isEnabled && this.props.children}
9 | {!this.props.isEnabled && this.props.error && this.props.error}
10 |
11 | );
12 | }
13 | }
14 |
15 | FeatureManager.propTypes = {
16 | isEnabled: PropTypes.bool.isRequired,
17 | error: PropTypes.string,
18 | children: PropTypes.node
19 | };
20 |
--------------------------------------------------------------------------------
/src/components/FormattedMarkdown/FormattedMarkdown.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { injectIntl } from 'react-intl';
5 | import MarkdownIt from 'markdown-it';
6 |
7 | import { formatMessageForIntegration } from '../../utils/utils';
8 | import { getConfigValue } from '../../selectors/config.js';
9 |
10 | // To support different translations for differents integrations add
11 | // "mycomponent.myfeature.integrationName1"
12 | // "mycomponent.myfeature.integrationName2"
13 | // ...
14 | // and the default translation "mycomponent.myfeature"
15 | //
16 | // Afterwards call
17 | //
18 | class FormattedMarkdown extends Component {
19 | render() {
20 | let { integrationName, formattedMessage } = this.props;
21 |
22 | if (!formattedMessage) {
23 | formattedMessage = formatMessageForIntegration(
24 | this.props.intl,
25 | this.props.text,
26 | integrationName
27 | );
28 | }
29 |
30 | var md = new MarkdownIt();
31 |
32 | return (
33 |
38 | );
39 | }
40 | }
41 |
42 | FormattedMarkdown.propTypes = {
43 | text: PropTypes.string,
44 | formattedMessage: PropTypes.string,
45 | intl: PropTypes.object,
46 | integrationName: PropTypes.string
47 | };
48 |
49 | function mapStateToProps(state) {
50 | return {
51 | integrationName: getConfigValue(state.config, 'integrationName')
52 | };
53 | }
54 | export default injectIntl(connect(mapStateToProps)(FormattedMarkdown));
55 |
--------------------------------------------------------------------------------
/src/components/GradientBanner/GradientBanner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createComponent } from 'cf-style-container';
3 |
4 | const gradientStyles = () => ({
5 | width: '100%',
6 | height: '150px',
7 | display: 'flex',
8 | justifyContent: 'center',
9 | background: 'linear-gradient(left, #8176B5, #76C4E2)',
10 | backgroundRepeat: 'no-repeat',
11 | backgroundSize: '100% 250px',
12 | backgroundColor: '#e6e6e6'
13 | });
14 |
15 | const GradientBanner = ({ className, children }) => {
16 | return React.createElement('div', { className }, children);
17 | };
18 |
19 | export default createComponent(gradientStyles, GradientBanner);
20 |
--------------------------------------------------------------------------------
/src/components/MarketingFeature/MarketingFeature.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export default class MarketingFeature extends Component {
5 | render() {
6 | /*
7 | * These styles are stolen from the marketing site and aren't in our CSS
8 | */
9 | let divStyles = {
10 | padding: '30px 15px 30px 15px'
11 | };
12 | let iconStyles = {
13 | display: 'block',
14 | width: '40px',
15 | height: 'auto',
16 | maxWidth: '100px',
17 | margin: '0 auto'
18 | };
19 | let largeLinkStyles = {
20 | padding: '20px 0 0 0',
21 | textAlign: 'center',
22 | fontSize: '16px',
23 | color: '#2f7bbf',
24 | width: '100%',
25 | display: 'block'
26 | };
27 | let columnPStyles = {
28 | padding: '10px 0 0 0',
29 | fontSize: '12px',
30 | textAlign: 'center'
31 | };
32 |
33 | return (
34 |
35 |
36 |
37 | {this.props.title}
38 |
39 |
{this.props.description}
40 |
41 | );
42 | }
43 | }
44 |
45 | MarketingFeature.propTypes = {
46 | imgSrc: PropTypes.string.isRequired,
47 | title: PropTypes.string.isRequired,
48 | description: PropTypes.string.isRequired
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/RenderCardsDynamically/RenderCardsDynamically.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import _ from 'lodash';
3 | import { cardMapper } from '../../utils/ImportCards';
4 |
5 | export function renderCards(cards) {
6 | // While rendering config.*isEnabled settings are not being checked
7 | return _.map(cards, function(cardName, i) {
8 | return React.createElement(cardMapper[cardName], { key: i });
9 | });
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/TimeSeriesChart/TimeSeriesChart.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import C3Wrapper from '../C3Wrapper/C3Wrapper';
4 |
5 | export default class TimeSeriesChart extends Component {
6 | /**
7 | * let xAxisValues = [{
8 | * 'label': 'x',
9 | * 'values': [1,2,3,4,5]
10 | * },
11 | * {
12 | * 'label': 'cached',
13 | * 'values: [1,2,3,4,5]
14 | * }];
15 | */
16 | render() {
17 | let { xAxisValues, yAxisLabel } = this.props;
18 |
19 | let columns = [];
20 |
21 | //First row of columms is the x axis key
22 | //The first element in the remaining rows column has to be the label
23 | for (let i = 0; i < xAxisValues.length; i++) {
24 | let label = xAxisValues[i].label;
25 | let values = xAxisValues[i].values;
26 |
27 | if (label && values) {
28 | columns.push([label].concat(values));
29 | }
30 | }
31 |
32 | //for some reason this only renders correctly if we put the xformat in data AND axis
33 | let xformat = '%m/%d';
34 |
35 | let config = {
36 | data: {
37 | x: 'x',
38 | xFormat: xformat,
39 | columns: columns
40 | },
41 | axis: {
42 | x: {
43 | type: 'timeseries',
44 | tick: {
45 | format: xformat
46 | }
47 | },
48 | y: {
49 | label: yAxisLabel
50 | }
51 | }
52 | };
53 |
54 | return (
55 |
56 |
57 |
58 | );
59 | }
60 | }
61 |
62 | TimeSeriesChart.propTypes = {
63 | xAxisValues: PropTypes.array,
64 | yAxisLabel: PropTypes.string
65 | };
66 |
--------------------------------------------------------------------------------
/src/constants/Plans.js:
--------------------------------------------------------------------------------
1 | const LOCALIZED_PRO_PLAN_ID = 'constants.plans.pro';
2 | const LOCALIZED_BIZ_PLAN_ID = 'constants.plans.biz';
3 | const LOCALIZED_ENT_PLAN_ID = 'constants.plans.ent';
4 |
5 | export const FREE_PLAN = 'free';
6 | export const PRO_PLAN = 'pro';
7 | export const BIZ_PLAN = 'business';
8 | export const ENT_PLAN = 'enterprise';
9 |
10 | export function planNeedsUpgrade(currentPlan, minimumPlan) {
11 | var planList = {};
12 | planList[FREE_PLAN] = 0;
13 | planList[PRO_PLAN] = 1;
14 | planList[BIZ_PLAN] = 2;
15 | planList[ENT_PLAN] = 3;
16 |
17 | return planList[currentPlan] < planList[minimumPlan];
18 | }
19 |
20 | export function getPlanUpdateParam(minimumPlan) {
21 | switch (minimumPlan) {
22 | case FREE_PLAN:
23 | return 'f';
24 | case PRO_PLAN:
25 | return 'p';
26 | case BIZ_PLAN:
27 | return 'b';
28 | // Note that we dont support ENT plan
29 | default:
30 | // By default return a pro plan
31 | return 'p';
32 | }
33 | }
34 |
35 | export function getLocalizedPlanId(planName) {
36 | var localizedPlanName = planName;
37 | switch (planName) {
38 | case PRO_PLAN:
39 | localizedPlanName = LOCALIZED_PRO_PLAN_ID;
40 | break;
41 | case BIZ_PLAN:
42 | localizedPlanName = LOCALIZED_BIZ_PLAN_ID;
43 | break;
44 | case ENT_PLAN:
45 | localizedPlanName = LOCALIZED_ENT_PLAN_ID;
46 | break;
47 | default:
48 | // This should never happen
49 | break;
50 | }
51 |
52 | return localizedPlanName;
53 | }
54 |
--------------------------------------------------------------------------------
/src/constants/Schemas.js:
--------------------------------------------------------------------------------
1 | import { normalize, Schema, arrayOf } from 'normalizr';
2 |
3 | const zoneSchema = new Schema('zones', { idAttribute: 'name' });
4 | const zoneEntitlementsSchema = new Schema('entitlements', {
5 | idAttribute: 'id'
6 | });
7 |
8 | export function normalizeZoneByIdGetAll(zoneId, result) {
9 | var zoneSchemaById = new Schema(zoneId, { idAttribute: 'id' });
10 | return normalize(result, arrayOf(zoneSchemaById));
11 | }
12 |
13 | export function normalizeZoneGetAll(result) {
14 | return normalize(result, arrayOf(zoneSchema));
15 | }
16 |
17 | export function normalizeZoneEntitlements(result) {
18 | return normalize(result, arrayOf(zoneEntitlementsSchema));
19 | }
20 |
--------------------------------------------------------------------------------
/src/constants/UrlPaths.js:
--------------------------------------------------------------------------------
1 | export const ANALYTICS_PAGE = '/analytics';
2 | export const CLOUDFLARE_API_KB_ARTICLE_PAGE =
3 | 'https://support.cloudflare.com/hc/en-us/articles/200167836-Where-do-I-find-my-CloudFlare-API-key-';
4 | export const CLOUDFLARE_FORGOT_PASSWORD_PAGE =
5 | 'https://dash.cloudflare.com/forgot-password';
6 | export const CLOUDFLARE_SIGNUP_PAGE = 'https://dash.cloudflare.com/sign-up';
7 | export const CLOUDFLARE_DASHBOARD_PAGE = 'https://dash.cloudflare.com/overview';
8 | export const DOMAINS_OVERVIEW_PAGE = '/zones';
9 | export const HOME_PAGE = '/home';
10 | export const MORE_SETTINGS_PAGE = '/more-settings';
11 | export const LOGIN_PAGE = '/login';
12 | export const SIGN_UP_PAGE = '/sign-up';
13 | export const SUPPORT_PAGE = 'https://support.cloudflare.com/hc/en-us/';
14 | export const TERMS_AND_CONDITIONS_PAGE = 'https://www.cloudflare.com/terms';
15 | export const PRIVACY_POLICY_PAGE = 'https://www.cloudflare.com/security-policy';
16 | export const CLOUDFLARE_ACCOUNT_PAGE = 'https://dash.cloudflare.com/profile';
17 | export const CLOUDFLARE_ADD_SITE_PAGE =
18 | 'https://dash.cloudflare.com/?to=/:account/add-site';
19 |
--------------------------------------------------------------------------------
/src/containers/ActivationCheckCard/ActivationCheckCard.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { FormattedMessage, injectIntl } from 'react-intl';
4 |
5 | import { asyncZoneActivationCheck } from '../../actions/zoneProvision';
6 | import { Card, CardSection, CardContent, CardControl } from 'cf-component-card';
7 | import { Button } from 'cf-component-button';
8 | import { List, ListItem } from 'cf-component-list';
9 |
10 | class ActivationCheckCard extends Component {
11 | handleButtonClick() {
12 | let { activeZone, dispatch } = this.props;
13 | dispatch(asyncZoneActivationCheck(activeZone.id));
14 | }
15 |
16 | render() {
17 | const { formatMessage } = this.props.intl;
18 | let { zone } = this.props;
19 |
20 | return (
21 |
22 |
23 |
24 |
29 |
30 |
34 |
35 |
36 |
37 |
38 |
39 | {zone.name_servers.map(nameserver => (
40 | {nameserver}
41 | ))}
42 |
43 |
44 |
45 |
46 |
47 |
48 |
54 |
55 |
56 |
57 |
58 | );
59 | }
60 | }
61 |
62 | function mapStateToProps(state) {
63 | return {
64 | activeZone: state.activeZone,
65 | zone: state.zones.entities.zones[state.activeZone.name]
66 | };
67 | }
68 | export default injectIntl(connect(mapStateToProps)(ActivationCheckCard));
69 |
--------------------------------------------------------------------------------
/src/containers/ActiveZoneSelector/ActiveZoneSelector.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { injectIntl } from 'react-intl';
4 | import _ from 'lodash';
5 |
6 | import Select from 'cf-component-select';
7 | import { notificationAddWarning } from '../../actions/notifications';
8 | import { getConfigValue } from '../../selectors/config';
9 | import { asyncZoneSetActiveZone } from '../../actions/activeZone';
10 | import { isSubdomain } from '../../utils/utils';
11 |
12 | class ActiveZoneSelector extends Component {
13 | constructor(props) {
14 | super(props);
15 | this.state = {
16 | subdomainChecked: false
17 | };
18 | }
19 |
20 | handleChange(event) {
21 | let { dispatch, zoneList } = this.props;
22 |
23 | _.values(zoneList).forEach(zone => {
24 | if (zone.name === event.value) {
25 | dispatch(asyncZoneSetActiveZone(zone));
26 | }
27 | });
28 | }
29 |
30 | componentWillReceiveProps() {
31 | let { activeZoneName, config, dispatch } = this.props;
32 |
33 | // If the current active zone is a subdomain show a notification
34 | // regarding that the changes are made to the original zone.
35 | var shouldUseSubdomain = getConfigValue(config, 'isSubdomainCheckEnabled');
36 | if (
37 | shouldUseSubdomain &&
38 | !this.state.subdomainChecked &&
39 | isSubdomain(activeZoneName)
40 | ) {
41 | this.setState({ subdomainChecked: true });
42 | dispatch(notificationAddWarning('warning.usingSubdomain', true, true));
43 | }
44 | }
45 |
46 | render() {
47 | let { activeZoneName, zoneList } = this.props;
48 | let zones = _.values(zoneList).map(zone => {
49 | return { value: zone.name, label: zone.name };
50 | });
51 |
52 | let isSingleZone = zones.length < 2;
53 |
54 | //vertically center the active zone selector
55 | let activeZoneSelectorStyles = {
56 | position: 'relative',
57 | top: '30px', // Hard code .header-main height/2
58 | transform: 'translateY(-50%)'
59 | };
60 |
61 | return (
62 |
69 | {isSingleZone ? (
70 | activeZoneName
71 | ) : (
72 |
77 | )}
78 |
79 | );
80 | }
81 | }
82 |
83 | function mapStateToProps(state) {
84 | return {
85 | activeZoneName: state.activeZone.name,
86 | zoneList: state.zones.entities.zones,
87 | config: state.config
88 | };
89 | }
90 |
91 | export default injectIntl(connect(mapStateToProps)(ActiveZoneSelector));
92 |
--------------------------------------------------------------------------------
/src/containers/AdvanceDDoSCard/AdvanceDDoSCard.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { FormattedMessage, injectIntl } from 'react-intl';
4 | import { Card, CardSection, CardContent, CardDrawers } from 'cf-component-card';
5 |
6 | import FormattedMarkdown from '../../components/FormattedMarkdown/FormattedMarkdown';
7 | import CustomCardControl from '../../components/CustomCardControl/CustomCardControl';
8 | import { BIZ_PLAN, planNeedsUpgrade } from '../../constants/Plans.js';
9 |
10 | const SETTING_NAME = 'advanceddos';
11 | const MINIMUM_PLAN = BIZ_PLAN;
12 |
13 | class AdvanceDDoSCard extends Component {
14 | constructor(props) {
15 | super(props);
16 | this.state = {
17 | activeDrawer: null
18 | };
19 | this.handleDrawerClick = this.handleDrawerClick.bind(this);
20 | }
21 |
22 | handleDrawerClick(id) {
23 | this.setState({
24 | activeDrawer: id === this.state.activeDrawer ? null : id
25 | });
26 | }
27 |
28 | render() {
29 | let { activeZone, zones } = this.props;
30 | let zone = zones[activeZone.name];
31 | const { formatMessage } = this.props.intl;
32 |
33 | if (!planNeedsUpgrade(zone.plan.legacy_id, MINIMUM_PLAN)) {
34 | return null;
35 | }
36 |
37 | return (
38 |
39 |
40 |
43 |
44 |
45 |
50 |
51 |
52 |
53 |
62 | )
63 | }
64 | ]}
65 | />
66 |
67 | );
68 | }
69 | }
70 |
71 | function mapStateToProps(state) {
72 | return {
73 | activeZone: state.activeZone,
74 | zones: state.zones.entities.zones
75 | };
76 | }
77 | export default injectIntl(connect(mapStateToProps)(AdvanceDDoSCard));
78 |
--------------------------------------------------------------------------------
/src/containers/AlwaysOnlineCard/AlwaysOnlineCard.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { FormattedMessage, injectIntl } from 'react-intl';
4 | import Toggle from 'cf-component-toggle';
5 | import {
6 | Card,
7 | CardSection,
8 | CardContent,
9 | CardControl,
10 | CardDrawers
11 | } from 'cf-component-card';
12 |
13 | import { asyncZoneUpdateSetting } from '../../actions/zoneSettings';
14 | import { getLastModifiedDate } from '../../utils/utils';
15 | import FormattedMarkdown from '../../components/FormattedMarkdown/FormattedMarkdown';
16 | import {
17 | getZoneSettingsValueForZoneId,
18 | getZoneSettingsModifiedDateForZoneId
19 | } from '../../selectors/zoneSettings';
20 |
21 | const SETTING_NAME = 'always_online';
22 |
23 | class AlwaysOnlineCard extends Component {
24 | constructor(props) {
25 | super(props);
26 | this.state = {
27 | activeDrawer: null
28 | };
29 | this.handleDrawerClick = this.handleDrawerClick.bind(this);
30 | }
31 |
32 | handleDrawerClick(id) {
33 | this.setState({
34 | activeDrawer: id === this.state.activeDrawer ? null : id
35 | });
36 | }
37 |
38 | handleChange(value) {
39 | let { activeZoneId, dispatch } = this.props;
40 | value = value === true ? 'on' : 'off';
41 | dispatch(asyncZoneUpdateSetting(SETTING_NAME, activeZoneId, value));
42 | }
43 |
44 | render() {
45 | const { formatMessage } = this.props.intl;
46 | let { modifiedDate } = this.props;
47 |
48 | return (
49 |
50 |
51 |
52 |
56 |
57 |
58 |
59 |
60 |
61 |
66 |
67 |
68 |
77 | )
78 | }
79 | ]}
80 | />
81 |
82 |
83 | );
84 | }
85 | }
86 |
87 | function mapStateToProps(state) {
88 | return {
89 | activeZoneId: state.activeZone.id,
90 | alwaysOnlineValue: getZoneSettingsValueForZoneId(
91 | state.activeZone.id,
92 | SETTING_NAME,
93 | state
94 | ),
95 | modifiedDate: getZoneSettingsModifiedDateForZoneId(
96 | state.activeZone.id,
97 | SETTING_NAME,
98 | state
99 | )
100 | };
101 | }
102 | export default injectIntl(connect(mapStateToProps)(AlwaysOnlineCard));
103 |
--------------------------------------------------------------------------------
/src/containers/AnalyticsPage/AnaltyicsPage.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { FormattedMessage, injectIntl } from 'react-intl';
4 | import { Card, CardSection, CardContent, CardControl } from 'cf-component-card';
5 | import { Button } from 'cf-component-button';
6 | import { Heading } from 'cf-component-heading';
7 |
8 | class AnaltyicsPage extends Component {
9 | render() {
10 | let { activeZone } = this.props;
11 | const accountId = activeZone.account.id;
12 | const analyticsDeepLink = `https://dash.cloudflare.com/${accountId}/${activeZone.name}/analytics`;
13 |
14 | return (
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
25 | }
26 | >
27 |
28 |
29 |
30 |
31 |
32 |
44 |
45 |
46 |
47 |
48 | );
49 | }
50 | }
51 |
52 | function mapStateToProps(state) {
53 | return {
54 | activeZone: state.activeZone
55 | };
56 | }
57 |
58 | export default injectIntl(connect(mapStateToProps)(AnaltyicsPage));
59 |
--------------------------------------------------------------------------------
/src/containers/App/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { FormattedMessage, injectIntl, IntlProvider } from 'react-intl';
4 | import { GatewayDest, GatewayProvider } from 'react-gateway';
5 |
6 | import { LayoutContainer, LayoutRow, LayoutColumn } from 'cf-component-layout';
7 |
8 | import AppNavigation from '../../containers/AppNavigation/AppNavigation';
9 | import { isLoggedIn } from '../../utils/Auth/Auth';
10 | import { asyncConfigInit } from '../../actions/config';
11 | import GlobalNotifications from '../../containers/GlobalNotifications/GlobalNotifications';
12 | import Header from '../../containers/Header/Header';
13 | import GradientBanner from '../../components/GradientBanner/GradientBanner';
14 |
15 | import { StyleProvider } from 'cf-style-provider';
16 |
17 | //Safari Intl Polyfill
18 | if (!global.Intl) {
19 | require('intl');
20 | }
21 | class AppContainer extends Component {
22 | render() {
23 | return (
24 |
28 |
29 |
30 |
31 |
32 | {isLoggedIn() ? null : }
33 |
34 |
38 | {isLoggedIn() ? (
39 |
40 |
41 |
42 |
43 |
44 | ) : null}
45 |
46 | {isLoggedIn() ? (
47 |
48 |
49 |
50 | {this.props.children}
51 |
52 |
53 |
54 | ) : (
55 |
{this.props.children}
56 | )}
57 |
58 |
59 |
60 |
66 |
67 |
68 |
69 |
71 |
72 |
73 |
75 | );
76 | }
77 | }
78 |
79 | function mapStateToProps(state) {
80 | return { state: state };
81 | }
82 |
83 | //
must be instantiated before injectIntl() is used so we wrap AppContainer in AppWrapper
84 | const App = injectIntl(connect(mapStateToProps)(AppContainer));
85 |
86 | class AppWrapper extends React.Component {
87 | componentWillMount() {
88 | let { dispatch } = this.props;
89 | dispatch(asyncConfigInit());
90 | }
91 |
92 | render() {
93 | if (this.props.state.app.isInitialized) {
94 | return (
95 |
99 |
100 | {this.props.children}
101 |
102 |
103 | );
104 | }
105 |
106 | return ;
107 | }
108 | }
109 |
110 | export default connect(mapStateToProps)(AppWrapper);
111 |
--------------------------------------------------------------------------------
/src/containers/ApplyDefaultSettingsCard/ApplyDefaultSettingsCard.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { FormattedMessage, injectIntl } from 'react-intl';
4 | import {
5 | Card,
6 | CardSection,
7 | CardContent,
8 | CardControl,
9 | CardDrawers
10 | } from 'cf-component-card';
11 | import { Button } from 'cf-component-button';
12 | import Loading from 'cf-component-loading';
13 |
14 | import {
15 | getPluginSettingsIsFetching,
16 | getPluginSettingsModifiedDateForZoneId
17 | } from '../../selectors/pluginSettings';
18 | import { asyncPluginUpdateSetting } from '../../actions/pluginSettings';
19 | import { getConfigValue } from '../../selectors/config.js';
20 | import FormattedMarkdown from '../../components/FormattedMarkdown/FormattedMarkdown';
21 | import {
22 | getLastModifiedDate,
23 | formatMessageForIntegration
24 | } from '../../utils/utils';
25 |
26 | const SETTING_NAME = 'default_settings';
27 | const VALUE = true;
28 |
29 | class ApplyDefaultSettingsCard extends Component {
30 | constructor(props) {
31 | super(props);
32 | this.state = {
33 | activeDrawer: null
34 | };
35 | this.handleDrawerClick = this.handleDrawerClick.bind(this);
36 | }
37 |
38 | handleDrawerClick(id) {
39 | this.setState({
40 | activeDrawer: id === this.state.activeDrawer ? null : id
41 | });
42 | }
43 |
44 | onButtonClick() {
45 | let { activeZoneId, dispatch } = this.props;
46 | dispatch(asyncPluginUpdateSetting(SETTING_NAME, activeZoneId, VALUE));
47 | }
48 |
49 | render() {
50 | const { formatMessage } = this.props.intl;
51 | let { modifiedDate, integrationName } = this.props;
52 |
53 | return (
54 |
55 |
56 |
57 |
65 |
66 |
67 |
68 |
69 |
70 | {this.props.isFetching === SETTING_NAME ? (
71 |
72 | ) : (
73 |
76 | )}
77 |
78 |
79 |
88 | )
89 | }
90 | ]}
91 | />
92 |
93 |
50 |
51 |
52 |
58 |
59 |
60 |
61 |
62 |
63 |
68 |
69 |
70 |
79 | )
80 | }
81 | ]}
82 | />
83 |
84 |
50 |
51 |
52 |
58 |
59 |
60 |
61 |
62 |
63 |
68 |
69 |
70 |
79 | )
80 | }
81 | ]}
82 | />
83 |
84 |
49 |
50 |
51 |
55 |
56 |
57 |
58 |
59 |
60 |
87 |
88 |
89 |
98 | )
99 | }
100 | ]}
101 | />
102 |
103 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | {_.sortBy(_.values(this.props.dnsRecords), function(dnsRecord) {
63 | return dnsRecord.name;
64 | }).map(dnsRecord => (
65 |
66 | {dnsRecord.type}
67 | {dnsRecord.name}
68 | {dnsRecord.content}
69 | {dnsRecord.ttl}
70 |
71 | {this.props.updateIsFetching === dnsRecord.name ? (
72 |
73 | ) : (
74 | this.handleToggle(e, dnsRecord)}
79 | />
80 | )}
81 |
82 |
83 | ))}
84 |
85 |
86 |
50 |
51 |
52 |
58 |
59 |
60 |
61 |
62 |
63 |
68 |
69 |
70 |
79 | )
80 | }
81 | ]}
82 | />
83 |
84 |
50 |
51 |
52 |
56 |
57 |
58 |
59 |
60 |
61 |
66 |
67 |
68 |
77 | )
78 | }
79 | ]}
80 | />
81 |
82 |
29 |
30 |
31 |
35 |
36 |
37 |
38 |
39 |
40 |
45 |
46 |
47 |
48 |
19 |
20 |
21 |
22 |
31 |
32 |
33 |
42 |
43 |
44 |
53 |
54 |
55 |
64 |
65 |
66 |
67 |
68 |
69 | );
70 | }
71 | }
72 |
73 | function mapStateToProps(state) {
74 | return { config: state.config };
75 | }
76 |
77 | export default injectIntl(connect(mapStateToProps)(MarketingFeatureCollection));
78 |
--------------------------------------------------------------------------------
/src/containers/MoreSettingsPage/MoreSettingsPage.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { FormattedMessage, injectIntl } from 'react-intl';
4 | import _ from 'lodash';
5 |
6 | import { Heading } from 'cf-component-heading';
7 |
8 | import { renderCards } from '../../components/RenderCardsDynamically/RenderCardsDynamically';
9 | import WaitForSettings from '../../containers/WaitForSettings/WaitForSettings';
10 |
11 | class MoreSettingsPage extends Component {
12 | renderContent() {
13 | let { config } = this.props;
14 | var count = 0;
15 |
16 | return _.map(config.moreSettingsCards, function(value, key) {
17 | var categoryTitle = key;
18 | return (
19 |
20 |
21 |
22 |
23 | {renderCards(value)}
24 |
25 | );
26 | });
27 | }
28 |
29 | render() {
30 | return (
31 |
32 | {this.renderContent()}
33 |
34 | );
35 | }
36 | }
37 |
38 | function mapStateToProps(state) {
39 | return {
40 | config: state.config.config
41 | };
42 | }
43 | export default injectIntl(connect(mapStateToProps)(MoreSettingsPage));
44 |
--------------------------------------------------------------------------------
/src/containers/PluginSpecificCacheTagCard/PluginSpecificCachetTagCard.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import { FormattedMessage, injectIntl } from 'react-intl';
4 | import { Card, CardSection, CardContent, CardDrawers } from 'cf-component-card';
5 | import Toggle from 'cf-component-toggle';
6 |
7 | import { asyncPluginUpdateSetting } from '../../actions/pluginSettings';
8 | import CustomCardControl from '../../components/CustomCardControl/CustomCardControl';
9 | import { ENT_PLAN } from '../../constants/Plans.js';
10 | import { getZonePlanLegacyId } from '../../selectors/zones';
11 | import FormattedMarkdown from '../../components/FormattedMarkdown/FormattedMarkdown';
12 | import {
13 | getPluginSettingsValueForZoneId,
14 | getPluginSettingsModifiedDateForZoneId
15 | } from '../../selectors/pluginSettings';
16 | import { getLastModifiedDate } from '../../utils/utils';
17 |
18 | const SETTING_NAME = 'plugin_specific_cache_tag';
19 |
20 | class PluginSpecificCacheTagCard extends Component {
21 | constructor(props) {
22 | super(props);
23 | this.state = {
24 | activeDrawer: null
25 | };
26 | this.handleDrawerClick = this.handleDrawerClick.bind(this);
27 | }
28 |
29 | handleDrawerClick(id) {
30 | this.setState({
31 | activeDrawer: id === this.state.activeDrawer ? null : id
32 | });
33 | }
34 |
35 | handleChange(value) {
36 | let { activeZoneId, dispatch } = this.props;
37 | value = value === true ? 'on' : 'off';
38 | dispatch(asyncPluginUpdateSetting(SETTING_NAME, activeZoneId, value));
39 | }
40 |
41 | render() {
42 | const { formatMessage } = this.props.intl;
43 | let { modifiedDate } = this.props;
44 |
45 | return (
46 |
47 |
48 |
49 |
55 |
56 |
60 |
61 |
62 |
67 |
72 |
73 |
74 |
83 | )
84 | }
85 | ]}
86 | />
87 |
88 |
51 |
52 |
53 |
57 |
58 |
59 |
60 |
61 |
62 |
91 |
92 |
93 |
102 | )
103 | }
104 | ]}
105 | />
106 |
107 |
49 |
50 |
51 |
52 |
53 |
61 |
48 |
49 |
50 |
54 |
55 |
56 |
61 |
66 |
67 |
68 |
76 | }
77 | ]}
78 | />
79 |
80 |
81 | );
82 | }
83 | }
84 |
85 | function mapStateToProps(state) {
86 | return {
87 | activeZoneId: state.activeZone.id,
88 | WAFValue: getZoneSettingsValueForZoneId(
89 | state.activeZone.id,
90 | SETTING_NAME,
91 | state
92 | ),
93 | modifiedDate: getZoneSettingsModifiedDateForZoneId(
94 | state.activeZone.id,
95 | SETTING_NAME,
96 | state
97 | ),
98 | activeZone: state.activeZone,
99 | zones: state.zones.entities.zones
100 | };
101 | }
102 | export default injectIntl(connect(mapStateToProps)(WAFCard));
103 |
--------------------------------------------------------------------------------
/src/containers/WaitForSettings/WaitForSettings.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { isActiveZoneOnCloudflare } from '../../selectors/activeZone';
5 | import Loading from 'cf-component-loading';
6 | import Text from 'cf-component-text';
7 | import { getPluginSettingsForZoneId } from '../../selectors/pluginSettings';
8 | import { FormattedMessage, injectIntl } from 'react-intl';
9 | import { getAllZoneSettingsForZoneId } from '../../selectors/zoneSettings';
10 | import { isDNSPageEnabled } from '../../selectors/config';
11 | import { push } from 'react-router-redux';
12 | import { Link } from 'react-router';
13 | import {
14 | CLOUDFLARE_ADD_SITE_PAGE,
15 | DOMAINS_OVERVIEW_PAGE
16 | } from '../../constants/UrlPaths.js';
17 |
18 | class WaitForSettings extends Component {
19 | handleClick(path) {
20 | let { dispatch } = this.props;
21 | dispatch(push(path));
22 | }
23 |
24 | render() {
25 | let {
26 | activeZone,
27 | zoneSettings,
28 | zonePluginSettings,
29 | settings,
30 | pluginSettings,
31 | config
32 | } = this.props;
33 |
34 | let isSettingsLoaded = true;
35 | let isPluginSettingsLoaded = true;
36 |
37 | if (settings) {
38 | isSettingsLoaded = getAllZoneSettingsForZoneId(
39 | activeZone.id,
40 | zoneSettings
41 | );
42 | }
43 |
44 | if (pluginSettings) {
45 | isPluginSettingsLoaded = getPluginSettingsForZoneId(
46 | activeZone.id,
47 | zonePluginSettings
48 | );
49 | }
50 |
51 | let isZoneOnCloudflare = isActiveZoneOnCloudflare(activeZone);
52 |
53 | let isEverythingLoaded = isSettingsLoaded && isPluginSettingsLoaded;
54 |
55 | var link = (
56 |
57 | Cloudflare
58 |
59 | );
60 | if (isDNSPageEnabled(config)) {
61 | link = (
62 | this.handleClick(DOMAINS_OVERVIEW_PAGE)}>
63 |
64 |
65 | );
66 | }
67 |
68 | return (
69 |
70 | {!isEverythingLoaded && isZoneOnCloudflare && (
71 |
72 |
73 |
74 | )}
75 | {!isEverythingLoaded && !isZoneOnCloudflare && (
76 |
77 |
81 |
82 | )}
83 | {isEverythingLoaded && isZoneOnCloudflare && this.props.children}
84 |
85 | );
86 | }
87 | }
88 |
89 | WaitForSettings.propTypes = {
90 | settings: PropTypes.bool,
91 | pluginSettings: PropTypes.bool,
92 | analytics: PropTypes.bool,
93 | dispatch: PropTypes.func,
94 | activeZone: PropTypes.object,
95 | zoneSettings: PropTypes.object,
96 | zonePluginSettings: PropTypes.object,
97 | config: PropTypes.object,
98 | intl: PropTypes.object,
99 | children: PropTypes.node
100 | };
101 |
102 | function mapStateToProps(state) {
103 | return {
104 | activeZone: state.activeZone,
105 | zoneSettings: state.zoneSettings,
106 | zonePluginSettings: state.pluginSettings,
107 | config: state.config
108 | };
109 | }
110 | export default injectIntl(connect(mapStateToProps)(WaitForSettings));
111 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { Provider } from 'react-redux';
4 | import { Router } from 'react-router';
5 | import configureStore from './store/configureStore';
6 | import routes from './routes';
7 | import createHistory from 'history/lib/createHashHistory';
8 | import http from 'cf-util-http';
9 | import { syncHistoryWithStore } from 'react-router-redux';
10 |
11 | const store = configureStore(createHistory());
12 | const history = syncHistoryWithStore(createHistory(), store);
13 |
14 | /*
15 | * Register our RestProxyCallback to send all cf-util-http calls to
16 | * our backend instead of their actual endpoint.
17 | */
18 | http.beforeSend(window.RestProxyCallback);
19 |
20 | ReactDOM.render(
21 |
22 | {routes}
23 | ,
24 | document.getElementById('root')
25 | );
26 |
--------------------------------------------------------------------------------
/src/reducers/activeZone.js:
--------------------------------------------------------------------------------
1 | import * as ActionTypes from '../constants/ActionTypes';
2 |
3 | const initialState = {
4 | id: '',
5 | name: ''
6 | };
7 |
8 | export function activeZoneReducer(state = initialState, action) {
9 | switch (action.type) {
10 | case ActionTypes.ZONES_SET_ACTIVE_ZONE:
11 | return Object.assign({}, state, {
12 | id: action.zone.id,
13 | name: action.zone.name,
14 | account: action.zone.account
15 | });
16 | default:
17 | return state;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/reducers/app.js:
--------------------------------------------------------------------------------
1 | import * as ActionTypes from '../constants/ActionTypes';
2 |
3 | const initialState = {
4 | isInitialized: false
5 | };
6 |
7 | export function appReducer(state = initialState, action) {
8 | switch (action.type) {
9 | case ActionTypes.APPLICATION_INIT:
10 | return Object.assign({}, state, {
11 | isInitialized: true
12 | });
13 | default:
14 | return state;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/reducers/config.js:
--------------------------------------------------------------------------------
1 | import * as ActionTypes from '../constants/ActionTypes';
2 |
3 | const initialState = {
4 | config: {},
5 | isFetching: false
6 | };
7 |
8 | export const ABSOLUTE_URL_BASE_KEY = 'absoluteUrlBase';
9 |
10 | export function configReducer(state = initialState, action) {
11 | switch (action.type) {
12 | case ActionTypes.CONFIG_FETCH:
13 | return Object.assign({}, state, {
14 | isFetching: true
15 | });
16 | case ActionTypes.CONFIG_FETCH_SUCCESS:
17 | return Object.assign({}, state, {
18 | isFetching: false
19 | });
20 | case ActionTypes.CONFIG_FETCH_ERROR:
21 | return Object.assign({}, state, {
22 | isFetching: false
23 | });
24 | case ActionTypes.CONFIG_UPDATE_BY_KEY:
25 | return Object.assign({}, state, {
26 | config: Object.assign({}, state.config, {
27 | [action.key]: action.value
28 | })
29 | });
30 | default:
31 | return state;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import { routerReducer } from 'react-router-redux';
3 | import { activeZoneReducer } from './activeZone';
4 | import { appReducer } from './app';
5 | import { configReducer } from './config';
6 | import { dnsRecordsReducer } from './zoneDnsRecords.js';
7 | import { intlReducer } from './intl';
8 | import { notificationsReducer } from './notifications';
9 | import { userReducer } from './user';
10 | import { zonePurgeCacheReducer } from './zonePurgeCache';
11 | import { zoneEntitlementsReducer } from './zoneEntitlements';
12 | import { zoneSettingsReducer } from './zoneSettings';
13 | import { zonesReducer } from './zones';
14 | import { pluginSettingsReducer } from './pluginSettings';
15 |
16 | const rootReducer = combineReducers({
17 | activeZone: activeZoneReducer,
18 | app: appReducer,
19 | config: configReducer,
20 | intl: intlReducer,
21 | user: userReducer,
22 | notifications: notificationsReducer,
23 | routing: routerReducer,
24 | zones: zonesReducer,
25 | zoneDnsRecords: dnsRecordsReducer,
26 | zonePurgeCache: zonePurgeCacheReducer,
27 | zoneSettings: zoneSettingsReducer,
28 | pluginSettings: pluginSettingsReducer,
29 | zoneEntitlements: zoneEntitlementsReducer
30 | });
31 |
32 | export default rootReducer;
33 |
--------------------------------------------------------------------------------
/src/reducers/intl.js:
--------------------------------------------------------------------------------
1 | import * as ActionTypes from '../constants/ActionTypes';
2 |
3 | const initialState = {
4 | locale: '',
5 | translations: {},
6 | isFetching: false
7 | };
8 |
9 | export function intlReducer(state = initialState, action) {
10 | switch (action.type) {
11 | case ActionTypes.INTL_FETCH_TRANSLATIONS:
12 | return Object.assign({}, state, {
13 | isFetching: true
14 | });
15 | case ActionTypes.INTL_FETCH_TRANSLATIONS_SUCCESS:
16 | return Object.assign({}, state, {
17 | locale: action.locale,
18 | translations: action.translations,
19 | isFetching: false
20 | });
21 | case ActionTypes.INTL_FETCH_TRANSLATIONS_ERROR:
22 | return Object.assign({}, state, {
23 | isFetching: false
24 | });
25 | default:
26 | return state;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/reducers/notifications.js:
--------------------------------------------------------------------------------
1 | import * as ActionTypes from '../constants/ActionTypes';
2 |
3 | const initialState = [];
4 |
5 | export function notificationsReducer(state = initialState, action) {
6 | switch (action.type) {
7 | case ActionTypes.NOTIFICATION_ADD:
8 | return [
9 | {
10 | key: Date.now(),
11 | level: action.level,
12 | message: action.message,
13 | localized: action.localized,
14 | persistant: action.persistant,
15 | delay: action.delay
16 | },
17 | ...state
18 | ];
19 | case ActionTypes.NOTIFICATION_REMOVE:
20 | return state.filter(notification => notification.key !== action.key);
21 | default:
22 | return state;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/reducers/pluginSettings.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 | import * as ActionTypes from '../constants/ActionTypes';
3 | import { normalizeZoneByIdGetAll } from '../constants/Schemas';
4 |
5 | const initialState = {
6 | entities: {},
7 | result: [],
8 | isFetching: ''
9 | };
10 |
11 | export function pluginSettingsReducer(state = initialState, action) {
12 | switch (action.type) {
13 | case ActionTypes.PLUGIN_SETTINGS_FETCH:
14 | return Object.assign({}, state, {
15 | isFetching: 'FETCH ALL PLUGIN SETTINGS'
16 | });
17 | case ActionTypes.PLUGIN_SETTINGS_FETCH_SUCCESS:
18 | let normalizedPluginSettings = normalizeZoneByIdGetAll(
19 | action.zoneId,
20 | action.setting
21 | );
22 |
23 | return Object.assign({}, state, {
24 | entities: _.merge(state.entities, normalizedPluginSettings.entities),
25 | result: _.merge(state.result, normalizedPluginSettings.result),
26 | isFetching: ''
27 | });
28 | case ActionTypes.PLUGIN_SETTINGS_FETCH_ERROR:
29 | return Object.assign({}, state, {
30 | isFetching: ''
31 | });
32 | case ActionTypes.PLUGIN_SETTING_UPDATE:
33 | return Object.assign({}, state, {
34 | entities: pluginPatchSetting(action.zoneId, action.setting, state),
35 | isFetching: action.setting.id
36 | });
37 | case ActionTypes.PLUGIN_SETTING_UPDATE_SUCCESS:
38 | return Object.assign({}, state, {
39 | entities: pluginPatchSetting(action.zoneId, action.setting, state),
40 | isFetching: ''
41 | });
42 | case ActionTypes.PLUGIN_SETTING_UPDATE_ERROR:
43 | return Object.assign({}, state, {
44 | entities: pluginPatchSetting(action.zoneId, action.setting, state),
45 | isFetching: ''
46 | });
47 | default:
48 | return state;
49 | }
50 | }
51 |
52 | function pluginPatchSetting(zoneId, setting, state) {
53 | let patchedEntities = Object.assign({}, state.entities);
54 | patchedEntities[zoneId][setting.id] = setting;
55 | return patchedEntities;
56 | }
57 |
--------------------------------------------------------------------------------
/src/reducers/user.js:
--------------------------------------------------------------------------------
1 | import * as ActionTypes from '../constants/ActionTypes';
2 | import { setEmail } from '../utils/Auth/Auth';
3 |
4 | const initialState = {
5 | isLoggedIn: false,
6 | isFetching: false
7 | };
8 |
9 | export function userReducer(state = initialState, action) {
10 | switch (action.type) {
11 | case ActionTypes.USER_LOGIN:
12 | return Object.assign({}, state, {
13 | isFetching: true
14 | });
15 | case ActionTypes.USER_LOGIN_SUCCESS:
16 | //routes.js needs cfEmail in localStorage to detect logged in state
17 | setEmail(action.email);
18 | return Object.assign({}, state, {
19 | isLoggedIn: true,
20 | isFetching: false
21 | });
22 | case ActionTypes.USER_LOGIN_ERROR:
23 | return Object.assign({}, state, {
24 | isFetching: false
25 | });
26 | case ActionTypes.USER_SIGNUP:
27 | return Object.assign({}, state, {
28 | isFetching: true
29 | });
30 | case ActionTypes.USER_SIGNUP_SUCCESS:
31 | return Object.assign({}, state, {
32 | isFetching: false
33 | });
34 | case ActionTypes.USER_SIGNUP_ERROR:
35 | return Object.assign({}, state, {
36 | isFetching: false
37 | });
38 | case ActionTypes.USER_LOGOUT:
39 | setEmail('');
40 | return Object.assign({}, state, {
41 | isLoggedIn: false
42 | });
43 | default:
44 | return state;
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/reducers/zoneDnsRecords.js:
--------------------------------------------------------------------------------
1 | import { normalize, Schema, arrayOf } from 'normalizr';
2 | import _ from 'lodash';
3 | import * as ActionTypes from '../constants/ActionTypes';
4 |
5 | const initialState = {
6 | entities: {},
7 | result: [],
8 | isFetching: false,
9 | updateIsFetching: ''
10 | };
11 |
12 | export function dnsRecordsReducer(state = initialState, action) {
13 | switch (action.type) {
14 | case ActionTypes.DNS_RECORD_CLEAR_ALL:
15 | let dnsRecordEntities = state.entities;
16 | dnsRecordEntities[action.zoneId] = {};
17 |
18 | return Object.assign({}, state, {
19 | entities: dnsRecordEntities
20 | });
21 | case ActionTypes.DNS_RECORD_CREATE:
22 | return Object.assign({}, state, {
23 | updateIsFetching: action.name
24 | });
25 | case ActionTypes.DNS_RECORD_CREATE_SUCCESS:
26 | return Object.assign({}, state, {
27 | entities: patchDnsRecord(
28 | action.zoneId,
29 | state.entities,
30 | action.dnsRecord
31 | ),
32 | updateIsFetching: ''
33 | });
34 | case ActionTypes.DNS_RECORD_CREATE_ERROR:
35 | return Object.assign({}, state, {
36 | updateIsFetching: ''
37 | });
38 | case ActionTypes.DNS_RECORD_FETCH_LIST:
39 | return Object.assign({}, state, {
40 | isFetching: true
41 | });
42 | case ActionTypes.DNS_RECORD_FETCH_LIST_SUCCESS:
43 | let dnsRecordSchema = new Schema(action.zoneId, { idAttribute: 'name' });
44 | let normalizedDnsRecords = normalize(
45 | action.dnsRecords,
46 | arrayOf(dnsRecordSchema)
47 | );
48 |
49 | return Object.assign({}, state, {
50 | entities: _.merge(state.entities, normalizedDnsRecords.entities),
51 | result: _.merge(state.result, normalizedDnsRecords.result),
52 | isFetching: false
53 | });
54 | case ActionTypes.DNS_RECORD_FETCH_LIST_ERROR:
55 | return Object.assign({}, state, {
56 | isFetching: false
57 | });
58 | case ActionTypes.DNS_RECORD_UPDATE:
59 | return Object.assign({}, state, {
60 | updateIsFetching: action.name
61 | });
62 | case ActionTypes.DNS_RECORD_UPDATE_SUCCESS:
63 | return Object.assign({}, state, {
64 | entities: patchDnsRecord(
65 | action.zoneId,
66 | state.entities,
67 | action.dnsRecord
68 | ),
69 | updateIsFetching: ''
70 | });
71 | case ActionTypes.DNS_RECORD_UPDATE_ERROR:
72 | return Object.assign({}, state, {
73 | updateIsFetching: ''
74 | });
75 | default:
76 | return state;
77 | }
78 | }
79 |
80 | function patchDnsRecord(zoneId, dnsRecordList, dnsRecord) {
81 | dnsRecordList[zoneId][dnsRecord.name] = dnsRecord;
82 | return dnsRecordList;
83 | }
84 |
--------------------------------------------------------------------------------
/src/reducers/zoneEntitlements.js:
--------------------------------------------------------------------------------
1 | import * as ActionTypes from '../constants/ActionTypes';
2 | import { normalizeZoneEntitlements } from '../constants/Schemas';
3 |
4 | const initialState = {
5 | entities: {},
6 | isFetching: false
7 | };
8 |
9 | export function zoneEntitlementsReducer(state = initialState, action) {
10 | switch (action.type) {
11 | case ActionTypes.ZONE_ENTITLEMENTS:
12 | return Object.assign({}, state, {
13 | isFetching: true
14 | });
15 | case ActionTypes.ZONE_ENTITLEMENTS_SUCCESS:
16 | let normalizedZoneEntitlements = normalizeZoneEntitlements(
17 | action.zoneEntitlements
18 | );
19 | let newEntities = Object.assign({}, state.entities);
20 | newEntities[action.zoneId] =
21 | normalizedZoneEntitlements.entities.entitlements;
22 | return Object.assign({}, state, {
23 | entities: newEntities,
24 | isFetching: false
25 | });
26 | case ActionTypes.ZONE_ENTITLEMENTS_ERROR:
27 | return Object.assign({}, state, {
28 | isFetching: false
29 | });
30 | default:
31 | return state;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/reducers/zonePurgeCache.js:
--------------------------------------------------------------------------------
1 | import * as ActionTypes from '../constants/ActionTypes';
2 |
3 | const initialState = {
4 | isFetching: false
5 | };
6 |
7 | export function zonePurgeCacheReducer(state = initialState, action) {
8 | switch (action.type) {
9 | case ActionTypes.ZONE_PURGE_CACHE:
10 | return Object.assign({}, state, {
11 | isFetching: true
12 | });
13 | case ActionTypes.ZONE_PURGE_CACHE_SUCCESS:
14 | return Object.assign({}, state, {
15 | isFetching: false
16 | });
17 | case ActionTypes.ZONE_PURGE_CACHE_ERROR:
18 | return Object.assign({}, state, {
19 | isFetching: false
20 | });
21 | default:
22 | return state;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/reducers/zoneSettings.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 | import * as ActionTypes from '../constants/ActionTypes';
3 | import { normalizeZoneByIdGetAll } from '../constants/Schemas';
4 |
5 | const initialState = {
6 | entities: {},
7 | result: [],
8 | isFetching: ''
9 | };
10 |
11 | export function zoneSettingsReducer(state = initialState, action) {
12 | switch (action.type) {
13 | case ActionTypes.ZONE_FETCH_SETTINGS:
14 | return Object.assign({}, state, {
15 | isFetching: 'fetchAllSettings'
16 | });
17 | case ActionTypes.ZONE_FETCH_SETTINGS_SUCCESS:
18 | let normalizedZoneSettings = normalizeZoneByIdGetAll(
19 | action.zoneId,
20 | action.zoneSettings
21 | );
22 |
23 | return Object.assign({}, state, {
24 | entities: _.merge(state.entities, normalizedZoneSettings.entities),
25 | result: _.merge(state.result, normalizedZoneSettings.result),
26 | isFetching: ''
27 | });
28 | case ActionTypes.ZONE_FETCH_SETTINGS_ERROR:
29 | return Object.assign({}, state, {
30 | isFetching: ''
31 | });
32 | case ActionTypes.ZONE_UPDATE_SETTING:
33 | return Object.assign({}, state, {
34 | entities: zonePatchSetting(action.zoneId, action.setting, state),
35 | isFetching: action.setting.id
36 | });
37 | case ActionTypes.ZONE_UPDATE_SETTING_SUCCESS:
38 | return Object.assign({}, state, {
39 | entities: zonePatchSetting(action.zoneId, action.setting, state),
40 | isFetching: ''
41 | });
42 | case ActionTypes.ZONE_UPDATE_SETTING_ERROR:
43 | return Object.assign({}, state, {
44 | entities: zonePatchSetting(action.zoneId, action.setting, state),
45 | isFetching: ''
46 | });
47 | default:
48 | return state;
49 | }
50 | }
51 |
52 | function zonePatchSetting(zoneId, setting, state) {
53 | let patchedEntities = Object.assign({}, state.entities);
54 | patchedEntities[zoneId][setting.id] = setting;
55 | return patchedEntities;
56 | }
57 |
--------------------------------------------------------------------------------
/src/reducers/zones.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 | import * as ActionTypes from '../constants/ActionTypes';
3 | import { normalizeZoneGetAll } from '../constants/Schemas';
4 |
5 | const initialState = {
6 | entities: {},
7 | result: {},
8 | zoneDeleteIsFetching: false,
9 | zoneFetchIsFetching: false,
10 | zoneProvisionCnameIsFetching: false,
11 | zoneProvisionFullIsFetching: false
12 | };
13 |
14 | export function zonesReducer(state = initialState, action) {
15 | switch (action.type) {
16 | case ActionTypes.ZONES_DELETE_ZONE:
17 | return Object.assign({}, state, {
18 | zoneDeleteIsFetching: true
19 | });
20 | case ActionTypes.ZONES_DELETE_ZONE_SUCCESS:
21 | return Object.assign({}, state, {
22 | zoneDeleteIsFetching: false
23 | });
24 | case ActionTypes.ZONES_DELETE_ZONE_ERROR:
25 | return Object.assign({}, state, {
26 | zoneDeleteIsFetching: false
27 | });
28 | case ActionTypes.ZONES_FETCH:
29 | return Object.assign({}, state, {
30 | zoneFetchIsFetching: true
31 | });
32 | case ActionTypes.ZONES_FETCH_SUCCESS:
33 | let normalizedZoneList = normalizeZoneGetAll(action.zoneList);
34 |
35 | return Object.assign({}, state, {
36 | entities: _.merge(state.entities, normalizedZoneList.entities),
37 | result: _.merge(state.result, normalizedZoneList.result),
38 | zoneFetchIsFetching: false
39 | });
40 | case ActionTypes.ZONES_FETCH_ERROR:
41 | return Object.assign({}, state, {
42 | zoneFetchIsFetching: false
43 | });
44 | case ActionTypes.ZONES_PROVISION_CNAME:
45 | return Object.assign({}, state, {
46 | zoneProvisionCnameIsFetching: true
47 | });
48 | case ActionTypes.ZONES_PROVISION_CNAME_SUCCESS:
49 | return Object.assign({}, state, {
50 | zoneProvisionCnameIsFetching: false
51 | });
52 | case ActionTypes.ZONES_PROVISION_CNAME_ERROR:
53 | return Object.assign({}, state, {
54 | zoneProvisionCnameIsFetching: false
55 | });
56 | case ActionTypes.ZONES_PROVISION_FULL:
57 | return Object.assign({}, state, {
58 | zoneProvisionFullIsFetching: true
59 | });
60 | case ActionTypes.ZONES_PROVISION_FULL_SUCCESS:
61 | return Object.assign({}, state, {
62 | zoneProvisionFullIsFetching: false
63 | });
64 | case ActionTypes.ZONES_PROVISION_FULL_ERROR:
65 | return Object.assign({}, state, {
66 | zoneProvisionFullIsFetching: false
67 | });
68 | default:
69 | return state;
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route, IndexRoute } from 'react-router';
3 | import * as UrlPaths from './constants/UrlPaths';
4 | import { isLoggedIn } from './utils/Auth/Auth';
5 |
6 | /* containers */
7 | import AnalyticsPage from './containers/AnalyticsPage/AnaltyicsPage';
8 | import App from './containers/App/App';
9 | import DNSManagementPage from './containers/DNSManagementPage/DNSManagementPage';
10 | import LoginPage from './containers/LoginPage/LoginPage';
11 | import SplashPage from './containers/SplashPage/SplashPage';
12 | import SignUpPage from './containers/SignUpPage/SignUpPage';
13 | import HomePage from './containers/HomePage/HomePage';
14 | import MoreSettingsPage from './containers/MoreSettingsPage/MoreSettingsPage';
15 |
16 | function requireAuth(nextState, replaceState) {
17 | if (!isLoggedIn()) {
18 | replaceState(
19 | { nextPathname: nextState.location.pathname },
20 | UrlPaths.LOGIN_PAGE
21 | );
22 | }
23 | }
24 |
25 | export default (
26 |
27 |
28 |
29 |
30 |
35 |
40 |
45 |
50 |
51 | );
52 |
--------------------------------------------------------------------------------
/src/selectors/activeZone.js:
--------------------------------------------------------------------------------
1 | export function isActiveZoneOnCloudflare(activeZone) {
2 | return activeZone.id !== undefined;
3 | }
4 |
--------------------------------------------------------------------------------
/src/selectors/config.js:
--------------------------------------------------------------------------------
1 | import { ABSOLUTE_URL_BASE_KEY } from '../reducers/config';
2 |
3 | export function getAbsoluteUrl(config, url) {
4 | let baseUrl =
5 | typeof config.config[ABSOLUTE_URL_BASE_KEY] !== 'undefined'
6 | ? config.config[ABSOLUTE_URL_BASE_KEY]
7 | : '';
8 | return baseUrl + url;
9 | }
10 |
11 | export function getConfigValue(config, key) {
12 | return config.config[key];
13 | }
14 |
15 | export function isDNSPageEnabled(config) {
16 | return getConfigValue(config, 'isDNSPageEnabled') === true;
17 | }
18 |
--------------------------------------------------------------------------------
/src/selectors/intl.js:
--------------------------------------------------------------------------------
1 | export function getLocale(state) {
2 | return state.intl.locale;
3 | }
4 |
--------------------------------------------------------------------------------
/src/selectors/pluginSettings.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 |
3 | export function getPluginSettingsForZoneId(zoneId, state) {
4 | return _.get(state, ['entities', zoneId], false);
5 | }
6 |
7 | export function getPluginSettingsIsFetching(state) {
8 | return _.get(state, ['pluginSettings', 'isFetching']);
9 | }
10 |
11 | export function getPluginSettingsValueForZoneId(zoneId, settingId, state) {
12 | // return false as default value
13 | return _.get(
14 | state,
15 | ['pluginSettings', 'entities', zoneId, settingId, 'value'],
16 | false
17 | );
18 | }
19 |
20 | export function getPluginSettingsModifiedDateForZoneId(
21 | zoneId,
22 | settingId,
23 | state
24 | ) {
25 | // return '' as default value
26 | return _.get(
27 | state,
28 | ['pluginSettings', 'entities', zoneId, settingId, 'modified_on'],
29 | ''
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/selectors/zoneSettings.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 |
3 | export function getZoneSettingsValueForZoneId(zoneId, settingId, state) {
4 | // return false as default value
5 | return _.get(
6 | state,
7 | ['zoneSettings', 'entities', zoneId, settingId, 'value'],
8 | false
9 | );
10 | }
11 |
12 | export function getZoneSettingsModifiedDateForZoneId(zoneId, settingId, state) {
13 | // return '' as default value
14 | return _.get(
15 | state,
16 | ['zoneSettings', 'entities', zoneId, settingId, 'modified_on'],
17 | ''
18 | );
19 | }
20 |
21 | export function getAllZoneSettingsForZoneId(zoneId, state) {
22 | return _.get(state, ['entities', zoneId], false);
23 | }
24 |
--------------------------------------------------------------------------------
/src/selectors/zones.js:
--------------------------------------------------------------------------------
1 | export function getZonePlanLegacyId(zoneName, zones) {
2 | return zones.entities.zones[zoneName].plan.legacy_id;
3 | }
4 |
--------------------------------------------------------------------------------
/src/store/configureStore.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware } from 'redux';
2 | import thunkMiddleware from 'redux-thunk';
3 | import createLogger from 'redux-logger';
4 | import rootReducer from '../reducers';
5 | import { routerMiddleware } from 'react-router-redux';
6 |
7 | export default function configureStore(history, initialState) {
8 | const router = routerMiddleware(history);
9 |
10 | const logger = createLogger({ collapsed: true });
11 |
12 | const createStoreWithMiddleware = applyMiddleware(
13 | thunkMiddleware,
14 | logger,
15 | router
16 | )(createStore);
17 | const store = createStoreWithMiddleware(rootReducer, initialState);
18 |
19 | return store;
20 | }
21 |
--------------------------------------------------------------------------------
/src/test/_helpers/createMockStore.js:
--------------------------------------------------------------------------------
1 | import configureStore from 'redux-mock-store';
2 | import thunk from 'redux-thunk';
3 | const middlewares = [thunk];
4 |
5 | export default state => configureStore(middlewares)(state);
6 |
--------------------------------------------------------------------------------
/src/test/components/BenefitsFeatureTest.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BenefitsFeature from '../../components/BenefitsFeature/BenefitsFeature';
3 | import renderer from 'react-test-renderer';
4 |
5 | it('renders enabled correctly', () => {
6 | const component = renderer
7 | .create(
8 |
13 | )
14 | .toJSON();
15 | expect(component).toMatchSnapshot();
16 | });
17 |
--------------------------------------------------------------------------------
/src/test/components/FeatureManagerTest.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import FeatureManager from '../../components/FeatureManager/FeatureManager';
3 | import renderer from 'react-test-renderer';
4 |
5 | it('renders enabled correctly', () => {
6 | const component = renderer
7 | .create(
8 |
9 | children
10 |
11 | )
12 | .toJSON();
13 | expect(component).toMatchSnapshot();
14 | });
15 |
16 | it('renders disabled correctly', () => {
17 | const component = renderer
18 | .create(
19 |
20 | children
21 |
22 | )
23 | .toJSON();
24 | expect(component).toMatchSnapshot();
25 | });
26 |
--------------------------------------------------------------------------------
/src/test/components/GradientBannerTest.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import GradientBanner from '../../components/GradientBanner/GradientBanner';
3 | import renderer from 'react-test-renderer';
4 | import { StyleProvider } from 'cf-style-provider';
5 |
6 | it('renders enabled correctly', () => {
7 | const component = renderer
8 | .create(
9 |
15 |
20 |
21 | )
22 | .toJSON();
23 | expect(component).toMatchSnapshot();
24 | });
25 |
--------------------------------------------------------------------------------
/src/test/components/MarketingFeatureTest.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import MarketingFeature from '../../components/MarketingFeature/MarketingFeature';
3 | import renderer from 'react-test-renderer';
4 |
5 | it('renders enabled correctly', () => {
6 | const component = renderer
7 | .create(
8 |
13 | )
14 | .toJSON();
15 | expect(component).toMatchSnapshot();
16 | });
17 |
--------------------------------------------------------------------------------
/src/test/components/__snapshots__/BenefitsFeatureTest.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders enabled correctly 1`] = `
4 |
11 |
23 |
36 | title
37 |
38 |
48 | description
49 |
50 |
5 | error
6 |
7 | `;
8 |
9 | exports[`renders enabled correctly 1`] = `
10 |
11 | children
12 |
13 | `;
14 |
--------------------------------------------------------------------------------
/src/test/components/__snapshots__/GradientBannerTest.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders enabled correctly 1`] = `
4 |
7 | `;
8 |
--------------------------------------------------------------------------------
/src/test/components/__snapshots__/MarketingFeatureTest.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders enabled correctly 1`] = `
4 |
11 |
23 |
36 | title
37 |
38 |
47 | description
48 |
49 |