Partial import processing

src/containers/SkynetImport/ImportList/Import/Import.css

@@ -0,0 +1,7 @@
+.ImportOwner {
+  display: flex;
+  overflow-y: auto;
+  overflow-x: auto;
+  margin: 0;
+  padding-bottom: var(--default_spacing);
+}

src/containers/SkynetImport/ImportList/Import/Import.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import './Import.css'
+
+export default ({data}) => {
+  return (
+    <div className={'ImportOwner'}>
+      <input readOnly
+             className={'ConfigurationItemInput'}
+             style={{maxWidth: 'calc(33.33% - var(--default_spacing)', marginRight: 'var(--default_spacing)'}}
+             type={'text'}
+             value={data.directory}/>
+      <input readOnly
+             className={'ConfigurationItemInput'}
+             style={{maxWidth: 'calc(33.33% - calc(var(--default_spacing) / 2))'}}
+             type={'text'}
+             value={data.skylink}/>
+      <input readOnly
+             className={'ConfigurationItemInput'}
+             style={{maxWidth: 'calc(33.33% - calc(var(--default_spacing) / 2))', marginLeft: 'var(--default_spacing)'}}
+             type={'text'}
+             value={data.token}/>
+    </div>
+  );
+};

src/containers/SkynetImport/ImportList/ImportList.css

@@ -0,0 +1,13 @@
+.ImportListOwner {
+  max-height: 56vh;
+  margin: 0;
+  padding: 0;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+.ImportListHeader {
+  margin: 0;
+  padding: 0;
+  display: flex;
+}

src/containers/SkynetImport/ImportList/ImportList.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import './ImportList.css'
+import Import from './Import/Import'
+import Text from '../../../components/UI/Text/Text';
+
+export default ({imports_array}) => {
+  let key = 0;
+  return (
+    <div>
+      <div className={'ImportListHeader'}>
+        <Text type={'Heading1'} text={'Directory'} style={{minWidth: '33.33%', maxWidth: '33.33%'}}/>
+        <Text type={'Heading1'} text={'Skylink'} style={{minWidth: '33.33%', maxWidth: '33.33%'}}/>
+        <Text type={'Heading1'} text={'Token'} style={{minWidth: '33.33%', maxWidth: '33.33%'}}/>
+      </div>
+      <hr/>
+      <div className={'ImportListOwner'}>
+        {
+          imports_array.map(data => {
+            return (
+              <div key={'import_' + key++}>
+                <Import data={data}/>
+              </div>
+            );
+          })
+        }
+      </div>
+    </div>
+  );
+};

src/containers/SkynetImport/SkynetImport.css

@@ -12,7 +12,7 @@
   box-sizing: border-box;
   resize: none;
   overflow-y: scroll;
-  overflow:-moz-scrollbars-horizontal;
+  overflow: -moz-scrollbars-horizontal;
   white-space: nowrap;
 }
 
@@ -21,6 +21,10 @@
   justify-content: space-between;
 }
 
