feat: updates to ToS and login page (#447)

worked with @dchoi27 to get ToS and other legal copy on the auth page and sidebar and to make some updates to the ToS for readability and better UX closes #397
storacha · Mar 23, 2023 · e62ad96 · e62ad96
1 parent b1c98d9
commit e62ad96
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 62 deletions.
diff --git a/examples/react/w3console/src/brand.tsx b/examples/react/w3console/src/brand.tsx
@@ -0,0 +1,18 @@
+export const serviceName = import.meta.env.VITE_W3UP_SERVICE_BRAND_NAME || 'dev.web3.storage'
+export const tosUrl = import.meta.env.VITE_W3UP_PROVIDER == 'did:web:nft.storage' ? 'https://nft.storage/terms' : 'https://web3.storage/terms'
+export const LogoIcon = () => (
+  <svg
+    width='30'
+    viewBox='0 0 27.2 27.18'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M13.6 27.18A13.59 13.59 0 1127.2 13.6a13.61 13.61 0 01-13.6 13.58zM13.6 2a11.59 11.59 0 1011.6 11.6A11.62 11.62 0 0013.6 2z'
+      fill='currentColor'
+    />
+    <path
+      d='M12.82 9.9v2.53h1.6V9.9l2.09 1.21.77-1.21-2.16-1.32 2.16-1.32-.77-1.21-2.09 1.21V4.73h-1.6v2.53l-2-1.21L10 7.26l2.2 1.32L10 9.9l.78 1.21zM18 17.79v2.52h1.56v-2.52L21.63 19l.78-1.2-2.16-1.33 2.16-1.28-.78-1.19-2.08 1.2v-2.58H18v2.56L15.9 14l-.77 1.2 2.16 1.32-2.16 1.33.77 1.15zM8.13 17.79v2.52h1.56v-2.52L11.82 19l.77-1.2-2.16-1.33 2.12-1.28-.73-1.24-2.13 1.23v-2.56H8.13v2.56L6.05 14l-.78 1.2 2.16 1.3-2.16 1.33.78 1.17z'
+      fill='currentColor'
+    />
+  </svg>
+)
diff --git a/examples/react/w3console/src/components/Authenticator.tsx b/examples/react/w3console/src/components/Authenticator.tsx
@@ -1,28 +1,41 @@
-import React from 'react'
 import {
   Authenticator as AuthCore,
   useAuthenticator
 } from '@w3ui/react-keyring'
+import { serviceName, tosUrl, LogoIcon } from '../brand'
 
 export function AuthenticationForm (): JSX.Element {
   const [{ submitted }] = useAuthenticator()
-
   return (
     <div className='authenticator'>
-      <AuthCore.Form className='bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl shadow-md px-10 pt-14 pb-8'>
+      <AuthCore.Form className='text-white/80 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl shadow-md px-10 pt-8 pb-8'>
+        <div className='flex flex-row gap-4 mb-8 flex justify-center gap-4'>
+          <LogoIcon />
+          <h1 className='text-2xl'>
+            {serviceName}
+          </h1>
+        </div>
         <div>
-          <label className='block mb-2 uppercase text-white/80 text-xs font-semibold tracking-wider m-1 font-mono' htmlFor='authenticator-email'>Email</label>
+          <label className='block mb-2 uppercase text-xs font-semibold tracking-wider m-1 font-mono' htmlFor='authenticator-email'>Email</label>
           <AuthCore.EmailInput className='block rounded-md p-2 w-80 bg-white shadow-md' id='authenticator-email' required />
         </div>
         <button
-          className='mt-2 bg-white/0 w-full hover:bg-blue-800 rounded-md w-full text-sm font-medium text-white py-2 px-8 transition-colors ease-in'
+          className='mt-2 bg-white/0 w-full hover:bg-blue-800 rounded-md w-full text-sm font-medium py-2 px-8 transition-colors ease-in'
           type='submit'
           disabled={submitted}
         >
           Register
         </button>
       </AuthCore.Form>
-    </div>
+      <p className='text-xs text-white/80 italic max-w-xs text-left mt-6'>
+        By registering with {serviceName} w3up beta, you agree to the <a className='underline' href={tosUrl}>Terms of Service</a>.
+        If you have an existing non-w3up beta account with {serviceName} and register for
+        the w3up beta version of {serviceName} using the same email, then at the end of the
+        beta period, these accounts will be combined. Until the beta period is over and this
+        migration occurs, uploads to w3up will not appear in your {serviceName} account
+        (and vice versa), even if you register with the same email.
+      </p>
+    </div >
   )
 }
 

diff --git a/examples/react/w3console/src/pages/index.tsx b/examples/react/w3console/src/pages/index.tsx
@@ -14,6 +14,7 @@ import { UploadsList } from '../components/UploadsList'
 import { SpaceFinder } from '../components/SpaceFinder'
 import { SpaceCreatorForm, SpaceCreator } from '../components/SpaceCreator'
 import { AuthenticationEnsurer } from '../components/Authenticator'
+import { tosUrl, LogoIcon } from '../brand'
 
 function SpaceRegistrar (): JSX.Element {
   const [, { registerSpace }] = useKeyring()
@@ -172,21 +173,7 @@ function SpaceSelector (props: any): JSX.Element {
 export function Logo (): JSX.Element {
   return (
     <h1 className='font-bold flex flex-row justify-center items-center gap-2'>
-      <svg
-        className='site-logo-image text-white'
-        width='30'
-        viewBox='0 0 27.2 27.18'
-        xmlns='http://www.w3.org/2000/svg'
-      >
-        <path
-          d='M13.6 27.18A13.59 13.59 0 1127.2 13.6a13.61 13.61 0 01-13.6 13.58zM13.6 2a11.59 11.59 0 1011.6 11.6A11.62 11.62 0 0013.6 2z'
-          fill='currentColor'
-        />
-        <path
-          d='M12.82 9.9v2.53h1.6V9.9l2.09 1.21.77-1.21-2.16-1.32 2.16-1.32-.77-1.21-2.09 1.21V4.73h-1.6v2.53l-2-1.21L10 7.26l2.2 1.32L10 9.9l.78 1.21zM18 17.79v2.52h1.56v-2.52L21.63 19l.78-1.2-2.16-1.33 2.16-1.28-.78-1.19-2.08 1.2v-2.58H18v2.56L15.9 14l-.77 1.2 2.16 1.32-2.16 1.33.77 1.15zM8.13 17.79v2.52h1.56v-2.52L11.82 19l.77-1.2-2.16-1.33 2.12-1.28-.73-1.24-2.13 1.23v-2.56H8.13v2.56L6.05 14l-.78 1.2 2.16 1.3-2.16 1.33.78 1.17z'
-          fill='currentColor'
-        />
-      </svg>
+      <LogoIcon />
       console
     </h1>
   )
@@ -241,8 +228,9 @@ export default function Home (): JSX.Element {
                 />
               </div>
               <div>
-                <SpaceCreator className='mb-4' />
+                <SpaceCreator className='mb-8' />
                 <Logo />
+                <a className='text-xs block text-center mt-2' href={tosUrl}>Terms</a>
               </div>
             </div>
           </nav>

diff --git a/examples/react/w3console/src/pages/terms.tsx b/examples/react/w3console/src/pages/terms.tsx
@@ -1,74 +1,75 @@
+import { LogoIcon, tosUrl } from '../brand'
+
 export default function Terms () {
   const serviceName = import.meta.env.VITE_W3UP_SERVICE_BRAND_NAME || 'dev.web3.storage'
   return (
     <div className='flex flex-col justify-start items-center min-h-full w-full bg-gray-900 text-white p-8'>
-      <h1 className='text-2xl my-4 font-bold'>
-        {serviceName} w3up beta Terms of Service
-      </h1>
-      <p className='max-w-xl leading-relaxed'>
-        {serviceName} w3up is currently a beta preview feature for {serviceName}, 
-        and will eventually be used as the primary upload API for {serviceName}. 
-        {serviceName} includes <a href="https://github.com/web3-storage/w3up-client">w3up-client</a>, 
-        <a href="https://github.com/web3-storage/w3ui">w3ui</a>, 
-        <a href="https://github.com/web3-storage/w3cli">w3cli</a>, and the 
-        <a href="https://github.com/web3-storage/w3protocol">underlying APIs and services</a> 
-        for uploading data (collectively, the “w3up beta”). By using the {serviceName} 
-        w3up beta, you consent to the general {serviceName} 
-        {import.meta.env.VITE_W3UP_PROVIDER == 'did:web:nft.storage' ?
-          <a href="https://nft.storage/terms">Terms of Service</a> :
-          <a href="https://web3.storage/terms">Terms of Service</a>
-        }
+      <div className='flex flex-row gap-4'>
+        <LogoIcon />
+        <h1 className='text-2xl my-4 font-bold'>
+          {serviceName} w3up beta Terms of Service
+        </h1>
+      </div>
+      <p className='my-2 max-w-xl leading-relaxed'>
+        {serviceName} w3up is currently a beta preview feature for {serviceName},
+        and will eventually be used as the primary upload API for {serviceName}.{' '}
+        {serviceName} includes <a className='underline' href="https://github.com/web3-storage/w3up-client">w3up-client</a>,{' '}
+        <a className='underline' href="https://github.com/web3-storage/w3ui">w3ui</a>,{' '}
+        <a className='underline' href="https://github.com/web3-storage/w3cli">w3cli</a>, and the{' '}
+        <a className='underline' href="https://github.com/web3-storage/w3protocol">underlying APIs and services</a>{' '}
+        for uploading data (collectively, the “w3up beta”). By using the {serviceName}{' '}
+        w3up beta, you consent to the general {serviceName} <a className='underline' href={tosUrl}>Terms of Service</a>
         {import.meta.env.VITE_W3UP_PROVIDER == 'did:web:nft.storage' &&
           ', meaning you will only upload NFT data (i.e., off-chain NFT metadata and assets) via your account'
         }
         .
       </p>
-      <p className='max-w-xl leading-relaxed'>
+      <p className='my-2 max-w-xl leading-relaxed '>
         {import.meta.env.VITE_W3UP_PROVIDER == 'did:web:web3.storage' &&
           'Registering for and uploading data to the web3.storage w3up beta is currently free. '
         }
-        At the end of the preview period, accounts registered through the {serviceName} w3up beta 
+        At the end of the preview period, accounts registered through the {serviceName} w3up beta
         (“w3up account(s)”) will ultimately be integrated with the broader account system of {serviceName}.
       </p>
       <h2 className='text-lg my-4 font-bold'>
         Accounts Linked to Email Addresses
       </h2>
-      <p className='max-w-xl leading-relaxed'>
-        In order to register for the {serviceName} w3up beta, you will be required to provide and verify an 
+      <p className='my-2 max-w-xl leading-relaxed'>
+        In order to register for the {serviceName} w3up beta, you will be required to provide and verify an
         email address, which will be permanently associated with your {serviceName} w3up account and cannot be changed.
       </p>
-      <p className='max-w-xl leading-relaxed'>
-        If you sign up for the {serviceName} w3up beta with the same email address used for a {serviceName} account, 
-        at the end of the preview period we will merge your data uploaded through the w3up beta with the {serviceName} 
+      <p className='my-2 max-w-xl leading-relaxed'>
+        If you sign up for the {serviceName} w3up beta with the same email address used for a {serviceName} account,
+        at the end of the preview period we will merge your data uploaded through the w3up beta with the {serviceName}{' '}
         account linked to the same email.
       </p>
-      <p className='max-w-xl leading-relaxed'>
-        If you intend to separate uploaded data between web3.storage and NFT.Storage using w3up during the w3up beta period (e.g., 
-        you want your NFT data to be stored for free on NFT.Storage and non-NFT data to be stored for payment on web3.storage), 
+      <p className='my-2 max-w-xl leading-relaxed'>
+        If you intend to separate uploaded data between web3.storage and NFT.Storage using w3up during the w3up beta period (e.g.,
+        you want your NFT data to be stored for free on NFT.Storage and non-NFT data to be stored for payment on web3.storage),
         please register for the {import.meta.env.VITE_W3UP_PROVIDER == 'did:web:nft.storage' ? 'web3.storage' : 'NFT.Storage'} w3up beta separately.
       </p>
       <h2 className='text-lg my-4 font-bold'>
         w3up Accounts Moving to {serviceName}
       </h2>
-      
+
       {import.meta.env.VITE_W3UP_PROVIDER == 'did:web:web3.storage' &&
         <div>
-        <p className='max-w-xl leading-relaxed'>
-          At the end of the preview period, your web3.storage w3up beta account will be integrated with the broader web3.storage 
-          account system. You acknowledge that once the preview period ends, all data uploaded through the w3up beta will be combined 
-          with existing uploads to your web3.storage account, and any aggregate data volume exceeding the Free Tier data limits of 
-          web3.storage during this preview window will eventually require payment for us to continue storing it and making it available.
-        </p>
-        <p className='max-w-xl leading-relaxed'>
-          Please refer to the web3.storage website for <a href="https://web3.storage/pricing/">information on pricing</a>. If you exceed 
-          the Free Tier data limits of web3.storage and do not intend to pay, please do not use the w3up beta for long-term storage.
-        </p>
+          <p className='my-2 max-w-xl leading-relaxed'>
+            At the end of the preview period, your web3.storage w3up beta account will be integrated with the broader web3.storage
+            account system. You acknowledge that once the preview period ends, all data uploaded through the w3up beta will be combined
+            with existing uploads to your web3.storage account, and any aggregate data volume exceeding the Free Tier data limits of
+            web3.storage during this preview window will eventually require payment for us to continue storing it and making it available.
+          </p>
+          <p className='my-2 max-w-xl leading-relaxed'>
+            Please refer to the web3.storage website for <a className='underline' href="https://web3.storage/pricing/">information on pricing</a>. If you exceed
+            the Free Tier data limits of web3.storage and do not intend to pay, please do not use the w3up beta for long-term storage.
+          </p>
         </div>
       }
       {import.meta.env.VITE_W3UP_PROVIDER == 'did:web:nft.storage' &&
-        <p className='max-w-xl leading-relaxed'>
-          At the end of the preview period, your NFT.Storage w3up beta account will be integrated with the broader NFT.Storage account system. 
-          You acknowledge that once the preview period ends, all data uploaded through the w3up beta will be combined with existing uploads to 
+        <p className='my-2 max-w-xl leading-relaxed'>
+          At the end of the preview period, your NFT.Storage w3up beta account will be integrated with the broader NFT.Storage account system.
+          You acknowledge that once the preview period ends, all data uploaded through the w3up beta will be combined with existing uploads to
           your NFT.Storage account.
         </p>
       }