You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.5 KiB
101 lines
2.5 KiB
import { T9n } from 'features/T9n'
|
|
|
|
import { PasswordInput } from '../PasswordInput'
|
|
import { Logo } from '../Logo'
|
|
import { useChangePasswordForm } from './hooks'
|
|
import {
|
|
BlockTitle,
|
|
CenterBlock,
|
|
FormText,
|
|
InputGroup,
|
|
ButtonsBlock,
|
|
Form,
|
|
ButtonSolid,
|
|
Error,
|
|
ChangePasswordModalWrapper,
|
|
ChangePasswordModal,
|
|
ChangePasswordModalIcon,
|
|
ChangePasswordModalTitle,
|
|
ChangePasswordModalText,
|
|
ChangePasswordModalButton,
|
|
ScArrowLoader,
|
|
} from '../../styled'
|
|
|
|
const ChangePassword = () => {
|
|
const {
|
|
confirmPassword,
|
|
disabled,
|
|
error,
|
|
handleSubmit,
|
|
isFetching,
|
|
isSubmitDisabled,
|
|
modalButtonClick,
|
|
modalOpen,
|
|
onConfirmPasswordChange,
|
|
onPasswordChange,
|
|
password,
|
|
} = useChangePasswordForm()
|
|
|
|
return (
|
|
<CenterBlock>
|
|
{modalOpen && (
|
|
<ChangePasswordModalWrapper>
|
|
<ChangePasswordModal>
|
|
<ChangePasswordModalIcon src='images/success-icon.svg' />
|
|
<ChangePasswordModalTitle>
|
|
<T9n t='password_changed_success' />
|
|
</ChangePasswordModalTitle>
|
|
<ChangePasswordModalText>
|
|
<T9n t='use_new_password' />
|
|
</ChangePasswordModalText>
|
|
<ChangePasswordModalButton onClick={modalButtonClick}>
|
|
<T9n t='ok' />
|
|
</ChangePasswordModalButton>
|
|
</ChangePasswordModal>
|
|
</ChangePasswordModalWrapper>
|
|
)}
|
|
<Logo />
|
|
<Form
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<BlockTitle t='set_new_password' />
|
|
<FormText>
|
|
<T9n t='set_new_password_for_your_account' />
|
|
</FormText>
|
|
<InputGroup>
|
|
<PasswordInput
|
|
type='password'
|
|
name='password'
|
|
autoComplete='current-password'
|
|
placeholderLexic='password_new'
|
|
value={password}
|
|
onChange={onPasswordChange}
|
|
/>
|
|
<PasswordInput
|
|
type='password'
|
|
name='confirm_password'
|
|
autoComplete='current-password'
|
|
placeholderLexic='password_repeat'
|
|
value={confirmPassword}
|
|
onChange={onConfirmPasswordChange}
|
|
disabled={disabled}
|
|
/>
|
|
</InputGroup>
|
|
<Error>
|
|
<T9n t={error} />
|
|
</Error>
|
|
<ButtonsBlock>
|
|
<ButtonSolid disabled={isSubmitDisabled}>
|
|
{
|
|
isFetching
|
|
? <ScArrowLoader />
|
|
: <T9n t='change_password' />
|
|
}
|
|
</ButtonSolid>
|
|
</ButtonsBlock>
|
|
</Form>
|
|
</CenterBlock>
|
|
)
|
|
}
|
|
|
|
export default ChangePassword
|
|
|