UI Page to replace current device's origin

src/frontend/src/flows/addDevice/replaceCurrentDeviceOrigin.json

@@ -0,0 +1,9 @@
+{
+  "en": {
+    "title": "Change Current Device's Origin",
+    "paragraph": "Your current device is stored with a different origin. To avoid a bad user experience, you need to change the current device's origin with the new one.",
+    "skip": "Skip",
+    "replace_origin": "Change Origin",
+    "label_icon": "Recommended Action"
+  }
+}

src/frontend/src/flows/addDevice/replaceCurrentDeviceOrigin.ts

@@ -0,0 +1,48 @@
+import { infoScreenTemplate } from "$src/components/infoScreen";
+import { I18n } from "$src/i18n";
+import { renderPage } from "$src/utils/lit-html";
+import { TemplateResult } from "lit-html";
+import copyJson from "./replaceCurrentDeviceOrigin.json";
+
+const replaceCurrentDeviceOriginTemplate = ({
+  replace,
+  skip,
+  i18n,
+}: {
+  replace: () => void;
+  skip: () => void;
+  i18n: I18n;
+}): TemplateResult => {
+  const copy = i18n.i18n(copyJson);
+
+  return infoScreenTemplate({
+    cancel: skip,
+    cancelText: copy.skip,
+    next: replace,
+    nextText: copy.replace_origin,
+    title: copy.title,
+    paragraph: copy.paragraph,
+    scrollToTop: true,
+    icon: "info",
+    pageId: "replace-current-device-origin",
+    label: copy.label_icon,
+  });
+};
+
+export const replaceCurrentDeviceOriginPage = renderPage(
+  replaceCurrentDeviceOriginTemplate
+);
+
+// Prompt the user to change the origin of the current device.
+// Changing the origin improves the UX of the user when logging in with a different device.
+export const replaceCurrentDeviceOrigin = (): Promise<{
+  action: "skip" | "replace-origin-device";
+}> => {
+  return new Promise((resolve) =>
+    replaceCurrentDeviceOriginPage({
+      i18n: new I18n(),
+      replace: () => resolve({ action: "replace-origin-device" }),
+      skip: () => resolve({ action: "skip" }),
+    })
+  );
+};

src/showcase/src/pages/replaceCurrentDeviceOrigin.astro

@@ -0,0 +1,17 @@
+---
+import Screen from "../layouts/Screen.astro";
+---
+
+<Screen title="Add Phrase" pageName="addPhrase">
+  <script>
+    import { toast } from "$src/components/toast";
+    import { i18n } from "../i18n";
+    import { replaceCurrentDeviceOriginPage } from "$src/flows/addDevice/replaceCurrentDeviceOrigin";
+
+    replaceCurrentDeviceOriginPage({
+      replace: () => toast.info("Replace device's origin"),
+      skip: () => toast.info("Skip"),
+      i18n,
+    });
+  </script>
+</Screen>