fix: disable login buttons (#5179)

* fix: disable login buttons * refactor: remove dead code * fix: add signup form
9 months ago · 4863f08a4c
parent 81a14e90eb
commit 4863f08a4c
9 changed files with 116 additions and 61 deletions
--- a/src/components/AuthenticationFlow/AuthenticationForm.tsx
+++ b/src/components/AuthenticationFlow/AuthenticationForm.tsx
@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { GitHubButton } from './GitHubButton';
+import { GoogleButton } from './GoogleButton';
+import { LinkedInButton } from './LinkedInButton';
+import { EmailLoginForm } from './EmailLoginForm';
+import { EmailSignupForm } from './EmailSignupForm';
+
+type AuthenticationFormProps = {
+  type?: 'login' | 'signup';
+};
+
+export function AuthenticationForm(props: AuthenticationFormProps) {
+  const { type = 'login' } = props;
+
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  return (
+    <>
+      <div className="flex w-full flex-col gap-2">
+        <GitHubButton isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
+        <GoogleButton isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
+        <LinkedInButton isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
+      </div>
+
+      <div className="flex w-full items-center gap-2 py-6 text-sm text-slate-600">
+        <div className="h-px w-full bg-slate-200" />
+        OR
+        <div className="h-px w-full bg-slate-200" />
+      </div>
+
+      {type === 'login' ? (
+        <EmailLoginForm isDisabled={isDisabled} setIsDisabled={setIsDisabled} />
+      ) : (
+        <EmailSignupForm
+          isDisabled={isDisabled}
+          setIsDisabled={setIsDisabled}
+        />
+      )}
+    </>
+  );
+}
--- a/src/components/AuthenticationFlow/EmailLoginForm.tsx
+++ b/src/components/AuthenticationFlow/EmailLoginForm.tsx
@ -4,7 +4,14 @@ import { useState } from 'react';
 import { httpPost } from '../../lib/http';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';

-export function EmailLoginForm() {
+type EmailLoginFormProps = {
+  isDisabled?: boolean;
+  setIsDisabled?: (isDisabled: boolean) => void;
+};
+
+export function EmailLoginForm(props: EmailLoginFormProps) {
+  const { isDisabled, setIsDisabled } = props;
+
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [error, setError] = useState('');
@ -14,6 +21,7 @@ export function EmailLoginForm() {
  const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsLoading(true);
+    setIsDisabled?.(true);
    setError('');

    const { response, error } = await httpPost<{ token: string }>(
@ -45,6 +53,7 @@ export function EmailLoginForm() {
    }

    setIsLoading(false);
+    setIsDisabled?.(false);
    setError(error?.message || 'Something went wrong. Please try again later.');
  };

@ -92,7 +101,7 @@ export function EmailLoginForm() {

      <button
        type="submit"
-        disabled={isLoading}
+        disabled={isLoading || isDisabled}
        className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
      >
        {isLoading ? 'Please wait...' : 'Continue'}
--- a/src/components/AuthenticationFlow/EmailSignupForm.tsx
+++ b/src/components/AuthenticationFlow/EmailSignupForm.tsx
@ -1,7 +1,14 @@
 import { type FormEvent, useState } from 'react';
 import { httpPost } from '../../lib/http';

-export function EmailSignupForm() {
+type EmailSignupFormProps = {
+  isDisabled?: boolean;
+  setIsDisabled?: (isDisabled: boolean) => void;
+};
+
+export function EmailSignupForm(props: EmailSignupFormProps) {
+  const { isDisabled, setIsDisabled } = props;
+
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
@ -13,6 +20,7 @@ export function EmailSignupForm() {
    e.preventDefault();

    setIsLoading(true);
+    setIsDisabled?.(true);
    setError('');

    const { response, error } = await httpPost<{ status: 'ok' }>(
@ -21,20 +29,21 @@ export function EmailSignupForm() {
        email,
        password,
        name,
-      }
+      },
    );

    if (error || response?.status !== 'ok') {
      setIsLoading(false);
+      setIsDisabled?.(false);
      setError(
-        error?.message || 'Something went wrong. Please try again later.'
+        error?.message || 'Something went wrong. Please try again later.',
      );

      return;
    }

    window.location.href = `/verification-pending?email=${encodeURIComponent(
-      email
+      email,
    )}`;
  };

@ -90,7 +99,7 @@ export function EmailSignupForm() {

      <button
        type="submit"
-        disabled={isLoading}
+        disabled={isLoading || isDisabled}
        className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
      >
        {isLoading ? 'Please wait...' : 'Continue to Verify Email'}
--- a/src/components/AuthenticationFlow/GitHubButton.tsx
+++ b/src/components/AuthenticationFlow/GitHubButton.tsx
@ -5,12 +5,17 @@ import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';

-type GitHubButtonProps = {};
+type GitHubButtonProps = {
+  isDisabled?: boolean;
+  setIsDisabled?: (isDisabled: boolean) => void;
+};

 const GITHUB_REDIRECT_AT = 'githubRedirectAt';
 const GITHUB_LAST_PAGE = 'githubLastPage';

 export function GitHubButton(props: GitHubButtonProps) {
+  const { isDisabled, setIsDisabled } = props;
+
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

@ -25,6 +30,7 @@ export function GitHubButton(props: GitHubButtonProps) {
    }

    setIsLoading(true);
+    setIsDisabled?.(true);
    httpGet<{ token: string }>(
      `${import.meta.env.PUBLIC_API_URL}/v1-github-callback${
        window.location.search
@ -35,6 +41,7 @@ export function GitHubButton(props: GitHubButtonProps) {
          const errMessage = error?.message || 'Something went wrong.';
          setError(errMessage);
          setIsLoading(false);
+          setIsDisabled?.(false);

          return;
        }
@ -73,11 +80,13 @@ export function GitHubButton(props: GitHubButtonProps) {
      .catch((err) => {
        setError('Something went wrong. Please try again later.');
        setIsLoading(false);
+        setIsDisabled?.(false);
      });
  }, []);

  const handleClick = async () => {
    setIsLoading(true);
+    setIsDisabled?.(true);

    const { response, error } = await httpGet<{ loginUrl: string }>(
      `${import.meta.env.PUBLIC_API_URL}/v1-github-login`,
@ -89,6 +98,7 @@ export function GitHubButton(props: GitHubButtonProps) {
      );

      setIsLoading(false);
+      setIsDisabled?.(false);
      return;
    }

@ -112,7 +122,7 @@ export function GitHubButton(props: GitHubButtonProps) {
    <>
      <button
        className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
-        disabled={isLoading}
+        disabled={isLoading || isDisabled}
        onClick={handleClick}
      >
        {isLoading ? (
--- a/src/components/AuthenticationFlow/GoogleButton.tsx
+++ b/src/components/AuthenticationFlow/GoogleButton.tsx
@ -5,12 +5,17 @@ import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';

-type GoogleButtonProps = {};
+type GoogleButtonProps = {
+  isDisabled?: boolean;
+  setIsDisabled?: (isDisabled: boolean) => void;
+};

 const GOOGLE_REDIRECT_AT = 'googleRedirectAt';
 const GOOGLE_LAST_PAGE = 'googleLastPage';

 export function GoogleButton(props: GoogleButtonProps) {
+  const { isDisabled, setIsDisabled } = props;
+
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

@ -25,6 +30,7 @@ export function GoogleButton(props: GoogleButtonProps) {
    }

    setIsLoading(true);
+    setIsDisabled?.(true);
    httpGet<{ token: string }>(
      `${import.meta.env.PUBLIC_API_URL}/v1-google-callback${
        window.location.search
@ -34,6 +40,7 @@ export function GoogleButton(props: GoogleButtonProps) {
        if (!response?.token) {
          setError(error?.message || 'Something went wrong.');
          setIsLoading(false);
+          setIsDisabled?.(false);

          return;
        }
@ -72,11 +79,13 @@ export function GoogleButton(props: GoogleButtonProps) {
      .catch((err) => {
        setError('Something went wrong. Please try again later.');
        setIsLoading(false);
+        setIsDisabled?.(false);
      });
  }, []);

  const handleClick = () => {
    setIsLoading(true);
+    setIsDisabled?.(true);
    httpGet<{ loginUrl: string }>(
      `${import.meta.env.PUBLIC_API_URL}/v1-google-login`,
    )
@ -84,6 +93,7 @@ export function GoogleButton(props: GoogleButtonProps) {
        if (!response?.loginUrl) {
          setError(error?.message || 'Something went wrong.');
          setIsLoading(false);
+          setIsDisabled?.(false);

          return;
        }
@ -106,6 +116,7 @@ export function GoogleButton(props: GoogleButtonProps) {
      .catch((err) => {
        setError('Something went wrong. Please try again later.');
        setIsLoading(false);
+        setIsDisabled?.(false);
      });
  };

@ -113,7 +124,7 @@ export function GoogleButton(props: GoogleButtonProps) {
    <>
      <button
        className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
-        disabled={isLoading}
+        disabled={isLoading || isDisabled}
        onClick={handleClick}
      >
        {isLoading ? (
--- a/src/components/AuthenticationFlow/LinkedInButton.tsx
+++ b/src/components/AuthenticationFlow/LinkedInButton.tsx
@ -5,12 +5,17 @@ import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { LinkedInIcon } from '../ReactIcons/LinkedInIcon.tsx';

-type LinkedInButtonProps = {};
+type LinkedInButtonProps = {
+  isDisabled?: boolean;
+  setIsDisabled?: (isDisabled: boolean) => void;
+};

 const LINKEDIN_REDIRECT_AT = 'linkedInRedirectAt';
 const LINKEDIN_LAST_PAGE = 'linkedInLastPage';

 export function LinkedInButton(props: LinkedInButtonProps) {
+  const { isDisabled, setIsDisabled } = props;
+
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

@ -25,6 +30,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
    }

    setIsLoading(true);
+    setIsDisabled?.(true);
    httpGet<{ token: string }>(
      `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-callback${
        window.location.search
@ -34,6 +40,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
        if (!response?.token) {
          setError(error?.message || 'Something went wrong.');
          setIsLoading(false);
+          setIsDisabled?.(false);

          return;
        }
@ -72,11 +79,13 @@ export function LinkedInButton(props: LinkedInButtonProps) {
      .catch((err) => {
        setError('Something went wrong. Please try again later.');
        setIsLoading(false);
+        setIsDisabled?.(false);
      });
  }, []);

  const handleClick = () => {
    setIsLoading(true);
+    setIsDisabled?.(true);
    httpGet<{ loginUrl: string }>(
      `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-login`,
    )
@ -84,6 +93,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
        if (!response?.loginUrl) {
          setError(error?.message || 'Something went wrong.');
          setIsLoading(false);
+          setIsDisabled?.(false);

          return;
        }
@ -106,6 +116,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
      .catch((err) => {
        setError('Something went wrong. Please try again later.');
        setIsLoading(false);
+        setIsDisabled?.(false);
      });
  };

@ -113,7 +124,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
    <>
      <button
        className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
-        disabled={isLoading}
+        disabled={isLoading || isDisabled}
        onClick={handleClick}
      >
        {isLoading ? (
--- a/src/components/AuthenticationFlow/LoginPopup.astro
+++ b/src/components/AuthenticationFlow/LoginPopup.astro
@ -1,14 +1,10 @@
 ---
 import Popup from '../Popup/Popup.astro';
-import { EmailLoginForm } from './EmailLoginForm';
-import Divider from './Divider.astro';
-import { GitHubButton } from './GitHubButton';
-import { GoogleButton } from './GoogleButton';
-import { LinkedInButton } from './LinkedInButton';
+import { AuthenticationForm } from './AuthenticationForm';
 ---

 <Popup id='login-popup' title='' subtitle=''>
-  <div class='text-center'>
+  <div class='mb-7 text-center'>
    <p class='mb-3 text-2xl font-semibold leading-5 text-slate-900'>
      Login to your account
    </p>
@ -16,19 +12,9 @@ import { LinkedInButton } from './LinkedInButton';
      You must be logged in to perform this action.
    </p>
  </div>
-
-  <div class='mt-7 flex flex-col gap-2'>
-    <GitHubButton client:load />
-    <GoogleButton client:load />
-    <LinkedInButton client:load />
-  </div>
-
-  <Divider />
-
-  <EmailLoginForm client:load />
-
+  <AuthenticationForm client:load />
  <div class='mt-6 text-center text-sm text-slate-600'>
    Don't have an account?{' '}
-    <a href='/signup' class='font-medium text-[#4285f4]'>Sign up</a>
+    <a href='/signup' class='font-medium text-[#4285f4]'> Sign up</a>
  </div>
 </Popup>
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@ -1,9 +1,5 @@
 ---
-import Divider from '../components/AuthenticationFlow/Divider.astro';
-import { EmailLoginForm } from '../components/AuthenticationFlow/EmailLoginForm';
-import { GitHubButton } from '../components/AuthenticationFlow/GitHubButton';
-import { GoogleButton } from '../components/AuthenticationFlow/GoogleButton';
-import { LinkedInButton } from '../components/AuthenticationFlow/LinkedInButton';
+import { AuthenticationForm } from '../components/AuthenticationFlow/AuthenticationForm';
 import AccountLayout from '../layouts/AccountLayout.astro';
 ---

@ -14,23 +10,17 @@ import AccountLayout from '../layouts/AccountLayout.astro';
  noIndex={true}
 >
  <div class='container'>
-    <div class='mx-auto flex flex-col items-start justify-start pb-28 pt-10 sm:max-w-[400px] sm:items-center sm:justify-center sm:pt-20'>
+    <div
+      class='mx-auto flex flex-col items-start justify-start pb-28 pt-10 sm:max-w-[400px] sm:items-center sm:justify-center sm:pt-20'
+    >
      <div class='mb-2 text-left sm:mb-5 sm:text-center'>
        <h1 class='mb-2 text-3xl font-semibold sm:mb-5 sm:text-5xl'>Login</h1>
-        <p class='text-base text-gray-600 leading-6 mb-3'>
+        <p class='mb-3 text-base leading-6 text-gray-600'>
          Welcome back! Let's take you to your account.
        </p>
      </div>

-      <div class='flex w-full flex-col gap-2'>
-        <GitHubButton client:load />
-        <GoogleButton client:load />
-        <LinkedInButton client:load />
-      </div>
-
-      <Divider />
-
-      <EmailLoginForm client:load />
+      <AuthenticationForm client:load />

      <div class='mt-6 text-center text-sm text-slate-600'>
        Don't have an account?{' '}
--- a/src/pages/signup.astro
+++ b/src/pages/signup.astro
@ -1,9 +1,5 @@
 ---
-import Divider from '../components/AuthenticationFlow/Divider.astro';
-import { EmailSignupForm } from '../components/AuthenticationFlow/EmailSignupForm';
-import { GitHubButton } from '../components/AuthenticationFlow/GitHubButton';
-import { GoogleButton } from '../components/AuthenticationFlow/GoogleButton';
-import { LinkedInButton } from '../components/AuthenticationFlow/LinkedInButton';
+import { AuthenticationForm } from '../components/AuthenticationFlow/AuthenticationForm';
 import AccountLayout from '../layouts/AccountLayout.astro';
 ---

@ -29,15 +25,7 @@ import AccountLayout from '../layouts/AccountLayout.astro';
        </p>
      </div>

-      <div class='flex w-full flex-col items-stretch gap-2'>
-        <GitHubButton client:load />
-        <GoogleButton client:load />
-        <LinkedInButton client:load />
-      </div>
-
-      <Divider />
-
-      <EmailSignupForm client:load />
+      <AuthenticationForm type='signup' client:load />

      <div class='mt-6 text-center text-sm text-slate-600'>
        Already have an account? <a