namirasoft-site-react 1.3.404 → 1.3.405
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.d.ts +0 -2
- package/dist/main.js +0 -2
- package/dist/main.js.map +1 -1
- package/package.json +1 -1
- package/src/main.ts +0 -2
- package/dist/components/NSBoxOTP.d.ts +0 -9
- package/dist/components/NSBoxOTP.js +0 -33
- package/dist/components/NSBoxOTP.js.map +0 -1
- package/dist/components/NSBoxOTP.module.css +0 -11
- package/dist/components/NSVerification.d.ts +0 -10
- package/dist/components/NSVerification.js +0 -18
- package/dist/components/NSVerification.js.map +0 -1
- package/dist/components/NSVerification.module.css +0 -23
- package/src/components/NSBoxOTP.module.css +0 -11
- package/src/components/NSBoxOTP.tsx +0 -64
- package/src/components/NSVerification.module.css +0 -23
- package/src/components/NSVerification.tsx +0 -41
package/dist/main.d.ts
CHANGED
|
@@ -17,7 +17,6 @@ export * from "./components/NSBoxInteger";
|
|
|
17
17
|
export * from "./components/NSBoxIPV4";
|
|
18
18
|
export * from "./components/NSBoxIPV6";
|
|
19
19
|
export * from "./components/NSBoxLabel";
|
|
20
|
-
export * from "./components/NSBoxOTP";
|
|
21
20
|
export * from "./components/NSBoxPassword";
|
|
22
21
|
export * from "./components/NSBoxPhone";
|
|
23
22
|
export * from "./components/NSBoxPrice";
|
|
@@ -66,7 +65,6 @@ export * from "./components/NSTable";
|
|
|
66
65
|
export * from "./components/NSTag";
|
|
67
66
|
export * from "./components/NSTabPage";
|
|
68
67
|
export * from "./components/NSTitle";
|
|
69
|
-
export * from "./components/NSVerification";
|
|
70
68
|
export * from "./formatter/BackColorFormatter";
|
|
71
69
|
export * from "./formatter/BaseColumnFormatter";
|
|
72
70
|
export * from "./formatter/BooleanFormatter";
|
package/dist/main.js
CHANGED
|
@@ -17,7 +17,6 @@ export * from "./components/NSBoxInteger";
|
|
|
17
17
|
export * from "./components/NSBoxIPV4";
|
|
18
18
|
export * from "./components/NSBoxIPV6";
|
|
19
19
|
export * from "./components/NSBoxLabel";
|
|
20
|
-
export * from "./components/NSBoxOTP";
|
|
21
20
|
export * from "./components/NSBoxPassword";
|
|
22
21
|
export * from "./components/NSBoxPhone";
|
|
23
22
|
export * from "./components/NSBoxPrice";
|
|
@@ -66,7 +65,6 @@ export * from "./components/NSTable";
|
|
|
66
65
|
export * from "./components/NSTag";
|
|
67
66
|
export * from "./components/NSTabPage";
|
|
68
67
|
export * from "./components/NSTitle";
|
|
69
|
-
export * from "./components/NSVerification";
|
|
70
68
|
export * from "./formatter/BackColorFormatter";
|
|
71
69
|
export * from "./formatter/BaseColumnFormatter";
|
|
72
70
|
export * from "./formatter/BooleanFormatter";
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,
|
|
1
|
+
{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"framework": "npm",
|
|
9
9
|
"application": "package",
|
|
10
10
|
"private": false,
|
|
11
|
-
"version": "1.3.
|
|
11
|
+
"version": "1.3.405",
|
|
12
12
|
"author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh, Mehrab Bahramian",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"main": "./dist/main.js",
|
package/src/main.ts
CHANGED
|
@@ -17,7 +17,6 @@ export * from "./components/NSBoxInteger";
|
|
|
17
17
|
export * from "./components/NSBoxIPV4";
|
|
18
18
|
export * from "./components/NSBoxIPV6";
|
|
19
19
|
export * from "./components/NSBoxLabel";
|
|
20
|
-
export * from "./components/NSBoxOTP";
|
|
21
20
|
export * from "./components/NSBoxPassword";
|
|
22
21
|
export * from "./components/NSBoxPhone";
|
|
23
22
|
export * from "./components/NSBoxPrice";
|
|
@@ -66,7 +65,6 @@ export * from "./components/NSTable";
|
|
|
66
65
|
export * from "./components/NSTag";
|
|
67
66
|
export * from "./components/NSTabPage";
|
|
68
67
|
export * from "./components/NSTitle";
|
|
69
|
-
export * from "./components/NSVerification";
|
|
70
68
|
export * from "./formatter/BackColorFormatter";
|
|
71
69
|
export * from "./formatter/BaseColumnFormatter";
|
|
72
70
|
export * from "./formatter/BooleanFormatter";
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { IBaseComponentProps } from '../props/IBaseComponentProps';
|
|
3
|
-
interface INSBoxOTPProps extends IBaseComponentProps {
|
|
4
|
-
placeholder?: string;
|
|
5
|
-
defaultValue?: string;
|
|
6
|
-
onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
7
|
-
}
|
|
8
|
-
export declare function NSBoxOTP(props: INSBoxOTPProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export {};
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useState, useRef } from 'react';
|
|
3
|
-
import Styles from './NSBoxOTP.module.css';
|
|
4
|
-
export function NSBoxOTP(props) {
|
|
5
|
-
var _a;
|
|
6
|
-
let [state, setState] = useState("");
|
|
7
|
-
const [values, setValues] = useState(Array(6).fill(''));
|
|
8
|
-
const inputsRef = useRef([]);
|
|
9
|
-
const handleChange = (index) => (event) => {
|
|
10
|
-
var _a;
|
|
11
|
-
const newValue = event.target.value;
|
|
12
|
-
setState(state + newValue);
|
|
13
|
-
if (/^\d?$/.test(newValue)) {
|
|
14
|
-
const updatedValues = [...values];
|
|
15
|
-
updatedValues[index] = newValue;
|
|
16
|
-
setValues(updatedValues);
|
|
17
|
-
if (newValue && index < 5) {
|
|
18
|
-
(_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
if (props.onChanged)
|
|
22
|
-
props.onChanged(event);
|
|
23
|
-
};
|
|
24
|
-
const handleKeyDown = (index) => (event) => {
|
|
25
|
-
var _a;
|
|
26
|
-
if (event.key === 'Backspace' && !values[index] && index > 0) {
|
|
27
|
-
(_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
return (_jsx("div", { id: props.id, className: `${Styles.ns_input_parent} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: Object.assign(Object.assign({}, props.style), { display: 'flex', gap: '10px' }), children: values.map((value, index) => (_jsx("input", { ref: el => inputsRef.current[index] = el, type: "text", value: value, onChange: handleChange(index), onKeyDown: handleKeyDown(index), maxLength: 1, style: { width: '30px', textAlign: 'center' }, className: Styles.ns_otp_input }, index + 10))) }));
|
|
31
|
-
}
|
|
32
|
-
;
|
|
33
|
-
//# sourceMappingURL=NSBoxOTP.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NSBoxOTP.js","sourceRoot":"","sources":["../../src/components/NSBoxOTP.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAe,MAAM,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,MAAM,MAAM,uBAAuB,CAAA;AAS1C,MAAM,UAAU,QAAQ,CAAC,KAAqB;;IAE1C,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAErC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IAClE,MAAM,SAAS,GAAG,MAAM,CAA8B,EAAE,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAAoC,EAAE,EAAE;;QAE7E,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACpC,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAA;QAC1B,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAC1B;YACI,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;YAClC,aAAa,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;YAChC,SAAS,CAAC,aAAa,CAAC,CAAC;YACzB,IAAI,QAAQ,IAAI,KAAK,GAAG,CAAC,EACzB;gBACI,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;aACzC;SACJ;QACD,IAAI,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAA4C,EAAE,EAAE;;QAEtF,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAC5D;YACI,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;SACzC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,cAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,kCAAO,KAAK,CAAC,KAAK,KAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,eAEtI,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,gBAEI,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,EACxC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC,EAC/B,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC7C,SAAS,EAAE,MAAM,CAAC,YAAY,IARzB,KAAK,GAAG,EAAE,CASjB,CACL,CAAC,GAEH,CACV,CAAC;AACN,CAAC;AAAA,CAAC"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { IBaseComponentProps } from '../props/IBaseComponentProps';
|
|
3
|
-
import { IImageProps } from '../props/IImageProps';
|
|
4
|
-
interface INSVerificationProps extends IBaseComponentProps {
|
|
5
|
-
verificationType: string;
|
|
6
|
-
onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
7
|
-
image?: IImageProps;
|
|
8
|
-
}
|
|
9
|
-
export declare function NSVerification(props: INSVerificationProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export {};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
3
|
-
import { NSBoxOTP } from './NSBoxOTP';
|
|
4
|
-
import Styles from './NSVerification.module.css';
|
|
5
|
-
import vector from '../assets/images/verify.png';
|
|
6
|
-
export function NSVerification(props) {
|
|
7
|
-
var _a, _b, _c, _d, _e;
|
|
8
|
-
const [values, setValue] = useState('');
|
|
9
|
-
function onChanged(event) {
|
|
10
|
-
setValue(prevValues => [...prevValues, event.target.value].join(''));
|
|
11
|
-
if (props.onChanged)
|
|
12
|
-
props.onChanged(event);
|
|
13
|
-
console.log(values);
|
|
14
|
-
return (values);
|
|
15
|
-
}
|
|
16
|
-
return (_jsxs("div", { className: `${Styles.ns_verification_container} ${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: [_jsx("img", { src: (_c = (_b = props.image) === null || _b === void 0 ? void 0 : _b.src) !== null && _c !== void 0 ? _c : vector, alt: (_e = (_d = props.image) === null || _d === void 0 ? void 0 : _d.alt) !== null && _e !== void 0 ? _e : 'verification vector', className: Styles.ns_verification_vector }), _jsxs("p", { children: ["Please enter code sent to ", props.verificationType] }), _jsx(NSBoxOTP, { onChanged: onChanged })] }));
|
|
17
|
-
}
|
|
18
|
-
//# sourceMappingURL=NSVerification.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NSVerification.js","sourceRoot":"","sources":["../../src/components/NSVerification.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAChD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAUhD,MAAM,UAAU,cAAc,CAAC,KAA0B;;IACrD,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAA;IAE/C,SAAS,SAAS,CAAC,KAA0C;QAE/D,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,UAAU,EAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACtE,IAAI,KAAK,CAAC,SAAS;YAClB,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAClB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACpB,OAAO,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC;IACE,OAAO,CACH,eACI,SAAS,EAAE,GAAG,MAAM,CAAC,yBAAyB,IAAI,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACpF,KAAK,EAAE,KAAK,CAAC,KAAK,aAEZ,cACA,GAAG,EAAE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,mCAAI,MAAM,EAC/B,GAAG,EAAE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,GAAG,mCAAI,qBAAqB,EAC9C,SAAS,EAAE,MAAM,CAAC,sBAAsB,GACtC,EACF,sDAA8B,KAAK,CAAC,gBAAgB,IAAK,EACzD,KAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,GAAG,IAC/B,CACT,CAAC;AACN,CAAC"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
.ns_verification_container {
|
|
2
|
-
background-color: #FFF;
|
|
3
|
-
border: 1px solid #A1A4B0;
|
|
4
|
-
backdrop-filter: blur(5px);
|
|
5
|
-
border-radius: 8px;
|
|
6
|
-
width: 100%;
|
|
7
|
-
max-width: 594px;
|
|
8
|
-
padding: 16px;
|
|
9
|
-
color: #141B5C !important;
|
|
10
|
-
display: flex;
|
|
11
|
-
flex-direction: column;
|
|
12
|
-
gap: 16px;
|
|
13
|
-
align-items: center;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.ns_verification_container p{
|
|
17
|
-
text-align: center;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.ns_verification_vector{
|
|
21
|
-
width: 224px;
|
|
22
|
-
height: 224px;
|
|
23
|
-
}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import React, { useState, ChangeEvent, useRef } from 'react';
|
|
2
|
-
import { IBaseComponentProps } from '../props/IBaseComponentProps';
|
|
3
|
-
import Styles from './NSBoxOTP.module.css'
|
|
4
|
-
|
|
5
|
-
interface INSBoxOTPProps extends IBaseComponentProps
|
|
6
|
-
{
|
|
7
|
-
placeholder?: string;
|
|
8
|
-
defaultValue?: string;
|
|
9
|
-
onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export function NSBoxOTP(props: INSBoxOTPProps)
|
|
13
|
-
{
|
|
14
|
-
let [state, setState] = useState("");
|
|
15
|
-
|
|
16
|
-
const [values, setValues] = useState<string[]>(Array(6).fill(''));
|
|
17
|
-
const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
|
|
18
|
-
|
|
19
|
-
const handleChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) =>
|
|
20
|
-
{
|
|
21
|
-
const newValue = event.target.value;
|
|
22
|
-
setState(state + newValue)
|
|
23
|
-
if (/^\d?$/.test(newValue))
|
|
24
|
-
{
|
|
25
|
-
const updatedValues = [...values];
|
|
26
|
-
updatedValues[index] = newValue;
|
|
27
|
-
setValues(updatedValues);
|
|
28
|
-
if (newValue && index < 5)
|
|
29
|
-
{
|
|
30
|
-
inputsRef.current[index + 1]?.focus();
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
if (props.onChanged)
|
|
34
|
-
props.onChanged(event);
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const handleKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) =>
|
|
38
|
-
{
|
|
39
|
-
if (event.key === 'Backspace' && !values[index] && index > 0)
|
|
40
|
-
{
|
|
41
|
-
inputsRef.current[index - 1]?.focus();
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
return (
|
|
46
|
-
<div id={props.id} className={`${Styles.ns_input_parent} ${props.classList?.join(" ")}`} style={{ ...props.style, display: 'flex', gap: '10px' }}>
|
|
47
|
-
{
|
|
48
|
-
values.map((value, index) => (
|
|
49
|
-
<input
|
|
50
|
-
key={index + 10}
|
|
51
|
-
ref={el => inputsRef.current[index] = el}
|
|
52
|
-
type="text"
|
|
53
|
-
value={value}
|
|
54
|
-
onChange={handleChange(index)}
|
|
55
|
-
onKeyDown={handleKeyDown(index)}
|
|
56
|
-
maxLength={1}
|
|
57
|
-
style={{ width: '30px', textAlign: 'center' }}
|
|
58
|
-
className={Styles.ns_otp_input}
|
|
59
|
-
/>
|
|
60
|
-
))
|
|
61
|
-
}
|
|
62
|
-
</div >
|
|
63
|
-
);
|
|
64
|
-
};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
.ns_verification_container {
|
|
2
|
-
background-color: #FFF;
|
|
3
|
-
border: 1px solid #A1A4B0;
|
|
4
|
-
backdrop-filter: blur(5px);
|
|
5
|
-
border-radius: 8px;
|
|
6
|
-
width: 100%;
|
|
7
|
-
max-width: 594px;
|
|
8
|
-
padding: 16px;
|
|
9
|
-
color: #141B5C !important;
|
|
10
|
-
display: flex;
|
|
11
|
-
flex-direction: column;
|
|
12
|
-
gap: 16px;
|
|
13
|
-
align-items: center;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.ns_verification_container p{
|
|
17
|
-
text-align: center;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.ns_verification_vector{
|
|
21
|
-
width: 224px;
|
|
22
|
-
height: 224px;
|
|
23
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { IBaseComponentProps } from '../props/IBaseComponentProps';
|
|
3
|
-
import { IImageProps } from '../props/IImageProps';
|
|
4
|
-
import { NSBoxOTP } from './NSBoxOTP';
|
|
5
|
-
import Styles from './NSVerification.module.css'
|
|
6
|
-
import vector from '../assets/images/verify.png'
|
|
7
|
-
|
|
8
|
-
interface INSVerificationProps extends IBaseComponentProps {
|
|
9
|
-
verificationType : string;
|
|
10
|
-
onChanged ?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
11
|
-
image ?: IImageProps;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
export function NSVerification(props:INSVerificationProps) {
|
|
17
|
-
const [values, setValue] = useState<string>('')
|
|
18
|
-
|
|
19
|
-
function onChanged(event: React.ChangeEvent<HTMLInputElement>): string | undefined
|
|
20
|
-
{
|
|
21
|
-
setValue(prevValues => [...prevValues , event.target.value].join(''));
|
|
22
|
-
if (props.onChanged)
|
|
23
|
-
props.onChanged(event);
|
|
24
|
-
console.log(values);
|
|
25
|
-
return (values);
|
|
26
|
-
}
|
|
27
|
-
return (
|
|
28
|
-
<div
|
|
29
|
-
className={`${Styles.ns_verification_container} ${props.classList?.join(" ")}`}
|
|
30
|
-
style={props.style}
|
|
31
|
-
>
|
|
32
|
-
<img
|
|
33
|
-
src={props.image?.src ?? vector}
|
|
34
|
-
alt={props.image?.alt ?? 'verification vector'}
|
|
35
|
-
className={Styles.ns_verification_vector}
|
|
36
|
-
/>
|
|
37
|
-
<p>Please enter code sent to {props.verificationType}</p>
|
|
38
|
-
<NSBoxOTP onChanged={onChanged}/>
|
|
39
|
-
</div>
|
|
40
|
-
);
|
|
41
|
-
}
|