From 9e28a3a8dda043ede4702a4974d0c7beebbbce8e Mon Sep 17 00:00:00 2001
From: Daniel Gonzalez <danielhumgon@gmail.com>
Date: Thu, 11 Jun 2020 19:08:39 -0400
Subject: [PATCH] feat(settings): Added settings view

---
 src/components/admin-lte/admin-lte.css      |  3 +
 src/components/admin-lte/index.js           |  6 +-
 src/components/admin-lte/portfolio/index.js | 97 ---------------------
 src/components/admin-lte/settings/create.js | 41 +++++++++
 src/components/admin-lte/settings/import.js | 90 +++++++++++++++++++
 src/components/admin-lte/settings/index.js  | 24 +++++
 src/components/admin-lte/settings/info.js   | 45 ++++++++++
 7 files changed, 206 insertions(+), 100 deletions(-)
 delete mode 100644 src/components/admin-lte/portfolio/index.js
 create mode 100644 src/components/admin-lte/settings/create.js
 create mode 100644 src/components/admin-lte/settings/import.js
 create mode 100644 src/components/admin-lte/settings/index.js
 create mode 100644 src/components/admin-lte/settings/info.js

diff --git a/src/components/admin-lte/admin-lte.css b/src/components/admin-lte/admin-lte.css
index 880d149..fc33af2 100644
--- a/src/components/admin-lte/admin-lte.css
+++ b/src/components/admin-lte/admin-lte.css
@@ -12,3 +12,6 @@
     text-align: center;
 
 }
+#import-mnemonic{
+    text-transform: lowercase;
+}
\ No newline at end of file
diff --git a/src/components/admin-lte/index.js b/src/components/admin-lte/index.js
index e3c3df9..df9a07e 100644
--- a/src/components/admin-lte/index.js
+++ b/src/components/admin-lte/index.js
@@ -2,7 +2,7 @@ import React from "react"
 import Audit from "./audit"
 import Configure from "./configure"
 import Icons from "./icons"
-import Portfolio from "./portfolio"
+import Settings from "./settings"
 
 import AdminLTE, { Sidebar } from "adminlte-2-react"
 
