Merge branch 'main' into feat/authenticator-tests

storacha · Feb 3, 2023 · b0bbb59 · b0bbb59
2 parents e7f02c9 + 2266eb2
commit b0bbb59
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 20 deletions.
diff --git a/examples/react/w3console/index.html b/examples/react/w3console/index.html
@@ -7,7 +7,7 @@
     <title>w3console</title>
   </head>
   <body class="h-full">
-    <div id="app"></div>
+    <div id="app" class="h-full"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/examples/react/w3console/public/w3.svg b/examples/react/w3console/public/w3.svg
diff --git a/examples/react/w3console/src/app.tsx b/examples/react/w3console/src/app.tsx
@@ -135,7 +135,7 @@ export function Logo (): JSX.Element {
 export function App (): JSX.Element {
   return (
     <W3APIProvider uploadsListPageSize={20}>
-      <Authenticator>
+      <Authenticator className='h-full'>
         <div className='flex min-h-full w-full'>
           <nav className='flex-none w-64 bg-gray-900 text-white px-4 pb-4 border-r border-gray-800'>
             <div className='flex flex-col justify-between min-h-full'>
@@ -148,7 +148,7 @@ export function App (): JSX.Element {
               </div>
             </div>
           </nav>
-          <main className='grow bg-dark-gray text-white p-4'>
+          <main className='grow bg-gray-dark text-white p-4'>
             <SpaceSection />
           </main>
         </div>

diff --git a/examples/react/w3console/src/index.css b/examples/react/w3console/src/index.css
@@ -2,3 +2,24 @@
 @tailwind components;
 @tailwind utilities;
 
+
+.w3ui-authenticator {
+  background-image: url("/w3.svg");
+  background-repeat: no-repeat;
+  background-position: center 95%;
+  @apply bg-gray-900;
+}
+
+.w3ui-authenticator-form {
+  background: linear-gradient(104.3deg,#3064e0 -8.21%,#00d8ff 88.68%);
+  @apply shadow-md px-10 pt-14 pb-8 rounded-xl;
+}
+
+.w3ui-authenticator-form .email-field label {
+  @apply text-white font-semibold uppercase text-xs tracking-wider m-1 font-mono opacity-80;
+}
+
+.w3ui-authenticator-form .email-field input {
+  width: 22rem;
+  @apply bg-white rounded-md shadow-md
+}
diff --git a/packages/react/src/Authenticator.tsx b/packages/react/src/Authenticator.tsx
@@ -5,26 +5,30 @@ export function AuthenticationForm (): JSX.Element {
   const [{ submitted }] = useAuthenticator()
 
   return (
-    <AuthCore.Form className='w3ui-authenticator-form'>
-      <div className='email-field'>
-        <label htmlFor='w3ui-authenticator-email'>Email address:</label>
-        <AuthCore.EmailInput id='w3ui-authenticator-email' required />
-      </div>
-      <button className='register w3ui-button' type='submit' disabled={submitted}>Register</button>
-    </AuthCore.Form>
+    <div className='w3ui-authenticator'>
+      <AuthCore.Form className='w3ui-authenticator-form'>
+        <div className='email-field'>
+          <label htmlFor='w3ui-authenticator-email'>Email</label>
+          <AuthCore.EmailInput id='w3ui-authenticator-email' required />
+        </div>
+        <button className='register w3ui-button' type='submit' disabled={submitted}>Register</button>
+      </AuthCore.Form>
+    </div>
   )
 }
 
 export function AuthenticationSubmitted (): JSX.Element {
   const [{ email }] = useAuthenticator()
 
   return (
-    <div className='w3ui-authenticator-verify-email'>
-      <h1 className='message'>Verify your email address!</h1>
-      <p className='detail'>Click the link in the email we sent to {email} to sign in.</p>
-      <AuthCore.CancelButton className='cancel w3ui-button'>
-        Cancel
-      </AuthCore.CancelButton>
+    <div className='w3ui-authenticator'>
+      <div className='w3ui-authenticator-verify-email'>
+        <h1 className='message'>Verify your email address!</h1>
+        <p className='detail'>Click the link in the email we sent to {email} to sign in.</p>
+        <AuthCore.CancelButton className='cancel w3ui-button'>
+          Cancel
+        </AuthCore.CancelButton>
+      </div>
     </div>
   )
 }
@@ -34,11 +38,11 @@ export function AuthenticationEnsurer ({ children }: { children: JSX.Element | J
   const registered = Boolean(spaces.some(s => s.registered()))
   if (registered) {
     return <>{children}</>
-  } else if (submitted) {
+  }
+  if (submitted) {
     return <AuthenticationSubmitted />
-  } else {
-    return <AuthenticationForm />
   }
+  return <AuthenticationForm />
 }
 
 interface AuthenticatorProps {
@@ -48,7 +52,7 @@ interface AuthenticatorProps {
 
 export function Authenticator ({ children, className = '' }: AuthenticatorProps): JSX.Element {
   return (
-    <AuthCore as='div' className={`w3ui-authenticator ${className}`}>
+    <AuthCore as='div' className={className}>
       <AuthenticationEnsurer>
         {children}
       </AuthenticationEnsurer>