From b987f80ee545cfffd7f340da8578ceeddd6db8e0 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 5 Jun 2024 14:47:47 +0530 Subject: [PATCH] Only pages in pages --- .../src/pages/passkeys/DeletePasskeyModal.tsx | 74 ----- .../pages/passkeys/ManagePasskeyDrawer.tsx | 101 ------- .../src/pages/passkeys/PasskeyListItem.tsx | 29 -- .../src/pages/passkeys/PasskeysList.tsx | 26 -- .../src/pages/passkeys/RenamePasskeyModal.tsx | 58 ---- .../accounts/src/pages/passkeys/index.tsx | 264 +++++++++++++++++- 6 files changed, 260 insertions(+), 292 deletions(-) delete mode 100644 web/apps/accounts/src/pages/passkeys/DeletePasskeyModal.tsx delete mode 100644 web/apps/accounts/src/pages/passkeys/ManagePasskeyDrawer.tsx delete mode 100644 web/apps/accounts/src/pages/passkeys/PasskeyListItem.tsx delete mode 100644 web/apps/accounts/src/pages/passkeys/PasskeysList.tsx delete mode 100644 web/apps/accounts/src/pages/passkeys/RenamePasskeyModal.tsx diff --git a/web/apps/accounts/src/pages/passkeys/DeletePasskeyModal.tsx b/web/apps/accounts/src/pages/passkeys/DeletePasskeyModal.tsx deleted file mode 100644 index d172808078..0000000000 --- a/web/apps/accounts/src/pages/passkeys/DeletePasskeyModal.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import DialogBoxV2 from "@ente/shared/components/DialogBoxV2"; -import EnteButton from "@ente/shared/components/EnteButton"; -import { Button, Stack, Typography, useMediaQuery } from "@mui/material"; -import { t } from "i18next"; -import { useContext, useState } from "react"; -import { deletePasskey } from "services/passkeysService"; -import { PasskeysContext } from "."; - -interface IProps { - open: boolean; - onClose: () => void; -} - -const DeletePasskeyModal = (props: IProps) => { - const { selectedPasskey, setShowPasskeyDrawer } = - useContext(PasskeysContext); - - const [loading, setLoading] = useState(false); - - const isMobile = useMediaQuery("(max-width: 428px)"); - - const doDelete = async () => { - if (!selectedPasskey) return; - setLoading(true); - try { - await deletePasskey(selectedPasskey.id); - } catch (error) { - console.error(error); - return; - } finally { - setLoading(false); - } - props.onClose(); - setShowPasskeyDrawer(false); - }; - - return ( - - - {t("DELETE_PASSKEY_CONFIRMATION")} - - {t("DELETE")} - - - - - ); -}; - -export default DeletePasskeyModal; diff --git a/web/apps/accounts/src/pages/passkeys/ManagePasskeyDrawer.tsx b/web/apps/accounts/src/pages/passkeys/ManagePasskeyDrawer.tsx deleted file mode 100644 index 4e98748755..0000000000 --- a/web/apps/accounts/src/pages/passkeys/ManagePasskeyDrawer.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { EnteDrawer } from "@ente/shared/components/EnteDrawer"; -import InfoItem from "@ente/shared/components/Info/InfoItem"; -import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; -import MenuItemDivider from "@ente/shared/components/Menu/MenuItemDivider"; -import { MenuItemGroup } from "@ente/shared/components/Menu/MenuItemGroup"; -import Titlebar from "@ente/shared/components/Titlebar"; -import { formatDateTimeFull } from "@ente/shared/time/format"; -import CalendarTodayIcon from "@mui/icons-material/CalendarToday"; -import DeleteIcon from "@mui/icons-material/Delete"; -import EditIcon from "@mui/icons-material/Edit"; -import { Stack } from "@mui/material"; -import { t } from "i18next"; -import { useContext, useState } from "react"; -import { PasskeysContext } from "."; -import DeletePasskeyModal from "./DeletePasskeyModal"; -import RenamePasskeyModal from "./RenamePasskeyModal"; - -interface IProps { - open: boolean; -} - -const ManagePasskeyDrawer = (props: IProps) => { - const { setShowPasskeyDrawer, refreshPasskeys, selectedPasskey } = - useContext(PasskeysContext); - - const [showDeletePasskeyModal, setShowDeletePasskeyModal] = useState(false); - const [showRenamePasskeyModal, setShowRenamePasskeyModal] = useState(false); - - return ( - <> - { - setShowPasskeyDrawer(false); - }} - > - {selectedPasskey && ( - <> - - { - setShowPasskeyDrawer(false); - }} - title="Manage Passkey" - onRootClose={() => { - setShowPasskeyDrawer(false); - }} - /> - } - title={t("CREATED_AT")} - caption={ - `${formatDateTimeFull( - selectedPasskey.createdAt / 1000, - )}` || "" - } - loading={!selectedPasskey} - hideEditOption - /> - - { - setShowRenamePasskeyModal(true); - }} - startIcon={} - label={"Rename Passkey"} - /> - - { - setShowDeletePasskeyModal(true); - }} - startIcon={} - label={"Delete Passkey"} - color="critical" - /> - - - - )} - - { - setShowDeletePasskeyModal(false); - refreshPasskeys(); - }} - /> - { - setShowRenamePasskeyModal(false); - refreshPasskeys(); - }} - /> - - ); -}; - -export default ManagePasskeyDrawer; diff --git a/web/apps/accounts/src/pages/passkeys/PasskeyListItem.tsx b/web/apps/accounts/src/pages/passkeys/PasskeyListItem.tsx deleted file mode 100644 index f1019e5db1..0000000000 --- a/web/apps/accounts/src/pages/passkeys/PasskeyListItem.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; -import ChevronRightIcon from "@mui/icons-material/ChevronRight"; -import KeyIcon from "@mui/icons-material/Key"; -import { useContext } from "react"; -import type { Passkey } from "types/passkey"; -import { PasskeysContext } from "."; - -interface IProps { - passkey: Passkey; -} - -const PasskeyListItem = (props: IProps) => { - const { setSelectedPasskey, setShowPasskeyDrawer } = - useContext(PasskeysContext); - - return ( - { - setSelectedPasskey(props.passkey); - setShowPasskeyDrawer(true); - }} - startIcon={} - endIcon={} - label={props.passkey?.friendlyName} - /> - ); -}; - -export default PasskeyListItem; diff --git a/web/apps/accounts/src/pages/passkeys/PasskeysList.tsx b/web/apps/accounts/src/pages/passkeys/PasskeysList.tsx deleted file mode 100644 index f4a5bf4199..0000000000 --- a/web/apps/accounts/src/pages/passkeys/PasskeysList.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import MenuItemDivider from "@ente/shared/components/Menu/MenuItemDivider"; -import { MenuItemGroup } from "@ente/shared/components/Menu/MenuItemGroup"; -import { Fragment } from "react"; -import type { Passkey } from "types/passkey"; -import PasskeyListItem from "./PasskeyListItem"; - -interface IProps { - passkeys: Passkey[]; -} - -const PasskeyComponent = (props: IProps) => { - return ( - <> - - {props.passkeys?.map((passkey, i) => ( - - - {i < props.passkeys.length - 1 && } - - ))} - - - ); -}; - -export default PasskeyComponent; diff --git a/web/apps/accounts/src/pages/passkeys/RenamePasskeyModal.tsx b/web/apps/accounts/src/pages/passkeys/RenamePasskeyModal.tsx deleted file mode 100644 index 9b47cd2d98..0000000000 --- a/web/apps/accounts/src/pages/passkeys/RenamePasskeyModal.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import DialogBoxV2 from "@ente/shared/components/DialogBoxV2"; -import SingleInputForm from "@ente/shared/components/SingleInputForm"; -import { useMediaQuery } from "@mui/material"; -import { t } from "i18next"; -import { useContext } from "react"; -import { renamePasskey } from "services/passkeysService"; -import { PasskeysContext } from "."; - -interface IProps { - open: boolean; - onClose: () => void; -} - -const RenamePasskeyModal = (props: IProps) => { - const { selectedPasskey } = useContext(PasskeysContext); - - const isMobile = useMediaQuery("(max-width: 428px)"); - - const onSubmit = async (inputValue: string) => { - if (!selectedPasskey) return; - try { - await renamePasskey(selectedPasskey.id, inputValue); - } catch (error) { - console.error(error); - return; - } - - props.onClose(); - }; - - return ( - - - - ); -}; - -export default RenamePasskeyModal; diff --git a/web/apps/accounts/src/pages/passkeys/index.tsx b/web/apps/accounts/src/pages/passkeys/index.tsx index 165a403166..3ba7ac2b76 100644 --- a/web/apps/accounts/src/pages/passkeys/index.tsx +++ b/web/apps/accounts/src/pages/passkeys/index.tsx @@ -1,25 +1,44 @@ import log from "@/next/log"; import { ensure } from "@/utils/ensure"; import { CenteredFlex } from "@ente/shared/components/Container"; +import DialogBoxV2 from "@ente/shared/components/DialogBoxV2"; +import EnteButton from "@ente/shared/components/EnteButton"; +import { EnteDrawer } from "@ente/shared/components/EnteDrawer"; import FormPaper from "@ente/shared/components/Form/FormPaper"; +import InfoItem from "@ente/shared/components/Info/InfoItem"; +import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem"; +import MenuItemDivider from "@ente/shared/components/Menu/MenuItemDivider"; +import { MenuItemGroup } from "@ente/shared/components/Menu/MenuItemGroup"; import SingleInputForm from "@ente/shared/components/SingleInputForm"; +import Titlebar from "@ente/shared/components/Titlebar"; import { ACCOUNTS_PAGES } from "@ente/shared/constants/pages"; import { getToken } from "@ente/shared/storage/localStorage/helpers"; -import { Box, Typography } from "@mui/material"; +import { formatDateTimeFull } from "@ente/shared/time/format"; +import CalendarTodayIcon from "@mui/icons-material/CalendarToday"; +import ChevronRightIcon from "@mui/icons-material/ChevronRight"; +import DeleteIcon from "@mui/icons-material/Delete"; +import EditIcon from "@mui/icons-material/Edit"; +import KeyIcon from "@mui/icons-material/Key"; +import { Box, Button, Stack, Typography, useMediaQuery } from "@mui/material"; import { t } from "i18next"; import _sodium from "libsodium-wrappers"; import { useRouter } from "next/router"; import { useAppContext } from "pages/_app"; import type { Dispatch, SetStateAction } from "react"; -import { createContext, useEffect, useState } from "react"; +import { + Fragment, + createContext, + useContext, + useEffect, + useState, +} from "react"; +import { deletePasskey, renamePasskey } from "services/passkeysService"; import type { Passkey } from "types/passkey"; import { finishPasskeyRegistration, getPasskeyRegistrationOptions, getPasskeys, } from "../../services/passkeysService"; -import ManagePasskeyDrawer from "./ManagePasskeyDrawer"; -import PasskeysList from "./PasskeysList"; export const PasskeysContext = createContext( {} as { @@ -164,3 +183,240 @@ const Passkeys = () => { }; export default Passkeys; + +interface PasskeysListProps { + passkeys: Passkey[]; +} + +const PasskeysList: React.FC = ({ passkeys }) => { + return ( + <> + + {passkeys.map((passkey, i) => ( + + + {i < passkeys.length - 1 && } + + ))} + + + ); +}; + +interface PasskeyListItemProps { + passkey: Passkey; +} + +const PasskeyListItem: React.FC = ({ passkey }) => { + const { setSelectedPasskey, setShowPasskeyDrawer } = + useContext(PasskeysContext); + + return ( + { + setSelectedPasskey(passkey); + setShowPasskeyDrawer(true); + }} + startIcon={} + endIcon={} + label={passkey?.friendlyName} + /> + ); +}; + +interface ManagePasskeyDrawerProps { + open: boolean; +} + +const ManagePasskeyDrawer: React.FC = (props) => { + const { setShowPasskeyDrawer, refreshPasskeys, selectedPasskey } = + useContext(PasskeysContext); + + const [showDeletePasskeyModal, setShowDeletePasskeyModal] = useState(false); + const [showRenamePasskeyModal, setShowRenamePasskeyModal] = useState(false); + + return ( + <> + { + setShowPasskeyDrawer(false); + }} + > + {selectedPasskey && ( + <> + + { + setShowPasskeyDrawer(false); + }} + title="Manage Passkey" + onRootClose={() => { + setShowPasskeyDrawer(false); + }} + /> + } + title={t("CREATED_AT")} + caption={ + `${formatDateTimeFull( + selectedPasskey.createdAt / 1000, + )}` || "" + } + loading={!selectedPasskey} + hideEditOption + /> + + { + setShowRenamePasskeyModal(true); + }} + startIcon={} + label={"Rename Passkey"} + /> + + { + setShowDeletePasskeyModal(true); + }} + startIcon={} + label={"Delete Passkey"} + color="critical" + /> + + + + )} + + { + setShowDeletePasskeyModal(false); + refreshPasskeys(); + }} + /> + { + setShowRenamePasskeyModal(false); + refreshPasskeys(); + }} + /> + + ); +}; + +interface DeletePasskeyModalProps { + open: boolean; + onClose: () => void; +} + +const DeletePasskeyModal: React.FC = (props) => { + const { selectedPasskey, setShowPasskeyDrawer } = + useContext(PasskeysContext); + + const [loading, setLoading] = useState(false); + + const isMobile = useMediaQuery("(max-width: 428px)"); + + const doDelete = async () => { + if (!selectedPasskey) return; + setLoading(true); + try { + await deletePasskey(selectedPasskey.id); + } catch (error) { + console.error(error); + return; + } finally { + setLoading(false); + } + props.onClose(); + setShowPasskeyDrawer(false); + }; + + return ( + + + {t("DELETE_PASSKEY_CONFIRMATION")} + + {t("DELETE")} + + + + + ); +}; + +interface RenamePasskeyModalProps { + open: boolean; + onClose: () => void; +} + +const RenamePasskeyModal: React.FC = (props) => { + const { selectedPasskey } = useContext(PasskeysContext); + + const isMobile = useMediaQuery("(max-width: 428px)"); + + const onSubmit = async (inputValue: string) => { + if (!selectedPasskey) return; + try { + await renamePasskey(selectedPasskey.id, inputValue); + } catch (error) { + console.error(error); + return; + } + + props.onClose(); + }; + + return ( + + + + ); +};