duplicate device unique name

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<Props, State> {
 
     keyboardHandler: (event: KeyboardEvent) => void;
     state: State;
+    input: ?HTMLInputElement;
 
     constructor(props: Props) {
         super(props);
@@ -25,18 +27,22 @@ export default class DuplicateDevice extends Component<Props, State> {
 
         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,16 +52,22 @@ export default class DuplicateDevice extends Component<Props, State> {
     }
 
     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) {
+        if (!this.props.modal.opened) return;
         this.props.modalActions.onDuplicateDevice( { ...this.props.modal.device, instanceName: this.state.instanceName } );
     }
-    }
 
     render() {
     
@@ -63,11 +75,18 @@ export default class DuplicateDevice extends Component<Props, State> {
 
         const { device } = this.props.modal;
         const { onCancel, onDuplicateDevice } = this.props.modalActions;
+        const {
+            defaultName,
+            instanceName,
+            isUsed
+        } = this.state;
 
         return (
             <div className="duplicate">
+                <button className="close-modal transparent" onClick={ onCancel }></button>
                 <h3>Clone { device.label }?</h3>
                 <p>This will create new instance of device which can be used with different passphrase</p>
+                <div className="row">
                     <label>Instance name</label>
                     <input 
                         type="text" 
@@ -75,10 +94,14 @@ export default class DuplicateDevice extends Component<Props, State> {
                         autoCorrect="off"
                         autoCapitalize="off"
                         spellCheck="false"
-                    placeholder={ this.state.defaultName }
+                        className={ isUsed ? 'not-valid' : null }
+                        placeholder={ defaultName }
+                        ref={ (element) => { this.input = element; } }
                         onChange={ event => this.onNameChange(event.currentTarget.value) }
-                    defaultValue={ this.state.instanceName } />
-                <button onClick={ event => this.submit() }>Create new instance</button>
+                        defaultValue={ instanceName } />
+                    { isUsed ? <span className="error">Instance name is already in use</span> : null }
+                </div>
+                <button disabled={ isUsed } onClick={ event => this.submit() }>Create new instance</button>
                 <button className="white" onClick={ onCancel }>Cancel</button>
             </div>
         );

src/styles/modal.less

@@ -126,6 +126,11 @@
             padding: 14px 0px;
         }
 
+        .row {
+            position: relative;
+            text-align: left;
+            padding-bottom: 20px;
+
             label {
                 display: block;
                 padding-bottom: 6px;
@@ -133,7 +138,16 @@
                 color: @color_text_secondary;
             }
 
-        button {
+            .error {
+                position: absolute;
+                left: 0px;
+                bottom: 0px;
+                font-size: 12px;
+                color: @color_error_primary;
+            }
+        }
+
+        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({