เขียนปุ่ม PINCODE ลอกแบบจาก Trezor

1
import React, { useState } from "react";
2
import Pin, { ShowPin } from "./Pin";
3

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

6
function App() {
7
  const [value, setValue] = useState();
8
  const handleChangeValue = (val) => {
9
    setValue({ value: val });
10
  };
11

12
  return (
13
    <React.Fragment>
14
      <div
15
        style={{
16
          width: "100%",
17
          marginTop: "50px",
18
          textAlign: "center",
19
        }}
20
      >
21
        <Pin keypad="dot" onChangeValue={handleChangeValue} />
22
        <button
23
          style={{
24
            width: "200px",
25
            height: "60px",
26
            borderRadius: "4px",
27
            border: "1px solid #00a1ff",
28
            color: "#00a1ff",
29
          }}
30
          onClick={() => {
31
            ShowPin();
32
          }}
33
        >
34
          OPTEN, MY MODAL!
35
        </button>
36
      </div>
37
    </React.Fragment>
38
  );
39
}
40

41
export default App;

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

4
function Pin(props) {
5
  let initialSetting = {
6
    max: 6,
7
    keypad: "number", // number | dot
8
    random: false, // true | false
9
    onChangeValue: () => {},
10
  };
11
  const [setting, setSetting] = useState(initialSetting);
12

13
  useEffect(() => {
14
    // props.max && setSetting({ ...setting, max: props.max });
15
    // props.keypad && setSetting({ ...setting, keypad: props.keypad });
16
    // props.random && setSetting({ ...setting, random: props.random });
17
    // props.onChangeValue && setSetting({ ...setting, onChangeValue: props.onChangeValue });
18

19
    let data = {
20
      max: props.max ? props.max : setting.max,
21
      keypad: props.keypad ? props.keypad : setting.keypad,
22
      random: props.random ? props.random : setting.random,
23
      onChangeValue: props.onChangeValue ? props.onChangeValue : setting.onChangeValue,
24
    }
25
    setSetting(data);
26

27
    // setSetting({ ...props });
28
  }, [props]);
29

30
  const [setup, setSetup] = useState({
31
    arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
32
    // algorithm: "md5",
33
  });
34
  useEffect(() => {
35
    if (setting.random) {
36
      setSetup({ arr: shuffle([1, 2, 3, 4, 5, 6, 7, 8, 9]) });
37
    }
38
  }, []);
39

40
  const [input, setInput] = useState([]);
41

42
  return (
43
    <React.Fragment>
44
      <div
45
        id="modal-pin"
46
        className={styles.wrapper__size}
47
        style={{ display: "none" }}
48
      >
49
        <div className={styles.pin_blur}></div>
50
        <div className={styles.pin}>
51
          {/* <div className={styles.pin__header}></div> */}
52
          <div className={styles.pin__body}>
53
            <div className={styles.pin__body__message}>
54
              <div className={styles.pin__body__message__title}>
55
                <span>Enter PIN for trezor</span>
56
              </div>
57
              <div className={styles.pin__body__message__description}>
58
                <span>The PIN layout is displayed on your Trezor.</span>
59
              </div>
60
            </div>
61
            <div className={styles.pin__body__input}>
62
              <div className={styles.pin__body__input__box}>
63
                <div className={styles.pin__body__input__box__flex}>
64
                  <input
65
                    type="password"
66
                    autoComplete="off"
67
                    readOnly={true}
68
                    value={input
69
                      .toString()
70
                      .replaceAll(",", "")
71
                      .split("")
72
                      .reverse()
73
                      .join("")}
74
                  />
75
                  <span
76
                    className={styles.noselect}
77
                    onClick={() => {
78
                      if (input.length > 0) {
79
                        setInput(input.slice(1));
80
                      }
81
                    }}
82
                  ></span>
83
                </div>
84
              </div>
85
            </div>
86
            <div className={styles.pin__body__button}>
87
              <div className={styles.pin__body__button__flex}>
88
                {setup.arr.map((item) => {
89
                  return (
90
                    <div
91
                      key={item}
92
                      className={`${styles.pin__body__button__flex__item} ${styles.noselect} ${
93
                        setting.keypad === "dot" && styles.dot
94
                      }`}
95
                      onClick={() => {
96
                        if (input.length > 0) {
97
                          if (input.length < setting.max) {
98
                            let data = [];
99
                            data.push(item);
100
                            data = data.concat(input);
101
                            setInput(data);
102
                          }
103
                        } else {
104
                          let data = [];
105
                          data.push(item);
106
                          setInput(data);
107
                        }
108
                      }}
109
                    >
110
                      {setting.keypad === "number" ? item : null}
111
                    </div>
112
                  );
113
                })}
114
              </div>
115
            </div>
116
            <div className={styles.pin__body__submit}>
117
              <button
118
                onClick={() => {
119
                  if (input.length > 0) {
120
                    setting.onChangeValue(
121
                      input
122
                        .toString()
123
                        .replaceAll(",", "")
124
                        .split("")
125
                        .reverse()
126
                        .join("")
127
                    );
128
                  }
129

130
                  setInput([]);
131
                  window.document.getElementById("modal-pin").style.display =
132
                    "none";
133
                }}
134
              >
135
                Confirm
136
              </button>
137
            </div>
138
            <div className={styles.pin__body__help}>
139
              <span>
140
                Not sure how PIN work?{" "}
141
                <a href="#">
142
                  <u>Learn more</u>
143
                </a>
144
              </span>
145
            </div>
146
          </div>
147
          {/* <div className={styles.pin__footer}></div> */}
148
        </div>
149
      </div>
150
    </React.Fragment>
151
  );
152
}
153

