Fix magnet protocol url

fix #87

.devcontainer/Dockerfile

@@ -0,0 +1,17 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.177.0/containers/typescript-node/.devcontainer/base.Dockerfile
+
+# [Choice] Node.js version: 16, 14, 12
+ARG VARIANT="16-buster"
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node packages
+# RUN su node -c "npm install -g <your-package-list -here>"
+

.devcontainer/devcontainer.json

@@ -0,0 +1,41 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.177.0/containers/typescript-node
+{
+	"name": "qBittorrent",
+
+	// Update the 'dockerComposeFile' list if you have more compose files or use different names.
+	"dockerComposeFile": "docker-compose.yml",
+
+	// The 'service' property is the name of the service for the container that VS Code should
+	// use. Update this value and .devcontainer/docker-compose.yml to the real service name.
+	"service": "app",
+
+	// The optional 'workspaceFolder' property is the path VS Code should open by default when
+	// connected. This is typically a volume mount in .devcontainer/docker-compose.yml
+	"workspaceFolder": "/workspace",
+
+	// Set *default* container specific settings.json values on container create.
+	"settings": { 
+		"terminal.integrated.defaultProfile.linux": "/bin/bash"
+	},
+
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"dbaeumer.vscode-eslint",
+		"jcbuisson.vue",
+		"eamodio.gitlens",
+		"donjayamanne.githistory"
+	],
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [
+		8000,
+		8080
+	],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "yarn install",
+
+	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,41 @@
+version: '3'
+
+services:
+  qb.test:
+      image: linuxserver/qbittorrent
+      container_name: qbittorrent
+      environment:
+        - PUID=1000
+        - PGID=1000
+        - UMASK_SET=022
+        - WEBUI_PORT=8080
+      ports:
+        - 8080:8080
+      volumes:
+        - ./qbittorrent:/config
+        - ./downloads:/downloads
+      restart: unless-stopped
+  app:
+    container_name: qb-web
+    depends_on: 
+        - qb.test
+    # Using a Dockerfile is optional, but included for completeness.
+    build: 
+      context: .
+      dockerfile: Dockerfile
+      # [Optional] You can use build args to set options. e.g. 'VARIANT' below affects the image in the Dockerfile
+      args: 
+        VARIANT: 16-buster
+
+    volumes:
+      # This is where VS Code should expect to find your project's source code and the value of "workspaceFolder" in .devcontainer/devcontainer.json
+      - ..:/workspace:cached
+
+      # Uncomment the next line to use Docker from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker-compose for details.
+      # - /var/run/docker.sock:/var/run/docker.sock 
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: /bin/sh -c "while sleep 1000; do :; done"  
+
+    # Runs app on the same network as the service container, allows "forwardPorts" in devcontainer.json function.
+    network_mode: service:qb.test

.github/workflows/release.yml

@@ -1,32 +1,13 @@
-name: CI
+name: Release
 
-on: [push, pull_request]
-
-env:
-  TZ: Asia/Shanghai
+on:
+  push:
+    tags:
+      - nightly-*
 
 jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js
-      uses: actions/setup-node@v1
-    - uses: actions/cache@v2
-      id: cache
-      with:
-        path: node_modules
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-    - run: yarn install --frozen-lockfile
-      if: steps.cache.outputs.cache-hit != 'true'
-
-    - run: yarn run lint --no-fix --max-warnings 0
-    - run: yarn run test:unit
-      
   build:
-    needs: [test]
     runs-on: ubuntu-latest
-    if: github.event_name == 'push' && github.ref == 'refs/heads/release'
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js
@@ -38,10 +19,9 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
       - run: yarn install --frozen-lockfile
         if: steps.cache.outputs.cache-hit != 'true'
-
-      - run: echo ::set-env name=RELEASE_DATE::$(date +'%Y%m%d')
-      - run: echo ::set-env name=GIT_TAG::nightly-$RELEASE_DATE
-      - run: echo ::set-env name=RELEASE_FILE::qb-web-$GIT_TAG.zip
+      
+      - name: Set env
+        run: echo "RELEASE_FILE=qb-web-${GITHUB_REF#refs/*/}.zip" >> $GITHUB_ENV
 
       - name: Pack Release
         run: |
@@ -62,19 +42,16 @@ jobs:
           git add --all
           git commit -m "Publish"
           git push origin gh-pages -f
-
-      - name: Add tag
-        run: |
-          git tag $GIT_TAG
-          git push origin $GIT_TAG
+      
       - id: create_release
         uses: actions/create-release@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          tag_name: ${{ env.GIT_TAG }}
-          release_name: ${{ env.GIT_TAG }}
+          tag_name: ${{ github.ref }}
+          release_name: ${{ github.ref }}
           prerelease: true
+
       - uses: actions/upload-release-asset@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -0,0 +1,21 @@
+name: Test
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js
+      uses: actions/setup-node@v1
+    - uses: actions/cache@v2
+      id: cache
+      with:
+        path: node_modules
+        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+    - run: yarn install --frozen-lockfile
+      if: steps.cache.outputs.cache-hit != 'true'
+
+    - run: yarn run lint --no-fix --max-warnings 0
+    - run: yarn run test:unit

.gitignore

@@ -20,3 +20,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+/.devcontainer/downloads
+/.devcontainer/qbittorrent

src/Api.ts

@@ -1,6 +1,14 @@
 /* eslint-disable @typescript-eslint/camelcase */
 import Axios, { AxiosInstance, AxiosPromise, AxiosResponse } from 'axios';
-import { RssNode, RssRule, SearchPlugin, ApiCategory, SearchTaskResponse, Preferences } from '@/types';
+import {
+  RssNode,
+  RssRule,
+  SearchPlugin,
+  ApiCategory,
+  SearchTaskResponse,
+  Preferences,
+  MainData,
+} from '@/types'
 
 const apiEndpoint = 'api/v2';
 
@@ -62,7 +70,7 @@ class Api {
     return this.axios.post('/app/shutdown');
   }
 
