https://www.pivotaltracker.com/story/show/178734596 (#401)

* Refactor 1

* revert package.json

* fixed settings.

* client settings screen

Co-authored-by: Faisal Nadeem <[email protected]>

Author: fn-faisal

package-lock.json

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import Fieldset                          from 'components/Fieldset/Fieldset.react';
+import Field                             from 'components/Field/Field.react';
+import Label                             from 'components/Label/Label.react';
+import TextInput                         from 'components/TextInput/TextInput.react';
+import {
+  DEFAULT_SETTINGS_LABEL_WIDTH
+}                                        from 'dashboard/Settings/Fields/Constants';
+
+export const AppInformationFields = ({
+  appName,
+  setAppName,
+  inProduction,
+  setInProduction,
+  iTunesURL,
+  setiTunesURL,
+  googlePlayURL,
+  setGooglePlayURL,
+  windowsAppStoreURL,
+  setWindowsAppStoreURL,
+  webAppURL,
+  setWebAppURL,
+  otherURL,
+  setOtherURL,
+}) => <Fieldset
+  legend='App Information'
+  description='Update general information about your app.'>
+  <Field
+    labelWidth={DEFAULT_SETTINGS_LABEL_WIDTH}
+    label={<Label text='App name' />}
+    input={<TextInput
+      value={appName}
+      onChange={setAppName} />
+    } />
+</Fieldset>;

src/dashboard/Settings/Fields/AppInformationFields.react.js

@@ -0,0 +1,21 @@
+import React          from 'react';
+import Collaborators  from 'dashboard/Settings/Collaborators.react';
+
+export const CollaboratorsFields = ({
+  collaborators,
+  waiting_collaborators,
+  ownerEmail,
+  viewerEmail,
+  addCollaborator,
+  removeCollaborator,
+  editCollaborator,
+}) => <Collaborators
+  legend='Collaborators'
+  description='Team up and work together with other people.'
+  collaborators={collaborators}
+  waiting_collaborators={waiting_collaborators}
+  owner_email={ownerEmail}
+  viewer_email={viewerEmail}
+  onAdd={addCollaborator}
+  onRemove={removeCollaborator}
+  onEdit={editCollaborator} />;

src/dashboard/Settings/Fields/CollaboratorsFields.react.js

@@ -0,0 +1,23 @@
+export const DEFAULT_SETTINGS_LABEL_WIDTH = 55;
+export const numJobsFromRequestLimit = (limit) => Math.floor((limit-10)/20);
+
+export const defaultParseOptions = {
+  accountLockout: {
+    duration: 5, // duration policy setting determines the number of minutes that a locked-out account remains locked out before automatically becoming unlocked. Set it to a value greater than 0 and less than 100000.
+    threshold: 3, // threshold policy setting determines the number of failed sign-in attempts that will cause a user account to be locked. Set it to an integer value greater than 0 and less than 1000.
+  },
+  // optional settings to enforce password policies
+  passwordPolicy: {
+    // Two optional settings to enforce strong passwords. Either one or both can be specified.
+    // If both are specified, both checks must pass to accept the password
+    // 1. a RegExp object or a regex string representing the pattern to enforce
+    validatorPattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/, // enforce password with at least 8 char with at least 1 lower case, 1 upper case and 1 digit
+    // 2. a callback function to be invoked to validate the password
+    validationError: 'Password must contain at least 1 digit.', // optional error message to be sent instead of the default "Password does not meet the Password Policy requirements." message.
+    doNotAllowUsername: true, // optional setting to disallow username in passwords
+    maxPasswordAge: 90, // optional setting in days for password expiry. Login fails if user does not reset the password within this period after signup/last reset.
+    maxPasswordHistory: 5, // optional setting to prevent reuse of previous n passwords. Maximum value that can be specified is 20. Not specifying it or specifying 0 will not enforce history.
+    //optional setting to set a validity duration for password reset links (in seconds)
+    resetTokenValidityDuration: 24*60*60, // expire after 24 hours
+  }
+}

src/dashboard/Settings/Fields/Constants.js

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import Fieldset                          from 'components/Fieldset/Fieldset.react';
+import Field                             from 'components/Field/Field.react';
+import Label                             from 'components/Label/Label.react';
+import Range                             from 'components/Range/Range.react';
+import { cost, features }                from 'dashboard/Settings/GeneralSettings.scss';
+import {
+  numJobsFromRequestLimit, DEFAULT_SETTINGS_LABEL_WIDTH
+}                                        from 'dashboard/Settings/Fields/Constants';
+
+export const CurrentPlan = ({requestLimit}) => {
+  let costString = requestLimit === 30 ?
+    'Free' :
+    '$' + ((requestLimit-30) * 10).toString();
+  return (
+    <div>
+      <div className={cost}>{costString}</div>
+      <div className={features}>{requestLimit.toString() + ' requests per second'}<br/>{numJobsFromRequestLimit(requestLimit).toString() + ' background job' + (numJobsFromRequestLimit(requestLimit) > 1 ? 's' : '')}</div>
+    </div>
+)};
+
+export const CurrentPlanFields = ({
+  visible,
+  requestLimit,
+  setRequestLimit,
+}) => visible ? <Fieldset
+  legend='Current Plan'
+  description={'Adjust your pricing and your app\u2019s request limit'}>
+  <Field
+    labelWidth={40}
+    label={<Label
+      text='Scale your app'
+      description='This will take effect as soon as you save your changes.' />}
+    input={<Range
+      min={0}
+      max={600}
+      step={10}
+      color='#169CEE'
+      value={requestLimit}
+      track={true}
+      units={value => {
+        let numJobs = numJobsFromRequestLimit(value);
+        return value + 'req/s & ' + numJobs + ' job' + (numJobs == 1 ? '' : 's')
+      }}
+      width={220}
+      onChange={limit => {
+        if (limit < 30) {
+          limit = 30;
+        }
+        setRequestLimit(limit);
+      }} />} />
+  <Field
+    labelWidth={DEFAULT_SETTINGS_LABEL_WIDTH}
+    label={<Label text='Your plan' />}
+    input={<CurrentPlan requestLimit={requestLimit} />} />
+</Fieldset> : <noscript/>;