Refactor Dashboard.vue and Widget.vue components

- Simplified the structure of the Dashboard.vue component by removing unnecessary nested div elements.
- Updated the Widget.vue component to conditionally render the component based on the "component" prop and added opacity transition effect.
- Removed the OptionalInput component from the formkit.config.ts file.

Rename filepaths and components

- Renamed the frontend/src/views/AdminViews/FlowEditor.vue file to frontend/src/modules/admin/pages/FlowEditor.vue.
- Renamed the frontend/src/views/AdminViews/HomeView.vue file to frontend/src/modules/admin/pages/Home.vue.
- Renamed the frontend/src/views/AdminViews/InvitationsView.vue file to frontend/src/modules/admin/pages/Invitations.vue.
- Renamed the frontend/src/views/AdminViews/SettingsView.vue file to frontend/src/modules/admin/pages/Settings.vue.
- Renamed the frontend/src/views/AdminViews/UsersView.vue file to frontend/src/modules/admin/pages/Users.vue.
- Created the frontend/src/modules/admin/router/children.ts file to define child routes for the admin module.
- Created the frontend/src/modules/admin/router/index.ts file to define routes for the admin module.
- Renamed the frontend/src/views/AdminViews/AdminView.vue file to frontend/src/modules/admin/views/Admin.vue.
- Renamed the frontend/src/views/LoginViews/MFAView.vue file to frontend/src/modules/authentication/components/PasskeyForm.vue.
- Renamed the frontend/src/views/LoginViews/PasswordView.vue file to frontend/src/modules/authentication/components/PasswordForm.vue.
- Renamed the frontend/src/views/LoginViews/UsernameView.vue file to frontend/src/modules/authentication/components/UsernameForm.vue.
- Created the frontend/src/modules/authentication/router/index.ts file to define routes for the authentication module.
- Renamed the frontend/src/views/LoginViews/LoginView.vue file to frontend/src/modules/authentication/views/LoginView.vue.

frontend/src/components/Dashboard/Dashboard.vue

@@ -1,22 +1,24 @@
 <template>
-    <div class="grid-stack mx-[-10px]">
-        <Widget v-for="widget in dashboard" :key="widget.id" :data="widget" :is-editing="isEditing" @delete="deleteLocalWidget" />
-    </div>
-    <Transition name="fade" mode="out-in" :duration="{ enter: 100, leave: 100 }">
-        <div v-if="isEditing" class="fixed right-6 bottom-6 group" @mouseover="isShowing = true" @mouseleave="isShowing = false">
-            <div class="flex flex-col items-center mb-4 space-y-2" :class="{ hidden: !isShowing }">
-                <button @click="resetLocalDashboard" type="button" class="relative w-14 h-14 text-gray-500 bg-white rounded border border-gray-200 hover:text-gray-900 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600">
-                    <i class="fas fa-trash-alt"></i>
-                    <span class="absolute block mb-px text-sm font-medium -translate-y-1/2 -left-[110px] top-1/2">
-                        {{ __("Reset Layout") }}
-                    </span>
-                </button>
-            </div>
-            <FormKit type="button" :classes="{ input: '!w-14 !h-14' }">
-                <i class="fas fa-plus text-xl transition-transform group-hover:rotate-45"></i>
-            </FormKit>
+    <div>
+        <div class="grid-stack mx-[-10px]">
+            <Widget v-for="widget in dashboard" :key="widget.id" :data="widget" :isEditing="isEditing" @delete="deleteLocalWidget" />
         </div>
-    </Transition>
+        <Transition name="fade" mode="out-in" :duration="{ enter: 100, leave: 100 }">
+            <div v-if="isEditing" class="fixed right-6 bottom-6 group" @mouseover="isShowing = true" @mouseleave="isShowing = false">
+                <div class="flex flex-col items-center mb-4 space-y-2" :class="{ hidden: !isShowing }">
+                    <button @click="resetLocalDashboard" type="button" class="relative w-14 h-14 text-gray-500 bg-white rounded border border-gray-200 hover:text-gray-900 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600">
+                        <i class="fas fa-trash-alt"></i>
+                        <span class="absolute block mb-px text-sm font-medium -translate-y-1/2 -left-[110px] top-1/2">
+                            {{ __("Reset Layout") }}
+                        </span>
+                    </button>
+                </div>
+                <FormKit type="button" :classes="{ input: '!w-14 !h-14' }">
+                    <i class="fas fa-plus text-xl transition-transform group-hover:rotate-45"></i>
+                </FormKit>
+            </div>
+        </Transition>
+    </div>
 </template>
 
 <script lang="ts">

