Updated settings components.

components/pages/settings/profile/ChangePasswordButton.js

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, Icon, Modal, useToast } from 'react-basics';
+import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
+import { Lock } from 'components/icons';
+
+const messages = defineMessages({
+  changePassword: { id: 'label.change-password', defaultMessage: 'Change password' },
+  saved: { id: 'message.saved-successfully', defaultMessage: 'Saved successfully.' },
+});
+
+export default function ChangePasswordButton() {
+  const { formatMessage } = useIntl();
+  const [edit, setEdit] = useState(false);
+  const { toast, showToast } = useToast();
+
+  const handleSave = () => {
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+    setEdit(false);
+  };
+
+  const handleAdd = () => {
+    setEdit(true);
+  };
+
+  const handleClose = () => {
+    setEdit(false);
+  };
+
+  return (
+    <>
+      {toast}
+      <Button onClick={handleAdd}>
+        <Icon>
+          <Lock />
+        </Icon>
+        Change Password
+      </Button>
+      {edit && (
+        <Modal title={formatMessage(messages.changePassword)} onClose={handleClose}>
+          {() => <PasswordEditForm onSave={handleSave} onClose={handleClose} />}
+        </Modal>
+      )}
+    </>
+  );
+}

components/pages/settings/profile/PasswordEditForm.js

@@ -0,0 +1,76 @@
+import { useRef } from 'react';
+import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
+import useApi from 'hooks/useApi';
+import useUser from 'hooks/useUser';
+
+export default function PasswordEditForm({ userId, onSave, onClose }) {
+  const user = useUser();
+  const isCurrentUser = !userId || user?.id === userId;
+  const url = isCurrentUser ? `/users/${user?.id}/password` : `/users/${user?.id}`;
+  const { post, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post(url, data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    const payload = isCurrentUser
+      ? data
+      : {
+          password: data.newPassword,
+        };
+
+    mutate(payload, {
+      onSuccess: async () => {
+        onSave();
+        ref.current.reset();
+      },
+    });
+  };
+
+  const samePassword = value => {
+    if (value !== ref?.current?.getValues('newPassword')) {
+      return "Passwords don't match";
+    }
+    return true;
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
+      {isCurrentUser && (
+        <FormRow label="Current password">
+          <FormInput name="currentPassword" rules={{ required: 'Required' }}>
+            <PasswordField autoComplete="off" />
+          </FormInput>
+        </FormRow>
+      )}
+      <FormRow label="New password">
+        <FormInput
+          name="newPassword"
+          rules={{
+            required: 'Required',
+            minLength: { value: 8, message: 'Minimum length 8 characters' },
+          }}
+        >
+          <PasswordField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label="Confirm password">
+        <FormInput
+          name="confirmPassword"
+          rules={{
+            required: 'Required',
+            minLength: { value: 8, message: 'Minimum length 8 characters' },
+            validate: samePassword,
+          }}
+        >
+          <PasswordField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <Button type="submit" variant="primary" disabled={isLoading}>
+          Save
+        </Button>
+        <Button onClick={onClose}>Close</Button>
+      </FormButtons>
+    </Form>
+  );
+}

components/pages/settings/profile/ProfileSettings.js

@@ -1,48 +1,26 @@
+import { Breadcrumbs, Item } from 'react-basics';
+import { defineMessages, useIntl } from 'react-intl';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import ProfileDetails from 'components/pages/settings/profile/ProfileDetails';
-import { useState } from 'react';
-import { Breadcrumbs, Icon, Item, useToast, Modal, Button } from 'react-basics';
-import UserPasswordForm from 'components/pages/settings/users/UserPasswordForm';
-import Lock from 'assets/lock.svg';
+import ProfileDetails from './ProfileDetails';
+import ChangePasswordButton from './ChangePasswordButton';
+
+const messages = defineMessages({
+  profile: { id: 'label.profile', defaultMessage: 'Profile' },
+});
 
 export default function ProfileSettings() {
-  const [edit, setEdit] = useState(false);
-  const { toast, showToast } = useToast();
-
-  const handleSave = () => {
-    showToast({ message: 'Saved successfully.', variant: 'success' });
-    setEdit(false);
-  };
-
-  const handleAdd = () => {
-    setEdit(true);
-  };
-
-  const handleClose = () => {
-    setEdit(false);
-  };
+  const { formatMessage } = useIntl();
 
   return (
     <Page>
-      {toast}
       <PageHeader>
         <Breadcrumbs>
-          <Item>Profile</Item>
+          <Item>{formatMessage(messages.profile)}</Item>
         </Breadcrumbs>
-        <Button onClick={handleAdd}>
-          <Icon>
-            <Lock />
-          </Icon>
-          Change Password
-        </Button>
+        <ChangePasswordButton />
       </PageHeader>
       <ProfileDetails />
-      {edit && (
-        <Modal title="Change password" onClose={handleClose}>
-          {close => <UserPasswordForm onSave={handleSave} onClose={close} />}
-        </Modal>
-      )}
     </Page>
   );
 }