-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: new re-authorization flow for Microsoft (#9510)
This PR adds a cleaner re-authorization flow to Microsoft. This PR has the following changes 1. Use `reauthorization_required` value for Microsoft Channel 2. Refactor `InboxReconnectionRequired` to reuse the `banner` component 3. Refactor `microsoft/Reauthorize.vue` to reuse `InboxReconnectionRequired` component 4. Update `reauthorizable.rb` to update cache keys if the model has an inbox 5. Update `microsoft/callbacks_controller.rb` to handle the reauthorization case with a redirect to the inbox settings page if the inbox already exists at the time of authorization. ## How Has This Been Tested? - [x] Local Instance - [ ] Staging Instance - [x] Unit tests ## Pending Tasks - [ ] ~Success Toast~ will do this in a follow-up PR with the screen ## Demo The following video shows the whole process of creation and re-authorization of the Microsoft channel https://www.loom.com/share/e5cd9bd4439c4741b0dcfe66d67f88b3?sid=100f3642-43e4-46b3-8123-88a5dd9d8509 --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
- Loading branch information
Showing
10 changed files
with
88 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 41 additions & 60 deletions
101
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,44 @@ | ||
| <template> | ||
| <div class="mx-8"> | ||
| <settings-section | ||
| :title="$t('INBOX_MGMT.MICROSOFT.TITLE')" | ||
| :sub-title="$t('INBOX_MGMT.MICROSOFT.SUBTITLE')" | ||
| > | ||
| <div class="mb-6"> | ||
| <form @submit.prevent="requestAuthorization"> | ||
| <woot-submit-button | ||
| icon="brand-twitter" | ||
| button-text="Sign in with Microsoft" | ||
| type="submit" | ||
| :loading="isRequestingAuthorization" | ||
| /> | ||
| </form> | ||
| </div> | ||
| </settings-section> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| import alertMixin from 'shared/mixins/alertMixin'; | ||
| import microsoftClient from '../../../../../../api/channel/microsoftClient'; | ||
| import SettingsSection from '../../../../../../components/SettingsSection.vue'; | ||
| <script setup> | ||
| import { ref } from 'vue'; | ||
| import InboxReconnectionRequired from '../../components/InboxReconnectionRequired'; | ||
| import microsoftClient from 'dashboard/api/channel/microsoftClient'; | ||
| export default { | ||
| components: { | ||
| SettingsSection, | ||
| }, | ||
| mixins: [alertMixin], | ||
| props: { | ||
| inbox: { | ||
| type: Object, | ||
| default: () => ({}), | ||
| }, | ||
| }, | ||
| data() { | ||
| return { isRequestingAuthorization: false }; | ||
| }, | ||
| methods: { | ||
| async requestAuthorization() { | ||
| try { | ||
| this.isRequestingAuthorization = true; | ||
| const response = await microsoftClient.generateAuthorization({ | ||
| email: this.inbox.email, | ||
| }); | ||
| const { | ||
| data: { url }, | ||
| } = response; | ||
| window.location.href = url; | ||
| } catch (error) { | ||
| this.showAlert(this.$t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE')); | ||
| } finally { | ||
| this.isRequestingAuthorization = false; | ||
| } | ||
| }, | ||
| import { useI18n } from 'dashboard/composables/useI18n'; | ||
| import { useAlert } from 'dashboard/composables'; | ||
| const { t } = useI18n(); | ||
| const props = defineProps({ | ||
| inbox: { | ||
| type: Object, | ||
| default: () => ({}), | ||
| }, | ||
| }; | ||
| </script> | ||
| <style lang="scss" scoped> | ||
| .smtp-details-wrap { | ||
| margin-bottom: var(--space-medium); | ||
| }); | ||
| const isRequestingAuthorization = ref(false); | ||
| async function requestAuthorization() { | ||
| try { | ||
| isRequestingAuthorization.value = true; | ||
| const response = await microsoftClient.generateAuthorization({ | ||
| email: props.inbox.email, | ||
| }); | ||
| const { | ||
| data: { url }, | ||
| } = response; | ||
| window.location.href = url; | ||
| } catch (error) { | ||
| useAlert(t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE')); | ||
| } finally { | ||
| isRequestingAuthorization.value = false; | ||
| } | ||
| } | ||
| </style> | ||
| </script> | ||
|
|
||
| <template> | ||
| <inbox-reconnection-required | ||
| class="mx-8 mt-5" | ||
| @reauthorize="requestAuthorization" | ||
| /> | ||
| </template> |
23 changes: 9 additions & 14 deletions
23
...script/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,14 @@ | ||
| <script setup> | ||
| defineProps({ | ||
| actionUrl: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| }); | ||
| import Banner from 'dashboard/components/ui/Banner.vue'; | ||
| </script> | ||
|
|
||
| <template> | ||
| <div | ||
| class="flex items-center gap-2 px-4 py-3 text-sm text-white bg-red-500 rounded-md dark:bg-red-800/30 dark:text-red-50 min-h-10" | ||
| > | ||
| <fluent-icon icon="error-circle" class="text-white dark:text-red-50" /> | ||
| <slot> | ||
| <span v-html="$t('INBOX_MGMT.RECONNECTION_REQUIRED', { actionUrl })" /> | ||
| </slot> | ||
| </div> | ||
| <banner | ||
| color-scheme="alert" | ||
| class="justify-start rounded-md" | ||
| :banner-message="$t('INBOX_MGMT.RECONNECTION_REQUIRED')" | ||
| :action-button-label="$t('INBOX_MGMT.CLICK_TO_RECONNECT')" | ||
| has-action-button | ||
| @click="$emit('reauthorize')" | ||
| /> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters