Show but disable unavailable auth methods

stackernews · Sep 10, 2024 · ff378fb · ff378fb
1 parent 11a3e3e
commit ff378fb
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 23 deletions.
diff --git a/components/login-button.js b/components/login-button.js
@@ -4,7 +4,7 @@ import LightningIcon from '@/svgs/bolt.svg'
 import NostrIcon from '@/svgs/nostr.svg'
 import Button from 'react-bootstrap/Button'
 
-export default function LoginButton ({ text, type, className, onClick }) {
+export default function LoginButton ({ text, type, className, onClick, disabled }) {
   let Icon, variant
   switch (type) {
     case 'twitter':
@@ -29,7 +29,7 @@ export default function LoginButton ({ text, type, className, onClick }) {
   const name = type.charAt(0).toUpperCase() + type.substr(1).toLowerCase()
 
   return (
-    <Button className={className} variant={variant} onClick={onClick}>
+    <Button className={className} variant={variant} onClick={onClick} disabled={disabled}>
       <Icon
         width={20}
         height={20} className='me-3'

diff --git a/components/login.js b/components/login.js
@@ -8,8 +8,11 @@ import { LightningAuthWithExplainer } from './lightning-auth'
 import { NostrAuthWithExplainer } from './nostr-auth'
 import LoginButton from './login-button'
 import { emailSchema } from '@/lib/validate'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 export function EmailLoginForm ({ text, callbackUrl, multiAuth }) {
+  const disabled = multiAuth
+
   return (
     <Form
       initial={{
@@ -26,8 +29,9 @@ export function EmailLoginForm ({ text, callbackUrl, multiAuth }) {
         placeholder='[email protected]'
         required
         autoFocus
+        disabled={disabled}
       />
-      <SubmitButton variant='secondary' className={styles.providerButton}>{text || 'Login'} with Email</SubmitButton>
+      <SubmitButton disabled={disabled} variant='secondary' className={styles.providerButton}>{text || 'Login'} with Email</SubmitButton>
     </Form>
   )
 }
@@ -74,10 +78,16 @@ export default function Login ({ providers, callbackUrl, multiAuth, error, text,
         switch (provider.name) {
           case 'Email':
             return (
-              <div className='w-100' key={provider.id}>
-                <div className='mt-2 text-center text-muted fw-bold'>or</div>
-                <EmailLoginForm text={text} callbackUrl={callbackUrl} multiAuth={multiAuth} />
-              </div>
+              <OverlayTrigger
+                placement='bottom'
+                overlay={multiAuth ? <Tooltip>not available for account switching yet</Tooltip> : <></>}
+                trigger={['hover', 'focus']}
+              >
+                <div className='w-100' key={provider.id}>
+                  <div className='mt-2 text-center text-muted fw-bold'>or</div>
+                  <EmailLoginForm text={text} callbackUrl={callbackUrl} multiAuth={multiAuth} />
+                </div>
+              </OverlayTrigger>
             )
           case 'Lightning':
           case 'Slashtags':
@@ -99,13 +109,22 @@ export default function Login ({ providers, callbackUrl, multiAuth, error, text,
             )
           default:
             return (
-              <LoginButton
-                className={`mt-2 ${styles.providerButton}`}
-                key={provider.id}
-                type={provider.id.toLowerCase()}
-                onClick={() => signIn(provider.id, { callbackUrl, multiAuth })}
-                text={`${text || 'Login'} with`}
-              />
+              <OverlayTrigger
+                placement='bottom'
+                overlay={multiAuth ? <Tooltip>not available for account switching yet</Tooltip> : <></>}
+                trigger={['hover', 'focus']}
+              >
+                <div className='w-100'>
+                  <LoginButton
+                    className={`mt-2 ${styles.providerButton}`}
+                    key={provider.id}
+                    type={provider.id.toLowerCase()}
+                    onClick={() => signIn(provider.id, { callbackUrl, multiAuth })}
+                    text={`${text || 'Login'} with`}
+                    disabled={multiAuth}
+                  />
+                </div>
+              </OverlayTrigger>
             )
         }
       })}

diff --git a/pages/login.js b/pages/login.js
@@ -47,15 +47,6 @@ export async function getServerSideProps ({ req, res, query: { callbackUrl, mult
   }
 
   const providers = await getProviders()
-  if (multiAuth) {
-    // multi auth only supported for login with lightning and nostr
-    const multiAuthSupport = key => ['lightning', 'nostr'].includes(key)
-    Object.keys(providers).forEach(key => {
-      if (!multiAuthSupport(key)) {
-        delete providers[key]
-      }
-    })
-  }
 
   return {
     props: {