diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index e6714cb9..90ecb318 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -112,6 +112,7 @@ "pagetitle": "{{title}} - sudo-flix", "register": "Register", "settings": "Settings", + "migration": "Migration", "jip": "Jip" } }, @@ -197,6 +198,27 @@ "show": "Show" } }, + "migration": { + "start": { + "title": "Migrate your data", + "explainer": "If you wish to migrate or backup your data, you can do so using the options below. This will allow you to keep your data when you switch backend servers.", + "options": { + "or": "or", + "direct": { + "description": "This will directly migrate your data to the new server. This is the fastest option.

This option allows you to keep your passphrase the same!", + "title": "Direct migration", + "quality": "Easiest and fastest", + "action": "Transfer data" + }, + "download": { + "description": "This will download your data to your device. You can then upload it to the new server or just keep it for safekeeping.", + "title": "Download data", + "quality": "More technical", + "action": "Download data" + } + } + } + }, "navigation": { "banner": { "offline": "Check your internet connection, silly goose! 🦢" diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index dda27f5f..7960cba0 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -68,6 +68,8 @@ export enum Icons { BRUSH = "brush", UPLOAD = "upload", WEB = "web", + CLOUD_ARROW_UP = "cloud_arrow_up", + FILE_ARROW_DOWN = "file_arrow_down", } export interface IconProps { @@ -153,6 +155,8 @@ const iconList: Record = { `, + cloud_arrow_up: ``, + file_arrow_down: ``, }; function ChromeCastButton() { diff --git a/src/pages/migration/Migration.tsx b/src/pages/migration/Migration.tsx new file mode 100644 index 00000000..cd390c0f --- /dev/null +++ b/src/pages/migration/Migration.tsx @@ -0,0 +1,65 @@ +import { Trans, useTranslation } from "react-i18next"; +import { useNavigate } from "react-router-dom"; + +import { Icons } from "@/components/Icon"; +import { Stepper } from "@/components/layout/Stepper"; +import { CenterContainer } from "@/components/layout/ThinContainer"; +import { VerticalLine } from "@/components/layout/VerticalLine"; +import { Heading2, Paragraph } from "@/components/utils/Text"; +import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout"; +import { Card, CardContent, Link } from "@/pages/migration/utils"; +import { PageTitle } from "@/pages/parts/util/PageTitle"; + +export function MigrationPage() { + const navigate = useNavigate(); + const { t } = useTranslation(); + + return ( + + + + + + {t("migration.start.title")} + + + {t("migration.start.explainer")} + + +
+ navigate("/migration/direct")}> + + } + icon={Icons.CLOUD_ARROW_UP} + > + {t("migration.start.options.direct.action")} + + +
+ + + {t("migration.start.options.or")} + + +
+ navigate("/migration/download")}> + + {t("migration.start.options.download.action")} + + +
+ + + ); +} diff --git a/src/pages/migration/MigrationDirect.tsx b/src/pages/migration/MigrationDirect.tsx new file mode 100644 index 00000000..9b3a3702 --- /dev/null +++ b/src/pages/migration/MigrationDirect.tsx @@ -0,0 +1,12 @@ +import { CenterContainer } from "@/components/layout/ThinContainer"; +import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout"; +import { PageTitle } from "@/pages/parts/util/PageTitle"; + +export function MigrationDirectPage() { + return ( + + + Hi + + ); +} diff --git a/src/pages/migration/utils.tsx b/src/pages/migration/utils.tsx new file mode 100644 index 00000000..29f09857 --- /dev/null +++ b/src/pages/migration/utils.tsx @@ -0,0 +1,92 @@ +import classNames from "classnames"; +import { ReactNode } from "react"; +import { useNavigate } from "react-router-dom"; + +import { Icon, Icons } from "@/components/Icon"; +import { Heading2, Heading3, Paragraph } from "@/components/utils/Text"; + +export function Card(props: { + children?: React.ReactNode; + className?: string; + onClick?: () => void; +}) { + return ( +
+ {props.children} +
+ ); +} + +export function CardContent(props: { + title: ReactNode; + description: ReactNode; + subtitle: ReactNode; + colorClass: string; + children?: React.ReactNode; + icon: Icons; +}) { + return ( +
+
+ + + {props.subtitle} + + {props.title} + + {props.description} + +
+
{props.children}
+
+ ); +} + +export function Link(props: { + children?: React.ReactNode; + to?: string; + href?: string; + className?: string; + target?: "_blank"; +}) { + const navigate = useNavigate(); + return ( + { + if (props.to) navigate(props.to); + }} + href={props.href} + target={props.target} + className={classNames( + "text-onboarding-link cursor-pointer inline-flex gap-2 items-center group hover:opacity-75 transition-opacity", + props.className, + )} + rel="noreferrer" + > + {props.children} + + + ); +} diff --git a/src/setup/App.tsx b/src/setup/App.tsx index f2e7a231..d62a756d 100644 --- a/src/setup/App.tsx +++ b/src/setup/App.tsx @@ -22,6 +22,8 @@ import { NotFoundPage } from "@/pages/errors/NotFoundPage"; import { HomePage } from "@/pages/HomePage"; import { JipPage } from "@/pages/Jip"; import { LoginPage } from "@/pages/Login"; +import { MigrationPage } from "@/pages/migration/Migration"; +import { MigrationDirectPage } from "@/pages/migration/MigrationDirect"; import { OnboardingPage } from "@/pages/onboarding/Onboarding"; import { OnboardingExtensionPage } from "@/pages/onboarding/OnboardingExtension"; import { OnboardingProxyPage } from "@/pages/onboarding/OnboardingProxy"; @@ -178,6 +180,74 @@ function App() { {showDowntime && ( )} + + {/* functional routes */} + } /> + } /> + } /> + + {/* pages */} + + + + + + } + /> + + + + + + } + /> + } /> + } /> + } /> + } /> + } /> + } /> + } + /> + } /> + + } /> + } /> + + {shouldHaveDmcaPage() ? ( + } /> + ) : null} + + {/* Settings page */} + + + + } + /> + + {/* admin routes */} + } /> + + {/* other */} + } /> + } /> + {/* developer routes that can abuse workers are disabled in production */} + {process.env.NODE_ENV === "development" ? ( + } /> + ) : null} + } /> + ); }