@opexa/portal-components 0.1.13 → 0.1.15
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,4 +1,5 @@
|
|
|
1
1
|
export interface AccountSecurityProps {
|
|
2
2
|
className?: string;
|
|
3
|
+
hideSecurityQuestionFeature?: boolean;
|
|
3
4
|
}
|
|
4
|
-
export declare function AccountSecurity(
|
|
5
|
+
export declare function AccountSecurity({ className, hideSecurityQuestionFeature, }: AccountSecurityProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { createListCollection } from '@ark-ui/react/collection';
|
|
4
4
|
import { ark } from '@ark-ui/react/factory';
|
|
5
5
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
@@ -25,10 +25,10 @@ import { Portal } from '../../ui/Portal/index.js';
|
|
|
25
25
|
import { Select } from '../../ui/Select/index.js';
|
|
26
26
|
import { getQueryClient } from '../../utils/getQueryClient.js';
|
|
27
27
|
import { getProfileCompletionQueryKey } from '../../utils/queryKeys.js';
|
|
28
|
-
export function AccountSecurity(
|
|
29
|
-
return (_jsxs("div", { className: twMerge('space-y-3xl',
|
|
28
|
+
export function AccountSecurity({ className, hideSecurityQuestionFeature = false, }) {
|
|
29
|
+
return (_jsxs("div", { className: twMerge('space-y-3xl', className), children: [_jsx(LoginPassword, { hideSecurityQuestionFeature: hideSecurityQuestionFeature }), _jsx(TransactionPassword, {})] }));
|
|
30
30
|
}
|
|
31
|
-
function LoginPassword() {
|
|
31
|
+
function LoginPassword({ hideSecurityQuestionFeature, }) {
|
|
32
32
|
const profileCompletionQuery = useProfileCompletionQuery();
|
|
33
33
|
const profileCompletion = profileCompletionQuery.data;
|
|
34
34
|
const updateAccountMutation = useUpdateAccountMutation({
|
|
@@ -69,6 +69,8 @@ function LoginPassword() {
|
|
|
69
69
|
message: 'Passwords do not match',
|
|
70
70
|
});
|
|
71
71
|
}
|
|
72
|
+
if (hideSecurityQuestionFeature)
|
|
73
|
+
return;
|
|
72
74
|
if (data.secretAnswer && !data.secretQuestion) {
|
|
73
75
|
ctx.addIssue({
|
|
74
76
|
path: ['secretQuestion'],
|
|
@@ -100,21 +102,23 @@ function LoginPassword() {
|
|
|
100
102
|
: 'text-text-warning-primary'), children: profileCompletion?.accountPassword ? (_jsx(CheckVerified02Icon, {})) : (_jsx(AlertCircleIcon, {})) })] }), _jsxs("form", { className: "mt-5 rounded-xl border border-border-secondary bg-bg-primary-alt shadow-xs", onSubmit: form.handleSubmit((data) => {
|
|
101
103
|
updateAccountMutation.mutate({
|
|
102
104
|
password: data.password,
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
105
|
+
...(!hideSecurityQuestionFeature && {
|
|
106
|
+
secretAnswer: data.secretAnswer ? data.secretAnswer : undefined,
|
|
107
|
+
secretQuestion: data.secretQuestion
|
|
108
|
+
? data.secretQuestion
|
|
109
|
+
: undefined,
|
|
110
|
+
}),
|
|
107
111
|
});
|
|
108
|
-
}), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.confirmPassword, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Confirm Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.confirmPassword?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.secretQuestion, children: [_jsxs(Select.Root, { deselectable: true, collection: secretQuestionCollection, lazyMount: true, positioning: {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
112
|
+
}), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.password, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('password') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.password?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.confirmPassword, children: [_jsxs(PasswordInput.Root, { children: [_jsx(PasswordInput.Label, { children: "Confirm Password" }), _jsxs(PasswordInput.Control, { children: [_jsx(PasswordInput.Input, { ...form.register('confirmPassword') }), _jsx(PasswordInput.VisibilityTrigger, { children: _jsx(PasswordInput.Indicator, { fallback: _jsx(EyeOffIcon, {}), asChild: true, children: _jsx(EyeIcon, {}) }) })] })] }), _jsx(Field.ErrorText, { children: form.formState.errors.confirmPassword?.message })] }), !hideSecurityQuestionFeature && (_jsxs(_Fragment, { children: [_jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.secretQuestion, children: [_jsxs(Select.Root, { deselectable: true, collection: secretQuestionCollection, lazyMount: true, positioning: {
|
|
113
|
+
sameWidth: true,
|
|
114
|
+
}, value: secretQuestion ? [secretQuestion] : [], onValueChange: (details) => {
|
|
115
|
+
form.setValue('secretQuestion', z.enum(SECRET_QUESTIONS).safeParse(details.value.at(0))
|
|
116
|
+
.data ?? null, {
|
|
117
|
+
shouldDirty: true,
|
|
118
|
+
shouldTouch: true,
|
|
119
|
+
shouldValidate: true,
|
|
120
|
+
});
|
|
121
|
+
}, children: [_jsx(Select.Label, { children: "Security Question" }), _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: secretQuestionCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: secretQuestionCollection.stringifyItem(provider) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider))) }) }) }) })] }), _jsx(Field.ErrorText, { children: form.formState.errors.secretQuestion?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.secretAnswer, children: [_jsx(Field.Label, { children: "Answer" }), _jsx(Field.Input, { ...form.register('secretAnswer') }), _jsx(Field.ErrorText, { children: form.formState.errors.secretAnswer?.message })] })] }))] }), form.formState.isDirty && (_jsxs("div", { className: "flex justify-end gap-lg border-border-secondary border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: updateAccountMutation.isPending || !form.formState.isValid, children: "Save Changes" })] }))] })] }));
|
|
118
122
|
}
|
|
119
123
|
function TransactionPassword() {
|
|
120
124
|
const profileCompletionQuery = useProfileCompletionQuery();
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import Image from 'next/image';
|
|
3
|
+
import { useTimeout } from 'usehooks-ts';
|
|
3
4
|
import { useShallow } from 'zustand/shallow';
|
|
5
|
+
import { useAccountQuery } from '../../../client/hooks/useAccountQuery.js';
|
|
4
6
|
import { useGlobalStore } from '../../../client/hooks/useGlobalStore.js';
|
|
5
7
|
import { useSessionQuery } from '../../../client/hooks/useSessionQuery.js';
|
|
6
8
|
import { Dialog } from '../../../ui/Dialog/index.js';
|
|
@@ -21,13 +23,32 @@ export function KYCDefault(props) {
|
|
|
21
23
|
termsOfUse: ctx.termsOfUse,
|
|
22
24
|
})));
|
|
23
25
|
const kyc = useKYCDefault(props?.isSkippable ?? false);
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
+
const sessionQuery = useSessionQuery();
|
|
27
|
+
const open = globalStore.kyc.open &&
|
|
26
28
|
!globalStore.kycReminder.open &&
|
|
27
|
-
!
|
|
29
|
+
!sessionQuery.isLoading &&
|
|
28
30
|
!globalStore.disclaimer.open &&
|
|
29
31
|
!globalStore.termsOfUse.open;
|
|
30
|
-
|
|
32
|
+
const accountQuery = useAccountQuery({
|
|
33
|
+
enabled: sessionQuery.data?.status === 'authenticated' &&
|
|
34
|
+
(globalStore.kyc.open || globalStore.kycReminder.open),
|
|
35
|
+
refetchInterval: (ctx) => {
|
|
36
|
+
if (ctx.state.data?.verificationStatus === 'VERIFIED') {
|
|
37
|
+
return false;
|
|
38
|
+
}
|
|
39
|
+
if (ctx.state.dataUpdateCount > 5) {
|
|
40
|
+
return false;
|
|
41
|
+
}
|
|
42
|
+
return 1000;
|
|
43
|
+
},
|
|
44
|
+
});
|
|
45
|
+
useTimeout(() => {
|
|
46
|
+
globalStore.kyc.setOpen(false);
|
|
47
|
+
globalStore.kycReminder.setOpen(false);
|
|
48
|
+
}, accountQuery.data && accountQuery.data.verificationStatus === 'VERIFIED'
|
|
49
|
+
? 1
|
|
50
|
+
: null);
|
|
51
|
+
return (_jsxs(_Fragment, { children: [_jsx(KYCDefaultContext, { value: kyc, children: _jsx(Dialog.Root, { open: open, onOpenChange: (details) => {
|
|
31
52
|
globalStore.kyc.setOpen(details.open);
|
|
32
53
|
}, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: kyc.reset, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "fixed top-[57px] overflow-hidden", children: _jsx(Dialog.Content, { className: "mx-auto h-full w-full overflow-y-auto bg-bg-primary-alt md:max-h-[95vh] lg:w-fit", children: _jsxs("div", { className: "mt-[calc(var(--safe-area-inset-top)*3)] flex h-dvh w-full flex-col overflow-y-auto p-3xl sm:h-fit lg:w-[400px]", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto mb-5 block h-7.5 w-auto", draggable: false }), _jsx(Indicator, {}), kyc.step === 1 && _jsx(IdentityVerification, {}), kyc.step === 2 && _jsx(PersonalInformation, {})] }) }) })] }) }) }), _jsx(KYCReminder, { ...props })] }));
|
|
33
54
|
}
|