frontend/src/components/modals/PasswordModal.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import React, { useRef } from 'react';
import Modal from 'react-modal';
import { PassInput } from '../Inputs'
import { RightPad, LeftPad, ModalHeader, Padding } from './shared'
import Error from '../Err';

const modalStyles = {
    content: {
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        width: '400px',
        height: '250px',
        border: '1px solid #11111188'
    }
};

const PasswordModal = (props) => {
    const ErrorLabel = useRef();
    Modal.setAppElement('body');

    function submitPassword(e) {
        e.preventDefault();
        const password = props.value
        props.validateCallback(password, ErrorLabel.current.showMessage)
    }

    return(
        <Modal
            isOpen={props.hasPass && !props.validPass}
            style={modalStyles}
            contentLabel="enter paste password"
        >
            <form onSubmit={submitPassword}>
                <LeftPad>
                    <ModalHeader><span role="img" aria-label="warning">🚧&nbsp;</span>err: password protected</ModalHeader>
                </LeftPad>
                <RightPad>
                    <PassInput
                        value={props.value}
                        onChange={props.onChange} />
                </RightPad>
                <LeftPad>
                    <input className="lt-button lt-shadow lt-hover" type="submit" value="continue" />
                    <Padding />
                    <Error ref={ErrorLabel} />
                </LeftPad>
            </form>
        </Modal>
    );
}

export default PasswordModal