Ugraded all pages to vue 3 & typescript

src/pages/404.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <section class="not-found" :style="background">
+    <section class="not-found" :style="backgroundImageCSS">
       <h1 class="not-found__title">Page Not Found</h1>
       <seasoned-button class="button" @click="goBack">
         go back to previous page
@@ -9,30 +9,22 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapActions, mapGetters } from "vuex";
+  import { useStore } from "vuex";
-import SeasonedButton from "@/components/ui/SeasonedButton";
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
 
-export default {
+  const backgroundImageCSS =
-  components: { SeasonedButton },
+    'background-image: url("/assets/pulp-fiction.jpg")';
-  data() {
+
-    return {
+  const store = useStore();
-      background: 'background-image: url("/assets/pulp-fiction.jpg")'
+
-    };
+  if (store.getters["popup/isOpen"]) {
-  },
+    store.dispatch("popup/close");
-  computed: {
-    ...mapGetters("popup", ["isOpen"])
-  },
-  methods: {
-    ...mapActions("popup", ["close"]),
-    goBack() {
-      this.$router.go(-1);
   }
-  },
+
-  created() {
+  function goBack() {
-    if (this.isOpen) this.close();
+    window.history.go(-2);
   }
-};
 </script>
 
 <style lang="scss" scoped>

src/pages/Home.vue

@@ -12,18 +12,13 @@
   </section>
 </template>
 
-<script>
+<script setup lang="ts">
-import LandingBanner from "@/components/LandingBanner";
+  import LandingBanner from "@/components/LandingBanner.vue";
-import ResultsSection from "@/components/ResultsSection";
+  import ResultsSection from "@/components/ResultsSection.vue";
-import { getRequests, getTmdbMovieListByName } from "@/api";
+  import { getRequests, getTmdbMovieListByName } from "../api";
+  import type ISection from "../interfaces/ISection";
 
-export default {
+  const lists: ISection[] = [
-  name: "home",
-  components: { LandingBanner, ResultsSection },
-  data() {
-    return {
-      imageFile: "/pulp-fiction.jpg",
-      lists: [
     {
       title: "Requests",
       apiFunction: getRequests
@@ -40,8 +35,5 @@ export default {
       title: "Popular",
       apiFunction: () => getTmdbMovieListByName("popular")
     }
-      ]
+  ];
-    };
-  }
-};
 </script>

src/pages/ListPage.vue

@@ -1,24 +1,22 @@
 <template>
-  <ResultsSection :title="listName" :apiFunction="getTmdbMovieListByName" />
+  <ResultsSection :title="listName" :apiFunction="_getTmdbMovieListByName" />
 </template>
 
-<script>
+<script setup lang="ts">
-import ResultsSection from "@/components/ResultsSection";
+  import { ref } from "vue";
-import { getTmdbMovieListByName } from "@/api";
+  import type { Ref } from "vue";
+  import { useRoute } from "vue-router";
+  import ResultsSection from "@/components/ResultsSection.vue";
+  import { getTmdbMovieListByName } from "../api";
 
-export default {
+  const route = useRoute();
-  components: { ResultsSection },
+  const listName: Ref<string | string[]> = ref(
-  computed: {
+    route?.params?.name || "List page"
-    listName() {
+  );
-      return this.$route.params.name;
+
+  function _getTmdbMovieListByName(page: number) {
+    return getTmdbMovieListByName(listName.value?.toString(), page);
   }
-  },
-  methods: {
-    getTmdbMovieListByName(page) {
-      return getTmdbMovieListByName(this.listName, page);
-    }
-  }
-};
 </script>
 
 <style lang="scss" scoped>

src/pages/ProfilePage.vue

@@ -5,10 +5,10 @@
         <h2 class="profile__title">{{ emoji }} Welcome {{ username }}</h2>
 
         <div class="button--group">
-          <seasoned-button @click="toggleSettings">{{
+          <seasoned-button @click="toggleSettings" :active="showSettings">{{
             showSettings ? "hide settings" : "show settings"
           }}</seasoned-button>
-          <seasoned-button @click="toggleActivity">{{
+          <seasoned-button @click="toggleActivity" :active="showActivity">{{
             showActivity ? "hide activity" : "show activity"
           }}</seasoned-button>
 
@@ -20,7 +20,7 @@
 
       <activity v-if="showActivity" />
 
-      <list-header title="User requests" :info="resultCount" />
+      <page-header title="Your requests" :info="resultCount" />
       <results-list v-if="results" :results="results" />
     </div>
 
@@ -35,52 +35,71 @@
   </section>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapGetters, mapActions } from "vuex";
+  import { ref, computed } from "vue";
-import ListHeader from "@/components/ListHeader";
+  import { useStore } from "vuex";
-import ResultsList from "@/components/ResultsList";
+  import PageHeader from "@/components/PageHeader.vue";
-import Settings from "@/pages/SettingsPage";
+  import ResultsList from "@/components/ResultsList.vue";
-import Activity from "@/pages/ActivityPage";
+  import Settings from "@/pages/SettingsPage.vue";
-import SeasonedButton from "@/components/ui/SeasonedButton";
+  import Activity from "@/pages/ActivityPage.vue";
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
+  import { getEmoji, getUserRequests, getSettings, logout } from "../api";
+  import type { Ref, ComputedRef } from "vue";
+  import type { ListResults } from "../interfaces/IList";
 
-import { getEmoji, getUserRequests, getSettings, logout } from "@/api";
+  const emoji: Ref<string> = ref("");
+  const results: Ref<Array<ListResults>> = ref([]);
+  const totalResults: Ref<number> = ref(-1);
+  const showSettings: Ref<boolean> = ref();
+  const showActivity: Ref<boolean> = ref();
 
-export default {
+  const store = useStore();
-  components: { ListHeader, ResultsList, Settings, Activity, SeasonedButton },
-  data() {
-    return {
-      emoji: "",
-      results: undefined,
-      totalResults: undefined,
-      showSettings: false,
-      showActivity: false
-    };
-  },
-  computed: {
-    ...mapGetters("user", ["loggedIn", "username", "settings"]),
-    resultCount() {
-      if (this.results === undefined) return;
 
-      const loadedResults = this.results.length;
+  const loggedIn: Ref<boolean> = computed(() => store.getters["user/loggedIn"]);
-      const totalResults = this.totalResults < 10000 ? this.totalResults : "∞";
+  const username: Ref<string> = computed(() => store.getters["user/username"]);
-      return `${loadedResults} of ${totalResults} results`;
+  const settings: Ref<object> = computed(() => store.getters["user/settings"]);
+
+  const resultCount: ComputedRef<number | string> = computed(() => {
+    const currentCount = results?.value?.length || 0;
+    const totalCount = totalResults.value < 10000 ? totalResults.value : "∞";
+    return `${currentCount} of ${totalCount} results`;
+  });
+
+  // Component loaded actions
+  getUserRequests().then(requestResults => {
+    if (!requestResults?.results) return;
+    results.value = requestResults.results;
+    totalResults.value = requestResults.total_results;
+  });
+
+  getEmoji().then(resp => (emoji.value = resp?.emoji));
+
+  showSettings.value = window.location.toString().includes("settings=true");
+  showActivity.value = window.location.toString().includes("activity=true");
+  // Component loaded actions end
+
+  function toggleSettings() {
+    showSettings.value = !showSettings.value;
+    updateQueryParams("settings", showSettings.value);
   }
-  },
-  methods: {
-    ...mapActions("user", ["logout", "setSettings"]),
-    toggleSettings() {
-      this.showSettings = this.showSettings ? false : true;
 
-      this.updateQueryParams("settings", this.showSettings);
+  function toggleActivity() {
-    },
+    showActivity.value = !showActivity.value;
-    updateQueryParams(key, value = false) {
+    updateQueryParams("activity", showActivity.value);
+  }
+
+  function _logout() {
+    store.dispatch("user/logout");
+  }
+
+  function updateQueryParams(key, value = false) {
     const params = new URLSearchParams(window.location.search);
     if (params.has(key)) {
       params.delete(key);
     }
 
     if (value) {
-        params.append(key, value);
+      params.append(key, `${value}`);
     }
 
     window.history.replaceState(
@@ -92,42 +111,7 @@ export default {
         params.toString().length ? `?${params}` : ""
       }`
     );
-    },
-    toggleActivity() {
-      this.showActivity = this.showActivity == true ? false : true;
-      this.updateQueryParams("activity", this.showActivity);
-    },
-    _logout() {
-      logout().then(() => {
-        this.logout();
-        this.$router.push("home");
-      });
   }
-  },
-  created() {
-    if (!this.settings) {
-      getSettings().then(resp => {
-        const { settings } = resp;
-        if (settings) this.setSettings(settings);
-      });
-    }
-
-    if (this.loggedIn) {
-      this.showSettings = window.location.toString().includes("settings=true");
-      this.showActivity = window.location.toString().includes("activity=true");
-
-      getUserRequests().then(results => {
-        this.results = results.results;
-        this.totalResults = results.total_results;
-      });
-
-      getEmoji().then(resp => {
-        const { emoji } = resp;
-        this.emoji = emoji;
-      });
-    }
-  }
-};
 </script>
 
 <style lang="scss" scoped>

src/pages/RegisterPage.vue

@@ -2,111 +2,124 @@
   <section>
     <h1>Register new user</h1>
 
-    <div class="form">
+    <form class="form" ref="formElement">
       <seasoned-input
-        ref="username"
         placeholder="username"
         icon="Email"
         type="email"
-        :value.sync="username"
+        v-model="username"
-        @enter="submit"
+        @keydown.enter="focusOnNextElement"
       />
 
       <seasoned-input
         placeholder="password"
         icon="Keyhole"
         type="password"
-        :value.sync="password"
+        v-model="password"
-        @enter="submit"
+        @keydown.enter="focusOnNextElement"
       />
       <seasoned-input
         placeholder="repeat password"
         icon="Keyhole"
         type="password"
-        :value.sync="passwordRepeat"
+        v-model="passwordRepeat"
-        @enter="submit"
+        @keydown.enter="submit"
       />
 
       <seasoned-button @click="submit">Register</seasoned-button>
-    </div>
+    </form>
 
     <router-link class="link" to="/signin"
       >Have a user? Sign in here</router-link
     >
 
-    <seasoned-messages :messages.sync="messages"></seasoned-messages>
+    <seasoned-messages v-model:messages="messages"></seasoned-messages>
   </section>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapActions } from "vuex";
+  import { ref, onMounted } from "vue";
-import { register } from "@/api";
+  import { useStore } from "vuex";
-import SeasonedButton from "@/components/ui/SeasonedButton";
+  import { useRouter } from "vue-router";
-import SeasonedInput from "@/components/ui/SeasonedInput";
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
-import SeasonedMessages from "@/components/ui/SeasonedMessages";
+  import SeasonedInput from "@/components/ui/SeasonedInput.vue";
+  import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
+  import { register } from "../api";
+  import { focusFirstFormInput, focusOnNextElement } from "../utils";
+  import type { Ref } from "vue";
+  import type IErrorMessage from "../interfaces/IErrorMessage";
 
-export default {
+  const username: Ref<string> = ref("");
-  components: { SeasonedButton, SeasonedInput, SeasonedMessages },
+  const password: Ref<string> = ref("");
-  data() {
+  const passwordRepeat: Ref<string> = ref("");
-    return {
+  const messages: Ref<IErrorMessage[]> = ref([]);
-      messages: [],
+  const formElement: Ref<HTMLFormElement> = ref(null);
-      username: null,
-      password: null,
-      passwordRepeat: null
-    };
-  },
-  methods: {
-    ...mapActions("user", ["login"]),
-    submit() {
-      this.messages = [];
-      let { username, password, passwordRepeat } = this;
 
-      if (username == null || username.length == 0) {
+  const store = useStore();
-        this.messages.push({ type: "error", title: "Missing username" });
+  const router = useRouter();
-        return;
+
-      } else if (password == null || password.length == 0) {
+  onMounted(() => focusFirstFormInput(formElement.value));
-        this.messages.push({ type: "error", title: "Missing password" });
+
-        return;
+  function clearMessages() {
-      } else if (passwordRepeat == null || passwordRepeat.length == 0) {
+    messages.value = [];
-        this.messages.push({ type: "error", title: "Missing repeat password" });
-        return;
-      } else if (passwordRepeat != password) {
-        this.messages.push({ type: "error", title: "Passwords do not match" });
-        return;
   }
 
-      this.registerUser(username, password);
+  function addErrorMessage(message: string, title?: string) {
-    },
+    messages.value.push({ message, title, type: "error" });
-    registerUser(username, password) {
+  }
-      register(username, password)
+
+  function addWarningMessage(message: string, title?: string) {
+    messages.value.push({ message, title, type: "warning" });
+  }
+
+  function validate(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (!username.value || username?.value?.length === 0) {
+        addWarningMessage("Missing username", "Validation error");
+        return reject();
+      }
+
+      if (!password.value || password?.value?.length === 0) {
+        addWarningMessage("Missing password", "Validation error");
+        return reject();
+      }
+
+      if (passwordRepeat.value == null || passwordRepeat.value.length == 0) {
+        addWarningMessage("Missing repeat password", "Validation error");
+        return reject();
+      }
+      if (passwordRepeat != password) {
+        addWarningMessage("Passwords do not match", "Validation error");
+        return reject();
+      }
+
+      resolve(true);
+    });
+  }
+
+  function submit() {
+    clearMessages();
+    validate().then(registerUser);
+  }
+
+  function registerUser() {
+    register(username.value, password.value)
       .then(data => {
-          if (data.success && this.login()) {
+        if (data?.success && store.dispatch("user/login")) {
-            this.$router.push({ name: "profile" });
+          router.push({ name: "profile" });
         }
       })
       .catch(error => {
-          if (error.status === 401) {
+        if (error?.status === 401) {
-            this.messages.push({
+          return addErrorMessage(
-              type: "error",
+            "Incorrect username or password",
-              title: "Access denied",
+            "Access denied"
-              message: "Incorrect username or password"
+          );
-            });
+        }
-          } else {
+
-            this.messages.push({
+        addErrorMessage(error?.message, "Unexpected error");
-              type: "error",
-              title: "Unexpected error",
-              message: error.message
       });
   }
-        });
-    }
-  },
-  mounted() {
-    try {
-      this.$refs.username.$el.getElementsByTagName("input")[0].focus();
-    } catch {}
-  }
-};
 </script>
 
 <style lang="scss" scoped>

src/pages/RequestPage.vue

@@ -2,16 +2,9 @@
   <ResultsSection title="Requests" :apiFunction="getRequests" />
 </template>
 
-<script>
+<script setup lang="ts">
-import ResultsSection from "@/components/ResultsSection";
+  import ResultsSection from "@/components/ResultsSection.vue";
-import { getRequests } from "@/api";
+  import { getRequests } from "../api";
-
-export default {
-  components: { ResultsSection },
-  methods: {
-    getRequests: getRequests
-  }
-};
 </script>
 
 <style lang="scss" scoped>

src/pages/SearchPage.vue

@@ -5,82 +5,82 @@
         <span>Search filter:</span>
 
         <toggle-button
-          :options="['All', 'movie', 'show', 'person']"
+          :options="toggleOptions"
-          :selected="mediaType"
+          v-model:selected="mediaType"
           @change="toggleChanged"
         />
       </label>
     </div>
 
-    <ResultsSection :title="title" :apiFunction="searchTmdb" />
+    <ResultsSection v-if="query" :title="title" :apiFunction="search" />
+    <h1 v-else class="no-results">No query found, please search above</h1>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { searchTmdb } from "@/api";
+  import { ref, computed } from "vue";
+  import { useRoute, useRouter } from "vue-router";
+  import { searchTmdb } from "../api";
 
-import ResultsSection from "@/components/ResultsSection";
+  import ResultsSection from "@/components/ResultsSection.vue";
-import ListHeader from "@/components/ListHeader";
+  import PageHeader from "@/components/PageHeader.vue";
-import ToggleButton from "@/components/ui/ToggleButton";
+  import ToggleButton from "@/components/ui/ToggleButton.vue";
+  import type { Ref } from "vue";
+  import { ListTypes } from "../interfaces/IList";
 
-export default {
+  // interface ISearchParams {
-  components: { ResultsSection, ListHeader, ToggleButton },
+  //   query: string;
-  data() {
+  //   page: string;
-    return {
+  //   adult: string;
-      query: "",
+  //   media_type: string;
-      page: 1,
+  // }
-      adult: false,
+
-      mediaType: null
+  const route = useRoute();
+  const router = useRouter();
+
+  const toggleOptions = ["all", ...Object.values(ListTypes)];
+  const query: Ref<string> = ref(null);
+  const page: Ref<number> = ref(1);
+  const adult: Ref<boolean> = ref(false);
+  const mediaType: Ref<ListTypes> = ref(null);
+
+  const title = computed(() => `Search results: ${query.value}`);
+
+  const urlQuery = route.query;
+  if (urlQuery && urlQuery?.query) {
+    query.value = decodeURIComponent(urlQuery?.query?.toString());
+    page.value = Number(urlQuery?.page) || 1;
+    adult.value = Boolean(urlQuery?.adult) || adult.value;
+    mediaType.value = (urlQuery?.media_type as ListTypes) || mediaType.value;
+  }
+
+  let search = (
+    _page = page.value || 1,
+    _mediaType = mediaType.value || "all"
+  ) => {
+    return searchTmdb(query.value, _page, adult.value, _mediaType);
   };
-  },
-  computed: {
-    title() {
-      return `Search results: ${this.query}`;
-    }
-  },
-  methods: {
-    searchTmdb(page = this.page) {
-      if (this.query && this.query.length)
-        return searchTmdb(this.query, page, this.adult, this.mediaType);
-    },
-    toggleChanged(value) {
-      if (["movie", "show", "person"].includes(value.toLowerCase())) {
-        this.mediaType = value.toLowerCase();
-      } else {
-        this.mediaType = null;
-      }
-      this.updateQueryParams();
-    },
-    updateQueryParams() {
-      const { query, page, adult, media_type } = this.$route.query;
 
-      this.$router.push({
+  function toggleChanged() {
+    updateQueryParams();
+  }
+
+  function updateQueryParams() {
+    const { query, page, adult, media_type } = route.query;
+
+    router.push({
       path: "search",
       query: {
-          ...this.$route.query,
+        ...route.query,
-          media_type: this.mediaType
+        media_type: mediaType.value
       }
     });
   }
-  },
-  created() {
-    const { query, page, adult, media_type } = this.$route.query;
-
-    if (!query) {
-      // abort
-      console.error("abort, no query");
-    }
-    this.query = decodeURIComponent(query);
-    this.page = page || 1;
-    this.adult = adult || this.adult;
-    this.mediaType = media_type || this.mediaType;
-
-    // this.searchTmdb();
-  }
-};
 </script>
 
 <style lang="scss" scoped>
+  @import "src/scss/media-queries";
+
   .filter {
     margin-top: 0.5rem;
     margin-left: 1.25rem;
@@ -94,4 +94,15 @@ export default {
       font-weight: 300;
     }
   }
+
+  .no-results {
+    margin-top: 3rem;
+    display: block;
+    text-align: center;
+
+    @include mobile {
+      padding: 0 1rem;
+      font-size: 1.5rem;
+    }
+  }
 </style>

src/pages/SettingsPage.vue

@@ -1,194 +1,37 @@
 <template>
-  <section class="profile">
-    <div class="profile__content" v-if="loggedIn">
   <section class="settings">
-        <h3 class="settings__header">Plex account</h3>
+    <link-plex-account @reload="reloadSettings" />
-
-        <div v-if="!plexId">
-          <span class="settings__info"
-            >Sign in to your plex account to get information about recently
-            added movies and to see your watch history</span
-          >
-
-          <form class="form">
-            <seasoned-input
-              placeholder="plex username"
-              type="email"
-              :value.sync="plexUsername"
-            />
-            <seasoned-input
-              placeholder="plex password"
-              type="password"
-              :value.sync="plexPassword"
-              @enter="authenticatePlex"
-            >
-            </seasoned-input>
-
-            <seasoned-button @click="authenticatePlex"
-              >link plex account</seasoned-button
-            >
-          </form>
-        </div>
-        <div v-else>
-          <span class="settings__info"
-            >Awesome, your account is already authenticated with plex! Enjoy
-            viewing your seasoned search history, plex watch history and
-            real-time torrent download progress.</span
-          >
-          <seasoned-button @click="unauthenticatePlex"
-            >un-link plex account</seasoned-button
-          >
-        </div>
-        <seasoned-messages :messages.sync="messages" />
 
     <hr class="setting__divider" />
 
-        <h3 class="settings__header">Change password</h3>
+    <change-password />
-        <form class="form">
-          <seasoned-input
-            placeholder="new password"
-            icon="Keyhole"
-            type="password"
-            :value.sync="newPassword"
-          />
-
-          <seasoned-input
-            placeholder="repeat new password"
-            icon="Keyhole"
-            type="password"
-            :value.sync="newPasswordRepeat"
-          />
-
-          <seasoned-button @click="changePassword"
-            >change password</seasoned-button
-          >
-        </form>
 
     <hr class="setting__divider" />
   </section>
-    </div>
-
-    <section class="not-found" v-else>
-      <div class="not-found__content">
-        <h2 class="not-found__title">Authentication Request Failed</h2>
-        <router-link :to="{ name: 'signin' }" exact title="Sign in here">
-          <button class="not-found__button button">Sign In</button>
-        </router-link>
-      </div>
-    </section>
-  </section>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapGetters, mapActions } from "vuex";
+  import { useStore } from "vuex";
-import SeasonedInput from "@/components/ui/SeasonedInput";
+  import ChangePassword from "@/components/profile/ChangePassword.vue";
-import SeasonedButton from "@/components/ui/SeasonedButton";
+  import LinkPlexAccount from "@/components/profile/LinkPlexAccount.vue";
-import SeasonedMessages from "@/components/ui/SeasonedMessages";
+  import { getSettings } from "../api";
 
-import { linkPlexAccount, unlinkPlexAccount, getSettings } from "@/api";
+  const store = useStore();
 
-export default {
+  function reloadSettings() {
-  components: { SeasonedInput, SeasonedButton, SeasonedMessages },
-  data() {
-    return {
-      messages: [],
-      plexUsername: null,
-      plexPassword: null,
-      newPassword: null,
-      newPasswordRepeat: null,
-      emoji: null
-    };
-  },
-  computed: {
-    ...mapGetters("user", ["loggedIn", "plexId", "settings"])
-  },
-  methods: {
-    ...mapActions("user", ["setSettings"]),
-    changePassword() {
-      return;
-    },
-    created() {
-      if (!this.settings) this.reloadSettings();
-    },
-    reloadSettings() {
     return getSettings().then(response => {
       const { settings } = response;
-        if (settings) this.setSettings(settings);
+      if (!settings) return;
-      });
-    },
-    async authenticatePlex() {
-      let username = this.plexUsername;
-      let password = this.plexPassword;
 
-      const { success, message } = await linkPlexAccount(username, password);
+      store.dispatch("user/setSettings", settings);
-
-      if (success) {
-        this.reloadSettings();
-        this.plexUsername = "";
-        this.plexPassword = "";
-      }
-
-      this.messages.push({
-        type: success ? "success" : "error",
-        title: success ? "Authenticated with plex" : "Something went wrong",
-        message: message
-      });
-    },
-    async unauthenticatePlex() {
-      const response = await unlinkPlexAccount();
-
-      if (response.success) this.reloadSettings();
-
-      this.messages.push({
-        type: response.success ? "success" : "error",
-        title: response.success
-          ? "Unlinked plex account "
-          : "Something went wrong",
-        message: response.message
     });
   }
-  }
-};
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
   @import "src/scss/variables";
   @import "src/scss/media-queries";
 
-a {
-  text-decoration: none;
-}
-
-// DUPLICATE CODE
-.form {
-  > div,
-  input,
-  button {
-    margin-bottom: 1rem;
-
-    &:last-child {
-      margin-bottom: 0px;
-    }
-  }
-
-  &__group {
-    justify-content: unset;
-    &__input-icon {
-      margin-top: 8px;
-      height: 22px;
-      width: 22px;
-    }
-    &-input {
-      padding: 10px 5px 10px 45px;
-      height: 40px;
-      font-size: 17px;
-      width: 75%;
-      @include desktop-min {
-        width: 400px;
-      }
-    }
-  }
-}
   .settings {
     padding: 3rem;
 
@@ -204,10 +47,12 @@ a {
       margin-bottom: 20px;
       text-transform: uppercase;
     }
+
     &__info {
       display: block;
       margin-bottom: 25px;
     }
+
     hr {
       display: block;
       height: 1px;
@@ -219,9 +64,14 @@ a {
       width: 96%;
       text-align: left;
     }
+
     span {
       font-weight: 200;
       size: 16px;
     }
   }
+
+  a {
+    text-decoration: none;
+  }
 </style>

src/pages/SigninPage.vue

@@ -2,100 +2,105 @@
   <section>
     <h1>Sign in</h1>
 
-    <div class="form">
+    <form class="form" ref="formElement">
       <seasoned-input
-        ref="username"
         placeholder="username"
         icon="Email"
         type="email"
-        @enter="submit"
+        v-model="username"
-        :value.sync="username"
+        @keydown.enter="focusOnNextElement"
       />
       <seasoned-input
         placeholder="password"
         icon="Keyhole"
         type="password"
-        :value.sync="password"
+        v-model="password"
-        @enter="submit"
+        @keydown.enter="submit"
       />
 
       <seasoned-button @click="submit">sign in</seasoned-button>
-    </div>
+    </form>
     <router-link class="link" to="/register"
       >Don't have a user? Register here</router-link
     >
 
-    <seasoned-messages :messages.sync="messages"></seasoned-messages>
+    <seasoned-messages v-model:messages="messages" />
   </section>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapActions } from "vuex";
+  import { ref, onMounted } from "vue";
-import { login } from "@/api";
+  import { useStore } from "vuex";
-import SeasonedInput from "@/components/ui/SeasonedInput";
+  import { useRouter } from "vue-router";
-import SeasonedButton from "@/components/ui/SeasonedButton";
+  import SeasonedInput from "@/components/ui/SeasonedInput.vue";
-import SeasonedMessages from "@/components/ui/SeasonedMessages";
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
+  import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
+  import { login } from "../api";
+  import { focusFirstFormInput, focusOnNextElement } from "../utils";
+  import type { Ref } from "vue";
+  import type IErrorMessage from "../interfaces/IErrorMessage";
 
-export default {
+  const username: Ref<string> = ref("");
-  components: { SeasonedInput, SeasonedButton, SeasonedMessages },
+  const password: Ref<string> = ref("");
-  data() {
+  const messages: Ref<IErrorMessage[]> = ref([]);
-    return {
+  const formElement: Ref<HTMLFormElement> = ref(null);
-      messages: [],
-      username: null,
-      password: null
-    };
-  },
-  methods: {
-    ...mapActions("user", ["login"]),
-    submit() {
-      this.messages = [];
-      let { username, password } = this;
 
-      if (!username || username.length == 0) {
+  const store = useStore();
-        this.messages.push({ type: "error", title: "Missing username" });
+  const router = useRouter();
-        return;
+
+  onMounted(() => focusFirstFormInput(formElement.value));
+
+  function clearMessages() {
+    messages.value = [];
   }
 
-      if (!password || password.length == 0) {
+  function addErrorMessage(message: string, title?: string) {
-        this.messages.push({ type: "error", title: "Missing password" });
+    messages.value.push({ message, title, type: "error" });
-        return;
   }
 
-      this.signin(username, password);
+  function addWarningMessage(message: string, title?: string) {
-    },
+    messages.value.push({ message, title, type: "warning" });
-    signin(username, password) {
+  }
-      login(username, password, true)
+
+  function validate(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      if (!username.value || username?.value?.length === 0) {
+        addWarningMessage("Missing username", "Validation error");
+        return reject();
+      }
+
+      if (!password.value || password?.value?.length === 0) {
+        addWarningMessage("Missing password", "Validation error");
+        return reject();
+      }
+
+      resolve(true);
+    });
+  }
+
+  function submit() {
+    clearMessages();
+    validate().then(signin);
+  }
+
+  function signin() {
+    login(username.value, password.value, true)
       .then(data => {
-          if (data.success && this.login()) {
+        if (data?.success && store.dispatch("user/login")) {
-            this.$router.push({ name: "profile" });
+          router.push({ name: "profile" });
         }
       })
       .catch(error => {
-          if (error.status === 401) {
+        if (error?.status === 401) {
-            this.messages.push({
+          return addErrorMessage(
-              type: "error",
+            "Incorrect username or password",
-              title: "Access denied",
+            "Access denied"
-              message: "Incorrect username or password"
+          );
-            });
+        }
-          } else {
+
-            this.messages.push({
+        addErrorMessage(error?.message, "Unexpected error");
-              type: "error",
-              title: "Unexpected error",
-              message: error.message
       });
   }
-        });
-    }
-  },
-  created() {
-    document.title = `Sign in — ${document.title}`;
-  },
-  mounted() {
-    try {
-      this.$refs.username.$el.getElementsByTagName("input")[0].focus();
-    } catch {}
-  }
-};
 </script>
 
 <style lang="scss" scoped>
@@ -108,16 +113,6 @@ section {
       padding: 4rem;
     }
 
-  .form > div,
-  input,
-  button {
-    margin-bottom: 1rem;
-
-    &:last-child {
-      margin-bottom: 0px;
-    }
-  }
-
     h1 {
       margin: 0;
       line-height: 16px;

src/pages/TorrentsPage.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <page-header title="Torrent search page" />
+
+    <section>
+      <div class="search-input-group">
+        <seasoned-input
+          v-model="query"
+          type="torrents"
+          @keydown.enter="setTorrentQuery"
+          placeholder="Search torrents"
+        />
+        <seasoned-button @click="setTorrentQuery">Search</seasoned-button>
+      </div>
+
+      <active-torrents />
+
+      <TorrentList :query="torrentQuery" />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from "vue";
+  import PageHeader from "@/components/PageHeader.vue";
+  import SeasonedInput from "@/components/ui/SeasonedInput.vue";
+  import SeasonedButton from "@/components/ui/SeasonedButton.vue";
+  import TorrentList from "@/components/torrent/TorrentSearchResults.vue";
+  import ActiveTorrents from "@/components/torrent/ActiveTorrents.vue";
+  import { getValueFromUrlQuery, setUrlQueryParameter } from "../utils";
+  import type { Ref } from "vue";
+
+  const urlQuery = getValueFromUrlQuery("query");
+
+  const query: Ref<string> = ref(urlQuery || "");
+  const torrentQuery: Ref<string> = ref(urlQuery);
+
+  function setTorrentQuery() {
+    setUrlQueryParameter("query", query.value);
+    torrentQuery.value = query.value;
+  }
+</script>
+
+<style lang="scss" scoped>
+  section {
+    padding: 1.25rem;
+
+    .search-input-group {
+      display: flex;
+
+      margin-bottom: 2rem;
+
+      button {
+        margin-left: 0.5rem;
+      }
+    }
+  }
+</style>