frontend/src/components/Dashboard/Widget.vue

@@ -1,8 +1,8 @@
 <template>
     <div :ref="localData.id" :id="localData.id" :gs-id="localData.id" :gs-x="localData.grid.x" :gs-y="localData.grid.y" :gs-w="localData.grid.w" :gs-h="localData.grid.h">
         <div class="grid-stack-item-content group border dark:border-gray-700 relative p-4 text-gray-900 dark:text-gray-200 bg-white dark:bg-gray-800 highlight-white/5 rounded shadow-md flex items-center justify-center" :class="{ 'cursor-move': isEditing }">
-            <component :is="component" :data="data" :is-editing="isEditing" />
-            <DeleteButton v-if="isEditing" class="hidden group-hover:block absolute top-2 right-2" @click="deleteWidget(localData.id)" />
+            <component v-if="component" :is="component" :data="data" :isEditing="isEditing" :class="{ 'group-hover:!opacity-100': isEditing }" />
+            <DeleteButton v-if="isEditing" class="opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out absolute top-2 right-2" @click="deleteWidget(localData.id)" />
         </div>
     </div>
 </template>

frontend/src/formkit.config.ts

@@ -6,36 +6,33 @@ import { createInput } from "@formkit/vue";
 import type { DefaultConfigOptions } from "@formkit/vue";
 
 import formkitTheme from "./formkit.theme";
-import formkitLabel from "./plugins/formkitLabel";
-
 import OneTimePassword from "./components/FormKit/OneTimePassword.vue";
-import OptionalInput from "./components/FormKit/OptionalInput.vue";
+
+const iconLoader = (icon: string) => {
+    const parent = document.createElement("div");
+    parent.classList.add("absolute", "inset-y-0", "left-0", "flex", "items-center", "pl-3.5", "pointer-events-none");
+    const i = document.createElement("i");
+    i.classList.add("fas", icon, "text-gray-400");
+    parent.appendChild(i);
+    return parent.innerHTML;
+};
 
 const pro = createProPlugin("fk-80a76bd3e4", inputs);
+
 const config: DefaultConfigOptions = {
     icons: {
         ...genesisIcons,
     },
-    iconLoader(icon: string) {
-        const parent = document.createElement("div");
-        parent.classList.add("absolute", "inset-y-0", "left-0", "flex", "items-center", "pl-3.5", "pointer-events-none");
-        const i = document.createElement("i");
-        i.classList.add("fas", icon, "text-gray-400");
-        parent.appendChild(i);
-        return parent.innerHTML;
-    },
+    iconLoader,
     // @ts-ignore
-    plugins: [pro, formkitLabel],
+    plugins: [pro],
     config: {
         classes: generateClasses(formkitTheme),
     },
     inputs: {
         otp: createInput(OneTimePassword, {
             props: ["digits"],
         }),
-        optionalInput: createInput(OptionalInput, {
-            type: "input",
-        }),
     },
 };
 

frontend/src/views/AdminViews/HomeView.vue → frontend/src/modules/admin/pages/Home.vue

