diff --git a/.env b/.env index ab5a211f2..da57cb938 100644 --- a/.env +++ b/.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 \ No newline at end of file +VITE_GOOGLE_FONTS_MAX_FONTS=100 + +VITE_DROPBOX_APP_KEY=r4tb6iv2jguoauy \ No newline at end of file diff --git a/src/components/editor/aside/integrations/AsideDropboxLoad.vue b/src/components/editor/aside/integrations/AsideDropboxLoad.vue index 75b09a773..c4fd053f2 100644 --- a/src/components/editor/aside/integrations/AsideDropboxLoad.vue +++ b/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) { 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) => { diff --git a/src/components/editor/aside/integrations/AsideDropboxSave.vue b/src/components/editor/aside/integrations/AsideDropboxSave.vue index a2aed30a2..43fa4ff59 100644 --- a/src/components/editor/aside/integrations/AsideDropboxSave.vue +++ b/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 diff --git a/src/components/editor/aside/project/AsideBarProject.vue b/src/components/editor/aside/project/AsideBarProject.vue index 4ddb579c2..57a12cdcd 100644 --- a/src/components/editor/aside/project/AsideBarProject.vue +++ b/src/components/editor/aside/project/AsideBarProject.vue @@ -22,8 +22,8 @@ - - + + diff --git a/src/store/index.ts b/src/store/index.ts index b81117ab7..557e83eeb 100644 --- a/src/store/index.ts +++ b/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, }, }) diff --git a/src/store/module/absolute.ts b/src/store/module/absolute.ts index f21ed60c1..e86fcd103 100644 --- a/src/store/module/absolute.ts +++ b/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: {}, diff --git a/src/store/module/auth.ts b/src/store/module/auth.ts new file mode 100644 index 000000000..0baa4853c --- /dev/null +++ b/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: {}, +} diff --git a/src/types/absolute.ts b/src/types/absolute.ts index 9c83e1bce..5087cbd33 100644 --- a/src/types/absolute.ts +++ b/src/types/absolute.ts @@ -5,4 +5,5 @@ export interface AbsoluteState { shortcuts: Record logger: boolean pdf: Record + auth: Record } diff --git a/src/types/auth.ts b/src/types/auth.ts new file mode 100644 index 000000000..9ad7ec938 --- /dev/null +++ b/src/types/auth.ts @@ -0,0 +1,9 @@ +import { Maybe } from './utils' + +export interface AuthState { + dropbox: AuthStateDropbox +} + +interface AuthStateDropbox { + accessToken: Maybe +} diff --git a/src/use/env.ts b/src/use/env.ts index a2f6d2881..5944fafc5 100644 --- a/src/use/env.ts +++ b/src/use/env.ts @@ -13,6 +13,10 @@ export const useEnv: Callback = () => { 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 = () => { } return { + dropboxKey, projectEmpty, projectLocalStorage, isEmptyProject, diff --git a/src/use/start.ts b/src/use/start.ts index 305b7069f..d5436e8c1 100644 --- a/src/use/start.ts +++ b/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, void> = (store: Store) => { let _log = console.log, @@ -51,6 +56,36 @@ const global: Callback, void> = (store: Store) => { } } +const auth = (store: Store, 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, void> = (store: Store) => { const dark = localStorage.getItem('theme') @@ -74,12 +109,14 @@ const langSet: Callback, void> = (store: Store) => { export const useStart: Callback = () => { const store = useStore() + const route = useRoute() const init = () => { global(store) darkSet(store) langSet(store) usePDF().init(store) + auth(store, route) } return { init }