Stronger prompt for recording identity anchor (#475)

Stronger prompt for recording identity anchor so that people do not lose their newly created identity anchors.
dfinity · Dec 6, 2021 · e039644 · e039644
1 parent 35bbfc4
commit e039644
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "generate:js": "didc bind ./src/internet_identity/internet_identity.did -t js > src/frontend/generated/internet_identity_idl.js",
     "build": "NODE_ENV=production webpack",
     "test": "jest --roots ./src/frontend --verbose --testPathIgnorePatterns=\"src/frontend/src/test-e2e\"",
-    "test:e2e": "jest --roots ./src/frontend --verbose --testPathPattern=\"src/frontend/src/test-e2e\"",
+    "test:e2e": "jest --roots ./src/frontend --verbose --testPathPattern=\"src/frontend/src/test-e2e\" --detectOpenHandles",
     "test:e2e-desktop": "SCREEN=desktop npm run test:e2e",
     "test:e2e-mobile": "SCREEN=mobile npm run test:e2e",
     "lint": "eslint --cache --cache-location node_modules/.cache/eslint 'src/frontend/**/*.ts*'",

diff --git a/src/frontend/src/flows/displayUserNumber.ts b/src/frontend/src/flows/displayUserNumber.ts
@@ -1,12 +1,23 @@
 import { html, render } from "lit-html";
+import { warningIcon } from "../components/icons";
 
 const pageContent = (userNumber: bigint) => html`
   <div class="container">
     <h1>Congratulations!</h1>
-    <p>
-      Please record your new Identity Anchor. You will need it later to use
-      Internet Identity or to add additional devices.
-    </p>
+    <p>Your new Identity Anchor has been created.</p>
+    <div class="nagBox">
+      <div class="nagIcon">${warningIcon}</div>
+      <div class="nagContent">
+        <div class="nagTitle">Record Your Identity Anchor</div>
+        <div class="nagMessage">
+          Please record your new Identity Anchor. Keep a backup on a storage
+          medium and write it down. You will need it later to use Internet
+          Identity or to add additional devices. If you lose your Identity
+          Anchor, you will no longer be able to use this identity to
+          authenticate to dApps.
+        </div>
+      </div>
+    </div>
     <label>Identity Anchor:</label>
     <div class="highlightBox">${userNumber}</div>
     <button id="displayUserContinue" class="primary">Continue</button>

diff --git a/src/frontend/src/flows/manage.ts b/src/frontend/src/flows/manage.ts
@@ -57,50 +57,6 @@ const displayFailedToListDevices = (error: Error) =>
 // The styling of the page
 
 const style = () => html`<style>
-  .nagBox {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 1rem;
-    margin-bottom: 2rem;
-    box-sizing: border-box;
-    border-style: double;
-    border-width: 2px;
-    border-radius: 4px;
-    border-image-slice: 1;
-    outline: none;
-    border-image-source: linear-gradient(
-      270.05deg,
-      #29abe2 10.78%,
-      #522785 22.2%,
-      #ed1e79 42.46%,
-      #f15a24 59.41%,
-      #fbb03b 77.09%
-    );
-  }
-  .nagIcon {
-    align-self: flex-start;
-  }
-  .recoveryNag {
-    display: flex;
-    flex-direction: column;
-  }
-  .recoveryNagTitle {
-    font-weight: 600;
-    font-size: 1.1rem;
-  }
-  .recoveryNagMessage {
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
-    font-size: 1rem;
-  }
-  .recoveryNagButton {
-    padding: 0.2rem 0.4rem;
-    border-radius: 2px;
-    width: fit-content;
-    align-self: flex-end;
-    margin: 0;
-  }
   .labelWithAction {
     margin-top: 1rem;
     display: flex;
@@ -179,12 +135,12 @@ const deviceListItem = (alias: string) => html`
 const recoveryNag = () => html`
   <div class="nagBox">
     <div class="nagIcon">${warningIcon}</div>
-    <div class="recoveryNag">
-      <div class="recoveryNagTitle">Recovery Mechanism</div>
-      <div class="recoveryNagMessage">
+    <div class="nagContent">
+      <div class="nagTitle">Recovery Mechanism</div>
+      <div class="nagMessage">
         Add a recovery mechanism to help protect this Identity Anchor.
       </div>
-      <button id="addRecovery" class="primary recoveryNagButton">
+      <button id="addRecovery" class="primary nagButton">
         Add Recovery Key
       </button>
     </div>

diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
@@ -511,3 +511,49 @@ hr {
   min-width: 1rem;
   padding: 1rem;
 }
+
+.nagBox {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  margin-bottom: 2rem;
+  box-sizing: border-box;
+  border-style: double;
+  border-width: 2px;
+  border-radius: 4px;
+  border-image-slice: 1;
+  outline: none;
+  border-image-source: linear-gradient(
+    270.05deg,
+    #29abe2 10.78%,
+    #522785 22.2%,
+    #ed1e79 42.46%,
+    #f15a24 59.41%,
+    #fbb03b 77.09%
+  );
+}
+.nagIcon {
+  align-self: flex-start;
+}
+
+.nagContent {
+  display: flex;
+  flex-direction: column;
+}
+.nagTitle {
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+.nagMessage {
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+}
+.nagButton {
+  padding: 0.2rem 0.4rem;
+  border-radius: 2px;
+  width: fit-content;
+  align-self: flex-end;
+  margin: 0;
+}