diff --git a/src/js/components/modal/DuplicateDevice.js b/src/js/components/modal/DuplicateDevice.js index 91ed933a..7dada1f3 100644 --- a/src/js/components/modal/DuplicateDevice.js +++ b/src/js/components/modal/DuplicateDevice.js @@ -8,12 +8,14 @@ import type { Props } from './index'; type State = { defaultName: string; instanceName: ?string; + isUsed: boolean; } export default class DuplicateDevice extends Component { keyboardHandler: (event: KeyboardEvent) => void; state: State; + input: ?HTMLInputElement; constructor(props: Props) { super(props); @@ -25,18 +27,22 @@ export default class DuplicateDevice extends Component { this.state = { defaultName: `${device.label} (${instance.toString()})`, - instanceName: null + instanceName: null, + isUsed: false, } } keyboardHandler(event: KeyboardEvent): void { - if (event.keyCode === 13) { + if (event.keyCode === 13 && !this.state.isUsed) { event.preventDefault(); this.submit(); } } componentDidMount(): void { + // one time autofocus + if (this.input) + this.input.focus(); this.keyboardHandler = this.keyboardHandler.bind(this); window.addEventListener('keydown', this.keyboardHandler, false); } @@ -46,15 +52,21 @@ export default class DuplicateDevice extends Component { } onNameChange = (value: string): void => { + + let isUsed: boolean = false; + if (value.length > 0) { + isUsed = ( this.props.connect.devices.find(d => d.instanceName === value) !== undefined ); + } + this.setState({ - instanceName: value.length > 0 ? value : null + instanceName: value.length > 0 ? value : null, + isUsed }); } submit() { - if (this.props.modal.opened) { - this.props.modalActions.onDuplicateDevice( { ...this.props.modal.device, instanceName: this.state.instanceName } ); - } + if (!this.props.modal.opened) return; + this.props.modalActions.onDuplicateDevice( { ...this.props.modal.device, instanceName: this.state.instanceName } ); } render() { @@ -63,22 +75,33 @@ export default class DuplicateDevice extends Component { const { device } = this.props.modal; const { onCancel, onDuplicateDevice } = this.props.modalActions; + const { + defaultName, + instanceName, + isUsed + } = this.state; return (
+

Clone { device.label }?

This will create new instance of device which can be used with different passphrase

- - this.onNameChange(event.currentTarget.value) } - defaultValue={ this.state.instanceName } /> - +
+ + { this.input = element; } } + onChange={ event => this.onNameChange(event.currentTarget.value) } + defaultValue={ instanceName } /> + { isUsed ? Instance name is already in use : null } +
+
); diff --git a/src/styles/modal.less b/src/styles/modal.less index 8461fa2f..c6480f53 100644 --- a/src/styles/modal.less +++ b/src/styles/modal.less @@ -106,7 +106,7 @@ h3 { word-break: break-all; } - + button:not(.close-modal) { width: 100%; margin-top: 12px; @@ -126,14 +126,28 @@ padding: 14px 0px; } - label { - display: block; - padding-bottom: 6px; + .row { + position: relative; text-align: left; - color: @color_text_secondary; + padding-bottom: 20px; + + label { + display: block; + padding-bottom: 6px; + text-align: left; + color: @color_text_secondary; + } + + .error { + position: absolute; + left: 0px; + bottom: 0px; + font-size: 12px; + color: @color_error_primary; + } } - button { + button:not(.close-modal) { width: 100%; margin-top: 12px; span { @@ -256,20 +270,14 @@ color: @color_error_primary; } } - - // input[type="text"] { - // font-family: 'fontello'; - // font-size: 6px; - // line-height: 14px; - // } } input[type="text"], input[type="password"] { width: 260px; - box-shadow: none; - border-radius: 0px; - border: 1px solid @color_divider; + // box-shadow: none; + // border-radius: 0px; + // border: 1px solid @color_divider; height: auto; .placeholder({