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 React, { useState } from 'react'
|
||||||
import { Button, TextField } from '../../../primitives/form/Input'
|
import { Button, TextField } from '../../../primitives/form/Input'
|
||||||
import { ApolloError, gql, useMutation } from '@apollo/client'
|
import { gql, useMutation } from '@apollo/client'
|
||||||
import {
|
import {
|
||||||
updatePassword,
|
updatePassword,
|
||||||
updatePasswordVariables,
|
updatePasswordVariables,
|
||||||
} from './__generated__/updatePassword'
|
} from './__generated__/updatePassword'
|
||||||
import { SectionTitle } from '../SettingsPage'
|
import { SectionTitle } from '../SettingsPage'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import MessageBox from '../../../primitives/form/MessageBox'
|
||||||
|
|
||||||
export const USER_CHANGE_PASSWORD_MUTATION = gql`
|
export const USER_CHANGE_PASSWORD_MUTATION = gql`
|
||||||
mutation updatePassword($currentPassword: String!, $newPassword: String!) {
|
mutation updatePassword($currentPassword: String!, $newPassword: String!) {
|
||||||
|
@ -25,28 +27,11 @@ const initialState = {
|
||||||
currentPassword: '',
|
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 PasswordChange = () => {
|
||||||
const [state, setState] = useState(initialState)
|
const [state, setState] = useState(initialState)
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
const [updatePassword, { data, error }] = useMutation<
|
const [updatePassword, { data, reset }] = useMutation<
|
||||||
updatePassword,
|
updatePassword,
|
||||||
updatePasswordVariables
|
updatePasswordVariables
|
||||||
>(USER_CHANGE_PASSWORD_MUTATION, {
|
>(USER_CHANGE_PASSWORD_MUTATION, {
|
||||||
|
@ -61,38 +46,82 @@ const PasswordChange = () => {
|
||||||
event: React.ChangeEvent<HTMLInputElement>,
|
event: React.ChangeEvent<HTMLInputElement>,
|
||||||
key: string
|
key: string
|
||||||
) {
|
) {
|
||||||
|
reset()
|
||||||
setState({
|
setState({
|
||||||
...state,
|
...state,
|
||||||
[key]: event.target.value,
|
[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 (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{/* TODO Add password confirmation field. */}
|
<SectionTitle nospace>
|
||||||
<SectionTitle nospace>Change Password</SectionTitle>
|
{t('settings.user.password_reset.title', 'Change password')}
|
||||||
|
</SectionTitle>
|
||||||
<TextField
|
<TextField
|
||||||
type="password"
|
type="password"
|
||||||
label="current password"
|
label={t(
|
||||||
|
'settings.user.password_reset.form.current_password',
|
||||||
|
'Current password'
|
||||||
|
)}
|
||||||
value={state.currentPassword}
|
value={state.currentPassword}
|
||||||
onChange={e => updateInput(e, 'currentPassword')}
|
onChange={e => updateInput(e, 'currentPassword')}
|
||||||
/>
|
/>
|
||||||
<TextField
|
<TextField
|
||||||
type="password"
|
type="password"
|
||||||
label="new password"
|
label={t(
|
||||||
|
'settings.user.password_reset.form.new_password',
|
||||||
|
'New password'
|
||||||
|
)}
|
||||||
value={state.password1}
|
value={state.password1}
|
||||||
onChange={e => updateInput(e, 'password1')}
|
onChange={e => updateInput(e, 'password1')}
|
||||||
/>
|
/>
|
||||||
<TextField
|
<TextField
|
||||||
type="password"
|
type="password"
|
||||||
label="confirm password"
|
label={t(
|
||||||
|
'settings.user.password_reset.form.confirm_password',
|
||||||
|
'Confirm password'
|
||||||
|
)}
|
||||||
value={state.password2}
|
value={state.password2}
|
||||||
onChange={e => updateInput(e, 'password2')}
|
onChange={e => updateInput(e, 'password2')}
|
||||||
/>
|
/>
|
||||||
{(state.password1 !== state.password2 && (
|
{statusMessages()}
|
||||||
<span style={{ color: 'red' }}>Passwords do not match</span>
|
{state.password1 !== '' && newPasswordsMatch && (
|
||||||
)) ||
|
|
||||||
(state.password1 !== '' && (
|
|
||||||
<Button
|
<Button
|
||||||
style={{ marginTop: '5px' }}
|
style={{ marginTop: '5px' }}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
|
@ -104,10 +133,9 @@ const PasswordChange = () => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Update Password
|
{t('settings.user.password_reset.form.submit', 'Change Password')}
|
||||||
</Button>
|
</Button>
|
||||||
))}
|
)}
|
||||||
{errorMessage(data, error)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -170,6 +170,20 @@
|
||||||
},
|
},
|
||||||
"title": "User preferences"
|
"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": {
|
"users": {
|
||||||
"add_user": {
|
"add_user": {
|
||||||
"submit": "Add user"
|
"submit": "Add user"
|
||||||
|
@ -183,6 +197,9 @@
|
||||||
"description": "Change password for <1>{{username}}</1>",
|
"description": "Change password for <1>{{username}}</1>",
|
||||||
"form": {
|
"form": {
|
||||||
"label": "New password",
|
"label": "New password",
|
||||||
|
"current_password": "Current password",
|
||||||
|
"new_password": "New password",
|
||||||
|
"confirm_password": "New password",
|
||||||
"placeholder": "password",
|
"placeholder": "password",
|
||||||
"submit": "Change password"
|
"submit": "Change password"
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue