fix: add validation copy (#257)

superseedes #139 <img width="897" alt="Screenshot 2022-12-06 at 16 47 14" src="https://user-images.githubusercontent.com/314190/205972386-05fec7b8-e17b-4a3d-8f18-ede71e4b5ad1.png"> closes #139
storacha · Dec 6, 2022 · 7f50af4 · 7f50af4
1 parent 61b5227
commit 7f50af4
Showing 1 changed file with 51 additions and 3 deletions.
diff --git a/packages/access-api/src/utils/html.js b/packages/access-api/src/utils/html.js
@@ -14,9 +14,10 @@ export function buildDocument(body) {
 
 <head>
   <meta charset="utf-8">
-  <title></title>
+  <title>Web3 Storage</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@acab/reset.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">
   <style>
     :root {
@@ -28,6 +29,18 @@ export function buildDocument(body) {
       --scrollbar-thumb: hsl(212deg 27% 10%);
       --scrollbar-thumb-hover: hsl(212deg 27% 6%);
     }
+    :where(:root) body {
+      display: grid;
+      height: 100vh;
+      height: 100dvh;
+      padding: 0;
+      margin: 0;
+      max-width: 100%;
+    }
+    body {
+      margin: 0 40px;
+      padding: 40px 0;
+    }
     .fcenter {
       display: flex;
       align-items: center;
@@ -37,6 +50,21 @@ export function buildDocument(body) {
     .mcenter {
       margin: 0 auto;
     }
+
+    .box {
+      max-width: 640px;
+      background-color: var(--background-alt);
+      padding: 20px;
+      margin: 1em 0;
+      border-radius: 6px;
+      overflow: hidden;
+    }
+    .box > p {
+      margin-bottom: 10px;
+    }
+    .box > p:last-child {
+      margin-bottom: 0;
+    }
   </style>
 </head>
 <body>
@@ -77,7 +105,7 @@ export class HtmlResponse extends Response {
  * @param {string} param0.qrcode
  */
 export const ValidateEmail = ({ delegation, ucan, qrcode }) => (
-  <div class="fcenter" style={{ height: '90vh', margin: '0 40px' }}>
+  <div class="fcenter">
     <img
       src="https://web3.storage/android-chrome-512x512.png"
       height="80"
@@ -88,6 +116,26 @@ export const ValidateEmail = ({ delegation, ucan, qrcode }) => (
       {delegation.capabilities[0].nb.identity.replace('mailto:', '')} was
       confirmed. You may close this window.
     </p>
+    <div class="box">
+      <p>
+        During the beta period, uploads via w3up will only appear via the beta
+        APIs, and not on the web3.storage or NFT.Storage websites, even if the
+        associated email addresses are the same.
+      </p>
+      <p>
+        At the end of the beta period, web3.storage and NFT.Storage's upload
+        APIs and existing accounts will be upgraded to use w3up. Uploads via the
+        w3up beta be migrated to web3.storage by default and, if applicable,
+        combined with the relevant existing web3.storage account (based on email
+        address). If you would rather have your beta w3up account be associated
+        with the NFT.Storage product (e.g., you are only storing off-chain NFT
+        data), please email us at{' '}
+        <a href="mailto:[email protected]">[email protected]</a>. All w3up
+        uploads associated with a given registered email will only be able to be
+        associated with one of either web3.storage or NFT.Storage when these
+        uploads are migrated.
+      </p>
+    </div>
     <details style={{ maxWidth: '80vw', overflow: 'overlay' }}>
       {' '}
       <summary>More details</summary>
@@ -119,7 +167,7 @@ export const ValidateEmail = ({ delegation, ucan, qrcode }) => (
  * @param {string} param0.msg
  */
 export const ValidateEmailError = ({ msg }) => (
-  <div class="fcenter" style={{ height: '90vh', margin: '0 40px' }}>
+  <div class="fcenter">
     <img
       src="https://web3.storage/android-chrome-512x512.png"
       height="80"