@openfort/react 1.1.1 → 1.1.2
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/build/components/Common/TickList/styles.js +7 -6
- package/build/components/Common/TickList/styles.js.map +1 -1
- package/build/components/Pages/CreateWallet/SolanaCreateWallet.js +2 -2
- package/build/components/Pages/CreateWallet/index.js +2 -2
- package/build/components/PasswordStrength/PasswordStrengthIndicator.d.ts +1 -1
- package/build/components/PasswordStrength/PasswordStrengthIndicator.js +10 -1
- package/build/components/PasswordStrength/PasswordStrengthIndicator.js.map +1 -1
- package/build/version.d.ts +1 -1
- package/build/version.js +1 -1
- package/package.json +2 -2
|
@@ -3,7 +3,7 @@ import styled from '../../../styles/styled/index.js';
|
|
|
3
3
|
const TickListContainer = styled.ul `
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
|
-
gap:
|
|
6
|
+
gap: 6px;
|
|
7
7
|
padding-top: 8px;
|
|
8
8
|
padding-bottom: 8px;
|
|
9
9
|
`;
|
|
@@ -11,16 +11,17 @@ const TickItem = styled.li `
|
|
|
11
11
|
display: flex;
|
|
12
12
|
align-items: center;
|
|
13
13
|
text-align: left;
|
|
14
|
-
gap:
|
|
15
|
-
font-size:
|
|
16
|
-
line-height:
|
|
14
|
+
gap: 6px;
|
|
15
|
+
font-size: 13px;
|
|
16
|
+
line-height: 18px;
|
|
17
|
+
color: var(--ck-body-color-muted);
|
|
17
18
|
`;
|
|
18
19
|
const TickIconWrapper = styled.span `
|
|
19
20
|
display: flex;
|
|
20
21
|
align-items: center;
|
|
21
22
|
justify-content: center;
|
|
22
|
-
width:
|
|
23
|
-
height:
|
|
23
|
+
width: 14px;
|
|
24
|
+
height: 14px;
|
|
24
25
|
flex-shrink: 0;
|
|
25
26
|
`;
|
|
26
27
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -203,14 +203,14 @@ const SolanaCreatePassword = ({ onChangeMethod, onBack, logoutOnBack, }) => {
|
|
|
203
203
|
if (recoveryError)
|
|
204
204
|
triggerResize();
|
|
205
205
|
}, [recoveryError]);
|
|
206
|
-
return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(FloatingGraphic, { height: "80px", logoCenter: { logo: jsx(KeyIcon, {}), size: '1.2' }, logoTopLeft: { logo: jsx(LockIcon, {}), size: '0.75' }, logoBottomRight: { logo: jsx(LockIcon, {}), size: '0.5' } }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx(
|
|
206
|
+
return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(FloatingGraphic, { height: "80px", logoCenter: { logo: jsx(KeyIcon, {}), size: '1.2' }, logoTopLeft: { logo: jsx(LockIcon, {}), size: '0.75' }, logoBottomRight: { logo: jsx(LockIcon, {}), size: '0.5' } }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx("span", { style: { display: 'block', marginBottom: 16 }, children: "You will use this password to access your wallet, so keep it safe." }), jsxs("form", { onSubmit: (e) => {
|
|
207
207
|
e.preventDefault();
|
|
208
208
|
handleSubmit();
|
|
209
209
|
}, children: [jsx(Input, { value: recoveryPhrase, onChange: (e) => {
|
|
210
210
|
if (showPasswordIsTooWeakError)
|
|
211
211
|
setShowPasswordIsTooWeakError(false);
|
|
212
212
|
setRecoveryPhrase(e.target.value);
|
|
213
|
-
}, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), jsx(
|
|
213
|
+
}, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), recoveryPhrase && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(TickList, { items: ["Make sure it's strong and memorable", 'If you lose it, no one can recover it for you'] }) })), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Create wallet" })] }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSWORD, onChangeMethod: onChangeMethod })] })] }));
|
|
214
214
|
};
|
|
215
215
|
const ChooseRecoveryMethod = ({ onChangeMethod, onBack, logoutOnBack, }) => {
|
|
216
216
|
return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Choose a recovery method" }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSKEY), children: [jsx(ProviderLabel, { children: "Passkey" }), jsx(ProviderIcon, { children: jsx(FingerPrintIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSWORD), children: [jsx(ProviderLabel, { children: "Password" }), jsx(ProviderIcon, { children: jsx(KeyIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.AUTOMATIC), children: [jsx(ProviderLabel, { children: "Automatic" }), jsx(ProviderIcon, { children: jsx(LockIcon, {}) })] }) })] }));
|
|
@@ -273,14 +273,14 @@ const CreateWalletPasswordRecovery = ({ onChangeMethod, onBack, logoutOnBack, })
|
|
|
273
273
|
}, logoBottomRight: {
|
|
274
274
|
logo: jsx(LockIcon, {}),
|
|
275
275
|
size: '0.5',
|
|
276
|
-
} }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx(
|
|
276
|
+
} }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx("span", { style: { display: 'block', marginBottom: 16 }, children: "You will use this password to access your wallet, so keep it safe." }), jsxs("form", { onSubmit: (e) => {
|
|
277
277
|
e.preventDefault();
|
|
278
278
|
handleSubmit();
|
|
279
279
|
}, children: [jsx(Input, { value: recoveryPhrase, onChange: (e) => {
|
|
280
280
|
if (showPasswordIsTooWeakError)
|
|
281
281
|
setShowPasswordIsTooWeakError(false);
|
|
282
282
|
setRecoveryPhrase(e.target.value);
|
|
283
|
-
}, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), jsx(
|
|
283
|
+
}, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), recoveryPhrase && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(TickList, { items: ["Make sure it's strong and memorable", 'If you lose it, no one can recover it for you'] }) })), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Create wallet" })] }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSWORD, onChangeMethod: onChangeMethod })] })] }));
|
|
284
284
|
};
|
|
285
285
|
const ChooseRecoveryMethod = ({ onChangeMethod, onBack, logoutOnBack, }) => {
|
|
286
286
|
return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Choose a recovery method" }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSKEY), children: [jsx(ProviderLabel, { children: "Passkey" }), jsx(ProviderIcon, { children: jsx(FingerPrintIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSWORD), children: [jsx(ProviderLabel, { children: "Password" }), jsx(ProviderIcon, { children: jsx(KeyIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.AUTOMATIC), children: [jsx(ProviderLabel, { children: "Automatic" }), jsx(ProviderIcon, { children: jsx(LockIcon, {}) })] }) })] }));
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { motion } from 'framer-motion';
|
|
3
|
-
import { useMemo } from 'react';
|
|
3
|
+
import { useMemo, useEffect } from 'react';
|
|
4
4
|
import styled from '../../styles/styled/index.js';
|
|
5
|
+
import { useOpenfort } from '../Openfort/useOpenfort.js';
|
|
5
6
|
import { getPasswordStrength, getPasswordStrengthLabel } from './password-utility.js';
|
|
6
7
|
|
|
7
8
|
const Container = styled.div `
|
|
@@ -49,6 +50,14 @@ const PasswordStrengthIndicator = ({ password, showPasswordIsTooWeakError, }) =>
|
|
|
49
50
|
return '#d1d5db'; // gray-300
|
|
50
51
|
}
|
|
51
52
|
}, [label]);
|
|
53
|
+
const { triggerResize } = useOpenfort();
|
|
54
|
+
// Grow/shrink the modal as the meter appears/disappears so it isn't clipped.
|
|
55
|
+
useEffect(() => {
|
|
56
|
+
triggerResize();
|
|
57
|
+
}, [!!password, showPasswordIsTooWeakError, triggerResize]);
|
|
58
|
+
// Only surface strength once the user starts typing (or on the too-weak error).
|
|
59
|
+
if (!password && !showPasswordIsTooWeakError)
|
|
60
|
+
return null;
|
|
52
61
|
return (jsxs(Container, { children: [jsx(BarWrapper, { children: jsx(Progress, { color: color, initial: { width: 0 }, animate: { width: `${passwordStrength * 100}%` }, transition: { ease: 'easeOut', duration: 0.5 } }) }), jsxs("div", { style: { position: 'relative' }, children: [jsx(motion.div, { initial: { opacity: 1 }, animate: {
|
|
53
62
|
opacity: showPasswordIsTooWeakError ? 0 : 1,
|
|
54
63
|
y: showPasswordIsTooWeakError ? 5 : 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordStrengthIndicator.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PasswordStrengthIndicator.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const OPENFORT_VERSION = "1.1.
|
|
1
|
+
export declare const OPENFORT_VERSION = "1.1.2";
|
package/build/version.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openfort/react",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"author": "Openfort (https://www.openfort.io)",
|
|
5
5
|
"license": "BSD-2-Clause license",
|
|
6
6
|
"description": "The easiest way to integrate Openfort to your project.",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"react"
|
|
66
66
|
],
|
|
67
67
|
"dependencies": {
|
|
68
|
-
"@openfort/openfort-js": "^1.3.
|
|
68
|
+
"@openfort/openfort-js": "^1.3.6",
|
|
69
69
|
"buffer": "^6.0.3",
|
|
70
70
|
"detect-browser": "^5.3.0",
|
|
71
71
|
"fast-password-entropy": "^1.1.1",
|