@@ -35,7 +35,7 @@ export default defineComponent({
     },
     computed: {
         buttonClasses(): string {
-            return this.isEditing ? `!px-4 !py-2 !bg-primary` : `!px-4 !py-2 !bg-secondary`;
+            return this.isEditing ? `!bg-primary` : `!bg-secondary`;
         },
         ...mapState(useThemeStore, ["boxView"]),
     },

frontend/src/modules/admin/router/children.ts

@@ -0,0 +1,26 @@
+import type { RouteRecordRaw } from "vue-router";
+
+const children: RouteRecordRaw[] = [
+    {
+        path: "",
+        name: "admin-home",
+        component: () => import("../pages/Home.vue"),
+    },
+    {
+        path: "invitations",
+        name: "admin-invitations",
+        component: () => import("../pages/Invitations.vue"),
+    },
+    {
+        path: "users",
+        name: "admin-users",
+        component: () => import("../pages/Users.vue"),
+    },
+    {
+        path: "flow-editor",
+        name: "admin-flow-editor",
+        component: () => import("../pages/FlowEditor.vue"),
+    },
+];
+
+export default children;

frontend/src/modules/admin/router/index.ts

@@ -0,0 +1,18 @@
+import requireAuth from "@/router/middleware/requireAuth";
+import children from "./children";
+import type { RouteRecordRaw } from "vue-router";
+
+const routes: Readonly<RouteRecordRaw[]> = [
+    {
+        path: "/admin",
+        name: "admin",
+        redirect: { name: "admin-home" },
+        component: () => import("../views/Admin.vue"),
+        meta: {
+            middleware: [requireAuth],
+        },
+        children: children,
+    },
+];
+
+export default routes;

frontend/src/views/LoginViews/PasswordView.vue → frontend/src/modules/authentication/components/PasswordForm.vue

@@ -27,7 +27,7 @@ import DefaultInput from "@/components/Inputs/DefaultInput.vue";
 import DefaultButton from "@/components/Buttons/DefaultButton.vue";
 
 export default defineComponent({
-    name: "LoginForm",
+    name: "PasswordForm",
     components: {
         DefaultInput,
         DefaultButton,

frontend/src/modules/authentication/router/index.ts

@@ -0,0 +1,15 @@
+import type { RouteRecordRaw } from "vue-router";
+import requireNoAuth from "@/router/middleware/requireNoAuth";
+
+const routes: Readonly<RouteRecordRaw[]> = [
+    {
+        path: "/login",
+        name: "login",
+        component: () => import("../views/LoginView.vue"),
+        meta: {
+            middleware: [requireNoAuth],
+        },
+    },
+];
+
+export default routes;

frontend/src/views/LoginViews/LoginView.vue → frontend/src/modules/authentication/views/LoginView.vue

@@ -12,13 +12,13 @@
                             <DefaultLoading key="loading-screen" />
                         </div>
                         <div v-else-if="step == 1">
-                            <UsernameView @submit="submitUsername" v-model:username="username" key="username-form" />
+                            <UsernameForm @submit="submitUsername" v-model:username="username" key="username-form" />
                         </div>
                         <div v-else-if="step == 2">
-                            <MFAView @mfaLogin="mfaLogin" @passwordLogin="step = 3" key="mfa-form" />
+                            <PasskeyForm @mfaLogin="mfaLogin" @passwordLogin="step = 3" key="mfa-form" />
                         </div>
                         <div v-else-if="step == 3">
-                            <PasswordView @passwordLogin="passwordLogin" @mfaLogin="step = 2" :hideMFA="hideMFA" v-model:username="username" v-model:password="password" key="login-form" />
+                            <PasswordForm @passwordLogin="passwordLogin" @mfaLogin="step = 2" :hideMFA="hideMFA" v-model:username="username" v-model:password="password" key="login-form" />
                         </div>
                     </transition>
                 </div>
@@ -33,9 +33,9 @@ import { defineComponent } from "vue";
 import DefaultNavBar from "@/components/NavBars/DefaultNavBar.vue";
 import DefaultLoading from "@/components/Loading/DefaultLoading.vue";
 
-import UsernameView from "./UsernameView.vue";
-import MFAView from "./MFAView.vue";
-import PasswordView from "./PasswordView.vue";
+import UsernameForm from "../components/UsernameForm.vue";
+import PasskeyForm from "../components/PasskeyForm.vue";
+import PasswordForm from "../components/PasswordForm.vue";
 
 import Auth from "@/api/authentication";
 
@@ -51,9 +51,9 @@ export default defineComponent({
     components: {
         DefaultNavBar,
         DefaultLoading,
-        UsernameView,
-        MFAView,
-        PasswordView,
+        UsernameForm,
+        PasskeyForm,
+        PasswordForm,
     },
     data() {
         return {

frontend/src/modules/core/router/index.ts

@@ -0,0 +1,11 @@
+import type { RouteRecordRaw } from "vue-router";
+
+const routes: Readonly<RouteRecordRaw[]> = [
+    {
+        path: "/:pathMatch(.*)*",
+        name: "not-found",
+        component: () => import("../views/NotFound.vue"),
+    },
+];
+
+export default routes;

frontend/src/views/DefaultViews/NotFoundView.vue → frontend/src/modules/core/views/NotFound.vue

@@ -41,8 +41,5 @@ export default defineComponent({
     computed: {
         ...mapActions(useAuthStore, ["isAuthenticated"]),
     },
-    mounted() {
-        console.log(this.isAuthenticated);
-    },
 });
 </script>

frontend/src/modules/help/components/Download.vue

@@ -0,0 +1,21 @@
+<template>
+    <PlexDownload v-bind="$props" v-if="settings.server_type == 'plex'" @height="$emit('height')" />
+    <JellyfinDownload v-bind="$props" v-else-if="settings.server_type == 'jellyfin'" @height="$emit('height')" />
+</template>
+
+<script lang="ts">
+import { mapState } from "pinia";
+import { defineComponent, defineAsyncComponent } from "vue";
+import { useServerStore } from "@/stores/server";
+
+export default defineComponent({
+    name: "Download",
+    components: {
+        PlexDownload: defineAsyncComponent(() => import("./Plex/Download.vue")),
+        JellyfinDownload: defineAsyncComponent(() => import("./Jellyfin/Download.vue")),
+    },
+    computed: {
+        ...mapState(useServerStore, ["settings"]),
+    },
+});
+</script>

frontend/src/views/HelpViews/JellyfinViews/WelcomeView.vue → frontend/src/modules/help/components/Jellyfin/Welcome.vue

@@ -11,6 +11,9 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-    name: "JellyfinWelcomeView",
+    name: "Welcome",
+    mounted() {
+        this.$emit("height");
+    },
 });
 </script>

frontend/src/views/HelpViews/PlexViews/WelcomeView.vue → frontend/src/modules/help/components/Plex/Welcome.vue

@@ -12,3 +12,14 @@
         </p>
     </div>
 </template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    name: "Welcome",
+    mounted() {
+        this.$emit("height");
+    },
+});
+</script>

frontend/src/modules/help/components/Welcome.vue

@@ -0,0 +1,21 @@
+<template>
+    <PlexWelcome v-bind="$props" v-if="settings.server_type == 'plex'" @height="$emit('height')" />
+    <JellyfinWelcome v-bind="$props" v-else-if="settings.server_type == 'jellyfin'" @height="$emit('height')" />
+</template>
+
+<script lang="ts">
+import { mapState } from "pinia";
+import { defineComponent, defineAsyncComponent } from "vue";
+import { useServerStore } from "@/stores/server";
+
+export default defineComponent({
+    name: "Welcome",
+    components: {
+        PlexWelcome: defineAsyncComponent(() => import("./Plex/Welcome.vue")),
+        JellyfinWelcome: defineAsyncComponent(() => import("./Jellyfin/Welcome.vue")),
+    },
+    computed: {
+        ...mapState(useServerStore, ["settings"]),
+    },
+});
+</script>

frontend/src/modules/help/router/index.ts

@@ -0,0 +1,20 @@
+import openServer from "@/router/middleware/openServer";
+import type { RouteRecordRaw } from "vue-router";
+
+const routes: Readonly<RouteRecordRaw[]> = [
+    {
+        path: "/help",
+        name: "help",
+        component: () => import("../views/Help.vue"),
+    },
+    {
+        path: "/open",
+        name: "open",
+        component: () => "",
+        meta: {
+            middleware: [openServer],
+        },
+    },
+];
+
+export default routes;

frontend/src/views/HelpViews/HelpView.vue → frontend/src/modules/help/views/Help.vue

@@ -22,14 +22,12 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-// import { mapState } from "pinia";
-// import { useServerStore } from "@/stores/server";
 
 import Carousel from "@/components/Carousel.vue";
 import WizarrLogo from "@/components/WizarrLogo.vue";
 
-import WelcomeView from "./WelcomeView.vue";
-import DownloadView from "./DownloadView.vue";
+import Welcome from "../components/Welcome.vue";
+import Download from "../components/Download.vue";
 
 export default defineComponent({
     name: "HelpView",
@@ -43,11 +41,11 @@ export default defineComponent({
             views: [
                 {
                     name: "welcome",
-                    view: WelcomeView,
+                    view: Welcome,
                 },
                 {
                     name: "download",
-                    view: DownloadView,
+                    view: Download,
                 },
             ],
         };

frontend/src/modules/home/router/index.ts

@@ -0,0 +1,11 @@
+import type { RouteRecordRaw } from "vue-router";
+
+const routes: Readonly<RouteRecordRaw[]> = [
+    {
+        path: "/",
+        name: "home",
+        component: () => import("../views/Home.vue"),
+    },
+];
+
+export default routes;

frontend/src/views/DefaultViews/HomeView.vue → frontend/src/modules/home/views/Home.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, h } from "vue";
+import { defineComponent } from "vue";
 import { useAuthStore } from "@/stores/auth";
 import { mapActions } from "pinia";
 

frontend/src/views/JoinViews/ErrorView.vue → frontend/src/modules/join/components/Error.vue

@@ -9,7 +9,7 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-    name: "JoinError",
+    name: "Error",
     props: {
         title: {
             type: String,