Cleaner auth UI

src/lib/components/AuthUI/index.svelte

@@ -7,14 +7,18 @@
   export let handleSubmit;
   export let isLogin = true;
   export let showOnlyContent = false;
+  export let isLoading = false;
   export let showLogo = false;
   export let formRef;
 
   async function signInWithGoogle() {
+    if (isLoading) {
+      return;
+    }
     try {
       console.log('signInWithGoogle');
       const { user, session, error } = await supabase.auth.signInWithOAuth({
-        provider: 'google',
+        provider: 'google'
       });
 
       console.log('user', user);
@@ -31,13 +35,7 @@
     <div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
       {#if !showOnlyContent || showLogo}
         <div class="flex items-center w-full justify-center pt-4">
-          <img
+          <img src="/logo-192.png" alt="ClassroomIO logo" height="50" width="50" data-atf="1" />
-            src="/logo-192.png"
-            alt="ClassroomIO logo"
-            height="50"
-            width="50"
-            data-atf="1"
-          />
           <h4 class="dark:text-white text-xl">ClassroomIO</h4>
         </div>
       {/if}
@@ -54,12 +52,11 @@
           <PrimaryButton
             variant={VARIANTS.OUTLINED}
             onClick={signInWithGoogle}
+            isDisabled={isLoading}
             className="py-3 sm:w-full w-full"
           >
             <GoogleIconColored />
-            <span class="ml-2"
+            <span class="ml-2">{isLogin ? 'Sign in' : 'Sign up'} with Google</span>
-              >{isLogin ? 'Sign in' : 'Sign up'} with Google</span
-            >
           </PrimaryButton>
         </div>
       {/if}
@@ -67,15 +64,9 @@
     {#if !showOnlyContent}
       <div class="w-full p-6 border-t border-grey text-center">
         {#if isLogin}
-          Not registered yet? <a
+          Not registered yet? <a class="hover:underline text-blue-700" href="/signup">Sign up</a>
-            class="hover:underline text-blue-700"
-            href="/signup">Sign up</a
-          >
         {:else}
-          Already have an account? <a
+          Already have an account? <a class="hover:underline text-blue-700" href="/login">Log In</a>
-            class="hover:underline text-blue-700"
-            href="/login">Log In</a
-          >
         {/if}
       </div>
     {/if}

src/routes/login/+page.svelte

@@ -26,7 +26,7 @@
       loading = true;
       const { data, error } = await supabase.auth.signInWithPassword({
         email: fields.email,
-        password: fields.password,
+        password: fields.password
       });
       console.log('data', data);
       if (error) throw error;
@@ -42,13 +42,7 @@
   <title>Welcome back to ClassroomIO</title>
 </svelte:head>
 
-<AuthUI
+<AuthUI {supabase} isLogin={true} {handleSubmit} isLoading={loading} bind:formRef>
-  {supabase}
-  isLogin={true}
-  {handleSubmit}
-  showOnlyContent={loading}
-  bind:formRef
->
   <div class="mt-4 w-full">
     <p class="dark:text-white text-lg font-semibold mb-6">Welcome back</p>
     <TextField

src/routes/reset/+page.svelte

@@ -6,7 +6,7 @@
   import {
     resetValidation,
     getConfirmPasswordError,
-    getDisableSubmit,
+    getDisableSubmit
   } from '$lib/utils/functions/validator';
   import { RESET_FIELDS } from '$lib/utils/constants/authentication';
   import AuthUI from '$lib/components/AuthUI/index.svelte';
@@ -31,7 +31,7 @@
     try {
       loading = true;
       const { data, error } = await supabase.auth.update({
-        password: fields.password,
+        password: fields.password
       });
       console.log('data', data);
       if (error) throw error;
@@ -59,6 +59,7 @@
   isLogin={false}
   {handleSubmit}
   showOnlyContent={true}
+  isLoading={loading}
   showLogo={true}
   bind:formRef
 >

src/routes/signup/+page.svelte

@@ -6,7 +6,7 @@
   import {
     authValidation,
     getConfirmPasswordError,
-    getDisableSubmit,
+    getDisableSubmit
   } from '$lib/utils/functions/validator';
   import { SIGNUP_FIELDS } from '$lib/utils/constants/authentication';
   import AuthUI from '$lib/components/AuthUI/index.svelte';
@@ -33,7 +33,7 @@
       loading = true;
       const { data, error } = await supabase.auth.signUp({
         email: fields.email,
-        password: fields.password,
+        password: fields.password
       });
       console.log('data', data);
       if (error) throw error;
@@ -58,17 +58,9 @@
   <title>Join ClassroomIO</title>
 </svelte:head>
 
-<AuthUI
+<AuthUI {supabase} isLogin={false} {handleSubmit} isLoading={loading} bind:formRef>
-  {supabase}
-  isLogin={false}
-  {handleSubmit}
-  showOnlyContent={success}
-  bind:formRef
->
   <div class="mt-4 w-full">
-    <p class="dark:text-white text-lg font-semibold mb-6">
+    <p class="dark:text-white text-lg font-semibold mb-6">Create a free account</p>
-      Create a free account
-    </p>
     <!-- <TextField
       label="Full Name"
       bind:value={fields.name}