update UI to match current repo standards

ui/src/Pages/SettingsPage/Users/PasswordChange.tsx

@@ -1,11 +1,13 @@
 import React, { useState } from 'react'
 import { Button, TextField } from '../../../primitives/form/Input'
-import { ApolloError, gql, useMutation } from '@apollo/client'
+import { gql, useMutation } from '@apollo/client'
 import {
   updatePassword,
   updatePasswordVariables,
 } from './__generated__/updatePassword'
 import { SectionTitle } from '../SettingsPage'
+import { useTranslation } from 'react-i18next'
+import MessageBox from '../../../primitives/form/MessageBox'
 
 export const USER_CHANGE_PASSWORD_MUTATION = gql`
   mutation updatePassword($currentPassword: String!, $newPassword: String!) {
@@ -25,28 +27,11 @@ const initialState = {
   currentPassword: '',
 }
 
-const errorMessage = (
-  data: updatePassword | null | undefined,
-  error: ApolloError | undefined
-) => {
-  return (
-    <div>
-      {error && <span>Something went wrong</span>}
-      {data &&
-        data.updatePassword &&
-        (data.updatePassword.success ? (
-          <span>Successfully updated password</span>
-        ) : (
-          <span style={{ color: 'red' }}>{data.updatePassword.message}</span>
-        ))}
-    </div>
-  )
-}
-
 const PasswordChange = () => {
   const [state, setState] = useState(initialState)
+  const { t } = useTranslation()
 
-  const [updatePassword, { data, error }] = useMutation<
+  const [updatePassword, { data, reset }] = useMutation<
     updatePassword,
     updatePasswordVariables
   >(USER_CHANGE_PASSWORD_MUTATION, {
@@ -61,53 +46,96 @@ const PasswordChange = () => {
     event: React.ChangeEvent<HTMLInputElement>,
     key: string
   ) {
+    reset()
     setState({
       ...state,
       [key]: event.target.value,
     })
   }
 
+  const newPasswordsMatch = state.password1 === state.password2
+
+  function statusMessages() {
+    let type: 'negative' | 'neutral' | 'positive' = 'negative'
+    let message = t(
+      'settings.user.password_reset.form.mismatch',
+      'Passwords do not match'
+    )
+    const dataExists = !!data?.updatePassword
+
+    if (dataExists && data.updatePassword.success) {
+      type = 'positive'
+      message = t(
+        'settings.user.password_reset.form.success',
+        'Password changed successfully'
+      )
+    }
+
+    if (
+      dataExists &&
+      !data.updatePassword.success &&
+      data.updatePassword.message
+    ) {
+      message = data.updatePassword.message
+    }
+
+    return (
+      <MessageBox
+        type={type}
+        message={message}
+        show={dataExists || !newPasswordsMatch}
+      />
+    )
+  }
+
   return (
     <div>
-      {/* TODO Add password confirmation field. */}
-      <SectionTitle nospace>Change Password</SectionTitle>
+      <SectionTitle nospace>
+        {t('settings.user.password_reset.title', 'Change password')}
+      </SectionTitle>
       <TextField
         type="password"
-        label="current password"
+        label={t(
+          'settings.user.password_reset.form.current_password',
+          'Current password'
+        )}
         value={state.currentPassword}
         onChange={e => updateInput(e, 'currentPassword')}
       />
       <TextField
         type="password"
-        label="new password"
+        label={t(
+          'settings.user.password_reset.form.new_password',
+          'New password'
+        )}
         value={state.password1}
         onChange={e => updateInput(e, 'password1')}
       />
       <TextField
         type="password"
-        label="confirm password"
+        label={t(
+          'settings.user.password_reset.form.confirm_password',
+          'Confirm password'
+        )}
         value={state.password2}
         onChange={e => updateInput(e, 'password2')}
       />
-      {(state.password1 !== state.password2 && (
-        <span style={{ color: 'red' }}>Passwords do not match</span>
-      )) ||
-        (state.password1 !== '' && (
-          <Button
-            style={{ marginTop: '5px' }}
-            onClick={() =>
-              updatePassword({
-                variables: {
-                  currentPassword: state.currentPassword,
-                  newPassword: state.password1,
-                },
-              })
-            }
-          >
-            Update Password
-          </Button>
-        ))}
-      {errorMessage(data, error)}
+      {statusMessages()}
+      {state.password1 !== '' && newPasswordsMatch && (
+        <Button
+          style={{ marginTop: '5px' }}
+          onClick={() =>
+            updatePassword({
+              variables: {
+                currentPassword: state.currentPassword,
+                newPassword: state.password1,
+              },
+            })
+          }
+        >
+          {t('settings.user.password_reset.form.submit', 'Change Password')}
+        </Button>
+      )}
     </div>
   )
 }

ui/src/extractedTranslations/en/translation.json

@@ -170,6 +170,20 @@
       },
       "title": "User preferences"
     },
+    "user": {
+      "password_reset": {
+        "form": {
+          "current_password": "Current password",
+          "new_password": "New password",
+          "confirm_password": "New password",
+          "placeholder": "password",
+          "submit": "Change password",
+          "success": "Password changed successfully",
+          "mismatch": "Passwords do not match"
+        },
+        "title": "Change password"
+      }
+    },
     "users": {
       "add_user": {
         "submit": "Add user"
@@ -183,6 +197,9 @@
         "description": "Change password for <1>{{username}}</1>",
         "form": {
           "label": "New password",
+          "current_password": "Current password",
+          "new_password": "New password",
+          "confirm_password": "New password",
           "placeholder": "password",
           "submit": "Change password"
         },