feat: Google OAuth for login & signup (#6346)

This PR adds Google OAuth for all existing users, allowing users to log in or sign up via their Google account.

---------

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/dashboard/routes/auth/components/Signup/Form.vue

@@ -1,70 +1,79 @@
 <template>
-  <form @submit.prevent="submit">
-    <div class="input-wrap">
-      <auth-input
-        v-model="credentials.fullName"
-        :class="{ error: $v.credentials.fullName.$error }"
-        :label="$t('REGISTER.FULL_NAME.LABEL')"
-        icon-name="person"
-        :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
-        :error="
-          $v.credentials.fullName.$error ? $t('REGISTER.FULL_NAME.ERROR') : ''
-        "
-        @blur="$v.credentials.fullName.$touch"
+  <div>
+    <form @submit.prevent="submit">
+      <div class="input-wrap">
+        <div class="input-wrap__two-column">
+          <auth-input
+            v-model.trim="credentials.fullName"
+            :class="{ error: $v.credentials.fullName.$error }"
+            :label="$t('REGISTER.FULL_NAME.LABEL')"
+            icon-name="person"
+            :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
+            :error="
+              $v.credentials.fullName.$error
+                ? $t('REGISTER.FULL_NAME.ERROR')
+                : ''
+            "
+            @blur="$v.credentials.fullName.$touch"
+          />
+          <auth-input
+            v-model.trim="credentials.accountName"
+            :class="{ error: $v.credentials.accountName.$error }"
+            icon-name="building-bank"
+            :label="$t('REGISTER.COMPANY_NAME.LABEL')"
+            :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
+            :error="
+              $v.credentials.accountName.$error
+                ? $t('REGISTER.COMPANY_NAME.ERROR')
+                : ''
+            "
+            @blur="$v.credentials.accountName.$touch"
+          />
+        </div>
+        <auth-input
+          v-model.trim="credentials.email"
+          type="email"
+          :class="{ error: $v.credentials.email.$error }"
+          icon-name="mail"
+          :label="$t('REGISTER.EMAIL.LABEL')"
+          :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
+          :error="$v.credentials.email.$error ? $t('REGISTER.EMAIL.ERROR') : ''"
+          @blur="$v.credentials.email.$touch"
+        />
+        <auth-input
+          v-model.trim="credentials.password"
+          type="password"
+          :class="{ error: $v.credentials.password.$error }"
+          icon-name="lock-closed"
+          :label="$t('LOGIN.PASSWORD.LABEL')"
+          :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
+          :error="passwordErrorText"
+          @blur="$v.credentials.password.$touch"
+        />
+      </div>
+      <div v-if="globalConfig.hCaptchaSiteKey" class="h-captcha--box">
+        <vue-hcaptcha
+          ref="hCaptcha"
+          :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
+          :sitekey="globalConfig.hCaptchaSiteKey"
+          @verify="onRecaptchaVerified"
+        />
+        <span v-if="!hasAValidCaptcha && didCaptchaReset" class="captcha-error">
+          {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
+        </span>
+      </div>
+      <auth-submit-button
+        :label="$t('REGISTER.SUBMIT')"
+        :is-disabled="isSignupInProgress || !hasAValidCaptcha"
+        :is-loading="isSignupInProgress"
+        icon="arrow-chevron-right"
       />
-      <auth-input
-        v-model.trim="credentials.email"
-        type="email"
-        :class="{ error: $v.credentials.email.$error }"
-        icon-name="mail"
-        :label="$t('REGISTER.EMAIL.LABEL')"
-        :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
-        :error="$v.credentials.email.$error ? $t('REGISTER.EMAIL.ERROR') : ''"
-        @blur="$v.credentials.email.$touch"
-      />
-      <auth-input
-        v-model="credentials.accountName"
-        :class="{ error: $v.credentials.accountName.$error }"
-        icon-name="building-bank"
-        :label="$t('REGISTER.COMPANY_NAME.LABEL')"
-        :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
-        :error="
-          $v.credentials.accountName.$error
-            ? $t('REGISTER.COMPANY_NAME.ERROR')
-            : ''
-        "
-        @blur="$v.credentials.accountName.$touch"
-      />
-      <auth-input
-        v-model.trim="credentials.password"
-        type="password"
-        :class="{ error: $v.credentials.password.$error }"
-        icon-name="lock-closed"
-        :label="$t('LOGIN.PASSWORD.LABEL')"
-        :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
-        :error="passwordErrorText"
-        @blur="$v.credentials.password.$touch"
-      />
-    </div>
-    <div v-if="globalConfig.hCaptchaSiteKey" class="h-captcha--box">
-      <vue-hcaptcha
-        ref="hCaptcha"
-        :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
-        :sitekey="globalConfig.hCaptchaSiteKey"
-        @verify="onRecaptchaVerified"
-      />
-      <span v-if="!hasAValidCaptcha && didCaptchaReset" class="captcha-error">
-        {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
-      </span>
-    </div>
-    <auth-submit-button
-      :label="$t('REGISTER.SUBMIT')"
-      :is-disabled="isSignupInProgress || !hasAValidCaptcha"
-      :is-loading="isSignupInProgress"
-      icon="arrow-chevron-right"
-    />
+    </form>
+    <GoogleOAuthButton v-if="showGoogleOAuth()">
+      {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
+    </GoogleOAuthButton>
     <p v-dompurify-html="termsLink" class="accept--terms" />
-  </form>
+  </div>
 </template>
 
 <script>
@@ -78,6 +87,7 @@ import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
 import AuthInput from '../AuthInput.vue';
 import AuthSubmitButton from '../AuthSubmitButton.vue';
 import { isValidPassword } from 'shared/helpers/Validators';
+import GoogleOAuthButton from 'dashboard/components/ui/Auth/GoogleOAuthButton.vue';
 var CompanyEmailValidator = require('company-email-validator');
 
 export default {
@@ -85,6 +95,7 @@ export default {
     AuthInput,
     AuthSubmitButton,
     VueHcaptcha,
+    GoogleOAuthButton,
   },
   mixins: [globalConfigMixin, alertMixin],
   data() {
@@ -183,6 +194,9 @@ export default {
       this.credentials.hCaptchaClientResponse = token;
       this.didCaptchaReset = false;
     },
+    showGoogleOAuth() {
+      return Boolean(window.chatwootConfig.googleOAuthClientId);
+    },
     resetCaptcha() {
       if (!this.globalConfig.hCaptchaSiteKey) {
         return;
@@ -214,4 +228,28 @@ export default {
 .accept--terms {
   margin: var(--space-normal) 0 var(--space-smaller) 0;
 }
+
+.input-wrap {
+  .input-wrap__two-column {
+    display: grid;
+    gap: 1.6rem;
+    grid-template-columns: repeat(2, minmax(100px, 1fr));
+  }
+}
+
+.separator {
+  display: flex;
+  align-items: center;
+  margin: 2rem 0rem;
+  gap: var(--space-normal);
+  color: var(--s-300);
+  font-size: var(--font-size-small);
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--s-100);
+  }
+}
 </style>

app/javascript/dashboard/routes/auth/components/Testimonials/Index.vue

@@ -84,6 +84,7 @@ export default {
   background: var(--w-400);
   display: flex;
   flex: 1 1;
+  overflow: hidden;
   position: relative;
 }