feat(save): dropbox integration

.env

@@ -2,4 +2,6 @@ VITE_PROJECT_EMPTY=__NOT_CREATED__
 VITE_LOCAL_STORAGE=__BETTER_WRITE__
 
 VITE_GOOGLE_FONTS_KEY=AIzaSyCdyHpD96473nUqsp16vcQocd7HC8WdtNE
-VITE_GOOGLE_FONTS_MAX_FONTS=100
+VITE_GOOGLE_FONTS_MAX_FONTS=100
+
+VITE_DROPBOX_APP_KEY=r4tb6iv2jguoauy

src/components/editor/aside/integrations/AsideDropboxLoad.vue

@@ -32,20 +32,27 @@
   } from 'dropbox'
   import { useStore } from 'vuex'
   import { useDropbox } from '@/use/storage/dropbox'
+  import { useEnv } from '@/use/env'
 
   const { t } = useI18n()
   const store = useStore()
 
-  const onClick = () => {
+  const onClick = async () => {
+    if (!store.state.auth.dropbox.accessToken) {
+      window.open(
+        `https://www.dropbox.com/oauth2/authorize?client_id=${useEnv().dropboxKey()}&response_type=token&redirect_uri=http://localhost:3000/better-write/&scope=account_info.read files.metadata.write files.metadata.read files.content.write files.content.read`,
+        '_self'
+      )
+      return
+    }
+
     const options = {
       success: function (files: Array<any>) {
         const file = files[0]
 
         const dbx = new DBX({
-          accessToken:
-            'HSbp42Qs_CUAAAAAAAAAAaOLw44wXM3F7UAw0FneGyLahq_yS5jHFYFUIsCKxygY',
+          accessToken: store.state.auth.dropbox.accessToken,
         })
-
         dbx
           .filesDownload({ path: file.id })
           .then(async (data: DropboxResponse<any>) => {

src/components/editor/aside/integrations/AsideDropboxSave.vue

@@ -33,6 +33,14 @@
   const { t } = useI18n()
 
   const onClick = () => {
+    if (!store.state.auth.dropbox.accessToken) {
+      window.open(
+        `https://www.dropbox.com/oauth2/authorize?client_id=${useEnv().dropboxKey()}&response_type=token&redirect_uri=http://localhost:3000/better-write/&scope=account_info.read files.metadata.write files.metadata.read files.content.write files.content.read`,
+        '_self'
+      )
+      return
+    }
+
     const obj = {
       project: store.state.project,
       editor: store.state.editor,
@@ -45,8 +53,7 @@
     }
 
     const dbx = new Dropbox({
-      accessToken:
-        'HSbp42Qs_CUAAAAAAAAAAaOLw44wXM3F7UAw0FneGyLahq_yS5jHFYFUIsCKxygY',
+      accessToken: store.state.auth.dropbox.accessToken,
     })
 
     dbx

src/components/editor/aside/project/AsideBarProject.vue

@@ -22,8 +22,8 @@
     <AsideLine v-if="name !== useEnv().projectEmpty()" />
     <AsideLoadProject />
     <AsideSaveProject v-if="name !== useEnv().projectEmpty()" />
-    <AsideLine v-if="name !== useEnv().projectEmpty()" />
-    <AsideDropboxLoad v-if="name !== useEnv().projectEmpty()" />
+    <AsideLine />
+    <AsideDropboxLoad />
     <AsideDropboxSave v-if="name !== useEnv().projectEmpty()" />
     <AsideLine v-if="name !== useEnv().projectEmpty()" />
     <AsideConfigurationPDF v-if="name !== useEnv().projectEmpty()" />

src/store/index.ts

@@ -6,6 +6,7 @@ import absolute from '@/store/module/absolute'
 import shortcuts from '@/store/module/shortcuts'
 import logger from '@/store/module/logger'
 import pdf from '@/store/module/pdf'
+import auth from '@/store/module/auth'
 
 export default createStore({
   modules: {
@@ -16,5 +17,6 @@ export default createStore({
     shortcuts,
     logger,
     pdf,
+    auth,
   },
 })

src/store/module/absolute.ts

@@ -18,6 +18,9 @@ export default {
         configuration: false,
         preview: false,
       },
+      auth: {
+        dropbox: false,
+      },
     } as AbsoluteState),
   mutations: {
     commands(state: any) {
@@ -44,6 +47,9 @@ export default {
     switchPdfPreview(state: any, b: boolean) {
       state.pdf.preview = b
     },
+    switchAuthDropbox(state: any, b: boolean) {
+      state.auth.dropbox = b
+    },
   },
   actions: {},
   getters: {},

src/store/module/auth.ts

@@ -0,0 +1,19 @@
+import { AbsoluteState } from '@/types/absolute'
+import { AuthState } from '@/types/auth'
+
+export default {
+  namespaced: true,
+  state: () =>
+    ({
+      dropbox: {
+        accessToken: null,
+      },
+    } as AuthState),
+  mutations: {
+    setDropboxToken(state: AuthState, token: string) {
+      state.dropbox.accessToken = token
+    },
+  },
+  actions: {},
+  getters: {},
+}

src/types/absolute.ts

@@ -5,4 +5,5 @@ export interface AbsoluteState {
   shortcuts: Record<string, boolean>
   logger: boolean
   pdf: Record<string, boolean>
+  auth: Record<string, boolean>
 }

src/types/auth.ts

@@ -0,0 +1,9 @@
+import { Maybe } from './utils'
+
+export interface AuthState {
+  dropbox: AuthStateDropbox
+}
+
+interface AuthStateDropbox {
+  accessToken: Maybe<string>
+}

src/use/env.ts

@@ -13,6 +13,10 @@ export const useEnv: Callback<any> = () => {
     return name === useEnv().projectEmpty()
   }
 
+  const dropboxKey = () => {
+    return import.meta.env.VITE_DROPBOX_APP_KEY as string
+  }
+
   const maxFonts = () => {
     return parseInt(
       import.meta.env.VITE_GOOGLE_FONTS_MAX_FONTS as string
@@ -24,6 +28,7 @@ export const useEnv: Callback<any> = () => {
   }
 
   return {
+    dropboxKey,
     projectEmpty,
     projectLocalStorage,
     isEmptyProject,

src/use/start.ts

@@ -3,6 +3,11 @@ import { useI18n } from 'vue-i18n'
 import { Callback } from '@/types/utils'
 import { usePDF } from './pdf'
 import { useFormat } from './format'
+import {
+  RouteComponent,
+  RouteLocationNormalizedLoaded,
+  useRoute,
+} from 'vue-router'
 
 const global: Callback<Store<any>, void> = (store: Store<any>) => {
   let _log = console.log,
@@ -51,6 +56,36 @@ const global: Callback<Store<any>, void> = (store: Store<any>) => {
   }
 }
 
+const auth = (store: Store<any>, route: RouteLocationNormalizedLoaded) => {
+  if (route.fullPath.includes('access_token')) {
+    let str = ''
+    let firstQuery = false
+    let finish = false
+
+    for (let i = 0; i < route.fullPath.length; i++) {
+      if (finish) {
+        store.commit('auth/setDropboxToken', str)
+
+        return
+      }
+      const letter = route.fullPath.charAt(i)
+
+      if (letter === '&') {
+        firstQuery = false
+        finish = true
+      }
+
+      if (firstQuery) {
+        str += letter
+      }
+
+      if (letter === '=') firstQuery = true
+    }
+
+    console.log(str)
+  }
+}
+
 const darkSet: Callback<Store<any>, void> = (store: Store<any>) => {
   const dark = localStorage.getItem('theme')
 
@@ -74,12 +109,14 @@ const langSet: Callback<Store<any>, void> = (store: Store<any>) => {
 
 export const useStart: Callback<void> = () => {
   const store = useStore()
+  const route = useRoute()
 
   const init = () => {
     global(store)
     darkSet(store)
     langSet(store)
     usePDF().init(store)
+    auth(store, route)
   }
 
   return { init }