feat: update auth

app/javascript/dashboard/api/notion_auth.js

@@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class NotionOAuthClient extends ApiClient {
+  constructor() {
+    super('notion', { accountScoped: true });
+  }
+
+  generateAuthorization() {
+    return axios.post(`${this.url}/authorization`);
+  }
+}
+
+export default new NotionOAuthClient();

app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue

@@ -5,12 +5,16 @@ import {
   useMapGetter,
   useStore,
 } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+
+import ButtonNext from 'next/button/Button.vue';
+import notionClient from 'dashboard/api/notion_auth.js';
 
 import Integration from './Integration.vue';
 import Spinner from 'shared/components/Spinner.vue';
 
+const { t } = useI18n();
 const store = useStore();
-
 const integrationLoaded = ref(false);
 
 const integration = useFunctionGetter('integrations/getIntegration', 'notion');
@@ -21,9 +25,19 @@ const integrationAction = computed(() => {
   if (integration.value.enabled) {
     return 'disconnect';
   }
-  return integration.value.action;
+
+  return '';
 });
 
+const authorize = async () => {
+  const response = await notionClient.generateAuthorization();
+  const {
+    data: { url },
+  } = response;
+
+  window.location.href = url;
+};
+
 const initializeNotionIntegration = async () => {
   await store.dispatch('integrations/get', 'notion');
   integrationLoaded.value = true;
@@ -45,10 +59,19 @@ onMounted(() => {
         :integration-enabled="integration.enabled"
         :integration-action="integrationAction"
         :delete-confirmation-text="{
-          title: $t('INTEGRATION_SETTINGS.NOTION.DELETE.TITLE'),
-          message: $t('INTEGRATION_SETTINGS.NOTION.DELETE.MESSAGE'),
+          title: t('INTEGRATION_SETTINGS.NOTION.DELETE.TITLE'),
+          message: t('INTEGRATION_SETTINGS.NOTION.DELETE.MESSAGE'),
         }"
-      />
+      >
+        <template #action>
+          <ButtonNext
+            faded
+            blue
+            :label="t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT')"
+            @click="authorize"
+          />
+        </template>
+      </Integration>
     </div>
     <div v-else class="flex items-center justify-center flex-1">
       <Spinner size="" color-scheme="primary" />