From 5e57f0b36925e5e48b1040996d0ddf50a2d60554 Mon Sep 17 00:00:00 2001
From: Jason Brown <browniefed@gmail.com>
Date: Sat, 29 Dec 2018 15:06:52 -0800
Subject: [PATCH 1/4] Add in code input

---
 src/App.js    | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 src/input.css | 28 ++++++++++++++++++++
 2 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 src/input.css

diff --git a/src/App.js b/src/App.js
index 9fe7672..56cef04 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,77 @@
 import React, { Component } from "react";
+import "./input.css";
+
+const CODE_LENGTH = new Array(6).fill(0);
 
 class App extends Component {
+  inputRefs = CODE_LENGTH.map(() => React.createRef());
+  state = {
+    value: "",
+  };
+  handleKeyUp = (e, index) => {
+    e.persist();
+    if (e.key === "Backspace") {
+      if (this.state.value.length !== 0) {
+        this.inputRefs[this.state.value.length - 1].current.focus();
+      }
+    }
+  };
+  handleChange = (e, index) => {
+    let inputValue = e.target.value.slice(-1);
+
+    this.setState(
+      state => {
+        let valueLength = state.value.length - 1;
+        let value = state.value;
+
+        let newValue = inputValue === "" ? value.slice(0, valueLength) : value + inputValue;
+
+        if (index - 1 !== valueLength) {
+          newValue = value.slice(0, index) + inputValue + value.slice(index, valueLength);
+        }
+
+        return {
+          value: newValue,
+        };
+      },
+      () => {
+        if (index !== CODE_LENGTH.length - 1) {
+          this.inputRefs[this.state.value.length].current.focus();
+        }
+      },
+    );
+  };
+  handleFocus = index => {
+    if (this.state.value.length - 1 !== index) {
+      let focusIndex =
+        this.state.value.length !== CODE_LENGTH.length
+          ? this.state.value.length
+          : CODE_LENGTH.length - 1;
+
+      this.inputRefs[focusIndex].current.focus();
+    }
+  };
   render() {
-    return <div className="App" />;
+    const values = this.state.value.split("");
+
+    return (
+      <div className="App">
+        <div className="wrap">
+          {CODE_LENGTH.map((v, index) => {
+            return (
+              <input
+                className="input"
+                value={values[index]}
+                ref={this.inputRefs[index]}
+                onKeyUp={e => this.handleKeyUp(e, index)}
+                onChange={e => this.handleChange(e, index)}
+                onFocus={() => this.handleFocus(index)}
+              />
+            );
+          })}
+        </div>
+      </div>
+    );
   }
 }
 
