Merge #623: Force accept agreement before uploading

a6ee38f feat: [#622] force accept agreetment before uploading (Jose Celano)

Pull request description:

  I added a new checkbox to force users to accept the terms and conditions before uploading a torrent.

ACKs for top commit:
  josecelano:
    ACK a6ee38f

Tree-SHA512: 936c472075d821bd7707016f2e3b0db414a91aa166f3827fc9454762268dce7873d162b005ad9eaf2fe66228bc4d801c815bdc1a5ac48ee4940a60d01a15934f

Author: josecelano

cypress.config.ts

@@ -3,7 +3,7 @@ import { grantAdminRole, deleteUser } from "./cypress/e2e/contexts/user/tasks";
 import { deleteTorrent, deleteTorrentsInfoFromDatabase } from "./cypress/e2e/contexts/torrent/tasks";
 import { deleteCategory, addCategory } from "./cypress/e2e/contexts/category/tasks";
 import { deleteTags, addTag } from "./cypress/e2e/contexts/tag/tasks";
-import { DatabaseConfig } from "./cypress/e2e/common/database";
+import type { DatabaseConfig } from "./cypress/e2e/common/database";
 
 function databaseConfig (config: Cypress.PluginConfigOptions): DatabaseConfig {
   return {

cypress/e2e/contexts/torrent/commands.ts

@@ -29,7 +29,7 @@ Cypress.Commands.add("upload_torrent", (torrent_info) => {
   // the tags context.  We could even create some tags before running all the
   // tests.
   // cy.get("input[data-cy=\"upload-form-torrent-upload\"]").select('fractals');
-
+  cy.get("input[data-cy=\"upload-form-agree-terms\"]").check();
   cy.get("button[data-cy=\"upload-form-submit\"]").click();
 });
 

cypress/e2e/contexts/torrent/specs/upload.cy.ts

@@ -44,7 +44,7 @@ describe("A registered user", () => {
     // the tags context.  We could even create some tags before running all the
     // tests.
     // cy.get("input[data-cy=\"upload-form-torrent-upload\"]").select('fractals');
-
+    cy.get("input[data-cy=\"upload-form-agree-terms\"]").check();
     cy.get("button[data-cy=\"upload-form-submit\"]").click();
 
     cy.get("@infohash").then((infohash) => {

pages/upload.vue

@@ -41,6 +41,7 @@
           </div>
         </template>
       </div>
+
       <template v-if="categories?.length > 0">
         <div>
           <label for="category" class="px-2">Category</label>
@@ -53,6 +54,7 @@
           </select>
         </div>
       </template>
+
       <template v-if="tags?.length > 0">
         <div>
           <label for="tags" class="px-2">Tags</label>
@@ -67,14 +69,25 @@
       <div>
         <UploadFile sub-title="Only .torrent files allowed. BitTorrent v2 files are NOT supported." accept=".torrent" @on-change="setFile" />
       </div>
+
+      <!-- Checkbox for Terms and Conditions Agreement -->
+      <div>
+        <label for="agree-to-terms" class="px-2">Agreement</label>
+        <div class="mt-1">
+          <input v-model="agreeToTerms" name="agree-to-terms" type="checkbox" class="max-w-5" data-cy="upload-form-agree-terms">
+          <span class="px-2">I have read the <NuxtLink to="/terms" target="_blank">{{ contentUploadAgreement }}</NuxtLink>.</span>
+        </div>
+      </div>
+
       <template v-if="user?.username">
         <TorrustButton
           label="submit"
           data-cy="upload-form-submit"
-          :disabled="!formValid() || uploading"
+          :disabled="!formValid() || !agreeToTerms || uploading"
           @click="submitForm"
         />
       </template>
+
       <template v-else>
         <div class="relative flex justify-center text-sm">
           <NuxtLink to="/signin">
@@ -101,7 +114,7 @@ import {
   useTags,
   useUser
 } from "#imports";
-import { useCategories } from "~/composables/states";
+import { useCategories, useSettings } from "~/composables/states";
 
 type FormUploadTorrent = {
   title: string;
@@ -111,11 +124,13 @@ type FormUploadTorrent = {
   torrentFile: any;
 }
 
+const settings = useSettings();
 const categories = useCategories();
 const tags = useTags();
 const user = useUser();
 const rest = useRestApi();
 
+const agreeToTerms: Ref<boolean> = ref(false);
 const uploading: Ref<boolean> = ref(false);
 const descriptionView = ref("edit");
 const form: Ref<FormUploadTorrent> = ref({
@@ -125,12 +140,23 @@ const form: Ref<FormUploadTorrent> = ref({
   tags: [],
   torrentFile: ""
 });
+const contentUploadAgreement = ref("");
 
 onMounted(() => {
   getCategories();
   getTags();
 });
 
+watch(
+  () => settings.value,
+  (newSettings) => {
+    if (newSettings?.website?.terms?.upload?.content_upload_agreement) {
+      contentUploadAgreement.value = newSettings.website.terms.page.title;
+    }
+  },
+  { immediate: true }
+);
+
 function formValid () {
   return form.value.title && form.value.category && form.value.torrentFile;
 }