Skip to content

Commit 832b323

Browse files
xhofexhofe
committed
dropbox tool
1 parent a465d7f commit 832b323

File tree

7 files changed

+223
-14
lines changed

7 files changed

+223
-14
lines changed

‎docs/.vuepress/components/api/ApiSelect.vue‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,30 @@
11
<script setup lang="ts">
2-
import { NSelect } from 'naive-ui';
3-
import { computed, ref, watch } from 'vue';
4-
import { apis, defaultApi } from '.';
5-
import NaiveClient from '../NaiveClient.vue';
2+
import { NSelect } from "naive-ui";
3+
import { computed, ref, watch } from "vue";
4+
import { apis, defaultApi } from ".";
5+
import NaiveClient from "../NaiveClient.vue";
66
7-
const cur_api_name = ref(defaultApi)
8-
const api = computed(() => apis[cur_api_name.value] as string)
9-
watch(api, (v) => {
10-
localStorage.setItem("api", v)
11-
})
12-
const api_options = Object.entries(apis).map(([key, value]) => ({ label: `${value} (${key})`, value: key }))
7+
const cur_api_name = ref(defaultApi);
8+
if (typeof localStorage !== "undefined") {
9+
cur_api_name.value = localStorage.getItem("api_name") || defaultApi;
10+
}
11+
12+
watch(cur_api_name, (v) => {
13+
localStorage.setItem("api_name", v);
14+
});
15+
const api_options = Object.entries(apis).map(([key, value]) => ({
16+
label: `${value} (${key})`,
17+
value: key,
18+
}));
1319
</script>
1420

1521
<template>
1622
<NaiveClient>
17-
<NSelect v-model:value="cur_api_name" size="large" :options="api_options" style="margin-bottom: 4px;"></NSelect>
23+
<NSelect
24+
v-model:value="cur_api_name"
25+
size="large"
26+
:options="api_options"
27+
style="margin-bottom: 4px"
28+
></NSelect>
1829
</NaiveClient>
19-
</template>
30+
</template>

