fix: #15 support auth

oeyoews · Jul 6, 2024 · c04fcd3 · c04fcd3
1 parent 3b75945
commit c04fcd3
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 19 deletions.
diff --git a/entrypoints/sidepanel/Sidepanel.vue b/entrypoints/sidepanel/Sidepanel.vue
@@ -14,8 +14,13 @@ import save2TiddlyWiki from '@/utils/save2TiddlyWiki';
 import { html2md, md2html } from '@/utils/parser';
 import { ElMessage as notify } from 'element-plus';
 import { checkStatus } from '@/utils/checkStatus';
-import { isCheckTw5Storage, tagStorage, portStorage } from '@/utils/storage';
-import getAI from '@/utils/openai';
+import {
+  isCheckTw5Storage,
+  tagStorage,
+  portStorage,
+  authStorage,
+} from '@/utils/storage';
+// import getAI from '@/utils/openai';
 
 const editRef = ref<HTMLInputElement>();
 const isChecking = ref(false);
@@ -33,12 +38,19 @@ const inputVisible = ref(false);
 const InputRef = ref();
 const inputValue = ref();
 const dynamicTags = ref();
-const port = ref<number>();
+const port = ref<number>(8000);
+const username = ref('');
+const password = ref('');
 const aihtml = ref('');
 const infoDialogStatus = ref(false);
 
 port.value = await portStorage.getValue();
 
+const auth = await authStorage.getValue();
+
+username.value = auth.username;
+password.value = auth.password;
+
 isCheckTw5.value = await isCheckTw5Storage.getValue();
 
 dynamicTags.value = Object.values(await tagStorage.getValue());
@@ -82,7 +94,9 @@ const handleSave = () =>
     port.value!,
     link.value,
     dynamicTags.value,
