From 8eb94b89a2e6fe0a5aefeb94db0e6372537f12f1 Mon Sep 17 00:00:00 2001
From: Treasure Ajefu <treasureajefu@gmail.com>
Date: Tue, 29 Nov 2022 22:18:12 +0100
Subject: [PATCH 1/3] feat: added base otp code

---
 src/pages/VerifyNumber.jsx | 107 +++++++++++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 src/pages/VerifyNumber.jsx

diff --git a/src/pages/VerifyNumber.jsx b/src/pages/VerifyNumber.jsx
new file mode 100644
index 0000000..4a0b070
--- /dev/null
+++ b/src/pages/VerifyNumber.jsx
@@ -0,0 +1,107 @@
+import React from 'react';
+
+class Otpinput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { value: '', otp1: '', otp2: '', otp3: '', otp4: '', otp5: '', disable: true };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange(value1, event) {
+    this.setState({ [value1]: event.target.value });
+  }
+
+  handleSubmit(event) {
+    const data = new FormData(event.target);
+    console.log(this.state);
+    event.preventDefault();
+  }
+
+  inputfocus = (elmnt) => {
+    if (elmnt.key === 'Delete' || elmnt.key === 'Backspace') {
+      const next = elmnt.target.tabIndex - 2;
+      if (next > -1) {
+        elmnt.target.form.elements[next].focus();
+      }
+    } else {
+      console.log('next');
+
+      const next = elmnt.target.tabIndex;
+      if (next < 5) {
+        elmnt.target.form.elements[next].focus();
+      }
+    }
+  };
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <div className="otpContainer">
+          <input
+            name="otp1"
+            type="text"
+            autoComplete="off"
+            className="otpInput"
+            value={this.state.otp1}
+            onKeyPress={this.keyPressed}
+            onChange={(e) => this.handleChange('otp1', e)}
+            tabIndex="1"
+            maxLength="1"
+            onKeyUp={(e) => this.inputfocus(e)}
+          />
+          <input
+            name="otp2"
+            type="text"
+            autoComplete="off"
+            className="otpInput"
+            value={this.state.otp2}
+            onChange={(e) => this.handleChange('otp2', e)}
+            tabIndex="2"
+            maxLength="1"
+            onKeyUp={(e) => this.inputfocus(e)}
+          />
+          <input
+            name="otp3"
+            type="text"
+            autoComplete="off"
+            className="otpInput"
+            value={this.state.otp3}
+            onChange={(e) => this.handleChange('otp3', e)}
+            tabIndex="3"
+            maxLength="1"
+            onKeyUp={(e) => this.inputfocus(e)}
+          />
+          <input
+            name="otp4"
+            type="text"
+            autoComplete="off"
+            className="otpInput"
+            value={this.state.otp4}
+            onChange={(e) => this.handleChange('otp4', e)}
+            tabIndex="4"
+            maxLength="1"
+            onKeyUp={(e) => this.inputfocus(e)}
+          />
+
+          <input
+            name="otp5"
+            type="text"
+            autoComplete="off"
+            className="otpInput"
+            value={this.state.otp5}
+            onChange={(e) => this.handleChange('otp5', e)}
+            tabIndex="5"
+            maxLength="1"
+            onKeyUp={(e) => this.inputfocus(e)}
+          />
+        </div>
+        <Button className="primary" type="submit">
+          Submit
+        </Button>
+      </form>
+    );
+  }
+}
+
+export default Otpinput;

From 01c9de22c39b618bc3c278259dda749dbc2378fe Mon Sep 17 00:00:00 2001
From: Treasure Ajefu <treasureajefu@gmail.com>
Date: Wed, 30 Nov 2022 15:07:55 +0100
Subject: [PATCH 2/3] feat: developed verify by number page

---
 src/App.js                 |   3 +-
 src/pages/VerifyNumber.jsx | 154 +++++++++++++++++++++----------------
 2 files changed, 90 insertions(+), 67 deletions(-)