154
function shuffle(array) {
155
  var i = array.length,
156
    j = 0,
157
    temp;
158

159
  while (i--) {
160
    j = Math.floor(Math.random() * (i + 1));
161

162
    // swap randomly chosen element with current element
163
    temp = array[i];
164
    array[i] = array[j];
165
    array[j] = temp;
166
  }
167

168
  return array;
169
}
170

171
export default Pin;
172

173
function ShowPin() {
174
  window.document.getElementById("modal-pin").style.display = "block";
175
}
176

177
export { ShowPin };

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

52
  max-width: 380px;
53
  margin: 0px auto;
54
}
55
.pin__body__message {
56
  padding: 20px;
57
  text-align: center;
58
}
59
.pin__body__message__title {
60
  padding: 10px;
61
}
62
.pin__body__message__title span {
63
  font-size: 1.5em;
64
}
65
.pin__body__message__description {
66
  padding: 10px;
67
}
68
.pin__body__message__description span {
69
  font-size: 1em;
70
}
71
.pin__body__input {
72
  padding: 0px 20px;
73
  text-align: center;
74
}
75
.pin__body__input__box {
76
  border: 2px solid rgba(145, 145, 145, 0.5);
77
}
78
.pin__body__input__box__flex {
79
  display: flex;
80
}
81
.pin__body__input__box__flex input {
82
  text-align: right;
83
  font-size: 3.1em;
84
  width: 100%;
85
  max-height: 60px;
86

87
  border: none;
88
  color: rgba(0, 0, 0, 0.8);
89
}
90
.pin__body__input__box__flex input:read-only:focus {
91
  outline: none;
92
}
93
.pin__body__input__box__flex span {
94
  color: rgba(0, 0, 0, 1);
95
  width: 100%;
96
  max-width: 60px;
97
  cursor: pointer;
98
}
99
.pin__body__input__box__flex span::after {
100
  content: "\2715";
101
  font-size: 24px;
102
  display: flex;
103
  justify-content: center;
104
  align-items: center;
105
  height: 100%;
106
}
107

108
.pin__body__button {
109
  padding: 10px 20px 20px 20px;
110
  text-align: center;
111
}
112
.pin__body__button__flex {
113
  display: grid;
114
  grid-template-columns: 1fr 1fr 1fr;
115
  gap: 20px;
116
}
117
.pin__body__button__flex__item {
118
  padding: 20px;
119
  border: 2px solid rgba(145, 145, 145, 0.5);
120
  border-radius: 2px;
121
  width: 100px;
122
  height: 100px;
123
  cursor: pointer;
124

125
  font-size: 24px;
126
  display: flex;
127
  justify-content: center;
128
  align-items: center;
129
  /* height: 100%; */
130
}
131
.pin__body__button__flex__item.dot::before {
132
  content: "\A";
133
  width: 10px;
134
  height: 10px;
135
  border-radius: 50%;
136
  background: rgba(0, 0, 0, 0.6);
137
  position: absolute;
138
}
139
.pin__body__submit {
140
  padding: 20px;
141
  text-align: center;
142
}
143
.pin__body__submit button {
144
  width: 100%;
145
  padding: 16px;
146
  border: none;
147
  border-radius: 2px;
148
  background: rgba(90, 208, 146, 1);
149

150
  font-size: 1.2em;
151
  color: rgba(255, 255, 255, 1);
152
  cursor: pointer;
153
}
154
.pin__body__help {
155
  padding: 20px;
156
  text-align: center;
157
}
158
.pin__body__help span {
159
}
160
.pin__body__help span a {
161
  font-size: 1.2em;
162
  color: rgba(90, 208, 146, 1);
163
}
164
.pin__footer {
165
}