feat: enable google

2024-05-30 13:47:09 +05:30
parent bd7e1fba3f
commit 2dd2cfeb87
3 changed files with 60 additions and 1 deletions
@@ -368,6 +368,13 @@
        "EMAIL_PLACEHOLDER": "Enter email address",
        "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
        "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
+      },
+      "GOOGLE": {
+        "TITLE": "Google Email",
+        "DESCRIPTION": "Click on the Sign in with Google button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
+        "SIGN_IN": "Sign in with Google",
+        "HELP": "To add your Google account as a channel, you need to authenticate your Google account by clicking on 'Sign in with Google' ",
+        "ERROR_MESSAGE": "There was an error connecting to Google, please try again"
      }
    },
    "DETAILS": {
@@ -739,4 +746,4 @@
      "OTHER_PROVIDERS": "Other Providers"
    }
  }
-}
+}
@@ -20,11 +20,13 @@
    </div>
  </div>
  <microsoft v-else-if="provider === 'microsoft'" />
+  <google v-else-if="provider === 'google'" />
  <forward-to-option v-else-if="provider === 'other_provider'" />
 </template>
 <script>
 import ForwardToOption from './emailChannels/ForwardToOption.vue';
 import Microsoft from './emailChannels/Microsoft.vue';
+import Google from './emailChannels/Google.vue';
 import { mapGetters } from 'vuex';
 import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
 import PageHeader from '../../SettingsSubPageHeader.vue';
@@ -34,6 +36,7 @@ export default {
    ChannelSelector,
    ForwardToOption,
    Microsoft,
+    Google,
    PageHeader,
  },
  data() {
@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <settings-sub-page-header
+      :header-title="$t('INBOX_MGMT.ADD.GOOGLE.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.GOOGLE.DESCRIPTION')"
+    />
+    <a
+      :href="getGoogleAuthUrl()"
+      class="inline-flex justify-center rounded-md mt-5 bg-white py-3 px-4 shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
+    >
+      <img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
+      <span class="text-base font-medium ml-2 text-slate-600 dark:text-white">
+        {{ $t('INBOX_MGMT.ADD.GOOGLE.SIGN_IN') }}
+      </span>
+    </a>
+  </div>
+</template>
+<script setup>
+import { joinUrl } from 'shared/helpers/joinUrl';
+import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
+
+function getRedirectUrl() {
+  const baseUrl = window.chatwootConfig.hostURL;
+  const path = '/google/callback';
+  return joinUrl(baseUrl, path);
+}
+
+function getGoogleAuthUrl() {
+  const baseUrl =
+    'https://accounts.google.com/o/oauth2/auth/oauthchooseaccount';
+  const clientId = window.chatwootConfig.googleOAuthClientId;
+  const redirectUrl = getRedirectUrl();
+  const responseType = 'code';
+  const scope = 'email profile https://mail.google.com/';
+
+  // Build the query string
+  const queryString = new URLSearchParams({
+    client_id: clientId,
+    redirect_uri: redirectUrl,
+    response_type: responseType,
+    scope: scope,
+  }).toString();
+
+  // Construct the full URL
+  return `${baseUrl}?${queryString}`;
+}
+</script>