@cuemath/leap 3.1.13 → 3.1.14-j1
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.
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { jsx as e, jsxs as d, Fragment as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
1
|
+
import { jsx as e, jsxs as d, Fragment as F } from "react/jsx-runtime";
|
|
2
|
+
import { memo as x, useCallback as m } from "react";
|
|
3
|
+
import I from "../../../ui/buttons/button/button.js";
|
|
4
4
|
import u from "../../../ui/inputs/text-input/text-input.js";
|
|
5
5
|
import c from "../../../ui/layout/flex-view.js";
|
|
6
6
|
import s from "../../../ui/separator/separator.js";
|
|
7
7
|
import p from "../../comps/input-status-icon/input-status-icon.js";
|
|
8
|
-
import
|
|
9
|
-
import { Container as
|
|
10
|
-
const
|
|
8
|
+
import E from "../../comps/resend-otp/resend-otp.js";
|
|
9
|
+
import { Container as j, FormWrapper as v } from "./identifier-otp-form-styled.js";
|
|
10
|
+
const A = ({
|
|
11
11
|
identifier: f,
|
|
12
12
|
otp: l,
|
|
13
13
|
errors: r,
|
|
@@ -15,30 +15,31 @@ const v = ({
|
|
|
15
15
|
isLoading: n,
|
|
16
16
|
isSubmitDisabled: h,
|
|
17
17
|
showOtpInput: i,
|
|
18
|
+
isAuthRedirecting: g,
|
|
18
19
|
onChange: a,
|
|
19
|
-
onSubmit:
|
|
20
|
-
onSendOtp:
|
|
20
|
+
onSubmit: b,
|
|
21
|
+
onSendOtp: $
|
|
21
22
|
}) => {
|
|
22
|
-
const
|
|
23
|
+
const k = t ? "success-dark" : "primary-dark", y = m(
|
|
23
24
|
(o) => {
|
|
24
25
|
a("identifier", o.target.value);
|
|
25
26
|
},
|
|
26
27
|
[a]
|
|
27
|
-
),
|
|
28
|
+
), C = m(
|
|
28
29
|
(o) => {
|
|
29
30
|
a("otp", o.target.value);
|
|
30
31
|
},
|
|
31
32
|
[a]
|
|
32
33
|
);
|
|
33
34
|
return /* @__PURE__ */ e(
|
|
34
|
-
|
|
35
|
+
j,
|
|
35
36
|
{
|
|
36
37
|
$gutterX: 1.5,
|
|
37
38
|
$gapX: 1.5,
|
|
38
39
|
$background: "BLACK_2",
|
|
39
40
|
$alignItems: "center",
|
|
40
41
|
$justifyContent: "center",
|
|
41
|
-
children: /* @__PURE__ */ d(
|
|
42
|
+
children: /* @__PURE__ */ d(v, { onSubmit: b, children: [
|
|
42
43
|
/* @__PURE__ */ d(c, { $alignItems: "center", $justifyContent: "center", children: [
|
|
43
44
|
/* @__PURE__ */ e(
|
|
44
45
|
u,
|
|
@@ -47,7 +48,7 @@ const v = ({
|
|
|
47
48
|
autoFocus: !0,
|
|
48
49
|
label: "Email or Phone",
|
|
49
50
|
value: f,
|
|
50
|
-
onChange:
|
|
51
|
+
onChange: y,
|
|
51
52
|
required: !0,
|
|
52
53
|
width: "100%",
|
|
53
54
|
shape: "borderLess",
|
|
@@ -56,16 +57,16 @@ const v = ({
|
|
|
56
57
|
siblingElement: /* @__PURE__ */ e(p, { isError: !!r.identifier })
|
|
57
58
|
}
|
|
58
59
|
),
|
|
59
|
-
i && /* @__PURE__ */ d(
|
|
60
|
+
i && /* @__PURE__ */ d(F, { children: [
|
|
60
61
|
/* @__PURE__ */ e(s, { height: 36 }),
|
|
61
62
|
/* @__PURE__ */ e(
|
|
62
63
|
u,
|
|
63
64
|
{
|
|
64
65
|
type: "password",
|
|
65
|
-
renderAs: r.otp ? "error-dark" :
|
|
66
|
+
renderAs: r.otp ? "error-dark" : k,
|
|
66
67
|
label: "Verification code",
|
|
67
68
|
value: l,
|
|
68
|
-
onChange:
|
|
69
|
+
onChange: C,
|
|
69
70
|
width: "100%",
|
|
70
71
|
required: !0,
|
|
71
72
|
autoFocus: !0,
|
|
@@ -83,27 +84,27 @@ const v = ({
|
|
|
83
84
|
}
|
|
84
85
|
),
|
|
85
86
|
/* @__PURE__ */ e(s, { heightX: 1.25 }),
|
|
86
|
-
/* @__PURE__ */ e(c, { $alignItems: "flex-end", $width: "100%", children: /* @__PURE__ */ e(
|
|
87
|
+
/* @__PURE__ */ e(c, { $alignItems: "flex-end", $width: "100%", children: /* @__PURE__ */ e(E, { onResendOTP: $, disabled: t }) }),
|
|
87
88
|
/* @__PURE__ */ e(s, { heightX: 2 })
|
|
88
89
|
] })
|
|
89
90
|
] }),
|
|
90
91
|
/* @__PURE__ */ e(
|
|
91
|
-
|
|
92
|
+
I,
|
|
92
93
|
{
|
|
93
94
|
size: "small",
|
|
94
95
|
renderAs: "secondary-dark",
|
|
95
96
|
type: "submit",
|
|
96
97
|
label: i ? "Log In" : "Get Verification Code",
|
|
97
98
|
width: "100%",
|
|
98
|
-
busy:
|
|
99
|
+
busy: i ? g : n,
|
|
99
100
|
disabled: h
|
|
100
101
|
}
|
|
101
102
|
)
|
|
102
103
|
] })
|
|
103
104
|
}
|
|
104
105
|
);
|
|
105
|
-
},
|
|
106
|
+
}, T = x(A);
|
|
106
107
|
export {
|
|
107
|
-
|
|
108
|
+
T as default
|
|
108
109
|
};
|
|
109
110
|
//# sourceMappingURL=identifier-otp-form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"identifier-otp-form.js","sources":["../../../../../src/features/auth/login/identifier-otp-form/identifier-otp-form.tsx"],"sourcesContent":["import type { IIdentifierOtpFormProps } from './identifier-otp-form-types';\n\nimport React, { type ChangeEvent, memo, useCallback } from 'react';\n\nimport Button from '../../../ui/buttons/button/button';\nimport TextInput from '../../../ui/inputs/text-input/text-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport InputStatusIcon from '../../comps/input-status-icon/input-status-icon';\nimport ResendOTP from '../../comps/resend-otp/resend-otp';\nimport * as Styled from './identifier-otp-form-styled';\n\nconst IdentifierOtpForm: React.FC<IIdentifierOtpFormProps> = ({\n identifier,\n otp,\n errors,\n isOtpVerified,\n isLoading,\n isSubmitDisabled,\n showOtpInput,\n onChange,\n onSubmit,\n onSendOtp,\n}) => {\n const otpStatusVariant = isOtpVerified ? 'success-dark' : 'primary-dark';\n\n const handleIdentifierChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n onChange('identifier', e.target.value);\n },\n [onChange],\n );\n\n const handleOtpChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n onChange('otp', e.target.value);\n },\n [onChange],\n );\n\n return (\n <Styled.Container\n $gutterX={1.5}\n $gapX={1.5}\n $background=\"BLACK_2\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n <Styled.FormWrapper onSubmit={onSubmit}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n <TextInput\n renderAs={errors.identifier ? 'error-dark' : 'primary-dark'}\n autoFocus\n label=\"Email or Phone\"\n value={identifier}\n onChange={handleIdentifierChange}\n required\n width=\"100%\"\n shape=\"borderLess\"\n errorMessage={errors.identifier}\n disabled={showOtpInput}\n siblingElement={<InputStatusIcon isError={!!errors.identifier} />}\n />\n {showOtpInput && (\n <>\n <Separator height={36} />\n <TextInput\n type=\"password\"\n renderAs={errors.otp ? 'error-dark' : otpStatusVariant}\n label=\"Verification code\"\n value={otp}\n onChange={handleOtpChange}\n width=\"100%\"\n required\n autoFocus\n shape=\"borderLess\"\n errorMessage={errors.otp}\n disabled={isOtpVerified || (otp.length === 4 && isLoading)}\n siblingElement={\n <InputStatusIcon\n isLoading={isLoading}\n isValid={isOtpVerified}\n isError={!!errors.otp}\n />\n }\n />\n <Separator heightX={1.25} />\n <FlexView $alignItems=\"flex-end\" $width=\"100%\">\n <ResendOTP onResendOTP={onSendOtp} disabled={isOtpVerified} />\n </FlexView>\n <Separator heightX={2} />\n </>\n )}\n </FlexView>\n <Button\n size=\"small\"\n renderAs=\"secondary-dark\"\n type=\"submit\"\n label={showOtpInput ? 'Log In' : 'Get Verification Code'}\n width=\"100%\"\n busy={
|
|
1
|
+
{"version":3,"file":"identifier-otp-form.js","sources":["../../../../../src/features/auth/login/identifier-otp-form/identifier-otp-form.tsx"],"sourcesContent":["import type { IIdentifierOtpFormProps } from './identifier-otp-form-types';\n\nimport React, { type ChangeEvent, memo, useCallback } from 'react';\n\nimport Button from '../../../ui/buttons/button/button';\nimport TextInput from '../../../ui/inputs/text-input/text-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport InputStatusIcon from '../../comps/input-status-icon/input-status-icon';\nimport ResendOTP from '../../comps/resend-otp/resend-otp';\nimport * as Styled from './identifier-otp-form-styled';\n\nconst IdentifierOtpForm: React.FC<IIdentifierOtpFormProps> = ({\n identifier,\n otp,\n errors,\n isOtpVerified,\n isLoading,\n isSubmitDisabled,\n showOtpInput,\n isAuthRedirecting,\n onChange,\n onSubmit,\n onSendOtp,\n}) => {\n const otpStatusVariant = isOtpVerified ? 'success-dark' : 'primary-dark';\n\n const handleIdentifierChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n onChange('identifier', e.target.value);\n },\n [onChange],\n );\n\n const handleOtpChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n onChange('otp', e.target.value);\n },\n [onChange],\n );\n\n return (\n <Styled.Container\n $gutterX={1.5}\n $gapX={1.5}\n $background=\"BLACK_2\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n <Styled.FormWrapper onSubmit={onSubmit}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n <TextInput\n renderAs={errors.identifier ? 'error-dark' : 'primary-dark'}\n autoFocus\n label=\"Email or Phone\"\n value={identifier}\n onChange={handleIdentifierChange}\n required\n width=\"100%\"\n shape=\"borderLess\"\n errorMessage={errors.identifier}\n disabled={showOtpInput}\n siblingElement={<InputStatusIcon isError={!!errors.identifier} />}\n />\n {showOtpInput && (\n <>\n <Separator height={36} />\n <TextInput\n type=\"password\"\n renderAs={errors.otp ? 'error-dark' : otpStatusVariant}\n label=\"Verification code\"\n value={otp}\n onChange={handleOtpChange}\n width=\"100%\"\n required\n autoFocus\n shape=\"borderLess\"\n errorMessage={errors.otp}\n disabled={isOtpVerified || (otp.length === 4 && isLoading)}\n siblingElement={\n <InputStatusIcon\n isLoading={isLoading}\n isValid={isOtpVerified}\n isError={!!errors.otp}\n />\n }\n />\n <Separator heightX={1.25} />\n <FlexView $alignItems=\"flex-end\" $width=\"100%\">\n <ResendOTP onResendOTP={onSendOtp} disabled={isOtpVerified} />\n </FlexView>\n <Separator heightX={2} />\n </>\n )}\n </FlexView>\n <Button\n size=\"small\"\n renderAs=\"secondary-dark\"\n type=\"submit\"\n label={showOtpInput ? 'Log In' : 'Get Verification Code'}\n width=\"100%\"\n busy={showOtpInput ? isAuthRedirecting : isLoading}\n disabled={isSubmitDisabled}\n />\n </Styled.FormWrapper>\n </Styled.Container>\n );\n};\n\nexport default memo(IdentifierOtpForm);\n"],"names":["IdentifierOtpForm","identifier","otp","errors","isOtpVerified","isLoading","isSubmitDisabled","showOtpInput","isAuthRedirecting","onChange","onSubmit","onSendOtp","otpStatusVariant","handleIdentifierChange","useCallback","e","handleOtpChange","jsx","Styled.Container","jsxs","Styled.FormWrapper","FlexView","TextInput","InputStatusIcon","Fragment","Separator","ResendOTP","Button","identifierOtpForm","memo"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1531,6 +1531,7 @@ declare interface IIdentifierOtpFormProps {
|
|
|
1531
1531
|
isOtpVerified: boolean;
|
|
1532
1532
|
isLoading: boolean;
|
|
1533
1533
|
isSubmitDisabled: boolean;
|
|
1534
|
+
isAuthRedirecting: boolean;
|
|
1534
1535
|
showOtpInput: boolean;
|
|
1535
1536
|
onChange: (key: 'identifier' | 'otp', value: string) => void;
|
|
1536
1537
|
onSubmit: (e: FormEvent<HTMLFormElement>) => void;
|