mirror of
https://github.com/trezor/trezor-wallet
synced 2025-02-28 16:32:02 +00:00
Passphrase is set as password by default & add autofill feature
This commit is contained in:
Vasek Mlejnsky
Szymon Lesisz
parent
7fc4737846
commit
2ff86bd6a7
@ -26,10 +26,7 @@ const P = ({ children, className, isSmaller = false }) => (
|
||||
P.propTypes = {
|
||||
className: PropTypes.string,
|
||||
isSmaller: PropTypes.bool,
|
||||
children: PropTypes.oneOfType([
|
||||
PropTypes.array,
|
||||
PropTypes.string,
|
||||
]),
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export default P;
|
||||
|
||||
@ -114,6 +114,7 @@ class Input extends Component {
|
||||
/>
|
||||
)}
|
||||
<StyledInput
|
||||
innerRef={this.props.innerRef}
|
||||
hasAddon={!!this.props.sideAddons}
|
||||
type={this.props.type}
|
||||
placeholder={this.props.placeholder}
|
||||
@ -143,13 +144,14 @@ class Input extends Component {
|
||||
|
||||
Input.propTypes = {
|
||||
className: PropTypes.string,
|
||||
innerRef: PropTypes.func,
|
||||
placeholder: PropTypes.string,
|
||||
type: PropTypes.string,
|
||||
autoComplete: PropTypes.string,
|
||||
autoCorrect: PropTypes.string,
|
||||
autoCapitalize: PropTypes.string,
|
||||
spellCheck: PropTypes.string,
|
||||
value: PropTypes.string.isRequired,
|
||||
value: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
state: PropTypes.string,
|
||||
bottomText: PropTypes.string,
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import raf from 'raf';
|
||||
import colors from 'config/colors';
|
||||
import { H2 } from 'components/Heading';
|
||||
import P from 'components/Paragraph';
|
||||
import { FONT_SIZE } from 'config/variables';
|
||||
import Link from 'components/Link';
|
||||
@ -23,7 +24,10 @@ const Label = styled.div`
|
||||
padding-bottom: 5px;
|
||||
`;
|
||||
|
||||
const PassphraseError = styled.div``;
|
||||
const PassphraseError = styled.div`
|
||||
margin-top: 8px;
|
||||
color: ${colors.ERROR_PRIMARY};
|
||||
`;
|
||||
|
||||
const Row = styled.div`
|
||||
position: relative;
|
||||
@ -137,22 +141,29 @@ export default class PinModal extends Component<Props, State> {
|
||||
} = this.state;
|
||||
// } = this.props.modal;
|
||||
|
||||
let passphraseInputValue: string = passphrase;
|
||||
let passphraseRevisionInputValue: string = passphraseRevision;
|
||||
if (!visible && !passphraseFocused) {
|
||||
passphraseInputValue = passphrase.replace(/./g, '•');
|
||||
}
|
||||
if (!visible && !passphraseRevisionFocused) {
|
||||
passphraseRevisionInputValue = passphraseRevision.replace(/./g, '•');
|
||||
}
|
||||
console.warn('passphrase', passphrase);
|
||||
console.warn('passphraseRevision', passphraseRevision);
|
||||
const passphraseInputValue: string = passphrase;
|
||||
const passphraseRevisionInputValue: string = passphraseRevision;
|
||||
// if (!visible && !passphraseFocused) {
|
||||
// passphraseInputValue = passphrase.replace(/./g, '•');
|
||||
// }
|
||||
// if (!visible && !passphraseRevisionFocused) {
|
||||
// passphraseRevisionInputValue = passphraseRevision.replace(/./g, '•');
|
||||
// }
|
||||
|
||||
console.warn('VISIBLE', visible);
|
||||
|
||||
if (this.passphraseInput) {
|
||||
this.passphraseInput.value = passphraseInputValue;
|
||||
this.passphraseInput.setAttribute('type', visible || (!visible && !passphraseFocused) ? 'text' : 'password');
|
||||
console.warn('this.passphraseInput', 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.value = passphraseRevisionInputValue;
|
||||
// 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
|
||||
// https://github.com/zakangelle/react-password-mask/blob/master/src/index.js
|
||||
if (input === 'passphrase') {
|
||||
console.warn('PASSPHRASE CHANGE', value);
|
||||
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;
|
||||
}
|
||||
} else {
|
||||
this.setState(previousState => ({
|
||||
match: previousState.passphrase === value,
|
||||
@ -211,12 +231,28 @@ export default class PinModal extends Component<Props, State> {
|
||||
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,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
onPassphraseHide = (): void => {
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
if (this.passphraseRevisionInput) {
|
||||
this.passphraseRevisionInput.value = '';
|
||||
this.setState({
|
||||
passphraseRevision: '',
|
||||
match: false,
|
||||
});
|
||||
this.passphraseRevisionInput.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
submit = (empty: boolean = false): void => {
|
||||
@ -232,7 +268,7 @@ export default class PinModal extends Component<Props, State> {
|
||||
//this.passphraseRevisionInput.style.display = 'none';
|
||||
//this.passphraseRevisionInput.setAttribute('readonly', 'readonly');
|
||||
|
||||
const p = passphrase;
|
||||
// const p = passphrase;
|
||||
|
||||
this.setState({
|
||||
passphrase: '',
|
||||
@ -274,8 +310,8 @@ export default class PinModal extends Component<Props, State> {
|
||||
console.log('passphraseInputType', passphraseInputType);
|
||||
return (
|
||||
<Wrapper>
|
||||
{/* ?<H2>Enter { deviceLabel } passphrase</H2> */}
|
||||
{/* <P isSmaller>Note that passphrase is case-sensitive.</P> */}
|
||||
<H2>Enter { deviceLabel } passphrase</H2>
|
||||
<P isSmaller>Note that passphrase is case-sensitive.</P>
|
||||
<Row>
|
||||
<Label>Passphrase</Label>
|
||||
<Input
|
||||
@ -289,7 +325,7 @@ export default class PinModal extends Component<Props, State> {
|
||||
data-lpignore="true"
|
||||
onFocus={() => this.onPassphraseFocus('passphrase')}
|
||||
onBlur={() => this.onPassphraseBlur('passphrase')}
|
||||
tabIndex="1"
|
||||
tabIndex="0"
|
||||
/>
|
||||
</Row>
|
||||
{!singleInput && (
|
||||
@ -306,7 +342,6 @@ export default class PinModal extends Component<Props, State> {
|
||||
data-lpignore="true"
|
||||
onFocus={() => this.onPassphraseFocus('revision')}
|
||||
onBlur={() => this.onPassphraseBlur('revision')}
|
||||
tabIndex="2"
|
||||
/>
|
||||
{!match && passphraseRevisionTouched && <PassphraseError>Passphrases do not match</PassphraseError> }
|
||||
</Row>
|
||||
@ -315,7 +350,7 @@ export default class PinModal extends Component<Props, State> {
|
||||
<Checkbox onClick={showPassphraseCheckboxFn} checked={visible}>Show passphrase</Checkbox>
|
||||
</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>
|
||||
<Footer>
|
||||
<P isSmaller>If you want to access your default account</P>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user