chore: error messages

src/components/Login/EmailLoginForm.tsx

@@ -7,6 +7,7 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
 
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [message, setMessage] = useState<{
     type: 'success' | 'error' | 'verification' | 'warning';
     message: string;
@@ -14,18 +15,21 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
 
   const handleFormSubmit = async (e: Event) => {
     e.preventDefault();
+    setIsLoading(true);
+    setMessage(null);
     // Check if the verification-email-sent-at is less than 5 seconds ago
     const verificationEmailSentAt = localStorage.getItem(
       'verification-email-sent-at'
     );
 
-    console.log(verificationEmailSentAt);
-
     if (verificationEmailSentAt) {
       const now = new Date();
       if (Number(verificationEmailSentAt) > now.getTime()) {
+        setIsLoading(false);
+        setEmail('');
+        setPassword('');
         return setMessage({
-          type: 'warning',
+          type: 'error',
           message: 'Please wait before sending another verification email.',
         });
       }
@@ -45,6 +49,7 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
 
     // If the response isn't ok, we'll throw an error
     if (json.type === 'user_not_verified') {
+      setIsLoading(false);
       return setMessage({
         type: 'verification',
         message:
@@ -62,9 +67,12 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
         message: json.message,
       });
     }
+
+    setIsLoading(false);
   };
 
   const handleResendVerificationEmail = async () => {
+    setIsLoading(true);
     // Check if the verification-email-sent-at is less than 5 seconds ago
     const verificationEmailSentAt = localStorage.getItem(
       'verification-email-sent-at'
@@ -73,8 +81,9 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
     if (verificationEmailSentAt) {
       const now = new Date();
       if (Number(verificationEmailSentAt) > now.getTime()) {
+        setIsLoading(false);
         return setMessage({
-          type: 'warning',
+          type: 'error',
           message: 'Please wait before sending another verification email.',
         });
       }
@@ -102,6 +111,8 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
       });
     }
     // If the response is ok, we'll set the token in a cookie
+    setEmail('');
+    setPassword('');
     setMessage({
       type: 'success',
       message: 'Verification instructions have been sent to your email.',
@@ -116,6 +127,8 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
       'verification-email-sent-at',
       now.getTime().toString()
     );
+
+    setIsLoading(false);
   };
 
   return (
@@ -152,12 +165,12 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
       {message && (
         <>
           {message.type === 'verification' ? (
-            <div className="mt-2 text-sm text-slate-600">
+            <div className="mt-2 rounded-lg bg-yellow-100 p-2 text-sm text-yellow-800">
               Your account is not verified. Please click the verification link
               in your email. Or{' '}
               <button
                 type="button"
-                className="text-blue-600 hover:text-blue-500"
+                className="font-semibold text-yellow-900 hover:text-yellow-800"
                 onClick={handleResendVerificationEmail}
               >
                 resend verification email.
@@ -178,6 +191,7 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
       )}
 
       <button
+        disabled={isLoading || !email || !password}
         type="submit"
         className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-lg border border-slate-300 bg-black p-2 text-sm font-medium text-white outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:opacity-60"
       >

src/components/Login/EmailSignupForm.tsx

@@ -7,10 +7,11 @@ const EmailSignupForm: FunctionComponent<{}> = () => {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const [name, setName] = useState<string>('');
-  const [message, setMessage] = useState<string | null>(null);
+
-  const [error, setError] = useState<{
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [message, setMessage] = useState<{
+    type: 'success' | 'error' | 'verification' | 'warning';
     message: string;
-    status: number;
   } | null>(null);
 
   return (
@@ -18,6 +19,7 @@ const EmailSignupForm: FunctionComponent<{}> = () => {
       className="w-full"
       onSubmit={(e) => {
         e.preventDefault();
+        setIsLoading(true);
         fetch('http://localhost:8080/v1-register', {
           method: 'POST',
           headers: {
@@ -32,23 +34,26 @@ const EmailSignupForm: FunctionComponent<{}> = () => {
           .then(async (res) => {
             const json = await res.json();
             if (res.status === 200) {
-              setMessage(
+              setName('');
-                'We have sent you an email with the verification link. Please follow the instructions to login.'
+              setEmail('');
-              );
+              setPassword('');
-              setError(null);
+              setMessage({
-              console.log(json);
+                type: 'success',
+                message:
+                  'We have sent you an email with the verification link. Please follow the instructions to login.',
+              });
             } else {
-              setMessage(null);
               const error = new Error(json.message) as any;
               error.status = res.status;
               throw error;
             }
+            setIsLoading(false);
           })
           .catch((err) => {
-            setMessage(null);
+            setIsLoading(false);
-            setError({
+            setMessage({
+              type: 'error',
               message: err.message,
-              status: 400,
             });
           });
       }}
@@ -96,13 +101,28 @@ const EmailSignupForm: FunctionComponent<{}> = () => {
         onInput={(e) => setPassword(String((e.target as any).value))}
       />
 
-      {error && (
+      {message && (
-        <div className="mt-2 text-sm text-red-500">{error.message}</div>
+        <div
+          className={`mt-2 rounded-lg p-2 ${
+            message.type === 'error'
+              ? 'bg-red-100 text-red-700'
+              : message.type === 'success'
+              ? 'bg-green-100 text-green-700'
+              : 'bg-blue-100 text-blue-700'
+          }`}
+        >
+          {message.message}
+        </div>
       )}
-      {message && <div className="mt-2 text-sm text-green-500">{message}</div>}
 
       <button
         type="submit"
+        disabled={
+          email.length === 0 ||
+          password.length === 0 ||
+          name.length === 0 ||
+          isLoading
+        }
         className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-lg border border-slate-300 bg-black p-2 text-sm font-medium text-white outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:opacity-60"
       >
         Continue

src/components/Login/GithubLogin.astro

@@ -27,11 +27,17 @@ import Spinner from '../Spinner.astro';
   function addSpinner() {
     githubLoginText?.classList.add('hidden');
     githubLoginSpinner?.classList.remove('hidden');
+
+    // Disable button
+    githubLoginButton?.setAttribute('disabled', 'true');
   }
 
   function hideSpinner() {
     githubLoginText?.classList.remove('hidden');
     githubLoginSpinner?.classList.add('hidden');
+
+    // Enable button
+    githubLoginButton?.removeAttribute('disabled');
   }
 
   function showError(err: Error) {

src/components/Login/GoogleLogin.astro

@@ -29,11 +29,15 @@ import Spinner from '../Spinner.astro';
   function addSpinner() {
     googleLoginText?.classList.add('hidden');
     googleLoginSpinner?.classList.remove('hidden');
+    // Disable button
+    googleLoginButton?.setAttribute('disabled', 'true');
   }
 
   function hideSpinner() {
     googleLoginText?.classList.remove('hidden');
     googleLoginSpinner?.classList.add('hidden');
+    // Enable button
+    googleLoginButton?.setAttribute('disabled', 'true');
   }
 
   function showError(err: Error) {

src/components/Profile/ForgotPasswordForm.tsx

@@ -102,6 +102,7 @@ export default function ForgotPasswordForm() {
 
       <button
         type="submit"
+        disabled={isLoading}
         className="mt-2 inline-flex h-10 w-full items-center justify-center rounded-lg border border-slate-300 bg-black p-2 px-4 text-sm font-medium text-white outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
       >
         {isLoading ? (

src/components/Profile/ResetPasswordForm.tsx

@@ -123,6 +123,7 @@ export default function ResetPasswordForm() {
       )}
 
       <button
+        disabled={isLoading}
         type="submit"
         className="mt-5 inline-flex h-10 w-full items-center justify-center rounded-lg border border-slate-300 bg-black p-2 px-4 text-sm font-medium text-white outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
       >