From 0f66834eb06ff1b638f435bdee445eecfcc7b0a1 Mon Sep 17 00:00:00 2001
From: Jose Celano <josecelano@gmail.com>
Date: Fri, 23 Jun 2023 14:10:22 +0100
Subject: [PATCH] fix: [#97] redirect to torrent details after upload

The behavior was broken becuase the navigation (frontend router) used
the torrent id instead of the info-hash. But the API was not returning
the info-hash after uploading a new torrent file.

The API was changed to return the info-hash too. And the API dependency
was updated.
---
 .../authentication/AuthenticationForm.vue     | 18 ++---
 components/torrent/TorrentActionCard.vue      | 70 +++++++++----------
 components/torrent/TorrentDescriptionTab.vue  | 14 ++--
 components/torrent/TorrentFilesTab.vue        | 12 ++--
 components/torrent/TorrentList.vue            | 42 +++++------
 .../torrent/TorrentListTorrentDetails.vue     | 10 +--
 components/torrent/TorrentTable.vue           | 20 +++---
 components/torrent/TorrentTrackersTab.vue     | 12 ++--
 composables/helpers.ts                        |  4 +-
 composables/states.ts                         |  4 +-
 package-lock.json                             | 33 +++++----
 package.json                                  |  4 +-
 pages/admin/settings/authentication.vue       |  6 +-
 pages/torrent/[infoHash].vue                  | 28 ++++----
 pages/torrent/edit/[infoHash].vue             | 12 ++--
 pages/torrents.vue                            | 10 +--
 pages/upload.vue                              | 13 ++--
 17 files changed, 155 insertions(+), 157 deletions(-)

diff --git a/components/authentication/AuthenticationForm.vue b/components/authentication/AuthenticationForm.vue
index 060f4f2b..f41f83c9 100644
--- a/components/authentication/AuthenticationForm.vue
+++ b/components/authentication/AuthenticationForm.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="px-2 lg:px-0" @click.self="close">
-    <div class="px-6 py-6 text-neutral-content/50 rounded-2xl mx-auto w-auto max-w-md">
-      <h2 class="text-2xl mb-4 font-semibold text-center text-neutral-content">
+    <div class="w-auto max-w-md px-6 py-6 mx-auto text-neutral-content/50 rounded-2xl">
+      <h2 class="mb-4 text-2xl font-semibold text-center text-neutral-content">
         {{ state === State.Signup ? "Sign up" : "Sign in" }}
       </h2>
       <form
@@ -9,26 +9,26 @@
         @submit.prevent="submit"
       >
         <FormInputText v-model="form.username" label="Username" required />
-        <template v-if="state === State.Signup && settings.email_on_signup !== Requirement.None">
-          <FormInputText v-model="form.email" label="Email" :required="settings.email_on_signup === Requirement.Required" />
+        <template v-if="state === State.Signup && settings.email_on_signup !== EmailOnSignup.None">
+          <FormInputText v-model="form.email" label="Email" :required="settings.email_on_signup === EmailOnSignup.Required" />
         </template>
         <FormInputText v-model="form.password" :type="'password'" label="Password" required />
         <template v-if="state === State.Signup">
           <FormInputText v-model="form.confirm_password" label="Repeat password" required />
         </template>
-        <button type="submit" class="btn btn-primary w-full">
+        <button type="submit" class="w-full btn btn-primary">
           Sign {{ state === State.Signup ? 'up' : 'in' }}
         </button>
       </form>
       <div class="relative mt-6">
-        <div class="flex relative justify-center text-sm">
+        <div class="relative flex justify-center text-sm">
           <template v-if="state === State.Signup">
-            <button class="px-2 font-semibold text-neutral-content/50 hover:text-neutral-content duration-200" @click="toggleState">
+            <button class="px-2 font-semibold duration-200 text-neutral-content/50 hover:text-neutral-content" @click="toggleState">
               Already have an account? Sign in
             </button>
           </template>
           <template v-else>
-            <button class="px-2 font-semibold text-neutral-content/50 hover:text-neutral-content duration-200" @click="toggleState">
+            <button class="px-2 font-semibold duration-200 text-neutral-content/50 hover:text-neutral-content" @click="toggleState">
               Don't have an account? Sign up
             </button>
           </template>
@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
 import { Ref } from "vue";
-import { Requirement } from "torrust-index-types-lib";
+import { EmailOnSignup } from "torrust-index-types-lib";
 import { notify } from "notiwind-ts";
 import { loginUser, onMounted, ref, useAuthenticationModal, useRestApi, useRuntimeConfig, useSettings } from "#imports";
 
diff --git a/components/torrent/TorrentActionCard.vue b/components/torrent/TorrentActionCard.vue
index a0af70a8..69765167 100644
--- a/components/torrent/TorrentActionCard.vue
+++ b/components/torrent/TorrentActionCard.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="w-full flex flex-col basis-full">
+  <div class="flex flex-col w-full basis-full">
     <template v-if="torrent">
-      <div class="md:px-6 flex flex-col gap-3">
+      <div class="flex flex-col gap-3 md:px-6">
 
         <span class="text-lg font-bold capitalize truncate">{{ torrent.title }}</span>
 
         <template v-if="torrent.tags?.length">
           <div class="flex flex-wrap space-x-2">
             <template v-for="tag in torrent.tags">
-              <NuxtLink :to="`/torrents?tagFilters=${tag.name}`" class="px-2 py-1 bg-base-content/25 hover:bg-base-content/50 font-semibold capitalize text-xs rounded-lg cursor-pointer">
+              <NuxtLink :to="`/torrents?tagFilters=${tag.name}`" class="px-2 py-1 text-xs font-semibold capitalize rounded-lg cursor-pointer bg-base-content/25 hover:bg-base-content/50">
                 {{ tag.name }}
               </NuxtLink>
             </template>
@@ -17,56 +17,56 @@
 
         <div />
 
-        <div class="p-6 stats bg-base-100 flex flex-col gap-3 rounded-2xl">
+        <div class="flex flex-col gap-3 p-6 stats bg-base-100 rounded-2xl">
           <div class="flex flex-col items-center justify-between w-full">
-            <div class="w-full h-2 bg-transparent rounded-full overflow-hidden">
+            <div class="w-full h-2 overflow-hidden bg-transparent rounded-full">
               <template v-if="seedersPercentage() === 0 && leechersPercentage() === 0">
-                <div class="h-full bg-green-500 float-left" :style="{ width: '50%' }" />
-                <div class="h-full bg-red-500 float-right" :style="{ width: '50%' }" />
+                <div class="float-left h-full bg-green-500" :style="{ width: '50%' }" />
+                <div class="float-right h-full bg-red-500" :style="{ width: '50%' }" />
               </template>
               <template v-else>
-                <div class="h-full bg-green-500 float-left" :style="{ width: seedersPercentage() }" />
-                <div class="h-full bg-red-500 float-right" :style="{ width: leechersPercentage() }" />
+                <div class="float-left h-full bg-green-500" :style="{ width: seedersPercentage() }" />
+                <div class="float-right h-full bg-red-500" :style="{ width: leechersPercentage() }" />
               </template>
             </div>
-            <div class="mt-2 px-6 flex flex-row justify-between w-full">
-              <div class="mr-4 flex flex-col items-center">
-                <span class="stat-value text-2xl text-green-500 font-bold">{{ torrent.seeders }}</span>
-                <span class="stat-title text-sm capitalize">seeders</span>
+            <div class="flex flex-row justify-between w-full px-6 mt-2">
+              <div class="flex flex-col items-center mr-4">
+                <span class="text-2xl font-bold text-green-500 stat-value">{{ torrent.seeders }}</span>
+                <span class="text-sm capitalize stat-title">seeders</span>
               </div>
               <div class="flex flex-col items-center">
-                <span class="stat-value text-2xl text-red-500 font-bold">{{ torrent.leechers }}</span>
-                <span class="stat-title text-sm capitalize">leechers</span>
+                <span class="text-2xl font-bold text-red-500 stat-value">{{ torrent.leechers }}</span>
+                <span class="text-sm capitalize stat-title">leechers</span>
               </div>
             </div>
           </div>
         </div>
 
-        <div class="p-6 stats bg-base-100 flex flex-col rounded-2xl">
-          <div class="flex flex-col text-base-content/60 text-sm">
-            <div class="py-2 pt-0 flex flex-row">
+        <div class="flex flex-col p-6 stats bg-base-100 rounded-2xl">
+          <div class="flex flex-col text-sm text-base-content/60">
+            <div class="flex flex-row py-2 pt-0">
               <div class="flex flex-row w-1/2">
-                <TagIcon class="mr-2 w-4" />
+                <TagIcon class="w-4 mr-2" />
                 <span>Category</span>
               </div>
               <div class="flex flex-row w-1/2">
-                <NuxtLink :to="`/torrents?categoryFilters=${torrent.category.name}`" class="link-primary capitalize">
+                <NuxtLink :to="`/torrents?categoryFilters=${torrent.category.name}`" class="capitalize link-primary">
                   {{ torrent.category.name }}
                 </NuxtLink>
               </div>
             </div>
-            <div class="py-2 flex flex-row">
+            <div class="flex flex-row py-2">
               <div class="flex flex-row w-1/2">
-                <CalendarIcon class="mr-2 w-4" />
+                <CalendarIcon class="w-4 mr-2" />
                 <span>Upload Date</span>
               </div>
               <div class="flex flex-row w-1/2">
                 <span>{{ new Date(torrent.upload_date).toLocaleDateString() }}</span>
               </div>
             </div>
-            <div class="py-2 flex flex-row">
+            <div class="flex flex-row py-2">
               <div class="flex flex-row w-1/2">
-                <CircleStackIcon class="mr-2 w-4" />
+                <CircleStackIcon class="w-4 mr-2" />
                 <span>File Size</span>
               </div>
               <div class="flex flex-row w-1/2">
@@ -74,19 +74,19 @@
               </div>
             </div>
             <div class="flex flex-row">
-              <div class="py-2 flex flex-row w-1/2">
-                <HashtagIcon class="mr-2 w-4" />
+              <div class="flex flex-row w-1/2 py-2">
+                <HashtagIcon class="w-4 mr-2" />
                 <span>Info Hash</span>
               </div>
-              <div class="py-1 flex flex-row w-1/2">
-                <div class="relative border border-base-content/10 flex items-center max-w-full overflow-x-auto rounded-lg">
+              <div class="flex flex-row w-1/2 py-1">
+                <div class="relative flex items-center max-w-full overflow-x-auto border rounded-lg border-base-content/10">
                   <span class="px-2">{{ torrent.info_hash }}</span>
                 </div>
               </div>
             </div>
-            <div class="py-2 pb-0 flex flex-row">
+            <div class="flex flex-row py-2 pb-0">
               <div class="flex flex-row w-1/2">
-                <UserCircleIcon class="mr-2 w-4" />
+                <UserCircleIcon class="w-4 mr-2" />
                 <span>Uploader</span>
               </div>
               <div class="flex flex-row w-1/2">
@@ -103,7 +103,7 @@
             <button class="btn btn-primary grow" @click="downloadTorrent(torrent.info_hash, torrent.title)">
               download torrent
             </button>
-            <button class="p-0 btn btn-primary w-12">
+            <button class="w-12 p-0 btn btn-primary">
               <a class="flex items-center" :href="torrent.magnet_link">
                 <LinkIcon class="w-6" />
               </a>
@@ -111,13 +111,13 @@
           </template>
           <template v-else>
             <button
-              class="mt-3 px-4 h-12 bg-white text-sm text-black font-medium rounded-2xl"
+              class="h-12 px-4 mt-3 text-sm font-medium text-black bg-white rounded-2xl"
               @click="$store.dispatch('openAuthModal')"
             >
               Please sign in to download
             </button>
             <button
-              class="mt-3 px-4 h-12 bg-sky-500 text-sm text-white font-medium rounded-2xl"
+              class="h-12 px-4 mt-3 text-sm font-medium text-white bg-sky-500 rounded-2xl"
               @click="$store.dispatch('openAuthModal')"
             >
               Please sign in to download
@@ -149,7 +149,7 @@
 <script setup lang="ts">
 import { CheckIcon, PencilIcon, XMarkIcon, LinkIcon, CalendarIcon, CircleStackIcon, UserCircleIcon, HashtagIcon, TagIcon } from "@heroicons/vue/24/solid";
 import { Ref, PropType } from "vue";
-import { Torrent } from "torrust-index-types-lib";
+import { TorrentResponse } from "torrust-index-types-lib";
 import { useRuntimeConfig } from "#app";
 import {
   fileSize,
@@ -182,7 +182,7 @@ const emit = defineEmits([
 
 const props = defineProps({
   torrent: {
-    type: Object as PropType<Torrent>,
+    type: Object as PropType<TorrentResponse>,
     required: true
   }
 });
diff --git a/components/torrent/TorrentDescriptionTab.vue b/components/torrent/TorrentDescriptionTab.vue
index d4af5f6d..e2be7aac 100644
--- a/components/torrent/TorrentDescriptionTab.vue
+++ b/components/torrent/TorrentDescriptionTab.vue
@@ -1,23 +1,23 @@
 <template>
   <div id="torrent-description" class="flex flex-col gap-6">
-    <div class="flex flex-row justify-between items-center">
-      <h2 class="mr-1 text-2xl text-left text-neutral-content/50 font-medium">
+    <div class="flex flex-row items-center justify-between">
+      <h2 class="mr-1 text-2xl font-medium text-left text-neutral-content/50">
         Description
       </h2>
       <button
-        class="w-10 h-10 flex flex-col items-center justify-center bg-transparent text-base-content/50 hover:text-base-content rounded-xl duration-200"
+        class="flex flex-col items-center justify-center w-10 h-10 duration-200 bg-transparent text-base-content/50 hover:text-base-content rounded-xl"
         @click="collapsed = !collapsed"
       >
         <ChevronDownIcon class="w-6" :class="{ 'rotate-90': collapsed }" />
       </button>
     </div>
     <template v-if="!collapsed">
-      <div class="p-6 w-full h-full flex flex-col grow bg-base-100 rounded-2xl">
+      <div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
         <template v-if="torrent.description">
           <Markdown :source="torrent.description" />
         </template>
         <template v-else>
-          <span class="text-neutral-content italic">No description provided.</span>
+          <span class="italic text-neutral-content">No description provided.</span>
         </template>
       </div>
     </template>
@@ -26,7 +26,7 @@
 
 <script setup lang="ts">
 import { ChevronDownIcon } from "@heroicons/vue/24/solid";
-import { Torrent } from "torrust-index-types-lib";
+import { TorrentResponse } from "torrust-index-types-lib";
 import { PropType } from "vue";
 import { ref } from "#imports";
 import Markdown from "~/components/Markdown.vue";
@@ -35,7 +35,7 @@ const collapsed = ref(false);
 
 const props = defineProps({
   torrent: {
-    type: Object as PropType<Torrent>,
+    type: Object as PropType<TorrentResponse>,
     required: true
   }
 });
diff --git a/components/torrent/TorrentFilesTab.vue b/components/torrent/TorrentFilesTab.vue
index 4cc28817..5d34af37 100644
--- a/components/torrent/TorrentFilesTab.vue
+++ b/components/torrent/TorrentFilesTab.vue
@@ -1,12 +1,12 @@
 <template>
   <div id="torrent-files" class="flex flex-col gap-6">
-    <div class="flex flex-row justify-between items-center">
-      <h2 class="mr-1 text-2xl text-left text-neutral-content/50 font-medium">
+    <div class="flex flex-row items-center justify-between">
+      <h2 class="mr-1 text-2xl font-medium text-left text-neutral-content/50">
         Files ({{ files().length }})
       </h2>
 
       <button
-        class="w-10 h-10 flex flex-col items-center justify-center bg-transparent text-base-content/50 hover:text-base-content rounded-xl duration-200"
+        class="flex flex-col items-center justify-center w-10 h-10 duration-200 bg-transparent text-base-content/50 hover:text-base-content rounded-xl"
         @click="collapsed = !collapsed"
       >
         <ChevronDownIcon class="w-6" :class="{ 'rotate-90': collapsed }" />
@@ -14,7 +14,7 @@
     </div>
     <template v-if="!collapsed">
       <div class="overflow-x-auto">
-        <table class="table table-zebra w-full">
+        <table class="table w-full table-zebra">
           <!-- head -->
           <thead>
             <tr>
@@ -42,14 +42,14 @@
 import { CircleStackIcon } from "@heroicons/vue/24/outline";
 import { ChevronDownIcon } from "@heroicons/vue/24/solid";
 import { PropType } from "vue";
-import { Torrent } from "torrust-index-types-lib";
+import { TorrentResponse } from "torrust-index-types-lib";
 import { ref, fileSize } from "#imports";
 
 const collapsed = ref(false);
 
 const props = defineProps({
   torrent: {
-    type: Object as PropType<Torrent>,
+    type: Object as PropType<TorrentResponse>,
     required: true
   }
 });
diff --git a/components/torrent/TorrentList.vue b/components/torrent/TorrentList.vue
index 4fd025e9..52db81e9 100644
--- a/components/torrent/TorrentList.vue
+++ b/components/torrent/TorrentList.vue
@@ -1,37 +1,37 @@
 <template>
-  <div class="flex flex-col border-base-content/20 rounded-2xl grow w-full">
+  <div class="flex flex-col w-full border-base-content/20 rounded-2xl grow">
     <div class="flex flex-col gap-3">
       <a
         v-for="(torrent, index) in torrents"
         :key="index"
-        class="flex flex-col rounded-2xl bg-base-100 text-sm cursor-pointer"
+        class="flex flex-col text-sm cursor-pointer rounded-2xl bg-base-100"
         @click="toggleOpen(index)"
       >
-        <div class="group px-4 pt-4 pb-4 flex flex-row flex-nowrap justify-start items-center rounded-2xl w-full">
-          <div class="flex flex-col flex-nowrap justify-start items-center font-semibold overflow-hidden grow">
-            <div class="flex flex-row gap-1 items-center w-full">
-              <span class="whitespace-nowrap text-ellipsis text-neutral-content overflow-hidden">{{ torrent.title }}</span>
+        <div class="flex flex-row items-center justify-start w-full px-4 pt-4 pb-4 group flex-nowrap rounded-2xl">
+          <div class="flex flex-col items-center justify-start overflow-hidden font-semibold flex-nowrap grow">
+            <div class="flex flex-row items-center w-full gap-1">
+              <span class="overflow-hidden whitespace-nowrap text-ellipsis text-neutral-content">{{ torrent.title }}</span>
               <template v-if="isOpenList[index]">
-                <ChevronDownIcon class="group-hover:animate-bounce w-5 text-base-content/50 group-hover:text-base-content" />
+                <ChevronDownIcon class="w-5 group-hover:animate-bounce text-base-content/50 group-hover:text-base-content" />
               </template>
               <template v-else>
-                <ChevronRightIcon class="group-hover:animate-bounce w-5 text-base-content/50 group-hover:text-base-content" />
+                <ChevronRightIcon class="w-5 group-hover:animate-bounce text-base-content/50 group-hover:text-base-content" />
               </template>
             </div>
-            <div class="mt-1 flex flex-row flex-nowrap justify-start items-start w-full">
-              <span class="whitespace-nowrap text-neutral-content/50 text-xs">{{ fileSize(torrent.file_size) }}</span>
-              <span class="ml-2 whitespace-nowrap text-neutral-content/50 text-xs">{{ new Date(torrent.date_uploaded).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }} ({{ timeSince(new Date(torrent.date_uploaded)) }} ago)</span>
-              <a class="ml-2 whitespace-nowrap text-neutral-content/50 text-xs">u/{{ torrent.uploader }}</a>
+            <div class="flex flex-row items-start justify-start w-full mt-1 flex-nowrap">
+              <span class="text-xs whitespace-nowrap text-neutral-content/50">{{ fileSize(torrent.file_size) }}</span>
+              <span class="ml-2 text-xs whitespace-nowrap text-neutral-content/50">{{ new Date(torrent.date_uploaded).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }} ({{ timeSince(new Date(torrent.date_uploaded)) }} ago)</span>
+              <a class="ml-2 text-xs whitespace-nowrap text-neutral-content/50">u/{{ torrent.uploader }}</a>
             </div>
           </div>
-          <div class="flex flex-col flex-nowrap justify-center items-center">
-            <div class="flex flex-row flex-nowrap text-center font-semibold rounded-2xl">
-              <div class="w-10 h-10 flex flex-col shrink-0 justify-center text-green-500 rounded-2xl">{{ torrent.seeders }}</div>
-              <div class="ml-2 w-10 h-10 flex flex-col shrink-0 justify-center text-red-500 rounded-2xl">{{ torrent.leechers }}</div>
-              <div class="ml-2 w-10 h-10 text-base-content/50 hover:text-base-content flex flex-col shrink-0 items-center justify-center rounded-2xl duration-500 cursor-pointer" @click.stop="downloadTorrent(torrent.info_hash, torrent.title)">
+          <div class="flex flex-col items-center justify-center flex-nowrap">
+            <div class="flex flex-row font-semibold text-center flex-nowrap rounded-2xl">
+              <div class="flex flex-col justify-center w-10 h-10 text-green-500 shrink-0 rounded-2xl">{{ torrent.seeders }}</div>
+              <div class="flex flex-col justify-center w-10 h-10 ml-2 text-red-500 shrink-0 rounded-2xl">{{ torrent.leechers }}</div>
+              <div class="flex flex-col items-center justify-center w-10 h-10 ml-2 duration-500 cursor-pointer text-base-content/50 hover:text-base-content shrink-0 rounded-2xl" @click.stop="downloadTorrent(torrent.info_hash, torrent.title)">
                 <ArrowDownTrayIcon class="w-6" />
               </div>
-              <div class="ml-2 w-10 h-10 text-base-content/50 hover:text-base-content flex flex-col shrink-0 items-center justify-center rounded-2xl duration-500 cursor-pointer">
+              <div class="flex flex-col items-center justify-center w-10 h-10 ml-2 duration-500 cursor-pointer text-base-content/50 hover:text-base-content shrink-0 rounded-2xl">
                 <a class="flex items-center" :href="`magnet:?xt=urn:btih:${torrent.info_hash}`" @click.stop>
                   <LinkIcon class="w-6" />
                 </a>
@@ -40,7 +40,7 @@
           </div>
         </div>
         <template v-if="isOpenList[index]">
-          <div class="px-4 pt-2 pb-4 flex flex-row flex-nowrap justify-start items-start w-full duration-1000">
+          <div class="flex flex-row items-start justify-start w-full px-4 pt-2 pb-4 duration-1000 flex-nowrap">
             <TorrentListTorrentDetails :info-hash="torrent.info_hash" />
           </div>
         </template>
@@ -53,11 +53,11 @@
 import { ArrowDownTrayIcon, LinkIcon } from "@heroicons/vue/24/outline";
 import { ChevronRightIcon, ChevronDownIcon } from "@heroicons/vue/20/solid";
 import { PropType } from "vue";
-import { TorrentCompact } from "torrust-index-types-lib";
+import { TorrentListing } from "torrust-index-types-lib";
 import { fileSize, timeSince, ref, downloadTorrent } from "#imports";
 
 const props = defineProps({
-  torrents: Array as PropType<Array<TorrentCompact>>
+  torrents: Array as PropType<Array<TorrentListing>>
 });
 
 const isOpenList = ref([]);
diff --git a/components/torrent/TorrentListTorrentDetails.vue b/components/torrent/TorrentListTorrentDetails.vue
index a876c208..258a860b 100644
--- a/components/torrent/TorrentListTorrentDetails.vue
+++ b/components/torrent/TorrentListTorrentDetails.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="group/details flex flex-col items-center w-full rounded-2xl"
+    class="flex flex-col items-center w-full group/details rounded-2xl"
     @click.stop="$router.push(`/torrent/${props.infoHash}`)"
   >
-    <div class="p-4 max-h-96 flex justify-center border-2 border-base-content/20 hover:border-primary text-base-content/75 rounded-2xl overflow-y-auto w-full duration-500">
+    <div class="flex justify-center w-full p-4 overflow-y-auto duration-500 border-2 max-h-96 border-base-content/20 hover:border-primary text-base-content/75 rounded-2xl">
       <template v-if="torrent?.description">
         <Markdown :source="torrent.description" />
       </template>
@@ -16,14 +16,14 @@
 
 <script setup lang="ts">
 import { Ref } from "vue";
-import { Torrent } from "torrust-index-types-lib";
+import { TorrentResponse } from "torrust-index-types-lib";
 import { useRuntimeConfig } from "#app";
 import { onMounted, ref, useRestApi } from "#imports";
 
 const config = useRuntimeConfig();
 const rest = useRestApi();
 
-const torrent: Ref<Torrent> = ref(null);
+const torrent: Ref<TorrentResponse> = ref(null);
 
 const props = defineProps({
   infoHash: {
@@ -33,7 +33,7 @@ const props = defineProps({
 });
 
 onMounted(() => {
-  rest.value.torrent.getTorrent(props.infoHash)
+  rest.value.torrent.getTorrentInfo(props.infoHash)
     .then((data) => {
       torrent.value = data;
     });
diff --git a/components/torrent/TorrentTable.vue b/components/torrent/TorrentTable.vue
index ef8bc3b7..c935df24 100644
--- a/components/torrent/TorrentTable.vue
+++ b/components/torrent/TorrentTable.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col border-base-content/20 rounded-2xl grow w-full rounded-lg overflow-hidden">
+  <div class="flex flex-col w-full overflow-hidden rounded-lg border-base-content/20 rounded-2xl grow">
     <div class="flex flex-col overflow-x-auto whitespace-nowrap">
-      <table class="table-auto text-center bg-base-200">
+      <table class="text-center table-auto bg-base-200">
         <thead>
           <tr class="text-sm text-base-content/75">
             <th class="py-2">
@@ -16,9 +16,9 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(torrent, index) in torrents" :key="index" class="bg-base-100 text-sm">
-            <td class="pl-6 text-left font-bold">
-              <span class="cursor-pointer hover:text-amber-500 duration-200" @click.stop="$router.push(`/torrent/${torrent.info_hash}`)">{{ torrent.title }}</span>
+          <tr v-for="(torrent, index) in torrents" :key="index" class="text-sm bg-base-100">
+            <td class="pl-6 font-bold text-left">
+              <span class="duration-200 cursor-pointer hover:text-amber-500" @click.stop="$router.push(`/torrent/${torrent.info_hash}`)">{{ torrent.title }}</span>
             </td>
             <td class="px-2">
               {{ fileSize(torrent.file_size) }}
@@ -32,11 +32,11 @@
               {{ torrent.leechers }}
             </td>
             <td>
-              <div class="flex flex-row flex-nowrap items-center justify-center font-semibold">
-                <div class="ml-2 w-10 h-10 text-base-content/50 hover:text-base-content flex flex-col shrink-0 items-center justify-center duration-500 cursor-pointer" @click.stop="downloadTorrent(torrent.info_hash, torrent.title)">
+              <div class="flex flex-row items-center justify-center font-semibold flex-nowrap">
+                <div class="flex flex-col items-center justify-center w-10 h-10 ml-2 duration-500 cursor-pointer text-base-content/50 hover:text-base-content shrink-0" @click.stop="downloadTorrent(torrent.info_hash, torrent.title)">
                   <ArrowDownTrayIcon class="w-5" />
                 </div>
-                <div class="ml-2 w-10 h-10 text-base-content/50 hover:text-base-content flex flex-col shrink-0 items-center justify-center duration-500 cursor-pointer">
+                <div class="flex flex-col items-center justify-center w-10 h-10 ml-2 duration-500 cursor-pointer text-base-content/50 hover:text-base-content shrink-0">
                   <a class="flex items-center" :href="`magnet:?xt=urn:btih:${torrent.info_hash}`">
                     <LinkIcon class="w-5" />
                   </a>
@@ -53,11 +53,11 @@
 <script setup lang="ts">
 import { ArrowDownTrayIcon, LinkIcon } from "@heroicons/vue/24/outline";
 import { PropType } from "vue";
-import { TorrentCompact } from "torrust-index-types-lib";
+import { TorrentListing } from "torrust-index-types-lib";
 import { fileSize, timeSince, ref, downloadTorrent } from "#imports";
 
 const props = defineProps({
-  torrents: Array as PropType<Array<TorrentCompact>>
+  torrents: Array as PropType<Array<TorrentListing>>
 });
 
 const isOpenList = ref([]);
diff --git a/components/torrent/TorrentTrackersTab.vue b/components/torrent/TorrentTrackersTab.vue
index d80b3598..e9519d4c 100644
--- a/components/torrent/TorrentTrackersTab.vue
+++ b/components/torrent/TorrentTrackersTab.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="torrent-description" class="flex flex-col gap-6">
-    <div class="flex flex-row justify-between items-center">
-      <h2 class="mr-1 text-2xl text-left text-neutral-content/50 font-medium">
+    <div class="flex flex-row items-center justify-between">
+      <h2 class="mr-1 text-2xl font-medium text-left text-neutral-content/50">
         Trackers ({{ torrent.trackers.length }})
       </h2>
       <button
-        class="w-10 h-10 flex flex-col items-center justify-center bg-transparent text-base-content/50 hover:text-base-content rounded-xl duration-200"
+        class="flex flex-col items-center justify-center w-10 h-10 duration-200 bg-transparent text-base-content/50 hover:text-base-content rounded-xl"
         @click="collapsed = !collapsed"
       >
         <ChevronDownIcon class="w-6" :class="{ 'rotate-90': collapsed }" />
@@ -13,7 +13,7 @@
     </div>
     <template v-if="!collapsed">
       <div class="overflow-x-auto">
-        <table class="table table-zebra w-full">
+        <table class="table w-full table-zebra">
           <!-- head -->
           <thead>
             <tr>
@@ -40,14 +40,14 @@
 <script setup lang="ts">
 import { ChevronDownIcon } from "@heroicons/vue/24/solid";
 import { PropType } from "vue";
-import { Torrent } from "torrust-index-types-lib";
+import { TorrentResponse } from "torrust-index-types-lib";
 import { ref } from "#imports";
 
 const collapsed = ref(false);
 
 const props = defineProps({
   torrent: {
-    type: Object as PropType<Torrent>,
+    type: Object as PropType<TorrentResponse>,
     required: true
   }
 });
diff --git a/composables/helpers.ts b/composables/helpers.ts
index ff0a2127..168fb101 100644
--- a/composables/helpers.ts
+++ b/composables/helpers.ts
@@ -1,4 +1,4 @@
-import { Torrent, TrackerMode } from "torrust-index-types-lib";
+import { TorrentResponse, TrackerMode } from "torrust-index-types-lib";
 import { useRestApi, useSettings, useUser } from "~/composables/states";
 
 export function isTrackerPublic (): boolean {
@@ -12,7 +12,7 @@ export function isUserLoggedIn (): boolean {
   return !!useUser().value?.username;
 }
 
-export function canEditThisTorrent (torrent: Torrent): boolean {
+export function canEditThisTorrent (torrent: TorrentResponse): boolean {
   const user = useUser().value;
 
   if (!user?.username) {
diff --git a/composables/states.ts b/composables/states.ts
index e8f61c07..98b068d5 100644
--- a/composables/states.ts
+++ b/composables/states.ts
@@ -1,9 +1,9 @@
 import { useRuntimeConfig, useState } from "#app";
-import { PublicSettings, TorrentCategory, User, TorrentTag } from "torrust-index-types-lib";
+import { PublicSettings, Category, TokenResponse, TorrentTag } from "torrust-index-types-lib";
 import { Rest } from "torrust-index-api-lib";
 
 export const useRestApi = () => useState<Rest>("rest-api", () => new Rest(useRuntimeConfig().public.apiBase));
-export const useCategories = () => useState<Array<TorrentCategory>>("categories", () => new Array<TorrentCategory>());
+export const useCategories = () => useState<Array<Category>>("categories", () => new Array<Category>());
 export const useTags = () => useState<Array<TorrentTag>>("tags", () => new Array<TorrentTag>());
 export const useAuthenticationModal = () => useState<boolean>("authentication-modal", () => false);
 export const useSettings = () => useState<PublicSettings>("public-settings", () => null);
diff --git a/package-lock.json b/package-lock.json
index 745d0d2d..a408e033 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,15 +4,14 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "torrust-index-frontend",
       "hasInstallScript": true,
       "dependencies": {
         "@heroicons/vue": "^2.0.13",
         "daisyui": "^2.51.5",
         "marked": "^4.0.7",
         "notiwind-ts": "^2.0.2",
-        "torrust-index-api-lib": "^0.1.15",
-        "torrust-index-types-lib": "^0.1.4"
+        "torrust-index-api-lib": "^0.2.0",
+        "torrust-index-types-lib": "^0.2.0"
       },
       "devDependencies": {
         "@nuxtjs/eslint-config-typescript": "^12.0.0",
@@ -11364,17 +11363,17 @@
       }
     },
     "node_modules/torrust-index-api-lib": {
-      "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/torrust-index-api-lib/-/torrust-index-api-lib-0.1.15.tgz",
-      "integrity": "sha512-R9XUWkalGpzlaqtRZeAo2qh0i9sIHzmFrYUkp8PwEHBmp/iFf98qWpDE1j1T56kvov2Uv+/5dgmn3fUmu4ckYA==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/torrust-index-api-lib/-/torrust-index-api-lib-0.2.0.tgz",
+      "integrity": "sha512-aSXcJCjVGcniUkL2oaFqmetSVpngqmNob20musnNsJbIHfgSw6f0mYVCOGJLAveUY6EYAyXC4eXgo2tQlfKEPw==",
       "dependencies": {
-        "torrust-index-types-lib": "^0.1.3"
+        "torrust-index-types-lib": "^0.2.0"
       }
     },
     "node_modules/torrust-index-types-lib": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/torrust-index-types-lib/-/torrust-index-types-lib-0.1.4.tgz",
-      "integrity": "sha512-6oSMO0SY2JAucIWzwesjsPh74uTzsnAFB4jKFrWqMJmSXt9QuC2l0eb62nRX6w4lil0UnMXKU4zsGBOvWcANjQ=="
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/torrust-index-types-lib/-/torrust-index-types-lib-0.2.0.tgz",
+      "integrity": "sha512-3L6cSbcdHyOcqGKcvmXLKu3XhM/N91IQ2IizCi67926VDtl/M5GJB5xtB9wFmWWeZwOlLgxBlrOunG9w+CxgvQ=="
     },
     "node_modules/tr46": {
       "version": "0.0.3",
@@ -20197,17 +20196,17 @@
       "dev": true
     },
     "torrust-index-api-lib": {
-      "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/torrust-index-api-lib/-/torrust-index-api-lib-0.1.15.tgz",
-      "integrity": "sha512-R9XUWkalGpzlaqtRZeAo2qh0i9sIHzmFrYUkp8PwEHBmp/iFf98qWpDE1j1T56kvov2Uv+/5dgmn3fUmu4ckYA==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/torrust-index-api-lib/-/torrust-index-api-lib-0.2.0.tgz",
+      "integrity": "sha512-aSXcJCjVGcniUkL2oaFqmetSVpngqmNob20musnNsJbIHfgSw6f0mYVCOGJLAveUY6EYAyXC4eXgo2tQlfKEPw==",
       "requires": {
-        "torrust-index-types-lib": "^0.1.3"
+        "torrust-index-types-lib": "^0.2.0"
       }
     },
     "torrust-index-types-lib": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/torrust-index-types-lib/-/torrust-index-types-lib-0.1.4.tgz",
-      "integrity": "sha512-6oSMO0SY2JAucIWzwesjsPh74uTzsnAFB4jKFrWqMJmSXt9QuC2l0eb62nRX6w4lil0UnMXKU4zsGBOvWcANjQ=="
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/torrust-index-types-lib/-/torrust-index-types-lib-0.2.0.tgz",
+      "integrity": "sha512-3L6cSbcdHyOcqGKcvmXLKu3XhM/N91IQ2IizCi67926VDtl/M5GJB5xtB9wFmWWeZwOlLgxBlrOunG9w+CxgvQ=="
     },
     "tr46": {
       "version": "0.0.3",
diff --git a/package.json b/package.json
index 7f573ad4..b2612afd 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "daisyui": "^2.51.5",
     "marked": "^4.0.7",
     "notiwind-ts": "^2.0.2",
-    "torrust-index-api-lib": "^0.1.15",
-    "torrust-index-types-lib": "^0.1.4"
+    "torrust-index-api-lib": "^0.2.0",
+    "torrust-index-types-lib": "^0.2.0"
   }
 }
diff --git a/pages/admin/settings/authentication.vue b/pages/admin/settings/authentication.vue
index f019473a..bf4576f9 100644
--- a/pages/admin/settings/authentication.vue
+++ b/pages/admin/settings/authentication.vue
@@ -1,9 +1,9 @@
 <template>
-  <div id="general-settings" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+  <div id="general-settings" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
     <div class="flex flex-col">
       <label for="authentication-email-signup">Email Requirement</label>
       <select id="authentication-email-signup" v-model="settings.auth.email_on_signup">
-        <template v-for="option in Requirement">
+        <template v-for="option in EmailOnSignup">
           <option v-if="isNaN(option)" :value="option">
             {{ option }}
           </option>
@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { PropType } from "vue";
-import { Settings, Requirement } from "torrust-index-types-lib";
+import { Settings, EmailOnSignup } from "torrust-index-types-lib";
 
 const props = defineProps({
   settings: {
diff --git a/pages/torrent/[infoHash].vue b/pages/torrent/[infoHash].vue
index 2f823752..697c50b0 100644
--- a/pages/torrent/[infoHash].vue
+++ b/pages/torrent/[infoHash].vue
@@ -1,20 +1,20 @@
 <template>
-  <div class="min-h-fit flex flex-col grow">
-    <div class="max-w-full flex flex-col items-center">
-      <div id="torrent-view" class="mb-8 flex flex-col-reverse md:flex-row flex-nowrap items-start w-full gap-3">
-        <div id="torrent-view-details" class="flex flex-col flex-auto items-center w-full">
-          <div id="torrent-view-details-body" class="w-full flex flex-col grow">
+  <div class="flex flex-col min-h-fit grow">
+    <div class="flex flex-col items-center max-w-full">
+      <div id="torrent-view" class="flex flex-col-reverse items-start w-full gap-3 mb-8 md:flex-row flex-nowrap">
+        <div id="torrent-view-details" class="flex flex-col items-center flex-auto w-full">
+          <div id="torrent-view-details-body" class="flex flex-col w-full grow">
             <div class="flex flex-col gap-6">
               <div class="hidden md:block">
                 <button
-                  class="btn bg-base-100 hover:bg-base-100 pl-2 pr-4 border-none text-base-content/75 hover:text-base-content"
+                  class="pl-2 pr-4 border-none btn bg-base-100 hover:bg-base-100 text-base-content/75 hover:text-base-content"
                   @click.prevent="$router.go(-1)"
                 >
-                  <ChevronLeftIcon class="mr-2 w-5" />
+                  <ChevronLeftIcon class="w-5 mr-2" />
                   back
                 </button>
               </div>
-              <div v-if="torrent" class="w-full flex flex-col flex-auto gap-6">
+              <div v-if="torrent" class="flex flex-col flex-auto w-full gap-6">
                 <TorrentDescriptionTab :torrent="torrent" @updated="reloadTorrent" />
                 <TorrentFilesTab :torrent="torrent" @updated="reloadTorrent" />
                 <TorrentTrackersTab :torrent="torrent" @updated="reloadTorrent" />
@@ -22,13 +22,13 @@
             </div>
           </div>
         </div>
-        <TorrentActionCard class="top-8 md:sticky max-w-md" :torrent="torrent" @updated="reloadTorrent" />
+        <TorrentActionCard class="max-w-md top-8 md:sticky" :torrent="torrent" @updated="reloadTorrent" />
         <div class="block md:hidden">
           <button
-            class="btn bg-base-200 border-none"
+            class="border-none btn bg-base-200"
             @click.prevent="$router.go(-1)"
           >
-            <ChevronLeftIcon class="mr-2 w-5 text-base-content/50" />
+            <ChevronLeftIcon class="w-5 mr-2 text-base-content/50" />
             back
           </button>
         </div>
@@ -41,7 +41,7 @@
 import { ChevronLeftIcon } from "@heroicons/vue/24/solid";
 import { Ref } from "vue";
 import { useRoute, useRuntimeConfig } from "#app";
-import { Torrent } from "torrust-index-types-lib";
+import { TorrentResponse } from "torrust-index-types-lib";
 import TorrentActionCard from "~/components/torrent/TorrentActionCard.vue";
 import TorrentDescriptionTab from "~/components/torrent/TorrentDescriptionTab.vue";
 import TorrentFilesTab from "~/components/torrent/TorrentFilesTab.vue";
@@ -55,7 +55,7 @@ const rest = useRestApi().value;
 const infoHash = route.params.infoHash as string;
 
 const loadingTorrent: Ref<boolean> = ref(false);
-const torrent: Ref<Torrent> = ref(null);
+const torrent: Ref<TorrentResponse> = ref(null);
 
 onMounted(() => {
   if (!infoHash) {
@@ -68,7 +68,7 @@ onMounted(() => {
 function getTorrentFromApi (infoHash: string) {
   loadingTorrent.value = true;
 
-  rest.torrent.getTorrent(infoHash)
+  rest.torrent.getTorrentInfo(infoHash)
     .then((data) => {
       torrent.value = data;
     })
diff --git a/pages/torrent/edit/[infoHash].vue b/pages/torrent/edit/[infoHash].vue
index 643245e5..1a1e70b1 100644
--- a/pages/torrent/edit/[infoHash].vue
+++ b/pages/torrent/edit/[infoHash].vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="w-full flex flex-col items-center">
+  <div class="flex flex-col items-center w-full">
     <h2 class="text-2xl font-semibold text-neutral-content">
       Edit Torrent
     </h2>
-    <div class="w-full max-w-xl flex flex-col gap-6">
+    <div class="flex flex-col w-full max-w-xl gap-6">
       <div>
         <label for="title" class="px-2">Title</label>
         <input id="title" v-model="form.title" name="title" type="text" class="mt-1">
       </div>
       <div>
         <label for="description" class="px-2">Description</label>
-        <div class="my-2 tabs tabs-boxed w-fit border border-base-content/20">
+        <div class="my-2 border tabs tabs-boxed w-fit border-base-content/20">
           <button class="tab" :class="{ 'tab-active': descriptionView === 'edit' }" @click="descriptionView = 'edit'">
             Edit
           </button>
@@ -76,7 +76,7 @@
 <script setup lang="ts">
 import { Ref } from "vue";
 import { notify } from "notiwind-ts";
-import { Torrent, TorrentTag } from "../../../../torrust-index-types-lib";
+import { TorrentResponse } from "torrust-index-types-lib";
 import {
   computed,
   navigateTo,
@@ -105,7 +105,7 @@ const route = useRoute();
 const infoHash = route.params.infoHash as string;
 
 const loadingTorrent = ref(true);
-const torrent: Ref<Torrent> = ref(null);
+const torrent: Ref<TorrentResponse> = ref(null);
 const updatingTorrent: Ref<boolean> = ref(false);
 const descriptionView = ref("edit");
 
@@ -126,7 +126,7 @@ onMounted(() => {
 function getTorrentFromApi (infoHash: string) {
   loadingTorrent.value = true;
 
-  rest.value.torrent.getTorrent(infoHash)
+  rest.value.torrent.getTorrentInfo(infoHash)
     .then((data) => {
       torrent.value = data;
 
diff --git a/pages/torrents.vue b/pages/torrents.vue
index 522101f0..0dd9bbba 100644
--- a/pages/torrents.vue
+++ b/pages/torrents.vue
@@ -6,7 +6,7 @@
       </h2>
     </div>
     <div class="flex w-full">
-      <div class="w-full flex flex-wrap justify-between gap-2">
+      <div class="flex flex-wrap justify-between w-full gap-2">
         <div class="flex flex-wrap gap-2">
           <TorrustSelect
             v-model:selected="categoryFilters"
@@ -29,7 +29,7 @@
       </div>
     </div>
     <div class="flex">
-      <div class="my-2 tabs tabs-boxed w-fit border border-base-content/20">
+      <div class="my-2 border tabs tabs-boxed w-fit border-base-content/20">
         <button class="tab" :class="{ 'tab-active': layout === 'default' }" @click="layout = 'default'">
           Default
         </button>
@@ -39,7 +39,7 @@
       </div>
     </div>
     <div class="flex flex-col">
-      <div class="flex flex-row flex-nowrap items-start">
+      <div class="flex flex-row items-start flex-nowrap">
         <div class="w-full">
           <template v-if="torrents.length > 0">
             <template v-if="layout === 'default'">
@@ -61,7 +61,7 @@
 
 <script setup lang="ts">
 import { useRuntimeConfig, useRoute, useRouter } from "nuxt/app";
-import { TorrentCompact } from "torrust-index-types-lib";
+import { TorrentListing } from "torrust-index-types-lib";
 import { Ref } from "vue";
 import { computed, onMounted, ref, useTags, watch } from "#imports";
 import { useCategories, useRestApi } from "~/composables/states";
@@ -89,7 +89,7 @@ const queryCategoryFilters = route.query?.categoryFilters as string[] || [];
 const categoryFilters: Ref<string[]> = ref(Array.isArray(queryCategoryFilters) ? queryCategoryFilters : [queryCategoryFilters]);
 const queryTagFilters = route.query?.tagFilters as string[] || [];
 const tagFilters: Ref<string[]> = ref(Array.isArray(queryTagFilters) ? queryTagFilters : [queryTagFilters]);
-const torrents: Ref<Array<TorrentCompact>> = ref([]);
+const torrents: Ref<Array<TorrentListing>> = ref([]);
 const torrentsTotal = ref(0);
 const searchQuery: Ref<string> = ref(null);
 const currentPage: Ref<number> = ref(Number(route.query?.page as string) || 1);
diff --git a/pages/upload.vue b/pages/upload.vue
index 75c6e0af..e63f79b0 100644
--- a/pages/upload.vue
+++ b/pages/upload.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="w-full flex flex-col items-center">
+  <div class="flex flex-col items-center w-full">
     <h2 class="text-2xl font-semibold text-neutral-content">
       Upload Torrent
     </h2>
-    <div class="w-full max-w-xl flex flex-col gap-6">
+    <div class="flex flex-col w-full max-w-xl gap-6">
       <div>
         <label for="title" class="px-2">Title</label>
         <input id="title" v-model="form.title" name="title" type="text" class="mt-1">
       </div>
       <div>
         <label for="description" class="px-2">Description</label>
-        <div class="my-2 tabs tabs-boxed w-fit border border-base-content/20">
+        <div class="my-2 border tabs tabs-boxed w-fit border-base-content/20">
           <button class="tab" :class="{ 'tab-active': descriptionView === 'edit' }" @click="descriptionView = 'edit'">
             Edit
           </button>
@@ -63,7 +63,7 @@
       </template>
       <template v-else>
         <button
-          class="px-4 h-12 w-full bg-gradient-to-bl from-primary to-primary-dark disabled:from-gray-500 disabled:to-gray-500 text-neutral-content font-semibold rounded-2xl shadow-lg disabled:shadow-none shadow-transparent hover:shadow-primary-dark/50 duration-1000"
+          class="w-full h-12 px-4 font-semibold duration-1000 shadow-lg bg-gradient-to-bl from-primary to-primary-dark disabled:from-gray-500 disabled:to-gray-500 text-neutral-content rounded-2xl disabled:shadow-none shadow-transparent hover:shadow-primary-dark/50"
           @click="login"
         >
           <span>Please sign in to upload</span>
@@ -134,7 +134,6 @@ function setFile (file: any) {
   [form.value.torrentFile] = file;
 }
 
-// TODO: replace torrent_id with info_hash.
 function submitForm () {
   uploading.value = true;
 
@@ -147,7 +146,7 @@ function submitForm () {
       file: form.value.torrentFile
     }
   )
-    .then((torrent_id) => {
+    .then((new_torrent) => {
       uploading.value = false;
 
       notify({
@@ -156,7 +155,7 @@ function submitForm () {
         text: "Torrent uploaded!"
       }, 4000);
 
-      navigateTo(`/torrent/${torrent_id}`, { replace: true });
+      navigateTo(`/torrent/${new_torrent.info_hash}`, { replace: true });
     })
     .catch((err) => {
       uploading.value = false;