update UI to match current repo standards
This commit is contained in:
parent
a3b25f4afa
commit
9abd61e14d
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue