fix: remove authenticator class when registed (#352)

only include the `w3ui-authenticator` class in the dom when we want to show the log in box. otherwise the layout we choose for the register form is inherited by the logged in app layout which is undesirable fixes #351 License: MIT Signed-off-by: Oli Evans <[email protected]>
storacha · Feb 3, 2023 · 3668f3b · 3668f3b
1 parent 9cace63
commit 3668f3b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 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/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'>

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 address:</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>