Clean up and clarify authz landing

src/frontend/src/flows/authorize/index.json

@@ -15,11 +15,12 @@
     "auth_failed": "Something went wrong during authentication. Authenticating service was notified and you may close this page.",
     "auth_success": "Authentication successful. You may close this page.",
 
+    "create_to_continue_to": "Create an Internet Identity to connect to",
     "to_continue_to": "to connect to",
     "is_alternative_of": "is an alternative domain of",
     "auth_same_identity": "and you will be authenticated to both with the same identity.",
 
-    "first_time_create": "Securely connect to dapps on the Internet Computer",
+    "first_time_create": "Securely connect with Internet Identity",
     "first_time_use": "Use existing",
     "first_time_create_text": "Create Internet Identity",
 

src/frontend/src/flows/authorize/index.ts

@@ -5,13 +5,11 @@ import {
 import { displayError } from "$src/components/displayError";
 import { caretDownIcon, spinner } from "$src/components/icons";
 import { showMessage } from "$src/components/message";
-import { DappDescription, getDapps } from "$src/flows/dappsExplorer/dapps";
-import { dappsHeader } from "$src/flows/dappsExplorer/teaser";
 import { recoveryWizard } from "$src/flows/recovery/recoveryWizard";
 import { DynamicKey, I18n } from "$src/i18n";
 import { Connection } from "$src/utils/iiConnection";
 import { TemplateElement } from "$src/utils/lit-html";
-import { Chan, shuffleArray, unreachable } from "$src/utils/utils";
+import { Chan, unreachable } from "$src/utils/utils";
 import { html, render, TemplateResult } from "lit-html";
 import { asyncReplace } from "lit-html/directives/async-replace.js";
 import { authenticationProtocol } from "./postMessageInterface";
@@ -21,52 +19,45 @@ import copyJson from "./index.json";
 
 /* Template for the authbox when authenticating to a dapp */
 export const authnTemplateAuthorize = ({
-  origin,
+  origin: origin_,
   derivationOrigin,
-  dapps,
   i18n,
 }: {
   origin: string;
   derivationOrigin?: string;
-  dapps: DappDescription[];
   i18n: I18n;
 }): AuthnTemplates => {
   const copy = i18n.i18n(copyJson);
-  const chasm =
-    nonNullish(derivationOrigin) && derivationOrigin !== origin
+  const origin = html` <strong class="t-strong">${origin_}</strong>`;
+  const originInfo =
+    nonNullish(derivationOrigin) && derivationOrigin !== origin_
       ? mkChasm({
-          info: "shared identity",
+          info: origin,
           message: html`<span class="t-strong">${origin}</span>
             ${copy.is_alternative_of} <br /><span class="t-strong"
               >${derivationOrigin}</span
             ><br />${copy.auth_same_identity}`,
         })
-      : undefined;
+      : origin;
 
   const wrap = ({
-    showDapps = false,
+    firstTime = false,
     title,
   }: {
-    showDapps?: boolean;
+    firstTime?: boolean;
     title: DynamicKey;
   }) => html`
-    ${showDapps ? dappsHeader({ dapps, clickable: false }) : undefined}
     <div class="l-stack">
       <h1 class="t-title t-title--main" style="text-align: left;">${title}</h1>
       <p class="t-lead l-stack">
-        ${copy.to_continue_to}
-        <div class="l-stack l-stack--tight">
-          <strong class="t-strong"
-            >${origin}</strong
-          >
-        </div>
+        ${firstTime ? copy.create_to_continue_to : copy.to_continue_to}
       </p>
-      ${chasm}
+      ${originInfo}
     </div>
   `;
   return {
     firstTime: {
-      slot: wrap({ showDapps: true, title: copy.first_time_create }),
+      slot: wrap({ firstTime: true, title: copy.first_time_create }),
       useExistingText: copy.first_time_use,
       createAnchorText: copy.first_time_create_text,
     },
@@ -111,14 +102,12 @@ export const authFlowAuthorize = async (
     );
   const result = await authenticationProtocol({
     authenticate: async (authContext) => {
-      const dapps = shuffleArray(await getDapps());
       const authSuccess = await authenticateBox(
         connection,
         i18n,
         authnTemplateAuthorize({
           origin: authContext.requestOrigin,
           derivationOrigin: authContext.authRequest.derivationOrigin,
-          dapps,
           i18n,
         })
       );
@@ -185,7 +174,7 @@ export const authFlowAuthorize = async (
 
 /** Options to display a "chasm" in the authbox */
 type ChasmOpts = {
-  info: string;
+  info: TemplateElement;
   message: TemplateResult;
 };
 
@@ -198,18 +187,20 @@ const mkChasm = ({ info, message }: ChasmOpts): TemplateResult => {
   );
 
   return html`
-    <p class="t-centered t-paragraph t-weak"><span id="alternative-origin-chasm-toggle" class="t-action" @click=${() =>
-      chasmToggle()}>${info} <span class="t-link__icon c-chasm__button ${asyncReplace(
-    btnFlipped
-  )}">${caretDownIcon}</span></span>
-      <div class="c-chasm" aria-expanded=${asyncReplace(ariaExpanded)}>
-        <div class="c-chasm__inner">
-          <div class="c-chasm__arrow"></div>
-          <div class="t-weak c-chasm__content">
-              ${message}
-          </div>
-        </div>
+    <span
+      id="alternative-origin-chasm-toggle"
+      class="t-action"
+      @click=${() => chasmToggle()}
+      >${info}
+      <span class="t-link__icon c-chasm__button ${asyncReplace(btnFlipped)}"
+        >${caretDownIcon}</span
+      ></span
+    >
+    <div class="c-chasm" aria-expanded=${asyncReplace(ariaExpanded)}>
+      <div class="c-chasm__inner">
+        <div class="c-chasm__arrow"></div>
+        <div class="t-weak c-chasm__content">${message}</div>
       </div>
-    </p>
-`;
+    </div>
+  `;
 };

src/frontend/src/styles/main.css

@@ -1990,7 +1990,7 @@ a:hover,
 }
 
 .c-chasm__arrow {
-  margin: auto;
+  margin-left: calc(1.25 * var(--rs-card-bezel));
   width: 0;
   height: 0;
   background: var(--rc-input);

src/showcase/src/showcase.ts

@@ -118,13 +118,11 @@ const dapps = await getDapps();
 
 const authzTemplates = authnTemplateAuthorize({
   origin: "https://nowhere.com",
-  dapps,
   i18n,
 });
 const authzTemplatesAlt = authnTemplateAuthorize({
   origin: "https://nowhere.com",
   derivationOrigin: "http://fgte5-ciaaa-aaaad-aaatq-cai.ic0.app",
-  dapps,
   i18n,
 });
 
@@ -155,6 +153,8 @@ const iiPages: Record<string, () => void> = {
 
   authorizeNew: () =>
     authz.firstTime({ useExisting: () => console.log("Use existing") }),
+  authorizeNewAlt: () =>
+    authzAlt.firstTime({ useExisting: () => console.log("Use existing") }),
   authorizeUseExisting: () => authz.useExisting(),
   authorizePick: () =>
     authz.pick({