-    status
+    status,
+    username,
+    password
   );
 
 function addJournal() {
@@ -136,7 +150,7 @@ const status = ref<IStatus>(vanillaStatus);
 watchEffect(async () => {
   await isCheckTw5Storage.setValue(isCheckTw5.value);
   if (isCheckTw5.value) {
-    await checkStatus(port.value!, status, isChecking);
+    await checkStatus(port!, status, isChecking, username, password);
   }
 });
 
@@ -183,7 +197,14 @@ async function savePort(port: number) {
   await portStorage.setValue(port);
   if (isCheckTw5.value) {
     // 更新status
-    checkStatus(port, status, isChecking);
+    checkStatus(toRef(port), status, isChecking, username, password);
+  }
+}
+
+async function saveAuth(option: { username: string; password: string }) {
+  await authStorage.setValue(option);
+  if (password.value) {
+    checkStatus(port, status, isChecking, username, password);
   }
 }
 
@@ -356,14 +377,35 @@ const toggleInfoDialog = () => {
               --el-switch-off-color: #ff4949;
             " />
 
+          <!-- auth -->
+          <div>
+            <h2>TiddlyWiki5 登录认证</h2>
+            <div class="flex gap-2">
+              <ElInput v-model.trim.number="username" />
+              <ElInput
+                v-model.trim.number="password"
+                type="password"
+                show-password />
+              <ElButton
+                @click="
+                  saveAuth({
+                    username,
+                    password,
+                  })
+                "
+                >保存</ElButton
+              >
+            </div>
+          </div>
+
           <div>
             <h2>Nodejs TiddlyWiki5 端口</h2>
             <div class="flex gap-2">
               <ElInput v-model.trim.number="port" />
               <ElButton
                 type="success"
                 plain
-                @click="savePort(port!)"
+                @click="savePort(port)"
                 >保存</ElButton
               >
             </div>

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "usewiki2",
   "description": "Convert HTML to Markdown, and save to your computer, support nodejs tiddlywiki",
   "private": true,
-  "version": "3.4.0",
+  "version": "3.5.0",
   "type": "module",
   "scripts": {
     "dev": "wxt",

diff --git a/utils/checkStatus.ts b/utils/checkStatus.ts
@@ -4,35 +4,58 @@ import { ofetch } from 'ofetch';
 
 // 如果设置了username, password, 进行登录, 保存的时候应该也需要？
 export async function checkStatus(
-  port: number,
+  port: Ref<number>,
   status: Ref<IStatus>,
-  isChecking: Ref<boolean>
+  isChecking: Ref<boolean>,
+  username: Ref<string>,
+  password: Ref<string>
 ) {
+  const baseURL = `http://localhost:${port.value}`;
+  const token = 'Basic ' + btoa(username.value + ':' + password.value);
+
   isChecking.value = true;
-  const baseURL = `http://localhost:${port}`;
+
   const twFetch = ofetch.create({
     baseURL,
-    retry: 0,
+    retry: 1,
+    headers: {
+      Authorization: token,
+    },
     onResponse({ request, response, options }) {
       if (response.ok) {
         notify({
           title: '连接成功',
           type: 'success',
           position: 'bottom-right',
         });
+      } else {
+        if (response.status == 401) {
+          // response.statusText,
+          notify({
+            title: '请设置用户名和密码',
+            type: 'error',
+            position: 'bottom-right',
+          });
+        }
       }
     },
     async onRequestError({ request, response, options }) {
       notify({
-        title: '连接失败',
+        title: response?.statusText,
         type: 'error',
       });
     },
   });
 
-  const data = await twFetch('/status').finally(() => {
-    isChecking.value = false;
-  });
-
-  status.value = data;
+  try {
+    const data = await twFetch('/status');
+    status.value = data;
+  } catch (error) {
+    // notify({
+    //   title: '请设置用户名和密码',
+    //   type: 'error',
+    //   position: 'bottom-right',
+    // });
+  }
+  isChecking.value = false;
 }
diff --git a/utils/save2TiddlyWiki.ts b/utils/save2TiddlyWiki.ts
@@ -9,7 +9,9 @@ const save2TiddlyWiki = async (
   port: number,
   url: string,
   tag: string[],
-  status: Ref<IStatus>
+  status: Ref<IStatus>,
+  username: Ref<string>,
+  password: Ref<string>
 ) => {
   const baseURL = `http://localhost:${port}/recipes/default/tiddlers`;
 
@@ -43,13 +45,15 @@ const save2TiddlyWiki = async (
     tags,
   };
 
+  const token = 'Basic ' + btoa(username.value + ':' + password.value);
   const savetwFetch = ofetch.create({
     baseURL,
     method: 'PUT',
     retry: 0,
     headers: {
       'Content-Type': 'application/json',
       'x-requested-with': 'TiddlyWiki',
+      Authorization: token,
     },
     async onResponse({ request, response, options }) {
       if (response.ok) {
@@ -74,6 +78,7 @@ const save2TiddlyWiki = async (
     headers: {
       'Content-Type': 'application/json',
       'x-requested-with': 'TiddlyWiki',
+      Authorization: `Basic ${btoa('oeyoews' + ':' + 'oeyoews')}`,
     },
   });
 
@@ -82,6 +87,11 @@ const save2TiddlyWiki = async (
       switch (response.status) {
         case 200:
           break;
+        case 401:
+          notify({
+            message: response.statusText,
+          });
+          break;
         case 404:
           await savetwFetch(`/${title}`, {
             body: tiddler,

diff --git a/utils/storage.ts b/utils/storage.ts
@@ -4,6 +4,16 @@ export const portStorage = storage.defineItem<number>('sync:port', {
   defaultValue: constant.default_port,
 });
 
+export const authStorage = storage.defineItem<{
+  username: string;
+  password: string;
+}>('sync:auth', {
+  defaultValue: {
+    username: '',
+    password: '',
+  },
+});
+
 export const tagStorage = storage.defineItem<string[]>('sync:tags', {
   defaultValue: [constant.default_tag],
 });