Migrate User Pages to React

client/app/components/EmailSettingsWarning.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import { currentUser, clientConfig } from '@/services/auth';
+
+export function EmailSettingsWarning({ featureName }) {
+  return (clientConfig.mailSettingsMissing && currentUser.isAdmin) ? (
+    <p className="alert alert-danger">
+      {`It looks like your mail server isn't configured. Make sure to configure it for the ${featureName} to work.`}
+    </p>
+  ) : null;
+}
+
+EmailSettingsWarning.propTypes = {
+  featureName: PropTypes.string.isRequired,
+};
+
+export default function init(ngModule) {
+  ngModule.component('emailSettingsWarning', react2angular(EmailSettingsWarning));
+}
+
+init.init = true;

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

@@ -16,10 +16,12 @@ import helper from './dynamicFormHelper';
 const fieldRules = ({ type, required, minLength }) => {
   const requiredRule = required;
   const minLengthRule = minLength && includes(['text', 'email', 'password'], type);
+  const emailTypeRule = type === 'email';
 
   return [
     requiredRule && { required, message: 'This field is required.' },
     minLengthRule && { min: minLength, message: 'This field is too short.' },
+    emailTypeRule && { type: 'email', message: 'This field must be a valid email.' },
   ].filter(rule => rule);
 };
 
@@ -167,6 +169,7 @@ export const DynamicForm = Form.create()(class DynamicForm extends React.Compone
       };
 
       const fieldProps = {
+        ...field.props,
         autoFocus: (firstField === field),
         className: 'w-100',
         name,

client/app/components/proptypes.js

@@ -40,6 +40,7 @@ export const Field = PropTypes.shape({
   readOnly: PropTypes.bool,
   minLength: PropTypes.number,
   placeholder: PropTypes.string,
+  props: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 });
 
 export const Action = PropTypes.shape({

client/app/components/users/CreateUserDialog.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Modal from 'antd/lib/modal';
+import Alert from 'antd/lib/alert';
+import { DynamicForm } from '@/components/dynamic-form/DynamicForm';
+import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
+import recordEvent from '@/services/recordEvent';
+
+class CreateUserDialog extends React.Component {
+  static propTypes = {
+    dialog: DialogPropType.isRequired,
+    onCreate: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { savingUser: false, errorMessage: null };
+    this.form = React.createRef();
+  }
+
+  componentDidMount() {
+    recordEvent('view', 'page', 'users/new');
+  }
+
+  createUser = () => {
+    this.form.current.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        this.setState({ savingUser: true });
+        this.props.onCreate(values).then(() => {
+          this.props.dialog.close();
+        }).catch((error) => {
+          this.setState({ savingUser: false, errorMessage: error.message });
+        });
+      }
+    });
+  };
+
+  render() {
+    const { savingUser, errorMessage } = this.state;
+    const formFields = [
+      { name: 'name', title: 'Name', type: 'text' },
+      { name: 'email', title: 'Email', type: 'email' },
+    ].map(field => ({ required: true, props: { onPressEnter: this.createUser }, ...field }));
+
+    return (
+      <Modal
+        {...this.props.dialog.props}
+        title="Create a New User"
+        okText="Create"
+        okButtonProps={{ loading: savingUser }}
+        onOk={() => this.createUser()}
+      >
+        <DynamicForm fields={formFields} ref={this.form} hideSubmitButton />
+        {errorMessage && <Alert message={errorMessage} type="error" showIcon />}
+      </Modal>
+    );
+  }
+}
+
+export default wrapDialog(CreateUserDialog);

client/app/components/users/UserEdit.jsx

@@ -3,7 +3,6 @@ import Alert from 'antd/lib/alert';
 import Button from 'antd/lib/button';
 import Form from 'antd/lib/form';
 import Modal from 'antd/lib/modal';
-import { react2angular } from 'react2angular';
 import { User } from '@/services/user';
 import { currentUser } from '@/services/auth';
 import { absoluteUrl } from '@/services/utils';
@@ -12,7 +11,7 @@ import { DynamicForm } from '../dynamic-form/DynamicForm';
 import ChangePasswordDialog from './ChangePasswordDialog';
 import InputWithCopy from '../InputWithCopy';
 