+.SkynetActionButtons {
+  display: flex;
+}
+
 .SkynetImportHeading {
   text-align: center;
   padding-bottom: var(--default_spacing);

src/containers/SkynetImport/SkynetImport.js

@@ -4,7 +4,7 @@ import './SkynetImport.css'
 import Box from '../../components/UI/Box/Box';
 import Button from '../../components/UI/Button/Button';
 import {displaySkynetImport} from '../../redux/actions/skynet_actions';
-//import {ImportList} from './ImportList/ImportList'
+import ImportList from './ImportList/ImportList'
 import IPCContainer from '../IPCContainer/IPCContainer';
 import {notifyApplicationBusy} from '../../redux/actions/common_actions';
 import {
@@ -14,11 +14,12 @@ import {
 
 const Constants = require('../../constants');
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = state => {
   return {
     AppBusy: state.common.AppBusy,
   };
 };
+
 const mapDispatchToProps = dispatch => {
   return {
     displaySkynetImport: display => dispatch(displaySkynetImport(display)),
@@ -73,21 +74,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends IPCCon
     this.props.notifyInfo(msg)
   }
 
-  onImportSkylinksReply = (_, arg) => {
+  handleNavigation = () => {
-    this.props.notifyApplicationBusy(false);
-    if (arg.data.Success) {
-      console.log(arg.data.Result);
-      this.setState({
-        import_text: '',
-        imports_array: [],
-        second_stage: false,
-      });
-    } else {
-      this.props.notifyError(arg.data.Error);
-    }
-  };
-
-  processNext = () => {
     if (this.state.second_stage) {
       try {
         this.props.notifyApplicationBusy(true);
@@ -151,8 +138,21 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends IPCCon
     }
   }
 
+  onImportSkylinksReply = (_, arg) => {
+    this.props.notifyApplicationBusy(false);
+    if (arg.data.Success) {
+      console.log(arg.data.Result);
+      this.setState({
+        import_text: '',
+        imports_array: [],
+        second_stage: false,
+      });
+    } else {
+      this.props.notifyError(arg.data.Error);
+    }
+  };
+
   render() {
-    //<ImportList data={this.state.imports_array}/>
     return this.props.AppBusy ? (<div/>) : (
       <Box dxDark dxStyle={{
         height: 'auto',
@@ -165,10 +165,10 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends IPCCon
              onClick={() => this.props.displaySkynetImport(false)}
              style={{cursor: 'pointer'}}>X</a>
         </div>
-        <h1 className={'SkynetImportHeading'}>Import List</h1>
+        <h1 className={'SkynetImportHeading'}>{this.state.second_stage ? 'Verify Imports' : 'Import List'}</h1>
         {
           this.state.second_stage ? (
-            <div/>
+            <ImportList imports_array={this.state.imports_array}/>
           ) : (
             <textarea autoFocus={true}
                       className={'SkynetImportTextArea'}
@@ -182,12 +182,26 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends IPCCon
         <div className={'SkynetImportButtons'}>
           <Button buttonStyles={{height: 'auto', marginTop: 'var(--default_spacing)', width: 'auto'}}
                   clicked={this.displaySyntax}>Import Syntax...</Button>
-          <Button buttonStyles={{
+          <div className={'SkynetActionButtons'}>
-            height: 'auto',
+            {
-            marginLeft: 'var(--default_spacing)',
+              this.state.second_stage ?
-            marginTop: 'var(--default_spacing)',
+                <Button buttonStyles={{
-            width: 'auto'
+                  height: 'auto',
-          }} clicked={this.processNext}>{this.state.second_stage ? 'Import' : 'Next'}</Button>
+                  marginLeft: 'var(--default_spacing)',
+                  marginTop: 'var(--default_spacing)',
+                  width: 'auto'
+                }} clicked={() => this.setState({
+                  second_stage: false,
+                })}>{'Back'}</Button> :
+                null
+            }
+            <Button buttonStyles={{
+              height: 'auto',
+              marginLeft: 'var(--default_spacing)',
+              marginTop: 'var(--default_spacing)',
+              width: 'auto'
+            }} clicked={this.handleNavigation}>{this.state.second_stage ? 'Import' : 'Next'}</Button>
+          </div>
         </div>
       </Box>
     );

src/containers/UI/Password/Password.js

@@ -108,23 +108,26 @@ export default class extends Component {
 
   render() {
     return (
-      <div className={'PasswordOwner'}>
+      <div className={'PasswordOwner'} style={{...this.props.style}}>
-        <a href={'#'}
+        {
-           className={'PasswordLink'}
+          this.props.readOnly ? null : <a href={'#'}
-           onClick={this.handleActionClick}>
+                                          className={'PasswordLink'}
-          <u>{this.state.button_text}</u>
+                                          onClick={this.handleActionClick}>
-        </a>
+            <u>{this.state.button_text}</u>
+          </a>
+        }
         <input autoFocus={this.props.autoFocus}
+               readOnly={this.props.readOnly}
                className={'PasswordInput'}
                disabled={this.props.readOnly || (this.state.button_text === 'clear')}
                onChange={this.handlePasswordChanged}
                onKeyUp={this.handlePasswordKeyUp}
                type={this.state.show_password ? 'text' : 'password'}
-               value={(this.state.button_text === 'confirm') ? this.state.password2 : this.state.password} />
+               value={(this.state.button_text === 'confirm') ? this.state.password2 : this.state.password}/>
         <a href={'#'}
            className={'PasswordShowHide'}
            onClick={this.handleShowHideClick}>
-          <FontAwesomeIcon icon={this.state.show_password ? faEye : faEyeSlash} />
+          <FontAwesomeIcon icon={this.state.show_password ? faEye : faEyeSlash}/>
         </a>
       </div>
     );