diff --git a/src/input.css b/src/input.css
new file mode 100644
index 0000000..0a06b28
--- /dev/null
+++ b/src/input.css
@@ -0,0 +1,28 @@
+.App {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+.wrap {
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  display: inline-block;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.input {
+  width: 30px;
+  height: 52px;
+  border: none;
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  font-size: 32px;
+  font-weight: bold;
+  text-align: center;
+  color: #333;
+  outline: 0;
+}
+
+.input:last-child {
+  border-right: none;
+}

From 7f3d18d4d74864c7058983d388efde68cd3d540d Mon Sep 17 00:00:00 2001
From: Jason Brown <browniefed@gmail.com>
Date: Sat, 29 Dec 2018 17:08:08 -0800
Subject: [PATCH 2/4] Fixes

---
 src/App.js    | 106 +++++++++++++++++++++++++++-----------------------
 src/input.css |  37 +++++++++++++-----
 2 files changed, 85 insertions(+), 58 deletions(-)

diff --git a/src/App.js b/src/App.js
index 56cef04..5a385f9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,69 +4,79 @@ import "./input.css";
 const CODE_LENGTH = new Array(6).fill(0);
 
 class App extends Component {
-  inputRefs = CODE_LENGTH.map(() => React.createRef());
+  input = React.createRef();
   state = {
     value: "",
+    focused: false,
   };
-  handleKeyUp = (e, index) => {
-    e.persist();
-    if (e.key === "Backspace") {
-      if (this.state.value.length !== 0) {
-        this.inputRefs[this.state.value.length - 1].current.focus();
-      }
-    }
-  };
-  handleChange = (e, index) => {
-    let inputValue = e.target.value.slice(-1);
-
-    this.setState(
-      state => {
-        let valueLength = state.value.length - 1;
-        let value = state.value;
-
-        let newValue = inputValue === "" ? value.slice(0, valueLength) : value + inputValue;
-
-        if (index - 1 !== valueLength) {
-          newValue = value.slice(0, index) + inputValue + value.slice(index, valueLength);
-        }
 
+  handleClick = () => {
+    this.input.current.focus();
+  };
+  handleFocus = () => {
+    this.setState({ focused: true });
+  };
+  handleBlur = () => {
+    this.setState({
+      focused: false,
+    });
+  };
+  handleKeyUp = e => {
+    if (e.key === "Backspace") {
+      this.setState(state => {
         return {
-          value: newValue,
+          value: state.value.slice(0, state.value.length - 1),
         };
-      },
-      () => {
-        if (index !== CODE_LENGTH.length - 1) {
-          this.inputRefs[this.state.value.length].current.focus();
-        }
-      },
-    );
+      });
+    }
   };
-  handleFocus = index => {
-    if (this.state.value.length - 1 !== index) {
-      let focusIndex =
-        this.state.value.length !== CODE_LENGTH.length
-          ? this.state.value.length
-          : CODE_LENGTH.length - 1;
+  handleChange = e => {
+    const value = e.target.value;
 
-      this.inputRefs[focusIndex].current.focus();
-    }
+    this.setState(state => {
+      if (state.value.length >= CODE_LENGTH.length) return null;
+      return {
+        value: (state.value + value).slice(0, CODE_LENGTH.length),
+      };
+    });
   };
   render() {
-    const values = this.state.value.split("");
+    const { value, focused } = this.state;
+
+    const values = value.split("");
+    const selectedIndex =
+      values.length < CODE_LENGTH.length ? values.length : CODE_LENGTH.length - 1;
+
+    const hideInput = !(values.length < CODE_LENGTH.length);
 
     return (
       <div className="App">
-        <div className="wrap">
+        <div className="wrap" onClick={this.handleClick}>
+          <input
+            value=""
+            ref={this.input}
+            onChange={this.handleChange}
+            onKeyUp={this.handleKeyUp}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+            className="input"
+            style={{
+              width: "32px",
+              top: "0px",
+              bottom: "0px",
+              left: `${selectedIndex * 32}px`,
+              opacity: hideInput ? 0 : 1,
+            }}
+          />
           {CODE_LENGTH.map((v, index) => {
+            const selected = values.length === index;
+            const filled = values.length === CODE_LENGTH.length && index === CODE_LENGTH.length - 1;
+
             return (
-              <input
-                className="input"
-                value={values[index]}
-                ref={this.inputRefs[index]}
-                onKeyUp={e => this.handleKeyUp(e, index)}
-                onChange={e => this.handleChange(e, index)}
-                onFocus={() => this.handleFocus(index)}
-              />
+              <div className="display">
+                {values[index]}
+                {(selected || filled) && focused && <div className="shadows" />}
+              </div>
             );
           })}
         </div>
diff --git a/src/input.css b/src/input.css
index 0a06b28..f91f0f3 100644
--- a/src/input.css
+++ b/src/input.css
@@ -4,25 +4,42 @@
   justify-content: center;
   height: 100vh;
 }
+
 .wrap {
   border: 1px solid rgba(0, 0, 0, 0.2);
   display: inline-block;
-  border-radius: 10px;
-  overflow: hidden;
+  /* border-radius: 10px; */
+  position: relative;
+  display: flex;
 }
 
 .input {
-  width: 30px;
-  height: 52px;
+  position: absolute;
   border: none;
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
   font-size: 32px;
-  font-weight: bold;
   text-align: center;
-  color: #333;
-  outline: 0;
+  background-color: transparent;
+  outline: none;
 }
-
-.input:last-child {
+.display {
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  width: 32px;
+  height: 58px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  position: relative;
+}
+.display:last-child {
   border-right: none;
 }
+
+.shadows {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  box-shadow: 0 0 0 4px rgba(58, 151, 212, 0.28);
+}

From e228edc877e811b7b6cd709fa5b7d03f574eb380 Mon Sep 17 00:00:00 2001
From: Jason Brown <browniefed@gmail.com>
Date: Sat, 29 Dec 2018 17:22:50 -0800
Subject: [PATCH 3/4] Code fixes

---
 src/App.js    | 1 +
 src/input.css | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 5a385f9..3ab804c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -44,6 +44,7 @@ class App extends Component {
     const { value, focused } = this.state;
 
     const values = value.split("");
+    
     const selectedIndex =
       values.length < CODE_LENGTH.length ? values.length : CODE_LENGTH.length - 1;
 
diff --git a/src/input.css b/src/input.css
index f91f0f3..f859be4 100644
--- a/src/input.css
+++ b/src/input.css
@@ -8,7 +8,6 @@
 .wrap {
   border: 1px solid rgba(0, 0, 0, 0.2);
   display: inline-block;
-  /* border-radius: 10px; */
   position: relative;
   display: flex;
 }

From ebb5c40dce3b9b91bf7681470d22a0bb20029a18 Mon Sep 17 00:00:00 2001
From: fs-projects <fs.projectsuk@gmail.com>
Date: Mon, 27 Apr 2020 19:33:09 +0530
Subject: [PATCH 4/4] Add key prop to display divs

---
 src/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 3ab804c..a906732 100644
--- a/src/App.js
+++ b/src/App.js
@@ -74,7 +74,7 @@ class App extends Component {
             const filled = values.length === CODE_LENGTH.length && index === CODE_LENGTH.length - 1;
 
             return (
-              <div className="display">
+              <div className="display" key={index}>
                 {values[index]}
                 {(selected || filled) && focused && <div className="shadows" />}
               </div>