@@ -21,7 +21,7 @@ class AdminLTEPage extends React.Component {
   }
 
   sidebar = [
-    <Item icon="fas-wallet" key="Portfolio" text="Portfolio" to="/Portfolio" />,
+    <Item icon="fas-cogs" key="Portfolio" text="Settings" to="/Settings" />,
     <Item icon="fas-icons" key="Icons" text="Icons" to="/Icons" />,
     <Item icon="fas-cog" key="Configure" text="Configure" to="/Configure" />,
     <Item icon="fa-tablet-alt" key="Audit" text="Audit" to="/Audit" />,
@@ -57,7 +57,7 @@ class AdminLTEPage extends React.Component {
 
             {_this.sidebar}
           </Sidebar.Core>
-          <Portfolio path="/Portfolio" />
+          <Settings path="/Settings" />
           <Icons path="/Icons" />
           <Configure path="/Configure" />
           <Audit path="/Audit" />
diff --git a/src/components/admin-lte/portfolio/index.js b/src/components/admin-lte/portfolio/index.js
deleted file mode 100644
index c9c913c..0000000
--- a/src/components/admin-lte/portfolio/index.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from "react"
-
-import { Content, Row, Col, Box, Button } from "adminlte-2-react"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-
-class Portfolio extends React.Component {
-  state = {}
-
-  render() {
-    return (
-      <Content >
-        <Row>
-          <Col  sm={2} />
-          <Col  sm={8}>
-            <Box className="hover-shadow border-none mt-2">
-              <Row>
-                <Col sm={12} className="text-center">
-                  <h1>
-                    <FontAwesomeIcon 
-                    className="title-icon"
-                    size="xs" 
-                    icon={"plus"} />
-                    <span>New Wallet</span>
-                  </h1>
-                </Col>
-                <Col sm={12} className="text-center mt-2 mb-2">
-                  <Button
-                    text="Create Wallet"
-                    type="primary"
-                    className="btn-lg"
-                  />
-                </Col>
-              </Row>
-            </Box>
-          </Col>
-          <Col  sm={2} />
-        </Row>
-
-        <Row>
-        <Col sm={2} />
-          <Col sm={8}>
-            <Box className="hover-shadow border-none mt-2">
-              <Row>
-                <Col sm={12} className="text-center">
-                  <h1>
-                    <FontAwesomeIcon 
-                    className="title-icon"
-                    size="xs" 
-                    icon={"file-import"} />
-                    <span>Import Wallet</span>
-                  </h1>
-                </Col>
-
-                <Col sm={12} className="text-center mt-2 mb-2">
-                  <Button text="Import" type="primary" className="btn-lg" />
-                </Col>
-              </Row>
-            </Box>
-          </Col>
-          <Col sm={2} />
-        </Row>
-
-        <Row>
-        <Col sm={2} />
-          <Col sm={8}>
-            <Box className="hover-shadow border-none mt-2">
-              <Row>
-                <Col sm={12} className="text-center">
-                  <h1>
-                    <FontAwesomeIcon 
-                    className="title-icon"
-                    size="xs" 
-                    icon={"exclamation-triangle"} />
-                    <span>Webs Wallets</span>
-                  </h1>
-                </Col>
-
-                <Col sm={12} className="text-center mt-2 mb-2">
-                  <p>
-                    Bitcoin.com Mint is an open source, non-custodial web wallet
-                    supporting SLP and BCH. Web wallets offer user convenience,
-                    but storing large amounts of money on a web wallet is not
-                    recommended. Creating your own SLP tokens only costs a few
-                    cents worth of BCH.
-                  </p>
-                </Col>
-              </Row>
-            </Box>
-          </Col>
-          <Col sm={2} />
-        </Row>
-      </Content>
-    )
-  }
-}
-
-export default Portfolio
diff --git a/src/components/admin-lte/settings/create.js b/src/components/admin-lte/settings/create.js
new file mode 100644
index 0000000..5fe5c23
--- /dev/null
+++ b/src/components/admin-lte/settings/create.js
@@ -0,0 +1,41 @@
+import React from "react"
+
+import { Row, Col, Box, Button } from "adminlte-2-react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+class NewWallet extends React.Component {
+  state = {}
+
+  render() {
+    return (
+      <Row>
+        <Col sm={2} />
+        <Col sm={8}>
+          <Box className="hover-shadow border-none mt-2">
+            <Row>
+              <Col sm={12} className="text-center">
+                <h1>
+                  <FontAwesomeIcon
+                    className="title-icon"
+                    size="xs"
+                    icon={"plus"}
+                  />
+                  <span>New Wallet</span>
+                </h1>
+              </Col>
+              <Col sm={12} className="text-center mt-2 mb-2">
+                <Button
+                  text="Create Wallet"
+                  type="primary"
+                  className="btn-lg"
+                />
+              </Col>
+            </Row>
+          </Box>
+        </Col>
+        <Col sm={2} />
+      </Row>
+    )
+  }
+}
+
+export default NewWallet
diff --git a/src/components/admin-lte/settings/import.js b/src/components/admin-lte/settings/import.js
new file mode 100644
index 0000000..754718d
--- /dev/null
+++ b/src/components/admin-lte/settings/import.js
@@ -0,0 +1,90 @@
+import React from "react"
+
+import { Row, Col, Box, Button, Inputs } from "adminlte-2-react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+const { Text } = Inputs
+
+let _this
+class ImportWallet extends React.Component {
+  constructor(props) {
+    super(props)
+
+    _this = this
+
+    this.state = {
+      mnemonic: "",
+      privateKey: "",
+    }
+  }
+
+  render() {
+    return (
+      <Row className="">
+        <Col sm={2} />
+        <Col sm={8}>
+          <Box className="hover-shadow border-none mt-2">
+            <Row>
+              <Col sm={12} className="text-center">
+                <h1>
+                  <FontAwesomeIcon
+                    className="title-icon"
+                    size="xs"
+                    icon={"file-import"}
+                  />
+                  <span>Import Wallet</span>
+                </h1>
+              </Col>
+              <Col sm={12} className="text-center mt-2 mb-2">
+                <Row className="flex justify-content-center">
+                  <Col sm={8}>
+                    <div>
+                      <Text
+                        id="import-mnemonic"
+                        name="mnemonic"
+                        placeholder="12 word mnemonic"
+                        label="12 word mnemonic"
+                        labelPosition="above"
+                        maxlength={12}
+                        onChange={_this.handleUpdate}
+                      />
+                      <Text
+                        id="privateKey"
+                        name="privateKey"
+                        placeholder="Private Key"
+                        label="Private Key"
+                        labelPosition="above"
+                        onChange={_this.handleUpdate}
+                      />
+                    </div>
+                  </Col>
+                </Row>
+              </Col>
+
+              <Col sm={12} className="text-center mt-2 mb-2">
+                <Button text="Import" type="primary" className="btn-lg" />
+              </Col>
+            </Row>
+          </Box>
+        </Col>
+        <Col sm={2} />
+      </Row>
+    )
+  }
+  componentDidMount(){
+    // add max length property to mnemonic input
+    document.getElementById("import-mnemonic").maxLength = "12";
+
+  }
+  handleUpdate(event) {
+    let value = event.target.value
+    if (event.target.name === "mnemonic") {
+      value = value.toLowerCase()
+    }
+    _this.setState({
+      [event.target.name]: value,
+    })
+    //console.log(_this.state)
+  }
+}
+
+export default ImportWallet
diff --git a/src/components/admin-lte/settings/index.js b/src/components/admin-lte/settings/index.js
new file mode 100644
index 0000000..be12343
--- /dev/null
+++ b/src/components/admin-lte/settings/index.js
@@ -0,0 +1,24 @@
+import React from "react"
+
+import { Content } from "adminlte-2-react"
+import ImportWallet from "./import"
+import NewWallet from "./create"
+import InfoWallets from "./info"
+
+class Settings extends React.Component {
+  state = {}
+
+  render() {
+    return (
+      <>
+        <Content>
+          <NewWallet />
+          <ImportWallet />
+          <InfoWallets />
+        </Content>
+      </>
+    )
+  }
+}
+
+export default Settings
diff --git a/src/components/admin-lte/settings/info.js b/src/components/admin-lte/settings/info.js
new file mode 100644
index 0000000..1632766
--- /dev/null
+++ b/src/components/admin-lte/settings/info.js
@@ -0,0 +1,45 @@
+import React from "react"
+
+import { Row, Col, Box } from "adminlte-2-react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+class InfoWallets extends React.Component {
+  state = {}
+
+  render() {
+    return (
+      <Row>
+        <Col sm={2} />
+        <Col sm={8}>
+          <Box className="hover-shadow border-none mt-2">
+            <Row>
+              <Col sm={12} className="text-center">
+                <h1>
+                  <FontAwesomeIcon
+                    className="title-icon"
+                    size="xs"
+                    icon={"exclamation-triangle"}
+                  />
+                  <span>Webs Wallets</span>
+                </h1>
+              </Col>
+
+              <Col sm={12} className="text-center mt-2 mb-2">
+                <p>
+                  Bitcoin.com Mint is an open source, non-custodial web wallet
+                  supporting SLP and BCH. Web wallets offer user convenience,
+                  but storing large amounts of money on a web wallet is not
+                  recommended. Creating your own SLP tokens only costs a few
+                  cents worth of BCH.
+                </p>
+              </Col>
+            </Row>
+          </Box>
+        </Col>
+        <Col sm={2} />
+      </Row>
+    )
+  }
+}
+
+export default InfoWallets