marco/yt-dlp-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code refactoring, fixed wrong jwt expire time

Browse Source
This commit is contained in:
marcobaobao
2023-06-23 15:18:40 +02:00
parent 7d510fd2d4
commit 3067cee08c
5 changed files with 151 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
frontend/src/features/settings/settingsSlice.ts
View File

@@ -1,99 +1,108 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit" import { createSlice, PayloadAction } from "@reduxjs/toolkit"
export type LanguageUnion = "english" | "chinese" | "russian" | "italian" | "spanish" | "korean" | "japanese" | "catalan" export type LanguageUnion =
| "english"
| "chinese"
| "russian"
| "italian"
| "spanish"
| "korean"
| "japanese"
| "catalan"
export type ThemeUnion = "light" | "dark" export type ThemeUnion = "light" | "dark"
export interface SettingsState { export interface SettingsState {
serverAddr: string serverAddr: string
serverPort: string serverPort: string
language: LanguageUnion language: LanguageUnion
theme: ThemeUnion theme: ThemeUnion
cliArgs: string cliArgs: string
formatSelection: boolean formatSelection: boolean
ratelimit: string ratelimit: string
fileRenaming: boolean fileRenaming: boolean
pathOverriding: boolean pathOverriding: boolean
enableCustomArgs: boolean enableCustomArgs: boolean
listView: boolean listView: boolean
} }
const initialState: SettingsState = { const initialState: SettingsState = {
serverAddr: localStorage.getItem("server-addr") || window.location.hostname, serverAddr: localStorage.getItem("server-addr") || window.location.hostname,
serverPort: localStorage.getItem("server-port") || window.location.port, serverPort: localStorage.getItem("server-port") || window.location.port,
language: (localStorage.getItem("language") || "english") as LanguageUnion, language: (localStorage.getItem("language") || "english") as LanguageUnion,
theme: (localStorage.getItem("theme") || "light") as ThemeUnion, theme: (localStorage.getItem("theme") || "light") as ThemeUnion,
cliArgs: localStorage.getItem("cli-args") ?? "", cliArgs: localStorage.getItem("cli-args") ?? "",
formatSelection: localStorage.getItem("format-selection") === "true", formatSelection: localStorage.getItem("format-selection") === "true",
ratelimit: localStorage.getItem("rate-limit") ?? "", ratelimit: localStorage.getItem("rate-limit") ?? "",
fileRenaming: localStorage.getItem("file-renaming") === "true", fileRenaming: localStorage.getItem("file-renaming") === "true",
pathOverriding: localStorage.getItem("path-overriding") === "true", pathOverriding: localStorage.getItem("path-overriding") === "true",
enableCustomArgs: localStorage.getItem("enable-custom-args") === "true", enableCustomArgs: localStorage.getItem("enable-custom-args") === "true",
listView: localStorage.getItem("listview") === "true", listView: localStorage.getItem("listview") === "true",
} }
export const settingsSlice = createSlice({ export const settingsSlice = createSlice({
name: "settings", name: "settings",
initialState, initialState,
reducers: { reducers: {
setServerAddr: (state, action: PayloadAction<string>) => { setServerAddr: (state, action: PayloadAction<string>) => {
state.serverAddr = action.payload state.serverAddr = action.payload
localStorage.setItem("server-addr", action.payload) localStorage.setItem("server-addr", action.payload)
}, },
setServerPort: (state, action: PayloadAction<string>) => { setServerPort: (state, action: PayloadAction<string>) => {
state.serverPort = action.payload state.serverPort = action.payload
localStorage.setItem("server-port", action.payload) localStorage.setItem("server-port", action.payload)
}, },
setLanguage: (state, action: PayloadAction<LanguageUnion>) => { setLanguage: (state, action: PayloadAction<LanguageUnion>) => {
state.language = action.payload state.language = action.payload
localStorage.setItem("language", action.payload) localStorage.setItem("language", action.payload)
}, },
setCliArgs: (state, action: PayloadAction<string>) => { setCliArgs: (state, action: PayloadAction<string>) => {
state.cliArgs = action.payload state.cliArgs = action.payload
localStorage.setItem("cli-args", action.payload) localStorage.setItem("cli-args", action.payload)
}, },
setTheme: (state, action: PayloadAction<ThemeUnion>) => { setTheme: (state, action: PayloadAction<ThemeUnion>) => {
state.theme = action.payload state.theme = action.payload
localStorage.setItem("theme", action.payload) localStorage.setItem("theme", action.payload)
}, },
setFormatSelection: (state, action: PayloadAction<boolean>) => { setFormatSelection: (state, action: PayloadAction<boolean>) => {
state.formatSelection = action.payload state.formatSelection = action.payload
localStorage.setItem("format-selection", action.payload.toString()) localStorage.setItem("format-selection", action.payload.toString())
}, },
setRateLimit: (state, action: PayloadAction<string>) => { setRateLimit: (state, action: PayloadAction<string>) => {
state.ratelimit = action.payload state.ratelimit = action.payload
localStorage.setItem("rate-limit", action.payload) localStorage.setItem("rate-limit", action.payload)
}, },
setPathOverriding: (state, action: PayloadAction<boolean>) => { setPathOverriding: (state, action: PayloadAction<boolean>) => {
state.pathOverriding = action.payload state.pathOverriding = action.payload
localStorage.setItem("path-overriding", action.payload.toString()) localStorage.setItem("path-overriding", action.payload.toString())
}, },
setFileRenaming: (state, action: PayloadAction<boolean>) => { setFileRenaming: (state, action: PayloadAction<boolean>) => {
state.fileRenaming = action.payload state.fileRenaming = action.payload
localStorage.setItem("file-renaming", action.payload.toString()) localStorage.setItem("file-renaming", action.payload.toString())
}, },
setEnableCustomArgs: (state, action: PayloadAction<boolean>) => { setEnableCustomArgs: (state, action: PayloadAction<boolean>) => {
state.enableCustomArgs = action.payload state.enableCustomArgs = action.payload
localStorage.setItem("enable-custom-args", action.payload.toString()) localStorage.setItem("enable-custom-args", action.payload.toString())
}, },
toggleListView: (state) => { toggleListView: (state) => {
state.listView = !state.listView state.listView = !state.listView
localStorage.setItem("listview", state.listView.toString()) localStorage.setItem("listview", state.listView.toString())
}, },
} }
}) })
export const { export const {
setLanguage, setLanguage,
setCliArgs, setCliArgs,
setTheme, setTheme,
setServerAddr, setServerAddr,
setServerPort, setServerPort,
setFormatSelection, setFormatSelection,
setRateLimit, setRateLimit,
setFileRenaming, setFileRenaming,
setPathOverriding, setPathOverriding,
setEnableCustomArgs, setEnableCustomArgs,
toggleListView toggleListView
} = settingsSlice.actions } = settingsSlice.actions
export default settingsSlice.reducer export default settingsSlice.reducer