‎docs/.vuepress/components/api/index.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
1-
export const apis = {
1+
export const apis: Record<string, string> = {
22
raw_jp: "https://api.nn.ci",
33
cf: "https://api-cf.nn.ci",
44
cn: "https://api.xhofe.top",
55
};
6+
7+
if (typeof location !== "undefined") {
8+
if (
9+
location.origin.startsWith("http://localhost") ||
10+
location.origin.startsWith("http://127.0.0.1")
11+
) {
12+
apis.local = "http://localhost:3002";
13+
}
14+
}
15+
616
export const defaultApi = "cf";
717
export const api = () => {
818
if (typeof localStorage === "undefined") {
919
return apis[defaultApi];
1020
}
11-
return localStorage.getItem("api") || apis[defaultApi];
21+
return apis[localStorage.getItem("api_name") || defaultApi];
1222
};

‎docs/.vuepress/components/dropbox/Callback.vue‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<script lang="ts" setup>
2+
import { NAlert, NButton, NInput, NSpace, NSpin } from "naive-ui";
3+
import { reactive } from "vue";
4+
import { api } from "../api";
5+
6+
const cur = "http://localhost:8080";
7+
const redirect_uri = `${cur}/tool/dropbox/callback`;
8+
9+
const url = new URL(window.location.href);
10+
const code = url.searchParams.get("code");
11+
const client = url.searchParams.get("state");
12+
const error = url.searchParams.get("error");
13+
const error_description = url.searchParams.get("error_description");
14+
15+
const [client_id, client_secret] = atob(client as string).split("::");
16+
17+
const data = reactive({
18+
refreshToken: "",
19+
accessToken: "",
20+
error1: "",
21+
errorMessage1: "",
22+
});
23+
24+
const getToken = () => {
25+
fetch(`${api()}/alist/dropbox/token`, {
26+
method: "POST",
27+
headers: {
28+
"Content-Type": "application/json",
29+
},
30+
body: JSON.stringify({
31+
code,
32+
client_id,
33+
client_secret,
34+
grant_type: "authorization_code",
35+
redirect_uri: redirect_uri,
36+
}),
37+
})
38+
.then((resp) => resp.json())
39+
.then((res) => {
40+
console.log(res);
41+
if (res.error) {
42+
data.error1 = res.error;
43+
data.errorMessage1 = res.error_description;
44+
return;
45+
}
46+
data.refreshToken = res.refresh_token;
47+
data.accessToken = res.access_token;
48+
});
49+
};
50+
51+
if (code && client && !error) {
52+
getToken();
53+
}
54+
</script>
55+
56+
<template>
57+
<NAlert
58+
:title="error || 'Error'"
59+
type="error"
60+
v-if="!code || !client || error"
61+
>
62+
{{ error_description }}
63+
</NAlert>
64+
<NSpace v-else vertical size="large">
65+
<p><b>client_id: </b>{{ client_id }}</p>
66+
<p><b>client_secret: </b>{{ client_secret }}</p>
67+
<p><b>redirect_uri: </b>{{ redirect_uri }}</p>
68+
<NAlert
69+
:title="data.error1"
70+
type="error"
71+
v-if="data.error1 || data.errorMessage1"
72+
>
73+
{{ data.errorMessage1 }}
74+
</NAlert>
75+
<NSpace vertical>
76+
<b>refresh_token:</b>
77+
<NSpin v-if="!data.refreshToken && !data.errorMessage1" />
78+
<NInput
79+
v-else
80+
type="textarea"
81+
autosize
82+
readonly
83+
:value="data.refreshToken"
84+
/>
85+
</NSpace>
86+
</NSpace>
87+
</template>
88+
89+
<style scoped>
90+
p {
91+
margin: 0;
92+
font-size: large;
93+
}
94+
</style>

‎docs/.vuepress/components/dropbox/Request.vue‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<script lang="ts" setup>
2+
import { NInput, NSelect, NButton, NSpace, NCheckbox } from "naive-ui";
3+
import { ref } from "vue";
4+
5+
const cur = "http://localhost:8080";
6+
7+
const client = ref({
8+
id: "76lrwrklhdn1icb",
9+
secret: "",
10+
});
11+
12+
const useMyOwn = ref(false);
13+
14+
const createClient = () => {
15+
window.open("https://dropbox.com/developers/apps", "_blank");
16+
};
17+
18+
const getToken = () => {
19+
const url = new URL(`https://www.dropbox.com/oauth2/authorize`);
20+
url.searchParams.set("client_id", client.value.id);
21+
url.searchParams.set("response_type", "code");
22+
url.searchParams.set("redirect_uri", `${cur}/tool/dropbox/callback`);
23+
url.searchParams.set("token_access_type", "offline");
24+
url.searchParams.set(
25+
"state",
26+
window.btoa(`${client.value.id}::${client.value.secret}`)
27+
);
28+
window.open(url.toString(), "_self");
29+
};
30+
</script>
31+
32+
<template>
33+
<NSpace vertical size="large">
34+
<NCheckbox v-model:checked="useMyOwn" size="large"
35+
>Use my own client</NCheckbox
36+
>
37+
<template v-if="useMyOwn">
38+
<h4>client_id</h4>
39+
<NInput size="large" v-model:value="client.id" />
40+
<h4>client_secret</h4>
41+
<NInput
42+
size="large"
43+
v-model:value="client.secret"
44+
placeholder="keep it empty if you don't have one"
45+
/>
46+
</template>
47+
<NSpace justify="center">
48+
<NButton size="large" secondary @click="createClient" v-if="useMyOwn"
49+
>Create client</NButton
50+
>
51+
<NButton size="large" type="info" @click="getToken"
52+
>Get Refresh Token</NButton
53+
>
54+
</NSpace>
55+
</NSpace>
56+
</template>
57+
58+
<style scoped>
59+
h4 {
60+
margin: 0;
61+
}
62+
</style>

‎docs/.vuepress/config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,5 +135,13 @@ export default defineUserConfig({
135135
"@Desktop": path.resolve(__dirname, "./components/Desktop.vue"),
136136
"@Changelog": path.resolve(__dirname, "./components/changelog/index.vue"),
137137
"@Api": path.resolve(__dirname, "./components/api/index.ts"),
138+
"@Dropbox/Request": path.resolve(
139+
__dirname,
140+
"./components/dropbox/Request.vue"
141+
),
142+
"@Dropbox/Callback": path.resolve(
143+
__dirname,
144+
"./components/dropbox/Callback.vue"
145+
),
138146
},
139147
});

‎docs/tool/dropbox/callback.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: "Dropbox Refresh Token Callback"
3+
toc: false
4+
---
5+
6+
<NaiveClient>
7+
<Callback />
8+
</NaiveClient>
9+
10+
<script setup lang="ts">
11+
import Callback from "@Dropbox/Callback";
12+
</script>

‎docs/tool/dropbox/request.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: "Get Dropbox Refresh Token"
3+
toc: false
4+
---
5+
6+
<NaiveClient>
7+
<Dropbox />
8+
</NaiveClient>
9+
10+
<script setup lang="ts">
11+
import Dropbox from "@Dropbox/Request";
12+
</script>

0 commit comments

Comments
 (0)