+ + + + ); +}; + +export default NavBarFrame; diff --git a/src/component/Frame/PoweredBy.tsx b/src/component/Frame/PoweredBy.tsx new file mode 100755 index 0000000..9df4c50 --- /dev/null +++ b/src/component/Frame/PoweredBy.tsx @@ -0,0 +1,56 @@ +import { Box, BoxProps, Typography, useTheme } from "@mui/material"; +import LogoIcon from "./assets/logo.svg"; +import LogoIconDark from "./assets/logo_light.svg"; + +export interface PoweredByProps extends BoxProps {} + +const PoweredBy = ({ ...rest }: PoweredByProps) => { + const theme = useTheme(); + return ( + + + theme.palette.action.disabled, + }} + fontWeight={500} + > + Powered by + + + + + ); +}; + +export default PoweredBy; diff --git a/src/component/Frame/RadiusFrame.tsx b/src/component/Frame/RadiusFrame.tsx new file mode 100755 index 0000000..638cd12 --- /dev/null +++ b/src/component/Frame/RadiusFrame.tsx @@ -0,0 +1,10 @@ +import { Box, styled } from "@mui/material"; + +export const RadiusFrame = styled(Box)<{ + withBorder?: boolean; + square?: boolean; +}>(({ theme, withBorder, square }) => ({ + borderRadius: square ? 0 : theme.shape.borderRadius, + backgroundColor: theme.palette.background.paper, + border: withBorder ? `1px solid ${theme.palette.divider}` : "initial", +})); diff --git a/src/component/Frame/assets/logo.svg b/src/component/Frame/assets/logo.svg new file mode 100755 index 0000000..de7c93d --- /dev/null +++ b/src/component/Frame/assets/logo.svg @@ -0,0 +1,54 @@ + + + diff --git a/src/component/Frame/assets/logo_light.svg b/src/component/Frame/assets/logo_light.svg new file mode 100755 index 0000000..7bdb432 --- /dev/null +++ b/src/component/Frame/assets/logo_light.svg @@ -0,0 +1,54 @@ + + + diff --git a/src/component/Icons/Add.tsx b/src/component/Icons/Add.tsx new file mode 100755 index 0000000..e00a627 --- /dev/null +++ b/src/component/Icons/Add.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Add(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/AppFolder.tsx b/src/component/Icons/AppFolder.tsx new file mode 100755 index 0000000..64407ad --- /dev/null +++ b/src/component/Icons/AppFolder.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function AppFolder(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/AppGeneric.tsx b/src/component/Icons/AppGeneric.tsx new file mode 100755 index 0000000..46b8ad2 --- /dev/null +++ b/src/component/Icons/AppGeneric.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function AppGeneric(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/AppsList.tsx b/src/component/Icons/AppsList.tsx new file mode 100755 index 0000000..491dab9 --- /dev/null +++ b/src/component/Icons/AppsList.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function AppsList(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/AppsListOutlined.tsx b/src/component/Icons/AppsListOutlined.tsx new file mode 100755 index 0000000..f1de6f8 --- /dev/null +++ b/src/component/Icons/AppsListOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function AppsListOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Archive.tsx b/src/component/Icons/Archive.tsx new file mode 100755 index 0000000..441ed4e --- /dev/null +++ b/src/component/Icons/Archive.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Archive(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArchiveArrow.tsx b/src/component/Icons/ArchiveArrow.tsx new file mode 100755 index 0000000..5f8ab40 --- /dev/null +++ b/src/component/Icons/ArchiveArrow.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArchiveArrow(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArrowClockwise.tsx b/src/component/Icons/ArrowClockwise.tsx new file mode 100755 index 0000000..149dba2 --- /dev/null +++ b/src/component/Icons/ArrowClockwise.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArrowClockwise(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArrowClockwiseFilled.tsx b/src/component/Icons/ArrowClockwiseFilled.tsx new file mode 100755 index 0000000..7c2f43b --- /dev/null +++ b/src/component/Icons/ArrowClockwiseFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArrowClockwiseFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArrowDown.tsx b/src/component/Icons/ArrowDown.tsx new file mode 100755 index 0000000..f813f28 --- /dev/null +++ b/src/component/Icons/ArrowDown.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArrowDown(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArrowHookDownLeft.tsx b/src/component/Icons/ArrowHookDownLeft.tsx new file mode 100755 index 0000000..3d64366 --- /dev/null +++ b/src/component/Icons/ArrowHookDownLeft.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArrowHookDownLeft(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArrowHookUpRight.tsx b/src/component/Icons/ArrowHookUpRight.tsx new file mode 100755 index 0000000..605d0ee --- /dev/null +++ b/src/component/Icons/ArrowHookUpRight.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArrowHookUpRight(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArrowImport.tsx b/src/component/Icons/ArrowImport.tsx new file mode 100755 index 0000000..3dfd0b4 --- /dev/null +++ b/src/component/Icons/ArrowImport.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArrowImport(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArrowLeft.tsx b/src/component/Icons/ArrowLeft.tsx new file mode 100755 index 0000000..04226cc --- /dev/null +++ b/src/component/Icons/ArrowLeft.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const ArrowLeft = createSvgIcon( + , + "ArrowLeft", +); + +export default ArrowLeft; diff --git a/src/component/Icons/ArrowRepeatAll.tsx b/src/component/Icons/ArrowRepeatAll.tsx new file mode 100755 index 0000000..1bdae1d --- /dev/null +++ b/src/component/Icons/ArrowRepeatAll.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArrowRepeatAll(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArrowRepeatOne.tsx b/src/component/Icons/ArrowRepeatOne.tsx new file mode 100755 index 0000000..6976de9 --- /dev/null +++ b/src/component/Icons/ArrowRepeatOne.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArrowRepeatOne(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArrowShuffle.tsx b/src/component/Icons/ArrowShuffle.tsx new file mode 100755 index 0000000..8be0b5f --- /dev/null +++ b/src/component/Icons/ArrowShuffle.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArrowShuffle(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArrowSort.tsx b/src/component/Icons/ArrowSort.tsx new file mode 100755 index 0000000..391f12b --- /dev/null +++ b/src/component/Icons/ArrowSort.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArrowSort(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArrowSortDownFilled.tsx b/src/component/Icons/ArrowSortDownFilled.tsx new file mode 100755 index 0000000..d6b784a --- /dev/null +++ b/src/component/Icons/ArrowSortDownFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArrowSortDownFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArrowSync.tsx b/src/component/Icons/ArrowSync.tsx new file mode 100755 index 0000000..00862a0 --- /dev/null +++ b/src/component/Icons/ArrowSync.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArrowSync(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ArrowSyncCircleFilled.tsx b/src/component/Icons/ArrowSyncCircleFilled.tsx new file mode 100755 index 0000000..febf8ad --- /dev/null +++ b/src/component/Icons/ArrowSyncCircleFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ArrowSyncCircleFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/BinFullOutlined.tsx b/src/component/Icons/BinFullOutlined.tsx new file mode 100755 index 0000000..3fd3e12 --- /dev/null +++ b/src/component/Icons/BinFullOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function BinFullOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Book.tsx b/src/component/Icons/Book.tsx new file mode 100755 index 0000000..6974878 --- /dev/null +++ b/src/component/Icons/Book.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Book(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/BookInformation.tsx b/src/component/Icons/BookInformation.tsx new file mode 100755 index 0000000..0c7ce44 --- /dev/null +++ b/src/component/Icons/BookInformation.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function BookInformation(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Border.tsx b/src/component/Icons/Border.tsx new file mode 100755 index 0000000..a1a44e8 --- /dev/null +++ b/src/component/Icons/Border.tsx @@ -0,0 +1,30 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Border(props: SvgIconProps) { + return ( + + + + + + + + + + + + + ); +} diff --git a/src/component/Icons/BorderAll.tsx b/src/component/Icons/BorderAll.tsx new file mode 100755 index 0000000..db07d30 --- /dev/null +++ b/src/component/Icons/BorderAll.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function BorderAll(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/BorderInside.tsx b/src/component/Icons/BorderInside.tsx new file mode 100755 index 0000000..1d3d566 --- /dev/null +++ b/src/component/Icons/BorderInside.tsx @@ -0,0 +1,12 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function BorderInside(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Bot.tsx b/src/component/Icons/Bot.tsx new file mode 100755 index 0000000..f9e6046 --- /dev/null +++ b/src/component/Icons/Bot.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Bot(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/BoxMultiple.tsx b/src/component/Icons/BoxMultiple.tsx new file mode 100755 index 0000000..18ac6e4 --- /dev/null +++ b/src/component/Icons/BoxMultiple.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function BoxMultiple(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/BoxMultipleFilled.tsx b/src/component/Icons/BoxMultipleFilled.tsx new file mode 100755 index 0000000..45b9c1b --- /dev/null +++ b/src/component/Icons/BoxMultipleFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function BoxMultipleFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/BranchCompare.tsx b/src/component/Icons/BranchCompare.tsx new file mode 100755 index 0000000..9c4bc65 --- /dev/null +++ b/src/component/Icons/BranchCompare.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function BranchCompare(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/BranchForkLink.tsx b/src/component/Icons/BranchForkLink.tsx new file mode 100755 index 0000000..1a744ea --- /dev/null +++ b/src/component/Icons/BranchForkLink.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function BranchForkLink(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Broom.tsx b/src/component/Icons/Broom.tsx new file mode 100755 index 0000000..2b11cdb --- /dev/null +++ b/src/component/Icons/Broom.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const Broom = createSvgIcon( + , + "Broom", +); + +export default Broom; diff --git a/src/component/Icons/BuildingShop.tsx b/src/component/Icons/BuildingShop.tsx new file mode 100755 index 0000000..3a73845 --- /dev/null +++ b/src/component/Icons/BuildingShop.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function BuildingShop(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/BuildingShopFilled.tsx b/src/component/Icons/BuildingShopFilled.tsx new file mode 100755 index 0000000..c0533de --- /dev/null +++ b/src/component/Icons/BuildingShopFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function BuildingShopFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CalendarClock.tsx b/src/component/Icons/CalendarClock.tsx new file mode 100755 index 0000000..58c79f0 --- /dev/null +++ b/src/component/Icons/CalendarClock.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CalendarClock(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CameraFilled.tsx b/src/component/Icons/CameraFilled.tsx new file mode 100755 index 0000000..231c5a7 --- /dev/null +++ b/src/component/Icons/CameraFilled.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const CameraFilled = createSvgIcon( + , + "CameraFilled", +); + +export default CameraFilled; diff --git a/src/component/Icons/CameraRounded.tsx b/src/component/Icons/CameraRounded.tsx new file mode 100755 index 0000000..b8b03a7 --- /dev/null +++ b/src/component/Icons/CameraRounded.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const CameraRounded = createSvgIcon( + , + "CameraRounded", +); + +export default CameraRounded; diff --git a/src/component/Icons/CaretDown.tsx b/src/component/Icons/CaretDown.tsx new file mode 100755 index 0000000..5cc0601 --- /dev/null +++ b/src/component/Icons/CaretDown.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CaretDown(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CaretRight.tsx b/src/component/Icons/CaretRight.tsx new file mode 100755 index 0000000..7620a7e --- /dev/null +++ b/src/component/Icons/CaretRight.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CaretRight(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Cart.tsx b/src/component/Icons/Cart.tsx new file mode 100755 index 0000000..ca53002 --- /dev/null +++ b/src/component/Icons/Cart.tsx @@ -0,0 +1,12 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Cart(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CheckCircleFilled.tsx b/src/component/Icons/CheckCircleFilled.tsx new file mode 100755 index 0000000..920e67a --- /dev/null +++ b/src/component/Icons/CheckCircleFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CheckCircleFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CheckUnchecked.tsx b/src/component/Icons/CheckUnchecked.tsx new file mode 100755 index 0000000..4cd438c --- /dev/null +++ b/src/component/Icons/CheckUnchecked.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CheckUnchecked(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CheckboxChecked.tsx b/src/component/Icons/CheckboxChecked.tsx new file mode 100755 index 0000000..362e0c0 --- /dev/null +++ b/src/component/Icons/CheckboxChecked.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CheckboxChecked(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Checkmark.tsx b/src/component/Icons/Checkmark.tsx new file mode 100755 index 0000000..72a2484 --- /dev/null +++ b/src/component/Icons/Checkmark.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Checkmark(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CheckmarkCircle.tsx b/src/component/Icons/CheckmarkCircle.tsx new file mode 100755 index 0000000..f5c426c --- /dev/null +++ b/src/component/Icons/CheckmarkCircle.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CheckmarkCircle(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CheckmarkCircleFilled.tsx b/src/component/Icons/CheckmarkCircleFilled.tsx new file mode 100755 index 0000000..0a7c8f8 --- /dev/null +++ b/src/component/Icons/CheckmarkCircleFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CheckmarkCircleFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ChevronRight.tsx b/src/component/Icons/ChevronRight.tsx new file mode 100755 index 0000000..702b6d8 --- /dev/null +++ b/src/component/Icons/ChevronRight.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ChevronRight(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CircleHintFilled.tsx b/src/component/Icons/CircleHintFilled.tsx new file mode 100755 index 0000000..8ef6afd --- /dev/null +++ b/src/component/Icons/CircleHintFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CircleHintFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Clipboard.tsx b/src/component/Icons/Clipboard.tsx new file mode 100755 index 0000000..51965e9 --- /dev/null +++ b/src/component/Icons/Clipboard.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const Clipboard = createSvgIcon( + , + "Clipboard", +); + +export default Clipboard; diff --git a/src/component/Icons/ClockArrowDownload.tsx b/src/component/Icons/ClockArrowDownload.tsx new file mode 100755 index 0000000..c08763c --- /dev/null +++ b/src/component/Icons/ClockArrowDownload.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const ClockArrowDownload = createSvgIcon( + , + "ClockArrowDownload", +); + +export default ClockArrowDownload; diff --git a/src/component/Icons/ClockFilled.tsx b/src/component/Icons/ClockFilled.tsx new file mode 100755 index 0000000..4c35200 --- /dev/null +++ b/src/component/Icons/ClockFilled.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const ClockFilled = createSvgIcon( + , + "ClockFilled", +); + +export default ClockFilled; diff --git a/src/component/Icons/CloudArrowIUp.tsx b/src/component/Icons/CloudArrowIUp.tsx new file mode 100755 index 0000000..95866d8 --- /dev/null +++ b/src/component/Icons/CloudArrowIUp.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CloudArrowIUp(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CloudDownload.tsx b/src/component/Icons/CloudDownload.tsx new file mode 100755 index 0000000..dd5f254 --- /dev/null +++ b/src/component/Icons/CloudDownload.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CloudDownload(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CloudDownloadOutlined.tsx b/src/component/Icons/CloudDownloadOutlined.tsx new file mode 100755 index 0000000..fe9907d --- /dev/null +++ b/src/component/Icons/CloudDownloadOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CloudDownloadOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CloudFilled.tsx b/src/component/Icons/CloudFilled.tsx new file mode 100755 index 0000000..57ceebe --- /dev/null +++ b/src/component/Icons/CloudFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CloudFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CoinStack.tsx b/src/component/Icons/CoinStack.tsx new file mode 100755 index 0000000..f763e7f --- /dev/null +++ b/src/component/Icons/CoinStack.tsx @@ -0,0 +1,12 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CoinStack(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Color.tsx b/src/component/Icons/Color.tsx new file mode 100755 index 0000000..ac708cd --- /dev/null +++ b/src/component/Icons/Color.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Color(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CommentMultiple.tsx b/src/component/Icons/CommentMultiple.tsx new file mode 100755 index 0000000..90afcb7 --- /dev/null +++ b/src/component/Icons/CommentMultiple.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CommentMultiple(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CopperCoin.tsx b/src/component/Icons/CopperCoin.tsx new file mode 100755 index 0000000..35f81d6 --- /dev/null +++ b/src/component/Icons/CopperCoin.tsx @@ -0,0 +1,12 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CopperCoin(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CopyOutlined.tsx b/src/component/Icons/CopyOutlined.tsx new file mode 100755 index 0000000..d92d013 --- /dev/null +++ b/src/component/Icons/CopyOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CopyOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Copyright.tsx b/src/component/Icons/Copyright.tsx new file mode 100755 index 0000000..c50fea5 --- /dev/null +++ b/src/component/Icons/Copyright.tsx @@ -0,0 +1,11 @@ +import { createSvgIcon } from "@mui/material"; + +const Copyright = createSvgIcon( + + + + , + "Copyright", +); + +export default Copyright; diff --git a/src/component/Icons/CubeSync.tsx b/src/component/Icons/CubeSync.tsx new file mode 100755 index 0000000..92d8506 --- /dev/null +++ b/src/component/Icons/CubeSync.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CubeSync(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CubeSyncFilled.tsx b/src/component/Icons/CubeSyncFilled.tsx new file mode 100755 index 0000000..cdb3fb6 --- /dev/null +++ b/src/component/Icons/CubeSyncFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CubeSyncFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CubeTree.tsx b/src/component/Icons/CubeTree.tsx new file mode 100755 index 0000000..6adbfd4 --- /dev/null +++ b/src/component/Icons/CubeTree.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CubeTree(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/CubeTreeFilled.tsx b/src/component/Icons/CubeTreeFilled.tsx new file mode 100755 index 0000000..1938882 --- /dev/null +++ b/src/component/Icons/CubeTreeFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function CubeTreeFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Currency.tsx b/src/component/Icons/Currency.tsx new file mode 100755 index 0000000..f8f95d9 --- /dev/null +++ b/src/component/Icons/Currency.tsx @@ -0,0 +1,12 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Currency(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/DarkTheme.tsx b/src/component/Icons/DarkTheme.tsx new file mode 100755 index 0000000..e23e3a1 --- /dev/null +++ b/src/component/Icons/DarkTheme.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function DarkTheme(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/DataBarVerticalStar.tsx b/src/component/Icons/DataBarVerticalStar.tsx new file mode 100755 index 0000000..e019c9d --- /dev/null +++ b/src/component/Icons/DataBarVerticalStar.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function DataBarVerticalStar(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/DataHistogram.tsx b/src/component/Icons/DataHistogram.tsx new file mode 100755 index 0000000..5e29e75 --- /dev/null +++ b/src/component/Icons/DataHistogram.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function DataHistogram(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/DataHistogramFilled.tsx b/src/component/Icons/DataHistogramFilled.tsx new file mode 100755 index 0000000..8d7c57e --- /dev/null +++ b/src/component/Icons/DataHistogramFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function DataHistogramFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Delete.tsx b/src/component/Icons/Delete.tsx new file mode 100755 index 0000000..a4e3e29 --- /dev/null +++ b/src/component/Icons/Delete.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Delete(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/DeleteOutlined.tsx b/src/component/Icons/DeleteOutlined.tsx new file mode 100755 index 0000000..01a7cfb --- /dev/null +++ b/src/component/Icons/DeleteOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function DeleteOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/DesktopFlow.tsx b/src/component/Icons/DesktopFlow.tsx new file mode 100755 index 0000000..93895ed --- /dev/null +++ b/src/component/Icons/DesktopFlow.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function DesktopFlow(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Discord.tsx b/src/component/Icons/Discord.tsx new file mode 100755 index 0000000..d7877da --- /dev/null +++ b/src/component/Icons/Discord.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Discord(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Dismiss.tsx b/src/component/Icons/Dismiss.tsx new file mode 100755 index 0000000..2b15f6c --- /dev/null +++ b/src/component/Icons/Dismiss.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Dismiss(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/DismissCircleFilled.tsx b/src/component/Icons/DismissCircleFilled.tsx new file mode 100755 index 0000000..b27b730 --- /dev/null +++ b/src/component/Icons/DismissCircleFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function DismissCircleFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Divider.tsx b/src/component/Icons/Divider.tsx new file mode 100755 index 0000000..ead2330 --- /dev/null +++ b/src/component/Icons/Divider.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Divider(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Document.tsx b/src/component/Icons/Document.tsx new file mode 100755 index 0000000..e8d10f9 --- /dev/null +++ b/src/component/Icons/Document.tsx @@ -0,0 +1,10 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Document(props: SvgIconProps) { + return ( + + + + + ); +} diff --git a/src/component/Icons/DocumentArrowDownFilled.tsx b/src/component/Icons/DocumentArrowDownFilled.tsx new file mode 100755 index 0000000..d8978d9 --- /dev/null +++ b/src/component/Icons/DocumentArrowDownFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function DocumentArrowDownFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/DocumentCopyFilled.tsx b/src/component/Icons/DocumentCopyFilled.tsx new file mode 100755 index 0000000..2a96b8d --- /dev/null +++ b/src/component/Icons/DocumentCopyFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function DocumentCopyFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/DocumentDataLink.tsx b/src/component/Icons/DocumentDataLink.tsx new file mode 100755 index 0000000..f1cf4ee --- /dev/null +++ b/src/component/Icons/DocumentDataLink.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function DocumentDataLink(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/DocumentFlowchart.tsx b/src/component/Icons/DocumentFlowchart.tsx new file mode 100755 index 0000000..e636750 --- /dev/null +++ b/src/component/Icons/DocumentFlowchart.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const DocumentFlowchart = createSvgIcon( + , + "DocumentFlowchart", +); + +export default DocumentFlowchart; diff --git a/src/component/Icons/DocumentPDF.tsx b/src/component/Icons/DocumentPDF.tsx new file mode 100755 index 0000000..6e01d84 --- /dev/null +++ b/src/component/Icons/DocumentPDF.tsx @@ -0,0 +1,11 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function DocumentPDF(props: SvgIconProps) { + return ( + + + + + + ); +} diff --git a/src/component/Icons/DocumentText.tsx b/src/component/Icons/DocumentText.tsx new file mode 100755 index 0000000..0a445ce --- /dev/null +++ b/src/component/Icons/DocumentText.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function DocumentText(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/DocumentTextOutlined.tsx b/src/component/Icons/DocumentTextOutlined.tsx new file mode 100755 index 0000000..f12825b --- /dev/null +++ b/src/component/Icons/DocumentTextOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function DocumentTextOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Download.tsx b/src/component/Icons/Download.tsx new file mode 100755 index 0000000..22582b0 --- /dev/null +++ b/src/component/Icons/Download.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const Download = createSvgIcon( + , + "Download", +); + +export default Download; diff --git a/src/component/Icons/Earth.tsx b/src/component/Icons/Earth.tsx new file mode 100755 index 0000000..34f7b34 --- /dev/null +++ b/src/component/Icons/Earth.tsx @@ -0,0 +1,7 @@ +import { createSvgIcon } from "@mui/material"; + +const Earth = createSvgIcon( + , + "Earth", +); +export default Earth; diff --git a/src/component/Icons/Edit.tsx b/src/component/Icons/Edit.tsx new file mode 100755 index 0000000..fad3f8e --- /dev/null +++ b/src/component/Icons/Edit.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Edit(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/EditSetting.tsx b/src/component/Icons/EditSetting.tsx new file mode 100755 index 0000000..d15c63b --- /dev/null +++ b/src/component/Icons/EditSetting.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function EditSetting(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/EmailClock.tsx b/src/component/Icons/EmailClock.tsx new file mode 100755 index 0000000..0f2d80e --- /dev/null +++ b/src/component/Icons/EmailClock.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function EmailClock(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/EmojiEdit.tsx b/src/component/Icons/EmojiEdit.tsx new file mode 100755 index 0000000..6c25021 --- /dev/null +++ b/src/component/Icons/EmojiEdit.tsx @@ -0,0 +1,7 @@ +import { createSvgIcon } from "@mui/material"; + +const EmojiEdit = createSvgIcon( + , + "EmojiEdit", +); +export default EmojiEdit; diff --git a/src/component/Icons/Enter.tsx b/src/component/Icons/Enter.tsx new file mode 100755 index 0000000..f3179a3 --- /dev/null +++ b/src/component/Icons/Enter.tsx @@ -0,0 +1,12 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Enter(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Eye.tsx b/src/component/Icons/Eye.tsx new file mode 100755 index 0000000..173759d --- /dev/null +++ b/src/component/Icons/Eye.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const Eye = createSvgIcon( + , + "Eye", +); + +export default Eye; diff --git a/src/component/Icons/EyeOff.tsx b/src/component/Icons/EyeOff.tsx new file mode 100755 index 0000000..3269008 --- /dev/null +++ b/src/component/Icons/EyeOff.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function EyeOff(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/FastForward.tsx b/src/component/Icons/FastForward.tsx new file mode 100755 index 0000000..3d25b6f --- /dev/null +++ b/src/component/Icons/FastForward.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function FastForward(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/FileAdd.tsx b/src/component/Icons/FileAdd.tsx new file mode 100755 index 0000000..e221ffd --- /dev/null +++ b/src/component/Icons/FileAdd.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function FileAdd(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/FileExclBox.tsx b/src/component/Icons/FileExclBox.tsx new file mode 100755 index 0000000..4f48ef8 --- /dev/null +++ b/src/component/Icons/FileExclBox.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function FileExclBox(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/FilePowerPointBox.tsx b/src/component/Icons/FilePowerPointBox.tsx new file mode 100755 index 0000000..2e4657d --- /dev/null +++ b/src/component/Icons/FilePowerPointBox.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function FilePowerPointBox(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/FileWordBox.tsx b/src/component/Icons/FileWordBox.tsx new file mode 100755 index 0000000..77ee733 --- /dev/null +++ b/src/component/Icons/FileWordBox.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function FileWordBox(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/FilmstripImage.tsx b/src/component/Icons/FilmstripImage.tsx new file mode 100755 index 0000000..f9721d8 --- /dev/null +++ b/src/component/Icons/FilmstripImage.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function FilmstripImage(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Filter.tsx b/src/component/Icons/Filter.tsx new file mode 100755 index 0000000..8c4a498 --- /dev/null +++ b/src/component/Icons/Filter.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Filter(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Fingerprint.tsx b/src/component/Icons/Fingerprint.tsx new file mode 100755 index 0000000..20623d9 --- /dev/null +++ b/src/component/Icons/Fingerprint.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Fingerprint(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Folder.tsx b/src/component/Icons/Folder.tsx new file mode 100755 index 0000000..e436884 --- /dev/null +++ b/src/component/Icons/Folder.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Folder(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/FolderAdd.tsx b/src/component/Icons/FolderAdd.tsx new file mode 100755 index 0000000..29f7e1c --- /dev/null +++ b/src/component/Icons/FolderAdd.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function FolderAdd(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/FolderArrowRightOutlined.tsx b/src/component/Icons/FolderArrowRightOutlined.tsx new file mode 100755 index 0000000..b8080b1 --- /dev/null +++ b/src/component/Icons/FolderArrowRightOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function FolderArrowRightOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/FolderArrowUp.tsx b/src/component/Icons/FolderArrowUp.tsx new file mode 100755 index 0000000..f41f3d3 --- /dev/null +++ b/src/component/Icons/FolderArrowUp.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function FolderArrowUp(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/FolderLink.tsx b/src/component/Icons/FolderLink.tsx new file mode 100755 index 0000000..dae8397 --- /dev/null +++ b/src/component/Icons/FolderLink.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const FolderLink = createSvgIcon( + , + "FolderLink", +); + +export default FolderLink; diff --git a/src/component/Icons/FolderOutlined.tsx b/src/component/Icons/FolderOutlined.tsx new file mode 100755 index 0000000..4f26023 --- /dev/null +++ b/src/component/Icons/FolderOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function FolderOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/FolderZip.tsx b/src/component/Icons/FolderZip.tsx new file mode 100755 index 0000000..b5dc24f --- /dev/null +++ b/src/component/Icons/FolderZip.tsx @@ -0,0 +1,10 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function FolderZip(props: SvgIconProps) { + return ( + + + + + ); +} diff --git a/src/component/Icons/FullScreenMaximize.tsx b/src/component/Icons/FullScreenMaximize.tsx new file mode 100755 index 0000000..781f9b5 --- /dev/null +++ b/src/component/Icons/FullScreenMaximize.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const FullScreenMaximize = createSvgIcon( + , + "FullScreenMaximize", +); + +export default FullScreenMaximize; diff --git a/src/component/Icons/FullScreenMinimize.tsx b/src/component/Icons/FullScreenMinimize.tsx new file mode 100755 index 0000000..ef094eb --- /dev/null +++ b/src/component/Icons/FullScreenMinimize.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const FullScreenMinimize = createSvgIcon( + , + "FullScreenMinimize", +); + +export default FullScreenMinimize; diff --git a/src/component/Icons/Gift.tsx b/src/component/Icons/Gift.tsx new file mode 100755 index 0000000..12a0ef6 --- /dev/null +++ b/src/component/Icons/Gift.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Gift(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Globe.tsx b/src/component/Icons/Globe.tsx new file mode 100755 index 0000000..fbbe732 --- /dev/null +++ b/src/component/Icons/Globe.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Globe(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/GlobeFilled.tsx b/src/component/Icons/GlobeFilled.tsx new file mode 100755 index 0000000..998c558 --- /dev/null +++ b/src/component/Icons/GlobeFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function GlobeFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Grid.tsx b/src/component/Icons/Grid.tsx new file mode 100755 index 0000000..3601771 --- /dev/null +++ b/src/component/Icons/Grid.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Grid(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/GridOutlined.tsx b/src/component/Icons/GridOutlined.tsx new file mode 100755 index 0000000..f8378b6 --- /dev/null +++ b/src/component/Icons/GridOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function GridOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/HardDrive.tsx b/src/component/Icons/HardDrive.tsx new file mode 100755 index 0000000..a923de5 --- /dev/null +++ b/src/component/Icons/HardDrive.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function HardDrive(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/HardDriveOutlined.tsx b/src/component/Icons/HardDriveOutlined.tsx new file mode 100755 index 0000000..6ad6daf --- /dev/null +++ b/src/component/Icons/HardDriveOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function HardDriveOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/HistoryOutlined.tsx b/src/component/Icons/HistoryOutlined.tsx new file mode 100755 index 0000000..6acf1cc --- /dev/null +++ b/src/component/Icons/HistoryOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function HistoryOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Home.tsx b/src/component/Icons/Home.tsx new file mode 100755 index 0000000..627b29d --- /dev/null +++ b/src/component/Icons/Home.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Home(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/HomeOutlined.tsx b/src/component/Icons/HomeOutlined.tsx new file mode 100755 index 0000000..3a65e4e --- /dev/null +++ b/src/component/Icons/HomeOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function HomeOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Icons.tsx b/src/component/Icons/Icons.tsx new file mode 100755 index 0000000..288a98c --- /dev/null +++ b/src/component/Icons/Icons.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Icons(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Image.tsx b/src/component/Icons/Image.tsx new file mode 100755 index 0000000..aa01ef6 --- /dev/null +++ b/src/component/Icons/Image.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Image(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ImageAarowCounterclockwise.tsx b/src/component/Icons/ImageAarowCounterclockwise.tsx new file mode 100755 index 0000000..850f620 --- /dev/null +++ b/src/component/Icons/ImageAarowCounterclockwise.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ImageArrowCounterclockwise(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ImageCopy.tsx b/src/component/Icons/ImageCopy.tsx new file mode 100755 index 0000000..942284e --- /dev/null +++ b/src/component/Icons/ImageCopy.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ImageCopy(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ImageCopyOutlined.tsx b/src/component/Icons/ImageCopyOutlined.tsx new file mode 100755 index 0000000..1be6d97 --- /dev/null +++ b/src/component/Icons/ImageCopyOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ImageCopyOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ImageEdit.tsx b/src/component/Icons/ImageEdit.tsx new file mode 100755 index 0000000..f45b614 --- /dev/null +++ b/src/component/Icons/ImageEdit.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const ImageEdit = createSvgIcon( + , + "ImageEdit", +); + +export default ImageEdit; diff --git a/src/component/Icons/ImageOffOutlined.tsx b/src/component/Icons/ImageOffOutlined.tsx new file mode 100755 index 0000000..e966708 --- /dev/null +++ b/src/component/Icons/ImageOffOutlined.tsx @@ -0,0 +1,10 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ImageOffOutlined(props: SvgIconProps) { + return ( + + + + + ); +} diff --git a/src/component/Icons/ImageOutlined.tsx b/src/component/Icons/ImageOutlined.tsx new file mode 100755 index 0000000..411cfa0 --- /dev/null +++ b/src/component/Icons/ImageOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ImageOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/InPrivate.tsx b/src/component/Icons/InPrivate.tsx new file mode 100755 index 0000000..3590243 --- /dev/null +++ b/src/component/Icons/InPrivate.tsx @@ -0,0 +1,7 @@ +import { createSvgIcon } from "@mui/material"; + +const InPrivate = createSvgIcon( + , + "InPrivate", +); +export default InPrivate; diff --git a/src/component/Icons/Info.tsx b/src/component/Icons/Info.tsx new file mode 100755 index 0000000..de98349 --- /dev/null +++ b/src/component/Icons/Info.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const Info = createSvgIcon( + , + "Info", +); + +export default Info; diff --git a/src/component/Icons/InfoFilled.tsx b/src/component/Icons/InfoFilled.tsx new file mode 100755 index 0000000..d476d23 --- /dev/null +++ b/src/component/Icons/InfoFilled.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const InfoFilled = createSvgIcon( + , + "InfoFilled", +); + +export default InfoFilled; diff --git a/src/component/Icons/IosArrow.tsx b/src/component/Icons/IosArrow.tsx new file mode 100755 index 0000000..a885065 --- /dev/null +++ b/src/component/Icons/IosArrow.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function IosArrow(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/IosArrowLeft.tsx b/src/component/Icons/IosArrowLeft.tsx new file mode 100755 index 0000000..fd95f2a --- /dev/null +++ b/src/component/Icons/IosArrowLeft.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function IosArrowLeft(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/LanguageC.tsx b/src/component/Icons/LanguageC.tsx new file mode 100755 index 0000000..b1929ac --- /dev/null +++ b/src/component/Icons/LanguageC.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function LanguageC(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/LanguageCPP.tsx b/src/component/Icons/LanguageCPP.tsx new file mode 100755 index 0000000..b0b3593 --- /dev/null +++ b/src/component/Icons/LanguageCPP.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function LanguageCPP(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/LanguageGo.tsx b/src/component/Icons/LanguageGo.tsx new file mode 100755 index 0000000..b107872 --- /dev/null +++ b/src/component/Icons/LanguageGo.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function LanguageGo(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/LanguageJS.tsx b/src/component/Icons/LanguageJS.tsx new file mode 100755 index 0000000..3b18ae1 --- /dev/null +++ b/src/component/Icons/LanguageJS.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function LanguageJS(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/LanguagePHP.tsx b/src/component/Icons/LanguagePHP.tsx new file mode 100755 index 0000000..5cc1e9e --- /dev/null +++ b/src/component/Icons/LanguagePHP.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function LanguagePHP(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/LanguagePython.tsx b/src/component/Icons/LanguagePython.tsx new file mode 100755 index 0000000..702d24e --- /dev/null +++ b/src/component/Icons/LanguagePython.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function LanguagePython(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/LanguageRust.tsx b/src/component/Icons/LanguageRust.tsx new file mode 100755 index 0000000..98a4d59 --- /dev/null +++ b/src/component/Icons/LanguageRust.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function LanguageRust(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Link.tsx b/src/component/Icons/Link.tsx new file mode 100755 index 0000000..844adcb --- /dev/null +++ b/src/component/Icons/Link.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Link(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/LinkDismiss.tsx b/src/component/Icons/LinkDismiss.tsx new file mode 100755 index 0000000..8cf8fac --- /dev/null +++ b/src/component/Icons/LinkDismiss.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const LinkDismiss = createSvgIcon( + , + "LinkDismiss", +); + +export default LinkDismiss; diff --git a/src/component/Icons/LinkEdit.tsx b/src/component/Icons/LinkEdit.tsx new file mode 100755 index 0000000..a46d77b --- /dev/null +++ b/src/component/Icons/LinkEdit.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function LinkEdit(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/LinkOutlined.tsx b/src/component/Icons/LinkOutlined.tsx new file mode 100755 index 0000000..6db714b --- /dev/null +++ b/src/component/Icons/LinkOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function LinkOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/LinkSetting.tsx b/src/component/Icons/LinkSetting.tsx new file mode 100755 index 0000000..16034c2 --- /dev/null +++ b/src/component/Icons/LinkSetting.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const LinkSetting = createSvgIcon( + , + "LinkSetting", +); + +export default LinkSetting; diff --git a/src/component/Icons/LocationFilled.tsx b/src/component/Icons/LocationFilled.tsx new file mode 100755 index 0000000..c19bb54 --- /dev/null +++ b/src/component/Icons/LocationFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function LocationFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/LockClosed.tsx b/src/component/Icons/LockClosed.tsx new file mode 100755 index 0000000..ab70211 --- /dev/null +++ b/src/component/Icons/LockClosed.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function LockClosed(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/LockClosedKey.tsx b/src/component/Icons/LockClosedKey.tsx new file mode 100755 index 0000000..61f4e2d --- /dev/null +++ b/src/component/Icons/LockClosedKey.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const LockClosedKey = createSvgIcon( + , + "LockClosedKey", +); + +export default LockClosedKey; diff --git a/src/component/Icons/LockClosedOutlined.tsx b/src/component/Icons/LockClosedOutlined.tsx new file mode 100755 index 0000000..c6661c7 --- /dev/null +++ b/src/component/Icons/LockClosedOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function LockClosedOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/MagnetOn.tsx b/src/component/Icons/MagnetOn.tsx new file mode 100755 index 0000000..98ebaa1 --- /dev/null +++ b/src/component/Icons/MagnetOn.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function MagnetOn(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/MailOutlined.tsx b/src/component/Icons/MailOutlined.tsx new file mode 100755 index 0000000..aa30afa --- /dev/null +++ b/src/component/Icons/MailOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function MailOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Markdown.tsx b/src/component/Icons/Markdown.tsx new file mode 100755 index 0000000..792bfc5 --- /dev/null +++ b/src/component/Icons/Markdown.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Markdown(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Money.tsx b/src/component/Icons/Money.tsx new file mode 100755 index 0000000..80d68f5 --- /dev/null +++ b/src/component/Icons/Money.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Money(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Moon.tsx b/src/component/Icons/Moon.tsx new file mode 100755 index 0000000..530624b --- /dev/null +++ b/src/component/Icons/Moon.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Moon(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/MoreHorizontal.tsx b/src/component/Icons/MoreHorizontal.tsx new file mode 100755 index 0000000..dffab7c --- /dev/null +++ b/src/component/Icons/MoreHorizontal.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function MoreHorizontal(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/MoreVertical.tsx b/src/component/Icons/MoreVertical.tsx new file mode 100755 index 0000000..d2a82e6 --- /dev/null +++ b/src/component/Icons/MoreVertical.tsx @@ -0,0 +1,7 @@ +import { createSvgIcon } from "@mui/material"; + +const MoreVertical = createSvgIcon( + , + "MoreVertical", +); +export default MoreVertical; diff --git a/src/component/Icons/MusicNote1.tsx b/src/component/Icons/MusicNote1.tsx new file mode 100755 index 0000000..244e768 --- /dev/null +++ b/src/component/Icons/MusicNote1.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function MusicNote1(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/MusicNote1Outlined.tsx b/src/component/Icons/MusicNote1Outlined.tsx new file mode 100755 index 0000000..1679759 --- /dev/null +++ b/src/component/Icons/MusicNote1Outlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function MusicNote1Outlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/MusicNote2.tsx b/src/component/Icons/MusicNote2.tsx new file mode 100755 index 0000000..09a2a3a --- /dev/null +++ b/src/component/Icons/MusicNote2.tsx @@ -0,0 +1,10 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function MusicNote2(props: SvgIconProps) { + return ( + + + , + + ); +} diff --git a/src/component/Icons/MusicNote2Play.tsx b/src/component/Icons/MusicNote2Play.tsx new file mode 100755 index 0000000..3078046 --- /dev/null +++ b/src/component/Icons/MusicNote2Play.tsx @@ -0,0 +1,10 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function MusicNote2Play(props: SvgIconProps) { + return ( + + + , + + ); +} diff --git a/src/component/Icons/Notepad.tsx b/src/component/Icons/Notepad.tsx new file mode 100755 index 0000000..5427c74 --- /dev/null +++ b/src/component/Icons/Notepad.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Notepad(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Numbers.tsx b/src/component/Icons/Numbers.tsx new file mode 100755 index 0000000..07a7d4d --- /dev/null +++ b/src/component/Icons/Numbers.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Numbers(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Open.tsx b/src/component/Icons/Open.tsx new file mode 100755 index 0000000..677ff27 --- /dev/null +++ b/src/component/Icons/Open.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const Open = createSvgIcon( + , + "Open", +); + +export default Open; diff --git a/src/component/Icons/OpenFilled.tsx b/src/component/Icons/OpenFilled.tsx new file mode 100755 index 0000000..f457c1d --- /dev/null +++ b/src/component/Icons/OpenFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function OpenFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Options.tsx b/src/component/Icons/Options.tsx new file mode 100755 index 0000000..d4e88c2 --- /dev/null +++ b/src/component/Icons/Options.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Options(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/PackageOpen.tsx b/src/component/Icons/PackageOpen.tsx new file mode 100755 index 0000000..7abeb30 --- /dev/null +++ b/src/component/Icons/PackageOpen.tsx @@ -0,0 +1,17 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function PackageOpen(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Password.tsx b/src/component/Icons/Password.tsx new file mode 100755 index 0000000..47990e3 --- /dev/null +++ b/src/component/Icons/Password.tsx @@ -0,0 +1,10 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Password(props: SvgIconProps) { + return ( + + + + + ); +} diff --git a/src/component/Icons/Pause.tsx b/src/component/Icons/Pause.tsx new file mode 100755 index 0000000..072b82b --- /dev/null +++ b/src/component/Icons/Pause.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Pause(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Payment.tsx b/src/component/Icons/Payment.tsx new file mode 100755 index 0000000..2edf93d --- /dev/null +++ b/src/component/Icons/Payment.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Payment(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/PaymentFilled.tsx b/src/component/Icons/PaymentFilled.tsx new file mode 100755 index 0000000..cc5f349 --- /dev/null +++ b/src/component/Icons/PaymentFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function PaymentFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/People.tsx b/src/component/Icons/People.tsx new file mode 100755 index 0000000..fe79502 --- /dev/null +++ b/src/component/Icons/People.tsx @@ -0,0 +1,7 @@ +import { createSvgIcon } from "@mui/material"; + +const People = createSvgIcon( + , + "People", +); +export default People; diff --git a/src/component/Icons/PeopleFilled.tsx b/src/component/Icons/PeopleFilled.tsx new file mode 100755 index 0000000..1a59367 --- /dev/null +++ b/src/component/Icons/PeopleFilled.tsx @@ -0,0 +1,7 @@ +import { createSvgIcon } from "@mui/material"; + +const PeopleFilled = createSvgIcon( + , + "PeopleFilled", +); +export default PeopleFilled; diff --git a/src/component/Icons/PeopleStar.tsx b/src/component/Icons/PeopleStar.tsx new file mode 100755 index 0000000..5f3a21a --- /dev/null +++ b/src/component/Icons/PeopleStar.tsx @@ -0,0 +1,7 @@ +import { createSvgIcon } from "@mui/material"; + +const PeopleStar = createSvgIcon( + , + "PeopleStar", +); +export default PeopleStar; diff --git a/src/component/Icons/PeopleTeam.tsx b/src/component/Icons/PeopleTeam.tsx new file mode 100755 index 0000000..5abb484 --- /dev/null +++ b/src/component/Icons/PeopleTeam.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function PeopleTeam(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/PeopleTeamOutlined.tsx b/src/component/Icons/PeopleTeamOutlined.tsx new file mode 100755 index 0000000..1a222a5 --- /dev/null +++ b/src/component/Icons/PeopleTeamOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function PeopleTeamOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Person.tsx b/src/component/Icons/Person.tsx new file mode 100755 index 0000000..4d28044 --- /dev/null +++ b/src/component/Icons/Person.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Person(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/PersonLock.tsx b/src/component/Icons/PersonLock.tsx new file mode 100755 index 0000000..2a0c498 --- /dev/null +++ b/src/component/Icons/PersonLock.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const PersonLock = createSvgIcon( + , + "PersonLock", +); + +export default PersonLock; diff --git a/src/component/Icons/PersonOutlined.tsx b/src/component/Icons/PersonOutlined.tsx new file mode 100755 index 0000000..fa4ddce --- /dev/null +++ b/src/component/Icons/PersonOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function PersonOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/PersonPasskey.tsx b/src/component/Icons/PersonPasskey.tsx new file mode 100755 index 0000000..b8f66f8 --- /dev/null +++ b/src/component/Icons/PersonPasskey.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function PersonPasskey(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/PersonStar.tsx b/src/component/Icons/PersonStar.tsx new file mode 100755 index 0000000..35d8018 --- /dev/null +++ b/src/component/Icons/PersonStar.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function PersonStar(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/PhoneLaptop.tsx b/src/component/Icons/PhoneLaptop.tsx new file mode 100755 index 0000000..fd06dfe --- /dev/null +++ b/src/component/Icons/PhoneLaptop.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function PhoneLaptop(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/PhoneLaptopOutlined.tsx b/src/component/Icons/PhoneLaptopOutlined.tsx new file mode 100755 index 0000000..3b4eb19 --- /dev/null +++ b/src/component/Icons/PhoneLaptopOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function PhoneLaptopOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/PinOutlined.tsx b/src/component/Icons/PinOutlined.tsx new file mode 100755 index 0000000..f04c9ba --- /dev/null +++ b/src/component/Icons/PinOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function PinOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Play.tsx b/src/component/Icons/Play.tsx new file mode 100755 index 0000000..8bd85c6 --- /dev/null +++ b/src/component/Icons/Play.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Play(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Pulse.tsx b/src/component/Icons/Pulse.tsx new file mode 100755 index 0000000..3f53608 --- /dev/null +++ b/src/component/Icons/Pulse.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const Pulse = createSvgIcon( + , + "Pulse", +); + +export default Pulse; diff --git a/src/component/Icons/QQ.tsx b/src/component/Icons/QQ.tsx new file mode 100755 index 0000000..a922ec9 --- /dev/null +++ b/src/component/Icons/QQ.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function QQ(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/QuestionCircle.tsx b/src/component/Icons/QuestionCircle.tsx new file mode 100755 index 0000000..89fce2e --- /dev/null +++ b/src/component/Icons/QuestionCircle.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function QuestionCircle(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Raw.tsx b/src/component/Icons/Raw.tsx new file mode 100755 index 0000000..5985db9 --- /dev/null +++ b/src/component/Icons/Raw.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Raw(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/RectangleLandscapeSync.tsx b/src/component/Icons/RectangleLandscapeSync.tsx new file mode 100755 index 0000000..c21b4b6 --- /dev/null +++ b/src/component/Icons/RectangleLandscapeSync.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function RectangleLandscapeSync(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/RectangleLandscapeSyncOff.tsx b/src/component/Icons/RectangleLandscapeSyncOff.tsx new file mode 100755 index 0000000..c2e0d69 --- /dev/null +++ b/src/component/Icons/RectangleLandscapeSyncOff.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function RectangleLandscapeSync(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/RenameFilled.tsx b/src/component/Icons/RenameFilled.tsx new file mode 100755 index 0000000..b0bfc87 --- /dev/null +++ b/src/component/Icons/RenameFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function RenameFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/RenameOutlined.tsx b/src/component/Icons/RenameOutlined.tsx new file mode 100755 index 0000000..9c92b7d --- /dev/null +++ b/src/component/Icons/RenameOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function RenameOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Save.tsx b/src/component/Icons/Save.tsx new file mode 100755 index 0000000..8ab199e --- /dev/null +++ b/src/component/Icons/Save.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Save(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Savings.tsx b/src/component/Icons/Savings.tsx new file mode 100755 index 0000000..0eaf4a7 --- /dev/null +++ b/src/component/Icons/Savings.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Savings(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Search.tsx b/src/component/Icons/Search.tsx new file mode 100755 index 0000000..7afc499 --- /dev/null +++ b/src/component/Icons/Search.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Search(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/SendLogging.tsx b/src/component/Icons/SendLogging.tsx new file mode 100755 index 0000000..e704ce7 --- /dev/null +++ b/src/component/Icons/SendLogging.tsx @@ -0,0 +1,12 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function SendLogging(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/SendLoggingFilled.tsx b/src/component/Icons/SendLoggingFilled.tsx new file mode 100755 index 0000000..7603d78 --- /dev/null +++ b/src/component/Icons/SendLoggingFilled.tsx @@ -0,0 +1,12 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function SendLoggingFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Server.tsx b/src/component/Icons/Server.tsx new file mode 100755 index 0000000..ea30e4f --- /dev/null +++ b/src/component/Icons/Server.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Server(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ServerFilled.tsx b/src/component/Icons/ServerFilled.tsx new file mode 100755 index 0000000..9a6abbc --- /dev/null +++ b/src/component/Icons/ServerFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ServerFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Setting.tsx b/src/component/Icons/Setting.tsx new file mode 100755 index 0000000..3251960 --- /dev/null +++ b/src/component/Icons/Setting.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Setting(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/SettingsOutlined.tsx b/src/component/Icons/SettingsOutlined.tsx new file mode 100755 index 0000000..b0def8c --- /dev/null +++ b/src/component/Icons/SettingsOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function SettingsOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Share.tsx b/src/component/Icons/Share.tsx new file mode 100755 index 0000000..aad4271 --- /dev/null +++ b/src/component/Icons/Share.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const Share = createSvgIcon( + , + "Share", +); + +export default Share; diff --git a/src/component/Icons/ShareAndroid.tsx b/src/component/Icons/ShareAndroid.tsx new file mode 100755 index 0000000..350c3cf --- /dev/null +++ b/src/component/Icons/ShareAndroid.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ShareAndroid(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ShareFilled.tsx b/src/component/Icons/ShareFilled.tsx new file mode 100755 index 0000000..99f81bd --- /dev/null +++ b/src/component/Icons/ShareFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ShareFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ShareOutlined.tsx b/src/component/Icons/ShareOutlined.tsx new file mode 100755 index 0000000..e12b64f --- /dev/null +++ b/src/component/Icons/ShareOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ShareOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Shield.tsx b/src/component/Icons/Shield.tsx new file mode 100755 index 0000000..e6755a6 --- /dev/null +++ b/src/component/Icons/Shield.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Shield(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ShieldAdd.tsx b/src/component/Icons/ShieldAdd.tsx new file mode 100755 index 0000000..f8cd5cc --- /dev/null +++ b/src/component/Icons/ShieldAdd.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ShieldAdd(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/ShieldFilled.tsx b/src/component/Icons/ShieldFilled.tsx new file mode 100755 index 0000000..b08e93c --- /dev/null +++ b/src/component/Icons/ShieldFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function ShieldFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/SignOut.tsx b/src/component/Icons/SignOut.tsx new file mode 100755 index 0000000..dfc8e78 --- /dev/null +++ b/src/component/Icons/SignOut.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function SignOut(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/SlideText.tsx b/src/component/Icons/SlideText.tsx new file mode 100755 index 0000000..3d55e74 --- /dev/null +++ b/src/component/Icons/SlideText.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Add(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Sparkle.tsx b/src/component/Icons/Sparkle.tsx new file mode 100755 index 0000000..2d34334 --- /dev/null +++ b/src/component/Icons/Sparkle.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Sparkle(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/SparkleFilled.tsx b/src/component/Icons/SparkleFilled.tsx new file mode 100755 index 0000000..5ff162b --- /dev/null +++ b/src/component/Icons/SparkleFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function SparkleFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/StarFilled.tsx b/src/component/Icons/StarFilled.tsx new file mode 100755 index 0000000..b7e3abe --- /dev/null +++ b/src/component/Icons/StarFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function StarFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Storage.tsx b/src/component/Icons/Storage.tsx new file mode 100755 index 0000000..55209c2 --- /dev/null +++ b/src/component/Icons/Storage.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Storage(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/StorageOutlined.tsx b/src/component/Icons/StorageOutlined.tsx new file mode 100755 index 0000000..ea8cb32 --- /dev/null +++ b/src/component/Icons/StorageOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function StorageOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Subtitles.tsx b/src/component/Icons/Subtitles.tsx new file mode 100755 index 0000000..eebc4c8 --- /dev/null +++ b/src/component/Icons/Subtitles.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Subtitles(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/SunWithTime.tsx b/src/component/Icons/SunWithTime.tsx new file mode 100755 index 0000000..a9cc69d --- /dev/null +++ b/src/component/Icons/SunWithTime.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function SunWithTime(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Sunny.tsx b/src/component/Icons/Sunny.tsx new file mode 100755 index 0000000..574b321 --- /dev/null +++ b/src/component/Icons/Sunny.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Sunny(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/TableSettings.tsx b/src/component/Icons/TableSettings.tsx new file mode 100755 index 0000000..9c2078c --- /dev/null +++ b/src/component/Icons/TableSettings.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function TableSettingsOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Tag.tsx b/src/component/Icons/Tag.tsx new file mode 100755 index 0000000..0f47a4d --- /dev/null +++ b/src/component/Icons/Tag.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const Tag = createSvgIcon( + , + "Tag", +); + +export default Tag; diff --git a/src/component/Icons/Tags.tsx b/src/component/Icons/Tags.tsx new file mode 100755 index 0000000..2eb78a4 --- /dev/null +++ b/src/component/Icons/Tags.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const Tags = createSvgIcon( + , + "Tags", +); + +export default Tags; diff --git a/src/component/Icons/TaskList.tsx b/src/component/Icons/TaskList.tsx new file mode 100755 index 0000000..2905865 --- /dev/null +++ b/src/component/Icons/TaskList.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function TaskList(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/TaskListOutlined.tsx b/src/component/Icons/TaskListOutlined.tsx new file mode 100755 index 0000000..cc206ca --- /dev/null +++ b/src/component/Icons/TaskListOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function TaskListOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/TaskListRegular.tsx b/src/component/Icons/TaskListRegular.tsx new file mode 100755 index 0000000..4bcc6b9 --- /dev/null +++ b/src/component/Icons/TaskListRegular.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function TaskListRegular(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Telegram.tsx b/src/component/Icons/Telegram.tsx new file mode 100755 index 0000000..0f80d47 --- /dev/null +++ b/src/component/Icons/Telegram.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Telegram(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/TextBulletListSquareEdiFilled.tsx b/src/component/Icons/TextBulletListSquareEdiFilled.tsx new file mode 100755 index 0000000..c2c0963 --- /dev/null +++ b/src/component/Icons/TextBulletListSquareEdiFilled.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function TextBulletListSquareEditFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/TextBulletListSquareEdit.tsx b/src/component/Icons/TextBulletListSquareEdit.tsx new file mode 100755 index 0000000..273a646 --- /dev/null +++ b/src/component/Icons/TextBulletListSquareEdit.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function TextBulletListSquareEdit(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/TextCaseTitle.tsx b/src/component/Icons/TextCaseTitle.tsx new file mode 100755 index 0000000..1bdad8d --- /dev/null +++ b/src/component/Icons/TextCaseTitle.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function TextCaseTitle(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/TextEditStyle.tsx b/src/component/Icons/TextEditStyle.tsx new file mode 100755 index 0000000..6d1be26 --- /dev/null +++ b/src/component/Icons/TextEditStyle.tsx @@ -0,0 +1,7 @@ +import { createSvgIcon } from "@mui/material"; + +const TextEditStyle = createSvgIcon( + , + "TextEditStyle", +); +export default TextEditStyle; diff --git a/src/component/Icons/TextGrammarLighting.tsx b/src/component/Icons/TextGrammarLighting.tsx new file mode 100755 index 0000000..a044c90 --- /dev/null +++ b/src/component/Icons/TextGrammarLighting.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function TextGrammarLighting(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/TextIndentIncrease.tsx b/src/component/Icons/TextIndentIncrease.tsx new file mode 100755 index 0000000..332283b --- /dev/null +++ b/src/component/Icons/TextIndentIncrease.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function TextIndentIncrease(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/TicketDiagonal.tsx b/src/component/Icons/TicketDiagonal.tsx new file mode 100755 index 0000000..7fad1a1 --- /dev/null +++ b/src/component/Icons/TicketDiagonal.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function TicketDiagonal(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Timer.tsx b/src/component/Icons/Timer.tsx new file mode 100755 index 0000000..73e8274 --- /dev/null +++ b/src/component/Icons/Timer.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const Timer = createSvgIcon( + , + "Timer", +); + +export default Timer; diff --git a/src/component/Icons/Translate.tsx b/src/component/Icons/Translate.tsx new file mode 100755 index 0000000..432b0a1 --- /dev/null +++ b/src/component/Icons/Translate.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Translate(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Upload.tsx b/src/component/Icons/Upload.tsx new file mode 100755 index 0000000..3b42b70 --- /dev/null +++ b/src/component/Icons/Upload.tsx @@ -0,0 +1,12 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Upload(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/UploadFilled.tsx b/src/component/Icons/UploadFilled.tsx new file mode 100755 index 0000000..3e07029 --- /dev/null +++ b/src/component/Icons/UploadFilled.tsx @@ -0,0 +1,12 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function UploadFilled(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Video.tsx b/src/component/Icons/Video.tsx new file mode 100755 index 0000000..205147f --- /dev/null +++ b/src/component/Icons/Video.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Video(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/VideoOutlined.tsx b/src/component/Icons/VideoOutlined.tsx new file mode 100755 index 0000000..df11823 --- /dev/null +++ b/src/component/Icons/VideoOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function VideoOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/WalletCreditCard.tsx b/src/component/Icons/WalletCreditCard.tsx new file mode 100755 index 0000000..7abde4a --- /dev/null +++ b/src/component/Icons/WalletCreditCard.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const WalletCreditCard = createSvgIcon( + , + "WalletCreditCard", +); + +export default WalletCreditCard; diff --git a/src/component/Icons/Warning.tsx b/src/component/Icons/Warning.tsx new file mode 100755 index 0000000..299aab5 --- /dev/null +++ b/src/component/Icons/Warning.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function Warning(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/WarningOutlined.tsx b/src/component/Icons/WarningOutlined.tsx new file mode 100755 index 0000000..7e4a8d5 --- /dev/null +++ b/src/component/Icons/WarningOutlined.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function WarningOutlined(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/Whiteboard.tsx b/src/component/Icons/Whiteboard.tsx new file mode 100755 index 0000000..063e94d --- /dev/null +++ b/src/component/Icons/Whiteboard.tsx @@ -0,0 +1,8 @@ +import { createSvgIcon } from "@mui/material"; + +const WhiteBoard = createSvgIcon( + , + "WhiteBoard", +); + +export default WhiteBoard; diff --git a/src/component/Icons/WindowApps.tsx b/src/component/Icons/WindowApps.tsx new file mode 100755 index 0000000..cf7d9d4 --- /dev/null +++ b/src/component/Icons/WindowApps.tsx @@ -0,0 +1,9 @@ +import { SvgIcon, SvgIconProps } from "@mui/material"; + +export default function WindowApps(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/src/component/Icons/WrenchSettings.tsx b/src/component/Icons/WrenchSettings.tsx new file mode 100755 index 0000000..6f13959 --- /dev/null +++ b/src/component/Icons/WrenchSettings.tsx @@ -0,0 +1,7 @@ +import { createSvgIcon } from "@mui/material"; + +const WrenchSettings = createSvgIcon( + , + "WrenchSettings", +); +export default WrenchSettings; diff --git a/src/component/Pages/Devices/AppPromotion.tsx b/src/component/Pages/Devices/AppPromotion.tsx new file mode 100755 index 0000000..f08cd65 --- /dev/null +++ b/src/component/Pages/Devices/AppPromotion.tsx @@ -0,0 +1,166 @@ +import { alpha, Box, Grid, Typography, useTheme } from "@mui/material"; +import { QRCodeSVG } from "qrcode.react"; +import { useMemo, useState } from "react"; +import { Trans, useTranslation } from "react-i18next"; +import { useAppSelector } from "../../../redux/hooks.ts"; +import SessionManager from "../../../session"; +import { SecondaryButton } from "../../Common/StyledComponents.tsx"; + +const AppPromotion = () => { + const title = useAppSelector((state) => state.siteConfig.basic.config.title); + const { t } = useTranslation(); + const [showQr, setShowQr] = useState(false); + const theme = useTheme(); + const refreshToken = useMemo(() => { + return ( + window.location.origin + + "/login?refresh_token=" + + (SessionManager.currentLoginOrNull()?.token?.refresh_token ?? "") + ); + }, [showQr]); + + return ( + + + + + + + `linear-gradient(180deg, transparent 82%, ${alpha(theme.palette.secondary.main, 0.3)} 0%)`, + }} + />, + ]} + /> + + + +

+ + {t("setting.downloadOurApp")} + + + + + + +
+ + {t("setting.fillInEndpoint")} + + + setShowQr(false)} + style={{ + transition: "all .3s ease-in", + filter: showQr ? "initial" : "blur(8px)", + backgroundColor: "#fff", + }} + value={refreshToken} + /> + + {!showQr && ( + setShowQr(true)} + sx={{ + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + }} + color={"inherit"} + variant={"outlined"} + > + {t("setting.shoeQr")} + + )} + +
+ + {t("setting.loginApp")} + +

+ + + + + + + + + + + + + + + + ); +}; + +export default AppPromotion; diff --git a/src/component/Pages/Devices/ConnectionInfoDialog.tsx b/src/component/Pages/Devices/ConnectionInfoDialog.tsx new file mode 100755 index 0000000..b051cb5 --- /dev/null +++ b/src/component/Pages/Devices/ConnectionInfoDialog.tsx @@ -0,0 +1,72 @@ +import { useTranslation } from "react-i18next"; +import { DialogContent, DialogProps, FilledInput, IconButton, InputAdornment, InputLabel, Stack } from "@mui/material"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import DraggableDialog from "../../Dialogs/DraggableDialog.tsx"; +import { DavAccount } from "../../../api/setting.ts"; +import FormControl from "@mui/material/FormControl"; +import CopyOutlined from "../../Icons/CopyOutlined.tsx"; +import { copyToClipboard } from "../../../util"; +import SessionManager from "../../../session"; + +export interface ConnectionInfoDialogProps extends DialogProps { + account?: DavAccount; +} + +const InfoTextField = ({ label, value }: { label: string; value: string }) => { + return ( + + {label} + + copyToClipboard(value)}> + + + + } + inputProps={{ + readOnly: true, + }} + /> + + ); +}; + +const ConnectionInfoDialog = ({ onClose, account, ...rest }: ConnectionInfoDialogProps) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + + return ( + onClose && onClose({}, "escapeKeyDown")} + dialogProps={{ + onClose: onClose, + fullWidth: true, + maxWidth: "xs", + disableRestoreFocus: true, + ...rest, + }} + > + + + + + + + + + ); +}; +export default ConnectionInfoDialog; diff --git a/src/component/Pages/Devices/CreateDAVAccountDialog.tsx b/src/component/Pages/Devices/CreateDAVAccountDialog.tsx new file mode 100755 index 0000000..8341bad --- /dev/null +++ b/src/component/Pages/Devices/CreateDAVAccountDialog.tsx @@ -0,0 +1,177 @@ +import { Checkbox, DialogContent, DialogProps, FormGroup, Stack, Typography, useTheme } from "@mui/material"; +import { useSnackbar } from "notistack"; +import { useEffect, useMemo, useState } from "react"; +import { Trans, useTranslation } from "react-i18next"; +import { sendCreateDavAccounts, sendUpdateDavAccounts } from "../../../api/api.ts"; +import { DavAccount, DavAccountOption } from "../../../api/setting.ts"; +import { GroupPermission } from "../../../api/user.ts"; +import { defaultPath } from "../../../hooks/useNavigation.tsx"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import SessionManager from "../../../session"; +import Boolset from "../../../util/boolset.ts"; +import { Filesystem } from "../../../util/uri.ts"; +import { Code } from "../../Common/Code.tsx"; +import { OutlineIconTextField } from "../../Common/Form/OutlineIconTextField.tsx"; +import { PathSelectorForm } from "../../Common/Form/PathSelectorForm.tsx"; +import { SmallFormControlLabel } from "../../Common/StyledComponents.tsx"; +import DialogAccordion from "../../Dialogs/DialogAccordion.tsx"; +import DraggableDialog from "../../Dialogs/DraggableDialog.tsx"; +import Tag from "../../Icons/Tag.tsx"; + +export interface CreateDAVAccountDialogProps extends DialogProps { + onAccountAdded?: (account: DavAccount) => void; + onAccountUpdated?: (account: DavAccount) => void; + editTarget?: DavAccount; +} + +const CreateDAVAccountDialog = ({ + onClose, + onAccountAdded, + onAccountUpdated, + editTarget, + open, + ...rest +}: CreateDAVAccountDialogProps) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const { enqueueSnackbar } = useSnackbar(); + + const [loading, setLoading] = useState(false); + const [name, setName] = useState(""); + const [path, setPath] = useState(defaultPath); + const [readonly, setReadonly] = useState(false); + const [blockSysFilesUpload, setBlockSysFilesUpload] = useState(false); + const [proxy, setProxy] = useState(false); + + const theme = useTheme(); + + const groupProxyEnabled = useMemo(() => { + const perm = new Boolset(SessionManager.currentLoginOrNull()?.user.group?.permission); + return perm.enabled(GroupPermission.webdav_proxy); + }, []); + + useEffect(() => { + if (open && editTarget) { + setName(editTarget.name); + setPath(editTarget.uri); + const options = new Boolset(editTarget.options); + setReadonly(options.enabled(DavAccountOption.readonly)); + setBlockSysFilesUpload(options.enabled(DavAccountOption.disable_sys_files)); + setProxy(options.enabled(DavAccountOption.proxy)); + } + }, [open]); + + const onAccept = () => { + if (!name || !path) { + return; + } + + setLoading(true); + const req = { + name, + uri: path, + proxy, + readonly, + disable_sys_files: blockSysFilesUpload, + }; + dispatch(editTarget ? sendUpdateDavAccounts(editTarget.id, req) : sendCreateDavAccounts(req)) + .then((account) => { + onClose && onClose({}, "escapeKeyDown"); + !editTarget && onAccountAdded && onAccountAdded(account); + editTarget && onAccountUpdated && onAccountUpdated(account); + }) + .finally(() => { + setLoading(false); + }); + }; + + return ( + + + + } + variant="outlined" + value={name} + multiline + onChange={(e) => setName(e.target.value)} + label={t("setting.annotation")} + fullWidth + /> + + + + setReadonly(e.target.checked)} checked={readonly} />} + label={t("application:setting.readonlyOn")} + /> + + {t("application:setting.readonlyTooltip")} + + setBlockSysFilesUpload(e.target.checked)} + checked={blockSysFilesUpload} + /> + } + label={t("application:setting.blockSysFilesUpload")} + /> + + ]} + /> + + {groupProxyEnabled && ( + <> + setProxy(e.target.checked)} checked={proxy} />} + label={t("application:setting.proxy")} + /> + + {t("application:setting.proxyTooltip")} + + + )} + + + + + + ); +}; +export default CreateDAVAccountDialog; diff --git a/src/component/Pages/Devices/DavAccountList.tsx b/src/component/Pages/Devices/DavAccountList.tsx new file mode 100755 index 0000000..1b0184d --- /dev/null +++ b/src/component/Pages/Devices/DavAccountList.tsx @@ -0,0 +1,148 @@ +import * as React from "react"; +import { useCallback, useState } from "react"; +import { Box, Table, TableBody, TableContainer, TableHead, TableRow, Typography } from "@mui/material"; +import { useTranslation } from "react-i18next"; +import { getDavAccounts } from "../../../api/api.ts"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import { DavAccount } from "../../../api/setting.ts"; +import DavAccountRow from "./DavAccountRow.tsx"; +import { NoWrapTableCell } from "../../Common/StyledComponents.tsx"; +import { CellHeaderWithPadding } from "../../FileManager/Dialogs/LockConflictDetails.tsx"; +import CreateDAVAccountDialog from "./CreateDAVAccountDialog.tsx"; +import ConnectionInfoDialog from "./ConnectionInfoDialog.tsx"; + +const defaultPageSize = 50; + +export interface DavAccountListProps { + creatAccountDialog: boolean; + setCreateAccountDialog: (value: boolean) => void; +} + +const DavAccountList = ({ creatAccountDialog, setCreateAccountDialog }: DavAccountListProps) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + + const [nextPageToken, setNextPageToken] = useState(""); + const [accounts, setAccounts] = useState([]); + const [loading, setLoading] = useState(false); + const [accountInfoTarget, setAccountInfoTarget] = useState(); + const [editTarget, setEditTarget] = useState(); + const [editOpen, setEditOpen] = useState(false); + + const loadNextPage = useCallback( + (originAccounts: DavAccount[], token?: string) => () => { + setLoading(true); + dispatch( + getDavAccounts({ + page_size: defaultPageSize, + next_page_token: token, + }), + ) + .then((res) => { + setAccounts([...originAccounts, ...res.accounts]); + if (res.pagination?.next_token) { + setNextPageToken(res.pagination.next_token); + } else { + setNextPageToken(undefined); + } + }) + .catch(() => { + setNextPageToken(undefined); + }) + .finally(() => { + setLoading(false); + }); + }, + [dispatch], + ); + + const refresh = () => { + loadNextPage([], "")(); + }; + + const onAccountDeleted = useCallback( + (id: string) => { + setAccounts((accounts) => accounts.filter((account) => account.id !== id)); + }, + [setAccounts], + ); + + const onAccountAdded = (account: DavAccount) => { + setAccounts([account, ...accounts]); + setAccountInfoTarget(account); + }; + + const onEditOpen = (account: DavAccount) => { + setEditOpen(true); + setEditTarget(account); + }; + + return ( + + setCreateAccountDialog(false)} + onAccountAdded={onAccountAdded} + /> + setEditOpen(false)} + onAccountUpdated={(account) => setAccounts(accounts.map((a) => (a.id == account.id ? account : a)))} + /> + setAccountInfoTarget(undefined)} + /> + + + + + {t("setting.annotation")} + + {t("setting.rootFolder")} + + {t("fileManager.permissions")} + {t("setting.proxy")} + {t("fileManager.createdAt")} + {t("fileManager.actions")} + + + + {accounts.map((account) => ( + setAccountInfoTarget(account)} + key={account.id} + account={account} + onAccountDeleted={onAccountDeleted} + onEditClicked={() => onEditOpen(account)} + /> + ))} + {nextPageToken != undefined && ( + <> + {[...Array(4)].map((_, i) => ( + + ))} + + )} + +

+ {nextPageToken == undefined && accounts.length == 0 && ( + + + {t("application:setting.listEmpty")} + + + )} + + + ); +}; + +export default DavAccountList; diff --git a/src/component/Pages/Devices/DavAccountRow.tsx b/src/component/Pages/Devices/DavAccountRow.tsx new file mode 100755 index 0000000..b40ae8e --- /dev/null +++ b/src/component/Pages/Devices/DavAccountRow.tsx @@ -0,0 +1,164 @@ +import * as React from "react"; +import { useEffect, useMemo } from "react"; +import { IconButton, ListItemText, Menu, Skeleton, TableRow } from "@mui/material"; +import { useTranslation } from "react-i18next"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import { NoWrapCell, SquareChip } from "../../Common/StyledComponents.tsx"; +import { DavAccount, DavAccountOption } from "../../../api/setting.ts"; +import FileBadge from "../../FileManager/FileBadge.tsx"; +import { FileType } from "../../../api/explorer.ts"; +import TimeBadge from "../../Common/TimeBadge.tsx"; +import Boolset from "../../../util/boolset.ts"; +import { defaultPath } from "../../../hooks/useNavigation.tsx"; +import { useInView } from "react-intersection-observer"; +import Eye from "../../Icons/Eye.tsx"; +import { Edit } from "@mui/icons-material"; +import CloudFilled from "../../Icons/CloudFilled.tsx"; +import { bindMenu, bindTrigger, usePopupState } from "material-ui-popup-state/hooks"; +import MoreVertical from "../../Icons/MoreVertical.tsx"; +import { SquareMenuItem } from "../../FileManager/ContextMenu/ContextMenu.tsx"; +import { sendDeleteDavAccount } from "../../../api/api.ts"; + +export interface DavAccountRowProps { + account?: DavAccount; + onLoad?: () => void; + loading?: boolean; + onAccountDeleted: (id: string) => void; + onClick?: () => void; + onEditClicked?: (account: DavAccount) => void; +} + +const DavAccountRow = ({ account, onAccountDeleted, onLoad, loading, onClick, onEditClicked }: DavAccountRowProps) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + + const { ref, inView } = useInView({ + rootMargin: "200px 0px", + triggerOnce: true, + skip: !loading || !onLoad, + }); + + const actionMenuState = usePopupState({ + variant: "popover", + popupId: "action" + account?.id, + }); + + useEffect(() => { + if (!inView) { + return; + } + + if (onLoad) { + onLoad(); + } + }, [inView]); + + const [readOnly, proxy] = useMemo(() => { + if (!account?.options) return [false, false] as const; + const bs = new Boolset(account.options); + return [bs.enabled(DavAccountOption.readonly), bs.enabled(DavAccountOption.proxy)] as const; + }, [account?.options]); + + const { onClose, ...rest } = bindMenu(actionMenuState); + + const onEdit = () => { + if (account) { + onEditClicked?.(account); + } + onClose && onClose(); + }; + + const onDelete = () => { + if (!account?.id) { + return; + } + + onClose(); + dispatch(sendDeleteDavAccount(account.id)); + onAccountDeleted(account.id); + }; + + return ( + + + {loading ? : account?.name} + + + {loading ? ( + + ) : ( + + )} + + + {loading ? ( + + ) : readOnly ? ( + } size={"small"} label={t("setting.readonlyOn")} /> + ) : ( + } size={"small"} label={t("setting.readonlyOff")} /> + )} + + + {loading ? ( + + ) : proxy ? ( + } + sx={{ + backgroundColor: (theme) => theme.palette.primary.light, + }} + color={"success"} + size={"small"} + label={t("application:setting.proxied")} + /> + ) : ( + t("setting.none") + )} + + + {loading || !account ? ( + + ) : ( + + )} + + e.stopPropagation()}> + {account && ( + + + + )} + + e.stopPropagation()} + onClose={onClose} + slotProps={{ + paper: { + sx: { + minWidth: 150, + }, + }, + }} + {...rest} + > + + {t(`fileManager.edit`)} + + + {t(`fileManager.delete`)} + + + + ); +}; + +export default DavAccountRow; diff --git a/src/component/Pages/Devices/Devices.tsx b/src/component/Pages/Devices/Devices.tsx new file mode 100755 index 0000000..a7cfef0 --- /dev/null +++ b/src/component/Pages/Devices/Devices.tsx @@ -0,0 +1,92 @@ +import PageHeader, { PageTabQuery } from "../PageHeader.tsx"; +import { Button, Container, Grow } from "@mui/material"; +import * as React from "react"; +import { useEffect, useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { useSearchParams } from "react-router-dom"; +import ResponsiveTabs from "../../Common/ResponsiveTabs.tsx"; +import DavAccountList from "./DavAccountList.tsx"; +import Add from "../../Icons/Add.tsx"; +import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; +import { loadSiteConfig } from "../../../redux/thunks/site.ts"; +import Nothing from "../../Common/Nothing.tsx"; +import SessionManager from "../../../session"; +import Boolset from "../../../util/boolset.ts"; +import { GroupPermission } from "../../../api/user.ts"; +import AppPromotion from "./AppPromotion.tsx"; +import PageContainer from "../PageContainer.tsx"; + +export enum DevicePageTab { + Dav = "dav", + App = "app", +} + +const Devices = () => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const [searchParams, setSearchParams] = useSearchParams(); + const [creatAccountDialog, setCreateAccountDialog] = useState(false); + const appPromotion = useAppSelector((state) => state.siteConfig.app.config?.app_promotion); + + const webDavEnabled = useMemo(() => { + const user = SessionManager.currentLoginOrNull(); + let enabled = false; + if (user && user.user.group?.permission) { + const bs = new Boolset(user.user.group.permission); + enabled = bs.enabled(GroupPermission.webdav); + } + + return enabled; + }, []); + + const tabs = useMemo(() => { + const res = []; + if (webDavEnabled) { + res.push({ + label: t("application:setting.webdavAccounts"), + value: DevicePageTab.Dav, + }); + } + if (appPromotion) { + res.push({ + label: t("application:setting.iOSApp"), + value: DevicePageTab.App, + }); + } + return res; + }, [webDavEnabled, appPromotion]); + + const [tab, setTab] = useState( + searchParams.get(PageTabQuery) ?? (webDavEnabled ? DevicePageTab.Dav : DevicePageTab.App), + ); + + useEffect(() => { + dispatch(loadSiteConfig("app")); + }, []); + + return ( + + + + + + } + title={t("application:navbar.connect")} + /> + setTab(newValue)} tabs={tabs} /> + {tab == DevicePageTab.Dav && webDavEnabled && ( + + )} + {tab == DevicePageTab.App && appPromotion && } + + {!webDavEnabled && !appPromotion && } + + + ); +}; + +export default Devices; diff --git a/src/component/Pages/HomeRedirect.tsx b/src/component/Pages/HomeRedirect.tsx new file mode 100755 index 0000000..5de2ec5 --- /dev/null +++ b/src/component/Pages/HomeRedirect.tsx @@ -0,0 +1,16 @@ +import SessionManager from "../../session"; +import { useNavigate } from "react-router-dom"; +import { useEffect } from "react"; + +export const HomeRedirect = () => { + const navigate = useNavigate(); + useEffect(() => { + if (SessionManager.currentLoginOrNull()) { + navigate("/home"); + } else { + navigate("/session"); + } + }, []); + + return

; +}; diff --git a/src/component/Pages/Login/Activate.tsx b/src/component/Pages/Login/Activate.tsx new file mode 100755 index 0000000..cbf6194 --- /dev/null +++ b/src/component/Pages/Login/Activate.tsx @@ -0,0 +1,87 @@ +import { useTranslation } from "react-i18next"; +import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; +import { useNavigate } from "react-router-dom"; +import { useSnackbar } from "notistack"; +import { useQuery } from "../../../util"; +import React, { useEffect, useState } from "react"; +import { Box, Button, Typography } from "@mui/material"; +import PageTitle from "../../../router/PageTitle.tsx"; +import CheckmarkCircle from "../../Icons/CheckmarkCircle.tsx"; +import { setHeadlessFrameLoading } from "../../../redux/globalStateSlice.ts"; +import { sendEmailActivate } from "../../../api/api.ts"; + +const Activate = () => { + const { t } = useTranslation(); + const { reg_captcha } = useAppSelector((state) => state.siteConfig.login.config); + const navigate = useNavigate(); + const { enqueueSnackbar } = useSnackbar(); + const dispatch = useAppDispatch(); + const query = useQuery(); + + const [success, setSuccess] = useState(true); + const [email, setEmail] = useState(""); + + useEffect(() => { + const sign = query.get("sign"); + const id = query.get("id"); + if (!sign || !id) { + setSuccess(false); + navigate("/session"); + return; + } + + dispatch(setHeadlessFrameLoading(true)); + dispatch(sendEmailActivate(id, decodeURIComponent(sign))) + .then((u) => { + setEmail(u?.email ?? ""); + setSuccess(true); + }) + .catch(() => { + navigate("/session"); + }) + .finally(() => { + dispatch(setHeadlessFrameLoading(false)); + }); + }, []); + + return ( + + + + {success && ( + <> + + + theme.palette.success.main, + mt: 1, + }} + > + {t("application:login.accountActivated")} + + + + + )} + + + ); +}; + +export default Activate; diff --git a/src/component/Pages/Login/Phases/Phase2FA.tsx b/src/component/Pages/Login/Phases/Phase2FA.tsx new file mode 100755 index 0000000..6d02e65 --- /dev/null +++ b/src/component/Pages/Login/Phases/Phase2FA.tsx @@ -0,0 +1,43 @@ +import { useTranslation } from "react-i18next"; +import { useAppSelector } from "../../../../redux/hooks.ts"; +import { Control } from "../Signin/SignIn.tsx"; +import { FormControl, styled, Typography } from "@mui/material"; +import { MuiOtpInput } from "mui-one-time-password-input"; + +interface Phase2FAProps { + control?: Control; + otp: string; + onOtpChange: (otp: string) => void; + loading: boolean; +} + +const MuiOtpInputStyled = styled(MuiOtpInput)` + display: flex; + gap: 8px; + max-width: 650px; + margin-inline: auto; +`; + +const Phase2FA = ({ control, otp, onOtpChange, loading }: Phase2FAProps) => { + const { t } = useTranslation(); + const regEnabled = useAppSelector((state) => state.siteConfig.login.config.register_enabled); + return ( + <> + {t("login.input2FACode")} + + + + + {control?.submit} + {control?.back} + + ); +}; + +export default Phase2FA; diff --git a/src/component/Pages/Login/Phases/PhaseCollectEmail.tsx b/src/component/Pages/Login/Phases/PhaseCollectEmail.tsx new file mode 100755 index 0000000..f51a12a --- /dev/null +++ b/src/component/Pages/Login/Phases/PhaseCollectEmail.tsx @@ -0,0 +1,106 @@ +import { Box, Divider, FormControl, Link, Stack } from "@mui/material"; +import { useEffect } from "react"; +import { Trans, useTranslation } from "react-i18next"; +import { Link as RouterLink } from "react-router-dom"; +import { useAppSelector } from "../../../../redux/hooks.ts"; +import { useQuery } from "../../../../util"; +import { OutlineIconTextField } from "../../../Common/Form/OutlineIconTextField.tsx"; +import MailOutlined from "../../../Icons/MailOutlined.tsx"; +import PasskeyLoginButton from "../Signin/PasskeyLoginButton.tsx"; +import { Control } from "../Signin/SignIn.tsx"; + +export const LegalLinks = () => { + const { t } = useTranslation(); + const tos = useAppSelector((state) => state.siteConfig.login.config.tos_url); + const privacyPolicy = useAppSelector((state) => state.siteConfig.login.config.privacy_policy_url); + return ( + <> + {(tos || privacyPolicy) && ( + + {tos && ( + + {t("login.termOfUse")} + + )} + {tos && privacyPolicy && " | "} + {privacyPolicy && ( + + {t("login.privacyPolicy")} + + )} + + )} + + ); +}; + +interface PhaseCollectEmailProps { + email: string; + setEmail: (email: string) => void; + control?: Control; +} + +const PhaseCollectEmail = ({ email, setEmail, control }: PhaseCollectEmailProps) => { + const { t } = useTranslation(); + const query = useQuery(); + const { register_enabled, authn } = useAppSelector((state) => state.siteConfig.login.config); + const tos = useAppSelector((state) => state.siteConfig.login.config.tos_url); + const privacyPolicy = useAppSelector((state) => state.siteConfig.login.config.privacy_policy_url); + + const showFooter = tos || privacyPolicy || authn; + + useEffect(() => { + if (!!query.get("email")) { + setEmail(query.get("email") ?? ""); + } + }, []); + + return ( + <> + + setEmail(e.target.value)} + icon={} + autoComplete={"username webauthn"} + value={email} + autoFocus + /> + + {control?.submit} + {control?.back} + {register_enabled && ( + + ]} + /> + + )} + {showFooter && ( + <> + + {authn && } + + + )} + + ); +}; + +export default PhaseCollectEmail; diff --git a/src/component/Pages/Login/Phases/PhaseCollectPassword.tsx b/src/component/Pages/Login/Phases/PhaseCollectPassword.tsx new file mode 100755 index 0000000..70e62a2 --- /dev/null +++ b/src/component/Pages/Login/Phases/PhaseCollectPassword.tsx @@ -0,0 +1,89 @@ +import { Divider, FormControl, Link, Stack, Typography } from "@mui/material"; +import { useTranslation } from "react-i18next"; +import { PrepareLoginResponse } from "../../../../api/user.ts"; +import { useAppSelector } from "../../../../redux/hooks.ts"; +import { Captcha, CaptchaParams } from "../../../Common/Captcha/Captcha.tsx"; +import { OutlineIconTextField } from "../../../Common/Form/OutlineIconTextField.tsx"; +import Password from "../../../Icons/Password.tsx"; +import PasskeyLoginButton from "../Signin/PasskeyLoginButton.tsx"; +import { Control } from "../Signin/SignIn.tsx"; + +interface PhaseCollectPasswordProps { + pwd: string; + email: string; + setPwd: (pwd: string) => void; + control?: Control; + loginOptions?: PrepareLoginResponse; + captchaGen: number; + setCaptchaState: (state: CaptchaParams) => void; + onForget?: () => void; +} + +const PhaseCollectPassword = ({ + pwd, + email, + setPwd, + control, + loginOptions, + captchaGen, + setCaptchaState, + onForget, +}: PhaseCollectPasswordProps) => { + const { t } = useTranslation(); + const { login_captcha, authn } = useAppSelector((state) => state.siteConfig.login.config); + + const moreOptions = loginOptions?.webauthn_enabled && authn; + return ( + <> + {loginOptions?.password_enabled && ( + <> + {t("login.enterPasswordHint", { email: email })} + + setPwd(e.target.value)} + icon={} + value={pwd} + autoComplete={"true"} + /> + + {t("login.forgetPassword")} + + + {login_captcha && ( + + + + )} + {control?.submit} + {moreOptions && ( + + + {t("login.or")} + + + )} + + )} + {!loginOptions?.password_enabled && ( + + {t("login.paswordlessHint", { email: email })} + + )} + {loginOptions?.webauthn_enabled && authn && } + {control?.back} + + ); +}; + +export default PhaseCollectPassword; diff --git a/src/component/Pages/Login/Phases/PhaseForgetPassword.tsx b/src/component/Pages/Login/Phases/PhaseForgetPassword.tsx new file mode 100755 index 0000000..96194a7 --- /dev/null +++ b/src/component/Pages/Login/Phases/PhaseForgetPassword.tsx @@ -0,0 +1,31 @@ +import { useTranslation } from "react-i18next"; +import { Control } from "../Signin/SignIn.tsx"; +import { useAppSelector } from "../../../../redux/hooks.ts"; +import { FormControl } from "@mui/material"; +import { Captcha, CaptchaParams } from "../../../Common/Captcha/Captcha.tsx"; + +interface PhaseForgetPasswordProps { + email: string; + control?: Control; + captchaGen: number; + setCaptchaState: (state: CaptchaParams) => void; +} + +const PhaseForgetPassword = ({ captchaGen, setCaptchaState, control }: PhaseForgetPasswordProps) => { + const { t } = useTranslation(); + const { forget_captcha } = useAppSelector((state) => state.siteConfig.login.config); + + return ( + <> + {forget_captcha && ( + + + + )} + {control?.submit} + {control?.back} + + ); +}; + +export default PhaseForgetPassword; diff --git a/src/component/Pages/Login/Phases/PhaseSignupNeeded.tsx b/src/component/Pages/Login/Phases/PhaseSignupNeeded.tsx new file mode 100755 index 0000000..fbca7ed --- /dev/null +++ b/src/component/Pages/Login/Phases/PhaseSignupNeeded.tsx @@ -0,0 +1,26 @@ +import { useTranslation } from "react-i18next"; +import { Alert, Stack, Typography } from "@mui/material"; +import { useAppSelector } from "../../../../redux/hooks.ts"; +import { Control } from "../Signin/SignIn.tsx"; + +interface SignupNeededProps { + email: string; + control?: Control; +} + +const SignupNeeded = ({ email, control }: SignupNeededProps) => { + const { t } = useTranslation(); + const regEnabled = useAppSelector((state) => state.siteConfig.login.config.register_enabled); + return ( + <> + {regEnabled && {t("login.signupHint", { email: email })}} + {!regEnabled && {t("login.accountNotFoundHint", { email: email })}} + + {regEnabled && control?.submit} + + {control?.back} + + ); +}; + +export default SignupNeeded; diff --git a/src/component/Pages/Login/Reset.tsx b/src/component/Pages/Login/Reset.tsx new file mode 100755 index 0000000..a53c9ae --- /dev/null +++ b/src/component/Pages/Login/Reset.tsx @@ -0,0 +1,133 @@ +import { LoadingButton } from "@mui/lab"; +import { Box, FormControl, Link, Typography } from "@mui/material"; +import { useSnackbar } from "notistack"; +import { useRef, useState } from "react"; +import { Trans, useTranslation } from "react-i18next"; +import { Link as RouterLink, useNavigate } from "react-router-dom"; +import { sendReset } from "../../../api/api.ts"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import PageTitle from "../../../router/PageTitle.tsx"; +import { useQuery } from "../../../util"; +import { OutlineIconTextField } from "../../Common/Form/OutlineIconTextField.tsx"; +import { DefaultCloseAction } from "../../Common/Snackbar/snackbar.tsx"; +import Password from "../../Icons/Password.tsx"; + +const Reset = () => { + const { t } = useTranslation(); + const navigate = useNavigate(); + const { enqueueSnackbar } = useSnackbar(); + const dispatch = useAppDispatch(); + const query = useQuery(); + + const formRef = useRef(null); + const [password, setPassword] = useState(""); + const [passwordRepeat, setPasswordRepeat] = useState(""); + const [loading, setLoading] = useState(false); + + const submit = () => { + if (!formRef.current) { + return; + } + + if (!formRef.current.checkValidity()) { + formRef.current.reportValidity(); + return; + } + + if (passwordRepeat != password) { + enqueueSnackbar({ + message: t("login.passwordNotMatch"), + variant: "warning", + action: DefaultCloseAction, + }); + return; + } + + setLoading(true); + dispatch( + sendReset(query.get("id") ?? "0", { + password, + secret: query.get("secret") ?? "", + }), + ) + .then((u) => { + navigate("/session?phase=email&email=" + encodeURIComponent(u?.email ?? "")); + enqueueSnackbar({ + message: t("login.passwordReset"), + variant: "success", + action: DefaultCloseAction, + }); + }) + .finally(() => { + setLoading(false); + }); + }; + + return ( + + + + {t("login.repeatPassword")} + + + + setPassword(e.target.value)} + icon={} + value={password} + autoComplete={"false"} + /> + + + setPasswordRepeat(e.target.value)} + icon={} + value={passwordRepeat} + autoComplete={"false"} + /> + + + {t("login.resetPassword")} + + + ]} + /> + + + + + + ); +}; + +export default Reset; diff --git a/src/component/Pages/Login/SessionIntro.tsx b/src/component/Pages/Login/SessionIntro.tsx new file mode 100755 index 0000000..2753c8b --- /dev/null +++ b/src/component/Pages/Login/SessionIntro.tsx @@ -0,0 +1,24 @@ +import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; +import { useEffect } from "react"; +import { ConfigLoadState } from "../../../redux/siteConfigSlice.ts"; +import { setHeadlessFrameLoading } from "../../../redux/globalStateSlice.ts"; +import { loadSiteConfig } from "../../../redux/thunks/site.ts"; +import { Outlet } from "react-router-dom"; + +const SessionIntro = () => { + const dispatch = useAppDispatch(); + const loginConfigLoading = useAppSelector((state) => state.siteConfig.login.loaded); + useEffect(() => { + dispatch(loadSiteConfig("login")); + }, []); + useEffect(() => { + if (loginConfigLoading == ConfigLoadState.NotLoaded) { + dispatch(setHeadlessFrameLoading(true)); + } else { + dispatch(setHeadlessFrameLoading(false)); + } + }, [loginConfigLoading]); + return <>{loginConfigLoading != ConfigLoadState.NotLoaded && }; +}; + +export default SessionIntro; diff --git a/src/component/Pages/Login/SideTransition.css b/src/component/Pages/Login/SideTransition.css new file mode 100755 index 0000000..34e705d --- /dev/null +++ b/src/component/Pages/Login/SideTransition.css @@ -0,0 +1,23 @@ +.side-enter { + opacity: 0; + transform: translateX(-100%); +} +.side-enter-active { + opacity: 1; + transform: translateX(0%); +} +.side-exit { + opacity: 1; + transform: translateX(0%); +} +.side-exit-active { + opacity: 0; + transform: translateX(100%); +} +.side-enter-active, +.side-exit-active { + transition: + opacity 300ms, + transform 300ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} diff --git a/src/component/Pages/Login/Signin/PasskeyLoginButton.tsx b/src/component/Pages/Login/Signin/PasskeyLoginButton.tsx new file mode 100755 index 0000000..39bde48 --- /dev/null +++ b/src/component/Pages/Login/Signin/PasskeyLoginButton.tsx @@ -0,0 +1,117 @@ +import { LoadingButton } from "@mui/lab"; +import { ButtonProps } from "@mui/material"; +import { useSnackbar } from "notistack"; +import { useEffect, useRef, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { sendFinishPasskeyLogin, sendPreparePasskeyLogin } from "../../../../api/api.ts"; +import { setHeadlessFrameLoading } from "../../../../redux/globalStateSlice.ts"; +import { useAppDispatch } from "../../../../redux/hooks.ts"; +import { refreshUserSession } from "../../../../redux/thunks/session.ts"; +import { bufferEncode, urlBase64BufferDecode, useQuery } from "../../../../util"; +import { DefaultCloseAction } from "../../../Common/Snackbar/snackbar.tsx"; +import Fingerprint from "../../../Icons/Fingerprint.tsx"; + +export interface PasskeyLoginButtonProps extends ButtonProps { + autoComplete?: boolean; +} + +export default function PasskeyLoginButton({ autoComplete, ...rest }: PasskeyLoginButtonProps) { + const { t } = useTranslation(); + const { enqueueSnackbar } = useSnackbar(); + const dispatch = useAppDispatch(); + const query = useQuery(); + + const [loading, setLoading] = useState(false); + const abortRef = useRef(new AbortController()); + + useEffect(() => { + abortRef.current = new AbortController(); + if ( + autoComplete && + navigator.credentials && + window.PublicKeyCredential && + PublicKeyCredential.isConditionalMediationAvailable + ) { + PublicKeyCredential.isConditionalMediationAvailable().then((v) => { + if (!abortRef.current.signal.aborted) startLogin(true)(); + }); + } + return () => { + abortRef.current?.abort(); + }; + }, []); + + const startLogin = (conditional: boolean) => async () => { + if (!navigator.credentials || !window.PublicKeyCredential) { + enqueueSnackbar({ + message: t("setting.browserNotSupported"), + variant: "warning", + action: DefaultCloseAction, + }); + + return; + } + + if (!conditional) { + abortRef.current.abort(); + } + + setLoading(!conditional); + try { + const opts = await dispatch(sendPreparePasskeyLogin()); + const credential = await navigator.credentials.get({ + publicKey: { + // url decode base64 + challenge: urlBase64BufferDecode(opts.options.publicKey.challenge), + timeout: opts.options.publicKey.timeout, + rpId: opts.options.publicKey.rpId, + }, + ...(conditional ? { mediation: "conditional", signal: abortRef.current.signal } : {}), + }); + if (credential) { + dispatch(setHeadlessFrameLoading(true)); + const c = credential as PublicKeyCredential; + const response = await dispatch( + sendFinishPasskeyLogin({ + session_id: opts.session_id, + response: JSON.stringify({ + id: credential.id, + type: credential.type, + rawId: bufferEncode(c.rawId), + response: { + // @ts-ignore + attestationObject: bufferEncode(c.response.attestationObject), + clientDataJSON: bufferEncode(c.response.clientDataJSON), + // @ts-ignore + signature: bufferEncode(c.response.signature), + // @ts-ignore + userHandle: bufferEncode(c.response.userHandle), + // @ts-ignore + authenticatorData: bufferEncode(c.response.authenticatorData), + }, + }), + }), + ); + dispatch(refreshUserSession(response, query.get("redirect"))); + } + } catch (e) { + console.log(e); + } finally { + !conditional && setLoading(false); + dispatch(setHeadlessFrameLoading(false)); + } + }; + + return ( + } + fullWidth + {...rest} + > + {t("login.useFIDO2")} + + ); +} diff --git a/src/component/Pages/Login/Signin/SignIn.tsx b/src/component/Pages/Login/Signin/SignIn.tsx new file mode 100755 index 0000000..83334fd --- /dev/null +++ b/src/component/Pages/Login/Signin/SignIn.tsx @@ -0,0 +1,300 @@ +import { ArrowBackIos } from "@mui/icons-material"; +import { LoadingButton } from "@mui/lab"; +import { Box, Button, Typography } from "@mui/material"; +import { enqueueSnackbar } from "notistack"; +import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router-dom"; +import { CSSTransition, SwitchTransition } from "react-transition-group"; +import { send2FALogin, sendLogin, sendPrepareLogin, sendResetEmail } from "../../../../api/api.ts"; +import { AppError, Code } from "../../../../api/request.ts"; +import { PrepareLoginResponse } from "../../../../api/user.ts"; +import { useAppDispatch } from "../../../../redux/hooks.ts"; +import { refreshUserSession } from "../../../../redux/thunks/session.ts"; +import PageTitle from "../../../../router/PageTitle.tsx"; +import { useQuery } from "../../../../util"; +import { CaptchaParams } from "../../../Common/Captcha/Captcha.tsx"; +import { DefaultCloseAction } from "../../../Common/Snackbar/snackbar.tsx"; +import Phase2FA from "../Phases/Phase2FA.tsx"; +import PhaseCollectEmail from "../Phases/PhaseCollectEmail.tsx"; +import PhaseCollectPassword from "../Phases/PhaseCollectPassword.tsx"; +import PhaseForgetPassword from "../Phases/PhaseForgetPassword.tsx"; +import PhaseSignupNeeded from "../Phases/PhaseSignupNeeded.tsx"; +import "../SideTransition.css"; + +enum EmailLoginPhase { + CollectEmail, + CollectPassword, + SignupNeeded, + Collect2FA, + ForgetPassword, +} + +export interface Control { + submit: JSX.Element; + back: JSX.Element; +} + +interface phaseSetting { + title: string; + nextButtonText: string; + showBackButton: boolean; + previous?: EmailLoginPhase; + control?: Control; +} + +const EmailLogin = () => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const navigate = useNavigate(); + const query = useQuery(); + + const [phase, setPhase] = useState(EmailLoginPhase.CollectEmail); + const [email, setEmail] = useState(""); + const [pwd, setPwd] = useState(""); + const [otp, setOTP] = useState(""); + const [captchaGen, setCaptchaGen] = useState(0); + const [loading, setLoading] = useState(false); + const captchaState = useRef(); + const twoFaSession = useRef(""); + const [direction, setDirection] = useState<"left" | "right" | "up" | "down">("right"); + const [loginOptions, setLoginOptions] = useState(); + + const prepareLogin = useCallback(async () => { + try { + setLoading(true); + const opts = await dispatch(sendPrepareLogin(email)); + setLoginOptions(opts); + setPhase(EmailLoginPhase.CollectPassword); + } catch (e) { + if (e instanceof AppError && e.code === Code.NodeFound) { + // User not registered yet, guided to register + setPhase(EmailLoginPhase.SignupNeeded); + } + } finally { + setLoading(false); + } + }, [dispatch, email, setPhase]); + + const passwordLogin = useCallback( + async (email: string, password: string, captcha?: CaptchaParams) => { + try { + setLoading(true); + const loginRes = await dispatch(sendLogin({ email, password, ...captcha })); + dispatch(refreshUserSession(loginRes, query.get("redirect"))); + } catch (e) { + if (e instanceof AppError && e.code === Code.Continue) { + twoFaSession.current = e.response.data; + // User not registered yet, guided to register + setPhase(EmailLoginPhase.Collect2FA); + } else { + setCaptchaGen((g) => g + 1); + } + } finally { + setLoading(false); + } + }, + [dispatch, setPhase, setCaptchaGen, setLoading], + ); + + const finish2FA = useCallback(async (otp: string, ticket: string) => { + try { + setLoading(true); + const loginRes = await dispatch(send2FALogin({ otp, session_id: ticket })); + dispatch(refreshUserSession(loginRes, query.get("redirect"))); + } finally { + setOTP(""); + setLoading(false); + } + }, []); + + const submitSendResetEmail = useCallback( + async (email: string, captcha?: CaptchaParams) => { + try { + setLoading(true); + await dispatch(sendResetEmail({ email, ...captcha })); + setPhase(EmailLoginPhase.CollectEmail); + enqueueSnackbar({ + message: t("login.resetEmailSent"), + variant: "success", + action: DefaultCloseAction, + }); + } catch (e) { + setCaptchaGen((g) => g + 1); + } finally { + setLoading(false); + } + }, + [dispatch, setPhase, setCaptchaGen, setLoading], + ); + + const submit = (e?: FormEvent) => { + e?.preventDefault(); + switch (phase) { + case EmailLoginPhase.CollectEmail: + prepareLogin(); + break; + case EmailLoginPhase.SignupNeeded: + navigate(`/session/signup?email=${email}`); + break; + case EmailLoginPhase.CollectPassword: + passwordLogin(email, pwd, captchaState.current); + break; + case EmailLoginPhase.Collect2FA: + finish2FA(otp, twoFaSession.current); + break; + case EmailLoginPhase.ForgetPassword: + submitSendResetEmail(email, captchaState.current); + break; + } + }; + + useEffect(() => { + if (otp.length === 6) { + submit(); + } + }, [otp]); + + const phaseConfig = useMemo((): phaseSetting => { + var phaseSetting: phaseSetting = { + title: t("login.siginToYourAccount"), + nextButtonText: t("login.continue"), + showBackButton: false, + }; + switch (phase) { + case EmailLoginPhase.CollectEmail: + phaseSetting = { + title: t("login.siginToYourAccount"), + nextButtonText: t("login.continue"), + showBackButton: false, + }; + break; + case EmailLoginPhase.SignupNeeded: + phaseSetting = { + title: t("login.siginToYourAccount"), + nextButtonText: t("login.signUpAccount"), + showBackButton: true, + previous: EmailLoginPhase.CollectEmail, + }; + break; + case EmailLoginPhase.CollectPassword: + phaseSetting = { + title: t("login.enterPassword"), + nextButtonText: t("login.signIn"), + showBackButton: true, + previous: EmailLoginPhase.CollectEmail, + }; + break; + case EmailLoginPhase.Collect2FA: + phaseSetting = { + title: t("login.2FA"), + nextButtonText: t("login.signIn"), + showBackButton: true, + previous: EmailLoginPhase.CollectPassword, + }; + break; + case EmailLoginPhase.ForgetPassword: + phaseSetting = { + title: t("login.resetPassword"), + nextButtonText: t("login.sendMeAnEmail"), + showBackButton: true, + previous: EmailLoginPhase.CollectPassword, + }; + break; + default: + break; + } + phaseSetting.control = { + submit: ( + + {phaseSetting.nextButtonText} + + ), + back: ( + <> + {phaseSetting.showBackButton && ( + + )} + + ), + }; + return phaseSetting; + }, [phase, t, loading]); + + return ( + + {phaseConfig.title} + + + node.addEventListener("transitionend", done, false)} + classNames="side" + key={phase} + > + + {phase === EmailLoginPhase.CollectPassword && ( + setPhase(EmailLoginPhase.ForgetPassword)} + setPwd={setPwd} + control={phaseConfig.control} + loginOptions={loginOptions} + captchaGen={captchaGen} + setCaptchaState={(s) => (captchaState.current = s)} + /> + )} + {phase === EmailLoginPhase.SignupNeeded && ( + + )} + {phase === EmailLoginPhase.Collect2FA && ( + setOTP(t)} + control={phaseConfig.control} + /> + )} + {phase === EmailLoginPhase.CollectEmail && ( + + )} + {phase === EmailLoginPhase.ForgetPassword && ( + (captchaState.current = s)} + control={phaseConfig.control} + /> + )} + + + + + + ); +}; + +const SignIn = () => { + const { t } = useTranslation(); + + return ( + + + + + ); +}; + +export default SignIn; diff --git a/src/component/Pages/Login/Signup.tsx b/src/component/Pages/Login/Signup.tsx new file mode 100755 index 0000000..a110b99 --- /dev/null +++ b/src/component/Pages/Login/Signup.tsx @@ -0,0 +1,253 @@ +import { LoadingButton } from "@mui/lab"; +import { Box, Divider, FormControl, Link, Typography } from "@mui/material"; +import i18next from "i18next"; +import { useSnackbar } from "notistack"; +import { useEffect, useRef, useState } from "react"; +import { Trans, useTranslation } from "react-i18next"; +import { Link as RouterLink, useNavigate } from "react-router-dom"; +import { CSSTransition, SwitchTransition } from "react-transition-group"; +import { sendSinUp } from "../../../api/api.ts"; +import { AppError, Code } from "../../../api/request.ts"; +import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; +import PageTitle from "../../../router/PageTitle.tsx"; +import { useQuery } from "../../../util"; +import { Captcha, CaptchaParams } from "../../Common/Captcha/Captcha.tsx"; +import { OutlineIconTextField } from "../../Common/Form/OutlineIconTextField.tsx"; +import { DefaultCloseAction } from "../../Common/Snackbar/snackbar.tsx"; +import EmailClock from "../../Icons/EmailClock.tsx"; +import MailOutlined from "../../Icons/MailOutlined.tsx"; +import Password from "../../Icons/Password.tsx"; +import { LegalLinks } from "./Phases/PhaseCollectEmail.tsx"; + +export enum SignUpPhase { + Main, + EmailActivation, +} + +interface signUpPhaseProps { + title: string; +} + +const signUpPhaseSettings: Record = { + [SignUpPhase.Main]: { + title: "login.createNewAccount", + }, + [SignUpPhase.EmailActivation]: { + title: "login.lastStep", + }, +}; + +const SignUp = () => { + const { t } = useTranslation(); + const { reg_captcha } = useAppSelector((state) => state.siteConfig.login.config); + const tos = useAppSelector((state) => state.siteConfig.login.config.tos_url); + const privacyPolicy = useAppSelector((state) => state.siteConfig.login.config.privacy_policy_url); + const navigate = useNavigate(); + const { enqueueSnackbar } = useSnackbar(); + const dispatch = useAppDispatch(); + const query = useQuery(); + + const [phase, setPhase] = useState(SignUpPhase.Main); + const formRef = useRef(null); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [passwordRepeat, setPasswordRepeat] = useState(""); + const [captchaGen, setCaptchaGen] = useState(0); + const captchaState = useRef(); + const [loading, setLoading] = useState(false); + + const showFooter = tos || privacyPolicy; + + useEffect(() => { + if (!!query.get("email")) { + setEmail(query.get("email") ?? ""); + } + }, []); + + const submit = () => { + if (!formRef.current) { + return; + } + + if (!formRef.current.checkValidity()) { + formRef.current.reportValidity(); + return; + } + + if (passwordRepeat != password) { + enqueueSnackbar({ + message: t("login.passwordNotMatch"), + variant: "warning", + action: DefaultCloseAction, + }); + return; + } + + setLoading(true); + dispatch( + sendSinUp({ + email, + password, + language: i18next.language, + ...captchaState.current, + }), + ) + .then(() => { + navigate("/session?phase=email&email=" + encodeURIComponent(email)); + enqueueSnackbar({ + message: t("login.signUpSuccess"), + variant: "success", + action: DefaultCloseAction, + }); + }) + .catch((e) => { + if (e instanceof AppError && e.code === Code.Continue) { + setPhase(SignUpPhase.EmailActivation); + } else { + setCaptchaGen((g) => g + 1); + } + }) + .finally(() => { + setLoading(false); + }); + }; + + return ( + + + + {t(signUpPhaseSettings[phase].title)} + + + node.addEventListener("transitionend", done, false)} + classNames="side" + key={phase} + > + + {phase === SignUpPhase.EmailActivation && ( + + t.palette.action.disabled, + }} + /> + + {t("application:login.activateDescription")} + + + )} + {phase === SignUpPhase.Main && ( + + + setEmail(e.target.value)} + icon={} + value={email} + autoFocus={true} + /> + + + setPassword(e.target.value)} + icon={} + value={password} + autoComplete={"false"} + /> + + + setPasswordRepeat(e.target.value)} + icon={} + value={passwordRepeat} + autoComplete={"false"} + /> + + {reg_captcha && ( + + (captchaState.current = s)} + /> + + )} + + {t("login.signUp")} + + + ]} + /> + + {showFooter && ( + <> + + + + )} + + )} + + + + + + + ); +}; + +export default SignUp; diff --git a/src/component/Pages/NoMatch.tsx b/src/component/Pages/NoMatch.tsx new file mode 100755 index 0000000..0467694 --- /dev/null +++ b/src/component/Pages/NoMatch.tsx @@ -0,0 +1,46 @@ +import { LoadingButton } from "@mui/lab"; +import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router-dom"; +import { Box, Typography } from "@mui/material"; +import React from "react"; +import DismissCircleFilled from "../Icons/DismissCircleFilled.tsx"; + +const NoMatch = () => { + const { t } = useTranslation(); + const navigate = useNavigate(); + + return ( + + + theme.palette.action.active, + mt: 1, + }} + > + {t("common:pageNotFound")} + + navigate("/")} + fullWidth + variant="contained" + color="primary" + > + {t("application:navbar.backToHomepage")} + + + ); +}; + +export default NoMatch; diff --git a/src/component/Pages/PageContainer.tsx b/src/component/Pages/PageContainer.tsx new file mode 100755 index 0000000..c3bb492 --- /dev/null +++ b/src/component/Pages/PageContainer.tsx @@ -0,0 +1,22 @@ +import { BoxProps, useMediaQuery, useTheme } from "@mui/material"; +import { RadiusFrame } from "../Frame/RadiusFrame.tsx"; + +const PageContainer = (props: BoxProps) => { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down("sm")); + return ( + + ); +}; + +export default PageContainer; diff --git a/src/component/Pages/PageHeader.tsx b/src/component/Pages/PageHeader.tsx new file mode 100755 index 0000000..2c7a3a3 --- /dev/null +++ b/src/component/Pages/PageHeader.tsx @@ -0,0 +1,39 @@ +import { Box, IconButton, Tooltip, Typography } from "@mui/material"; +import ArrowClockwiseFilled from "../Icons/ArrowClockwiseFilled.tsx"; +import { useTranslation } from "react-i18next"; +import PageTitle from "../../router/PageTitle.tsx"; + +export const PageTabQuery = "tab"; + +export interface PageHeaderProps { + title: string; + loading?: boolean; + onRefresh?: () => void; + skipChangingDocumentTitle?: boolean; + secondaryAction?: React.ReactNode; +} + +const PageHeader = ({ title, secondaryAction, onRefresh, loading, skipChangingDocumentTitle }: PageHeaderProps) => { + const { t } = useTranslation(); + return ( + + + + {title} + + {!skipChangingDocumentTitle && } + {onRefresh && ( + + + + + + )} + + {secondaryAction && secondaryAction} + + + ); +}; + +export default PageHeader; diff --git a/src/component/Pages/Pages.tsx b/src/component/Pages/Pages.tsx new file mode 100755 index 0000000..4de121a --- /dev/null +++ b/src/component/Pages/Pages.tsx @@ -0,0 +1,8 @@ +import TaskList from "./Tasks/TaskList.tsx"; +import ShareList from "./Shares/ShareList.tsx"; +import DownloadList from "./Tasks/DownloadList.tsx"; +import Devices from "./Devices/Devices.tsx"; +import Setting from "./Setting/Setting.tsx"; +import Profile from "./Profile/Profile.tsx"; + +export { Setting, TaskList, ShareList, DownloadList, Devices, Profile }; diff --git a/src/component/Pages/Profile/Profile.tsx b/src/component/Pages/Profile/Profile.tsx new file mode 100755 index 0000000..bcf75bd --- /dev/null +++ b/src/component/Pages/Profile/Profile.tsx @@ -0,0 +1,186 @@ +import * as React from "react"; +import { useCallback, useEffect, useState } from "react"; +import { Box, Container, FormControl, Grid, ListItemText, SelectChangeEvent } from "@mui/material"; +import { useTranslation } from "react-i18next"; +import PageHeader from "../PageHeader.tsx"; +import { getUserShares } from "../../../api/api.ts"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import Nothing from "../../Common/Nothing.tsx"; +import { setSelected } from "../../../redux/fileManagerSlice.ts"; +import { Share } from "../../../api/explorer.ts"; +import { DenseSelect } from "../../Common/StyledComponents.tsx"; +import { SquareMenuItem } from "../../FileManager/ContextMenu/ContextMenu.tsx"; +import ShareCard from "../Shares/ShareCard.tsx"; +import { useParams } from "react-router-dom"; +import { ShareLinksInProfileLevel, User } from "../../../api/user.ts"; +import { loadUserInfo } from "../../../redux/thunks/session.ts"; +import { UserProfile } from "../../Common/User/UserPopover.tsx"; +import PageContainer from "../PageContainer.tsx"; + +const defaultPageSize = 50; + +const Profile = () => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + + const [nextPageToken, setNextPageToken] = useState(""); + const [shares, setShares] = useState([]); + const [loading, setLoading] = useState(false); + const [orderDirection, setOrderDirection] = useState("desc"); + const [user, setUser] = useState(); + + const { id } = useParams<{ id: string }>(); + + useEffect(() => { + if (!id) { + return; + } + dispatch(loadUserInfo(id)).then((u) => { + if (u) { + setUser(u); + } + }); + }, [id]); + + const loadNextPage = useCallback( + (originShares: Share[], token?: string, direction?: string) => () => { + setLoading(true); + dispatch( + getUserShares( + { + page_size: defaultPageSize, + order_direction: direction ?? orderDirection, + next_page_token: token, + }, + id ?? "", + ), + ) + .then((res) => { + setShares([...originShares, ...res.shares]); + if (res.pagination?.next_token) { + setNextPageToken(res.pagination.next_token); + } else { + setNextPageToken(undefined); + } + }) + .catch(() => { + setNextPageToken(undefined); + }) + .finally(() => { + setLoading(false); + }); + }, + [dispatch, orderDirection, setSelected], + ); + + const refresh = (direction?: string) => { + loadNextPage([], "", direction)(); + }; + + const onShareDeleted = useCallback( + (id: string) => { + setShares((shares) => shares.filter((share) => share.id !== id)); + }, + [setShares], + ); + + const onSelectChange = useCallback( + (e: SelectChangeEvent) => { + setOrderDirection(e.target.value as string); + refresh(e.target.value as string); + }, + [refresh, setOrderDirection], + ); + + return ( + + + + + theme.palette.mode == "light" ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.09)", + borderRadius: (theme) => `${theme.shape.borderRadius}px`, + mb: 4, + p: 2, + }} + > + {user && } + + + + + + + {t("application:share.createdAtDesc")} + + + + + {t("application:share.createdAtAsc")} + + + + + ) + } + skipChangingDocumentTitle + onRefresh={ + user && user.share_links_in_profile !== ShareLinksInProfileLevel.hide_share ? () => refresh() : undefined + } + loading={loading} + title={t("application:share.somebodyShare", { + name: user?.nickname ?? "-", + })} + /> + + + {user && + user.share_links_in_profile !== ShareLinksInProfileLevel.hide_share && + shares.map((share) => )} + {nextPageToken != undefined && + user && + user?.share_links_in_profile !== ShareLinksInProfileLevel.hide_share && ( + <> + {[...Array(4)].map((_, i) => ( + + ))} + + )} + {user && user.share_links_in_profile === ShareLinksInProfileLevel.hide_share && ( + <> + + + + + )} + + + {nextPageToken == undefined && shares.length == 0 && ( + + + + )} + + + ); +}; + +export default Profile; diff --git a/src/component/Pages/Setting/AvatarCropperDialog.tsx b/src/component/Pages/Setting/AvatarCropperDialog.tsx new file mode 100755 index 0000000..980727e --- /dev/null +++ b/src/component/Pages/Setting/AvatarCropperDialog.tsx @@ -0,0 +1,263 @@ +import { DialogContent } from "@mui/material"; +import DraggableDialog from "../../Dialogs/DraggableDialog.tsx"; +import { useTranslation } from "react-i18next"; +import { DependencyList, useEffect, useRef, useState } from "react"; +import { centerCrop, Crop, makeAspectCrop, PixelCrop, ReactCrop } from "react-image-crop"; +import "react-image-crop/dist/ReactCrop.css"; +import { useSnackbar } from "notistack"; +import { DefaultCloseAction } from "../../Common/Snackbar/snackbar.tsx"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import { sendUploadAvatar } from "../../../api/api.ts"; + +export function useDebounceEffect(fn: () => void, waitTime: number, deps?: DependencyList) { + useEffect(() => { + const t = setTimeout(() => { + // @ts-ignore + fn.apply(undefined, deps); + }, waitTime); + + return () => { + clearTimeout(t); + }; + }, deps); +} + +const TO_RADIANS = Math.PI / 180; + +export async function canvasPreview( + image: HTMLImageElement, + canvas: HTMLCanvasElement, + crop: PixelCrop, + scale = 1, + rotate = 0, +) { + const ctx = canvas.getContext("2d"); + + if (!ctx) { + throw new Error("No 2d context"); + } + + const scaleX = image.naturalWidth / image.width; + const scaleY = image.naturalHeight / image.height; + // devicePixelRatio slightly increases sharpness on retina devices + // at the expense of slightly slower render times and needing to + // size the image back down if you want to download/upload and be + // true to the images natural size. + const pixelRatio = window.devicePixelRatio; + // const pixelRatio = 1 + + canvas.width = Math.floor(crop.width * scaleX * pixelRatio); + canvas.height = Math.floor(crop.height * scaleY * pixelRatio); + + ctx.scale(pixelRatio, pixelRatio); + ctx.imageSmoothingQuality = "high"; + + const cropX = crop.x * scaleX; + const cropY = crop.y * scaleY; + + const rotateRads = rotate * TO_RADIANS; + const centerX = image.naturalWidth / 2; + const centerY = image.naturalHeight / 2; + + ctx.save(); + + // 5) Move the crop origin to the canvas origin (0,0) + ctx.translate(-cropX, -cropY); + // 4) Move the origin to the center of the original position + ctx.translate(centerX, centerY); + // 3) Rotate around the origin + ctx.rotate(rotateRads); + // 2) Scale the image + ctx.scale(scale, scale); + // 1) Move the center of the image to the origin (0,0) + ctx.translate(-centerX, -centerY); + ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight, 0, 0, image.naturalWidth, image.naturalHeight); + + ctx.restore(); +} + +export interface AvatarCropperDialogProps { + open?: boolean; + onClose: () => void; + file?: File; + onAvatarUpdated: () => void; +} + +function centerAspectCrop(mediaWidth: number, mediaHeight: number, aspect: number) { + return centerCrop( + makeAspectCrop( + { + unit: "px", + width: mediaWidth * 0.9, + }, + aspect, + mediaWidth, + mediaHeight, + ), + mediaWidth, + mediaHeight, + ); +} + +const AvatarCropperDialog = ({ open, onClose, onAvatarUpdated, file }: AvatarCropperDialogProps) => { + const { t } = useTranslation(); + const { enqueueSnackbar } = useSnackbar(); + const dispatch = useAppDispatch(); + const [src, setSrc] = useState(null); + const [crop, setCrop] = useState(undefined); + const [completedCrop, setCompletedCrop] = useState(); + const imageRef = useRef(null); + const previewCanvasRef = useRef(null); + const blobUrlRef = useRef(""); + const [loading, setLoading] = useState(false); + + useEffect(() => { + if (open) { + setCrop(undefined); + setSrc(null); + if (file) { + const reader = new FileReader(); + reader.addEventListener("load", () => setSrc(reader.result as string)); + reader.readAsDataURL(file); + } + } + }, [open]); + + const onImageLoad = (e: React.SyntheticEvent) => { + const { width, height } = e.currentTarget; + setCrop(centerAspectCrop(width, height, 1)); + }; + + const renderImage = async (): Promise => { + const image = imageRef.current; + const previewCanvas = previewCanvasRef.current; + if (!image || !previewCanvas || !completedCrop) { + throw new Error("Crop canvas does not exist"); + } + + // This will size relative to the uploaded image + // size. If you want to size according to what they + // are looking at on screen, remove scaleX + scaleY + const scaleX = image.naturalWidth / image.width; + const scaleY = image.naturalHeight / image.height; + + const offscreen = new OffscreenCanvas(completedCrop.width * scaleX, completedCrop.height * scaleY); + const ctx = offscreen.getContext("2d"); + if (!ctx) { + throw new Error("No 2d context"); + } + + ctx.drawImage( + previewCanvas, + 0, + 0, + previewCanvas.width, + previewCanvas.height, + 0, + 0, + offscreen.width, + offscreen.height, + ); + // You might want { type: "image/jpeg", quality: <0 to 1> } to + // reduce image size + const imgType = "image/png"; + const blob = await offscreen.convertToBlob({ + type: imgType, + }); + + return blob; + }; + + const onSubmit = () => { + setLoading(true); + renderImage() + .then((blob) => { + dispatch(sendUploadAvatar(blob, "image/png")) + .then(() => { + enqueueSnackbar({ + message: t("application:setting.avatarUpdated", {}), + variant: "success", + action: DefaultCloseAction, + }); + onAvatarUpdated(); + onClose(); + }) + .finally(() => { + setLoading(false); + }); + }) + .catch((e) => { + enqueueSnackbar({ + message: e.message, + variant: "error", + action: DefaultCloseAction, + }); + setLoading(false); + }); + }; + + useDebounceEffect( + async () => { + if (completedCrop?.width && completedCrop?.height && imageRef.current && previewCanvasRef.current) { + console.log(completedCrop); + // We use canvasPreview as it's much faster than imgPreview. + canvasPreview(imageRef.current, previewCanvasRef.current, completedCrop, 1, 0); + } + }, + 100, + [completedCrop], + ); + + return ( + + + {src && ( + setCrop(percentCrop)} + minWidth={100} + aspect={1} + onComplete={(p) => setCompletedCrop(p)} + minHeight={100} + > + Avatar

+ + )} + {!!completedCrop && ( +

+ + ); +}; + +export default AvatarCropperDialog; diff --git a/src/component/Pages/Setting/AvatarSetting.tsx b/src/component/Pages/Setting/AvatarSetting.tsx new file mode 100755 index 0000000..f037046 --- /dev/null +++ b/src/component/Pages/Setting/AvatarSetting.tsx @@ -0,0 +1,115 @@ +import { User } from "../../../api/user.ts"; +import UserAvatar from "../../Common/User/UserAvatar.tsx"; +import SettingForm from "./SettingForm.tsx"; +import { useTranslation } from "react-i18next"; +import Edit from "../../Icons/Edit.tsx"; +import { SecondaryButton } from "../../Common/StyledComponents.tsx"; +import { ListItemIcon, ListItemText, Menu } from "@mui/material"; +import { SquareMenuItem } from "../../FileManager/ContextMenu/ContextMenu.tsx"; +import React, { useState } from "react"; +import { bindMenu, bindTrigger, usePopupState } from "material-ui-popup-state/hooks"; +import Upload from "../../Icons/Upload.tsx"; +import Fingerprint from "../../Icons/Fingerprint.tsx"; +import AvatarCropperDialog from "./AvatarCropperDialog.tsx"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import { sendUploadAvatar } from "../../../api/api.ts"; +import { useSnackbar } from "notistack"; +import { DefaultCloseAction } from "../../Common/Snackbar/snackbar.tsx"; + +export interface AvatarSettingProps { + user: User; +} + +const AvatarSetting = ({ user }: AvatarSettingProps) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const { enqueueSnackbar } = useSnackbar(); + const popupState = usePopupState({ + popupId: "avatarEdit", + variant: "popover", + }); + const fileInput = React.createRef(); + const { onClose } = bindMenu(popupState); + const [imageCropperOpen, setImageCropperOpen] = useState(false); + const [avtarFile, setAvtarFile] = useState(undefined); + const [avatarGeneration, setAvatarGeneration] = useState(1); + + const onUploadClicked = () => { + onClose(); + fileInput.current?.click(); + }; + + const onImageChange = () => { + const file = fileInput.current?.files?.[0]; + if (!file) { + return; + } + + fileInput.current.value = ""; + setAvtarFile(file); + setImageCropperOpen(true); + }; + + const onAvatarUpdated = () => { + setAvatarGeneration((a) => a + 1); + }; + + const setGravatar = () => { + dispatch(sendUploadAvatar()).then(() => { + enqueueSnackbar({ + message: t("application:setting.avatarUpdated", {}), + variant: "success", + action: DefaultCloseAction, + }); + onAvatarUpdated(); + }); + onClose(); + }; + + return ( + + + } {...bindTrigger(popupState)}> + {t("fileManager.edit")} + + setImageCropperOpen(false)} + open={imageCropperOpen} + /> + + + + + + + {t(`setting.uploadImage`)} + + + + + + {t(`setting.useGravatar`)} + + + + ); +}; + +export default AvatarSetting; diff --git a/src/component/Pages/Setting/PreferenceSetting.tsx b/src/component/Pages/Setting/PreferenceSetting.tsx new file mode 100755 index 0000000..4954508 --- /dev/null +++ b/src/component/Pages/Setting/PreferenceSetting.tsx @@ -0,0 +1,348 @@ +import { LoadingButton } from "@mui/lab"; +import { + Box, + Checkbox, + Chip, + Collapse, + FormControl, + FormHelperText, + ListItemText, + Stack, + styled, + ToggleButton, + ToggleButtonGroup, + Typography, + useMediaQuery, + useTheme, +} from "@mui/material"; +import i18next from "i18next"; +import { useEffect, useMemo, useRef, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { sendUpdateUserSetting } from "../../../api/api.ts"; +import { UserSettings as UserSettingsType } from "../../../api/user.ts"; +import { languages } from "../../../i18n.ts"; +import { setPreferredTheme } from "../../../redux/globalStateSlice.ts"; +import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; +import { clearLocalCustomView } from "../../../redux/thunks/filemanager.ts"; +import { selectLanguage } from "../../../redux/thunks/settings.ts"; +import SessionManager, { UserSettings } from "../../../session"; +import { refreshTimeZone, timeZone } from "../../../util/datetime.ts"; +import { + DenseAutocomplete, + DenseFilledTextField, + DenseSelect, + SmallFormControlLabel, +} from "../../Common/StyledComponents.tsx"; +import { SquareMenuItem } from "../../FileManager/ContextMenu/ContextMenu.tsx"; +import { ColorCircle, SelectorBox } from "../../FileManager/FileInfo/ColorCircle/CircleColorSelector.tsx"; +import { SwitchPopover } from "../../Frame/NavBar/DarkThemeSwitcher.tsx"; +import RectangleLandscapeSync from "../../Icons/RectangleLandscapeSync.tsx"; +import RectangleLandscapeSyncOff from "../../Icons/RectangleLandscapeSyncOff.tsx"; +import SettingForm from "./SettingForm.tsx"; + +export interface PreferenceSettingProps { + setting: UserSettingsType; + setSetting: (setting: UserSettingsType) => void; +} + +declare namespace Intl { + type Key = "calendar" | "collation" | "currency" | "numberingSystem" | "timeZone" | "unit"; + + function supportedValuesOf(input: Key): string[]; +} + +interface ThemeOption { + [key: string]: any; +} + +const OutlinedSettingBox = styled(Box)(({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + padding: theme.spacing(1), + border: `1px solid ${theme.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)"}`, +})); + +const PreferenceSetting = ({ setting, setSetting }: PreferenceSettingProps) => { + const { t } = useTranslation(); + const theme = useTheme(); + const dispatch = useAppDispatch(); + const isMobile = useMediaQuery(theme.breakpoints.down("md")); + const { themes } = useAppSelector((s) => s.siteConfig.basic.config); + + const [timeZoneValue, setTimeZoneValue] = useState(timeZone); + const versionMaxRef = useRef(null); + const [loading, setLoading] = useState(false); + const preferredTheme = useAppSelector((state) => state.globalState.preferredTheme); + const defaultTheme = useAppSelector((state) => state.siteConfig.basic.config.default_theme); + const [versionRetentionEnabled, setVersionRetentionEnabled] = useState(setting.version_retention_enabled); + const [versionRetentionMax, setVersionRetentionMax] = useState(setting.version_retention_max); + const [versionRetentionExts, setVersionRetentionExts] = useState(setting.version_retention_ext); + const [showSaveButton, setShowSaveButton] = useState(false); + const [autoExpandTreeView, setAutoExpandTreeView] = useState( + SessionManager.getWithFallback(UserSettings.TreeViewAutoExpand), + ); + + const onRetentionCheckChange = (e: React.ChangeEvent) => { + setVersionRetentionEnabled(e.target.checked); + setShowSaveButton(true); + }; + + const onVersionRetentionMaxChange = (e: React.ChangeEvent) => { + setVersionRetentionMax(parseInt(e.target.value) ?? 0); + setShowSaveButton(true); + }; + + const newExtAdded = (_e: any, newValue: string[]) => { + // Remove start dots in each value if presented + setVersionRetentionExts(newValue.map((v) => v.replace(/^\./, ""))); + setShowSaveButton(true); + }; + + useEffect(() => { + setVersionRetentionEnabled(setting.version_retention_enabled); + setVersionRetentionMax(setting.version_retention_max); + setVersionRetentionExts(setting.version_retention_ext); + }, [setting]); + + const selectTimeZone = (value: string) => { + setTimeZoneValue(value); + SessionManager.set(UserSettings.TimeZone, value); + refreshTimeZone(); + }; + + const themeOptions: ThemeOption = useMemo(() => { + if (themes) { + return JSON.parse(themes); + } + + return {}; + }, [themes]); + + const applyTheme = (color: string) => { + dispatch(setPreferredTheme(color)); + dispatch( + sendUpdateUserSetting({ + preferred_theme: color, + }), + ); + }; + + const saveVersionRetention = () => { + setLoading(true); + dispatch( + sendUpdateUserSetting({ + version_retention_enabled: versionRetentionEnabled, + version_retention_max: versionRetentionMax, + version_retention_ext: versionRetentionExts, + }), + ) + .then(() => { + setShowSaveButton(false); + setSetting({ + ...setting, + version_retention_enabled: versionRetentionEnabled, + version_retention_max: versionRetentionMax, + version_retention_ext: versionRetentionExts, + }); + }) + .finally(() => { + setLoading(false); + }); + }; + + const onDisableViewSyncChange = (e: React.MouseEvent, enabled: boolean) => { + setSetting({ ...setting, disable_view_sync: !enabled }); + setLoading(true); + dispatch( + sendUpdateUserSetting({ + disable_view_sync: !enabled, + }), + ) + .then(() => { + const user = SessionManager.currentLoginOrNull(); + if (user?.user) { + SessionManager.updateUserIfExist({ + ...user?.user, + disable_view_sync: !enabled, + }); + } + clearLocalCustomView(); + setLoading(false); + }) + .finally(() => { + setLoading(false); + }); + }; + + const onAutoExpandTreeViewChange = (e: React.ChangeEvent) => { + setAutoExpandTreeView(e.target.checked); + SessionManager.set(UserSettings.TreeViewAutoExpand, e.target.checked); + }; + + return ( + + + + dispatch(selectLanguage(e.target.value as string))}> + {languages.map((l) => ( + + + {l.displayName} + + + ))} + + {t("setting.languageDes")} + + + + + selectTimeZone(e.target.value as string)}> + {Intl.supportedValuesOf("timeZone").map((v) => ( + + + {v} + + + ))} + + {t("setting.timezoneDes")} + + + + + + + + {Object.keys(themeOptions).map((color, index) => ( + applyTheme(color)} + selected={(preferredTheme && preferredTheme == color) || (!preferredTheme && defaultTheme == color)} + /> + ))} + + + + + + } + label={t("application:setting.enableVersionRetention")} + /> + + {t("application:setting.enableVersionRetentionDes")} + + + + + + + value.map((option: string, index: number) => { + const { key, ...tagProps } = getTagProps({ index }); + return ; + }) + } + renderInput={(params) => ( + + )} + /> + + + + + + + + {t("fileManager.save")} + + + + + + + + + + {t("setting.syncViewOn")} + + + + {t("setting.syncViewOff")} + + + {t("setting.syncViewDes")} + + + } + label={t("application:setting.autoExpandTreeView")} + /> + {t("setting.autoExpandTreeViewDes")} + + + ); +}; + +export default PreferenceSetting; diff --git a/src/component/Pages/Setting/ProfileSetting.tsx b/src/component/Pages/Setting/ProfileSetting.tsx new file mode 100755 index 0000000..62d646f --- /dev/null +++ b/src/component/Pages/Setting/ProfileSetting.tsx @@ -0,0 +1,165 @@ +import { LoadingButton } from "@mui/lab"; +import { Collapse, Grid2, Stack, Typography, useMediaQuery, useTheme, styled } from "@mui/material"; +import { bindPopover, bindTrigger, usePopupState } from "material-ui-popup-state/hooks"; +import { useRef, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { sendUpdateUserSetting } from "../../../api/api.ts"; +import { UserSettings, ShareLinksInProfileLevel } from "../../../api/user.ts"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import SessionManager from "../../../session"; +import { DefaultButton, DenseFilledTextField } from "../../Common/StyledComponents.tsx"; +import TimeBadge from "../../Common/TimeBadge.tsx"; +import CaretDown from "../../Icons/CaretDown.tsx"; +import AvatarSetting from "./AvatarSetting.tsx"; +import ProfileSettingPopover, { useProfileSettingSummary } from "./ProfileSettingPopover.tsx"; +import SettingForm from "./SettingForm.tsx"; + +export interface ProfileSettingProps { + setting: UserSettings; + setSetting: (setting: UserSettings) => void; +} + +const ProfileDropButton = styled(DefaultButton)(({ theme }) => ({ + color: theme.palette.text.secondary, + minWidth: 0, + minHeight: 0, + fontSize: theme.typography.body2.fontSize, + fontWeight: theme.typography.body2.fontWeight, + borderRadius: "4px", + padding: "0px 4px", + position: "relative", + left: "-4px", +})); + +const ProfileSetting = ({ setting, setSetting }: ProfileSettingProps) => { + const { t } = useTranslation(); + const theme = useTheme(); + const dispatch = useAppDispatch(); + const isMobile = useMediaQuery(theme.breakpoints.down("md")); + const nickRef = useRef(null); + + const user = SessionManager.currentLoginOrNull(); + const [nick, setNick] = useState(user?.user.nickname); + const [nickLoading, setNickLoading] = useState(false); + const [profileSettingLoading, setProfileSettingLoading] = useState(false); + + const profileSettingPopup = usePopupState({ + variant: "popover", + popupId: "profileSetting", + }); + + const profileSettingSummary = useProfileSettingSummary(setting.share_links_in_profile); + + const onClick = () => { + // Validate input length + if (nickRef.current && nickRef.current.checkValidity()) { + setNickLoading(true); + dispatch(sendUpdateUserSetting({ nick })) + .then(() => { + if (user?.user) { + SessionManager.updateUserIfExist({ + ...user?.user, + nickname: nick ?? "", + }); + } + }) + .finally(() => { + setNickLoading(false); + }); + } else { + // Input is invalid, show validation errors + nickRef.current?.reportValidity(); + } + }; + + const onProfileSettingChange = (value: ShareLinksInProfileLevel) => { + setProfileSettingLoading(true); + dispatch(sendUpdateUserSetting({ share_links_in_profile: value })) + .then(() => { + setSetting({ + ...setting, + share_links_in_profile: value, + }); + profileSettingPopup.close(); + }) + .finally(() => { + setProfileSettingLoading(false); + }); + }; + + return ( + + + + {user && } + + + + + + + + setNick(e.target.value)} + value={nick} + required + inputProps={{ maxLength: 255 }} + helperText={t("setting.nickNameDes")} + inputRef={nickRef} + /> + + + {t("fileManager.save")} + + + + + + + {user?.user.id} + + + + + + + + + + + + + {user?.user.group?.name} + + + + + } + disabled={profileSettingLoading} + > + {profileSettingSummary} + + + + + + + + + ); +}; + +export default ProfileSetting; diff --git a/src/component/Pages/Setting/ProfileSettingPopover.tsx b/src/component/Pages/Setting/ProfileSettingPopover.tsx new file mode 100755 index 0000000..7f31542 --- /dev/null +++ b/src/component/Pages/Setting/ProfileSettingPopover.tsx @@ -0,0 +1,127 @@ +import { + Divider, + List, + ListItem, + ListItemButton, + ListItemIcon, + ListItemText, + Popover, + PopoverProps, + SvgIconProps, +} from "@mui/material"; +import { useMemo } from "react"; +import { useTranslation } from "react-i18next"; +import { ShareLinksInProfileLevel } from "../../../api/user.ts"; +import Eye from "../../Icons/Eye.tsx"; +import EyeOff from "../../Icons/EyeOff.tsx"; +import Globe from "../../Icons/Globe.tsx"; + +export interface ProfileSettingPopoverProps extends PopoverProps { + currentValue: ShareLinksInProfileLevel; + onValueChange?: (value: ShareLinksInProfileLevel) => void; + readOnly?: boolean; +} + +const profileSettingOptions: { + value: ShareLinksInProfileLevel; + label: string; + description: string; + icon?: ((props: SvgIconProps) => JSX.Element) | typeof Eye; +}[] = [ + { + value: ShareLinksInProfileLevel.public_share_only, + label: "application:setting.publicShareOnly", + description: "application:setting.publicShareOnlyDes", + icon: Eye, + }, + { + value: ShareLinksInProfileLevel.all_share, + label: "application:setting.allShare", + description: "application:setting.allShareDes", + icon: Globe, + }, + { + value: ShareLinksInProfileLevel.hide_share, + label: "application:setting.hideShare", + description: "application:setting.hideShareDes", + icon: EyeOff, + }, +]; + +export const useProfileSettingSummary = (value: ShareLinksInProfileLevel) => { + const { t } = useTranslation(); + + const summary = useMemo(() => { + const option = profileSettingOptions.find((opt) => opt.value === (value ?? "")); + return option ? t(option.label) : t("application:setting.publicShareOnly"); + }, [value, t]); + + return summary; +}; + +const ProfileSettingPopover = ({ currentValue, onValueChange, readOnly, ...rest }: ProfileSettingPopoverProps) => { + const { t } = useTranslation(); + + const handleChange = (value: ShareLinksInProfileLevel) => () => { + if (onValueChange && !readOnly) { + onValueChange(value); + } + }; + + return ( + + + {profileSettingOptions.map((option, index) => ( + <> + + + {option.icon && ( + + (currentValue === option.value ? theme.palette.primary.main : "inherit"), + }} + /> + + )} + + + + {index < profileSettingOptions.length - 1 && } + + ))} + + + + ); +}; + +export default ProfileSettingPopover; diff --git a/src/component/Pages/Setting/Security/Disable2FADialog.tsx b/src/component/Pages/Setting/Security/Disable2FADialog.tsx new file mode 100755 index 0000000..cb5d8d4 --- /dev/null +++ b/src/component/Pages/Setting/Security/Disable2FADialog.tsx @@ -0,0 +1,123 @@ +import DraggableDialog from "../../../Dialogs/DraggableDialog.tsx"; +import { useTranslation } from "react-i18next"; +import { useSnackbar } from "notistack"; +import { useAppDispatch } from "../../../../redux/hooks.ts"; +import React, { useEffect, useState } from "react"; +import { Box, DialogContent, FormControl, Stack, styled, Typography } from "@mui/material"; +import { CSSTransition, SwitchTransition } from "react-transition-group"; +import AutoHeight from "../../../Common/AutoHeight.tsx"; +import FacebookCircularProgress from "../../../Common/CircularProgress.tsx"; +import { sendUpdateUserSetting } from "../../../../api/api.ts"; +import { MuiOtpInput } from "mui-one-time-password-input"; + +export interface Disable2FADialogProps { + open?: boolean; + onClose: () => void; + on2FADisabled: () => void; +} + +const MuiOtpInputStyled = styled(MuiOtpInput)` + display: flex; + gap: 8px; + max-width: 650px; + margin-inline: auto; +`; + +const Disable2FADialog = ({ open, onClose, on2FADisabled }: Disable2FADialogProps) => { + const { t } = useTranslation(); + const { enqueueSnackbar } = useSnackbar(); + const dispatch = useAppDispatch(); + + const [loading, setLoading] = useState(false); + const [code, setCode] = useState(""); + + useEffect(() => { + if (open) { + setLoading(false); + setCode(""); + } + }, [open]); + + useEffect(() => { + if (code.length === 6) { + setLoading(true); + dispatch( + sendUpdateUserSetting({ + two_fa_enabled: false, + two_fa_code: code, + }), + ) + .then(() => { + enqueueSnackbar({ + message: t("setting.settingSaved"), + variant: "success", + }); + on2FADisabled(); + onClose(); + }) + .catch(() => { + setLoading(false); + setCode(""); + }); + } + }, [code]); + + return ( + + + + + node.addEventListener("transitionend", done, false)} + classNames="fade" + key={`${loading}`} + > + + {loading && ( + + + + )} + {!loading && ( + + {t("setting.inputCurrent2FACode")} + + + + + )} + + + + + + + ); +}; + +export default Disable2FADialog; diff --git a/src/component/Pages/Setting/Security/Enable2FADialog.tsx b/src/component/Pages/Setting/Security/Enable2FADialog.tsx new file mode 100755 index 0000000..f42192a --- /dev/null +++ b/src/component/Pages/Setting/Security/Enable2FADialog.tsx @@ -0,0 +1,156 @@ +import DraggableDialog from "../../../Dialogs/DraggableDialog.tsx"; +import { useTranslation } from "react-i18next"; +import { useSnackbar } from "notistack"; +import { useAppDispatch, useAppSelector } from "../../../../redux/hooks.ts"; +import React, { useEffect, useState } from "react"; +import { Box, DialogContent, FormControl, Stack, styled, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { CSSTransition, SwitchTransition } from "react-transition-group"; +import AutoHeight from "../../../Common/AutoHeight.tsx"; +import FacebookCircularProgress from "../../../Common/CircularProgress.tsx"; +import { get2FAInitSecret, sendUpdateUserSetting } from "../../../../api/api.ts"; +import { QRCodeSVG } from "qrcode.react"; +import SessionManager from "../../../../session"; +import { MuiOtpInput } from "mui-one-time-password-input"; + +export interface Enable2FADialogProps { + open?: boolean; + onClose: () => void; + on2FAEnabled: () => void; +} + +const MuiOtpInputStyled = styled(MuiOtpInput)` + display: flex; + gap: 8px; + max-width: 650px; + margin-inline: auto; +`; + +const Enable2FADialog = ({ open, onClose, on2FAEnabled }: Enable2FADialogProps) => { + const { t } = useTranslation(); + const { enqueueSnackbar } = useSnackbar(); + const dispatch = useAppDispatch(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down("md")); + const siteTitle = useAppSelector((state) => state.siteConfig.basic.config.title); + const user = SessionManager.currentLoginOrNull(); + + const [loading, setLoading] = useState(false); + const [code, setCode] = useState(""); + const [secret, setSecret] = useState(""); + + useEffect(() => { + if (open) { + setLoading(true); + setCode(""); + dispatch(get2FAInitSecret()) + .then((res) => { + setSecret(res); + }) + .finally(() => { + setLoading(false); + }); + } + }, [open]); + + useEffect(() => { + if (code.length === 6) { + setLoading(true); + dispatch( + sendUpdateUserSetting({ + two_fa_enabled: true, + two_fa_code: code, + }), + ) + .then(() => { + enqueueSnackbar({ + message: t("setting.settingSaved"), + variant: "success", + }); + on2FAEnabled(); + onClose(); + }) + .catch(() => { + setLoading(false); + setCode(""); + }); + } + }, [code]); + + return ( + + + + + node.addEventListener("transitionend", done, false)} + classNames="fade" + key={`${loading}`} + > + + {loading && ( + + + + )} + {!loading && ( + + + + + + + {t("setting.2faDescription")} + + + {t("setting.inputCurrent2FACode")} + + + + + + + )} + + + + + + + ); +}; + +export default Enable2FADialog; diff --git a/src/component/Pages/Setting/Security/PasskeyList.tsx b/src/component/Pages/Setting/Security/PasskeyList.tsx new file mode 100755 index 0000000..470e944 --- /dev/null +++ b/src/component/Pages/Setting/Security/PasskeyList.tsx @@ -0,0 +1,196 @@ +import { Box, IconButton, List, Typography, useMediaQuery, useTheme } from "@mui/material"; +import dayjs from "dayjs"; +import { useSnackbar } from "notistack"; +import { useState } from "react"; +import { Trans, useTranslation } from "react-i18next"; +import { + sendDeletePasskey, + sendFinishPasskeyRegistration, + sendPreparePasskeyRegistration, +} from "../../../../api/api.ts"; +import { Passkey, UserSettings } from "../../../../api/user.ts"; +import { useAppDispatch } from "../../../../redux/hooks.ts"; +import { confirmOperation } from "../../../../redux/thunks/dialog.ts"; +import { bufferEncode, urlBase64BufferDecode } from "../../../../util"; +import { DefaultCloseAction } from "../../../Common/Snackbar/snackbar.tsx"; +import { NoWrapTypography, SecondaryLoadingButton } from "../../../Common/StyledComponents.tsx"; +import TimeBadge from "../../../Common/TimeBadge.tsx"; +import Dismiss from "../../../Icons/Dismiss.tsx"; +import Fingerprint from "../../../Icons/Fingerprint.tsx"; +import ShieldAdd from "../../../Icons/ShieldAdd.tsx"; +import SettingListItem from "../SettingListItem.tsx"; + +export interface PasskeyProps { + setting: UserSettings; + onPasskeyAdded: (passkey: Passkey) => void; + onPasskeyDeleted: (passkeyID: string) => void; +} + +const PasskeyList = (props: PasskeyProps) => { + const { t } = useTranslation(); + const { enqueueSnackbar } = useSnackbar(); + const dispatch = useAppDispatch(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down("md")); + + const [loading, setLoading] = useState(false); + const [deleteLoading, setDeleteLoading] = useState(false); + const addPasskey = async () => { + if (!navigator.credentials || !window.PublicKeyCredential) { + enqueueSnackbar({ + message: t("setting.browserNotSupported"), + variant: "warning", + action: DefaultCloseAction, + }); + + return; + } + + setLoading(true); + try { + const opts = await dispatch(sendPreparePasskeyRegistration()); + const credential = await navigator.credentials.create({ + publicKey: { + rp: opts.publicKey.rp, + user: { + id: urlBase64BufferDecode(opts.publicKey.user.id), + name: opts.publicKey.user.name, + displayName: opts.publicKey.user.displayName, + }, + + // url decode base64 + challenge: urlBase64BufferDecode(opts.publicKey.challenge), + pubKeyCredParams: opts.publicKey.pubKeyCredParams, + timeout: opts.publicKey.timeout, + excludeCredentials: opts.publicKey.excludeCredentials?.map((c) => ({ + id: urlBase64BufferDecode(c.id), + type: c.type, + })), + authenticatorSelection: opts.publicKey.authenticatorSelection, + }, + }); + if (credential) { + const c = credential as PublicKeyCredential; + const newPasskey = await dispatch( + sendFinishPasskeyRegistration({ + response: JSON.stringify({ + id: credential.id, + type: credential.type, + rawId: bufferEncode(c.rawId), + response: { + // @ts-ignore + attestationObject: bufferEncode(c.response.attestationObject), + clientDataJSON: bufferEncode(c.response.clientDataJSON), + }, + }), + name: t("setting.passkeyName"), + ua: navigator.userAgent, + }), + ); + + props.onPasskeyAdded(newPasskey); + } + } catch (e) { + console.error(e); + } finally { + setLoading(false); + } + }; + + const deletePasskey = (passkeyID: string) => { + dispatch(confirmOperation(t("setting.removedAuthenticatorConfirm"))).then(() => { + setDeleteLoading(true); + dispatch(sendDeletePasskey(passkeyID)) + .then(() => { + props.onPasskeyDeleted(passkeyID); + }) + .finally(() => { + setDeleteLoading(false); + }); + }); + }; + return ( + + {!props.setting.passkeys?.length && ( + `${theme.shape.borderRadius}px`, + border: (theme) => + `1px solid ${theme.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)"}`, + textAlign: "center", + p: 1, + py: 2, + }} + > + theme.palette.text.secondary, + }} + /> + + {t("setting.noAuthenticator")} + + + )} + + {props.setting.passkeys?.map((passkey) => ( + deletePasskey(passkey.id)} disabled={deleteLoading}> + + + } + settingTitle={{passkey.name}} + settingDescription={ + + ]} + /> + + passkey.used_at && dayjs().diff(dayjs(passkey.used_at), "day") < 7 + ? theme.palette.success.main + : theme.palette.text.secondary, + }} + > + {passkey.used_at ? ( + ]} + /> + ) : ( + t("setting.neverUsed") + )} + + + } + /> + ))} + + } + > + {t("setting.addNewAuthenticator")} + + + ); +}; + +export default PasskeyList; diff --git a/src/component/Pages/Setting/Security/SecuritySetting.tsx b/src/component/Pages/Setting/Security/SecuritySetting.tsx new file mode 100755 index 0000000..8a54572 --- /dev/null +++ b/src/component/Pages/Setting/Security/SecuritySetting.tsx @@ -0,0 +1,212 @@ +import { LoadingButton } from "@mui/lab"; +import { Box, Collapse, Stack, useMediaQuery, useTheme } from "@mui/material"; +import { useSnackbar } from "notistack"; +import React, { useState } from "react"; +import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router-dom"; +import { sendUpdateUserSetting } from "../../../../api/api.ts"; +import { Passkey, UserSettings } from "../../../../api/user.ts"; +import { useAppDispatch, useAppSelector } from "../../../../redux/hooks.ts"; +import SessionManager from "../../../../session"; +import { DefaultCloseAction } from "../../../Common/Snackbar/snackbar.tsx"; +import { DenseFilledTextField, SecondaryButton, SquareChip } from "../../../Common/StyledComponents.tsx"; +import Edit from "../../../Icons/Edit.tsx"; +import Open from "../../../Icons/Open.tsx"; +import { ProfileSettingProps } from "../ProfileSetting.tsx"; +import SettingForm from "../SettingForm.tsx"; +import Disable2FADialog from "./Disable2FADialog.tsx"; +import Enable2FADialog from "./Enable2FADialog.tsx"; +import PasskeyList from "./PasskeyList.tsx"; + +export interface SecuritySettingProps { + setting: UserSettings; + setSetting: (setting: UserSettings) => void; +} + +const SecuritySetting = ({ setting, setSetting }: ProfileSettingProps) => { + const { t } = useTranslation(); + const theme = useTheme(); + const dispatch = useAppDispatch(); + const isMobile = useMediaQuery(theme.breakpoints.down("md")); + const { enqueueSnackbar } = useSnackbar(); + const navigate = useNavigate(); + + const authEnabled = useAppSelector((s) => s.siteConfig.login.config.authn); + + const resetPwdFormRef = React.createRef(); + const [showResetPassword, setShowResetPassword] = useState(false); + const [resetLoading, setResetLoading] = useState(false); + const [currentPassword, setCurrentPassword] = useState(""); + const [newPassword, setNewPassword] = useState(""); + const [repeatPassword, setRepeatPassword] = useState(""); + const [enable2FAOpen, setEnable2FAOpen] = useState(false); + const [disable2FAOpen, setDisable2FAOpen] = useState(false); + + const submitResetPassword = () => { + if (!resetPwdFormRef.current) { + return; + } + if (!resetPwdFormRef.current.checkValidity()) { + resetPwdFormRef.current.reportValidity(); + return; + } + + if (newPassword !== repeatPassword) { + enqueueSnackbar({ + variant: "warning", + message: t("login.passwordNotMatch"), + action: DefaultCloseAction, + }); + return; + } + + setResetLoading(true); + dispatch( + sendUpdateUserSetting({ + current_password: currentPassword, + new_password: newPassword, + }), + ) + .then(() => { + SessionManager.signOutCurrent(); + navigate("/session"); + setShowResetPassword(false); + enqueueSnackbar({ + variant: "success", + message: t("login.passwordReset"), + action: DefaultCloseAction, + }); + }) + .finally(() => { + setResetLoading(false); + }); + }; + + const on2FAChange = (enabled: boolean) => () => { + setSetting({ + ...setting, + two_fa_enabled: enabled, + }); + }; + + const onPasskeyAdded = (passkey: Passkey) => { + setSetting({ + ...setting, + passkeys: setting.passkeys ? [...setting.passkeys, passkey] : [passkey], + }); + }; + + const onPasskeyDeleted = (passkeyID: string) => { + setSetting({ + ...setting, + passkeys: setting.passkeys?.filter((p) => p.id !== passkeyID), + }); + }; + + return ( + + + + setShowResetPassword(true)} + variant={"contained"} + startIcon={} + > + {t("login.resetPassword")} + + + +

+ + setCurrentPassword(e.target.value)} + inputProps={{ + type: "password", + minLength: 4, + maxLength: 64, + }} + /> + setNewPassword(e.target.value)} + inputProps={{ + type: "password", + minLength: 6, + maxLength: 128, + }} + /> + setRepeatPassword(e.target.value)} + inputProps={{ + type: "password", + minLength: 6, + maxLength: 128, + }} + /> + + + {t("fileManager.save")} + + + +

+ + + + {t("setting.2fa")} + {setting.two_fa_enabled && ( + theme.typography.caption.fontSize, + }} + color={"success"} + size={"small"} + variant={"outlined"} + label={t("setting.enabled")} + /> + )} + + } + lgWidth={5} + > + (setting.two_fa_enabled ? setDisable2FAOpen(true) : setEnable2FAOpen(true))} + variant={"contained"} + startIcon={} + > + {t(`setting.${setting.two_fa_enabled ? "disable" : "enable"}2FA`)} + + + {authEnabled && ( + + + + )} + setEnable2FAOpen(false)} on2FAEnabled={on2FAChange(true)} /> + setDisable2FAOpen(false)} + on2FADisabled={on2FAChange(false)} + /> + + ); +}; + +export default SecuritySetting; diff --git a/src/component/Pages/Setting/Setting.tsx b/src/component/Pages/Setting/Setting.tsx new file mode 100755 index 0000000..d387073 --- /dev/null +++ b/src/component/Pages/Setting/Setting.tsx @@ -0,0 +1,120 @@ +import { PersonOutline } from "@mui/icons-material"; +import { Box, Container } from "@mui/material"; +import { useQueryState } from "nuqs"; +import { useEffect, useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { CSSTransition, SwitchTransition } from "react-transition-group"; +import { getUserSettings } from "../../../api/api.ts"; +import { UserSettings } from "../../../api/user.ts"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import { loadSiteConfig } from "../../../redux/thunks/site.ts"; +import FacebookCircularProgress from "../../Common/CircularProgress.tsx"; +import ResponsiveTabs, { Tab } from "../../Common/ResponsiveTabs.tsx"; +import EditSetting from "../../Icons/EditSetting.tsx"; +import LockClosedOutlined from "../../Icons/LockClosedOutlined.tsx"; +import PageContainer from "../PageContainer.tsx"; +import PageHeader, { PageTabQuery } from "../PageHeader.tsx"; +import PreferenceSetting from "./PreferenceSetting.tsx"; +import ProfileSetting from "./ProfileSetting.tsx"; +import SecuritySetting from "./Security/SecuritySetting.tsx"; + +export enum SettingPageTab { + Profile = "profile", + Preference = "preference", + Security = "security", +} + +const Setting = () => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const [tab, setTab] = useQueryState(PageTabQuery); + const [loading, setLoading] = useState(true); + const [setting, setSetting] = useState(undefined); + + useEffect(() => { + setLoading(true); + dispatch(loadSiteConfig("login")); + dispatch(getUserSettings()) + .then((res) => { + setSetting(res); + }) + .finally(() => { + setLoading(false); + }); + }, []); + + const tabs: Tab[] = useMemo(() => { + const res = []; + res.push( + ...[ + { + label: t("application:setting.profile"), + value: SettingPageTab.Profile, + icon: , + }, + { + label: t("application:setting.preference"), + value: SettingPageTab.Preference, + icon: , + }, + { + label: t("application:setting.security"), + value: SettingPageTab.Security, + icon: , + }, + ], + ); + return res; + }, [t]); + + return ( + + + + setTab(newValue)} + tabs={tabs} + /> + + node.addEventListener("transitionend", done, false)} + classNames="fade" + key={`${loading}`} + > + + {loading && ( + + + + )} + {!loading && setting && ( + + {(!tab || tab == SettingPageTab.Profile) && ( + + )} + {tab == SettingPageTab.Preference && } + {tab == SettingPageTab.Security && } + + )} + + + + + + ); +}; + +export default Setting; diff --git a/src/component/Pages/Setting/SettingForm.tsx b/src/component/Pages/Setting/SettingForm.tsx new file mode 100755 index 0000000..29106fe --- /dev/null +++ b/src/component/Pages/Setting/SettingForm.tsx @@ -0,0 +1,94 @@ +import { Chip, Grid2, Typography, styled } from "@mui/material"; +import { useCallback, useEffect, useState } from "react"; +import ProDialog from "../../Admin/Common/ProDialog"; + +export const ProChip = styled(Chip)(({ theme }) => ({ + marginLeft: 8, + height: "20px", + fontSize: "12px", + background: `linear-gradient(45deg, ${theme.palette.primary.main} 30%, ${theme.palette.primary.light} 90%)`, + color: theme.palette.primary.contrastText, +})); + +export interface SettingFormProps { + title?: React.ReactNode; + children: React.ReactNode; + lgWidth?: number; + secondary?: React.ReactNode; + spacing?: number; + anchorId?: string; + noContainer?: boolean; + pro?: boolean; +} + +const SettingForm = ({ + title, + children, + lgWidth = 8, + secondary, + spacing, + noContainer, + anchorId, + pro, +}: SettingFormProps) => { + const [proOpen, setProOpen] = useState(false); + useEffect(() => { + if (anchorId && window.location.hash === `#${anchorId}`) { + const anchor = document.getElementById(`anchor-${anchorId}`); + if (anchor) { + anchor.scrollIntoView({ behavior: "smooth" }); + // clear hash, not query + window.history.replaceState({}, "", window.location.pathname + window.location.search); + } + } + }, [anchorId]); + + const handleProClick = useCallback( + (e: React.MouseEvent) => { + if (pro) { + e.stopPropagation(); + setProOpen(true); + } + }, + [pro], + ); + + const inner = ( + <> + + {title && ( + + {title} + {pro && } + + )} +

{children}

+ + {secondary && secondary} + {pro && setProOpen(false)} />} + + ); + if (noContainer) { + return inner; + } + return ( + + {inner} + + ); +}; + +export default SettingForm; diff --git a/src/component/Pages/Setting/SettingListItem.tsx b/src/component/Pages/Setting/SettingListItem.tsx new file mode 100755 index 0000000..7326b79 --- /dev/null +++ b/src/component/Pages/Setting/SettingListItem.tsx @@ -0,0 +1,62 @@ +import { + Avatar, + ListItem, + ListItemAvatar, + ListItemProps, + ListItemSecondaryAction, + styled, + SvgIconProps, +} from "@mui/material"; +import { StyledListItemText } from "../../Common/StyledComponents.tsx"; +import * as React from "react"; + +const StyledListItem = styled(ListItem)(({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + border: `1px solid ${theme.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)"}`, + marginTop: theme.spacing(1), + paddingBottom: theme.spacing(0.5), + paddingTop: theme.spacing(0.5), +})); + +export interface SettingListItemProps extends ListItemProps { + icon: (props: SvgIconProps) => JSX.Element; + iconColor?: string; + settingTitle?: React.ReactNode; + settingDescription?: React.ReactNode; + settingAction?: React.ReactNode; +} + +const SettingListItem = ({ + icon, + iconColor, + settingTitle, + settingDescription, + settingAction, + ...rest +}: SettingListItemProps) => { + const Icon = icon; + return ( + + + + + + + + {settingAction && {settingAction}} + + ); +}; + +export default SettingListItem; diff --git a/src/component/Pages/Setting/StorageSetting.tsx b/src/component/Pages/Setting/StorageSetting.tsx new file mode 100755 index 0000000..505a4fd --- /dev/null +++ b/src/component/Pages/Setting/StorageSetting.tsx @@ -0,0 +1,128 @@ +import { Box, Stack, styled, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router-dom"; +import { Capacity, UserSettings } from "../../../api/user.ts"; +import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; +import { updateUserCapacity } from "../../../redux/thunks/filemanager.ts"; +import { loadSiteConfig } from "../../../redux/thunks/site.ts"; +import { sizeToString } from "../../../util"; +import SettingForm from "./SettingForm.tsx"; + +export const StorageBar = styled(Box)(({ theme }) => ({ + height: "10px", + borderRadius: `${theme.shape.borderRadius}px`, + width: "100%", + backgroundColor: theme.palette.grey[theme.palette.mode === "light" ? 200 : 800], + overflow: "hidden", +})); + +export const StoragePart = styled(Box)(() => ({ + transition: "width .6s ease", + height: "100%", + fontSize: "12px", + lineHeight: "20px", + float: "left", +})); + +export const StorageBlock = styled(Box)(() => ({ + display: "inline-block", + width: "10px", + height: "10px", + borderRadius: "50%", + marginRight: "5px", +})); + +export interface StorageSettingProps { + setting: UserSettings; +} + +export const CapacityBar = ({ capacity, forceRow }: { capacity?: Capacity; forceRow?: boolean }) => { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down("md")) || forceRow; + const { t } = useTranslation(); + const [storageBreakdown, setStorageBreakdown] = useState({ + used: 0, + base: 0, + }); + useEffect(() => { + let summary = { + used: 0, + base: 0, + }; + + if (!capacity) { + return; + } + + summary.used = capacity.used / capacity.total; + summary.base = 1; + setStorageBreakdown(summary); + }, [capacity]); + + return ( + <> + + theme.palette.warning.light, + width: `${storageBreakdown.used * 100}%`, + }} + /> + + + + theme.palette.warning.light, + }} + /> + {t("vas.used", { + size: sizeToString(capacity?.used ?? 0), + })} + + + theme.palette.grey[theme.palette.mode === "light" ? 200 : 800], + }} + /> + {t("vas.total", { + size: sizeToString(capacity?.total ?? 0), + })} + + + + ); +}; + +const StorageSetting = ({ setting }: StorageSettingProps) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const theme = useTheme(); + const navigate = useNavigate(); + const isMobile = useMediaQuery(theme.breakpoints.down("md")); + const capacity = useAppSelector((state) => state.fileManager[0].capacity); + + const [storageBreakdown, setStorageBreakdown] = useState({ + used: 0, + base: 0, + }); + + useEffect(() => { + dispatch(updateUserCapacity(0)); + dispatch(loadSiteConfig("vas")); + }, []); + + return ( + + + + + + + + ); +}; + +export default StorageSetting; diff --git a/src/component/Pages/Shares/ShareCard.tsx b/src/component/Pages/Shares/ShareCard.tsx new file mode 100755 index 0000000..194d0ae --- /dev/null +++ b/src/component/Pages/Shares/ShareCard.tsx @@ -0,0 +1,265 @@ +import { + Box, + Chip, + Grid, + ListItemIcon, + ListItemText, + Menu, + MenuProps, + Skeleton, + Tooltip, + Typography, + useTheme, +} from "@mui/material"; +import { bindMenu, bindTrigger, usePopupState } from "material-ui-popup-state/hooks"; +import { useSnackbar } from "notistack"; +import { useCallback, useEffect } from "react"; +import { useTranslation } from "react-i18next"; +import { useInView } from "react-intersection-observer"; +import { useNavigate } from "react-router-dom"; +import { sendDeleteShare } from "../../../api/api.ts"; +import { FileType, Share } from "../../../api/explorer.ts"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import { confirmOperation } from "../../../redux/thunks/dialog.ts"; +import { openShareEditByID } from "../../../redux/thunks/share.ts"; +import SessionManager from "../../../session"; +import { copyToClipboard } from "../../../util/index.ts"; +import { DefaultCloseAction } from "../../Common/Snackbar/snackbar.tsx"; +import { NoWrapBox, NoWrapTypography } from "../../Common/StyledComponents.tsx"; +import TimeBadge from "../../Common/TimeBadge.tsx"; +import { DenseDivider, SquareMenuItem } from "../../FileManager/ContextMenu/ContextMenu.tsx"; +import FileTypeIcon from "../../FileManager/Explorer/FileTypeIcon.tsx"; +import Clipboard from "../../Icons/Clipboard.tsx"; +import DeleteOutlined from "../../Icons/DeleteOutlined.tsx"; +import Eye from "../../Icons/Eye.tsx"; +import LinkEdit from "../../Icons/LinkEdit.tsx"; +import LockClosedOutlined from "../../Icons/LockClosedOutlined.tsx"; +import Open from "../../Icons/Open.tsx"; +import { SummaryButton } from "../Tasks/TaskCard.tsx"; + +export interface ShareCardProps { + share?: Share; + onLoad?: () => void; + loading?: boolean; + onShareDeleted: (id: string) => void; +} + +interface ActionMenuProps extends MenuProps { + share: Share; + onShareDeleted: (id: string) => void; +} + +const ActionMenu = ({ share, onShareDeleted, onClose, ...rest }: ActionMenuProps) => { + const theme = useTheme(); + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const { enqueueSnackbar } = useSnackbar(); + + const deleteShare = useCallback(() => { + dispatch(confirmOperation(t("fileManager.deleteShareWarning"))).then(() => { + dispatch(sendDeleteShare(share.id)).then(() => { + onClose && onClose({}, "backdropClick"); + enqueueSnackbar({ + message: t("application:share.shareCanceled"), + variant: "success", + action: DefaultCloseAction, + }); + onShareDeleted(share.id); + }); + }); + }, [t, share.id, onClose, dispatch, enqueueSnackbar]); + + const openEdit = useCallback(() => { + dispatch(openShareEditByID(share.id, share.password, share.source_type == FileType.file)); + onClose && onClose({}, "backdropClick"); + }, [dispatch, share, onClose]); + + const openLink = useCallback(() => { + window.open(share.url, "_blank"); + onClose && onClose({}, "backdropClick"); + }, [share, onClose]); + + const copyLink = useCallback(() => { + copyToClipboard(share.url); + onClose && onClose({}, "backdropClick"); + }, [share, onClose, t]); + + return ( + + + + + + {t(`fileManager.open`)} + + + + + + {t(`share.copyLinkToClipboard`)} + + {!share.expired && ( + + + + + {t(`fileManager.${share?.expired ? "editAndReactivate" : "edit"}`)} + + )} + + + + + + {t(`fileManager.delete`)} + + + ); +}; + +const ShareCard = ({ share, onShareDeleted, onLoad, loading }: ShareCardProps) => { + const { t } = useTranslation(); + const navigate = useNavigate(); + const { ref, inView } = useInView({ + rootMargin: "200px 0px", + triggerOnce: true, + skip: !loading || !onLoad, + }); + + const popupState = usePopupState({ + popupId: "shareAction", + variant: "popover", + }); + + useEffect(() => { + if (!inView) { + return; + } + + if (onLoad) { + onLoad(); + } + }, [inView]); + + const user = SessionManager.currentLoginOrNull(); + + return ( + <> + {share && } + + { + e.preventDefault(); + if (share?.owner?.id === user?.user.id) { + popupState.open(e); + } + }} + sx={{ p: 0, minHeight: 0, width: "100%", textAlign: "left" }} + {...(share?.owner?.id != user?.user.id + ? { + onClick: () => { + window.open(share?.url ?? "#", "_blank"); + }, + } + : bindTrigger(popupState))} + > + + + {share ? ( + + ) : ( + + )} + + + + + {share && share?.password_protected && } + + + {loading ? : share?.name} + + + + {share?.expired && ( + + )} + + + + + {!share?.created_at ? ( + + ) : ( + + + + + {share?.visited ?? 0} + + + )} + + + + + + + + + ); +}; + +export default ShareCard; diff --git a/src/component/Pages/Shares/ShareList.tsx b/src/component/Pages/Shares/ShareList.tsx new file mode 100755 index 0000000..a9063db --- /dev/null +++ b/src/component/Pages/Shares/ShareList.tsx @@ -0,0 +1,134 @@ +import * as React from "react"; +import { useCallback, useState } from "react"; +import { Box, Container, FormControl, Grid, ListItemText, SelectChangeEvent } from "@mui/material"; +import { useTranslation } from "react-i18next"; +import PageHeader from "../PageHeader.tsx"; +import { getShares } from "../../../api/api.ts"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import Nothing from "../../Common/Nothing.tsx"; +import { setSelected } from "../../../redux/fileManagerSlice.ts"; +import ShareCard from "./ShareCard.tsx"; +import { Share } from "../../../api/explorer.ts"; +import { DenseSelect } from "../../Common/StyledComponents.tsx"; +import { SquareMenuItem } from "../../FileManager/ContextMenu/ContextMenu.tsx"; +import PageContainer from "../PageContainer.tsx"; + +const defaultPageSize = 50; + +const ShareList = () => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const [nextPageToken, setNextPageToken] = useState(""); + const [shares, setShares] = useState([]); + const [loading, setLoading] = useState(false); + const [orderDirection, setOrderDirection] = useState("desc"); + + const loadNextPage = useCallback( + (originShares: Share[], token?: string, direction?: string) => () => { + setLoading(true); + dispatch( + getShares({ + page_size: defaultPageSize, + order_direction: direction ?? orderDirection, + next_page_token: token, + }), + ) + .then((res) => { + setShares([...originShares, ...res.shares]); + if (res.pagination?.next_token) { + setNextPageToken(res.pagination.next_token); + } else { + setNextPageToken(undefined); + } + }) + .catch(() => { + setNextPageToken(undefined); + }) + .finally(() => { + setLoading(false); + }); + }, + [dispatch, orderDirection, setSelected], + ); + + const refresh = (direction?: string) => { + loadNextPage([], "", direction)(); + }; + + const onShareDeleted = useCallback( + (id: string) => { + setShares((shares) => shares.filter((share) => share.id !== id)); + }, + [setShares], + ); + + const onSelectChange = useCallback( + (e: SelectChangeEvent) => { + setOrderDirection(e.target.value as string); + refresh(e.target.value as string); + }, + [refresh, setOrderDirection], + ); + + return ( + + + + + + + {t("application:share.createdAtDesc")} + + + + + {t("application:share.createdAtAsc")} + + + + + } + onRefresh={() => refresh()} + loading={loading} + title={t("application:navbar.myShare")} + /> + + + {shares.map((share) => ( + + ))} + {nextPageToken != undefined && ( + <> + {[...Array(4)].map((_, i) => ( + + ))} + + )} + + + {nextPageToken == undefined && shares.length == 0 && ( + + + + )} + + + ); +}; + +export default ShareList; diff --git a/src/component/Pages/Tasks/DownloadFileList.tsx b/src/component/Pages/Tasks/DownloadFileList.tsx new file mode 100755 index 0000000..c3bab09 --- /dev/null +++ b/src/component/Pages/Tasks/DownloadFileList.tsx @@ -0,0 +1,257 @@ +import { + Box, + Button, + Grow, + Stack, + Table, + TableCell, + TableContainer, + TableRow, + TextField, + Typography, + useTheme, +} from "@mui/material"; +import { useSnackbar } from "notistack"; +import { useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { TableVirtuoso } from "react-virtuoso"; +import { sendCancelDownloadTask, sendSetDownloadTarget } from "../../../api/api.ts"; +import { FileType } from "../../../api/explorer.ts"; +import { DownloadTaskFile, TaskSummary } from "../../../api/workflow.ts"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import { confirmOperation } from "../../../redux/thunks/dialog.ts"; +import { fileBase, sizeToString } from "../../../util"; +import { StyledCheckbox, StyledTableContainerPaper } from "../../Common/StyledComponents.tsx"; +import FileIcon from "../../FileManager/Explorer/FileIcon.tsx"; +import Dismiss from "../../Icons/Dismiss.tsx"; +import { getProgressColor } from "./TaskCard.tsx"; + +export interface DownloadFileListProps { + taskId: string; + summary?: TaskSummary; + downloading?: boolean; + readonly?: boolean; +} + +const DownloadFileList = ({ taskId, summary, downloading, readonly }: DownloadFileListProps) => { + const [selectedMask, setSelectedMask] = useState<{ + [key: number]: boolean; + }>({}); + const [changeApplied, setChangeApplied] = useState(true); + const [loading, setLoading] = useState(false); + const [height, setHeight] = useState(33); + const [filterText, setFilterText] = useState(""); + const files = summary?.props?.download?.files; + const { t } = useTranslation(); + const theme = useTheme(); + const dispatch = useAppDispatch(); + const { enqueueSnackbar } = useSnackbar(); + + const progressColor = useMemo(() => { + return getProgressColor(theme); + }, [theme]); + + const filteredFiles = useMemo(() => { + if (!files) { + return []; + } + if (!filterText) { + return files; + } + return files.filter((file) => file.name.toLowerCase().includes(filterText.toLowerCase())); + }, [files, filterText]); + + const setFileSelected = (value: DownloadTaskFile, selected: boolean) => { + setSelectedMask((prev) => { + return { + ...prev, + [value.index]: selected, + }; + }); + setChangeApplied(false); + }; + + const submitChanges = () => { + setLoading(true); + dispatch( + sendSetDownloadTarget(taskId, { + files: Object.keys(selectedMask).map((key) => ({ + index: parseInt(key), + download: selectedMask[parseInt(key)], + })), + }), + ) + .then(() => { + setChangeApplied(true); + enqueueSnackbar({ + message: t("download.operationSubmitted"), + variant: "success", + }); + }) + .finally(() => { + setLoading(false); + }); + }; + + const selectAll = () => { + const newMask = { ...selectedMask }; + filteredFiles.forEach((file) => { + newMask[file.index] = true; + }); + setSelectedMask(newMask); + setChangeApplied(false); + }; + + const reverseSelect = () => { + const newMask = { ...selectedMask }; + filteredFiles.forEach((file) => { + const currentSelection = newMask[file.index] ?? file.selected; + newMask[file.index] = !currentSelection; + }); + setSelectedMask(newMask); + setChangeApplied(false); + }; + + const cancelTask = () => { + dispatch(confirmOperation(t("download.cancelTaskConfirm"))).then(() => { + setLoading(true); + dispatch(sendCancelDownloadTask(taskId)) + .then(() => { + enqueueSnackbar({ + message: t("download.taskCanceled"), + variant: "success", + }); + }) + .finally(() => { + setLoading(false); + }); + }); + }; + + return ( + + {files && ( + <> + {!readonly && files.length > 20 && ( + + setFilterText(e.target.value)} + sx={{ flexGrow: 1 }} + /> + + + + )} + + { + setHeight(h + 0.5); + }} + components={{ + // eslint-disable-next-line react/display-name + Table: (props) => , + // eslint-disable-next-line react/display-name + TableRow: (props) => { + const index = props["data-index"]; + const percentage = (files[index]?.progress ?? 0) * 100; + const progressBgColor = theme.palette.background.default; + return ( + + ); + }, + }} + data={filteredFiles} + itemContent={(_index, value) => ( + <> + + { + setFileSelected(value, e.target.checked); + }} + disabled={!downloading || readonly} + disableRipple + checked={selectedMask[value.index] ?? value.selected} + size="small" + /> + + + + + {fileBase(value.name)} + + + + + {sizeToString(value.size)} + + + + + {((value.progress ?? 0) * 100).toFixed(2)} % + + + + )} + /> + {filteredFiles.length === 0 && ( + + {t("download.noFilesFound")} + + )} + + + )} + {downloading && !readonly && summary?.phase == "monitor" && ( + + + + + + + + + )} + + ); +}; + +export default DownloadFileList; diff --git a/src/component/Pages/Tasks/DownloadList.tsx b/src/component/Pages/Tasks/DownloadList.tsx new file mode 100755 index 0000000..a5ba2b8 --- /dev/null +++ b/src/component/Pages/Tasks/DownloadList.tsx @@ -0,0 +1,164 @@ +import * as React from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; +import { ListTaskCategory, TaskResponse } from "../../../api/workflow.ts"; +import { Box, Container, FormControlLabel, FormGroup, Switch, Typography } from "@mui/material"; +import { useTranslation } from "react-i18next"; +import PageHeader from "../PageHeader.tsx"; +import { getTasks } from "../../../api/api.ts"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import Nothing from "../../Common/Nothing.tsx"; +import TaskCard from "./TaskCard.tsx"; +import PageContainer from "../PageContainer.tsx"; + +const defaultPageSize = 25; +const autoRefreshInterval = 20 * 1000; + +const DownloadList = () => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + + const [nextPageToken, setNextPageToken] = useState(""); + const [tasks, setTasks] = useState([]); + const [downloadingTasks, setDownloadingTasks] = useState(undefined); + const [loading, setLoading] = useState(false); + const [autoRefresh, setAutoRefresh] = useState(true); + const interval = React.useRef(); + const downloadingListHash = useRef(""); + + useEffect(() => { + if (autoRefresh && !interval.current) { + interval.current = setInterval(() => { + refresh(); + }, autoRefreshInterval); + } else { + clearInterval(interval.current); + interval.current = undefined; + } + }, [autoRefresh]); + + useEffect(() => { + return () => { + clearInterval(interval.current); + interval.current = undefined; + }; + }, []); + + const loadNextPage = useCallback( + (originTasks: TaskResponse[], token?: string) => () => { + setLoading(true); + dispatch( + getTasks({ + page_size: defaultPageSize, + category: ListTaskCategory.downloaded, + next_page_token: token, + }), + ) + .then((res) => { + if (token) { + setAutoRefresh(false); + } + setTasks([...originTasks, ...res.tasks]); + if (res.pagination?.next_token) { + setNextPageToken(res.pagination.next_token); + } else { + setNextPageToken(undefined); + } + }) + .catch(() => { + setNextPageToken(undefined); + }) + .finally(() => { + setLoading(false); + }); + }, + [dispatch, setAutoRefresh, setTasks], + ); + + const loadDownloading = useCallback(() => { + setLoading(true); + dispatch( + getTasks({ + page_size: defaultPageSize, + category: ListTaskCategory.downloading, + }), + ) + .then((res) => { + setDownloadingTasks(res.tasks); + // New hash = id of first downloading task + id of last downloading task + length of downloading tasks + const newHash = `${res.tasks[0]?.id ?? ""}-${res.tasks[res.tasks.length - 1]?.id ?? ""}-${res.tasks.length}`; + + if (downloadingListHash.current != "" && downloadingListHash.current != newHash) { + loadNextPage([], "")(); + } + downloadingListHash.current = newHash; + }) + .catch(() => {}) + .finally(() => { + setLoading(false); + }); + }, [dispatch, setAutoRefresh, setDownloadingTasks]); + + const refresh = () => { + loadDownloading(); + }; + + const toggleAutoRefresh = (event: React.ChangeEvent) => { + if (event.target.checked && tasks.length > defaultPageSize) { + loadNextPage([], "")(); + } + setAutoRefresh(event.target.checked); + }; + + return ( + + + + } + label={ + + {t("setting.autoRefresh")} + + } + /> + + } + onRefresh={refresh} + loading={loading} + title={t("application:navbar.remoteDownload")} + /> + + {t("download.active")} + + {downloadingTasks != undefined && downloadingTasks.length == 0 && ( + + + + )} + {downloadingTasks == undefined && } + + {downloadingTasks && downloadingTasks.map((task) => )} + + {t("download.finished")} + + {tasks.map((task) => ( + + ))} + {nextPageToken != undefined && ( + + )} + + {nextPageToken == undefined && tasks.length == 0 && ( + + + + )} + + + ); +}; + +export default DownloadList; diff --git a/src/component/Pages/Tasks/PieceProgress.tsx b/src/component/Pages/Tasks/PieceProgress.tsx new file mode 100755 index 0000000..72a476e --- /dev/null +++ b/src/component/Pages/Tasks/PieceProgress.tsx @@ -0,0 +1,63 @@ +import { memo, useEffect, useRef } from "react"; +import { Box, useTheme } from "@mui/material"; + +export interface PieceProgressProps { + pieces: string; + total: number; +} + +const PieceProgress: React.FC = memo(({ pieces, total }) => { + const theme = useTheme(); + const canvasRef = useRef(null); + useEffect(() => { + if (!pieces || !canvasRef.current || !total) { + return; + } + + const canvas = canvasRef.current; + const context = canvas.getContext("2d"); + if (!context) { + return; + } + + context.clearRect(0, 0, canvas.width, canvas.height); + context.strokeStyle = theme.palette.primary.light; + + const bits = Uint8Array.from(atob(pieces), (c) => c.charCodeAt(0)); + for (let i = 0; i < canvas.width; i++) { + let bitIndex = Math.floor(((i + 1) / canvas.width) * total); + // Read bool from unit8 array + let bit = bits[Math.floor(bitIndex / 8)] & (1 << bitIndex % 8); + if (bit) { + context.beginPath(); + context.moveTo(i, 0); + context.lineTo(i, canvas.height); + context.stroke(); + } + } + }, [pieces, theme, total]); + return ( + theme.palette.action.hover, + }} + > +

+ ); +}); + +export default PieceProgress; diff --git a/src/component/Pages/Tasks/StepProgressBar.tsx b/src/component/Pages/Tasks/StepProgressBar.tsx new file mode 100755 index 0000000..e34a1da --- /dev/null +++ b/src/component/Pages/Tasks/StepProgressBar.tsx @@ -0,0 +1,35 @@ +import { Box, Skeleton, Typography } from "@mui/material"; +import BorderLinearProgress from "../../Common/BorderLinearProgress.tsx"; + +export interface StepProgressBarProps { + title?: string; + secondary?: string; + caption?: string; + progress?: number; + loading?: boolean; + indeterminate?: boolean; +} + +const StepProgressBar = ({ title, secondary, progress, loading, indeterminate }: StepProgressBarProps) => { + return ( + + + + {loading ? : title} + + {secondary && ( + + {secondary} + + )} + + {loading ? ( + + ) : ( + + )} + + ); +}; + +export default StepProgressBar; diff --git a/src/component/Pages/Tasks/StepProgressPopover.tsx b/src/component/Pages/Tasks/StepProgressPopover.tsx new file mode 100755 index 0000000..5359a17 --- /dev/null +++ b/src/component/Pages/Tasks/StepProgressPopover.tsx @@ -0,0 +1,217 @@ +import { Box, Divider, PopoverProps, Typography } from "@mui/material"; +import HoverPopover from "material-ui-popup-state/HoverPopover"; +import { useCallback, useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { getTasksPhaseProgress } from "../../../api/api.ts"; +import { TaskProgress, TaskProgresses } from "../../../api/workflow.ts"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import { sizeToString } from "../../../util"; +import StepProgressBar from "./StepProgressBar.tsx"; + +export interface StepProgressPopoverProps extends PopoverProps { + taskId: string; +} + +export const ProgressKeys = { + relocate: "relocate", + upload: "upload", + upload_single_: "upload_single_", + archive_count: "archive_count", + archive_size: "archive_size", + upload_count: "upload_count", + extract_count: "extract_count", + extract_size: "extract_size", + download: "download", + imported: "imported", + indexed: "indexed", +}; + +const ProgressBar = ({ pkey, p }: { pkey: string; p: TaskProgress }) => { + const { t } = useTranslation(); + if (pkey == ProgressKeys.relocate) { + return ( + + ); + } + + if (pkey == ProgressKeys.imported) { + return ( + + ); + } + + if (pkey == ProgressKeys.indexed) { + return ( + + ); + } + + if (pkey.startsWith(ProgressKeys.upload_single_)) { + return ( + + ); + } + + if (pkey == ProgressKeys.archive_count) { + let secondary = `${p.current}`; + if (p.total != 0) { + secondary += ` / ${p.total}`; + } + return ( + + ); + } + + if (pkey == ProgressKeys.archive_size) { + let secondary = sizeToString(p.current); + if (p.total != 0) { + secondary += ` / ${sizeToString(p.total)}`; + } + return ( + + ); + } + + if (pkey == ProgressKeys.upload) { + return ( + + ); + } + + if (pkey == ProgressKeys.extract_size) { + let secondary = sizeToString(p.current); + if (p.total != 0) { + secondary += ` / ${sizeToString(p.total)}`; + } + return ( + + ); + } + + if (pkey == ProgressKeys.extract_count) { + let secondary = `${p.current}`; + if (p.total != 0) { + secondary += ` / ${p.total}`; + } + return ( + + ); + } + + if (pkey == ProgressKeys.upload_count) { + let secondary = `${p.current}`; + if (p.total != 0) { + secondary += ` / ${p.total}`; + } + return ( + + ); + } + + if (pkey == ProgressKeys.download) { + return ( + + ); + } +}; + +const StepProgressPopover = ({ taskId, open, ...rest }: StepProgressPopoverProps) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const stopPropagation = useCallback((e: any) => e.stopPropagation(), []); + const [progress, setProgress] = useState(undefined); + + useEffect(() => { + if (open) { + dispatch(getTasksPhaseProgress(taskId)).then((res) => setProgress(res)); + } + }, [open, taskId]); + + return ( + + + {!progress && } + {progress && + Object.keys(progress).map((key, index) => ( + <> + + {index < Object.keys(progress).length - 1 && } + + ))} + {progress && Object.keys(progress).length == 0 && ( + + {t("setting.progressNotAvailable")} + + )} + + + ); +}; + +export default StepProgressPopover; diff --git a/src/component/Pages/Tasks/TaskCard.tsx b/src/component/Pages/Tasks/TaskCard.tsx new file mode 100755 index 0000000..cfd468f --- /dev/null +++ b/src/component/Pages/Tasks/TaskCard.tsx @@ -0,0 +1,222 @@ +import { + Box, + darken, + lighten, + Skeleton, + styled, + SvgIconProps, + Theme, + Typography, + useMediaQuery, + useTheme, +} from "@mui/material"; +import MuiAccordion, { AccordionProps } from "@mui/material/Accordion"; +import MuiAccordionDetails from "@mui/material/AccordionDetails"; +import MuiAccordionSummary, { AccordionSummaryProps } from "@mui/material/AccordionSummary"; +import { useEffect, useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { useInView } from "react-intersection-observer"; +import { FileType } from "../../../api/explorer.ts"; +import { TaskResponse, TaskType } from "../../../api/workflow.ts"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import { DefaultButton } from "../../Common/StyledComponents.tsx"; +import FileIcon from "../../FileManager/Explorer/FileIcon.tsx"; +import Archive from "../../Icons/Archive.tsx"; +import ArchiveArrow from "../../Icons/ArchiveArrow.tsx"; +import ArrowImport from "../../Icons/ArrowImport.tsx"; +import StorageOutlined from "../../Icons/StorageOutlined.tsx"; +import TaskDetail from "./TaskDetail.tsx"; +import TaskSummaryStatus from "./TaskSummaryStatus.tsx"; +import TaskSummaryTitle from "./TaskSummaryTitle.tsx"; + +const Accordion = styled((props: AccordionProps) => )(({ + theme, + expanded, +}) => { + const bgColor = expanded + ? theme.palette.mode == "light" + ? "rgba(0, 0, 0, 0.06)" + : "rgba(255, 255, 255, 0.09)" + : "initial"; + return { + borderRadius: theme.shape.borderRadius, + backgroundColor: bgColor, + "&::before": { + display: "none", + }, + boxShadow: expanded ? `0 0 0 1px ${theme.palette.divider}` : "none", + transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms", + marginBottom: theme.spacing(1), + }; +}); + +const AccordionSummary = styled((props: AccordionSummaryProps) => )(() => ({ + flexDirection: "row-reverse", + minHeight: 0, + padding: 0, + "& .MuiAccordionSummary-content": { + margin: 0, + }, +})); + +const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({ + padding: theme.spacing(2), + borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`, + backgroundColor: theme.palette.background.default, +})); + +export const getProgressColor = (theme: Theme) => + theme.palette.mode === "dark" ? darken(theme.palette.primary.main, 0.4) : lighten(theme.palette.primary.main, 0.85); + +export const SummaryButton = styled(DefaultButton)<{ + expanded: boolean; + percentage?: number; +}>(({ theme, expanded, percentage }) => { + percentage = percentage ?? 0; + const bgColor = theme.palette.mode == "light" ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.09)"; + const progressColor = getProgressColor(theme); + const progressBgColor = !expanded ? bgColor : "rgba(0,0,0,0)"; + return { + minHeight: 48, + justifyContent: "flex-start", + transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms", + borderRadius: expanded + ? `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0 0` + : `${theme.shape.borderRadius}px`, + backgroundColor: bgColor, + background: `linear-gradient(to right, ${progressColor} 0%,${progressColor} ${percentage}%,${progressBgColor} ${percentage}%,${progressBgColor} 100%)`, + "&:hover": { + backgroundColor: theme.palette.mode == "light" ? "rgba(0, 0, 0, 0.09)" : "rgba(255, 255, 255, 0.13)", + }, + }; +}); + +export interface TaskCardProps { + loading?: boolean; + showProgress?: boolean; + task?: TaskResponse; + onLoad?: () => void; +} + +const taskIconsMap: { + [key: string]: (props: SvgIconProps) => JSX.Element; +} = { + [TaskType.create_archive]: Archive, + [TaskType.extract_archive]: ArchiveArrow, + [TaskType.relocate]: StorageOutlined, + [TaskType.import]: ArrowImport, +}; + +const TaskCard = ({ loading, showProgress, onLoad, task }: TaskCardProps) => { + const { t } = useTranslation(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down("md")); + const dispatch = useAppDispatch(); + const { ref, inView } = useInView({ + rootMargin: "200px 0px", + triggerOnce: true, + skip: !loading, + }); + + const [expanded, setExpanded] = useState(false); + + useEffect(() => { + if (!inView) { + return; + } + + if (onLoad) { + onLoad(); + } + }, [inView]); + + const handleChange = (_event: React.SyntheticEvent, newExpanded: boolean) => { + if (loading) { + return; + } + setExpanded(newExpanded); + }; + + const TaskIcon = useMemo(() => { + return taskIconsMap[task?.type ?? ""] ?? Archive; + }, [task?.type]); + + return ( + + + + ) : task?.type === TaskType.remote_download ? ( + 1 ? FileType.folder : FileType.file, + name: task?.summary?.props.download?.name ?? "", + }} + /> + ) : ( + + ) + } + > + + + {loading || !task ? ( + + ) : ( + + + + )} + + + + {loading || !task ? ( + + ) : ( + + )} + + + + + {task && } + + ); +}; + +export default TaskCard; diff --git a/src/component/Pages/Tasks/TaskDetail.tsx b/src/component/Pages/Tasks/TaskDetail.tsx new file mode 100755 index 0000000..d3fd7c2 --- /dev/null +++ b/src/component/Pages/Tasks/TaskDetail.tsx @@ -0,0 +1,97 @@ +import { + Alert, + Divider, + Stack, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Typography, +} from "@mui/material"; +import { useTranslation } from "react-i18next"; +import { TaskResponse, TaskStatus } from "../../../api/workflow.ts"; +import { StyledTableContainerPaper } from "../../Common/StyledComponents.tsx"; +import DownloadFileList from "./DownloadFileList.tsx"; +import TaskProgress from "./TaskProgress.tsx"; +import TaskProps from "./TaskProps.tsx"; + +export interface TaskDetailProps { + task: TaskResponse; + downloading?: boolean; +} + +const TaskDetail = ({ task, downloading }: TaskDetailProps) => { + const { t } = useTranslation(); + return ( + + + {task.summary?.props?.download && ( + <> + + {t("setting.fileList")} + + + + + )} + + {t("setting.taskProgress")} + + {!!task.summary?.props?.failed && ( + + {t("setting.partialSuccessWarning", { + num: task.summary?.props?.failed, + })} + + )} + {task.status == TaskStatus.error && {task.error}} + + + + + + {t("setting.taskDetails")} + + + {task.error_history && } + + {task.error_history && ( + + + {t("setting.retryErrorHistory")} + + +

+ + + # + {t("common:error")} + + + + {task.error_history.map((error, index) => ( + + + {index + 1} + + {error} + + ))} + +

+ + + )} + + ); +}; + +export default TaskDetail; diff --git a/src/component/Pages/Tasks/TaskList.tsx b/src/component/Pages/Tasks/TaskList.tsx new file mode 100755 index 0000000..9cb77bd --- /dev/null +++ b/src/component/Pages/Tasks/TaskList.tsx @@ -0,0 +1,124 @@ +import * as React from "react"; +import { useCallback, useEffect, useState } from "react"; +import { ListTaskCategory, TaskResponse } from "../../../api/workflow.ts"; +import { Box, Container, FormControlLabel, FormGroup, Switch, Typography } from "@mui/material"; +import { useTranslation } from "react-i18next"; +import PageHeader from "../PageHeader.tsx"; +import { getTasks } from "../../../api/api.ts"; +import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; +import Nothing from "../../Common/Nothing.tsx"; +import TaskCard from "./TaskCard.tsx"; +import PageContainer from "../PageContainer.tsx"; + +const defaultPageSize = 25; +const autoRefreshInterval = 20 * 1000; + +const TaskList = () => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const policyOption = useAppSelector((state) => state.globalState.policyOptionCache); + const [nextPageToken, setNextPageToken] = useState(""); + const [tasks, setTasks] = useState([]); + const [loading, setLoading] = useState(false); + const [autoRefresh, setAutoRefresh] = useState(true); + const interval = React.useRef(); + + useEffect(() => { + if (autoRefresh && !interval.current) { + interval.current = setInterval(() => { + refresh(); + }, autoRefreshInterval); + } else { + clearInterval(interval.current); + interval.current = undefined; + } + }, [autoRefresh]); + + useEffect(() => { + return () => { + clearInterval(interval.current); + interval.current = undefined; + }; + }, []); + + const loadNextPage = useCallback( + (originTasks: TaskResponse[], token?: string) => () => { + setLoading(true); + dispatch( + getTasks({ + page_size: defaultPageSize, + category: ListTaskCategory.general, + next_page_token: token, + }), + ) + .then((res) => { + if (token) { + setAutoRefresh(false); + } + setTasks([...originTasks, ...res.tasks]); + if (res.pagination?.next_token) { + setNextPageToken(res.pagination.next_token); + } else { + setNextPageToken(undefined); + } + }) + .catch(() => { + setNextPageToken(undefined); + }) + .finally(() => { + setLoading(false); + }); + }, + [dispatch, setAutoRefresh, setTasks], + ); + + const refresh = () => { + loadNextPage([], "")(); + }; + + const toggleAutoRefresh = (event: React.ChangeEvent) => { + if (event.target.checked && tasks.length > defaultPageSize) { + loadNextPage([], "")(); + } + setAutoRefresh(event.target.checked); + }; + + return ( + + + + } + label={ + + {t("setting.autoRefresh")} + + } + /> + + } + onRefresh={refresh} + loading={loading} + title={t("application:navbar.taskQueue")} + /> + {tasks.map((task) => ( + + ))} + {nextPageToken != undefined && ( + + )} + + {nextPageToken == undefined && tasks.length == 0 && ( + + + + )} + + + ); +}; + +export default TaskList; diff --git a/src/component/Pages/Tasks/TaskProgress.tsx b/src/component/Pages/Tasks/TaskProgress.tsx new file mode 100755 index 0000000..ab591bc --- /dev/null +++ b/src/component/Pages/Tasks/TaskProgress.tsx @@ -0,0 +1,250 @@ +import { Box, Stepper, useMediaQuery, useTheme } from "@mui/material"; +import { useEffect, useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { NodeTypes, TaskStatus, TaskSummary, TaskType } from "../../../api/workflow.ts"; +import PieceProgress from "./PieceProgress.tsx"; +import TaskProgressStep from "./TaskProgressStep.tsx"; + +export interface TaskProgressProps { + taskId: string; + taskStatus: string; + taskType: string; + summary?: TaskSummary; + node?: { + type: string; + }; +} + +interface StepModel { + title: string; + state: string; + description?: string; + supportProgress?: boolean; +} + +const queueingStep: StepModel = { + title: "setting.queueToStart", + state: "", +}; + +const completedStep: StepModel = { + title: "setting.finished", + state: "", +}; + +const stepOptions: { + [key: string]: StepModel[][]; +} = { + [TaskType.remote_download]: [ + // Master + [ + queueingStep, + { + title: "fileManager.download", + state: "monitor", + description: "setting.downloadDes", + }, + { + title: "setting.transferring", + state: "transfer", + description: "setting.downloadTransferDes", + supportProgress: true, + }, + { + title: "setting.awaitSeeding", + state: "seeding", + description: "setting.awaitSeedingDes", + }, + completedStep, + ], + // Slave + [ + queueingStep, + { + title: "fileManager.download", + state: "monitor", + description: "setting.downloadDes", + }, + { + title: "setting.transferring", + state: "transfer", + description: "setting.downloadTransferDes", + supportProgress: true, + }, + { + title: "setting.awaitSeeding", + state: "seeding", + description: "setting.awaitSeedingDes", + }, + completedStep, + ], + ], + [TaskType.import]: [ + // Master + [ + queueingStep, + { + title: "setting.importingFiles", + state: "", + description: "setting.importingFilesDes", + supportProgress: true, + }, + ], + ], + [TaskType.relocate]: [ + // Master + [ + queueingStep, + { + title: "setting.indexingFiles", + state: "", + description: "setting.indexingFilesDes", + }, + { + title: "setting.transferring", + state: "transfer", + description: "setting.transferringRelocateDes", + supportProgress: true, + }, + { + title: "setting.committingChanges", + state: "finish", + description: "setting.relocateFinishing", + }, + ], + ], + [TaskType.extract_archive]: [ + // Master + [ + queueingStep, + { + title: "setting.downloadingZip", + description: "setting.downloadingZipDes", + state: "download_zip", + supportProgress: true, + }, + { + title: "setting.extractingFiles", + state: "", + description: "setting.extractingFilesDes", + supportProgress: true, + }, + ], + // Slave + [ + queueingStep, + { + title: "setting.sendTask", + description: "setting.sendTaskDes", + state: "", + }, + { + title: "setting.extractingFiles", + state: "await_slave_complete", + description: "setting.extractingFilesDes", + supportProgress: true, + }, + ], + ], + [TaskType.create_archive]: [ + // Master + [ + queueingStep, + { + title: "setting.prepare", + state: "", + description: "setting.preparingWorkspaceDes", + }, + { + title: "setting.compressFiles", + state: "compress_files", + description: "setting.compressFilesDes", + supportProgress: true, + }, + { + title: "setting.transferring", + state: "upload_archive", + description: "setting.uploadArchiveFileDes", + supportProgress: true, + }, + ], + // Slave + [ + queueingStep, + { + title: "setting.indexingFiles", + state: "", + description: "setting.indexForArchiveDes", + }, + { + title: "setting.compressFiles", + state: "await_slave_compressing", + description: "setting.compressFilesDes", + supportProgress: true, + }, + { + title: "setting.transferring", + state: "await_slave_uploading", + description: "setting.uploadArchiveFileDes", + supportProgress: true, + }, + { + title: "setting.committingChanges", + state: "complete_upload", + description: "setting.createArchiveFinishing", + }, + ], + ], +}; + +const TaskProgress = ({ taskId, taskStatus, taskType, summary, node }: TaskProgressProps) => { + const { t } = useTranslation(); + const [activeStep, setActiveStep] = useState(0); + const steps = useMemo((): StepModel[] => { + return stepOptions[taskType]?.[node?.type == NodeTypes.slave ? 1 : 0] ?? []; + }, [taskId, node?.type]); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down("md")); + + useEffect(() => { + if (taskStatus == TaskStatus.queued) { + setActiveStep(0); + return; + } + if (taskStatus == TaskStatus.completed) { + setActiveStep(steps.length); + return; + } + let active = 1; + for (let i = 1; i < steps.length; i++) { + if (steps[i].state == summary?.phase) { + active = i; + } + } + + setActiveStep(active); + }, [steps, taskStatus, summary?.phase]); + + return ( + + + {steps.map((step, index) => ( + + ))} + + {taskType == TaskType.remote_download && summary?.props.download?.pieces && summary?.phase == "monitor" && ( + + )} + + ); +}; + +export default TaskProgress; diff --git a/src/component/Pages/Tasks/TaskProgressStep.tsx b/src/component/Pages/Tasks/TaskProgressStep.tsx new file mode 100755 index 0000000..e5f43ac --- /dev/null +++ b/src/component/Pages/Tasks/TaskProgressStep.tsx @@ -0,0 +1,91 @@ +import { Step, StepIcon, StepIconProps, StepLabel, Typography } from "@mui/material"; +import { StepProps } from "@mui/material/Step/Step"; +import { bindHover, bindPopover } from "material-ui-popup-state"; +import { usePopupState } from "material-ui-popup-state/hooks"; +import { useMemo } from "react"; +import { useTranslation } from "react-i18next"; +import { TaskStatus } from "../../../api/workflow.ts"; +import FacebookCircularProgress from "../../Common/CircularProgress.tsx"; +import CheckCircleFilled from "../../Icons/CheckCircleFilled.tsx"; +import DismissCircleFilled from "../../Icons/DismissCircleFilled.tsx"; +import StepProgressPopover from "./StepProgressPopover.tsx"; + +interface ProgressStepIconProps extends StepIconProps {} + +const ProgressStepIcon = (status: string) => (props: ProgressStepIconProps) => { + const { active, completed, icon, ...rest } = props; + + let newIcon = icon; + if (active) { + newIcon = ; + if (status == TaskStatus.error) { + newIcon = theme.palette.error.main }} />; + } + } else if (completed) { + newIcon = theme.palette.primary.main }} />; + } + + if (active && status == TaskStatus.error) { + newIcon = theme.palette.error.main }} />; + } + + if (active && status == TaskStatus.canceled) { + newIcon = ( + theme.palette.action.active, + }} + /> + ); + } + + return ; +}; + +export interface TaskProgressStepProps extends StepProps { + taskId: string; + taskStatus: string; + title: string; + description?: string; + showProgress?: boolean; + progressing?: boolean; +} + +const TaskProgressStep = ({ + taskId, + taskStatus, + title, + description, + showProgress, + progressing, + ...rest +}: TaskProgressStepProps) => { + const popupState = usePopupState({ + variant: "popover", + popupId: `progress_${taskId}_${title}`, + }); + const { open, ...restPopup } = bindPopover(popupState); + + const StepIconComponent = useMemo(() => { + return ProgressStepIcon(taskStatus); + }, [taskStatus]); + const { t } = useTranslation(); + return ( + <> + + {t(description)} : undefined} + slots={{ + stepIcon: StepIconComponent, + }} + > + {t(title)} + + + {showProgress && progressing && } + + ); +}; + +export default TaskProgressStep; diff --git a/src/component/Pages/Tasks/TaskProps.tsx b/src/component/Pages/Tasks/TaskProps.tsx new file mode 100755 index 0000000..214f267 --- /dev/null +++ b/src/component/Pages/Tasks/TaskProps.tsx @@ -0,0 +1,185 @@ +import { Grid, Stack, Typography } from "@mui/material"; +import dayjs from "dayjs"; +import duration from "dayjs/plugin/duration"; +import { TFunction } from "i18next"; +import { useMemo } from "react"; +import { useTranslation } from "react-i18next"; +import { FileType } from "../../../api/explorer.ts"; +import { TaskResponse, TaskStatus, TaskType } from "../../../api/workflow.ts"; +import { sizeToString } from "../../../util"; +import { formatDuration } from "../../../util/datetime.ts"; +import TimeBadge from "../../Common/TimeBadge.tsx"; +import FileBadge from "../../FileManager/FileBadge.tsx"; + +dayjs.extend(duration); + +export interface TaskPropsProps { + task: TaskResponse; +} + +interface TaskPropsBlockProps { + label: string; + value: React.ReactNode; +} + +const TaskPropsBlock = ({ label, value }: TaskPropsBlockProps) => { + return ( + + + + {label} + + + + + {value} + + + + ); +}; + +export const getTaskStatusText = (status: TaskStatus, t: TFunction) => { + switch (status) { + case TaskStatus.queued: + return t("application:setting.queueing"); + case TaskStatus.processing: + return t("application:setting.processing"); + case TaskStatus.suspending: + return t("application:setting.processing") + t("application:setting.suspended"); + case TaskStatus.canceled: + return t("application:setting.canceled"); + case TaskStatus.error: + return t("application:setting.failed"); + case TaskStatus.completed: + return t("application:setting.finished"); + default: + return t("application:uplaoder.unknownStatus"); + } +}; + +const TaskProps = ({ task }: TaskPropsProps) => { + const { t } = useTranslation(); + const status = useMemo(() => getTaskStatusText(task.status as TaskStatus, t), [task.status, t]); + + return ( + + } + /> + } + /> + + + {task.summary?.props.src && ( + + } + /> + )} + {task.summary?.props.src_str && ( + + {task.summary?.props.src_str} + + } + /> + )} + {task.summary?.props.src_multiple && ( + + {task.summary?.props.src_multiple.map((src, index) => ( + + ))} + + } + /> + )} + {task.summary?.props.dst && ( + + } + /> + )} + + {task.resume_time && (task.status == TaskStatus.suspending || task.status == TaskStatus.processing) && ( + } + /> + )} + + {!!task.summary?.props.download?.num_pieces && ( + + )} + {!!task.summary?.props.download?.uploaded && ( + + )} + {!!task.summary?.props.download?.upload_speed && ( + + )} + {!!task.summary?.props.download?.hash && ( + + )} + + ); +}; + +export default TaskProps; diff --git a/src/component/Pages/Tasks/TaskSummaryStatus.tsx b/src/component/Pages/Tasks/TaskSummaryStatus.tsx new file mode 100755 index 0000000..a0edb2b --- /dev/null +++ b/src/component/Pages/Tasks/TaskSummaryStatus.tsx @@ -0,0 +1,155 @@ +import { Box, styled, Tooltip, Typography, useTheme } from "@mui/material"; +import { forwardRef } from "react"; +import { useTranslation } from "react-i18next"; +import { TaskStatus, TaskSummary, TaskType } from "../../../api/workflow.ts"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import { sizeToString } from "../../../util"; +import ArrowSyncCircleFilled from "../../Icons/ArrowSyncCircleFilled.tsx"; +import CheckCircleFilled from "../../Icons/CheckCircleFilled.tsx"; +import CircleHintFilled from "../../Icons/CircleHintFilled.tsx"; +import DismissCircleFilled from "../../Icons/DismissCircleFilled.tsx"; + +const ArrowSyncCircleFilledSpin = styled(ArrowSyncCircleFilled)({ + animation: "spin 4s linear infinite", + "@keyframes spin": { + from: { + transform: "rotate(0deg)", + }, + to: { + transform: "rotate(360deg)", + }, + }, +}); + +export interface TaskSummaryStatusProps { + type: string; + status: string; + summary?: TaskSummary; + error?: string; + simplified?: boolean; +} + +interface TaskStatusContentProps { + color: string; + icon: React.ReactNode; + title: string; + [key: string]: any; +} +const TaskStatusContent = forwardRef(({ icon, title, color, ...props }: TaskStatusContentProps, ref) => { + return ( + + + {icon} + {title} + + + ); +}); + +const TaskSummaryStatus = ({ type, status, summary, error, simplified }: TaskSummaryStatusProps) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const theme = useTheme(); + + switch (status) { + case TaskStatus.completed: + return ( + } + color={theme.palette.success.main} + /> + ); + case TaskStatus.error: + return ( + + } + color={theme.palette.error.main} + /> + + ); + case TaskStatus.processing: + case TaskStatus.suspending: + if (type == TaskType.remote_download) { + if (summary?.phase == "monitor" && summary?.props.download) { + const downloadStatus = summary.props.download; + return ( + + {!simplified && + `${sizeToString(downloadStatus.download_speed)} /s - ${sizeToString( + downloadStatus.downloaded, + )} / ${sizeToString(downloadStatus.total)}`} + } + color={theme.palette.primary.main} + /> + + ); + } else if (summary?.phase == "seeding") { + return ( + } + color={theme.palette.primary.main} + /> + ); + } else if (summary?.phase == "transfer") { + return ( + } + color={theme.palette.primary.main} + /> + ); + } else { + return ( + } + color={theme.palette.primary.main} + /> + ); + } + } + return ( + } + color={theme.palette.primary.main} + /> + ); + case TaskStatus.queued: + return ( + } + color={theme.palette.action.active} + /> + ); + case TaskStatus.canceled: + return ( + } + color={theme.palette.action.active} + /> + ); + } +}; + +export default TaskSummaryStatus; diff --git a/src/component/Pages/Tasks/TaskSummaryTitle.tsx b/src/component/Pages/Tasks/TaskSummaryTitle.tsx new file mode 100755 index 0000000..8933fe0 --- /dev/null +++ b/src/component/Pages/Tasks/TaskSummaryTitle.tsx @@ -0,0 +1,139 @@ +import { Box, Chip, styled, Typography } from "@mui/material"; +import { useMemo } from "react"; +import { Trans, useTranslation } from "react-i18next"; +import { FileType } from "../../../api/explorer.ts"; +import { TaskSummary, TaskType } from "../../../api/workflow.ts"; +import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; +import { newMyUri } from "../../../util/uri.ts"; +import FileBadge from "../../FileManager/FileBadge.tsx"; + +export interface TaskSummaryTitleProps { + type: string; + summary?: TaskSummary; + isInDashboard?: boolean; +} + +const StyledFileBadge = styled(FileBadge)(() => ({ + paddingLeft: 8, + paddingRight: 8, + marginLeft: 4, + marginRight: 4, + maxWidth: "200px", +})); + +const StyledChip = styled(Chip)(() => ({ + marginLeft: 8, + height: "20px", +})); + +const TaskSummaryTitle = ({ type, summary, isInDashboard = false }: TaskSummaryTitleProps) => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const policyOption = useAppSelector((state) => state.globalState.policyOptionCache); + + const selectedCount = useMemo(() => { + let selected = 0; + for (const file of summary?.props.download?.files ?? []) { + if (file.selected) { + selected++; + } + } + + return selected; + }, [summary?.props.download?.files]); + + switch (type) { + case TaskType.remote_download: + return ( + + + {isInDashboard && t("dashboard:task.remoteDownload")} + {summary?.props.download?.name ?? t("download.unknownTaskName")} + {selectedCount > 1 && } + + + ); + case TaskType.create_archive: + return ( + + {summary?.props.src_multiple?.slice(0, 3).map((src) => ( + + ))} + , + , + ]} + values={{ + more: (summary?.props.src_multiple?.length ?? 0) > 3 ? "..." : "", + }} + /> + ); + case TaskType.import: + return ( + p.id == summary?.props.dst_policy_id)?.name ?? "Unknown" + : "", + }} + components={[ + , + ]} + /> + ); + default: + return ( + , + , + ]} + values={{ + more: (summary?.props.src_multiple?.length ?? 0) > 3 ? "..." : "", + }} + /> + ); + } +}; + +export default TaskSummaryTitle; diff --git a/src/component/Uploader/DropFile.tsx b/src/component/Uploader/DropFile.tsx new file mode 100755 index 0000000..246b67d --- /dev/null +++ b/src/component/Uploader/DropFile.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import Backdrop from "@mui/material/Backdrop"; +import { Typography } from "@mui/material"; +import { useTranslation } from "react-i18next"; +import CloudArrowIUp from "../Icons/CloudArrowIUp.tsx"; + +export function DropFileBackground({ open }: { open: boolean }) { + const { t } = useTranslation(); + return ( + theme.zIndex.drawer + 1, + color: "#fff", + flexDirection: "column", + }} + open={open} + > +

+ +

+

+ {t("uploader.dropFileHere")} +

+ + ); +} diff --git a/src/component/Uploader/PasteUploadDialog.tsx b/src/component/Uploader/PasteUploadDialog.tsx new file mode 100755 index 0000000..01677cc --- /dev/null +++ b/src/component/Uploader/PasteUploadDialog.tsx @@ -0,0 +1,84 @@ +import React, { useCallback, useEffect } from "react"; +import { Box, DialogContent, styled, Typography } from "@mui/material"; +import { useTranslation } from "react-i18next"; +import { useAppDispatch, useAppSelector } from "../../redux/hooks.ts"; +import DraggableDialog from "../Dialogs/DraggableDialog.tsx"; +import { setUploadFromClipboardDialog } from "../../redux/globalStateSlice.ts"; +import Clipboard from "../Icons/Clipboard.tsx"; + +export interface PasteUploadDialogProps { + onFilePasted: (files: File[]) => void; +} + +export interface PasteTargetProps extends PasteUploadDialogProps { + onClose: () => void; +} + +const PasteTargetContainer = styled(Box)(({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + backgroundColor: theme.palette.mode == "light" ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.09)", + display: "flex", + justifyContent: "center", + alignItems: "center", + flexDirection: "column", + padding: theme.spacing(2), + color: theme.palette.text.secondary, +})); + +const PasteTarget = ({ onFilePasted, onClose }: PasteTargetProps) => { + const { t } = useTranslation(); + const pasteHandler = (e: ClipboardEvent) => { + e.preventDefault(); + if (!e.clipboardData?.files.length) { + return; + } + + onFilePasted(Array.from(e.clipboardData.files)); + onClose(); + }; + + useEffect(() => { + // listen to onpaste event for window + window.addEventListener("paste", pasteHandler); + return () => { + window.removeEventListener("paste", pasteHandler); + }; + }, []); + + const disableDefault = useCallback((e: React.MouseEvent | React.KeyboardEvent | React.ClipboardEvent) => { + e.preventDefault(); + return false; + }, []); + return ( + + + {t("uploader.pasteFilesHere")} + + ); +}; + +export default function PasteUploadDialog({ onFilePasted }: PasteUploadDialogProps) { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const open = useAppSelector((state) => state.globalState.uploadFromClipboardDialogOpen); + + const onClose = useCallback(() => { + dispatch(setUploadFromClipboardDialog(false)); + }, []); + + return ( + + + + + + ); +} diff --git a/src/component/Uploader/Popup/ConcurrentOptionDialog.tsx b/src/component/Uploader/Popup/ConcurrentOptionDialog.tsx new file mode 100755 index 0000000..7fad39d --- /dev/null +++ b/src/component/Uploader/Popup/ConcurrentOptionDialog.tsx @@ -0,0 +1,52 @@ +import React, { useCallback, useState } from "react"; +import { DialogContent, FilledInput, InputLabel } from "@mui/material"; +import FormControl from "@mui/material/FormControl"; +import { useTranslation } from "react-i18next"; +import SessionManager, { UserSettings } from "../../../session"; +import DraggableDialog from "../../Dialogs/DraggableDialog.tsx"; + +export interface ConcurrentOptionDialogProps { + open: boolean; + onClose: () => void; + onSave: (count: string) => void; +} + +export default function ConcurrentOptionDialog({ open, onClose, onSave }: ConcurrentOptionDialogProps) { + const { t } = useTranslation(); + const [count, setCount] = useState(SessionManager.getWithFallback(UserSettings.ConcurrentLimit)); + + const onAccept = useCallback(() => { + onSave(count); + }, [count]); + + return ( + + + + {t("uploader.concurrentTaskNumber")} + setCount(e.target.value)} + /> + + + + ); +} diff --git a/src/component/Uploader/Popup/MoreActions.tsx b/src/component/Uploader/Popup/MoreActions.tsx new file mode 100755 index 0000000..2371e88 --- /dev/null +++ b/src/component/Uploader/Popup/MoreActions.tsx @@ -0,0 +1,155 @@ +import { Icon, ListItemIcon, Menu, MenuItem, Tooltip } from "@mui/material"; +import React, { useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { DenseDivider } from "../../FileManager/ContextMenu/ContextMenu.tsx"; +import Checkmark from "../../Icons/Checkmark.tsx"; +import TextGrammarLighting from "../../Icons/TextGrammarLighting.tsx"; +import DeleteOutlined from "../../Icons/DeleteOutlined.tsx"; +import ArrowClockwise from "../../Icons/ArrowClockwise.tsx"; +import ConcurrentOptionDialog from "./ConcurrentOptionDialog.tsx"; +import SessionManager, { UserSettings } from "../../../session"; +import UploadManager from "../core"; + +export interface MoreActionsProps { + anchorEl: null | HTMLElement; + onClose: () => void; + uploadManager: UploadManager; + useAvgSpeed: boolean; + setUseAvgSpeed: (val: boolean) => void; + filter: string; + setFilter: (val: string) => void; + sorter: string; + setSorter: (val: string) => void; + cleanFinished: () => void; + retryFailed: () => void; +} + +export default function MoreActions({ + anchorEl, + onClose, + uploadManager, + useAvgSpeed, + setUseAvgSpeed, + filter, + setFilter, + sorter, + setSorter, + cleanFinished, + retryFailed, +}: MoreActionsProps) { + const { t } = useTranslation("application", { keyPrefix: "uploader" }); + const [concurrentDialog, setConcurrentDialog] = useState(false); + const [overwrite, setOverwrite] = useState(SessionManager.getWithFallback(UserSettings.UploadOverwrite)); + const actionClicked = (next: () => void) => () => { + onClose(); + next(); + }; + + const toggleOverwrite = (val: boolean) => { + SessionManager.set(UserSettings.UploadOverwrite, val); + uploadManager.overwrite = val; + setOverwrite(val); + }; + + const open = Boolean(anchorEl); + const id = open ? "uploader-action-popover" : undefined; + + const listItems = useMemo( + () => [ + { + tooltip: t("overwriteTooltip"), + onClick: () => toggleOverwrite(!overwrite), + icon: overwrite ? : , + text: t("overwrite"), + divider: true, + }, + { + tooltip: t("hideCompletedTooltip"), + onClick: () => setFilter(filter === "default" ? "ongoing" : "default"), + icon: filter !== "default" ? : , + text: t("hideCompleted"), + divider: true, + }, + { + tooltip: t("addTimeAscTooltip"), + onClick: () => setSorter("default"), + icon: sorter === "default" ? : , + text: t("addTimeAsc"), + divider: false, + }, + { + tooltip: t("addTimeDescTooltip"), + onClick: () => setSorter("reverse"), + icon: sorter === "reverse" ? : , + text: t("addTimeDesc"), + divider: true, + }, + { + tooltip: t("showInstantSpeedTooltip"), + onClick: () => setUseAvgSpeed(false), + icon: useAvgSpeed ? : , + text: t("showInstantSpeed"), + divider: false, + }, + { + tooltip: t("showAvgSpeedTooltip"), + onClick: () => setUseAvgSpeed(true), + icon: !useAvgSpeed ? : , + text: t("showAvgSpeed"), + divider: true, + }, + { + tooltip: t("cleanCompletedTooltip"), + onClick: () => cleanFinished(), + icon: , + text: t("cleanCompleted"), + divider: false, + }, + { + tooltip: t("retryFailedTasksTooltip"), + onClick: () => retryFailed(), + icon: , + text: t("retryFailedTasks"), + divider: true, + }, + { + tooltip: t("setConcurrentTooltip"), + onClick: () => setConcurrentDialog(true), + icon: , + text: t("setConcurrent"), + divider: false, + }, + ], + [useAvgSpeed, setUseAvgSpeed, sorter, setSorter, filter, setFilter, cleanFinished, overwrite], + ); + + const onConcurrentLimitSave = (val: string) => { + const valNum = parseInt(val); + if (valNum > 0) { + SessionManager.set(UserSettings.ConcurrentLimit, valNum); + uploadManager.changeConcurrentLimit(valNum); + } + setConcurrentDialog(false); + }; + + return ( + <> + + {listItems.map((item) => [ + + + {item.icon} + {item.text} + + , + item.divider && , + ])} + + setConcurrentDialog(false)} + onSave={onConcurrentLimitSave} + /> + + ); +} diff --git a/src/component/Uploader/Popup/TaskDetail.tsx b/src/component/Uploader/Popup/TaskDetail.tsx new file mode 100755 index 0000000..b5b6e32 --- /dev/null +++ b/src/component/Uploader/Popup/TaskDetail.tsx @@ -0,0 +1,101 @@ +import React from "react"; +import Grid from "@mui/material/Grid"; +import TimeAgo from "timeago-react"; +import Base, { Status } from "../core/uploader/base"; +import { Trans, useTranslation } from "react-i18next"; +import { sizeToString } from "../../../util"; +import FileBadge from "../../FileManager/FileBadge.tsx"; +import { FileType } from "../../../api/explorer.ts"; + +export interface TaskDetailProps { + uploader: Base; + error: string; +} + +export default function TaskDetail({ uploader, error }: TaskDetailProps) { + const { t } = useTranslation(); + const items = [ + { + name: t("uploader.fileName"), + value: uploader.task.name, + }, + { + name: t("uploader.fileSize"), + value: `${sizeToString(uploader.task.size)} ${ + uploader.task.session && uploader.task.session.chunk_size > 0 + ? t("uploader.chunkDescription", { + total: uploader.task.chunkProgress.length, + size: sizeToString(uploader.task.session.chunk_size), + }) + : t("uploader.noChunks") + }`, + }, + { + name: t("uploader.storagePolicy"), + value: uploader.task.policy.name, + }, + { + name: t("uploader.destination"), + value: ( + + ), + }, + uploader.task.session + ? { + name: t("uploader.uploadSession"), + value: ( + <> + , + ]} + /> + + ), + } + : null, + uploader.status === Status.error + ? { + name: t("uploader.errorDetails"), + value: error, + } + : null, + ]; + return ( + theme.typography.body2.fontSize }}> + {items.map((i) => ( + <> + {i && ( + + + {i.name} + + theme.palette.text.secondary, + wordBreak: "break-all", + }} + > + {i.value} + + + )} + + ))} + + ); +} diff --git a/src/component/Uploader/Popup/TaskList.tsx b/src/component/Uploader/Popup/TaskList.tsx new file mode 100755 index 0000000..8f07002 --- /dev/null +++ b/src/component/Uploader/Popup/TaskList.tsx @@ -0,0 +1,322 @@ +import React, { useMemo, useState } from "react"; +import { + Accordion, + AccordionDetails, + alpha, + AppBar, + Box, + Dialog, + DialogContent, + Fade, + IconButton, + Slide, + SlideProps, + styled, + Toolbar, + Tooltip, + Typography, +} from "@mui/material"; +import { lighten, useTheme } from "@mui/material/styles"; +import useMediaQuery from "@mui/material/useMediaQuery"; +import UploadTask from "./UploadTask.tsx"; +import MoreActions from "./MoreActions.js"; +import { Virtuoso } from "react-virtuoso"; +import Base, { Status } from "../core/uploader/base"; +import { useTranslation } from "react-i18next"; +import { useAppSelector } from "../../../redux/hooks.ts"; +import { defaultPath } from "../../../hooks/useNavigation.tsx"; +import SessionManager, { UserSettings } from "../../../session"; +import Nothing from "../../Common/Nothing.tsx"; +import Dismiss from "../../Icons/Dismiss.tsx"; +import MoreHorizontal from "../../Icons/MoreHorizontal.tsx"; +import Add from "../../Icons/Add.tsx"; +import { ExpandMoreRounded } from "@mui/icons-material"; +import { UploadProgressTotal } from "../../../redux/globalStateSlice.ts"; + +const Transition = React.forwardRef(function Transition(props: SlideProps, ref) { + return ; +}); + +const StyledDialog = styled(Dialog)(({ fullScreen, theme }) => ({ + "& .MuiDialog-container": { + alignItems: "flex-end", + justifyContent: "flex-end", + }, + "& .MuiDialog-paper": { + border: `1px solid ${theme.palette.divider}`, + }, + ...(fullScreen + ? { + margin: 0, + position: "fixed", + inset: "-1!important", + } + : { top: "auto!important", left: "auto!important" }), +})); + +const StyledDialogContent = styled(DialogContent)(({ theme }) => ({ + [theme.breakpoints.up("md")]: { + width: 500, + minHeight: 300, + maxHeight: "calc(100vh - 140px)", + }, + padding: 0, + paddingTop: "0!important", +})); + +const CaretDownIcon = styled(ExpandMoreRounded)<{ expanded: boolean }>(({ theme, expanded }) => ({ + transform: `rotate(${expanded ? 0 : 180}deg)`, + transition: theme.transitions.create("transform", { + duration: theme.transitions.duration.shortest, + easing: theme.transitions.easing.easeInOut, + }), +})); + +const sorters: { + [key: string]: (a: Base, b: Base) => number; +} = { + default: (a, b) => a.id - b.id, + reverse: (a, b) => b.id - a.id, +}; + +const filters: { + [key: string]: (u: Base) => boolean; +} = { + default: (_u) => true, + ongoing: (u) => u.status < Status.finished, +}; + +export interface TaskListProps { + open: boolean; + onClose: () => void; + selectFile: (path: string) => void; + taskList: Base[]; + onCancel: (filter: (u: any) => boolean) => void; + uploadManager: any; + progress?: UploadProgressTotal; + setUploaders: (f: (u: Base[]) => Base[]) => void; +} + +export default function TaskList({ + open, + onClose, + selectFile, + taskList, + onCancel, + uploadManager, + progress, + setUploaders, +}: TaskListProps) { + const { t } = useTranslation("application", { keyPrefix: "uploader" }); + const theme = useTheme(); + const fullScreen = useMediaQuery(theme.breakpoints.down("md")); + const path = useAppSelector((state) => state.fileManager[0].pure_path); + const [expanded, setExpanded] = useState(true); + const [useAvgSpeed, setUseAvgSpeed] = useState(SessionManager.getWithFallback(UserSettings.UseAvgSpeed)); + const [anchorEl, setAnchorEl] = useState(null); + const [filter, setFilter] = useState(SessionManager.getWithFallback(UserSettings.TaskFilter)); + const [sorter, setSorter] = useState(SessionManager.getWithFallback(UserSettings.TaskSorter)); + const [refreshList, setRefreshList] = useState(false); + + const handleActionClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleActionClose = () => { + setAnchorEl(null); + }; + + const close = (_e: any, reason: string) => { + if (reason !== "backdropClick") { + onClose(); + } else { + setExpanded(false); + } + }; + const handlePanelChange = (_event: any, isExpanded: boolean) => { + setExpanded(isExpanded); + }; + + useMemo(() => { + if (open) { + setExpanded(true); + } + }, [taskList]); + + const stopPop = (func: (e: React.MouseEvent) => void) => (e: React.MouseEvent) => { + e.stopPropagation(); + func(e); + }; + + const progressBar = useMemo( + () => + progress && progress.totalSize > 0 ? ( + 0 && !expanded}> +

+ +

:(

{t("common:renderError")}