Add tests for user dialogs, localize user dialogs, and change the clo…

…seButtonLabel to closeButtonText for consistency
siacomuzzi · Jan 11, 2018 · 6c7e329 · 6c7e329
1 parent fb79f15
commit 6c7e329
Show file tree

Hide file tree

Showing 27 changed files with 1,388 additions and 91 deletions.
diff --git a/client/components/Logs/LogDialog.jsx b/client/components/Logs/LogDialog.jsx
@@ -43,7 +43,7 @@ export default class LogDialog extends Component {
         </Modal.Body>
         <Modal.Footer>
           <Button disabled={loading} onClick={onClose}>
-            <i className="icon icon-budicon-501"></i> {languageDictionary.closeButtonLabel || 'Close'}
+            <i className="icon icon-budicon-501"></i> {languageDictionary.closeButtonText || 'Close'}
           </Button>
         </Modal.Footer>
       </Modal>

diff --git a/client/containers/Users/Dialogs/BlockDialog.jsx b/client/containers/Users/Dialogs/BlockDialog.jsx
@@ -8,7 +8,8 @@ import getDialogMessage from './getDialogMessage';
 
 export default connectContainer(class extends Component {
   static stateToProps = (state) => ({
-    block: state.block
+    block: state.block,
+    languageDictionary: state.languageDictionary
   });
 
   static actionsToProps = {
@@ -23,7 +24,8 @@ export default connectContainer(class extends Component {
   };
 
   shouldComponentUpdate(nextProps) {
-    return nextProps.block !== this.props.block;
+    return nextProps.block !== this.props.block ||
+      nextProps.languageDictionary !== this.props.languageDictionary;
   }
 
   onConfirm = () => {
@@ -34,7 +36,7 @@ export default connectContainer(class extends Component {
     const { cancelBlockUser } = this.props;
     const { userName, error, requesting, loading } = this.props.block.toJS();
 
-    const languageDictionary = this.props.languageDictionary || {};
+    const languageDictionary = this.props.languageDictionary.get('record').toJS();
 
     const { preText, postText } = getDialogMessage(
       languageDictionary.blockDialogMessage, 'username',

diff --git a/client/containers/Users/Dialogs/CreateDialog.jsx b/client/containers/Users/Dialogs/CreateDialog.jsx
@@ -12,6 +12,7 @@ export default connectContainer(class extends Component {
     userCreate: state.userCreate,
     accessLevel: state.accessLevel,
     connections: state.connections,
+    languageDictionary: state.languageDictionary
   });
 
   static actionsToProps = {
@@ -31,7 +32,11 @@ export default connectContainer(class extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    return nextProps.userCreate !== this.props.userCreate || nextProps.connections !== this.props.connections || nextProps.accessLevel !== this.props.accessLevel || nextProps.userFields !== this.props.userFields;
+    return nextProps.userCreate !== this.props.userCreate ||
+      nextProps.languageDictionary !== this.props.languageDictionary ||
+      nextProps.connections !== this.props.connections ||
+      nextProps.accessLevel !== this.props.accessLevel ||
+      nextProps.userFields !== this.props.userFields;
   }
 
   onSubmit = (user) => {
@@ -43,7 +48,7 @@ export default connectContainer(class extends Component {
     const connections = this.props.connections.toJS();
     const accessLevel = this.props.accessLevel.get('record').toJS();
 
-    const languageDictionary = this.props.languageDictionary || {};
+    const languageDictionary = this.props.languageDictionary.get('record').toJS();
 
     return (
       <Modal show={record !== null} className="modal-overflow-visible" onHide={this.props.cancelCreateUser}>

diff --git a/client/containers/Users/Dialogs/DeleteDialog.jsx b/client/containers/Users/Dialogs/DeleteDialog.jsx
@@ -8,7 +8,8 @@ import getDialogMessage from './getDialogMessage';
 
 export default connectContainer(class extends Component {
   static stateToProps = (state) => ({
-    userDelete: state.userDelete
+    userDelete: state.userDelete,
+    languageDictionary: state.languageDictionary
   });
 
   static actionsToProps = {
@@ -23,7 +24,8 @@ export default connectContainer(class extends Component {
   };
 
   shouldComponentUpdate(nextProps) {
-    return nextProps.userDelete !== this.props.userDelete;
+    return nextProps.userDelete !== this.props.userDelete ||
+      nextProps.languageDictionary !== this.props.languageDictionary;
   }
 
   onConfirm = () => {
@@ -34,7 +36,7 @@ export default connectContainer(class extends Component {
     const { cancelDeleteUser } = this.props;
     const { userName, error, requesting, loading } = this.props.userDelete.toJS();
 
-    const languageDictionary = this.props.languageDictionary || {};
+    const languageDictionary = this.props.languageDictionary.get('record').toJS();
     const { preText, postText } = getDialogMessage(
       languageDictionary.deleteDialogMessage, 'username',
       {

diff --git a/client/containers/Users/Dialogs/EmailChangeDialog.jsx b/client/containers/Users/Dialogs/EmailChangeDialog.jsx
@@ -10,7 +10,8 @@ import getDialogMessage from './getDialogMessage';
 export default connectContainer(class extends Component {
   static stateToProps = (state) => ({
     emailChange: state.emailChange,
-    settings: state.settings
+    settings: state.settings,
+    languageDictionary: state.languageDictionary
   });
 
   static actionsToProps = {
@@ -24,7 +25,8 @@ export default connectContainer(class extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    return nextProps.emailChange !== this.props.emailChange;
+    return nextProps.languageDictionary !== this.props.languageDictionary ||
+      nextProps.emailChange !== this.props.emailChange;
   }
 
   onConfirm = () => {
@@ -53,7 +55,7 @@ export default connectContainer(class extends Component {
 
     const userFields = _.get(this.props.settings.toJS(), 'record.settings.userFields', []);
 
-    const languageDictionary = this.props.languageDictionary || {};
+    const languageDictionary = this.props.languageDictionary.get('record').toJS();
     const { preText, postText } = getDialogMessage(
       languageDictionary.changeEmailMessage, 'username',
       {

diff --git a/client/containers/Users/Dialogs/FieldsChangeDialog.jsx b/client/containers/Users/Dialogs/FieldsChangeDialog.jsx
@@ -9,7 +9,8 @@ import { UserFieldsChangeForm } from '../../../components/Users';
 export default connectContainer(class extends Component {
   static stateToProps = (state) => ({
     fieldsChange: state.fieldsChange,
-    userId: state.fieldsChange.toJS().userId
+    userId: state.fieldsChange.toJS().userId,
+    languageDictionary: state.languageDictionary
   });
 
   static actionsToProps = {
@@ -22,11 +23,14 @@ export default connectContainer(class extends Component {
     changeFields: PropTypes.func.isRequired,
     cancelChangeFields: PropTypes.func.isRequired,
     userFields: PropTypes.array.isRequired,
-    userId: PropTypes.string.isRequired
+    userId: PropTypes.string.isRequired,
+    languageDictionary: PropTypes.object
   };
 
   shouldComponentUpdate(nextProps) {
-    return nextProps.fieldsChange !== this.props.fieldsChange || nextProps.userFields !== this.props.userFields;
+    return nextProps.fieldsChange !== this.props.fieldsChange ||
+      nextProps.userFields !== this.props.userFields ||
+      nextProps.languageDictionary !== this.props.languageDictionary;
   }
 
   onSubmit = (user) => {
@@ -42,10 +46,12 @@ export default connectContainer(class extends Component {
   render() {
     const { error, loading, record } = this.props.fieldsChange.toJS();
 
+    const languageDictionary = this.props.languageDictionary.get('record').toJS();
+
     return (
       <Modal show={record !== null} className="modal-overflow-visible" onHide={this.props.cancelChangeFields}>
         <Modal.Header closeButton={loading} className="has-border">
-          <Modal.Title>Change Profile</Modal.Title>
+          <Modal.Title>{languageDictionary.changeProfileDialogTitle || 'Change Profile'}</Modal.Title>
         </Modal.Header>
 
         <UserFieldsChangeForm
@@ -55,6 +61,7 @@ export default connectContainer(class extends Component {
           onClose={this.props.cancelChangeFields}
           onSubmit={this.onSubmit}
           submitting={loading}
+          languageDictionary={languageDictionary}
         >
           <Error message={error} />
         </UserFieldsChangeForm>

diff --git a/client/containers/Users/Dialogs/PasswordChangeDialog.jsx b/client/containers/Users/Dialogs/PasswordChangeDialog.jsx
@@ -1,13 +1,16 @@
+import _ from 'lodash';
 import React, { Component, PropTypes } from 'react';
 import connectContainer from 'redux-static';
 
 import { userActions } from '../../../actions';
+import getDialogMessage from './getDialogMessage';
 import { Error, Confirm } from 'auth0-extension-ui';
 
 export default connectContainer(class extends Component {
   static stateToProps = (state) => ({
     passwordChange: state.passwordChange,
-    settings: state.settings
+    settings: state.settings,
+    languageDictionary: state.languageDictionary
   });
 
   static actionsToProps = {
@@ -21,7 +24,7 @@ export default connectContainer(class extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    return nextProps.passwordChange !== this.props.passwordChange;
+    return nextProps.passwordChange !== this.props.passwordChange || nextProps.languageDictionary !== this.props.languageDictionary;
   }
 
   onConfirm = () => {
@@ -34,10 +37,12 @@ export default connectContainer(class extends Component {
 
     const displayConnection = !connectionField || (_.isBoolean(connectionField.edit) && connectionField.edit === true) || _.isObject(connectionField.edit);
 
+    const label = (connectionField && connectionField.label) || 'Connection';
+
     return displayConnection ? <div className="form-group">
-      <label className="col-xs-2 control-label">Connection</label>
+      <label id="password-change-connection-label" className="col-xs-2 control-label">{label}</label>
       <div className="col-xs-9">
-        <input type="text" readOnly="readonly" className="form-control" value={connection} />
+        <input id="password-change-connection-input" type="text" readOnly="readonly" className="form-control" value={connection} />
       </div>
     </div> : <div></div>;
   }
@@ -52,32 +57,55 @@ export default connectContainer(class extends Component {
       return null;
     }
 
+    const languageDictionary = this.props.languageDictionary.get('record').toJS();
+    const { preText, postText } = getDialogMessage(
+      languageDictionary.changePasswordMessage, 'username',
+      {
+        preText: 'Do you really want to reset the password for ',
+        postText: '? You\'ll need a safe way to communicate the new password to your user, never send the user this' +
+        ' new password in clear text.'
+      }
+    );
+
+    const emailField = _.find(userFields, field => field.property === 'email');
+    const passwordField = _.find(userFields, field => field.property === 'password');
+    const repeatPasswordField = _.find(userFields, field => field.property === 'repeatPassword');
+
+    const emailLabel = (emailField && emailField.label) || 'Email';
+    const passwordLabel = (passwordField && passwordField.label) || 'Password';
+    const repeatPasswordLabel = (repeatPasswordField && repeatPasswordField.label) || 'Repeat Password';
+
     return (
-      <Confirm title="Change Password?" show={requesting} loading={loading} onCancel={cancelPasswordChange} onConfirm={this.onConfirm}>
+      <Confirm
+        title={languageDictionary.changePasswordTitle || 'Change Password?'}
+        show={requesting}
+        loading={loading}
+        onCancel={cancelPasswordChange}
+        languageDictionary={languageDictionary}
+        onConfirm={this.onConfirm}>
         <Error message={error} />
         <p>
-          Do you really want to reset the password for <strong>{userName}</strong>?
-          You'll need a safe way to communicate the new password to your user, never send the user this new password in clear text.
+          {preText}<strong>{userName}</strong>{postText}
         </p>
         <div className="row">
           <form className="form-horizontal col-xs-12" style={{ marginTop: '40px' }}>
             <div className="form-group">
-              <label className="col-xs-2 control-label">Email</label>
+              <label id="password-change-email-label" className="col-xs-2 control-label">{emailLabel}</label>
               <div className="col-xs-9">
                 <input type="text" readOnly="readonly" className="form-control" value={userEmail} />
               </div>
             </div>
             { this.renderConnection(connection, userFields) }
             <div className="form-group">
-              <label className="col-xs-2 control-label">Password</label>
+              <label id="password-change-password-label" className="col-xs-2 control-label">{passwordLabel}</label>
               <div className="col-xs-9">
-                <input type="password" ref="password" className="form-control" />
+                <input id="password-change-password-input" type="password" ref="password" className="form-control" />
               </div>
             </div>
             <div className="form-group">
-              <label className="col-xs-2 control-label">Repeat Password</label>
+              <label id="password-change-repeat-password-label" className="col-xs-2 control-label">{repeatPasswordLabel}</label>
               <div className="col-xs-9">
-                <input type="password" ref="repeatPassword" className="form-control" />
+                <input id="password-change-repeat-password-input" type="password" ref="repeatPassword" className="form-control" />
               </div>
             </div>
           </form>

diff --git a/client/containers/Users/Dialogs/PasswordResetDialog.jsx b/client/containers/Users/Dialogs/PasswordResetDialog.jsx
@@ -1,14 +1,19 @@
-import React, { Component, PropTypes } from 'react';
+import _ from 'lodash';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import connectContainer from 'redux-static';
 import { Error, Confirm } from 'auth0-extension-ui';
 
 import { userActions } from '../../../actions';
 import getAppsForConnection from '../../../selectors/getAppsForConnection';
+import getDialogMessage from './getDialogMessage';
 
 export default connectContainer(class extends Component {
   static stateToProps = (state) => ({
     passwordReset: state.passwordReset,
-    appsForConnection: getAppsForConnection(state, state.passwordReset.get('connection'))
+    appsForConnection: getAppsForConnection(state, state.passwordReset.get('connection')),
+    settings: state.settings,
+    languageDictionary: state.languageDictionary
   });
 
   static actionsToProps = {
@@ -23,11 +28,29 @@ export default connectContainer(class extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    return nextProps.passwordReset !== this.props.passwordReset || nextProps.appsForConnection !== this.props.appsForConnection;
+    return nextProps.passwordReset !== this.props.passwordReset ||
+      nextProps.languageDictionary !== this.props.languageDictionary ||
+      nextProps.settings !== this.props.settings ||
+      nextProps.appsForConnection !== this.props.appsForConnection;
   }
 
   onConfirm = () => {
-    this.props.resetPassword(this.refs.application.value);
+    this.props.resetPassword(this.refs.client.value);
+  };
+
+  renderConnection(connection, userFields) {
+    const connectionField = _.find(userFields, field => field.property === 'connection');
+
+    const displayConnection = !connectionField || (_.isBoolean(connectionField.edit) && connectionField.edit === true) || _.isObject(connectionField.edit);
+
+    const label = (connectionField && connectionField.label) || 'Connection';
+    return displayConnection ? <div className="form-group">
+      <label id="password-reset-connection-label" className="col-xs-2 control-label">{label}</label>
+      <div className="col-xs-9">
+        <input id="password-reset-connection-input" type="text" readOnly="readonly" className="form-control"
+               value={connection}/>
+      </div>
+    </div> : <div></div>;
   }
 
   render() {
@@ -38,32 +61,48 @@ export default connectContainer(class extends Component {
       return null;
     }
 
+    const userFields = _.get(this.props.settings.toJS(), 'record.settings.userFields', []);
+    const languageDictionary = this.props.languageDictionary.get('record').toJS();
+    const { preText, postText } = getDialogMessage(
+      languageDictionary.resetPasswordMessage, 'username',
+      {
+        preText: 'Do you really want to reset the password for ',
+        postText: '? This will send an email to the user allowing them to choose a new password.'
+      }
+    );
+
+    const emailField = _.find(userFields, field => field.property === 'email');
+    const emailLabel = (emailField && emailField.label) || 'Email';
+    const clientField = _.find(userFields, field => field.property === 'client');
+    const clientLabel = (clientField && clientField.label) || 'Client';
+
     return (
-      <Confirm title="Reset Password?" show={requesting} loading={loading} onCancel={cancelPasswordReset} onConfirm={this.onConfirm}>
-        <Error message={error} />
+      <Confirm
+        title={languageDictionary.resetPasswordTitle || 'Reset Password?'}
+        show={requesting}
+        loading={loading}
+        onCancel={cancelPasswordReset}
+        languageDictionary={languageDictionary}
+        onConfirm={this.onConfirm}>
+        <Error message={error}/>
         <p>
-          Do you really want to reset the password for <strong>{userName}</strong>?
-          This will send an email to the user allowing them to choose a new password.
+          {preText}<strong>{userName}</strong>{postText}
         </p>
         <div className="row">
           <form className="form-horizontal col-xs-12" style={{ marginTop: '40px' }}>
             <div className="form-group">
-              <label className="col-xs-2 control-label">Email</label>
-              <div className="col-xs-9">
-                <input type="text" readOnly="readonly" className="form-control" value={userEmail} />
-              </div>
-            </div>
-            <div className="form-group">
-              <label className="col-xs-2 control-label">Connection</label>
+              <label id="password-reset-email-label" className="col-xs-2 control-label">{emailLabel}</label>
               <div className="col-xs-9">
-                <input type="text" readOnly="readonly" className="form-control" value={connection} />
+                <input type="text" readOnly="readonly" className="form-control" value={userEmail}/>
               </div>
             </div>
+            {this.renderConnection(connection, userFields)}
             <div className="form-group">
-              <label className="col-xs-2 control-label">Application</label>
+              <label id="password-reset-client-label" className="col-xs-2 control-label">{clientLabel}</label>
               <div className="col-xs-9">
-                <select className="form-control" ref="application">
-                  {this.props.appsForConnection.toJS().map((option, index) => <option key={index} value={option.client_id}>{option.name}</option>)}
+                <select className="form-control" ref="client">
+                  {this.props.appsForConnection.toJS().map((option, index) => <option key={index}
+                                                                                      value={option.client_id}>{option.name}</option>)}
                 </select>
               </div>
             </div>