diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index 935034d1..d18269b7 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -100,7 +100,8 @@ "onboarding": "Setup", "pagetitle": "{{title}} - movie-web", "register": "Register", - "settings": "Settings" + "settings": "Settings", + "migration": "Migration" } }, "home": { @@ -153,6 +154,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" diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index ec5e26cb..cebf308f 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -64,6 +64,8 @@ export enum Icons { DONATION = "donation", CIRCLE_QUESTION = "circle_question", BRUSH = "brush", + CLOUD_ARROW_UP = "cloud_arrow_up", + FILE_ARROW_DOWN = "file_arrow_down", } export interface IconProps { @@ -134,6 +136,8 @@ const iconList: Record = { donation: ``, circle_question: ``, brush: ``, + 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 37c55e0f..0a6b674d 100644 --- a/src/setup/App.tsx +++ b/src/setup/App.tsx @@ -19,6 +19,8 @@ import { DmcaPage, shouldHaveDmcaPage } from "@/pages/Dmca"; import { NotFoundPage } from "@/pages/errors/NotFoundPage"; import { HomePage } from "@/pages/HomePage"; 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"; @@ -129,6 +131,9 @@ function App() { /> } /> + } /> + } /> + {shouldHaveDmcaPage() ? ( } /> ) : null}