enter the code page

package.json

@@ -14,10 +14,11 @@
   "license": "MIT",
   "dependencies": {
     "lokijs": "^1.5.1",
-    "prop-types": "^15.6.0",
     "mobx": "^3.3.1",
     "mobx-react": "^4.3.3",
+    "prop-types": "^15.6.0",
     "react": "^16.0.0",
+    "react-digit-input": "^1.0.0",
     "react-dom": "^16.0.0",
     "react-interactive": "^0.8.1",
     "react-router": "^3.2.0",

src/Base.js

@@ -63,7 +63,7 @@ function App({ children, routes }) {
                       <li id="unity-nav9" className={language}></li>
                     </ul>
                     <ul id="unityETC-sprite" className={language}>
-                      <li id="unity-nav10" className={language}><a href={`#`}><span>Enter the Code</span></a></li>
+                      <li id="unity-nav10" className={language}><a href={`/EnterTheCode`}><span>Enter the Code</span></a></li>
                     </ul>
                   </div>
                 </div>

src/components/account/EnterTheCode.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import Interactive from 'react-interactive';
+import { Link } from 'react-router';
+import style from '../../styles/style';
+import DigitInput from 'react-digit-input';
+import {observable} from "mobx";
+import {observer, inject} from 'mobx-react';
+
+const s = Object.create(style);
+s.input = {
+  width: '1em',
+  height: '1em',
+  font: 'inherit',
+  textAlign: 'center',
+  margin: '0.1em',
+}
+
+s.inputGroup = {
+  // display: 'flex',
+  alignItems: 'center',
+}
+
+s.hyphen = {
+  background: 'white',
+  height: '0.1em',
+  width: '.5em',
+  display: 'inline-block',
+}
+
+@inject((stores, props, context) => props) @observer
+export default class EnterTheCode extends React.Component {
+  @observable code = "";
+  @observable message = "";
+
+  render() {
+    let validate = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      console.log(this.message);
+      this.message = "Sorry, this feature doesn't exist :(";
+      console.log(this.message);
+    }
+
+    return(
+      <div>
+        <DigitInput
+          acceptedCharacters={/^[0-9a-z]$/i}
+          length={12}
+          value={this.code}
+          onChange={(value) => this.code = value}
+        >
+        {props => (
+          <div style={s.inputGroup}>
+            <input type="text" style={s.input} {...props[0]} />
+            <input type="text" style={s.input} {...props[1]} />
+            <input type="text" style={s.input} {...props[2]} />
+            <input type="text" style={s.input} {...props[3]} />
+            <span style={s.hyphen} />
+            <input type="text" style={s.input} {...props[4]} />
+            <input type="text" style={s.input} {...props[5]} />
+            <input type="text" style={s.input} {...props[6]} />
+            <input type="text" style={s.input} {...props[7]} />
+            <span style={s.hyphen} />
+            <input type="text" style={s.input} {...props[8]} />
+            <input type="text" style={s.input} {...props[9]} />
+            <input type="text" style={s.input} {...props[10]} />
+            <input type="text" style={s.input} {...props[11]} />
+          </div>
+        )}
+        </DigitInput>
+        <br />
+        <button onClick={validate}>Validate Code</button>
+        <br /><br />
+        <span style={{'color': 'red'}}>{this.message}</span>
+      </div>
+    );
+  }
+}

src/index.js

@@ -9,6 +9,7 @@ import UnderConstruction from './components/UnderConstruction';
 
 /* Home Component */
 import Home from './components/Home';
+import EnterTheCode from './components/account/EnterTheCode';
 
 /* Test Components */
 import ExampleComponent from './components/ExampleComponent';
@@ -47,6 +48,9 @@ const routes = (
     {/* Construction */}
     <Route path="Construction" component={UnderConstruction} />
 
+    {/* EnterTheCode */}
+    <Route path="EnterTheCode" component={EnterTheCode} />
+
     {/* Collection */}
     <Route path="collection/" mapMenuTitle="Collection">
       <IndexRoute component={CollectionHome} />