39 add email on signup option

src/components/PageSize.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="relative inline-block text-left spaced" v-click-outside="() => (dropdownOpened = false)">
+    <button class="filter relative" @click="dropdownOpened = !dropdownOpened">
+      <AdjustmentsIcon size="16" class="mr-1 opacity-50" />
+      Page Size
+    </button>
+    <div class="origin-top-left absolute left-0 mt-2 z-10" :class="{hidden: !dropdownOpened}">
+      <div class="py-2 px-2 w-48 flex flex-col bg-slate-800 text-sm rounded-md shadow-lg">
+        <ul v-if="$route.name === 'Browse Torrents'" id="category-filters" class="">
+          <li v-for="size in pageSizeList"
+              @click="updateSize(size)"
+              class="cursor-pointer text-slate-400 hover:text-white"
+              :key="size">
+            <span class="">{{ size }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {UserIcon} from "@vue-hero-icons/outline";
+import { AdjustmentsIcon } from '@vue-hero-icons/solid'
+import {mapState} from "vuex";
+
+export default {
+  name: "ChangePageSize",
+  components: {UserIcon, AdjustmentsIcon},
+  props: {
+      updatePageSize: {
+        type: Function,
+        required: true
+      },
+      pageSizeList: {
+        type: Array,
+        required: true
+      }
+  },
+  data: () => ({
+    dropdownOpened: false
+  }),
+  computed: {
+    ...mapState({
+      user: state => state.auth.user
+    })
+  },
+  methods: {
+      updateSize(size) {
+          this.updatePageSize(size);
+          this.dropdownOpened = false;
+      }
+  }
+}
+</script>
+
+<style scoped>
+.filter {
+  @apply px-3 py-1.5 text-slate-400 text-sm border border-slate-800 rounded-md flex items-center relative cursor-pointer transition duration-200 hover:text-slate-200 hover:border-slate-200;
+}
+
+.regular-checkbox {
+  @apply text-sky-400;
+  -webkit-appearance: none;
+  background-color: rgba(0, 0, 0, .1);
+  border: none;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
+  padding: 9px;
+  border-radius: 3px;
+  display: inline-block;
+  position: relative;
+}
+
+.spaced {
+  margin-left: 10px;
+}
+
+#category-filters li {
+  @apply px-2 py-1 flex flex-row justify-between;
+}
+
+#category-filters li input {
+  @apply text-left
+}
+</style>

src/components/Pagination.vue

@@ -1,13 +1,12 @@
 <template>
-  <!-- This example requires Tailwind CSS v2.0+ -->
   <div class="py-6 flex items-center justify-between">
     <div class="flex-1 flex items-center sm:justify-between justify-end">
       <div class="hidden sm:block">
         <p class="text-sm text-slate-400">
           Showing
           <span class="font-medium">{{ (currentPage * pageSize) - pageSize }}</span>
           to
-          <span class="font-medium">{{ currentPage * pageSize }}</span>
+          <span class="font-medium">{{ Math.min(currentPage * pageSize, totalResults) }}</span>
           of
           <span class="font-medium">{{ totalResults }}</span>
           results
@@ -38,33 +37,52 @@
             </svg>
           </button>
 
-          <template v-if="currentPage > 4">
-            <button
-                @click="goToFirstPage"
-                class="page-button">
-              1
+          <!--show all page buttons-->
+          <template v-if="totalPages < 7">
+            <button v-for="i in totalPages" :key="i"
+                  @click="goToPage(i)"
+                  :disabled="i === currentPage"
+                  class="page-button">
+                  {{ i }}
+            </button>
+          </template>
+
+          <template v-else-if="currentPage <= 4">
+            <button v-for="i in 5" :key="i"
+                  @click="goToPage(i)"
+                  :disabled="i === currentPage"
+                  class="page-button">
+                  {{ i }}
             </button>
-            <span
+            <span v-if="totalPages > 7"
                 class="page-button">
               ...
             </span>
           </template>
-<!--          <button v-else v-for="i in 5" :key="i" v-show="i < totalPages"-->
-<!--                  @click="goToPage(i)"-->
-<!--                  :disabled="i === currentPage"-->
-<!--                  class="page-button">-->
-<!--            {{ i }}-->
-<!--          </button>-->
 
