7a137 google auth (#520)

* google oauth

* fix lint

* cleanup debug

* Oauth changes, alert message, email validation

* fix exception and inline return condition

* fix google oauth

* UI fixes

* fix provider user

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/pages/auth/components/LoginForm.vue

@@ -30,7 +30,7 @@
       />
 
       <!-- Remember Me -->
-      <div class="relative flex items-center my-5">
+      <div class="relative flex items-start mt-5">
         <CheckboxInput
           v-model="remember"
           class="w-full md:w-1/2"
@@ -52,15 +52,28 @@
 
       <!-- Submit Button -->
       <v-button
-        dusk="btn_login"
+        class="w-full flex"
         :loading="form.busy || loading"
       >
         Log in to continue
       </v-button>
 
+      <v-button
+        native-type="button"
+        color="white"
+        class="space-x-4 mt-4 flex items-center w-full"
+        :loading="false"
+        @click.prevent="signInwithGoogle"
+      >
+        <Icon
+          name="devicon:google"
+          class="w-4 h-4 -mt-1"
+        />
+        <span class="mx-2">Sign in with Google</span>
+      </v-button>
       <p
         v-if="!appStore.selfHosted"
-        class="text-gray-500 mt-4"
+        class="text-gray-500 text-sm text-center mt-4"
       >
         Don't have an account?
         <a
@@ -106,6 +119,7 @@ export default {
       authStore: useAuthStore(),
       formsStore: useFormsStore(),
       workspaceStore: useWorkspacesStore(),
+      providersStore: useOAuthProvidersStore()
     }
   },
 
@@ -119,6 +133,8 @@ export default {
     showForgotModal: false,
   }),
 
+  computed: {},
+
   methods: {
     login() {
       // Submit the form.
@@ -170,6 +186,9 @@ export default {
         router.push({ name: "home" })
       }
     },
+    signInwithGoogle() {
+      this.providersStore.guestConnect('google', true)
+    }
   },
 }
 </script>

client/components/pages/auth/components/RegisterForm.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <form
-      class="mt-4"
       @submit.prevent="register"
       @keydown="form.onKeydown($event)"
     >
@@ -56,6 +55,7 @@
       <checkbox-input
         :form="form"
         name="agree_terms"
+        class="mb-3"
         :required="true"
       >
         <template #label>
@@ -63,6 +63,7 @@
           <NuxtLink
             :to="{ name: 'terms-conditions' }"
             target="_blank"
+            class="underline"
           >
             Terms and conditions
           </NuxtLink>
@@ -70,6 +71,7 @@
           <NuxtLink
             :to="{ name: 'privacy-policy' }"
             target="_blank"
+            class="underline"
           >
             Privacy policy
           </NuxtLink>
@@ -78,16 +80,33 @@
       </checkbox-input>
 
       <!-- Submit Button -->
-      <v-button :loading="form.busy">
-        Create an account
+      <v-button
+        class="w-full mt-4"
+        :loading="form.busy"
+      >
+        Create account
       </v-button>
 
-      <p class="text-gray-500 mt-4">
+      <p class="text-gray-600/50 text-sm text-center my-4">
+        Or
+      </p>
+      <v-button
+        native-type="buttom"
+        color="white"
+        class="space-x-4 flex items-center w-full"
+        :loading="false"
+        @click.prevent="signInwithGoogle"
+      >
+        <Icon name="devicon:google" />
+        <span class="mx-2">Sign in with Google</span>
+      </v-button>
+
+      <p class="text-gray-500 mt-4 text-sm text-center">
         Already have an account?
         <a
           v-if="isQuick"
           href="#"
-          class="font-semibold ml-1"
+          class="font-medium ml-1"
           @click.prevent="$emit('openLogin')"
         >Log In</a>
         <NuxtLink
@@ -123,6 +142,7 @@ export default {
       authStore: useAuthStore(),
       formsStore: useFormsStore(),
       workspaceStore: useWorkspacesStore(),
+      providersStore: useOAuthProvidersStore(),
       logEvent: useAmplitude().logEvent,
     }
   },
@@ -241,6 +261,9 @@ export default {
         }
       }
     },
+    signInwithGoogle() {
+      this.providersStore.guestConnect('google', true)
+    }
   },
 }
 </script>