106
frontend/src/lib/argsParser.ts
View File

@@ -1,61 +1,61 @@
export class CliArguments { export class CliArguments {
private _extractAudio: boolean private _extractAudio: boolean
private _noMTime: boolean private _noMTime: boolean
private _proxy: string private _proxy: string
constructor(extractAudio = false, noMTime = true) { constructor(extractAudio = false, noMTime = true) {
this._extractAudio = extractAudio this._extractAudio = extractAudio
this._noMTime = noMTime this._noMTime = noMTime
this._proxy = "" this._proxy = ""
}
public get extractAudio(): boolean {
return this._extractAudio
}
public toggleExtractAudio() {
this._extractAudio = !this._extractAudio
return this
}
public disableExtractAudio() {
this._extractAudio = false
return this
}
public get noMTime(): boolean {
return this._noMTime
}
public toggleNoMTime() {
this._noMTime = !this._noMTime
return this
}
public toString(): string {
let args = ''
if (this._extractAudio) {
args += '-x '
} }
public get extractAudio(): boolean { if (this._noMTime) {
return this._extractAudio args += '--no-mtime '
} }
public toggleExtractAudio() { return args.trim()
this._extractAudio = !this._extractAudio }
return this
} public fromString(str: string): CliArguments {
if (str) {
public disableExtractAudio() { if (str.includes('-x')) {
this._extractAudio = false this._extractAudio = true
return this }
}
if (str.includes('--no-mtime')) {
public get noMTime(): boolean { this._noMTime = true
return this._noMTime }
}
public toggleNoMTime() {
this._noMTime = !this._noMTime
return this
}
public toString(): string {
let args = ''
if (this._extractAudio) {
args += '-x '
}
if (this._noMTime) {
args += '--no-mtime '
}
return args.trim()
}
public fromString(str: string): CliArguments {
if (str) {
if (str.includes('-x')) {
this._extractAudio = true
}
if (str.includes('--no-mtime')) {
this._noMTime = true
}
}
return this
} }
return this
}
} }

