User management extras (#141)

* Add password confirmation.

* Move user form page to components.

* Add settings page to update active user's profile.

* Switch app user management to use context.

* Use contexts to update current user after their profile is updated

src/api/active-user.ts

@@ -20,8 +20,8 @@ class API extends BaseAPI {
       });
     } else if (DEPLOYMENT_MODE === Constants.STANDALONE_DEPLOYMENT_MODE) {
       return new Promise((resolve, reject) => {
-        super
-          .list()
+        this.http
+          .get(this.apiPath)
           .then(result => {
             resolve(result.data);
           })
@@ -30,6 +30,10 @@ class API extends BaseAPI {
     }
   }
 
+  saveUser(data) {
+    return this.http.put(this.apiPath, data);
+  }
+
   // insights has some asinine way of loading tokens that involves forcing the
   // page to refresh before loading the token that can't be done witha single
   // API request.

src/components/index.ts

@@ -36,3 +36,4 @@ export {
 export { APIButton } from './api-button/api-button';
 export { Main } from './patternfly-wrappers/main';
 export { UserForm } from './user-form/user-form';
+export { UserFormPage } from './user-form/user-form-page';

src/components/patternfly-wrappers/compound-filter.tsx

@@ -156,6 +156,7 @@ export class CompoundFilter extends React.Component<IProps, IState> {
       default:
         return (
           <TextInput
+            aria-label={selectedFilter.id}
             placeholder={
               selectedFilter.placeholder || `Filter by ${selectedFilter.title}`
             }

src/containers/user-management/user-form-page.tsx → src/components/user-form/user-form-page.tsx

@@ -18,14 +18,6 @@ interface IProps {
   onCancel?: () => void;
 }
 
-export function mapErrorMessages(err) {
-  const messages: any = {};
-  for (const e of err.response.data.errors) {
-    messages[e.source.parameter] = e.detail;
-  }
-  return messages;
-}
-
 export class UserFormPage extends React.Component<IProps> {
   public static defaultProps = {
     extraControls: null,

src/components/user-form/user-form.tsx

@@ -33,23 +33,51 @@ interface IProps {
   onCancel?: () => void;
 }
 
-export class UserForm extends React.Component<IProps> {
+interface IState {
+  passwordConfirm: string;
+}
+
+export class UserForm extends React.Component<IProps, IState> {
   public static defaultProps = {
     isReadonly: false,
+    requiredFields: ['username', 'password'],
   };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      passwordConfirm: '',
+    };
+  }
+
   render() {
-    const { user, errorMessages, isReadonly, saveUser, onCancel } = this.props;
+    const {
+      user,
+      errorMessages,
+      isReadonly,
+      saveUser,
+      onCancel,
+      requiredFields,
+    } = this.props;
+    const { passwordConfirm } = this.state;
     const formFields = [
       { id: 'first_name', title: 'First name' },
       { id: 'last_name', title: 'Last name' },
       { id: 'email', title: 'Email' },
       { id: 'username', title: 'Username' },
-      { id: 'password', title: 'Password', type: 'password' },
+      {
+        id: 'password',
+        title: 'Password',
+        type: 'password',
+        placeholder: '••••••••••••••••••••••',
+      },
     ];
     return (
       <Form>
         {formFields.map(v => (
           <FormGroup
+            isRequired={requiredFields.includes(v.id)}
             key={v.id}
             fieldId={v.id}
             label={v.title}
@@ -59,15 +87,37 @@ export class UserForm extends React.Component<IProps> {
             <TextInput
               isDisabled={isReadonly}
               id={v.id}
+              placeholder={v.placeholder}
               value={user[v.id]}
               onChange={this.updateField}
               type={(v.type as any) || 'text'}
             />
           </FormGroup>
         ))}
+        <FormGroup
+          fieldId={'password-confirm'}
+          label={'Password confirmation'}
+          helperTextInvalid={'Passwords do not match'}
+          isValid={this.isPassSame(user.password, passwordConfirm)}
+        >
+          <TextInput
+            isDisabled={isReadonly}
+            id={'password-confirm'}
+            value={passwordConfirm}
+            onChange={(value, event) => {
+              this.setState({ passwordConfirm: value });
+            }}
+            type='password'
+          />
+        </FormGroup>
         {!isReadonly && (
           <ActionGroup>
-            <Button onClick={() => saveUser()}>Save</Button>
+            <Button
+              isDisabled={!this.isPassSame(user.password, passwordConfirm)}
+              onClick={() => saveUser()}
+            >
+              Save
+            </Button>
             <Button onClick={() => onCancel()} variant='link'>
               Cancel
             </Button>
@@ -77,6 +127,10 @@ export class UserForm extends React.Component<IProps> {
     );
   }
 
+  private isPassSame(pass, confirm) {
+    return !pass || pass === '' || pass === confirm;
+  }
+
   private updateField = (value, event) => {
     const update = { ...this.props.user };
     update[event.target.id] = value;

src/containers/edit-namespace/edit-namespace.tsx

@@ -18,7 +18,7 @@ import { Constants } from '../../constants';
 import { Form, ActionGroup, Button } from '@patternfly/react-core';
 
 import { Paths, formatPath } from '../../paths';
-import { ParamHelper } from '../../utilities/param-helper';
+import { ParamHelper, mapErrorMessages } from '../../utilities';
 
 interface IState {
   namespace: NamespaceType;
@@ -198,13 +198,8 @@ class EditNamespace extends React.Component<RouteComponentProps, IState> {
         .catch(error => {
           const result = error.response;
           if (result.status === 400) {
-            const messages: any = {};
-            for (const e of result.data.errors) {
-              messages[e.source.parameter] = e.detail;
-            }
-
             this.setState({
-              errorMessages: messages,
+              errorMessages: mapErrorMessages(error),
               saving: false,
             });
           } else if (result.status === 404) {

src/containers/index.ts

@@ -18,3 +18,4 @@ export { default as UserList } from './user-management/user-list';
 export { default as EditUser } from './user-management/user-edit';
 export { default as UserDetail } from './user-management/user-detail';
 export { default as UserCreate } from './user-management/user-create';
+export { default as UserProfile } from './settings/user-profile';

src/containers/settings/user-profile.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { withRouter, RouteComponentProps, Link } from 'react-router-dom';
+
+import { Button } from '@patternfly/react-core';
+
+import {
+  LoadingPageWithHeader,
+  UserFormPage,
+  AlertType,
+  AlertList,
+  closeAlertMixin,
+} from '../../components';
+import { UserType, ActiveUserAPI } from '../../api';
+import { Paths } from '../../paths';
+import { mapErrorMessages } from '../../utilities';
+import { AppContext } from '../../loaders/standalone/app-context';
+
+interface IState {
+  user: UserType;
+  errorMessages: object;
+  inEditMode: boolean;
+  alerts: AlertType[];
+}
+
+class UserProfile extends React.Component<RouteComponentProps, IState> {
+  private initialState: UserType;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      user: undefined,
+      errorMessages: {},
+      inEditMode: false,
+      alerts: [],
+    };
+  }
+
+  componentDidMount() {
+    const id = this.props.match.params['userID'];
+    ActiveUserAPI.getUser()
+      .then(result => {
+        // The api doesn't return a value for the password, so set a blank one here
+        // to keep react from getting confused
+        result.password = '';
+        this.initialState = { ...result };
+        this.setState({ user: result });
+      })
+      .catch(() => this.props.history.push(Paths.notFound));
+  }
+
+  render() {
+    const { user, errorMessages, inEditMode, alerts } = this.state;
+
+    if (!user) {
+      return <LoadingPageWithHeader></LoadingPageWithHeader>;
+    }
+    return (
+      <>
+        <AlertList
+          alerts={alerts}
+          closeAlert={i => this.closeAlert(i)}
+        ></AlertList>
+        <UserFormPage
+          user={user}
+          breadcrumbs={[{ name: 'Settings' }, { name: 'My profile' }]}
+          title='My profile'
+          errorMessages={errorMessages}
+          updateUser={user => this.setState({ user: user })}
+          saveUser={this.saveUser}
+          isReadonly={!inEditMode}
+          onCancel={() =>
+            this.setState({
+              user: this.initialState,
+              inEditMode: false,
+              errorMessages: {},
+            })
+          }
+          extraControls={
+            !inEditMode && (
+              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                <div>
+                  <Button onClick={() => this.setState({ inEditMode: true })}>
+                    Edit
+                  </Button>
+                </div>
+              </div>
+            )
+          }
+        ></UserFormPage>
+      </>
+    );
+  }
+
+  private saveUser = () => {
+    const { user } = this.state;
+    ActiveUserAPI.saveUser(user)
+      .then(result => {
+        this.setState(
+          {
+            inEditMode: false,
+            alerts: this.state.alerts.concat([
+              { variant: 'success', title: 'Profile saved.' },
+            ]),
+          },
+          () => this.context.setUser(result.data),
+        );
+      })
+      .catch(err => {
+        this.setState({ errorMessages: mapErrorMessages(err) });
+      });
+  };
+
+  private get closeAlert() {
+    return closeAlertMixin('alerts');
+  }
+}
+
+export default withRouter(UserProfile);
+
+// For some reason react complains about setting context type in the class itself.
+// I think that it happens because withRouter confuses react into thinking that the
+// component is a functional compent when it's actually a class component.
+UserProfile.contextType = AppContext;

src/containers/user-management/user-create.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { UserFormPage, mapErrorMessages } from './user-form-page';
+import { UserFormPage } from '../../components';
+import { mapErrorMessages } from '../../utilities';
 import { UserType, UserAPI } from '../../api';
 import { Paths } from '../../paths';
 

src/containers/user-management/user-detail.tsx

@@ -8,8 +8,8 @@ import {
   AlertType,
   AlertList,
   closeAlertMixin,
+  UserFormPage,
 } from '../../components';
-import { UserFormPage } from './user-form-page';
 import { UserType, UserAPI } from '../../api';
 import { Paths, formatPath } from '../../paths';
 import { DeleteUserModal } from './delete-user-modal';

src/containers/user-management/user-edit.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { LoadingPageWithHeader } from '../../components';
-import { UserFormPage, mapErrorMessages } from './user-form-page';
+import { LoadingPageWithHeader, UserFormPage } from '../../components';
+import { mapErrorMessages } from '../../utilities';
 import { UserType, UserAPI } from '../../api';
 import { Paths, formatPath } from '../../paths';
 

src/loaders/standalone/app-context.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { UserType } from '../../api';
+
+interface IAppContextType {
+  user: UserType;
+  setUser: (user: UserType) => void;
+}
+
+export const AppContext = React.createContext<IAppContextType>(undefined);