arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-05-25 18:28:48 +00:00
Code Issues Releases Wiki Activity

Passphrase is set as password by default & add autofill feature

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-09-20 13:41:13 +02:00 committed by Szymon Lesisz
parent 7fc4737846
commit 2ff86bd6a7
3 changed files with 58 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Paragraph/index.js
View File

@ -26,10 +26,7 @@ const P = ({ children, className, isSmaller = false }) => (
P.propTypes = { P.propTypes = {
className: PropTypes.string, className: PropTypes.string,
isSmaller: PropTypes.bool, isSmaller: PropTypes.bool,
children: PropTypes.oneOfType([ children: PropTypes.node,
PropTypes.array,
PropTypes.string,
]),
}; };
export default P; export default P;

4
src/components/inputs/Input/index.js
View File

@ -114,6 +114,7 @@ class Input extends Component {
/> />
)} )}
<StyledInput <StyledInput
innerRef={this.props.innerRef}
hasAddon={!!this.props.sideAddons} hasAddon={!!this.props.sideAddons}
type={this.props.type} type={this.props.type}
placeholder={this.props.placeholder} placeholder={this.props.placeholder}
@ -143,13 +144,14 @@ class Input extends Component {
Input.propTypes = { Input.propTypes = {
className: PropTypes.string, className: PropTypes.string,
innerRef: PropTypes.func,
placeholder: PropTypes.string, placeholder: PropTypes.string,
type: PropTypes.string, type: PropTypes.string,
autoComplete: PropTypes.string, autoComplete: PropTypes.string,
autoCorrect: PropTypes.string, autoCorrect: PropTypes.string,
autoCapitalize: PropTypes.string, autoCapitalize: PropTypes.string,
spellCheck: PropTypes.string, spellCheck: PropTypes.string,
value: PropTypes.string.isRequired, value: PropTypes.string,
onChange: PropTypes.func, onChange: PropTypes.func,
state: PropTypes.string, state: PropTypes.string,
bottomText: PropTypes.string, bottomText: PropTypes.string,

73
src/components/modals/passphrase/Passphrase/index.js
View File

@ -2,6 +2,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import raf from 'raf'; import raf from 'raf';
import colors from 'config/colors'; import colors from 'config/colors';
import { H2 } from 'components/Heading';
import P from 'components/Paragraph'; import P from 'components/Paragraph';
import { FONT_SIZE } from 'config/variables'; import { FONT_SIZE } from 'config/variables';
import Link from 'components/Link'; import Link from 'components/Link';
@ -23,7 +24,10 @@ const Label = styled.div`
padding-bottom: 5px; padding-bottom: 5px;
`; `;
const PassphraseError = styled.div``; const PassphraseError = styled.div`
margin-top: 8px;
color: ${colors.ERROR_PRIMARY};
`;
const Row = styled.div` const Row = styled.div`
position: relative; position: relative;
@ -137,22 +141,29 @@ export default class PinModal extends Component<Props, State> {
} = this.state; } = this.state;
// } = this.props.modal; // } = this.props.modal;
let passphraseInputValue: string = passphrase; console.warn('passphrase', passphrase);
let passphraseRevisionInputValue: string = passphraseRevision; console.warn('passphraseRevision', passphraseRevision);
if (!visible && !passphraseFocused) { const passphraseInputValue: string = passphrase;
passphraseInputValue = passphrase.replace(/./g, '•'); const passphraseRevisionInputValue: string = passphraseRevision;
} // if (!visible && !passphraseFocused) {
if (!visible && !passphraseRevisionFocused) { // passphraseInputValue = passphrase.replace(/./g, '•');
passphraseRevisionInputValue = passphraseRevision.replace(/./g, '•'); // }
} // if (!visible && !passphraseRevisionFocused) {
// passphraseRevisionInputValue = passphraseRevision.replace(/./g, '•');
// }
console.warn('VISIBLE', visible);
if (this.passphraseInput) { if (this.passphraseInput) {
this.passphraseInput.value = passphraseInputValue; console.warn('this.passphraseInput', this.passphraseInput);
this.passphraseInput.setAttribute('type', visible || (!visible && !passphraseFocused) ? 'text' : 'password'); // this.passphraseInput.value = passphraseInputValue;
// this.passphraseInput.setAttribute('type', visible || (!visible && !passphraseFocused) ? 'text' : 'password');
this.passphraseInput.setAttribute('type', visible ? 'text' : 'password');
} }
if (this.passphraseRevisionInput) { if (this.passphraseRevisionInput) {
this.passphraseRevisionInput.value = passphraseRevisionInputValue; // this.passphraseRevisionInput.value = passphraseRevisionInputValue;
this.passphraseRevisionInput.setAttribute('type', visible || (!visible && !passphraseRevisionFocused) ? 'text' : 'password'); // this.passphraseRevisionInput.setAttribute('type', visible || (!visible && !passphraseRevisionFocused) ? 'text' : 'password');
this.passphraseRevisionInput.setAttribute('type', visible ? 'text' : 'password');
} }
} }
@ -170,10 +181,19 @@ export default class PinModal extends Component<Props, State> {
// or // or
// https://github.com/zakangelle/react-password-mask/blob/master/src/index.js // https://github.com/zakangelle/react-password-mask/blob/master/src/index.js
if (input === 'passphrase') { if (input === 'passphrase') {
console.warn('PASSPHRASE CHANGE', value);
this.setState(previousState => ({ this.setState(previousState => ({
match: previousState.singleInput || previousState.passphraseRevision === value, match: previousState.singleInput || previousState.passphraseRevision === value,
passphrase: value, passphrase: value,
})); }));
if (this.state.visible && this.passphraseRevisionInput) {
this.setState({
match: true,
passphraseRevision: value,
});
this.passphraseRevisionInput.value = value;
}
} else { } else {
this.setState(previousState => ({ this.setState(previousState => ({
match: previousState.passphrase === value, match: previousState.passphrase === value,
@ -211,12 +231,28 @@ export default class PinModal extends Component<Props, State> {
this.setState({ this.setState({
visible: true, visible: true,
}); });
if (this.passphraseRevisionInput) {
this.passphraseRevisionInput.disabled = true;
this.passphraseRevisionInput.value = this.state.passphrase;
this.setState(previousState => ({
passphraseRevision: previousState.passphrase,
match: true,
}));
}
} }
onPassphraseHide = (): void => { onPassphraseHide = (): void => {
this.setState({ this.setState({
visible: false, visible: false,
}); });
if (this.passphraseRevisionInput) {
this.passphraseRevisionInput.value = '';
this.setState({
passphraseRevision: '',
match: false,
});
this.passphraseRevisionInput.disabled = false;
}
} }
submit = (empty: boolean = false): void => { submit = (empty: boolean = false): void => {
@ -232,7 +268,7 @@ export default class PinModal extends Component<Props, State> {
//this.passphraseRevisionInput.style.display = 'none'; //this.passphraseRevisionInput.style.display = 'none';
//this.passphraseRevisionInput.setAttribute('readonly', 'readonly'); //this.passphraseRevisionInput.setAttribute('readonly', 'readonly');
const p = passphrase; // const p = passphrase;
this.setState({ this.setState({
passphrase: '', passphrase: '',
@ -274,8 +310,8 @@ export default class PinModal extends Component<Props, State> {
console.log('passphraseInputType', passphraseInputType); console.log('passphraseInputType', passphraseInputType);
return ( return (
<Wrapper> <Wrapper>
{/* ?<H2>Enter { deviceLabel } passphrase</H2> */} <H2>Enter { deviceLabel } passphrase</H2>
{/* <P isSmaller>Note that passphrase is case-sensitive.</P> */} <P isSmaller>Note that passphrase is case-sensitive.</P>
<Row> <Row>
<Label>Passphrase</Label> <Label>Passphrase</Label>
<Input <Input
@ -289,7 +325,7 @@ export default class PinModal extends Component<Props, State> {
data-lpignore="true" data-lpignore="true"
onFocus={() => this.onPassphraseFocus('passphrase')} onFocus={() => this.onPassphraseFocus('passphrase')}
onBlur={() => this.onPassphraseBlur('passphrase')} onBlur={() => this.onPassphraseBlur('passphrase')}
tabIndex="1" tabIndex="0"
/> />
</Row> </Row>
{!singleInput && ( {!singleInput && (
@ -306,7 +342,6 @@ export default class PinModal extends Component<Props, State> {
data-lpignore="true" data-lpignore="true"
onFocus={() => this.onPassphraseFocus('revision')} onFocus={() => this.onPassphraseFocus('revision')}
onBlur={() => this.onPassphraseBlur('revision')} onBlur={() => this.onPassphraseBlur('revision')}
tabIndex="2"
/> />
{!match && passphraseRevisionTouched && <PassphraseError>Passphrases do not match</PassphraseError> } {!match && passphraseRevisionTouched && <PassphraseError>Passphrases do not match</PassphraseError> }
</Row> </Row>
@ -315,7 +350,7 @@ export default class PinModal extends Component<Props, State> {
<Checkbox onClick={showPassphraseCheckboxFn} checked={visible}>Show passphrase</Checkbox> <Checkbox onClick={showPassphraseCheckboxFn} checked={visible}>Show passphrase</Checkbox>
</Row> </Row>
<Row> <Row>
<Button type="button" tabIndex="4" disabled={!match} onClick={event => this.submit()}>Enter</Button> <Button type="button" disabled={!match} onClick={() => this.submit()}>Enter</Button>
</Row> </Row>
<Footer> <Footer>
<P isSmaller>If you want to access your default account</P> <P isSmaller>If you want to access your default account</P>