-export class UserEdit extends React.Component {
+export default class UserEdit extends React.Component {
   static propTypes = {
     user: UserProfile.isRequired,
   };
@@ -35,8 +34,8 @@ export class UserEdit extends React.Component {
   sendPasswordReset = () => {
     this.setState({ sendingPasswordEmail: true });
 
-    User.sendPasswordReset(this.state.user).then((passwordResetLink) => {
-      this.setState({ passwordResetLink });
+    User.sendPasswordReset(this.state.user).then((passwordLink) => {
+      this.setState({ passwordLink });
     }).finally(() => {
       this.setState({ sendingPasswordEmail: false });
     });
@@ -45,7 +44,9 @@ export class UserEdit extends React.Component {
   resendInvitation = () => {
     this.setState({ resendingInvitation: true });
 
-    User.resendInvitation(this.state.user).finally(() => {
+    User.resendInvitation(this.state.user).then((passwordLink) => {
+      this.setState({ passwordLink });
+    }).finally(() => {
       this.setState({ resendingInvitation: false });
     });
   };
@@ -149,7 +150,7 @@ export class UserEdit extends React.Component {
   }
 
   renderPasswordLinkAlert() {
-    const { user, passwordResetLink } = this.state;
+    const { user, passwordLink } = this.state;
 
     return (
       <Alert
@@ -158,14 +159,14 @@ export class UserEdit extends React.Component {
           <Fragment>
             <p>
               The mail server is not configured, please send the following link
-              to <b>{user.name}</b> to reset their password:
+              to <b>{user.name}</b>:
             </p>
-            <InputWithCopy value={absoluteUrl(passwordResetLink)} readOnly />
+            <InputWithCopy value={absoluteUrl(passwordLink)} readOnly />
           </Fragment>
         )}
         type="warning"
         className="m-t-20"
-        afterClose={() => { this.setState({ passwordResetLink: null }); }}
+        afterClose={() => { this.setState({ passwordLink: null }); }}
         closable
       />
     );
@@ -184,7 +185,7 @@ export class UserEdit extends React.Component {
   }
 
   renderSendPasswordReset() {
-    const { sendingPasswordEmail, passwordResetLink } = this.state;
+    const { sendingPasswordEmail } = this.state;
 
     return (
       <Fragment>
@@ -195,7 +196,6 @@ export class UserEdit extends React.Component {
         >
           Send Password Reset Email
         </Button>
-        {passwordResetLink && this.renderPasswordLinkAlert()}
       </Fragment>
     );
   }
@@ -215,7 +215,7 @@ export class UserEdit extends React.Component {
   }
 
   render() {
-    const { user } = this.state;
+    const { user, passwordLink } = this.state;
 
     return (
       <div className="col-md-4 col-md-offset-4">
@@ -239,8 +239,11 @@ export class UserEdit extends React.Component {
               </Button>
             )}
             {(currentUser.isAdmin && user.id !== currentUser.id) && (
-              user.isInvitationPending ?
-                this.renderResendInvitation() : this.renderSendPasswordReset()
+              <Fragment>
+                {user.isInvitationPending ?
+                  this.renderResendInvitation() : this.renderSendPasswordReset()}
+                {passwordLink && this.renderPasswordLinkAlert()}
+              </Fragment>
             )}
           </Fragment>
         )}
@@ -250,9 +253,3 @@ export class UserEdit extends React.Component {
     );
   }
 }
-
-export default function init(ngModule) {
-  ngModule.component('userEdit', react2angular(UserEdit));
-}
-
-init.init = true;

client/app/components/users/UserShow.jsx

@@ -1,35 +1,30 @@
 import React from 'react';
-import { react2angular } from 'react2angular';
 import { UserProfile } from '../proptypes';
 
-export const UserShow = ({ user: { name, email, profileImageUrl } }) => (
-  <div className="col-md-4 col-md-offset-4 profile__container">
-    <img
-      alt="profile"
-      src={profileImageUrl}
-      className="profile__image"
-      width="40"
-    />
+export default function UserShow({ user: { name, email, profileImageUrl } }) {
+  return (
+    <div className="col-md-4 col-md-offset-4 profile__container">
+      <img
+        alt="profile"
+        src={profileImageUrl}
+        className="profile__image"
+        width="40"
+      />
 
-    <h3 className="profile__h3">{name}</h3>
+      <h3 className="profile__h3">{name}</h3>
 
-    <hr />
+      <hr />
 
-    <dl className="profile__dl">
-      <dt>Name:</dt>
-      <dd>{name}</dd>
-      <dt>Email:</dt>
-      <dd>{email}</dd>
-    </dl>
-  </div>
-);
+      <dl className="profile__dl">
+        <dt>Name:</dt>
+        <dd>{name}</dd>
+        <dt>Email:</dt>
+        <dd>{email}</dd>
+      </dl>
+    </div>
+  );
+}
 
 UserShow.propTypes = {
   user: UserProfile.isRequired,
 };
-
-export default function init(ngModule) {
-  ngModule.component('userShow', react2angular(UserShow));
-}
-
-init.init = true;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { UserShow } from './UserShow';
+import UserShow from './UserShow';
 
 test('renders correctly', () => {
   const user = {

client/app/pages/alert/alert.html

@@ -1,7 +1,7 @@
 <div class="container">
   <page-header title="$ctrl.alert.name || $ctrl.getDefaultName() || 'New Alert'"></page-header>
 
-  <email-settings-warning function="'alert emails'"></email-settings-warning>
+  <email-settings-warning feature-name="'alert emails'"></email-settings-warning>
 
   <div class="container">
     <div class="row bg-white tiled p-10">

client/app/pages/users/UserProfile.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { react2angular } from 'react2angular';
+
+import { EmailSettingsWarning } from '@/components/EmailSettingsWarning';
+import UserEdit from '@/components/users/UserEdit';
+import UserShow from '@/components/users/UserShow';
+import LoadingState from '@/components/items-list/components/LoadingState';
+
+import { User } from '@/services/user';
+import settingsMenu from '@/services/settingsMenu';
+import { $route } from '@/services/ng';
+import { currentUser } from '@/services/auth';
+import './settings.less';
+
+class UserProfile extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { user: null };
+  }
+
+  componentDidMount() {
+    const userId = $route.current.params.userId || currentUser.id;
+    User.get({ id: userId }, user => this.setState({ user: User.convertUserInfo(user) }));
+  }
+
+  render() {
+    const { user } = this.state;
+    const canEdit = user && (currentUser.isAdmin || currentUser.id === user.id);
+    const UserComponent = canEdit ? UserEdit : UserShow;
+    return (
+      <React.Fragment>
+        <EmailSettingsWarning featureName="invite emails" />
+        <div className="row">
+          {user ? <UserComponent user={user} /> : <LoadingState className="" />}
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+export default function init(ngModule) {
+  settingsMenu.add({
+    title: 'Account',
+    path: 'users/me',
+    order: 7,
+  });
+
+  ngModule.component('pageUserProfile', react2angular(UserProfile));
+}
+
+init.init = true;