feat: add Google login flow and inbox creation (#9580)

This PR adds the following changes

1. Refactor `microsoft/callbacks_controller` to move common logic to
`oauth_callback_controller`, most of the logic is re-used for Google
2. Add UI components, `googleClient` and I18n entries for Google login
3. Add Google callback and inbox creation
4. Add a `joinUrl` utility along with specs (need to move it to utils)
5. Add `GoogleConcern`, `Google::AuthorizationsController` and
`Google::CallbacksController`

> Note: The UI is hidden for now, so we can merge this without any
hiccups, to enable it just revert the commit `05c18de`

### Preview


https://github.com/chatwoot/chatwoot/assets/18097732/1606d150-4561-49dc-838d-e0b00fe49ce3

### Linear Tickers

[CW-3370](https://linear.app/chatwoot/issue/CW-3370)
[CW-3371](https://linear.app/chatwoot/issue/CW-3371)

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Shivam Mishra
2024-06-07 16:37:46 +05:30
committed by GitHub
parent 576c58419c
commit da4b75a3af
21 changed files with 430 additions and 99 deletions

View File

@@ -541,7 +541,8 @@ export default {
this.isALineChannel ||
this.isAPIInbox ||
(this.isAnEmailChannel && !this.inbox.provider) ||
(this.isAnEmailChannel && this.inbox.provider === 'microsoft') ||
this.isAMicrosoftInbox ||
this.isAGoogleInbox ||
this.isAWhatsAppChannel ||
this.isAWebWidgetInbox
) {

View File

@@ -8,7 +8,7 @@
:header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
/>
<div class="grid grid-cols-4 max-w-3xl mx-0 mt-6">
<div class="grid max-w-3xl grid-cols-4 mx-0 mt-6">
<channel-selector
v-for="emailProvider in emailProviderList"
:key="emailProvider.key"

View File

@@ -0,0 +1,55 @@
<script setup>
import { ref } from 'vue';
import { useAlert } from 'dashboard/composables';
import { useI18n } from 'dashboard/composables/useI18n';
import googleClient from 'dashboard/api/channel/googleClient';
import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
const { t } = useI18n();
const isRequestingAuthorization = ref(false);
const email = ref('');
async function requestAuthorization() {
try {
isRequestingAuthorization.value = true;
const response = await googleClient.generateAuthorization({
email: email.value,
});
const {
data: { url },
} = response;
window.location.href = url;
} catch (error) {
useAlert(t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE'));
} finally {
isRequestingAuthorization.value = false;
}
}
</script>
<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')"
/>
<form class="mt-6" @submit.prevent="requestAuthorization">
<woot-input
v-model="email"
type="email"
:placeholder="$t('INBOX_MGMT.ADD.GOOGLE.EMAIL_PLACEHOLDER')"
/>
<woot-submit-button
icon="brand-twitter"
:button-text="$t('INBOX_MGMT.ADD.GOOGLE.SIGN_IN')"
type="submit"
:loading="isRequestingAuthorization"
/>
</form>
</div>
</template>