arno
/
trezor-wallet
mirror of https://github.com/trezor/trezor-wallet
1
0
Fork 0
Code Issues Releases Wiki Activity

Rewrite passphrase modal

Browse Source
pull/88/head
Vasek Mlejnsky 6 years ago
parent 1aed318741
commit 490d7375db
4 changed files with 192 additions and 269 deletions
Show Stats Download Patch File Download Diff File

6
src/components/Button/index.js
Unescape View File

@ -2,13 +2,13 @@ import React from 'react';
import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';
import colors from 'config/colors';
import { TRANSITION } from 'config/variables';
import { TRANSITION, FONT_WEIGHT, FONT_SIZE } from 'config/variables';
const Wrapper = styled.button`
padding: ${props => (props.icon ? '4px 24px 4px 15px' : '11px 24px')};
border-radius: 3px;
font-size: 14px;
font-weight: 300;
font-size: ${FONT_SIZE.SMALL};
font-weight: ${FONT_WEIGHT.SMALLEST};
cursor: pointer;
background: ${colors.GREEN_PRIMARY};
color: ${colors.WHITE};

24
src/components/Checkbox/index.js
Unescape View File

@ -26,18 +26,18 @@ const IconWrapper = styled.div`
border-radius: 2px;
justify-content: center;
align-items: center;
color: ${props => (props.checked ? colors.WHITE : colors.GREEN_PRIMARY)};
background: ${props => (props.checked ? colors.GREEN_PRIMARY : colors.WHITE)};
border: 1px solid ${props => (props.checked ? colors.GREEN_PRIMARY : colors.DIVIDER)};
color: ${props => (props.isChecked ? colors.WHITE : colors.GREEN_PRIMARY)};
background: ${props => (props.isChecked ? colors.GREEN_PRIMARY : colors.WHITE)};
border: 1px solid ${props => (props.isChecked ? colors.GREEN_PRIMARY : colors.DIVIDER)};
width: 24px;
height: 24px;
&:hover,
&:focus {
${props => !props.checked && css`
${props => !props.isChecked && css`
border: 1px solid ${colors.GREEN_PRIMARY};
`}
background: ${props => (props.checked ? colors.GREEN_PRIMARY : colors.WHITE)};
background: ${props => (props.isChecked ? colors.GREEN_PRIMARY : colors.WHITE)};
}
`;
@ -50,7 +50,7 @@ const Label = styled.div`
&:hover,
&:focus {
color: ${props => (props.checked ? colors.TEXT_PRIMARY : colors.TEXT_PRIMARY)};
color: ${props => (props.isChecked ? colors.TEXT_PRIMARY : colors.TEXT_PRIMARY)};
}
`;
@ -63,7 +63,7 @@ class Checkbox extends PureComponent {
render() {
const {
checked,
isChecked,
children,
onClick,
} = this.props;
@ -73,20 +73,20 @@ class Checkbox extends PureComponent {
onKeyUp={e => this.handleKeyboard(e)}
tabIndex={0}
>
<IconWrapper checked={checked}>
{checked && (
<IconWrapper isChecked={isChecked}>
{isChecked && (
<Tick>
<Icon
hoverColor={colors.WHITE}
size={26}
color={checked ? colors.WHITE : colors.GREEN_PRIMARY}
color={isChecked ? colors.WHITE : colors.GREEN_PRIMARY}
icon={icons.SUCCESS}
/>
</Tick>
)
}
</IconWrapper>
<Label checked={checked}>{children}</Label>
<Label isChecked={isChecked}>{children}</Label>
</Wrapper>
);
}
@ -94,7 +94,7 @@ class Checkbox extends PureComponent {
Checkbox.propTypes = {
onClick: PropTypes.func.isRequired,
checked: PropTypes.bool,
isChecked: PropTypes.bool,
children: PropTypes.string,
};

14
src/components/inputs/Input/index.js
Unescape View File

@ -117,14 +117,15 @@ class Input extends Component {
hasAddon={!!this.props.sideAddons}
type={this.props.type}
placeholder={this.props.placeholder}
autoComplete={this.props.autoComplete}
autoCorrect={this.props.autoCorrect}
autoCapitalize={this.props.autoCapitalize}
autocomplete={this.props.autocomplete}
autocorrect={this.props.autocorrect}
autocapitalize={this.props.autocapitalize}
spellCheck={this.props.spellCheck}
value={this.props.value}
onChange={this.props.onChange}
borderColor={this.getColor(this.props.state)}
disabled={this.props.isDisabled}
name={this.props.name}
/>
</InputIconWrapper>
{this.props.sideAddons && this.props.sideAddons.map(sideAddon => sideAddon)}
@ -146,9 +147,9 @@ Input.propTypes = {
innerRef: PropTypes.func,
placeholder: PropTypes.string,
type: PropTypes.string,
autoComplete: PropTypes.string,
autoCorrect: PropTypes.string,
autoCapitalize: PropTypes.string,
autocomplete: PropTypes.string,
autocorrect: PropTypes.string,
autocapitalize: PropTypes.string,
spellCheck: PropTypes.string,
value: PropTypes.string,
onChange: PropTypes.func,
@ -157,6 +158,7 @@ Input.propTypes = {
topLabel: PropTypes.node,
sideAddons: PropTypes.arrayOf(PropTypes.node),
isDisabled: PropTypes.bool,
name: PropTypes.string,
};
Input.defaultProps = {

417
src/components/modals/passphrase/Passphrase/index.js
Unescape View File

@ -1,18 +1,25 @@
/* @flow */
import React, { Component } from 'react';
import raf from 'raf';
import styled from 'styled-components';
import colors from 'config/colors';
import { FONT_SIZE, TRANSITION } from 'config/variables';
import { H2 } from 'components/Heading';
import P from 'components/Paragraph';
import { FONT_SIZE } from 'config/variables';
import Link from 'components/Link';
import Checkbox from 'components/Checkbox';
import Button from 'components/Button';
import Input from 'components/inputs/Input';
import styled from 'styled-components';
import type { Props } from '../../index';
type State = {
deviceLabel: string,
shouldShowSingleInput: boolean,
passphraseInputValue: string,
passphraseCheckInputValue: string,
doPassphraseInputsMatch: boolean,
isPassphraseHidden: boolean,
};
const Wrapper = styled.div`
padding: 24px 48px;
max-width: 390px;
@ -45,315 +52,229 @@ const Footer = styled.div`
justify-content: center;
`;
type State = {
deviceLabel: string;
singleInput: boolean;
passphrase: string;
passphraseRevision: string;
passphraseFocused: boolean;
passphraseRevisionFocused: boolean;
passphraseRevisionTouched: boolean;
match: boolean;
visible: boolean;
}
const LinkButton = styled(Button)`
padding: 0;
margin: 0;
text-decoration: none;
cursor: pointer;
transition: ${TRANSITION.HOVER};
font-size: ${FONT_SIZE.SMALLER};
border-radius: 0;
border-bottom: 1px solid ${colors.GREEN_PRIMARY};
background: transparent;
&,
&:visited,
&:active,
&:hover {
color: ${colors.GREEN_PRIMARY};
}
&:hover {
border-color: transparent;
background: transparent;
}
`;
export default class PinModal extends Component<Props, State> {
class Passphrase extends Component<Props, State> {
constructor(props: Props) {
super(props);
const device = props.modal.opened ? props.modal.device : null;
if (!device) return;
if (!device) {
return;
}
// check if this device is already known
const selected = props.wallet.selectedDevice;
// Check if this device is already known
// if device is already known then only one input is presented
const { selectedDevice } = props.wallet;
let deviceLabel = device.label;
let singleInput = false;
if (selected && selected.path === device.path) {
deviceLabel = selected.instanceLabel;
singleInput = selected.remember || selected.state !== null;
let shouldShowSingleInput = false;
if (selectedDevice && selectedDevice.path === device.path) {
deviceLabel = selectedDevice.instanceLabel;
shouldShowSingleInput = selectedDevice.remember || selectedDevice.state !== null;
}
this.state = {
deviceLabel,
singleInput,
passphrase: '',
passphraseRevision: '',
passphraseFocused: false,
passphraseRevisionFocused: false,
passphraseRevisionTouched: false,
match: true,
visible: false,
shouldShowSingleInput,
passphraseInputValue: '',
passphraseCheckInputValue: '',
doPassphraseInputsMatch: true,
isPassphraseHidden: true,
};
}
keyboardHandler: (event: KeyboardEvent) => void;
state: State;
passphraseInput: ?HTMLInputElement;
passphraseRevisionInput: ?HTMLInputElement;
keyboardHandler(event: KeyboardEvent): void {
if (event.keyCode === 13) {
event.preventDefault();
//this.passphraseInput.blur();
//this.passphraseRevisionInput.blur();
//this.passphraseInput.type = 'text';
//this.passphraseRevisionInput.type = 'text';
this.submit();
// TODO: set timeout, or wait for blur event
//onPassphraseSubmit(passphrase, passphraseCached);
//raf(() => onPassphraseSubmit(passphrase));
}
}
componentDidMount(): void {
// one time autofocus
if (this.passphraseInput) this.passphraseInput.focus();
this.keyboardHandler = this.keyboardHandler.bind(this);
window.addEventListener('keydown', this.keyboardHandler, false);
componentDidMount() {
this.passphraseInput.focus();
// document.oncontextmenu = (event) => {
// const el = window.event.srcElement || event.target;
// const type = el.tagName.toLowerCase() || '';
// if (type === 'input') {
// return false;
// }
// };
this.handleKeyPress = this.handleKeyPress.bind(this);
window.addEventListener('keypress', this.handleKeyPress, false);
}
// we don't want to keep password inside "value" attribute,
// so we need to replace it thru javascript
componentDidUpdate() {
const {
passphrase,
passphraseRevision,
passphraseFocused,
passphraseRevisionFocused,
visible,
} = this.state;
// } = this.props.modal;
const passphraseInputValue: string = passphrase;
const passphraseRevisionInputValue: string = passphraseRevision;
// if (!visible && !passphraseFocused) {
// passphraseInputValue = passphrase.replace(/./g, '•');
// }
// if (!visible && !passphraseRevisionFocused) {
// passphraseRevisionInputValue = passphraseRevision.replace(/./g, '•');
// }
if (this.passphraseInput) {
// this.passphraseInput.value = passphraseInputValue;
// this.passphraseInput.setAttribute('type', visible || (!visible && !passphraseFocused) ? 'text' : 'password');
this.passphraseInput.setAttribute('type', visible ? 'text' : 'password');
}
if (this.passphraseRevisionInput) {
// this.passphraseRevisionInput.value = passphraseRevisionInputValue;
// this.passphraseRevisionInput.setAttribute('type', visible || (!visible && !passphraseRevisionFocused) ? 'text' : 'password');
this.passphraseRevisionInput.setAttribute('type', visible ? 'text' : 'password');
}
}
componentWillUnmount(): void {
window.removeEventListener('keydown', this.keyboardHandler, false);
// this.passphraseInput.type = 'text';
// this.passphraseInput.style.display = 'none';
// this.passphraseRevisionInput.type = 'text';
// this.passphraseRevisionInput.style.display = 'none';
componentWillUnmount() {
window.removeEventListener('keypress', this.handleKeyPress, false);
}
handleKeyPress: (event: KeyboardEvent) => void;
passphraseInput: HTMLInputElement;
handleInputChange(event: Event) {
const { target } = event;
if (target instanceof HTMLInputElement) {
const inputValue = target.value;
const inputName = target.name;
let doPassphraseInputsMatch = false;
if (inputName === 'passphraseInputValue') {
// If passphrase is not hidden the second input should get filled automatically
// and should be disabled
if (this.state.isPassphraseHidden) {
doPassphraseInputsMatch = inputValue === this.state.passphraseCheckInputValue;
} else {
// Since both inputs are same they really do match
// see: comment above
this.setState({
passphraseCheckInputValue: inputValue,
});
doPassphraseInputsMatch = true;
}
} else if (inputName === 'passphraseCheckInputValue') {
doPassphraseInputsMatch = inputValue === this.state.passphraseInputValue;
}
onPassphraseChange = (input: string, value: string): void => {
// https://codepen.io/MiDri/pen/PGqvrO
// or
// https://github.com/zakangelle/react-password-mask/blob/master/src/index.js
if (input === 'passphrase') {
this.setState(previousState => ({
match: previousState.singleInput || previousState.passphraseRevision === value,
passphrase: value,
}));
if (this.state.visible && this.passphraseRevisionInput) {
this.setState({
match: true,
passphraseRevision: value,
});
this.passphraseRevisionInput.value = value;
if (this.state.shouldShowSingleInput) {
doPassphraseInputsMatch = true;
}
} else {
this.setState(previousState => ({
match: previousState.passphrase === value,
passphraseRevision: value,
passphraseRevisionTouched: true,
}));
}
}
onPassphraseFocus = (input: string): void => {
if (input === 'passphrase') {
this.setState({
passphraseFocused: true,
});
} else {
this.setState({
passphraseRevisionFocused: true,
[inputName]: inputValue,
doPassphraseInputsMatch,
});
}
}
onPassphraseBlur = (input: string): void => {
if (input === 'passphrase') {
this.setState({
passphraseFocused: false,
});
handleCheckboxClick() {
// If passphrase was visible and now shouldn't be --> delete the value of passphraseCheckInputValue
// doPassphraseInputsMatch
// - if passphrase was visible and now shouldn't be --> doPassphraseInputsMatch = false
// - because passphraseCheckInputValue will be empty string
// - if passphrase wasn't visibe and now should be --> doPassphraseInputsMatch = true
// - because passphraseCheckInputValue will be same as passphraseInputValue
let doInputsMatch = false;
if (this.state.shouldShowSingleInput || this.state.passphraseInputValue === this.state.passphraseCheckInputValue) {
doInputsMatch = true;
} else {
this.setState({
passphraseRevisionFocused: false,
});
}
}
onPassphraseShow = (): void => {
this.setState({
visible: true,
});
if (this.passphraseRevisionInput) {
this.passphraseRevisionInput.disabled = true;
this.passphraseRevisionInput.value = this.state.passphrase;
this.setState(previousState => ({
passphraseRevision: previousState.passphrase,
match: true,
}));
doInputsMatch = !!this.state.isPassphraseHidden;
}
}
onPassphraseHide = (): void => {
this.setState({
visible: false,
});
if (this.passphraseRevisionInput) {
const emptyPassphraseRevisionValue = '';
this.passphraseRevisionInput.value = emptyPassphraseRevisionValue;
this.setState(previousState => ({
passphraseRevision: emptyPassphraseRevisionValue,
match: emptyPassphraseRevisionValue === previousState.passphrase,
}));
this.passphraseRevisionInput.disabled = false;
}
this.setState(previousState => ({
isPassphraseHidden: !previousState.isPassphraseHidden,
passphraseInputValue: previousState.isPassphraseHidden ? previousState.passphraseInputValue : '',
passphraseCheckInputValue: previousState.isPassphraseHidden ? previousState.passphraseInputValue : '',
doPassphraseInputsMatch: doInputsMatch,
}));
}
submit = (empty: boolean = false): void => {
submitPassphrase(shouldLeavePassphraseBlank: boolean = false) {
const { onPassphraseSubmit } = this.props.modalActions;
const { passphrase, match } = this.state;
if (!match) return;
//this.passphraseInput.type = 'text';
// this.passphraseInput.style.display = 'none';
//this.passphraseInput.setAttribute('readonly', 'readonly');
// this.passphraseRevisionInput.type = 'text';
//this.passphraseRevisionInput.style.display = 'none';
//this.passphraseRevisionInput.setAttribute('readonly', 'readonly');
// const p = passphrase;
const passphrase = this.state.passphraseInputValue;
// Reset state so same passphrase isn't filled when the modal will be visible again
this.setState({
passphrase: '',
passphraseRevision: '',
passphraseFocused: false,
passphraseRevisionFocused: false,
visible: false,
passphraseInputValue: '',
passphraseCheckInputValue: '',
doPassphraseInputsMatch: true,
isPassphraseHidden: true,
});
raf(() => onPassphraseSubmit(empty ? '' : passphrase));
onPassphraseSubmit(shouldLeavePassphraseBlank ? '' : passphrase);
}
render() {
if (!this.props.modal.opened) return null;
handleKeyPress(event: KeyboardEvent) {
if (event.key === 'Enter') {
event.preventDefault();
console.warn('ENTER', this.state);
if (this.state.doPassphraseInputsMatch) {
this.submitPassphrase();
}
}
}
const {
device,
} = this.props.modal;
render() {
if (!this.props.modal.opened) {
return null;
}
const {
deviceLabel,
singleInput,
passphrase,
passphraseRevision,
passphraseFocused,
passphraseRevisionFocused,
visible,
match,
passphraseRevisionTouched,
} = this.state;
let passphraseInputType: string = visible || (!visible && !passphraseFocused) ? 'text' : 'password';
let passphraseRevisionInputType: string = visible || (!visible && !passphraseRevisionFocused) ? 'text' : 'password';
passphraseInputType = passphraseRevisionInputType = 'text';
//let passphraseInputType: string = visible || passphraseFocused ? "text" : "password";
//let passphraseRevisionInputType: string = visible || passphraseRevisionFocused ? "text" : "password";
const showPassphraseCheckboxFn: Function = visible ? this.onPassphraseHide : this.onPassphraseShow;
return (
<Wrapper>
<H2>Enter { deviceLabel } passphrase</H2>
<H2>Enter {this.state.deviceLabel} passphrase</H2>
<P isSmaller>Note that passphrase is case-sensitive.</P>
<Row>
<Label>Passphrase</Label>
<Input
innerRef={(element) => { this.passphraseInput = element; }}
onChange={event => this.onPassphraseChange('passphrase', event.currentTarget.value)}
type={passphraseInputType}
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
data-lpignore="true"
onFocus={() => this.onPassphraseFocus('passphrase')}
onBlur={() => this.onPassphraseBlur('passphrase')}
tabIndex="0"
innerRef={(input) => { this.passphraseInput = input; }}
name="passphraseInputValue"
type={this.state.isPassphraseHidden ? 'password' : 'text'}
autocorrect="off"
autocapitalize="off"
autocomplete="off"
value={this.state.passphraseInputValue}
onChange={event => this.handleInputChange(event)}
/>
</Row>
{!singleInput && (
{!this.state.shouldShowSingleInput && (
<Row>
<Label>Re-enter passphrase</Label>
<Input
innerRef={(element) => { this.passphraseRevisionInput = element; }}
onChange={event => this.onPassphraseChange('revision', event.currentTarget.value)}
type={passphraseRevisionInputType}
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
data-lpignore="true"
onFocus={() => this.onPassphraseFocus('revision')}
onBlur={() => this.onPassphraseBlur('revision')}
name="passphraseCheckInputValue"
type={this.state.isPassphraseHidden ? 'password' : 'text'}
autocorrect="off"
autocapitalize="off"
autocomplete="off"
value={this.state.passphraseCheckInputValue}
onChange={event => this.handleInputChange(event)}
isDisabled={!this.state.isPassphraseHidden}
/>
{!match && passphraseRevisionTouched && <PassphraseError>Passphrases do not match</PassphraseError> }
</Row>
) }
)}
{!this.state.doPassphraseInputsMatch && (
<PassphraseError>Passphrases do not match</PassphraseError>
)}
<Row>
<Checkbox onClick={showPassphraseCheckboxFn} checked={visible}>Show passphrase</Checkbox>
<Checkbox
isChecked={!this.state.isPassphraseHidden}
onClick={() => this.handleCheckboxClick()}
>
Show passphrase
</Checkbox>
</Row>
<Row>
<Button type="button" disabled={!match} onClick={() => this.submit()}>Enter</Button>
<Button
isDisabled={!this.state.doPassphraseInputsMatch}
onClick={() => this.submitPassphrase()}
>Enter
</Button>
</Row>
<Footer>
<P isSmaller>If you want to access your default account</P>
<P isSmaller>
<Link isGreen onClick={() => this.submit(true)}>Leave passphrase blank</Link>
<LinkButton
isGreen
onClick={() => this.submitPassphrase(true)}
>Leave passphrase blank
</LinkButton>
</P>
</Footer>
</Wrapper>
);
}
}
}
export default Passphrase;
Write Preview
Loading…
Cancel
Save