-          <template v-if="currentPage > 4 && currentPage < totalPages-3">
+          <template v-else-if="currentPage > totalPages - 4">
+            <span v-if="totalPages > 7"
+              class="page-button">
+              ...
+            </span>
+            <button v-for="i in 5" :key="totalPages - 5 + i"
+                  @click="goToPage(totalPages - 5 + i)"
+                  :disabled="totalPages - 5 + i === currentPage"
+                  class="page-button">
+                  {{ totalPages - 5 + i }}
+            </button>
+          </template>
+
+          <template v-else>
+            <span class="page-button">
+              ...
+            </span>
             <button v-for="i in 2" :key="currentPage - 3 + i"
                     @click="goToPage(currentPage - 3 + i)"
                     class="page-button">
               {{ currentPage - 3 + i }}
             </button>
-            <button
-                :key="currentPage"
-                disabled
+            <button disabled
                 class="page-button">
               {{ currentPage }}
             </button>
@@ -73,26 +91,9 @@
                     class="page-button">
               {{ currentPage + i }}
             </button>
-          </template>
-
-          <template v-if="currentPage < totalPages-3">
-            <span
-                class="page-button">
+            <span class="page-button">
               ...
             </span>
-            <button
-                @click="goToLastPage"
-                class="page-button">
-              {{ totalPages }}
-            </button>
-          </template>
-          <template v-else>
-            <button v-for="i in 5" :key="totalPages-5+i" v-show="totalPages-5+i > 0"
-                    @click="goToPage(totalPages-5+i)"
-                    :disabled="totalPages-5+i === currentPage"
-                    class="page-button">
-              {{ totalPages-5+i }}
-            </button>
           </template>
 
           <button

src/components/SelectComponent.vue

@@ -0,0 +1,73 @@
+<template>
+  <div v-click-outside="() => (dropdownOpened = false)">
+      <button
+          type="button"
+          class="relative py-2 pr-10 pl-3 w-full text-left bg-slate-800/50 text-slate-400 rounded-md border border-slate-700 cursor-pointer focus:outline-none focus:ring-1 focus:border-sky-500 sm:text-sm"
+          @click="dropdownOpened = !dropdownOpened"
+      >
+        <span class="block truncate capitalize">{{ selected || 'Select a category...' }}</span>
+        <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+          <SelectorIcon class="w-5 h-5 text-gray-400"/>
+        </span>
+      </button>
+
+      <transition
+          leave-active-class="transition duration-100 ease-in"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
+      >
+        <ul
+            v-if="dropdownOpened"
+            class="overflow-auto absolute z-10 py-1 mt-1 w-full max-h-60 text-base bg-slate-800 rounded-md ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none sm:text-sm"
+            tabindex="-1" role="listbox"
+        >
+          <li class="relative py-2 pr-9 pl-3 text-slate-200 cursor-pointer select-none hover:text-sky-400 hover:bg-primary-600"
+              role="option"
+              v-for="(option, index) in options"
+              :key="index"
+              @click="select(option.name)"
+          >
+            <span
+                class="block truncate capitalize"
+                :class="[selected === option.name ? 'font-semibold' : 'font-normal']"
+            >
+              {{ option.name }}
+            </span>
+
+            <span
+                v-if="selected === option.name"
+                class="flex absolute inset-y-0 right-0 items-center pr-4 text-primary-600 row-icon"
+            >
+              <CheckIcon class="w-5 h-5"/>
+            </span>
+          </li>
+        </ul>
+      </transition>
+    </div>
+</template>
+
+<script>
+import {CheckIcon, SelectorIcon} from "@vue-hero-icons/solid";
+
+export default {
+  name: "SelectComponent",
+  components: {CheckIcon, SelectorIcon},
+  props: ['options', 'selected'],
+  emits: ['update'],
+  data: () => ({
+    dropdownOpened: false,
+  }),
+  methods: {
+    select(val) {
+      this.dropdownOpened = false;
+      this.$emit('update', val);
+    }
+  }
+}
+</script>
+
+<style scoped>
+li:hover .row-icon {
+  @apply text-white;
+}
+</style>

src/components/TorrentList.vue