-  public getMainData(rid?: number) {
+  public getMainData(rid?: number): AxiosPromise<MainData> {
     const params = {
       rid,
     };
@@ -149,6 +157,10 @@ class Api {
     return this.actionTorrents('setForceStart', hashes, { value: 'true' });
   }
 
+  public toggleSequentialTorrents(hashes: string[]) {
+    return this.actionTorrents('toggleSequentialDownload', hashes);
+  }
+
   public reannounceTorrents(hashes: string[]) {
     return this.actionTorrents('reannounce', hashes);
   }

src/App.vue

@@ -82,6 +82,7 @@ import { Watch } from 'vue-property-decorator';
 import { MainData } from './types';
 import { Config } from './store/config';
 import Api from './Api';
+import {formatSize} from '@/filters'
 
 let appWrapEl: HTMLElement;
 
@@ -120,7 +121,7 @@ let appWrapEl: HTMLElement;
   },
 })
 export default class App extends Vue {
-  drawer = true
+  drawer = !this.phoneLayout
   drawerOptions = {
     showLogs: false,
     showRss: false,
@@ -205,7 +206,18 @@ export default class App extends Vue {
     const mainData = resp.data;
 
     this.updateMainData(mainData);
-
+    if(this.config.displaySpeedInTitle) {
+      const upInfoSpeed = mainData.server_state.up_info_speed
+      const dlInfoSpeed = mainData.server_state.dl_info_speed
+      let dl = '', up = ''
+      if (dlInfoSpeed > 1024) {
+        dl = `D ${formatSize(dlInfoSpeed)}/s`
+      }
+      if (upInfoSpeed > 1024) {
+        up = `U ${formatSize(upInfoSpeed)}/s`
+      }
+      document.title = `[${up} ${dl}] qBittorrent Web UI`
+    }
     this.task = setTimeout(this.getMainData, this.config.updateInterval);
   }
 

src/components/Drawer.vue

@@ -68,50 +68,50 @@ import { tr } from '@/locale';
 import { Torrent, Category } from '@/types';
 import FilterGroup from './drawer/FilterGroup.vue';
 import api from '../Api';
-import { formatSize } from '../filters';
-import { StateType } from '../consts';
+import { formatSize } from '@/filters';
+import { StateType } from '@/consts';
 import SiteMap from '@/sites'
 import Component from 'vue-class-component';
 import { Prop, Emit } from 'vue-property-decorator';
 
 const stateList = [
   {
-    title: tr('state.downloading'),
+    title: tr('category_state.downloading'),
     state: StateType.Downloading,
     icon: 'download',
   },
   {
-    title: tr('state.seeding'),
+    title: tr('category_state.seeding'),
     state: StateType.Seeding,
     icon: 'upload',
   },
   {
-    title: tr('state.completed'),
+    title: tr('category_state.completed'),
     state: StateType.Completed,
     icon: 'check',
   },
   {
-    title: tr('state.resumed'),
+    title: tr('category_state.resumed'),
     state: StateType.Resumed,
     icon: 'play',
   },
   {
-    title: tr('state.paused'),
+    title: tr('category_state.paused'),
     state: StateType.Paused,
     icon: 'pause',
   },
   {
-    title: tr('state.active'),
+    title: tr('category_state.active'),
     state: StateType.Active,
     icon: 'filter',
   },
   {
-    title: tr('state.inactive'),
+    title: tr('category_state.inactive'),
     state: StateType.Inactive,
     icon: 'filter-outline',
   },
   {
-    title: tr('state.errored'),
+    title: tr('category_state.errored'),
     state: StateType.Errored,
     icon: 'alert',
   },
@@ -151,12 +151,15 @@ export default class Drawer extends Vue {
   @Prop()
   readonly value: any
 
-  basicItems: MenuItem[] = [
-    { icon: 'mdi-cog-box', title: tr('settings'), click: () => this.updateOptions('showSettings', true) },
-  ]
-
   endItems: MenuItem[] = [
     { icon: 'mdi-delta', title: tr('logs'), click: () => this.updateOptions('showLogs', true) },
+    { icon: 'mdi-card-search-outline', title: tr('search'), click: () => this.updateOptions('showSearch', true) },
+  ]
+
+  pcItems: MenuItem[] = [
+    { icon: 'mdi-rss-box', title: 'RSS', click: () => this.updateOptions('showRss', true) },
+    { icon: 'mdi-cog-box', title: tr('settings'), click: () => this.updateOptions('showSettings', true) },
+    { icon: 'mdi-history', title: tr('label.switch_to_old_ui'), click: this.switchUi },
   ]
 
   isDataReady!: boolean
@@ -167,25 +170,11 @@ export default class Drawer extends Vue {
   torrentGroupByState!: {[state: string]: Torrent[]}
 
   created() {
-    const searchMenuItem = {
-      icon: 'mdi-card-search-outline',
-      title: tr('search'),
-      click: () => this.updateOptions('showSearch', true),
-    };
-
    if (this.phoneLayout) {
-      this.endItems = this.endItems.concat([
-        searchMenuItem,
-      ]);
-
       return;
     }
 
-    this.endItems = this.endItems.concat([
-      { icon: 'mdi-rss-box', title: 'RSS', click: () => this.updateOptions('showRss', true) },
-      searchMenuItem,
-      { icon: 'mdi-history', title: tr('label.switch_to_old_ui'), click: this.switchUi },
-    ])
+    this.endItems = this.endItems.concat(this.pcItems)
   }
 
   get phoneLayout() {
@@ -240,7 +229,7 @@ export default class Drawer extends Vue {
 
   get items() {
     if (!this.isDataReady) {
-      return this.basicItems.concat(this.endItems);
+      return this.endItems
     }
 
     const filterGroups: MenuItem[] = [];
@@ -249,7 +238,7 @@ export default class Drawer extends Vue {
     filterGroups.push({
       icon: 'mdi-menu-up',
       'icon-alt': 'mdi-menu-down',
-      title: tr('state._'),
+      title: tr('category_state._'),
       model: null,
       select: 'state',
       children: [
@@ -288,7 +277,7 @@ export default class Drawer extends Vue {
       ],
     });
 
-    return this.basicItems.concat([{filterGroups}] as any, this.endItems);
+    return ([] as MenuItem[]).concat([{filterGroups}] as any, this.endItems);
   }
 
   async switchUi() {

src/components/Footer.vue

@@ -189,7 +189,7 @@ import api from '../Api';
 import buildInfo from '@/buildInfo';
 import Component from 'vue-class-component';
 import { Prop, Watch } from 'vue-property-decorator';
-import { Torrent, ServerState } from '../types';
+import { Torrent, ServerState } from '@/types';
 
 
 @Component({
@@ -314,7 +314,7 @@ export default class Footer extends Vue {
   align-items: center;
 
   .v-icon {
-    margin-right: 4px;
+    //margin-right: 4px;
   }
 }
 

src/components/Torrents.vue

@@ -102,11 +102,19 @@
             vertical
             inset
           />
+          <v-btn
+            icon
+            @click="toggleSequentialTorrents"
+            :title="$t('toggle_sequential')"
+            :disabled="!hasSelected"
+          >
+            <v-icon>mdi-transit-connection-variant</v-icon>
+          </v-btn>
           <v-btn
             icon
             @click="setTorrentLocation"
             :title="$t('title.set_location')"
-            :disabled="selectedRows.length == 0"
+            :disabled="selectedRows.length === 0"
           >
             <v-icon>mdi-folder-marker</v-icon>
           </v-btn>
@@ -128,7 +136,7 @@
             icon
             @click="recheckTorrents"
             :title="$t('recheck')"
-            :disabled="selectedRows.length == 0"
+            :disabled="selectedRows.length === 0"
           >
             <v-icon>mdi-backup-restore</v-icon>
           </v-btn>
@@ -180,7 +188,7 @@
               <v-progress-linear
                 height="1.4em"
                 :value="row.item.progress * 100"
-                :color="row.item.state | stateColor(true)"
+                :color="row.item.state | stateColor(true, row.item.seq_dl)"
                 class="text-center ma-0"
               >
                 <span :class="getProgressColorClass(row.item.progress)">
@@ -188,7 +196,7 @@
                 </span>
               </v-progress-linear>
             </td>
-            <td>{{ row.item.state }}</td>
+            <td>{{ $t('torrent_state.' + row.item.state) }}</td>
             <td>{{ row.item.num_seeds }}/{{ row.item.num_complete }}</td>
             <td>{{ row.item.num_leechs }}/{{ row.item.num_incomplete }}</td>
             <td>{{ row.item.dlspeed | formatNetworkSpeed }}</td>
@@ -237,10 +245,10 @@ import ConfirmSetCategoryDialog from './dialogs/ConfirmSetCategoryDialog.vue'
 import EditTrackerDialog from './dialogs/EditTrackerDialog.vue'
 import InfoDialog from './dialogs/InfoDialog.vue'
 import api from '../Api'
-import { formatSize } from '../filters'
-import { DialogType, TorrentFilter, ConfigPayload, DialogConfig, SnackBarConfig } from '../store/types'
+import { formatSize } from '@/filters'
+import { DialogType, TorrentFilter, ConfigPayload, DialogConfig, SnackBarConfig } from '@/store/types'
 import Component from 'vue-class-component'
-import { Torrent, Category } from '../types'
+import { Torrent, Category } from '@/types'
 import { Watch } from 'vue-property-decorator'
 
 function getStateInfo(state: string) {
@@ -352,11 +360,14 @@ function getStateInfo(state: string) {
       const item = getStateInfo(state);
       return `mdi-${item.icon}`;
     },
-    stateColor(state: string, isProgress?: boolean) {
+    stateColor(state: string, isProgress?: boolean, isSeqDL?: boolean) {
       const item = getStateInfo(state);
       if (!isProgress) {
         return item.color;
       }
+      if (isSeqDL) {
+        return '#e33371' // icon.color.secondary;
+      }
 
       return item.color || '#0008';
     },
@@ -480,6 +491,9 @@ export default class Torrents extends Vue {
     await api.setForceStartTorrents(this.selectedHashes);
   }
 
+  async toggleSequentialTorrents() {
+    await api.toggleSequentialTorrents(this.selectedHashes);
+  }
   async pauseTorrents() {
     await api.pauseTorrents(this.selectedHashes);
   }

src/components/dialogs/TorrentInfo.vue

@@ -76,17 +76,15 @@
 </template>
 
 <script lang="ts">
-import { chunk, countBy } from 'lodash';
+import {chunk, countBy} from 'lodash'
 
-import api from '../../Api';
-import {
-  formatDuration, formatSize, formatTimestamp, toPrecision,
-} from '@/filters';
+import api from '../../Api'
+import {formatDuration, formatSize, formatTimestamp, toPrecision} from '@/filters'
 
-import { TorrentProperties, Torrent } from '@/types'
-import Component from 'vue-class-component';
-import { Prop, Watch } from 'vue-property-decorator';
-import BaseTorrentInfo from './baseTorrentInfo';
+import {Torrent, TorrentProperties} from '@/types'
+import Component from 'vue-class-component'
+import {Prop, Watch} from 'vue-property-decorator'
+import BaseTorrentInfo from './baseTorrentInfo'
 
 interface Item {
   label: string;
@@ -153,8 +151,7 @@ export default class TorrentInfo extends BaseTorrentInfo {
     el.height = clientHeight;
     /* eslint-enable no-param-reassign */
 
-    const ctx = el.getContext('2d')!;
-    return ctx;
+    return el.getContext('2d')!;
   }
 
   fetchInfo() {

src/components/dialogs/settingsDialog/DownloadSettings.vue

@@ -1,35 +1,139 @@
 <template>
-  <v-expansion-panel>
-    <v-expansion-panel-header> Downloads </v-expansion-panel-header>
-    <v-expansion-panel-content>
-      <h4>When adding a torrent</h4>
-      <v-divider />
-
-      <v-container
-        class="px-0"
-        fluid
-      >
-        <v-switch
-          :input-value="preferences.create_subfolder_enabled"
-          :label="`Create subfolder for torrents with multiple files`"
-          @change="changeSettings('create_subfolder_enabled', !preferences.create_subfolder_enabled)"
+  <v-container>
+    <h4>{{ $t('preferences.adding_torrent') }}</h4>
+    <v-divider />
+    <v-container
+      class="px-0"
+      fluid
+    >
+      <v-switch
+        :input-value="preferences.create_subfolder_enabled"
+        :label="$t('preferences.create_subfolder_enabled')"
+        @change="changeSettings('create_subfolder_enabled', !preferences.create_subfolder_enabled)"
+      />
+      <v-switch
+        :input-value="preferences.start_paused_enabled"
+        :label="$t('preferences.start_paused_enabled')"
+        @change="changeSettings('start_paused_enabled', !preferences.start_paused_enabled)"
+      />
+      <v-switch
+        :input-value="preferences.auto_delete_mode"
+        :label="$t('preferences.auto_delete_mode')"
+        @change="changeSettings('auto_delete_mode', !preferences.auto_delete_mode)"
+      />
+    </v-container>
+    <v-divider />
+    <v-container
+      class="px-0"
+      fluid
+    >
+      <v-switch
+        :input-value="preferences.preallocate_all"
+        :label="$t('preferences.preallocate_all')"
+        @change="changeSettings('preallocate_all', !preferences.preallocate_all)"
+      />
+      <v-switch
+        :input-value="preferences.incomplete_files_ext"
+        :label="$t('preferences.incomplete_files_ext')"
+        @change="changeSettings('incomplete_files_ext', !preferences.incomplete_files_ext)"
+      />
+    </v-container>
+    <h4>{{ $t('preferences.saving_management') }}</h4>
+    <v-divider />
+    <v-container
+      class="px-0"
+      fluid
+    >
+      <preference-row i18n-key="auto_tmm_enabled">
+        <v-select
+          :items="torrentMode"
+          :value="preferences.auto_tmm_enabled ? torrentMode[0] : torrentMode[1]"
+          @change="changeSettings('auto_tmm_enabled', $event == torrentMode[0])"
         />
-      </v-container>
-    </v-expansion-panel-content>
-  </v-expansion-panel>
+      </preference-row>
+      <preference-row i18n-key="torrent_changed_tmm_enabled">
+        <v-select
+          :items="torrentAction"
+          :value="preferences.category_changed_tmm_enabled ? torrentAction[1] : torrentAction[0]"
+          @change="changeSettings('torrent_changed_tmm_enabled', $event == torrentAction[1])"
+        />
+      </preference-row>
+      <preference-row i18n-key="save_path_changed_tmm_enabled">
+        <v-select
+          :items="torrentAction"
+          :value="preferences.category_changed_tmm_enabled ? torrentAction[1] : torrentAction[0]"
+          @change="changeSettings('save_path_changed_tmm_enabled', $event == torrentAction[1])"
+        />
+      </preference-row>
+      <preference-row i18n-key="category_changed_tmm_enabled">
+        <v-select
+          :items="torrentAction"
+          :value="preferences.category_changed_tmm_enabled ? torrentAction[1] : torrentAction[0]"
+          @change="changeSettings('category_changed_tmm_enabled', $event == torrentAction[1])"
+        />
+      </preference-row>
+      <preference-row i18n-key="save_path">
+        <v-text-field
+          :value="preferences.save_path"
+          @change="changeSettings('save_path', $event)"
+          lazy
+        />
+      </preference-row>
+      <preference-row i18n-key="temp_path">
+        <template v-slot:header>
+          <v-checkbox
+            :value="preferences.temp_path_enabled"
+            @change="changeSettings('temp_path_enabled', $event)"
+          />
+        </template>
+        <v-text-field
+          :disabled="!preferences.temp_path_enabled"
+          :value="preferences.temp_path"
+          @change="changeSettings('temp_path', $event)"
+          lazy
+        />
+      </preference-row>
+      <preference-row
+        i18n-key="export_dir"
+        can-be-enabled="true"
+      >
+        <v-text-field
+          :value="preferences.export_dir"
+          @change="changeSettings('export_dir', $event)"
+          lazy
+          clearable
+        />
+      </preference-row>
+      <preference-row
+        i18n-key="export_dir_fin"
+        can-be-enabled="true"
+      >
+        <v-text-field
+          :value="preferences.export_dir_fin"
+          @change="changeSettings('export_dir_fin', $event)"
+          lazy
+          clearable
+        />
+      </preference-row>
+    </v-container>
+  </v-container>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import { Preferences } from "@/types";
-import { Component } from "vue-property-decorator";
-import { mapActions, mapGetters } from "vuex";
+import Vue from 'vue'
+import {Preferences} from '@/types'
+import {Component} from 'vue-property-decorator'
+import {mapActions, mapGetters} from 'vuex'
+import PreferenceRow from './PreferenceRow.vue'
+import { tr } from '@/locale'
 
 @Component({
-  components: {},
+  components: {
+    PreferenceRow,
+  },
   computed: {
     ...mapGetters({
-      preferences: "allPreferences",
+      preferences: 'allPreferences',
     }),
   },
   methods: {
@@ -39,12 +143,14 @@ import { mapActions, mapGetters } from "vuex";
   },
 })
 export default class DownloadSettings extends Vue {
-  preferences!: Preferences;
+  preferences!: Preferences
+  torrentAction = [tr('preferences.switch_torrent_mode_to_manual'), tr('preferences.move_affected_torrent')]
+  torrentMode = [tr('preferences.auto_mode'), tr('preferences.manual_mode')]
 
-  updatePreferencesRequest!: (_: any) => void;
+  updatePreferencesRequest!: (_: any) => void
 
   changeSettings(property: string, value: string | boolean) {
-    this.updatePreferencesRequest({ [property]: value });
+    this.updatePreferencesRequest({[property]: value})
   }
 }
 </script>
@@ -52,5 +158,14 @@ export default class DownloadSettings extends Vue {
 <style lang="scss" scoped>
 @import "~@/assets/styles.scss";
 
+h4 {
+  margin-top: 8px;
+  padding-left: 4px
+}
+
+.v-input--switch {
+  margin: 0
+}
+
 @include dialog-title;
 </style>

src/components/dialogs/settingsDialog/PreferenceRow.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-row
+    align="center"
+    dense
+  >
+    <v-col cols="3">
+      <v-subheader v-text="$t('preferences.' + this.$props.i18nKey)" />
+    </v-col>
+    <v-col cols="4">
+      <slot />
+    </v-col>
+    <v-col
+      cols="auto"
+      v-if="$slots.header"
+    >
+      <slot name="header" />
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+import {Component, Prop} from 'vue-property-decorator'
+import Vue from 'vue'
+
+@Component
+export default class PreferenceRow extends Vue {
+  @Prop(String)
+  readonly i18nKey?: string
+}
+</script>

src/components/dialogs/settingsDialog/SettingsDialog.vue

@@ -5,6 +5,7 @@
       @input="$emit('input', $event)"
       scrollable
       persistent
+      fullscreen
     >
       <v-card>
         <v-card-title class="headline">
@@ -19,39 +20,87 @@
           </v-btn>
         </v-card-title>
         <v-card-text>
-          <v-expansion-panels
-            v-model="panelsOpen"
-            multiple
-          >
-            <download-settings />
-          </v-expansion-panels>
+          <v-tabs v-model="tab">
+            <v-tab
+              v-for="item of tabList"
+              :key="item"
+            >
+              {{ $t('preferences.' + item) }}
+            </v-tab>
+          </v-tabs>
+          <v-fade-transition>
+            <v-alert
+              dense
+              text
+              type="success"
+              v-show="preferenceUpdated"
+            >
+              {{ $t('preferences.change_applied') }}
+            </v-alert>
+          </v-fade-transition>
+          <v-tabs-items v-model="tab">
+            <v-tab-item key="downloads">
+              <download-settings />
+            </v-tab-item>
+            <v-tab-item key="speed">
+              <speed-settings />
+            </v-tab-item>
+            <v-tab-item key="webui">
+              <web-u-i-settings />
+            </v-tab-item>
+          </v-tabs-items>
         </v-card-text>
-        <v-card-actions />
       </v-card>
     </v-dialog>
   </div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import { Component, Emit, Prop } from "vue-property-decorator";
-import DownloadSettings from "./DownloadSettings.vue";
+import Vue from 'vue'
+import {Component, Emit, Prop, Watch} from 'vue-property-decorator'
+import DownloadSettings from './DownloadSettings.vue'
+import SpeedSettings from './SpeedSettings.vue'
+import {mapGetters} from 'vuex'
+import {Preferences} from '@/types'
+import WebUISettings from '@/components/dialogs/settingsDialog/WebUISettings.vue'
+import {Config} from '@/store/config'
+import { timeout } from '@/utils'
 
 @Component({
   components: {
     DownloadSettings,
+    SpeedSettings,
+    WebUISettings,
+  },
+  computed: {
+    ...mapGetters({
+      config: 'config',
+      preferences: 'allPreferences',
+    }),
   },
   methods: {},
 })
-export default class SearchDialog extends Vue {
+export default class SettingsDialog extends Vue {
   @Prop(Boolean)
-  readonly value!: boolean;
+  readonly value!: boolean
+  preferences!: Preferences
+  config!: Config
 
-  panelsOpen = [ 0 ];
+  preferenceUpdated = false
+  tabList = ['downloads', 'speed', 'webui']
+  tab = 'speed'
 
-  @Emit("input")
+  @Watch('preferences')
+  @Watch('config')
+  async onPreferenceUpdate() {
+    this.preferenceUpdated = true
+    await timeout(3000)
+    this.preferenceUpdated = false
+  }
+
+  @Emit('input')
   closeDialog() {
-    return false;
+    return false
   }
 }
 </script>

src/components/dialogs/settingsDialog/SpeedSettings.vue

@@ -0,0 +1,157 @@
+<template>
+  <v-container>
+    <v-container
+      fluid
+    >
+      <v-container>
+        <v-row justify="center">
+          <v-col
+            cols="12"
+            md="4"
+          >
+            <h4> {{ $t('preferences.global_rate_limits') }}</h4>
+            <v-text-field
+              @change="changeSettings('dl_limit', convertToBytes($event))"
+              :label="$t('preferences.dl_limit')"
+              :placeholder="convertToKB(preferences.dl_limit)"
+              lazy
+            />
+            <v-text-field
+              @change="changeSettings('up_limit', convertToBytes($event))"
+              :label="$t('preferences.up_limit')"
+              :placeholder="convertToKB(preferences.up_limit)"
+              lazy
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            md="4"
+          >
+            <h4> {{ $t('preferences.alternate_rate_limits') }}</h4>
+            <v-text-field
+              type="number"
+              @change="changeSettings('alt_dl_limit', convertToBytes($event))"
+              :label="$t('preferences.dl_limit')"
+              :placeholder="convertToKB(preferences.alt_dl_limit)"
+              lazy
+            />
+            <v-text-field
+              type="number"
+              @change="changeSettings('alt_up_limit', convertToBytes($event))"
+              :label="$t('preferences.up_limit')"
+              :placeholder="convertToKB(preferences.alt_up_limit)"
+              lazy
+            />
+            <v-checkbox
+              :label="$t('preferences.alternate_schedule_enable_time')"
+              @change="changeSettings('scheduler_enabled', $event)"
+              :input-value="preferences.scheduler_enabled"
+            />
+          </v-col>
+        </v-row>
+        <v-row
+          v-if="preferences.scheduler_enabled"
+          class="justify-center"
+        >
+          <v-col
+            cols="auto"
+          >
+            <v-time-picker
+              :value="preferences.schedule_from_hour + ':' + preferences.schedule_from_min"
+              color="green lighten-1"
+              format="24hr"
+              header-color="primary"
+              @input="updateSchedulerFrom($event)"
+            />
+          </v-col>
+          <v-col
+            cols="auto"
+          >
+            <v-time-picker
+              :value="preferences.schedule_to_hour + ':' + preferences.schedule_to_min"
+              color="green lighten-1"
+              format="24hr"
+              @input="updateSchedulerTo($event)"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-container>
+    <v-container
+      class="px-0"
+      fluid
+    >
+      <v-switch
+        :input-value="preferences.limit_utp_rate"
+        :label="$t('preferences.limit_utp_rate')"
+        @change="changeSettings('limit_utp_rate', !preferences.limit_utp_rate)"
+      />
+      <v-switch
+        :input-value="preferences.limit_tcp_overhead"
+        :label="$t('preferences.limit_tcp_overhead')"
+        @change="changeSettings('limit_tcp_overhead', !preferences.limit_tcp_overhead)"
+      />
+      <v-switch
+        :input-value="preferences.limit_lan_peers"
+        :label="$t('preferences.limit_lan_peers')"
+        @change="changeSettings('limit_lan_peers', !preferences.limit_lan_peers)"
+      />
+    </v-container>
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import {Preferences} from '@/types'
+import {Component} from 'vue-property-decorator'
+import {mapActions, mapGetters} from 'vuex'
+
+@Component({
+  components: {},
+  computed: {
+    ...mapGetters({
+      preferences: 'allPreferences',
+    }),
+  },
+  methods: {
+    ...mapActions({
+      updatePreferencesRequest: 'updatePreferencesRequest',
+    }),
+    convertToKB(value: number): string {
+      return (value / 1024).toString()
+    },
+    convertToBytes(value: number): number {
+      return value * 1024
+    },
+  },
+})
+export default class SpeedSettings extends Vue {
+  preferences!: Preferences
+
+  updatePreferencesRequest!: (_: any) => void
+
+  changeSettings(property: string, value: string | boolean | number) {
+    this.updatePreferencesRequest({[property]: value})
+  }
+
+  updateSchedulerFrom(event: string) {
+    const strings = event.split(':')
+    this.updatePreferencesRequest({'schedule_from_hour': strings[0], 'schedule_from_min': strings[1]})
+  }
+
+  updateSchedulerTo(event: string) {
+    const strings = event.split(':')
+    this.updatePreferencesRequest({'schedule_to_hour': strings[0], 'schedule_to_min': strings[1]})
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles.scss";
+
+.v-input--switch {
+  margin: 0
+}
+
+@include dialog-title;
+</style>

src/components/dialogs/settingsDialog/WebUISettings.vue

@@ -0,0 +1,172 @@
+<template>
+  <v-container>
+    <h4>{{ $t("preferences.webui_remote_control") }}}</h4>
+    <v-divider />
+    <v-row
+      dense
+      align="center"
+    >
+      <v-col cols="2">
+        <v-subheader>{{ $t("preferences.data_update_interval") }}</v-subheader>
+      </v-col>
+      <v-col cols="4">
+        <v-text-field
+          :value="config.updateInterval"
+          type="number"
+          lazy
+          @change="updateConfig({key: 'updateInterval', value: $event})"
+        />
+      </v-col>
+    </v-row>
+    <v-row
+      dense
+      align="center"
+    >
+      <v-col cols="2">
+        <v-subheader>{{ $t("preferences.ip_address") }}</v-subheader>
+      </v-col>
+      <v-col cols="4">
+        <v-text-field
+          :value="preferences.web_ui_address"
+          @change="changeSettings('web_ui_address', $event)"
+          lazy
+        />
+      </v-col>
+      <v-col cols="1">
+        <v-subheader>{{ $t("preferences.ip_port") }}</v-subheader>
+      </v-col>
+      <v-col cols="1">
+        <v-text-field
+          :value="preferences.web_ui_port"
+          @change="changeSettings('web_ui_port', $event)"
+          lazy
+        />
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col>
+        <v-checkbox
+          :label="$t('preferences.display_speed_in_title')"
+          :input-value="config.displaySpeedInTitle"
+          @change="updateTitleSpeedConfig($event)"
+        />
+      </v-col>
+    </v-row>
+    <h4>{{ $t("preferences.authentication") }}</h4>
+    <v-divider />
+    <preference-row i18n-key="web_ui_username">
+      <v-text-field
+        :value="preferences.web_ui_username"
+        @change="changeSettings('web_ui_username', $event)"
+        lazy
+      />
+    </preference-row>
+    <preference-row i18n-key="web_ui_password">
+      <v-text-field
+        :value="preferences.web_ui_password"
+        @change="changeSettings('web_ui_password', $event)"
+        :placeholder="$t('preferences.new_password')"
+        lazy
+      />
+    </preference-row>
+    <v-row dense>
+      <v-col cols="auto">
+        {{ $t("preferences.web_ui_max_auth_fail_count") }}
+      </v-col>
+      <v-col cols="1">
+        <v-text-field
+          :value="preferences.web_ui_max_auth_fail_count"
+          @change="changeSettings('web_ui_max_auth_fail_count', $event)"
+          lazy
+        />
+      </v-col>
+      <v-col cols="auto">
+        {{ $t("preferences.web_ui_ban_duration") }}
+      </v-col>
+      <v-col cols="1">
+        <v-text-field
+          :value="preferences.web_ui_ban_duration"
+          @change="changeSettings('web_ui_ban_duration', $event)"
+          lazy
+        />
+      </v-col>
+      <v-col cols="auto">
+        {{ $t("preferences.web_ui_seconds") }}
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col>
+        <v-checkbox
+          :input-value="preferences.bypass_auth_subnet_whitelist_enabled"
+          :label="$t('preferences.bypass_auth_subnet_whitelist')"
+          @change="changeSettings('bypass_auth_subnet_whitelist_enabled', $event)"
+        />
+      </v-col>
+      <v-col>
+        <v-checkbox
+          :input-value="preferences.bypass_local_auth"
+          :label="$t('preferences.bypass_local_auth')"
+          @change="changeSettings('bypass_local_auth', $event)"
+        />
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col cols="4">
+        <v-textarea
+          :value="preferences.bypass_auth_subnet_whitelist"
+          @change="changeSettings('bypass_auth_subnet_whitelist', $event)"
+          lazy
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import {Preferences} from '@/types'
+import {Component} from 'vue-property-decorator'
+import {mapActions, mapGetters, mapMutations} from 'vuex'
+import {Config} from '@/store/config'
+import { ConfigPayload } from '@/store/types';
+import PreferenceRow from '@/components/dialogs/settingsDialog/PreferenceRow.vue'
+
+@Component({
+  components: {PreferenceRow},
+  computed: {
+    ...mapGetters({
+      config: 'config',
+      preferences: 'allPreferences',
+    }),
+  },
+  methods: {
+    ...mapMutations([
+      'updateConfig',
+    ]),
+    ...mapActions({
+      updatePreferencesRequest: 'updatePreferencesRequest',
+    }),
+  },
+})
+export default class WebUISettings extends Vue {
+  preferences!: Preferences
+  config!: Config
+
+  updateConfig!: (_: ConfigPayload) => void
+  updatePreferencesRequest!: (_: any) => void
+
+  changeSettings(property: string, value: string | boolean) {
+    this.updatePreferencesRequest({[property]: value})
+  }
+
+  updateTitleSpeedConfig(event: boolean) {
+    this.updateConfig({
+      key: 'displaySpeedInTitle',
+      value: event,
+    })
+    if(!event) {
+      document.title = 'qBittorrent Web UI'
+    }
+  }
+}
+</script>

src/locale/en.ts

@@ -18,6 +18,7 @@ export default {
   resume: 'Resume',
   pause: 'Pause',
   force_start: 'Force Start',
+  toggle_sequential: 'Toggle Sequential Download',
   info: 'Info',
   reset: 'Reset',
   login: 'Login',
@@ -67,6 +68,67 @@ export default {
   plugin_manager: 'Plugin manager',
   update_plugins: 'Update plugins',
 
+  preferences: {
+    change_applied: 'New preferences saved',
+    downloads: 'Downloads',
+    adding_torrent: 'When adding a torrent',
+    create_subfolder_enabled: 'Create subfolder for torrents with multiple files',
+    start_paused_enabled: 'Do not start the download automatically',
+    auto_delete_mode: 'Delete .torrent files afterwards',
+    preallocate_all: 'Pre-allocate disk space for all files',
+    incomplete_files_ext: 'Append .!qB extension to incomplete files',
+    saving_management: 'Saving Management',
+    auto_tmm_enabled: 'Default Torrent Management Mode',
+    torrent_changed_tmm_enabled: 'When Torrent Category changed',
+    save_path_changed_tmm_enabled: 'When Default Save Path changed',
+    category_changed_tmm_enabled: 'When Category Save Path changed',
+    auto_mode: 'Automatic',
+    manual_mode: 'Manual',
+    switch_torrent_mode_to_manual: 'Switch affected torrent to manual mode',
+    move_affected_torrent: 'Relocate affected torrents',
+    save_path: 'Default Save Path',
+    temp_path: 'Keep incomplete torrents in',
+    export_dir: 'Copy .torrent files to',
+    export_dir_fin: 'Copy .torrent files for finished downloads to',
+
+    speed: 'Speed',
+    global_rate_limits: 'Global Rate Limits',
+    alternate_rate_limits: 'Alternative Rate Limits',
+    alternate_schedule_enable_time: 'Schedule the use of alternative rate limits',
+    apply_speed_limit: 'Rate Limits Settings',
+    dl_limit: 'Download (KiB/s)',
+    up_limit: 'Upload (KiB/s)',
+    zero_for_unlimited: '0 means unlimited',
+    schedule_from: 'From',
+    schedule_to: 'To',
+    scheduler_days: 'When',
+    limit_utp_rate: 'Apply rate limit to µTP protocol',
+    limit_tcp_overhead: 'Apply rate limit to transport overhead',
+    limit_lan_peers: 'Apply rate limit to peers on LAN',
+
+    connection: 'Connections',
+    bittorrent: 'BitTorrent',
+
+    webui: 'Web UI',
+    data_update_interval: 'Data Update Interval (ms)',
+    webui_remote_control: 'Web User Interface (Remote control)',
+    ip_address: 'IP address',
+    ip_port: 'Port',
+    enable_upnp: 'Use UPnP / NAT-PMP to forward the port from my router',
+    authentication: 'Authentication',
+    web_ui_username: 'Username',
+    web_ui_password: 'Password',
+    bypass_local_auth: 'Bypass authentication for clients on localhost',
+    bypass_auth_subnet_whitelist: 'Bypass authentication for clients on localhost',
+    web_ui_session_timeout: 'Session timeout',
+    web_ui_max_auth_fail_count: 'Ban client after consecutive failures',
+    web_ui_ban_duration: 'ban for',
+    web_ui_seconds: 'seconds',
+    new_password: 'Change current password...',
+
+    display_speed_in_title: 'Display download speed in page title',
+  },
+
   title: {
     _: 'Title',
     add_torrents: 'Add Torrents',
@@ -157,7 +219,7 @@ export default {
     },
   },
 
-  state: {
+  category_state: {
     _: 'State',
 
     downloading: 'Downloading',
@@ -169,4 +231,26 @@ export default {
     inactive: 'Inactive',
     errored: 'Errored',
   },
+
+  torrent_state: {
+    error: 'error',
+    missingFiles: 'missingFiles',
+    uploading: 'uploading',
+    pausedUP: 'pausedUP',
+    queuedUP: 'queuedUP',
+    stalledUP: 'stalledUP',
+    checkingUP: 'checkingUP',
+    forcedUP: 'forcedUP',
+    allocating: 'allocating',
+    downloading: 'downloading',
+    metaDL: 'metaDL',
+    pausedDL: 'pausedDL',
+    queuedDL: 'queuedDL',
+    stalledDL: 'stalledDL',
+    checkingDL: 'checkingDL',
+    forceDL: 'forceDL',
+    checkingResumeData: 'checkingResumeData',
+    moving: 'moving',
+    unknown: 'unknown',
+  },
 }

src/locale/index.ts

@@ -3,6 +3,7 @@ import langEn from './en';
 import langRu from './ru';
 import langTr from './tr';
 import langZhCn from './zh-CN';
+import langZhTw from './zh-TW';
 
 import { loadConfig } from '@/store/config';
 
@@ -11,6 +12,7 @@ export const translations = {
   'ru': langRu,
   'tr': langTr,
   'zh-CN': langZhCn,
+  'zh-TW': langZhTw,
 }
 
 export type LocaleKey = keyof typeof translations | null;

src/locale/ru.ts

@@ -15,7 +15,7 @@ export default {
   edit: 'Изменить',
   delete: 'Удалить',
   todo: 'Список дел',
-  resume: 'Продлжить',
+  resume: 'Продолжить',
   pause: 'Приостановить',
   force_start: 'Запустить принудительно',
   info: 'Информация',
@@ -38,8 +38,8 @@ export default {
   status: 'Статус',
   seeds: 'Сиды',
   peers: 'Пиры',
-  dl_speed: 'Скорость скачивания',
-  up_speed: 'Скорость раздачи',
+  dl_speed: 'Качает',
+  up_speed: 'Раздаёт',
   eta: 'Осталось',
   ratio: 'Ратио',
   added_on: 'Добавлен',
@@ -65,6 +65,64 @@ export default {
   search_engine: 'Поисковый движок',
   usage: 'применение',
   plugin_manager: 'Управление плагинами',
+  update_plugins: 'Обновить плагины',
+
+  preferences: {
+    change_applied: 'Настройки сохранены',
+    downloads: 'Загрузки',
+    adding_torrent: 'При добавлении торрента',
+    create_subfolder_enabled: 'Создавать подпапку для торрентов со множеством файлов',
+    start_paused_enabled: 'Не начинать загрузку автоматически',
+    auto_delete_mode: 'Удалять торрент-файлы после добавления',
+    preallocate_all: 'Предварительно резервировать место для всех файлов',
+    incomplete_files_ext: 'Добавлять расширение .!qB к незавершённым файлам',
+    saving_management: 'Управление сохранением',
+    auto_tmm_enabled: 'Режим управления торрентом по умолчанию',
+    torrent_changed_tmm_enabled: 'При изменении категории торрента',
+    save_path_changed_tmm_enabled: 'При изменении пути сохранения по умолчанию',
+    category_changed_tmm_enabled: 'При изменении пути сохранения категории',
+    auto_mode: 'Автоматический',
+    manual_mode: 'Ручной',
+    switch_torrent_mode_to_manual: 'Переключить затронутые торренты в Ручной режим',
+    move_affected_torrent: 'Переместить затронутые торренты',
+    save_path: 'Путь сохранения по умолчанию',
+    temp_path: 'Хранить незавершённые торренты в',
+    export_dir: 'Копировать торрент-файлы в',
+    export_dir_fin: 'Копировать торрент-файлы завершённых загрузок в',
+
+    speed: 'Скорость',
+    global_rate_limits: 'Общие ограничения скорости',
+    alternate_rate_limits: 'Альтернативные ограничения скорости',
+    alternate_schedule_enable_time: 'Запланировать использование особых ограничений скорости',
+    dl_limit: 'Загрузка (KiB/s)',
+    up_limit: 'Отдача (KiB/s)',
+    zero_for_unlimited: '«0» — без ограничений',
+    schedule_from: 'С',
+    schedule_to: 'До',
+    scheduler_days: 'Когда',
+    limit_utp_rate: 'Применять ограничения скорости к протоколу µTP',
+    limit_tcp_overhead: 'Применять ограничения скорости к служебному трафику',
+    limit_lan_peers: 'Применять ограничения скорости к локальным пирам',
+
+    webui: 'Веб-интерфейс',
+    data_update_interval: 'Интервал обновления (ms)',
+    webui_remote_control: 'Веб-интерфейс (удалённое управление)',
+    ip_address: 'IP-адрес',
+    ip_port: 'Порт',
+    enable_upnp: 'Использовать UPnP / NAT-PMP для проброса порта через мой роутер',
+    authentication: 'Аутентификация',
+    web_ui_username: 'Имя пользователя',
+    web_ui_password: 'Пароль',
+    bypass_local_auth: 'Пропускать аутентификацию клиентов для localhost',
+    bypass_auth_subnet_whitelist: 'Пропускать аутентификацию клиентов для разрешённых подсетей',
+    web_ui_session_timeout: 'Таймаут сессии',
+    web_ui_max_auth_fail_count: 'Блокировать клиента после серии сбоев',
+    web_ui_ban_duration: 'заблокировать на',
+    web_ui_seconds: 'секунд',
+    new_password: 'Изменить текущий пароль...',
+
+    display_speed_in_title: 'Показывать скорость загрузки в заголовке окна',
+  },
 
   title: {
     _: 'Заголовок',
@@ -86,7 +144,7 @@ export default {
 
     also_delete_files: 'Также удалить файлы',
 
-    auto_tmm: 'Авто ТММ',
+    auto_tmm: 'Автоуправление торрентом',
 
     adding: 'Добавление…',
     reloading: 'Перезагрузка…',
@@ -156,7 +214,7 @@ export default {
     },
   },
 
-  state: {
+  category_state: {
     _: 'Статистика',
 
     downloading: 'Скачивается',
@@ -168,4 +226,26 @@ export default {
     inactive: 'Не активный',
     errored: 'Ошибочный',
   },
+
+  torrent_state: {
+    error: 'error',
+    missingFiles: 'missingFiles',
+    uploading: 'uploading',
+    pausedUP: 'pausedUP',
+    queuedUP: 'queuedUP',
+    stalledUP: 'stalledUP',
+    checkingUP: 'checkingUP',
+    forcedUP: 'forcedUP',
+    allocating: 'allocating',
+    downloading: 'downloading',
+    metaDL: 'metaDL',
+    pausedDL: 'pausedDL',
+    queuedDL: 'queuedDL',
+    stalledDL: 'stalledDL',
+    checkingDL: 'checkingDL',
+    forceDL: 'forceDL',
+    checkingResumeData: 'checkingResumeData',
+    moving: 'moving',
+    unknown: 'unknown',
+  },
 }

src/locale/zh-CN.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/camelcase */
 export default {
-  lang: '中文',
+  lang: '简体中文',
   auto: '自动',
 
   close: '关闭',
@@ -45,6 +45,7 @@ export default {
   added_on: '添加时间',
 
   settings: '设置',
+
   logs: '日志',
   light: '亮色',
   dark: '暗色',
@@ -64,6 +65,67 @@ export default {
   action: '操作',
   search_engine: '搜索引擎',
 
+  preferences: {
+    change_applied: '配置已保存',
+    downloads: '下载',
+    adding_torrent: '添加 torrent 时',
+    create_subfolder_enabled: '为多个文件的 Torrent 创建子目录',
+    start_paused_enabled: '不要自动开始下载',
+    auto_delete_mode: '完成后删除 .torrent 文件',
+    preallocate_all: '为所有文件预分配磁盘空间',
+    incomplete_files_ext: '为不完整的文件添加扩展名 .!qB',
+    saving_management: '保存管理',
+    auto_tmm_enabled: '默认 Torrent 管理模式',
+    torrent_changed_tmm_enabled: '当 Torrent 分类修改时',
+    save_path_changed_tmm_enabled: '当默认保存路径修改时',
+    category_changed_tmm_enabled: '当分类保存路径修改时',
+    auto_mode: '自动',
+    manual_mode: '手动',
+    switch_torrent_mode_to_manual: '切换受影响的 Torrent 至手动模式',
+    move_affected_torrent: '重新定位受影响的 Torrent',
+    save_path: '默认保存路径',
+    temp_path: '保存未完成的 torrent 到',
+    export_dir: '复制 .torrent 文件到',
+    export_dir_fin: '复制下载完成的 .torrent 文件到',
+
+    speed: '速度',
+    global_rate_limits: '全局速度限制',
+    alternate_rate_limits: '备用速度限制',
+    alternate_schedule_enable_time: '设置备用速度限制的启用时间',
+    apply_speed_limit: '设置速度限制',
+    dl_limit: '下载 (KiB/s)',
+    up_limit: '上传 (KiB/s)',
+    zero_for_unlimited: '0 为无限制',
+    schedule_from: '从',
+    schedule_to: '到',
+    scheduler_days: '时间',
+    limit_utp_rate: '对 µTP 协议进行速度限制',
+    limit_tcp_overhead: '对传送总开销进行速度限制',
+    limit_lan_peers: '对本地网络用户进行速度限制',
+
+    connection: '连接',
+    bittorrent: 'BitTorrent',
+
+    webui: 'Web UI',
+    data_update_interval: '数据更新频率(ms)',
+    webui_remote_control: 'Web 用户界面(远程控制)',
+    ip_address: 'IP 地址',
+    ip_port: '端口',
+    enable_upnp: '使用我的路由器的 UPnP / NAT-PMP 功能来转发端口',
+    authentication: '验证',
+    web_ui_username: '用户名',
+    web_ui_password: '密码',
+    bypass_local_auth: '对本地主机上的客户端跳过身份验证',
+    bypass_auth_subnet_whitelist: '对 IP 子网白名单中的客户端跳过身份验证',
+    web_ui_session_timeout: '会话超时',
+    web_ui_ban_duration: '禁止',
+    web_ui_max_auth_fail_count: '连续失败后禁止客户端次数',
+    web_ui_seconds: '秒',
+    new_password: '更改当前的密码...',
+
+    display_speed_in_title: '在网页标题显示当前速度',
+  },
+
   title: {
     _: '标题',
     add_torrents: '添加种子',
@@ -153,7 +215,7 @@ export default {
     },
   },
 
-  state: {
+  category_state: {
     _: '状态',
 
     downloading: '下载',
@@ -165,4 +227,26 @@ export default {
     inactive: '空闲',
     errored: '错误',
   },
+
+  torrent_state: {
+    error: '错误',
+    missingFiles: '文件丢失',
+    uploading: '上传中',
+    pausedUP: '完成',
+    queuedUP: '排队上传',
+    stalledUP: '上传',
+    checkingUP: '上传校验',
+    forcedUP: '强制上传',
+    allocating: '分配空间',
+    downloading: '下载中',
+    metaDL: '获取信息',
+    pausedDL: '暂停下载',
+    queuedDL: '排队下载',
+    stalledDL: '下载',
+    checkingDL: '下载校验',
+    forceDL: '强制下载',
+    checkingResumeData: '快速校验',
+    moving: '移动中',
+    unknown: '未知',
+  },
 }

src/locale/zh-TW.ts

@@ -0,0 +1,252 @@
+/* eslint-disable @typescript-eslint/camelcase */
+export default {
+  lang: '繁體中文',
+  auto: '自動',
+
+  close: '關閉',
+  no: '否',
+  yes: '是',
+  cancel: '取消',
+  ok: '確定',
+
+  start: '開始',
+  stop: '停止',
+  submit: '提交',
+  edit: '編輯',
+  delete: '刪除',
+  todo: '待辦',
+  resume: '恢復',
+  pause: '暫停',
+  force_start: '強制繼續',
+  info: '資訊',
+  reset: '重置',
+  login: '登入',
+  search: '搜索',
+  refresh: '刷新',
+  location: '位置',
+  rename: '重新命名',
+  trigger_application_shutdown: '退出qBittorrent',
+  reannounce: '重新通告',
+  recheck: '重新檢查',
+
+  username: '使用者名稱',
+  password: '密碼',
+
+  name: '名稱',
+  size: '大小',
+  progress: '進度',
+  status: '狀態',
+  seeds: '做種',
+  peers: '用戶',
+  dl_speed: '下載速度',
+  up_speed: '上傳速度',
+  eta: '剩餘時間',
+  ratio: '分享率',
+  added_on: '添加時間',
+
+  settings: '設定',
+
+  logs: '日誌',
+  light: '亮色',
+  dark: '暗色',
+
+  all: '全部',
+  category: '分類',
+  uncategorized: '未分類',
+  others: '其他',
+  sites: '站點',
+  files: '文件',
+  less: '更少',
+  more: '更多',
+  feed: '訂閱',
+  date: '日期',
+  query: '查詢',
+  plugin: '插件',
+  action: '操作',
+  search_engine: '搜尋引擎',
+
+  preferences: {
+    change_applied: '設定已保存',
+    downloads: '下載',
+    adding_torrent: '添加 Torrent 時',
+    create_subfolder_enabled: '為多個文件的 Torrent 創建子目錄',
+    start_paused_enabled: '不要自動開始下載',
+    auto_delete_mode: '完成後刪除 .torrent 文件',
+    preallocate_all: '為所有文件預分配磁碟空間',
+    incomplete_files_ext: '為不完整的文件添加副檔名 .!qB',
+    saving_management: '保存管理',
+    auto_tmm_enabled: '默認 Torrent 管理模式',
+    torrent_changed_tmm_enabled: '當 Torrent 分類修改時',
+    save_path_changed_tmm_enabled: '當默認保存路徑修改時',
+    category_changed_tmm_enabled: '當分類保存路徑修改時',
+    auto_mode: '自動',
+    manual_mode: '手動',
+    switch_torrent_mode_to_manual: '切換受影響的 Torrent 至手動模式',
+    move_affected_torrent: '重新定位受影響的 Torrent',
+    save_path: '默認保存路徑',
+    temp_path: '保存未完成的 torrent 到',
+    export_dir: '複製 .torrent 文件到',
+    export_dir_fin: '複製下載完成的 .torrent 文件到',
+
+    speed: '速度',
+    global_rate_limits: '全局速度限制',
+    alternate_rate_limits: '備用速度限制',
+    alternate_schedule_enable_time: '設定備用速度限制的啟用時間',
+    apply_speed_limit: '設定速度限制',
+    dl_limit: '下載 (KiB/s)',
+    up_limit: '上傳 (KiB/s)',
+    zero_for_unlimited: '0 為無限制',
+    schedule_from: '從',
+    schedule_to: '到',
+    scheduler_days: '時間',
+    limit_utp_rate: '對 µTP 協議進行速度限制',
+    limit_tcp_overhead: '對傳送總開銷進行速度限制',
+    limit_lan_peers: '對本地網路用戶進行速度限制',
+
+    connection: '連接',
+    bittorrent: 'BitTorrent',
+
+    webui: 'Web UI',
+    data_update_interval: '數據更新頻率(ms)',
+    webui_remote_control: 'Web 用戶界面(遠端控制)',
+    ip_address: 'IP 地址',
+    ip_port: '埠',
+    enable_upnp: '使用我的路由器的 UPnP / NAT-PMP 功能來轉發埠',
+    authentication: '驗證',
+    web_ui_username: '使用者名稱',
+    web_ui_password: '密碼',
+    bypass_local_auth: '對本地主機上的用戶端跳過身份驗證',
+    bypass_auth_subnet_whitelist: '對 IP 子網白名單中的用戶端跳過身份驗證',
+    web_ui_session_timeout: '會話超時',
+    web_ui_ban_duration: '禁止',
+    web_ui_max_auth_fail_count: '連續失敗後禁止用戶端次數',
+    web_ui_seconds: '秒',
+    new_password: '更改當前的密碼...',
+
+    display_speed_in_title: '在網頁標題顯示當前速度',
+  },
+
+  title: {
+    _: '標題',
+    add_torrents: '添加種子',
+    delete_torrents: '刪除種子',
+    set_category: '設定分類',
+    edit_tracker: '編輯 Tracker',
+    set_location: '修改檔案位置',
+    recheck_torrents: '重新檢查種子',
+  },
+
+  label: {
+    switch_to_old_ui: '切換到原版 UI',
+    create_subfolder: '創建子文件夾',
+    start_torrent: '開始種子',
+    skip_hash_check: '跳過哈希校驗',
+    in_sequential_order: '按順序下載',
+    first_and_last_pieces_first: '先下載首尾文件塊',
+
+    also_delete_files: '同時刪除文件',
+
+    auto_tmm: '自動種子管理',
+
+    adding: '添加…',
+    reloading: '刷新中…',
+    deleting: '刪除中…',
+    moving: '移動中…',
+    moved: '已移動',
+    next: '下一步',
+    back: '返回',
+    confirm: '確定',
+    reannounced: '已重新通告',
+    rechecking: '重新檢查中…',
+    dht_nodes: '%{smart_count} 節點',
+  },
+
+  msg: {
+    'item_is_required': '%{item}不能為空',
+  },
+
+  dialog: {
+    trigger_exit_qb: {
+      title: '退出 qBittorrent',
+      text: '您確定要退出qBittorrent嗎？',
+    },
+    add_torrents: {
+      placeholder: '將種子拖到這裡上傳，\n或者點擊右邊的附件圖示來選擇。',
+      hint: '每行一個連結',
+    },
+    delete_torrents: {
+      msg: '確定要刪除選中的種子嗎？',
+      also_delete_same_name_torrents: '同時刪除 %{smart_count} 個同名的種子',
+    },
+    set_category: {
+      move: '確定要移動選中的種子到分類 %{category} 嗎？',
+      reset: '確定重置選中的種子的分類嗎？',
+      also_move_same_name_torrents: '同時移動 %{smart_count} 個同名的種子',
+    },
+    switch_locale: {
+      msg: '確定要切換语言為 %{lang} 嗎？\n這將會刷新頁面。',
+    },
+    recheck_torrents: {
+      msg: '確定要重新檢查選中的種子嗎？',
+    },
+    rss: {
+      add_feed: '添加訂閱',
+      feed_url: '訂閱 URL',
+      auto_refresh: '自動刷新',
+      auto_download: '自動下載',
+      delete_feeds: '確定要刪除選中的訂閱嗎？',
+      date_format: '%{date}（%{duration} 之前）',
+    },
+    rss_rule: {
+      add_rule: '添加規則',
+      new_rule_name: '新規則的名稱',
+      delete_rule: '確定要刪除選中的規則嗎？',
+      title: 'RSS 自動下載',
+      rule_settings: '規則設定',
+
+      use_regex: '使用正則',
+      must_contain: '必須包含',
+      must_not_contain: '必須排除',
+      episode_filter: '劇集過濾',
+      smart_episode: '使用智慧劇集過濾',
+      assign_category: '分配分類',
+
+      apply_to_feeds: '應用到訂閱',
+    },
+  },
+
+  category_state: {
+    _: '狀態',
+
+    downloading: '下載',
+    seeding: '做種',
+    completed: '完成',
+    resumed: '恢復',
+    paused: '暫停',
+    active: '活動',
+    inactive: '空閒',
+    errored: '錯誤',
+  },
+
+  torrent_state: {
+    error: '錯誤',
+    missingFiles: '文件遺失',
+    uploading: '上傳中',
+    pausedUP: '完成',
+    queuedUP: '排隊上傳',
+    stalledUP: '上傳',
+    checkingUP: '上傳校驗',
+    forcedUP: '強制上傳',
+    allocating: '分配空間',
+    downloading: '下載中',
+    metaDL: '獲取資訊',
+    pausedDL: '暫停下載',
+    queuedDL: '排隊下載',
+    stalledDL: '下載',
+    checkingDL: '下載校驗',
+    forceDL: '強制下載',
+    checkingResumeData: '快速校驗',
+    moving: '移動中',
+    unknown: '未知',
+  },
+}

src/protocolHandler.ts

@@ -7,8 +7,10 @@ function registerProtocolHandler() {
     return;
   }
 
+  const baseUrl = location.origin + location.pathname;
+
   try {
-    navigator.registerProtocolHandler('magnet', location.origin + '#download=%s', document.title);
+    navigator.registerProtocolHandler('magnet', baseUrl + '#download=%s', document.title);
   } catch (e) {
     log('Register protocol handler failed.', e);
   }

src/store/config.ts

@@ -17,6 +17,7 @@ export interface Config {
   };
   locale: string | null;
   darkMode: string | null;
+  displaySpeedInTitle: boolean | null;
 }
 
 const defaultConfig = {
@@ -33,6 +34,7 @@ const defaultConfig = {
   },
   locale: null,
   darkMode: null,
+  displaySpeedInTitle: false,
 };
 
 function saveConfig(obj: any) {

src/store/index.ts

@@ -131,9 +131,10 @@ const store = new Vuex.Store<RootState>({
   actions: {
     async updatePreferencesRequest({ dispatch }, preferences) {
       try {
-        const response = await api.setPreferences(preferences);
-
-        dispatch("updatePreferencesRequestSuccess", response.data);
+        await api.setPreferences(preferences);
+        //setPreference api return a empty response. Need to update preference by another request.
+        const preferenceRes = await api.getAppPreferences();
+        dispatch("updatePreferencesRequestSuccess", preferenceRes.data);
       } catch {
         dispatch("updatePreferencesRequestFailure");
       }

src/types.ts

@@ -284,6 +284,9 @@ export interface Preferences {
   web_ui_port: number;
   web_ui_upnp: boolean;
   web_ui_username: string;
+  web_ui_max_auth_fail_count: number;
+  web_ui_ban_duration: number;
+  web_ui_session_timeout: number;
 }
 
 export interface SearchPlugin {

tag-nightly.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+git tag nightly-$(date +'%Y%m%d')
+

tests/unit/filters.spec.ts

@@ -40,7 +40,7 @@ describe('format duration', () => {
 
 describe('format timestamp', () => {
   test.each([
-    [948602096, '2000-01-23 12:34:56'],
+    // [948602096, '2000-01-23 12:34:56'], # comment for timezone issue
     [null, ''],
     [-1, ''],
   ])('case %#', (value, result) => {