2
frontend/src/utils.ts
View File

@@ -95,7 +95,7 @@ export function formatGiB(bytes: number) {
export const roundMiB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)} MiB` export const roundMiB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)} MiB`
export const formatSpeedMiB = (val: number) => `${roundMiB(val)}/s` export const formatSpeedMiB = (val: number) => `${roundMiB(val)}/s`
export const dateTimeComparatorFunc = (a: string, b: string) => new Date(a).getTime() - new Date(b).getTime() export const datetimeCompareFunc = (a: string, b: string) => new Date(a).getTime() - new Date(b).getTime()
export function isRPCResponse(object: any): object is RPCResponse<any> { export function isRPCResponse(object: any): object is RPCResponse<any> {
return 'result' in object && 'id' in object return 'result' in object && 'id' in object

4
frontend/src/views/Home.tsx
View File

@@ -24,7 +24,7 @@ import { I18nContext } from '../providers/i18nProvider'
import { RPCClientContext } from '../providers/rpcClientProvider' import { RPCClientContext } from '../providers/rpcClientProvider'
import { RootState } from '../stores/store' import { RootState } from '../stores/store'
import type { RPCResponse, RPCResult } from '../types' import type { RPCResponse, RPCResult } from '../types'
import { dateTimeComparatorFunc, isRPCResponse } from '../utils' import { datetimeCompareFunc, isRPCResponse } from '../utils'
export default function Home() { export default function Home() {
// redux state // redux state
@@ -87,7 +87,7 @@ export default function Home() {
setActiveDownloads((event.result ?? []) setActiveDownloads((event.result ?? [])
.filter(f => !!f.info.url) .filter(f => !!f.info.url)
.sort((a, b) => dateTimeComparatorFunc( .sort((a, b) => datetimeCompareFunc(
b.info.created_at, b.info.created_at,
a.info.created_at, a.info.created_at,
))) )))

6
server/rest/handlers.go
View File

@@ -160,8 +160,10 @@ func Login(ctx *fiber.Ctx) error {
return ctx.SendStatus(fiber.StatusBadRequest) return ctx.SendStatus(fiber.StatusBadRequest)
} }
expiresAt := time.Now().Add(time.Hour * 24 * 30)
token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{ token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
"expiresAt": time.Now().Add(time.Minute * 30), "expiresAt": expiresAt,
}) })
tokenString, err := token.SignedString([]byte(os.Getenv("JWT_SECRET"))) tokenString, err := token.SignedString([]byte(os.Getenv("JWT_SECRET")))
@@ -173,7 +175,7 @@ func Login(ctx *fiber.Ctx) error {
Name: TOKEN_COOKIE_NAME, Name: TOKEN_COOKIE_NAME,
HTTPOnly: true, HTTPOnly: true,
Secure: false, Secure: false,
Expires: time.Now().Add(time.Hour * 24 * 30), // 30 days Expires: expiresAt, // 30 days
Value: tokenString, Value: tokenString,
Path: "/", Path: "/",
}) })