feat: extracted password to new modal
added shiny hook to password protect anywherepull/3083/head
William Grant
4 weeks ago
parent
b6d5c24af4
commit
d346f28942
@ -0,0 +1,106 @@
|
||||
import { Dispatch, SetStateAction } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { ToastUtils } from '../../session/utils';
|
||||
import { matchesHash } from '../../util/passwordUtils';
|
||||
|
||||
import { updateEnterPasswordModal } from '../../state/ducks/modalDialog';
|
||||
import { SpacerSM } from '../basic/Text';
|
||||
|
||||
import { SessionWrapperModal } from '../SessionWrapperModal';
|
||||
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
|
||||
|
||||
const StyledModalContainer = styled.div`
|
||||
margin: var(--margins-md) var(--margins-sm);
|
||||
`;
|
||||
|
||||
export type EnterPasswordModalProps = {
|
||||
passwordHash: string;
|
||||
passwordValid: boolean;
|
||||
setPasswordValid: Dispatch<SetStateAction<boolean>>;
|
||||
onClickOk: () => any;
|
||||
onClickClose: () => any;
|
||||
title?: string;
|
||||
};
|
||||
|
||||
export const EnterPasswordModal = (props: EnterPasswordModalProps) => {
|
||||
const { passwordHash, setPasswordValid, onClickOk, onClickClose, title } = props;
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const onClose = () => {
|
||||
onClickClose();
|
||||
dispatch(updateEnterPasswordModal(null));
|
||||
};
|
||||
|
||||
const confirmPassword = () => {
|
||||
const passwordValue = (document.getElementById('seed-input-password') as any)?.value;
|
||||
const isPasswordValid = matchesHash(passwordValue as string, passwordHash);
|
||||
|
||||
if (!passwordValue) {
|
||||
ToastUtils.pushToastError('enterPasswordErrorToast', window.i18n('noGivenPassword'));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwordHash && !isPasswordValid) {
|
||||
ToastUtils.pushToastError('enterPasswordErrorToast', window.i18n('invalidPassword'));
|
||||
return;
|
||||
}
|
||||
|
||||
setPasswordValid(true);
|
||||
|
||||
window.removeEventListener('keyup', onEnter);
|
||||
|
||||
void onClickOk();
|
||||
};
|
||||
|
||||
const onEnter = (event: any) => {
|
||||
if (event.key === 'Enter') {
|
||||
confirmPassword();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SessionWrapperModal
|
||||
title={title || window.i18n('enterPassword')}
|
||||
onClose={onClose}
|
||||
showExitIcon={true}
|
||||
>
|
||||
<StyledModalContainer>
|
||||
<SpacerSM />
|
||||
|
||||
<div className="session-modal__input-group">
|
||||
<input
|
||||
type="password"
|
||||
id="seed-input-password"
|
||||
data-testid="password-input"
|
||||
placeholder={window.i18n('enterPassword')}
|
||||
onKeyUp={onEnter}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SpacerSM />
|
||||
|
||||
<div
|
||||
className="session-modal__button-group"
|
||||
style={{ justifyContent: 'center', width: '100%' }}
|
||||
>
|
||||
<SessionButton
|
||||
text={window.i18n('done')}
|
||||
buttonType={SessionButtonType.Simple}
|
||||
onClick={confirmPassword}
|
||||
dataTestId="session-confirm-ok-button"
|
||||
/>
|
||||
<SessionButton
|
||||
text={window.i18n('cancel')}
|
||||
buttonType={SessionButtonType.Simple}
|
||||
buttonColor={SessionButtonColor.Danger}
|
||||
onClick={onClose}
|
||||
dataTestId="session-confirm-cancel-button"
|
||||
/>
|
||||
</div>
|
||||
</StyledModalContainer>
|
||||
</SessionWrapperModal>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,54 @@
|
||||
import { isEmpty } from 'lodash';
|
||||
import { useState } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useMount } from 'react-use';
|
||||
import { Data } from '../data/data';
|
||||
import { updateEnterPasswordModal } from '../state/ducks/modalDialog';
|
||||
|
||||
export function usePasswordModal({
|
||||
onSuccess,
|
||||
onClose,
|
||||
title,
|
||||
}: {
|
||||
onSuccess: () => void;
|
||||
onClose: () => void;
|
||||
title?: string;
|
||||
}) {
|
||||
const [passwordHash, setPasswordHash] = useState('');
|
||||
const [passwordValid, setPasswordValid] = useState(false);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const validateAccess = async () => {
|
||||
if (!isEmpty(passwordHash)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hash = await Data.getPasswordHash();
|
||||
if (hash && !isEmpty(hash)) {
|
||||
setPasswordHash(hash);
|
||||
dispatch(
|
||||
updateEnterPasswordModal({
|
||||
passwordHash,
|
||||
passwordValid,
|
||||
setPasswordValid,
|
||||
onClickOk: () => {
|
||||
onSuccess();
|
||||
setPasswordHash('');
|
||||
dispatch(updateEnterPasswordModal(null));
|
||||
},
|
||||
onClickClose: () => {
|
||||
onClose();
|
||||
setPasswordHash('');
|
||||
dispatch(updateEnterPasswordModal(null));
|
||||
},
|
||||
title,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
useMount(() => {
|
||||
void validateAccess();
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue