Google Authentication React Component

1
import React, { useEffect, useState } from "react";
2
import "./App.css";
3

4
import styles from "./twofa.module.css";
5

6
function App() {
7
  const initialSetting = {
8
    max: 6,
9
    onChangeValue: () => {},
10
  };
11
  const [setting, setSetting] = useState(initialSetting);
12

13
  const [input, setInput] = useState("");
14

15
  const handleChange = (e) => {
16
    try {
17
      if (e.target.value) {
18
        let { value } = e.target;
19

20
        if (input.length > 0) {
21
          // when the data already exists
22
          if (input.length < setting.max) {
23
            if (input[e.target.attributes.tabindex.value - 1]?.length > 0) {
24
              value = value.substring(1);
25
            }
26

27
            let data = input.concat(value);
28
            if (data.length > 6) {
29
              data = data.slice(0, 6);
30
            }
31
            setInput(data);
32

33
            document.getElementById(`pin${data.length}`).focus();
34
          }
35
        } else {
36
          // when empty data
37
          if (value.length > 6) {
38
            value = value.slice(0, 6);
39
          }
40
          setInput(value);
41
          document.getElementById(`pin${value.length}`).focus();
42
        }
43
      } else {
44
        // clear data
45
        if (input.length > 0) {
46
          setInput(input.slice(0, -1));
47

48
          if (input.length !== 1) {
49
            document.getElementById(`pin${input.length - 1}`).focus();
50
          }
51
        }
52
      }
53
    } catch (error) {
54
      console.log("some error");
55
    }
56
  };
57

58
  useEffect(() => {
59
    console.log(input);
60
    if (input.length === 6) {
61
      // code...
62
      console.log("Do Something...");
63
    }
64
  }, [input]);
65
  return (
66
    <React.Fragment>
67
      <div className={styles.wrapper__size}>
68
        <div className={styles.twofa_blur}></div>
69
        <div className={styles.twofa}>
70
          <div className={styles.twofa__header}>
71
            <div className={styles.twofa__header__title}>
72
              <span>Google Authentication</span>
73
            </div>
74
          </div>
75
          <div className={styles.twofa__body}>
76
            <div className={styles.twofa__body__flex}>
77
              <div className={styles.twofa__body__flex__flex}>
78
                <div className={styles.twofa__body__flex__flex__message}>
79
                  <div
80
                    className={styles.twofa__body__flex__flex__message__flex}
81
                  >
82
                    <div
83
                      className={
84
                        styles.twofa__body__flex__flex__message__flex__img
85
                      }
86
                    >
87
                      <img
88
                        width="60"
89
                        src="images/Google_Authenticator_for_Android_icon.png"
90
                      />
91
                    </div>
92
                    <div
93
                      className={
94
                        styles.twofa__body__flex__flex__message__flex__text
95
                      }
96
                    >
97
                      <span>
98
                        Input the 6-digit code in your Google Authenticator app
99
                      </span>
100
                    </div>
101
                  </div>
102
                </div>
103
                <div className={styles.twofa__body__flex__flex__input}>
104
                  <div className={styles.twofa__body__flex__flex__input__flex}>
105
                    <div
106
                      className={
107
                        styles.twofa__body__flex__flex__input__flex__message
108
                      }
109
                    >
110
                      <span>Google Authentication Code</span>
111
                    </div>
112
                    <div
113
                      className={
114
                        styles.twofa__body__flex__flex__input__flex__input
115
                      }
116
                    >
117
                      <input
118
                        id="pin1"
119
                        // maxLength="1"
120
                        tabIndex="1"
121
                        value={input[0] ? input[0] : ""}
122
                        onChange={handleChange}
123
                        autoFocus={true}
124
                      />
125
                      <input
126
                        id="pin2"
127
                        // maxLength="1"
128
                        tabIndex="2"
129
                        value={input[1] ? input[1] : ""}
130
                        onChange={handleChange}
131
                      />
132
                      <input
133
                        id="pin3"
134
                        // maxLength="1"
135
                        tabIndex="3"
136
                        value={input[2] ? input[2] : ""}
137
                        onChange={handleChange}
138
                      />
139
                      <input
140
                        id="pin4"
141
                        // maxLength="1"
142
                        tabIndex="4"
143
                        value={input[3] ? input[3] : ""}
144
                        onChange={handleChange}
145
                      />
146
                      <input
147
                        id="pin5"
148
                        // maxLength="1"
149
                        tabIndex="5"
150
                        value={input[4] ? input[4] : ""}
151
                        onChange={handleChange}
152
                      />
153
                      <input
154
                        id="pin6"
155
                        // maxLength="1"
156
                        tabIndex="6"
157
                        value={input[5] ? input[5] : ""}
158
                        onChange={handleChange}
159
                      />
160
                    </div>
161
                  </div>
162
                </div>
163
              </div>
164
              <div className={styles.twofa__body__flex__help}>
165
                <span>Can't access Google Authenticator?</span>
166
              </div>
167
            </div>
168
          </div>
169
          {/* <div className={styles.twofa__footer}></div> */}
170
        </div>
171
      </div>
172
    </React.Fragment>
173
  );
174
}
175

176
export default App;

1
* {
2
  margin: 0;
3
  padding: 0;
4
  box-sizing: border-box;
5
}
6
* {
7
  font-size: 16px;
8
}
9
.noselect {
10
  -webkit-touch-callout: none; /* iOS Safari */
11
  -webkit-user-select: none; /* Safari */
12
  -khtml-user-select: none; /* Konqueror HTML */
13
  -moz-user-select: none; /* Old versions of Firefox */
14
  -ms-user-select: none; /* Internet Explorer/Edge */
15
  user-select: none; /* Non-prefixed version, currently
16
                                      supported by Chrome, Edge, Opera and Firefox */
17
}
18
.wrapper__size {
19
  min-height: 100vh;
20
  display: block;
21
  position: absolute;
22
  left: 0;
23
  right: 0;
24
  top: 0;
25
}
26
.twofa {
27
  position: absolute;
28
  margin-left: auto;
29
  margin-right: auto;
30
  left: 0;
31
  right: 0;
32
  text-align: center;
33
  width: 100%;
34
  max-width: 500px;
35
  margin-top: 50px;
36
  z-index: 9999;
37
  background-color: rgba(255, 255, 255, 1);
38
  box-shadow: rgb(0 0 0 / 8%) 0px 6px 10px;
39
}
40
.twofa_blur {
41
  filter: blur(8px);
42
  -webkit-filter: blur(8px);
43
  /* background-image: url(https://source.unsplash.com/random); */
44
  background-color: rgba(200, 200, 200, 1);
45
  width: 100%;
46
  height: 100vh;
47
  position: absolute;
48
}
49
.twofa__header {
50
}
51
.twofa__header__title {
52
  padding: 20px 40px;
53
}
54
.twofa__header__title span {
55
  font-size: 1.2em;
56
  font-weight: 700;
57
}
58
.twofa__body {
59
}
60
.twofa__body__flex {
61
  display: flex;
62
  flex-direction: column;
63

64
  justify-content: space-between;
65
  min-height: 350px;
66
}
67
.twofa__body__flex__flex {
68
  display: flex;
69
  flex-direction: column;
70
}
71
.twofa__body__flex__flex__message {
72
  padding: 20px 40px;
73
}
74
.twofa__body__flex__flex__message__flex {
75
  display: flex;
76
  flex-direction: row;
77
  /* justify-content: flex-start; */
78
  align-items: center;
79
  text-align: left;
80
}
81
.twofa__body__flex__flex__message__flex__img {
82
}
83
.twofa__body__flex__flex__message__flex__img img {
84
  margin-right: 10px;
85
}
86
.twofa__body__flex__flex__message__flex__text {
87
}
88
.twofa__body__flex__flex__input {
89
  padding: 20px 40px;
90
}
91
.twofa__body__flex__flex__input__flex {
92
  text-align: left;
93
}
94
.twofa__body__flex__flex__input__flex__message {
95
}
96
.twofa__body__flex__flex__input__flex__message span {
97
  color: rgba(125, 125, 125, 1);
98
}
99
.twofa__body__flex__flex__input__flex__input {
100
  display: grid;
101
  grid-template-columns: auto auto auto auto auto auto;
102
}
103
.twofa__body__flex__flex__input__flex__input input {
104
  max-width: 50px;
105
  min-height: 50px;
106
  /* padding: 10px; */
107

108
  font-size: 1.2em;
109
  font-weight: 500;
110
  text-align: center;
111

112
  border-left: none;
113
  border-right: none;
114
  border-top: none;
115
  border-bottom: 2px solid rgba(200, 200, 200, 1);
116
}
117
.twofa__body__flex__flex__input__flex__input input:focus {
118
  outline: none;
119
}
120
.twofa__body__flex__help {
121
  padding: 20px;
122
}
123
.twofa__body__flex__help span {
124
  color: rgba(241, 191, 29, 1);
125
  font-weight: 700;
126
}