Add migrating screen

This blocks access to ancher management functionality by a migration screen.
This is a soft lock, that can be bypassed.

src/frontend/src/components/icons.ts

@@ -271,3 +271,18 @@ export const caretDownIcon = html`
     </g>
   </svg>
 `;
+
+export const wrenchIcon = html`
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18.5461 3.61269C18.5344 3.59159 18.518 3.5705 18.4993 3.55409C18.3821 3.43691 18.1922 3.43691 18.0751 3.55409L14.0368 7.59237L12.4454 6.00097L16.486 1.96034C16.5047 1.94159 16.5188 1.92284 16.5329 1.90175C16.6172 1.75878 16.5704 1.57597 16.4274 1.49159C14.1258 0.132219 11.1118 0.443938 9.1313 2.42206C7.56099 3.99238 7.04068 6.21894 7.57271 8.2205L0.705522 15.0877C0.63521 15.158 0.639897 15.2728 0.712553 15.3455L4.6899 19.3228C4.76255 19.3955 4.87974 19.4002 4.94771 19.3299L11.8126 12.465C13.8165 12.9994 16.043 12.4814 17.6157 10.9088C19.5938 8.92831 19.9055 5.91425 18.5461 3.61269ZM16.4227 9.71347C15.061 11.0752 13.0172 11.3377 11.393 10.501L11.1868 10.7072L11.1844 10.7049L4.76255 17.1291L2.9063 15.2728L8.29927 9.87987C8.29927 9.87987 8.29927 9.88222 8.30162 9.88222L9.53912 8.64472C8.7024 7.0205 8.9649 4.97675 10.3266 3.61503C10.7658 3.17546 11.2947 2.83586 11.8772 2.61946C12.4596 2.40305 13.082 2.31494 13.7016 2.36113L10.5868 5.47363C10.4461 5.61447 10.3671 5.80541 10.3671 6.00448C10.3671 6.20356 10.4461 6.3945 10.5868 6.53534L13.5047 9.45331C13.6456 9.594 13.8365 9.67303 14.0356 9.67303C14.2347 9.67303 14.4256 9.594 14.5665 9.45331L17.679 6.34081C17.7657 7.55487 17.3415 8.79706 16.4227 9.71347Z"
+      fill="#262626"
+    />
+  </svg>
+`;

src/frontend/src/flows/authenticate/index.ts

@@ -173,6 +173,8 @@ export const authorizeAuthentication = async (
 
       if (authContext === null) {
         // The user has manually navigated to "/#authorize".
+        // TODO: show error here, silent reload is just awkward
+        // NOTE: hash stays behind (just "#")
         window.location.hash = "";
         window.location.reload();
         return new Promise((_resolve) => {

src/frontend/src/flows/recovery/setupRecovery.ts

@@ -1,4 +1,5 @@
 import { WebAuthnIdentity } from "@dfinity/identity";
+import { blockMigration } from "../../utils/migrating";
 import { displayError } from "../../components/displayError";
 import { withLoader } from "../../components/loader";
 import { fromMnemonicWithoutValidation } from "../../crypto/ed25519";
@@ -16,6 +17,7 @@ export const setupRecovery = async (
   userNumber: bigint,
   connection: AuthenticatedConnection
 ): Promise<void> => {
+  await blockMigration();
   const devices = await connection.lookupAll(userNumber);
   const recoveryMechanism = await chooseRecoveryMechanism(devices);
   if (recoveryMechanism === null) {

src/frontend/src/index.ts

@@ -11,6 +11,7 @@ import { showWarningIfNecessary } from "./banner";
 import { authorizeAuthentication } from "./flows/authenticate";
 import { displayError } from "./components/displayError";
 import { Connection } from "./utils/iiConnection";
+import { blockMigration } from "./utils/migrating";
 
 /** Reads the canister ID from the <script> tag.
  *
@@ -73,6 +74,7 @@ const init = async () => {
     }
     // Open the management page
     case "manage": {
+      await blockMigration();
       // Go through the login flow, potentially creating an anchor.
       const { userNumber, connection: authenticatedConnection } = await login(
         connection

src/frontend/src/utils/migrating.ts

@@ -0,0 +1,46 @@
+import { html, render } from "lit-html";
+import { wrenchIcon } from "../components/icons";
+
+/** Block on the migration screen.
+ * Can be jailbroken by clicking the wrench icon 3 times.
+ **/
+export function blockMigration(): Promise<void> {
+  return new Promise<void>((resolve) => {
+    let jailbreakHitCount = 0;
+    const jailbreakHit = () => {
+      if (++jailbreakHitCount >= 3) {
+        resolve();
+      }
+    };
+    render(
+      html`
+        <div class="l-container c-card c-card--highlight">
+          <h1 class="t-title t-title--main">
+            Maintenance <i @click="${jailbreakHit}">${wrenchIcon}</i>
+          </h1>
+          <div class="l-stack">
+            <h2 class="t-title">Internet Identity will be back shortly.</h2>
+            <p class="t-paragraph">
+              Internet Identity is undergoing a
+              <a
+                class="t-link"
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://forum.dfinity.org/t/internet-identity-subnet-migration-on-october-26/15989"
+                >migration</a
+              >. You can still use Internet Identity to authenticate to dapps,
+              but anchor management and anchor creation is temporarily disabled.
+            </p>
+            <p class="t-paragraph">
+              For frequently asked questions, check the
+              <a href="/faq" title="Go to the Internet Identity FAQ page"
+                >FAQ page</a
+              >.
+            </p>
+          </div>
+        </div>
+      `,
+      document.getElementById("pageContent") as HTMLElement
+    );
+  });
+}

src/frontend/src/utils/registerAllowedCheck.ts

@@ -2,6 +2,7 @@ import { LoginFlowResult } from "../flows/login/flowResult";
 import { register } from "../flows/register";
 import { registerDisabled } from "../flows/registerDisabled";
 import { Connection } from "../utils/iiConnection";
+import { blockMigration } from "../utils/migrating";
 
 /** Check that the current origin is not the explicit canister id or a raw url.
  *  Explanation why we need to do this:
@@ -16,5 +17,6 @@ function isRegistrationAllowed() {
 export const registerIfAllowed = async (
   connection: Connection
 ): Promise<LoginFlowResult | null> => {
+  await blockMigration();
   return isRegistrationAllowed() ? register(connection) : registerDisabled();
 };