feat: refresh passkeys on change
This commit is contained in:
parent
66234bd18a
commit
3c0eb1c8f1
|
@ -16,7 +16,8 @@ interface IProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
const ManagePasskeyDrawer = (props: IProps) => {
|
const ManagePasskeyDrawer = (props: IProps) => {
|
||||||
const { setShowPasskeyDrawer } = useContext(PasskeysContext);
|
const { setShowPasskeyDrawer, refreshPasskeys } =
|
||||||
|
useContext(PasskeysContext);
|
||||||
|
|
||||||
const [showDeletePasskeyModal, setShowDeletePasskeyModal] = useState(false);
|
const [showDeletePasskeyModal, setShowDeletePasskeyModal] = useState(false);
|
||||||
const [showRenamePasskeyModal, setShowRenamePasskeyModal] = useState(false);
|
const [showRenamePasskeyModal, setShowRenamePasskeyModal] = useState(false);
|
||||||
|
@ -62,12 +63,14 @@ const ManagePasskeyDrawer = (props: IProps) => {
|
||||||
open={showDeletePasskeyModal}
|
open={showDeletePasskeyModal}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
setShowDeletePasskeyModal(false);
|
setShowDeletePasskeyModal(false);
|
||||||
|
refreshPasskeys();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<RenamePasskeyModal
|
<RenamePasskeyModal
|
||||||
open={showRenamePasskeyModal}
|
open={showRenamePasskeyModal}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
setShowRenamePasskeyModal(false);
|
setShowRenamePasskeyModal(false);
|
||||||
|
refreshPasskeys();
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -1,25 +1,16 @@
|
||||||
import { MenuItemGroup } from '@ente/shared/components/Menu/MenuItemGroup';
|
import { MenuItemGroup } from '@ente/shared/components/Menu/MenuItemGroup';
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { getPasskeys } from 'services/passkeysService';
|
|
||||||
import { Passkey } from 'types/passkey';
|
import { Passkey } from 'types/passkey';
|
||||||
import PasskeyListItem from './PasskeyListItem';
|
import PasskeyListItem from './PasskeyListItem';
|
||||||
|
|
||||||
const PasskeyComponent = () => {
|
interface IProps {
|
||||||
const [passkeys, setPasskeys] = useState<Passkey[]>([]);
|
passkeys: Passkey[];
|
||||||
|
}
|
||||||
const init = async () => {
|
|
||||||
const data = await getPasskeys();
|
|
||||||
setPasskeys(data.passkeys || []);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
init();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
|
const PasskeyComponent = (props: IProps) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<MenuItemGroup>
|
<MenuItemGroup>
|
||||||
{passkeys.map((passkey) => (
|
{props.passkeys.map((passkey) => (
|
||||||
<PasskeyListItem key={passkey.id} passkey={passkey} />
|
<PasskeyListItem key={passkey.id} passkey={passkey} />
|
||||||
))}
|
))}
|
||||||
</MenuItemGroup>
|
</MenuItemGroup>
|
||||||
|
|
|
@ -4,10 +4,17 @@ import { Box } from '@mui/material';
|
||||||
import {
|
import {
|
||||||
finishPasskeyRegistration,
|
finishPasskeyRegistration,
|
||||||
getPasskeyRegistrationOptions,
|
getPasskeyRegistrationOptions,
|
||||||
|
getPasskeys,
|
||||||
} from '../../services/passkeysService';
|
} from '../../services/passkeysService';
|
||||||
import { logError } from '@ente/shared/sentry';
|
import { logError } from '@ente/shared/sentry';
|
||||||
import _sodium from 'libsodium-wrappers';
|
import _sodium from 'libsodium-wrappers';
|
||||||
import { Dispatch, SetStateAction, createContext, useState } from 'react';
|
import {
|
||||||
|
Dispatch,
|
||||||
|
SetStateAction,
|
||||||
|
createContext,
|
||||||
|
useEffect,
|
||||||
|
useState,
|
||||||
|
} from 'react';
|
||||||
import { Passkey } from 'types/passkey';
|
import { Passkey } from 'types/passkey';
|
||||||
import PasskeysList from './PasskeysList';
|
import PasskeysList from './PasskeysList';
|
||||||
import ManagePasskeyDrawer from './ManagePasskeyDrawer';
|
import ManagePasskeyDrawer from './ManagePasskeyDrawer';
|
||||||
|
@ -18,6 +25,7 @@ export const PasskeysContext = createContext(
|
||||||
selectedPasskey: Passkey | null;
|
selectedPasskey: Passkey | null;
|
||||||
setSelectedPasskey: Dispatch<SetStateAction<Passkey | null>>;
|
setSelectedPasskey: Dispatch<SetStateAction<Passkey | null>>;
|
||||||
setShowPasskeyDrawer: Dispatch<SetStateAction<boolean>>;
|
setShowPasskeyDrawer: Dispatch<SetStateAction<boolean>>;
|
||||||
|
refreshPasskeys: () => void;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -28,6 +36,17 @@ const Passkeys = () => {
|
||||||
|
|
||||||
const [showPasskeyDrawer, setShowPasskeyDrawer] = useState(false);
|
const [showPasskeyDrawer, setShowPasskeyDrawer] = useState(false);
|
||||||
|
|
||||||
|
const [passkeys, setPasskeys] = useState<Passkey[]>([]);
|
||||||
|
|
||||||
|
const init = async () => {
|
||||||
|
const data = await getPasskeys();
|
||||||
|
setPasskeys(data.passkeys || []);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
init();
|
||||||
|
}, []);
|
||||||
|
|
||||||
const handleSubmit = async (inputValue: string) => {
|
const handleSubmit = async (inputValue: string) => {
|
||||||
const response: {
|
const response: {
|
||||||
options: {
|
options: {
|
||||||
|
@ -72,6 +91,7 @@ const Passkeys = () => {
|
||||||
selectedPasskey,
|
selectedPasskey,
|
||||||
setSelectedPasskey,
|
setSelectedPasskey,
|
||||||
setShowPasskeyDrawer,
|
setShowPasskeyDrawer,
|
||||||
|
refreshPasskeys: init,
|
||||||
}}>
|
}}>
|
||||||
<CenteredFlex>
|
<CenteredFlex>
|
||||||
<Box>
|
<Box>
|
||||||
|
@ -84,7 +104,7 @@ const Passkeys = () => {
|
||||||
callback={handleSubmit}
|
callback={handleSubmit}
|
||||||
/>
|
/>
|
||||||
<Box>
|
<Box>
|
||||||
<PasskeysList />
|
<PasskeysList passkeys={passkeys} />
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</CenteredFlex>
|
</CenteredFlex>
|
||||||
|
|
Loading…
Reference in a new issue