UI Page to add current device to the current origin (#2757)

* UI Page to replace current device's origin

* Rename and change copy

* Rename field

* Update src/frontend/src/flows/addDevice/addCurrentDevice.json

Co-authored-by: sea-snake <[email protected]>

* Update src/frontend/src/flows/addDevice/addCurrentDevice.ts

Co-authored-by: sea-snake <[email protected]>

---------

Co-authored-by: sea-snake <[email protected]>

src/frontend/src/flows/addDevice/addCurrentDevice.json

@@ -0,0 +1,9 @@
+{
+  "en": {
+    "title": "Add Current Device",
+    "paragraph": "Please add the current device to your identity to improve the user experience with Internet Identity.",
+    "skip": "Skip",
+    "add": "Add",
+    "label_icon": "Recommended Action"
+  }
+}

src/frontend/src/flows/addDevice/addCurrentDevice.ts

@@ -0,0 +1,46 @@
+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 "./addCurrentDevice.json";
+
+const addCurrentDeviceTemplate = ({
+  add,
+  skip,
+  i18n,
+}: {
+  add: () => void;
+  skip: () => void;
+  i18n: I18n;
+}): TemplateResult => {
+  const copy = i18n.i18n(copyJson);
+
+  return infoScreenTemplate({
+    cancel: skip,
+    cancelText: copy.skip,
+    next: add,
+    nextText: copy.add,
+    title: copy.title,
+    paragraph: copy.paragraph,
+    scrollToTop: true,
+    icon: "info",
+    pageId: "add-current-device",
+    label: copy.label_icon,
+  });
+};
+
+export const addCurrentDevicePage = renderPage(addCurrentDeviceTemplate);
+
+// Prompt the user to add the current device (with the current origin).
+// Adding the current device to the current origin improves the UX of the user when they come back to this origin.
+export const addCurrentDevice = (): Promise<{
+  action: "skip" | "add-current-device";
+}> => {
+  return new Promise((resolve) =>
+    addCurrentDevicePage({
+      i18n: new I18n(),
+      add: () => resolve({ action: "add-current-device" }),
+      skip: () => resolve({ action: "skip" }),
+    })
+  );
+};

src/showcase/src/pages/addCurrentDevice.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 { addCurrentDevicePage } from "$src/flows/addDevice/addCurrentDevice";
+
+    addCurrentDevicePage({
+      replace: () => toast.info("Replace device's origin"),
+      skip: () => toast.info("Skip"),
+      i18n,
+    });
+  </script>
+</Screen>