@@ -49,7 +49,7 @@
                   {{ torrent.leechers }}
                 </td>
                 <td>
-                  {{ timeSince(torrent.upload_date) }} ago
+                  {{ timeSince(torrent.date_uploaded) }} ago
                 </td>
                 <td>
                   {{ fileSize(torrent.file_size) }}
@@ -68,6 +68,7 @@
 
 <script>
 import { SortAscendingIcon, SortDescendingIcon } from "@vue-hero-icons/outline"
+import {mapState} from "vuex";
 
 export default {
   name: "TorrentList",
@@ -90,6 +91,9 @@ export default {
       'size',
     ]
   }),
+  computed: {
+    ...mapState(['categories']),
+  },
   methods: {
     changeSort(sort) {
       let direction = 'ASC';
@@ -104,7 +108,6 @@ export default {
         direction = 'DESC'
       }
       this.updateSorting({name: sort, direction});
-      //this.$emit('update:sorting', sort);
     }
   }
 }

src/components/buttons/saving-changes/CancelButton.vue

@@ -0,0 +1,22 @@
+<template>
+  <button @click="click" :disabled="disabled">
+    <TrashIcon class="h-5 w-5 opacity-50" />
+    <span class="ml-1">discard changes</span>
+  </button>
+</template>
+
+<script>
+import { TrashIcon } from "@vue-hero-icons/outline";
+
+export default {
+  name: "CancelButton",
+  components: { TrashIcon },
+  props: ['click', 'disabled']
+}
+</script>
+
+<style scoped>
+button {
+  @apply py-1.5 px-3 flex items-center bg-sky-200 text-xs text-sky-600 font-semibold rounded-md transition duration-200 hover:text-sky-500 disabled:opacity-50;
+}
+</style>

src/components/buttons/saving-changes/SaveButton.vue

@@ -0,0 +1,22 @@
+<template>
+  <button @click="click" :disabled="disabled">
+    <CheckIcon class="h-5 w-5 opacity-50" />
+    <span class="ml-1">save changes</span>
+  </button>
+</template>
+
+<script>
+import { CheckIcon } from "@vue-hero-icons/outline";
+
+export default {
+  name: "SaveButton",
+  components: { CheckIcon },
+  props: ['click', 'disabled']
+}
+</script>
+
+<style scoped>
+button {
+  @apply py-1.5 px-3 flex items-center text-xs text-white font-semibold bg-sky-600 rounded-md transition duration-200 hover:bg-sky-500 disabled:opacity-50;
+}
+</style>

src/components/buttons/saving-changes/SavingChanges.vue

@@ -0,0 +1,33 @@
+<template>
+  <transition
+      enter-active-class="transition ease-out duration-100 transform"
+      enter-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75 transform"
+      leave-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+  >
+    <div v-if="show" class="flex flex-row">
+      <CancelButton :click="cancel" :disabled="disabled" class="ml-auto" />
+      <SaveButton :click="save" :disabled="disabled" class="ml-2" />
+    </div>
+  </transition>
+</template>
+
+<script>
+import CancelButton from "@/components/buttons/saving-changes/CancelButton.vue";
+import SaveButton from "@/components/buttons/saving-changes/SaveButton.vue";
+
+export default {
+  name: "SavingChanges",
+  components: {
+    CancelButton,
+    SaveButton
+  },
+  props: ['cancel', 'save', 'disabled', 'show']
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/navigation/Profile.vue

@@ -16,7 +16,7 @@
 
     <div class="origin-top-right absolute right-0 mt-2 z-10" :class="{hidden: !dropdownOpened}">
       <div @click.prevent="() => (dropdownOpened = false)" class="py-2 px-2 w-48 flex flex-col bg-slate-800 text-sm rounded-md shadow-lg">
-        <router-link to="/settings" replace class="py-1.5 text-center text-slate-100 border border-transparent rounded-md transition duration-200 hover:bg-slate-700 hover:border-slate-700">
+        <router-link v-if="$store.getters.isAdministrator" to="/settings" replace class="py-1.5 text-center text-slate-100 border border-transparent rounded-md transition duration-200 hover:bg-slate-700 hover:border-slate-700">
           <span>Settings</span>
         </router-link>
         <hr class="my-2 border-slate-700" />