Add password changing form to frontend, no route yet

frontend/src/components/Person/Tabs/PasswordForm.tsx

@@ -0,0 +1,45 @@
+import { Button, Grid, TextField } from '@mui/material'
+import { useState } from 'react'
+
+export const PasswordForm = () => {
+  const [oldPassword, setOldPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [verifyPassword, setVerifyPassword] = useState('')
+  const sx = { display: 'flex', alignItems: 'center', width: '10em', fontWeight: 'bold' }
+
+  const changePassword = () => {
+    if (newPassword !== verifyPassword) {
+      return
+    }
+  }
+
+  return (
+    <Grid container direction="column" sx={{ rowGap: '1em' }}>
+      <Grid container direction="row">
+        <Grid item sx={sx}>
+          Old password:
+        </Grid>
+        <TextField type="password" value={oldPassword} onChange={event => setOldPassword(event.target.value)} />
+      </Grid>
+      <Grid container direction="row">
+        <Grid item sx={sx}>
+          New password:
+        </Grid>
+        <TextField type="password" value={newPassword} onChange={event => setNewPassword(event.target.value)} />
+      </Grid>
+      <Grid container direction="row">
+        <Grid item sx={sx}>
+          New password again:
+        </Grid>
+        <TextField type="password" value={verifyPassword} onChange={event => setVerifyPassword(event.target.value)} />
+      </Grid>
+      <Grid container direction="row">
+        <Grid item width="27em">
+          <Button fullWidth sx={{ height: '4em' }} variant="contained" onClick={changePassword}>
+            Change password
+          </Button>
+        </Grid>
+      </Grid>
+    </Grid>
+  )
+}

frontend/src/components/Person/Tabs/PersonTab.tsx

@@ -1,9 +1,14 @@
 import { PersonDetailsType } from '@/backendTypes'
-import { ArrayFrame } from '../../DetailView/common/tabLayoutHelpers'
+import { ArrayFrame, Grouped } from '../../DetailView/common/tabLayoutHelpers'
 import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
+import { formatLastLoginDate } from '@/common'
+import { useUser } from '@/hooks/user'
+import { Box, TextField } from '@mui/material'
+import { PasswordForm } from './PasswordForm'
 
 export const PersonTab = () => {
   const { textField, data } = useDetailContext<PersonDetailsType>()
+  const currentUser = useUser()
 
   const person = [
     ['Initials', textField('initials')],
@@ -14,11 +19,11 @@ export const PersonTab = () => {
     ['Country', textField('country')],
   ]
   const lastLogin = data.user?.last_login
-  const dateFormat = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long', day: 'numeric' })
+
   const user = data.user
     ? [
         ['User Name', data.user?.user_name ?? ''],
-        ['Last log in', lastLogin ? dateFormat.format(new Date(lastLogin)) : 'No data'],
+        ['Last log in', lastLogin ? formatLastLoginDate(lastLogin) : 'No data'],
         ['User Group', data.user?.now_user_group ?? ''],
       ]
     : [['Not a user']]
@@ -27,6 +32,11 @@ export const PersonTab = () => {
     <>
       <ArrayFrame array={person} title="Person" />
       <ArrayFrame array={user} title="User" />
+      {currentUser.initials === data.initials && (
+        <Grouped title="Change password">
+          <PasswordForm />
+        </Grouped>
+      )}
     </>
   )
 }