diff --git a/src/App.js b/src/App.js
index 9b33013..874ba35 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,8 @@
+import VerifyNumber from './pages/VerifyNumber';
 function App() {
   return (
     <div>
-      <h1>Welcome to the fintech App</h1>
+      <VerifyNumber />
     </div>
   );
 }
diff --git a/src/pages/VerifyNumber.jsx b/src/pages/VerifyNumber.jsx
index 4a0b070..dd2448c 100644
--- a/src/pages/VerifyNumber.jsx
+++ b/src/pages/VerifyNumber.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import Button from '../components/General/Button/Button';
 class Otpinput extends React.Component {
   constructor(props) {
     super(props);
@@ -13,9 +13,9 @@ class Otpinput extends React.Component {
   }
 
   handleSubmit(event) {
-    const data = new FormData(event.target);
+    new FormData(event.target);
     console.log(this.state);
-    event.preventDefault();
+    event.preventDefault;
   }
 
   inputfocus = (elmnt) => {
@@ -36,70 +36,92 @@ class Otpinput extends React.Component {
 
   render() {
     return (
-      <form onSubmit={this.handleSubmit}>
-        <div className="otpContainer">
-          <input
-            name="otp1"
-            type="text"
-            autoComplete="off"
-            className="otpInput"
-            value={this.state.otp1}
-            onKeyPress={this.keyPressed}
-            onChange={(e) => this.handleChange('otp1', e)}
-            tabIndex="1"
-            maxLength="1"
-            onKeyUp={(e) => this.inputfocus(e)}
-          />
-          <input
-            name="otp2"
-            type="text"
-            autoComplete="off"
-            className="otpInput"
-            value={this.state.otp2}
-            onChange={(e) => this.handleChange('otp2', e)}
-            tabIndex="2"
-            maxLength="1"
-            onKeyUp={(e) => this.inputfocus(e)}
-          />
-          <input
-            name="otp3"
-            type="text"
-            autoComplete="off"
-            className="otpInput"
-            value={this.state.otp3}
-            onChange={(e) => this.handleChange('otp3', e)}
-            tabIndex="3"
-            maxLength="1"
-            onKeyUp={(e) => this.inputfocus(e)}
-          />
-          <input
-            name="otp4"
-            type="text"
-            autoComplete="off"
-            className="otpInput"
-            value={this.state.otp4}
-            onChange={(e) => this.handleChange('otp4', e)}
-            tabIndex="4"
-            maxLength="1"
-            onKeyUp={(e) => this.inputfocus(e)}
-          />
+      <div className="flex items-center h-screen justify-center sm:w-screen">
+        <main className="sm:max-w-xl sm:my-auto sm:rounded-md sm:h-fit sm:w-full sm:shadow-xl flex flex-col justify-between items-center h-screen mt-12 sm:mt-auto p-6">
+          <section>
+            <h1 className="text-center text-3xl font-custom font-medium mt-12">
+              Verify your Identity
+            </h1>
+            <p className="text-text-2 my-4">
+              Enter the verification code sent to your phone number ending in -57
+            </p>
+            <form onSubmit={this.handleSubmit}>
+              <div className="flex justify-between mx-auto my-4 max-w-sm space-x-2">
+                <input
+                  name="otp1"
+                  type="text"
+                  autoComplete="off"
+                  className="border border-outline w-14 h-14 p-3 text-center"
+                  value={this.state.otp1}
+                  onKeyPress={this.keyPressed}
+                  onChange={(e) => this.handleChange('otp1', e)}
+                  tabIndex="1"
+                  maxLength="1"
+                  onKeyUp={(e) => this.inputfocus(e)}
+                />
+                <input
+                  name="otp2"
+                  type="text"
+                  autoComplete="off"
+                  className="border border-outline w-14 h-14 p-3  text-lg text-center"
+                  value={this.state.otp2}
+                  onChange={(e) => this.handleChange('otp2', e)}
+                  tabIndex="2"
+                  maxLength="1"
+                  onKeyUp={(e) => this.inputfocus(e)}
+                />
+                <input
+                  name="otp3"
+                  type="text"
+                  autoComplete="off"
+                  className="border border-outline w-14 h-14 p-3  text-lg text-center"
+                  value={this.state.otp3}
+                  onChange={(e) => this.handleChange('otp3', e)}
+                  tabIndex="3"
+                  maxLength="1"
+                  onKeyUp={(e) => this.inputfocus(e)}
+                />
+                <input
+                  name="otp4"
+                  type="text"
+                  autoComplete="off"
+                  className="border border-outline w-14 h-14 p-3  text-lg text-center"
+                  value={this.state.otp4}
+                  onChange={(e) => this.handleChange('otp4', e)}
+                  tabIndex="4"
+                  maxLength="1"
+                  onKeyUp={(e) => this.inputfocus(e)}
+                />
 
-          <input
-            name="otp5"
-            type="text"
-            autoComplete="off"
-            className="otpInput"
-            value={this.state.otp5}
-            onChange={(e) => this.handleChange('otp5', e)}
-            tabIndex="5"
-            maxLength="1"
-            onKeyUp={(e) => this.inputfocus(e)}
-          />
-        </div>
-        <Button className="primary" type="submit">
-          Submit
-        </Button>
-      </form>
+                <input
+                  name="otp5"
+                  type="text"
+                  autoComplete="off"
+                  className="border border-outline w-14 h-14 p-3 text-lg text-center"
+                  value={this.state.otp5}
+                  onChange={(e) => this.handleChange('otp5', e)}
+                  tabIndex="5"
+                  maxLength="1"
+                  onKeyUp={(e) => this.inputfocus(e)}
+                />
+              </div>
+              <div className="flex justify-between my-4">
+                <p>
+                  Didn&apos;t recieve code? <span className="text-primary-300">Resend</span>
+                </p>
+                <span className="text-warningstate">30s</span>
+              </div>
+              <Button className="primary" type="submit">
+                Sign In
+              </Button>
+            </form>
+          </section>
+          <section className="block text-primary-300 mb-24 sm:mb-auto sm:my-14">
+            <p className="text-center">Use another method to recieve the code</p>
+            <p className="text-center">Sign in to a different account</p>
+          </section>
+        </main>
+      </div>
     );
   }
 }

From 58794cf58b5246e186430b9ef0d0bfca72b8d447 Mon Sep 17 00:00:00 2001
From: Treasure Ajefu <treasureajefu@gmail.com>
Date: Wed, 30 Nov 2022 15:11:07 +0100
Subject: [PATCH 3/3] feat: developed verify by email page

---
 src/App.js                |   3 +-
 src/pages/VerifyEmail.jsx | 129 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 130 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/VerifyEmail.jsx

diff --git a/src/App.js b/src/App.js
index 874ba35..9b33013 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,7 @@
-import VerifyNumber from './pages/VerifyNumber';
 function App() {
   return (
     <div>
-      <VerifyNumber />
+      <h1>Welcome to the fintech App</h1>
     </div>
   );
 }
diff --git a/src/pages/VerifyEmail.jsx b/src/pages/VerifyEmail.jsx
new file mode 100644
index 0000000..d766e21
--- /dev/null
+++ b/src/pages/VerifyEmail.jsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import Button from '../components/General/Button/Button';
+class Otpinput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { value: '', otp1: '', otp2: '', otp3: '', otp4: '', otp5: '', disable: true };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange(value1, event) {
+    this.setState({ [value1]: event.target.value });
+  }
+
+  handleSubmit(event) {
+    new FormData(event.target);
+    console.log(this.state);
+    event.preventDefault;
+  }
+
+  inputfocus = (elmnt) => {
+    if (elmnt.key === 'Delete' || elmnt.key === 'Backspace') {
+      const next = elmnt.target.tabIndex - 2;
+      if (next > -1) {
+        elmnt.target.form.elements[next].focus();
+      }
+    } else {
+      console.log('next');
+
+      const next = elmnt.target.tabIndex;
+      if (next < 5) {
+        elmnt.target.form.elements[next].focus();
+      }
+    }
+  };
+
+  render() {
+    return (
+      <div className="flex items-center h-screen justify-center sm:w-screen">
+        <main className="sm:max-w-xl sm:my-auto sm:rounded-md sm:h-fit sm:w-full sm:shadow-xl flex flex-col justify-between items-center h-screen mt-12 sm:mt-auto p-6">
+          <section>
+            <h1 className="text-center text-3xl font-custom font-medium mt-12">
+              Verify your Identity
+            </h1>
+            <p className="text-text-2 my-4">
+              Enter the verification code sent to your email jan****@g****.com
+            </p>
+            <form onSubmit={this.handleSubmit}>
+              <div className="flex justify-between mx-auto my-4 max-w-sm space-x-2">
+                <input
+                  name="otp1"
+                  type="text"
+                  autoComplete="off"
+                  className="border border-outline w-14 h-14 p-3 text-center"
+                  value={this.state.otp1}
+                  onKeyPress={this.keyPressed}
+                  onChange={(e) => this.handleChange('otp1', e)}
+                  tabIndex="1"
+                  maxLength="1"
+                  onKeyUp={(e) => this.inputfocus(e)}
+                />
+                <input
+                  name="otp2"
+                  type="text"
+                  autoComplete="off"
+                  className="border border-outline w-14 h-14 p-3  text-lg text-center"
+                  value={this.state.otp2}
+                  onChange={(e) => this.handleChange('otp2', e)}
+                  tabIndex="2"
+                  maxLength="1"
+                  onKeyUp={(e) => this.inputfocus(e)}
+                />
+                <input
+                  name="otp3"
+                  type="text"
+                  autoComplete="off"
+                  className="border border-outline w-14 h-14 p-3  text-lg text-center"
+                  value={this.state.otp3}
+                  onChange={(e) => this.handleChange('otp3', e)}
+                  tabIndex="3"
+                  maxLength="1"
+                  onKeyUp={(e) => this.inputfocus(e)}
+                />
+                <input
+                  name="otp4"
+                  type="text"
+                  autoComplete="off"
+                  className="border border-outline w-14 h-14 p-3  text-lg text-center"
+                  value={this.state.otp4}
+                  onChange={(e) => this.handleChange('otp4', e)}
+                  tabIndex="4"
+                  maxLength="1"
+                  onKeyUp={(e) => this.inputfocus(e)}
+                />
+
+                <input
+                  name="otp5"
+                  type="text"
+                  autoComplete="off"
+                  className="border border-outline w-14 h-14 p-3 text-lg text-center"
+                  value={this.state.otp5}
+                  onChange={(e) => this.handleChange('otp5', e)}
+                  tabIndex="5"
+                  maxLength="1"
+                  onKeyUp={(e) => this.inputfocus(e)}
+                />
+              </div>
+              <div className="flex justify-between my-4">
+                <p>
+                  Didn&apos;t recieve code? <span className="text-primary-300">Resend</span>
+                </p>
+                <span className="text-warningstate">30s</span>
+              </div>
+              <Button className="primary" type="submit">
+                Sign In
+              </Button>
+            </form>
+          </section>
+          <section className="block text-primary-300 mb-24 sm:mb-auto sm:my-14">
+            <p className="text-center">Use another method to recieve the code</p>
+            <p className="text-center">Sign in to a different account</p>
+          </section>
+        </main>
+      </div>
+    );
+  }
+}
+
+export default Otpinput;