feat(share): support more secure file sharing (#156)

* feat(share): support more secure file sharing

* feat(share): share operation in folder page

* feat(i18n): add openlist_share driver addition english translation

* fix(archive): decompress disappear in folder context menu

* fix(copy_link): incorrect behavior when copy single file share link

* refactor(MuseUser): use onMount instead of IIFE

* refactor(archive): replace indexOf with includes for better readability

* refactor(share): simplify randomPwd function using Array.from

* fix(share): use local var instead of store in edit page initialization

---------

Signed-off-by: MadDogOwner <[email protected]>
Co-authored-by: MadDogOwner <[email protected]>

Author: KirCute

.github/workflows/sync_repo.yml

@@ -27,7 +27,7 @@ jobs:
         run: |
           git config user.name "GitHub Actions"
           git config user.email "[email protected]"
-          
+
           # Create a new branch
           git checkout --orphan new-main
           git add .

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@openlist-frontend/openlist-frontend",
   "version": "4.1.1",
+  "type": "module",
   "author": {
     "name": "The OpenList Projects Contributors",
     "url": "https://github.com/OpenListTeam"
@@ -80,6 +81,7 @@
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "crypto-js": "^4.2.0",
+    "handlebars": "^4.7.8",
     "hash-wasm": "^4.12.0",
     "hls.js": "^1.6.5",
     "ini": "^5.0.0",

pnpm-lock.yaml

@@ -16,7 +16,7 @@ import { setSettings } from "~/store"
 import { setArchiveExtensions } from "~/store/archive"
 import { Resp } from "~/types"
 import { base_path, bus, handleRespWithoutAuthAndNotify, r } from "~/utils"
-import { MustUser } from "./MustUser"
+import { MustUser, UserOrGuest } from "./MustUser"
 import "./index.css"
 import { globalStyles } from "./theme"
 
@@ -91,6 +91,14 @@ const App: Component = () => {
                 </MustUser>
               }
             />
+            <Route
+              path={["/@s/*", "/%40s/*"]}
+              element={
+                <UserOrGuest>
+                  <Home />
+                </UserOrGuest>
+              }
+            />
             <Route
               path="*"
               element={

src/app/App.tsx

@@ -1,9 +1,9 @@
-import { createSignal, JSXElement, Match, Switch } from "solid-js"
+import { createSignal, JSXElement, Match, onMount, Switch } from "solid-js"
 import { Error, FullScreenLoading } from "~/components"
 import { useFetch, useT } from "~/hooks"
 import { Me, setMe } from "~/store"
 import { PResp } from "~/types"
-import { r, handleResp } from "~/utils"
+import { r, handleResp, handleRespWithoutAuthAndNotify } from "~/utils"
 
 const MustUser = (props: { children: JSXElement }) => {
   const t = useT()
@@ -25,4 +25,32 @@ const MustUser = (props: { children: JSXElement }) => {
   )
 }
 
-export { MustUser }
+const UserOrGuest = (props: { children: JSXElement }) => {
+  const [loading, data] = useFetch((): PResp<Me> => r.get("/me"))
+  const [skipLogin, setSkipLogin] = createSignal(false)
+  onMount(async () => {
+    handleRespWithoutAuthAndNotify(await data(), setMe, (_msg, _code) => {
+      setMe({
+        id: 2,
+        username: "guest",
+        password: "",
+        base_path: "/",
+        role: 1,
+        disabled: false,
+        permission: 0,
+        sso_id: "",
+        otp: false,
+      })
+      setSkipLogin(true)
+    })
+  })
+  return (
+    <Switch fallback={props.children}>
+      <Match when={!skipLogin() && loading()}>
+        <FullScreenLoading />
+      </Match>
+    </Switch>
+  )
+}
+
+export { MustUser, UserOrGuest }

src/app/MustUser.tsx

@@ -40,7 +40,7 @@ async function getSaveDir(rpc_url: string, rpc_secret: string) {
 export const useDownload = () => {
   const { rawLinks } = useSelectedLink()
   const t = useT()
-  const { pathname } = useRouter()
+  const { pathname, isShare } = useRouter()
   return {
     batchDownloadSelected: () => {
       const urls = rawLinks(true)
@@ -63,6 +63,7 @@ export const useDownload = () => {
                 pathJoin(pathname(), pre),
                 obj,
                 "direct",
+                isShare(),
                 true,
               ),
               name: obj.name,

src/hooks/useDownload.ts

@@ -1,7 +1,15 @@
 import { objStore, selectedObjs, State, me } from "~/store"
 import { Obj } from "~/types"
-import { api, encodePath, pathDir, pathJoin, standardizePath } from "~/utils"
+import {
+  base_path,
+  api,
+  encodePath,
+  pathDir,
+  pathJoin,
+  standardizePath,
+} from "~/utils"
 import { useRouter, useUtil } from "."
+import { cookieStorage } from "@solid-primitives/storage"
 
 type URLType = "preview" | "direct" | "proxy"
 
@@ -10,33 +18,46 @@ export const getLinkByDirAndObj = (
   dir: string,
   obj: Obj,
   type: URLType = "direct",
+  isShare: boolean,
   encodeAll?: boolean,
 ) => {
-  if (type !== "preview") {
-    dir = pathJoin(me().base_path, dir)
+  let path
+  if (isShare) {
+    path = standardizePath(obj.path, true)
+    if (type === "preview") path = `/@s${path}`
+  } else {
+    if (type !== "preview") dir = pathJoin(me().base_path, dir)
+    dir = standardizePath(dir, true)
+    path = `${dir}/${obj.name}`
   }
-  dir = standardizePath(dir, true)
-  let path = `${dir}/${obj.name}`
+
   path = encodePath(path, encodeAll)
   let host = api
-  let prefix = type === "direct" ? "/d" : "/p"
+  let prefix = isShare ? "/sd" : type === "direct" ? "/d" : "/p"
   if (type === "preview") {
     prefix = ""
-    if (!api.startsWith(location.origin)) host = location.origin
+    if (!api.startsWith(location.origin + base_path))
+      host = location.origin + base_path
   }
   let ans = `${host}${prefix}${path}`
-  if (type !== "preview" && obj.sign) {
+  if (type !== "preview" && !isShare && obj.sign) {
     ans += `?sign=${obj.sign}`
   }
+  if (type !== "preview" && isShare) {
+    const pwd = cookieStorage.getItem("browser-password") || ""
+    if (pwd) {
+      ans += `?pwd=${pwd}`
+    }
+  }
   return ans
 }
 
 // get download link by current state and pathname
 export const useLink = () => {
-  const { pathname } = useRouter()
+  const { pathname, isShare } = useRouter()
   const getLinkByObj = (obj: Obj, type?: URLType, encodeAll?: boolean) => {
     const dir = objStore.state !== State.File ? pathname() : pathDir(pathname())
-    return getLinkByDirAndObj(dir, obj, type, encodeAll)
+    return getLinkByDirAndObj(dir, obj, type, isShare(), encodeAll)
   }
   const rawLink = (obj: Obj, encodeAll?: boolean) => {
     return getLinkByObj(obj, "direct", encodeAll)

src/hooks/useLink.ts

@@ -17,6 +17,9 @@ const useRouter = () => {
   const pathname = createMemo(() => {
     return trimBase(decodeURIComponent(location.pathname))
   })
+  const isShare = createMemo(() => {
+    return pathname().startsWith("/@s")
+  })
   return {
     to: (
       path: string,
@@ -45,6 +48,7 @@ const useRouter = () => {
       navigate(1)
     },
     pathname: pathname,
+    isShare: isShare,
     search: location.search,
     searchParams: location.query,
     setSearchParams: (

src/hooks/useRouter.ts

@@ -729,6 +729,12 @@
     "url": "Url",
     "username": "Username"
   },
+  "OpenListShare": {
+    "forward_archive_requests": "Forward archive requests",
+    "pwd": "Share code",
+    "sid": "Share ID",
+    "url": "Url"
+  },
   "PikPak": {
     "captcha_token": "Captcha token",
     "device_id": "Device id",

src/lang/en/drivers.json

@@ -9,6 +9,7 @@ import manage from "./manage.json"
 import metas from "./metas.json"
 import settings_other from "./settings_other.json"
 import settings from "./settings.json"
+import shares from "./shares.json"
 import storages from "./storages.json"
 import tasks from "./tasks.json"
 import users from "./users.json"
@@ -25,6 +26,7 @@ export const dict = {
   metas,
   settings_other,
   settings,
+  shares,
   storages,
   tasks,
   users,