React version of UserEdit

client/app/components/dynamic-form/DynamicForm.jsx

@@ -12,11 +12,13 @@ import { toastr } from '@/services/ng';
 import { Field, Action, AntdForm } from '../proptypes';
 import helper from './dynamicFormHelper';
 
-export class DynamicForm extends React.Component {
+export const DynamicForm = Form.create()(class DynamicForm extends React.Component {
   static propTypes = {
     fields: PropTypes.arrayOf(Field),
     actions: PropTypes.arrayOf(Action),
     feedbackIcons: PropTypes.bool,
+    readOnly: PropTypes.bool,
+    saveText: PropTypes.string,
     onSubmit: PropTypes.func,
     form: AntdForm.isRequired,
   };
@@ -25,6 +27,8 @@ export class DynamicForm extends React.Component {
     fields: [],
     actions: [],
     feedbackIcons: false,
+    readOnly: false,
+    saveText: 'Save',
     onSubmit: () => {},
   };
 
@@ -139,23 +143,25 @@ export class DynamicForm extends React.Component {
 
   renderFields() {
     return this.props.fields.map((field) => {
-      const [firstItem] = this.props.fields;
+      const [firstField] = this.props.fields;
       const FormItem = Form.Item;
       const { name, title, type } = field;
       const fieldLabel = title || helper.toHuman(name);
+      const { feedbackIcons, readOnly } = this.props;
 
       const formItemProps = {
         key: name,
         className: 'm-b-10',
-        hasFeedback: type !== 'checkbox' && type !== 'file' && this.props.feedbackIcons,
+        hasFeedback: type !== 'checkbox' && type !== 'file' && feedbackIcons,
         label: type === 'checkbox' ? '' : fieldLabel,
       };
 
       const fieldProps = {
-        autoFocus: (firstItem === field),
+        autoFocus: (firstField === field),
         className: 'w-100',
         name,
         type,
+        readOnly,
         placeholder: field.placeholder,
         'data-test': fieldLabel,
       };
@@ -191,22 +197,21 @@ export class DynamicForm extends React.Component {
       disabled: this.state.isSubmitting,
       loading: this.state.isSubmitting,
     };
+    const { readOnly, saveText } = this.props;
+    const saveButton = !readOnly;
 
     return (
       <Form layout="vertical" onSubmit={this.handleSubmit}>
         {this.renderFields()}
-        <Button {...submitProps}>
-          Save
-        </Button>
+        {saveButton && <Button {...submitProps}>{saveText}</Button>}
         {this.renderActions()}
       </Form>
     );
   }
-}
+});
 
 export default function init(ngModule) {
   ngModule.component('dynamicForm', react2angular((props) => {
-    const UpdatedDynamicForm = Form.create()(DynamicForm);
     const fields = helper.getFields(props.type.configuration_schema, props.target);
 
     const onSubmit = (values, onSuccess, onError) => {
@@ -231,7 +236,7 @@ export default function init(ngModule) {
       feedbackIcons: true,
       onSubmit,
     };
-    return (<UpdatedDynamicForm {...updatedProps} />);
+    return (<DynamicForm {...updatedProps} />);
   }, ['target', 'type', 'actions']));
 }
 

client/app/components/proptypes.js

@@ -49,3 +49,12 @@ export const Action = PropTypes.shape({
 export const AntdForm = PropTypes.shape({
   validateFieldsAndScroll: PropTypes.func,
 });
+
+export const UserProfile = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  profileImageUrl: PropTypes.string,
+  apiKey: PropTypes.string,
+  isDisabled: PropTypes.bool,
+});

client/app/components/users/UserEdit.jsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import Button from 'antd/lib/button';
+import Icon from 'antd/lib/icon';
+import Input from 'antd/lib/input';
+import Tooltip from 'antd/lib/tooltip';
+import Modal from 'antd/lib/modal';
+import { react2angular } from 'react2angular';
+import { User } from '@/services/user';
+import { currentUser } from '@/services/auth';
+import { UserProfile } from '../proptypes';
+import { DynamicForm } from '../dynamic-form/DynamicForm';
+
+export class UserEdit extends React.Component {
+  static propTypes = {
+    user: UserProfile.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { user: this.props.user, changePassword: false };
+  }
+
+  handleSave = (values, onSuccess, onError) => {
+    const data = {
+      id: this.props.user.id,
+      ...values,
+    };
+
+    User.save(data, (user) => {
+      onSuccess('Saved.');
+      this.setState({
+        user: {
+          id: user.id,
+          name: user.name,
+          email: user.email,
+          profileImageUrl: user.profile_image_url,
+          apiKey: user.api_key,
+          isDisabled: user.is_disabled,
+        },
+      });
+    }, (error) => {
+      onError(error.data.message || 'Failed saving.');
+    });
+  };
+
+  openChangePasswordModal = () => {
+    this.setState({ changePassword: true });
+  };
+
+  changePasswordModal() {
+    const fields = [
+      { name: 'old_password', title: 'Current Password' },
+      { name: 'password', title: 'New Password' },
+      { name: 'password_repeat', title: 'Repeat New Password' },
+    ].map(field => ({ ...field, type: 'password', required: true }));
+
+    return (
+      <Modal
+        visible={this.state.changePassword}
+        title="Change Password"
+        onCancel={() => { this.setState({ changePassword: false }); }}
+        footer={null}
+        destroyOnClose
+      >
+        <DynamicForm fields={fields} saveText="Update Password" onSubmit={this.handleSave} />
+      </Modal>
+    );
+  }
+
+  regenerateApiKey = () => {
+    const doRegenerate = () => {
+      User.regenerateApiKey(this.state.user).then(({ data }) => {
+        if (data) {
+          const { user } = this.state;
+          this.setState({ user: { ...user, apiKey: data.api_key } });
+        }
+      });
+    };
+
+    Modal.confirm({
+      title: 'Regenerate API Key',
+      content: 'Are you sure you want to regenerate?',
+      okText: 'Regenerate',
+      onOk: doRegenerate,
+      maskClosable: true,
+      autoFocusButton: null,
+    });
+  };
+
+  renderApiKey() {
+    const { user } = this.state;
+
+    const regenerateButton = (
+      <Tooltip title="Regenerate API Key">
+        <Icon type="reload" style={{ cursor: 'pointer' }} onClick={this.regenerateApiKey} />
+      </Tooltip>
+    );
+
+    return (
+      <div>
+        <hr />
+        <label>API Key</label>
+        <Input addonAfter={regenerateButton} value={user.apiKey} readOnly />
+      </div>
+    );
+  }
+
+  render() {
+    const { user } = this.state;
+
+    const formFields = [
+      {
+        name: 'name',
+        title: 'Name',
+        type: 'text',
+        initialValue: user.name,
+        required: true,
+      },
+      {
+        name: 'email',
+        title: 'Email',
+        type: 'email',
+        initialValue: user.email,
+        required: true,
+      },
+    ];
+
+    return (
+      <div className="col-md-4 col-md-offset-4">
+        <img
+          alt="profile"
+          src={user.profileImageUrl}
+          className="profile__image"
+          width="40"
+        />
+        <h3 className="profile__h3">{user.name}</h3>
+        <hr />
+        <DynamicForm fields={formFields} readOnly={user.isDisabled} onSubmit={this.handleSave} />
+        {this.changePasswordModal()}
+        {!user.isDisabled && (
+          <React.Fragment>
+            {this.renderApiKey()}
+            <hr />
+            <Button className="w-100 m-t-10" onClick={this.openChangePasswordModal}>Change Password</Button>
+            {currentUser.isAdmin && <Button className="w-100 m-t-10">Send Password Reset Email</Button>}
+          </React.Fragment>
+        )}
+      </div>
+    );
+  }
+}
+
+export default function init(ngModule) {
+  ngModule.component('userEdit', react2angular(UserEdit));
+}
+
+init.init = true;

client/app/components/UserShow.jsx → client/app/components/users/UserShow.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import { react2angular } from 'react2angular';
+import { UserProfile } from '../proptypes';
 
-export const UserShow = ({ name, email, profileImageUrl }) => (
+export const UserShow = ({ user: { name, email, profileImageUrl } }) => (
   <div className="col-md-4 col-md-offset-4 profile__container">
     <img
       alt="profile"
@@ -26,9 +25,7 @@ export const UserShow = ({ name, email, profileImageUrl }) => (
 );
 
 UserShow.propTypes = {
-  name: PropTypes.string.isRequired,
-  email: PropTypes.string.isRequired,
-  profileImageUrl: PropTypes.string.isRequired,
+  user: UserProfile.isRequired,
 };
 
 export default function init(ngModule) {

client/app/components/UserShow.test.js → client/app/components/users/UserShow.test.js

@@ -3,8 +3,13 @@ import renderer from 'react-test-renderer';
 import { UserShow } from './UserShow';
 
 test('renders correctly', () => {
-  const component = renderer.create(<UserShow name="John Doe" email="john@doe.com" profileImageUrl="http://www.images.com/llama.jpg" />);
+  const user = {
+    name: 'John Doe',
+    email: 'john@doe.com',
+    profileImageUrl: 'http://www.images.com/llama.jpg',
+  };
+
+  const component = renderer.create(<UserShow user={user} />);
   const tree = component.toJSON();
   expect(tree).toMatchSnapshot();
 });
-

client/app/pages/users/show.html

@@ -3,84 +3,18 @@
 
   <div ng-show="selectedTab == 'profile'">
     <div class="row">
-      <user-show ng-if="!(currentUser.isAdmin || currentUser.id == user.id)" name="user.name" email="user.email" profile-image-url="user.profile_image_url"></user-show>
-      <div class="col-md-4 col-md-offset-4 profile__container" ng-if="(currentUser.isAdmin || currentUser.id == user.id)">
-
-        <img ng-src="{{ user.profile_image_url }}" class="profile__image" width="40">
-
-        <h3 class="profile__h3">{{user.name}}</h3>
-
-        <hr>
-
-        <form class="form" name="userSettingsForm" ng-submit="updateUser(userSettingsForm)" novalidate>
-          <div class="form-group" ng-class="{ 'has-error':  (userSettingsForm.name | showError )}">
-            <label class="control-label" for="name" >Name</label>
-            <input name="name" id="name" type="text" class="form-control" ng-model="user.name" required
-              ng-readonly="user.is_disabled">
-            <error-messages input="userSettingsForm.name" form="userSettingsForm"></error-messages>
-          </div>
-          <div class="form-group" ng-class="{ 'has-error':  (userSettingsForm.email | showError )}">
-            <label class="control-label" for="email" >Email</label>
-            <input name="email" id="email" type="email" class="form-control" ng-model="user.email" required
-              ng-readonly="user.is_disabled">
-            <error-messages input="userSettingsForm.email" form="userSettingsForm"></error-messages>
-          </div>
-          <div class="form-group d-flex justify-content-between" ng-if="!user.is_disabled">
-            <button type="submit" class="btn btn-primary">Save</button>
-            <button type="button" class="btn btn-default" ng-click="disableUser(user)">Disable</button>
-          </div>
-        </form>
+      <user-show ng-if="!(currentUser.isAdmin || currentUser.id == user.id)" user="userInfo"></user-show>
+      <user-edit ng-if="userInfo && (currentUser.isAdmin || currentUser.id == user.id)" user="userInfo"></user-edit>
 
+      <div class="col-md-4 col-md-offset-4 profile__container" ng-if="(currentUser.isAdmin || currentUser.id == user.id)">
         <hr>
 
         <div ng-if="user.is_disabled" class="d-flex justify-content-between align-items-center">
           <strong>This user is disabled.</strong>
           <button type="button" class="btn btn-primary" ng-click="enableUser(user)">Enable</button>
         </div>
 
-        <div ng-if="!user.is_disabled">
-          <div class="form-group">
-            <label class="control-label">API Key</label>
-            <input type="text" class="form-control" value="{{user.api_key}}" size="44" readonly/>
-          </div>
-          <div class="form-group">
-            <button class="btn btn-default" ng-click="regenerateUserApiKey(user)" ng-disabled="disableRegenerateApiKeyButton">Regenerate</button>
-          </div>
-
-          <hr>
-
-          <button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Change password <span class="caret"></span></button>
-
-          <div uib-collapse="isCollapsed">
-            <div class="well">
-              <form class="form" name="userPasswordForm" ng-submit="savePassword(userPasswordForm)" novalidate>
-                <div class="form-group required" ng-class="{ 'has-error':  (userPasswordForm.currentPassword | showError:userPasswordForm )}">
-                  <label class="control-label">Current Password</label>
-                  <input name="currentPassword" class="form-control" type="password" ng-model="password.current" required/>
-                  <error-messages input="userPasswordForm.currentPassword" form="userPasswordForm"></error-messages>
-                </div>
-                <div class="form-group required" ng-class="{ 'has-error':  (userPasswordForm.newPassword | showError:userPasswordForm )}">
-                  <label class="control-label">New Password</label>
-                  <input name="newPassword" class="form-control" type="password" ng-model="password.new" ng-minlength="6"
-                         required/>
-                  <error-messages input="userPasswordForm.newPassword" form="userPasswordForm"></error-messages>
-                </div>
-                <div class="form-group required" ng-class="{ 'has-error':  (userPasswordForm.passwordRepeat | showError:userPasswordForm )}">
-                  <label class="control-label">Repeat New Password</label>
-                  <input name="passwordRepeat" class="form-control" type="password" ng-model="password.newRepeat"
-                         compare-to="password.new"/>
-                  <span class="help-block error"
-                        ng-if="userPasswordForm.passwordRepeat.$error.compareTo">Passwords don't match.</span>
-                </div>
-                <div class="form-group">
-                  <button class="btn btn-primary">Set new password</button>
-                </div>
-              </form>
-            </div>
-          </div>
-
           <div ng-if="currentUser.isAdmin">
-            <br>
             <div class="form-group">
               <button class="btn btn-default" ng-if="!user.is_invitation_pending" ng-click="sendPasswordReset()" ng-disabled="disablePasswordResetButton">Send
                 Password Reset Email