From 9c6ea387984dcfa750842c7ad578b3835f43c1f9 Mon Sep 17 00:00:00 2001
From: Jam <1347620+JamsRepos@users.noreply.github.com>
Date: Mon, 29 Apr 2024 20:09:24 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Replaced=20the=20default=20?=
 =?UTF-8?q?homepage=20with=20the=20invite=20interface?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/NavBars/DefaultNavBar.vue  |  18 +-
 .../admin/components/Forms/InvitationForm.vue |   2 +-
 .../InvitationManager/Invitation.vue          |   2 +-
 .../InvitationList/InvitationItem.vue         |   4 +-
 .../components/Invitations/ShareSheet.vue     |   4 +-
 .../components/Users/UserManager/User.vue     |   2 +-
 .../src/modules/{join => home}/events.ts      |   0
 .../modules/{join => home}/pages/Complete.vue |   4 +-
 .../{join => home}/pages/Emby/Signup.vue      |   0
 .../modules/{join => home}/pages/Error.vue    |   0
 .../{join => home}/pages/Jellyfin/Signup.vue  |   0
 .../modules/{join => home}/pages/JoinForm.vue |   6 +-
 .../modules/{join => home}/pages/Payment.vue  |   0
 .../{join => home}/pages/Plex/Signup.vue      |   0
 .../modules/{join => home}/pages/Signup.vue   |   0
 .../modules/{join => home}/pages/Stepper.vue  |   0
 .../src/modules/home/router/index.ts          |  16 +
 .../modules/{join => home}/types/EmbyForm.ts  |   0
 .../{join => home}/types/EventRecords.ts      |   0
 .../{join => home}/types/JellyfinForm.ts      |   0
 .../src/modules/home/views/Home.vue           | 333 ++++++++++++++++--
 .../src/modules/join/router/index.ts          |  16 -
 .../src/modules/join/views/Join.vue           | 327 -----------------
 apps/wizarr-frontend/src/router/index.ts      |   4 +-
 apps/wizarr-frontend/tailwind.config.js       |   5 -
 docs/getting-started/reverse-proxy.md         |   4 +-
 26 files changed, 351 insertions(+), 396 deletions(-)
 rename apps/wizarr-frontend/src/modules/{join => home}/events.ts (100%)
 rename apps/wizarr-frontend/src/modules/{join => home}/pages/Complete.vue (93%)
 rename apps/wizarr-frontend/src/modules/{join => home}/pages/Emby/Signup.vue (100%)
 rename apps/wizarr-frontend/src/modules/{join => home}/pages/Error.vue (100%)
 rename apps/wizarr-frontend/src/modules/{join => home}/pages/Jellyfin/Signup.vue (100%)
 rename apps/wizarr-frontend/src/modules/{join => home}/pages/JoinForm.vue (88%)
 rename apps/wizarr-frontend/src/modules/{join => home}/pages/Payment.vue (100%)
 rename apps/wizarr-frontend/src/modules/{join => home}/pages/Plex/Signup.vue (100%)
 rename apps/wizarr-frontend/src/modules/{join => home}/pages/Signup.vue (100%)
 rename apps/wizarr-frontend/src/modules/{join => home}/pages/Stepper.vue (100%)
 rename apps/wizarr-frontend/src/modules/{join => home}/types/EmbyForm.ts (100%)
 rename apps/wizarr-frontend/src/modules/{join => home}/types/EventRecords.ts (100%)
 rename apps/wizarr-frontend/src/modules/{join => home}/types/JellyfinForm.ts (100%)
 delete mode 100644 apps/wizarr-frontend/src/modules/join/router/index.ts
 delete mode 100644 apps/wizarr-frontend/src/modules/join/views/Join.vue

diff --git a/apps/wizarr-frontend/src/components/NavBars/DefaultNavBar.vue b/apps/wizarr-frontend/src/components/NavBars/DefaultNavBar.vue
index 762227ff3..3bdbf9ded 100644
--- a/apps/wizarr-frontend/src/components/NavBars/DefaultNavBar.vue
+++ b/apps/wizarr-frontend/src/components/NavBars/DefaultNavBar.vue
@@ -1,9 +1,14 @@
 <template>
-    <nav class="bg-white dark:bg-gray-900 absolute w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600">
+    <nav class="bg-white dark:bg-gray-900 relative w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600">
+        <div class="flex flex-row-reverse flex-column fixed right-0 m-3">
+            <LanguageSelector iconClasses="text-base h-6 w-6" />
+            <ThemeToggle iconClasses="text-base h-6 w-6" />
+        </div>
+
         <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
             <router-link to="/" class="flex items-center">
                 <WizarrLogo class="mr-3" rounded />
-                <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Wizarr</span>
+                <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">{{ settings.server_name }}</span>
             </router-link>
             <div class="flex md:order-2">
                 <DefaultButton :to="buttonLink" size="sm">
@@ -15,16 +20,22 @@
 </template>
 
 <script lang="ts">
+import { mapState } from 'pinia';
 import { defineComponent } from "vue";
+import { useServerStore } from '@/stores/server';
 import { RouterLink } from "vue-router";
 
 import WizarrLogo from "../WizarrLogo.vue";
+import LanguageSelector from '@/components/Buttons/LanguageSelector.vue';
+import ThemeToggle from '@/components/Buttons/ThemeToggle.vue';
 import DefaultButton from "@/components/Buttons/DefaultButton.vue";
 
 export default defineComponent({
     name: "DefaultNavBar",
     components: {
         WizarrLogo,
+        LanguageSelector,
+        ThemeToggle,
         RouterLink,
         DefaultButton,
     },
@@ -42,5 +53,8 @@ export default defineComponent({
             default: "/",
         },
     },
+    computed: {
+        ...mapState(useServerStore, ['settings']),
+    },
 });
 </script>
diff --git a/apps/wizarr-frontend/src/modules/admin/components/Forms/InvitationForm.vue b/apps/wizarr-frontend/src/modules/admin/components/Forms/InvitationForm.vue
index c384e1285..4c61e2f9c 100644
--- a/apps/wizarr-frontend/src/modules/admin/components/Forms/InvitationForm.vue
+++ b/apps/wizarr-frontend/src/modules/admin/components/Forms/InvitationForm.vue
@@ -377,7 +377,7 @@ export default defineComponent({
             });
         },
         inviteLink() {
-            return `${window.location.origin}/j/${this.inviteCode}`;
+            return `${window.location.origin}/i/${this.inviteCode}`;
         },
         ...mapState(useLibrariesStore, ["libraries"]),
         ...mapState(useServerStore, ["settings"]),
diff --git a/apps/wizarr-frontend/src/modules/admin/components/InvitationManager/Invitation.vue b/apps/wizarr-frontend/src/modules/admin/components/InvitationManager/Invitation.vue
index ec6e4bdf0..5a18e2abb 100644
--- a/apps/wizarr-frontend/src/modules/admin/components/InvitationManager/Invitation.vue
+++ b/apps/wizarr-frontend/src/modules/admin/components/InvitationManager/Invitation.vue
@@ -91,7 +91,7 @@ export default defineComponent({
                     active: true,
                 },
                 {
-                    value: `${window.location.origin}/j/${this.invitation.code}`,
+                    value: `${window.location.origin}/i/${this.invitation.code}`,
                     active: false,
                 },
             ],
diff --git a/apps/wizarr-frontend/src/modules/admin/components/Invitations/InvitationList/InvitationItem.vue b/apps/wizarr-frontend/src/modules/admin/components/Invitations/InvitationList/InvitationItem.vue
index 337eeefb1..de8df986e 100644
--- a/apps/wizarr-frontend/src/modules/admin/components/Invitations/InvitationList/InvitationItem.vue
+++ b/apps/wizarr-frontend/src/modules/admin/components/Invitations/InvitationList/InvitationItem.vue
@@ -105,7 +105,7 @@ export default defineComponent({
                 text: this.__(
                     'I wanted to invite you to join my media server.',
                 ),
-                url: `${window.location.origin}/j/${this.invite.code}`,
+                url: `${window.location.origin}/i/${this.invite.code}`,
             },
         };
     },
@@ -138,7 +138,7 @@ export default defineComponent({
         async copyToClipboard() {
             if (this.clipboard.isSupported) {
                 this.clipboard.copy(
-                    `${window.location.origin}/j/${this.invite.code}`,
+                    `${window.location.origin}/i/${this.invite.code}`,
                 );
                 this.$toast.info(this.__('Copied to clipboard'));
             } else {
diff --git a/apps/wizarr-frontend/src/modules/admin/components/Invitations/ShareSheet.vue b/apps/wizarr-frontend/src/modules/admin/components/Invitations/ShareSheet.vue
index 1e680e258..ee244c74c 100644
--- a/apps/wizarr-frontend/src/modules/admin/components/Invitations/ShareSheet.vue
+++ b/apps/wizarr-frontend/src/modules/admin/components/Invitations/ShareSheet.vue
@@ -66,9 +66,9 @@ export default defineComponent({
     },
     data() {
         return {
-            invitationLink: `${window.location.origin}/j/${this.code}`,
+            invitationLink: `${window.location.origin}/i/${this.code}`,
             QRcode: useQRCode(
-                `${window.location.origin}/j/${this.code}`,
+                `${window.location.origin}/i/${this.code}`,
                 this.qrCodeOptions,
             ),
             clipboard: useClipboard({
diff --git a/apps/wizarr-frontend/src/modules/admin/components/Users/UserManager/User.vue b/apps/wizarr-frontend/src/modules/admin/components/Users/UserManager/User.vue
index caf17377a..a7680b7bb 100644
--- a/apps/wizarr-frontend/src/modules/admin/components/Users/UserManager/User.vue
+++ b/apps/wizarr-frontend/src/modules/admin/components/Users/UserManager/User.vue
@@ -100,7 +100,7 @@ export default defineComponent({
                     active: true,
                 },
                 {
-                    value: `${window.location.origin}/j/${this.user.code}`,
+                    value: `${window.location.origin}/i/${this.user.code}`,
                     active: false,
                 },
             ],
diff --git a/apps/wizarr-frontend/src/modules/join/events.ts b/apps/wizarr-frontend/src/modules/home/events.ts
similarity index 100%
rename from apps/wizarr-frontend/src/modules/join/events.ts
rename to apps/wizarr-frontend/src/modules/home/events.ts
diff --git a/apps/wizarr-frontend/src/modules/join/pages/Complete.vue b/apps/wizarr-frontend/src/modules/home/pages/Complete.vue
similarity index 93%
rename from apps/wizarr-frontend/src/modules/join/pages/Complete.vue
rename to apps/wizarr-frontend/src/modules/home/pages/Complete.vue
index 389343fff..8b5d48db2 100644
--- a/apps/wizarr-frontend/src/modules/join/pages/Complete.vue
+++ b/apps/wizarr-frontend/src/modules/home/pages/Complete.vue
@@ -29,12 +29,12 @@ import { defineComponent } from 'vue';
 import { useServerStore } from '@/stores/server';
 
 export default defineComponent({
-    name: 'JoinCompleteView',
+    name: 'CompleteView',
     computed: {
         ...mapState(useServerStore, ['settings']),
     },
     mounted() {
-        console.log('mounted join complete view');
+        console.log('mounted complete view');
     },
 });
 </script>
diff --git a/apps/wizarr-frontend/src/modules/join/pages/Emby/Signup.vue b/apps/wizarr-frontend/src/modules/home/pages/Emby/Signup.vue
similarity index 100%
rename from apps/wizarr-frontend/src/modules/join/pages/Emby/Signup.vue
rename to apps/wizarr-frontend/src/modules/home/pages/Emby/Signup.vue
diff --git a/apps/wizarr-frontend/src/modules/join/pages/Error.vue b/apps/wizarr-frontend/src/modules/home/pages/Error.vue
similarity index 100%
rename from apps/wizarr-frontend/src/modules/join/pages/Error.vue
rename to apps/wizarr-frontend/src/modules/home/pages/Error.vue
diff --git a/apps/wizarr-frontend/src/modules/join/pages/Jellyfin/Signup.vue b/apps/wizarr-frontend/src/modules/home/pages/Jellyfin/Signup.vue
similarity index 100%
rename from apps/wizarr-frontend/src/modules/join/pages/Jellyfin/Signup.vue
rename to apps/wizarr-frontend/src/modules/home/pages/Jellyfin/Signup.vue
diff --git a/apps/wizarr-frontend/src/modules/join/pages/JoinForm.vue b/apps/wizarr-frontend/src/modules/home/pages/JoinForm.vue
similarity index 88%
rename from apps/wizarr-frontend/src/modules/join/pages/JoinForm.vue
rename to apps/wizarr-frontend/src/modules/home/pages/JoinForm.vue
index ecd0a1876..0ea3933d0 100644
--- a/apps/wizarr-frontend/src/modules/join/pages/JoinForm.vue
+++ b/apps/wizarr-frontend/src/modules/home/pages/JoinForm.vue
@@ -54,9 +54,9 @@ export default defineComponent({
             // Check if the code is valid
             if (!response) return;
 
-            // If the route is /join then change to /j/:code
-            if (this.$route.path === '/join') {
-                this.$router.replace(`/j/${this.code}`);
+            // If the route is /, /join, or /j, change to /i/:code
+            if (this.$route.path === '/' || this.$route.path === '/join' || this.$route.path === '/j') {
+                this.$router.replace(`/i/${this.code}`);
             }
 
             // Go to the next step
diff --git a/apps/wizarr-frontend/src/modules/join/pages/Payment.vue b/apps/wizarr-frontend/src/modules/home/pages/Payment.vue
similarity index 100%
rename from apps/wizarr-frontend/src/modules/join/pages/Payment.vue
rename to apps/wizarr-frontend/src/modules/home/pages/Payment.vue
diff --git a/apps/wizarr-frontend/src/modules/join/pages/Plex/Signup.vue b/apps/wizarr-frontend/src/modules/home/pages/Plex/Signup.vue
similarity index 100%
rename from apps/wizarr-frontend/src/modules/join/pages/Plex/Signup.vue
rename to apps/wizarr-frontend/src/modules/home/pages/Plex/Signup.vue
diff --git a/apps/wizarr-frontend/src/modules/join/pages/Signup.vue b/apps/wizarr-frontend/src/modules/home/pages/Signup.vue
similarity index 100%
rename from apps/wizarr-frontend/src/modules/join/pages/Signup.vue
rename to apps/wizarr-frontend/src/modules/home/pages/Signup.vue
diff --git a/apps/wizarr-frontend/src/modules/join/pages/Stepper.vue b/apps/wizarr-frontend/src/modules/home/pages/Stepper.vue
similarity index 100%
rename from apps/wizarr-frontend/src/modules/join/pages/Stepper.vue
rename to apps/wizarr-frontend/src/modules/home/pages/Stepper.vue
diff --git a/apps/wizarr-frontend/src/modules/home/router/index.ts b/apps/wizarr-frontend/src/modules/home/router/index.ts
index 2e983aed2..cb201995e 100644
--- a/apps/wizarr-frontend/src/modules/home/router/index.ts
+++ b/apps/wizarr-frontend/src/modules/home/router/index.ts
@@ -1,11 +1,27 @@
 import type { RouteRecordRaw } from 'vue-router';
 
 const routes: Readonly<RouteRecordRaw[]> = [
+    {
+        path: '/i/:invite',
+        name: 'invite',
+        component: () => import('../views/Home.vue'),
+    },
     {
         path: '/',
         name: 'home',
         component: () => import('../views/Home.vue'),
     },
+    // TODO: Remove this route after a few versions to allow users to get used to the new route
+    {
+        path: '/j/:invite',
+        name: 'invite',
+        component: () => import('../views/Home.vue'),
+    },
+    {
+        path: '/join',
+        name: 'home',
+        component: () => import('../views/Home.vue'),
+    },
 ];
 
 export default routes;
diff --git a/apps/wizarr-frontend/src/modules/join/types/EmbyForm.ts b/apps/wizarr-frontend/src/modules/home/types/EmbyForm.ts
similarity index 100%
rename from apps/wizarr-frontend/src/modules/join/types/EmbyForm.ts
rename to apps/wizarr-frontend/src/modules/home/types/EmbyForm.ts
diff --git a/apps/wizarr-frontend/src/modules/join/types/EventRecords.ts b/apps/wizarr-frontend/src/modules/home/types/EventRecords.ts
similarity index 100%
rename from apps/wizarr-frontend/src/modules/join/types/EventRecords.ts
rename to apps/wizarr-frontend/src/modules/home/types/EventRecords.ts
diff --git a/apps/wizarr-frontend/src/modules/join/types/JellyfinForm.ts b/apps/wizarr-frontend/src/modules/home/types/JellyfinForm.ts
similarity index 100%
rename from apps/wizarr-frontend/src/modules/join/types/JellyfinForm.ts
rename to apps/wizarr-frontend/src/modules/home/types/JellyfinForm.ts
diff --git a/apps/wizarr-frontend/src/modules/home/views/Home.vue b/apps/wizarr-frontend/src/modules/home/views/Home.vue
index a962a3b3e..624ba34ba 100644
--- a/apps/wizarr-frontend/src/modules/home/views/Home.vue
+++ b/apps/wizarr-frontend/src/modules/home/views/Home.vue
@@ -1,50 +1,325 @@
 <template>
-    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto md:h-screen">
-        <!-- Nav Bar for Public Routes -->
-        <DefaultNavBar :button="isAuthenticated ? 'Dashboard' : 'Login'" :buttonLink="isAuthenticated ? '/admin' : '/login'" />
-
-        <!-- Hero Section -->
-        <section class="bg-gray-100 dark:bg-gray-900 px-2 md:px-4 lg:px-6 xl:px-8 mt-28 md:mt-0">
-            <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
-                <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">{{ __("Welcome to") }} Wizarr</h1>
-                <p class="mb-8 text-lg font-normal text-gray-500 sm:px-16 lg:px-48 dark:text-gray-400">
-                    {{ __("Wizarr is a software tool that provides advanced user invitation and management capabilities for media servers such as Jellyfin, Emby, and Plex. With Wizarr, server administrators can easily invite new users and manage their access.") }}
-                </p>
-
-                <p class="mb-8 text-sm font-bold text-gray-500 sm:px-16 lg:px-48 dark:text-gray-400">
-                    {{ __("If you were sent here by a friend, please request access. If you have an invite code, please click Get Started!") }}
-                </p>
-                <div class="flex flex-col space-y-2 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-3">
-                    <FormKit type="button" @click="$router.push('/join')" theme="primary" suffix-icon="fas fa-arrow-right">{{ __("Get Started") }}</FormKit>
-                    <span class="inline-flex items-center text-gray-500 dark:text-gray-400 justify-center"> or </span>
-                    <VTooltip>
-                        <FormKit type="button" :disabled="true" data-theme="transparent">{{ __("Request Access") }}</FormKit>
-                        <template #popper>
-                            <span>{{ __("Coming Soon") }}</span>
-                        </template>
-                    </VTooltip>
+    <DefaultNavBar :button="isAuthenticated ? 'Admin Dashboard' : 'Admin Login'" :buttonLink="isAuthenticated ? '/admin' : '/login'" />
+
+    <div>
+        <div
+            class="flex justify-center items-center flex-col mt-12 mb-3 space-y-6"
+        >
+            <WizarrLogo rounded class="w-[150px] h-[150px]" />
+            <h1
+                class="text-2xl font-semibold text-center text-gray-900 dark:text-white"
+            >
+                {{
+                    __('Welcome to %{server_name}!', {
+                        server_name: settings.server_name
+                    })
+                }}
+            </h1>
+        </div>
+        <section>
+            <div
+                class="flex flex-col items-center justify-center md:container py-8 mx-auto"
+            >
+                <div
+                    class="w-full md:w-1/2 lg:w-1/3 bg-white rounded shadow dark:border dark:bg-gray-800 dark:border-gray-700 overflow-hidden"
+                >
+                    <div class="relative">
+                        <Carousel
+                            :views="views"
+                            :currentView="currentView"
+                            :pageTitle="pageTitle"
+                            :pleaseWait="pleaseWait"
+                            :stepper="activeStep"
+                        />
+                    </div>
                 </div>
             </div>
         </section>
+        <div class="flex justify-center items-center flex-col mb-3 space-y-6">
+            <p class="text-sm text-center text-gray-900 dark:text-white">
+                {{ __('Made with ❤️ by') }}
+                <a
+                    class="text-primary font-bold hover:underline"
+                    target="_blank"
+                    href="https://github.com/wizarrrr/wizarr"
+                >
+                    Wizarr
+                </a>
+            </p>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { mapActions, mapState } from 'pinia';
+import { defineComponent } from 'vue';
 import { useAuthStore } from "@/stores/auth";
-import { mapActions } from "pinia";
+import { useServerStore } from '@/stores/server';
+import { Collapse } from 'vue-collapsed';
+
+import Carousel from '../../core/components/Carousel.vue';
+import WizarrLogo from '@/components/WizarrLogo.vue';
 
 import DefaultNavBar from "@/components/NavBars/DefaultNavBar.vue";
-import DefaultButton from "@/components/Buttons/DefaultButton.vue";
+
+import eventBus from '../events';
+
+import type { Socket } from 'socket.io-client';
+import type {
+    ServerToClientEvents,
+    ClientToServerEvents,
+} from '@/plugins/socket';
+import type { EventRecords } from '../types/EventRecords';
 
 export default defineComponent({
-    name: "HomeView",
+    name: 'HomeView',
     components: {
         DefaultNavBar,
-        DefaultButton,
+        WizarrLogo,
+        Carousel,
+        Collapse,
+    },
+    data() {
+        return {
+            socket: null as Socket<
+                ServerToClientEvents,
+                ClientToServerEvents
+            > | null,
+            eventBus: eventBus,
+            pleaseWait: true,
+            pageTitle: '',
+            currentView: 1,
+            activeStep: 0,
+            views: [
+                {
+                    name: 'join',
+                    title: this.__('Please enter your invite code:'),
+                    component: () => import('../pages/JoinForm.vue'),
+                },
+                // {
+                //     name: "payment",
+                //     title: this.__("Make Payment"),
+                //     component: () => import("../pages/Payment.vue"),
+                //     props: {
+                //         eventBus: eventBus,
+                //         code: this.$route.params.invite as string,
+                //     },
+                // },
+                {
+                    name: 'create',
+                    title: this.__('Setup your account'),
+                    component: () => import('../pages/Signup.vue'),
+                    props: {
+                        eventBus: eventBus,
+                    },
+                },
+                {
+                    name: 'stepper',
+                    title: this.__('Please wait...'),
+                    component: () => import('../pages/Stepper.vue'),
+                    props: {
+                        eventBus: eventBus,
+                    },
+                },
+                {
+                    name: 'success',
+                    title: this.__('All done!'),
+                    component: () => import('../pages/Complete.vue'),
+                },
+                {
+                    name: 'error',
+                    component: () => import('../pages/Error.vue'),
+                    props: {
+                        title: this.__('Uh oh!'),
+                        message: this.__(
+                            'Something went wrong while trying to join the server. Please try again later.',
+                        ),
+                    },
+                },
+            ],
+        };
     },
     computed: {
+        noHeader() {
+            return this.isView(['error']);
+        },
+        ...mapState(useServerStore, ['settings']),
         ...mapActions(useAuthStore, ["isAuthenticated"]),
     },
+    methods: {
+        isView(name: string | string[]) {
+            return Array.isArray(name)
+                ? name.includes(this.views[this.currentView - 1].name)
+                : this.views[this.currentView - 1].name == name;
+        },
+        async showError(title: string, message: string) {
+            // Hide the please wait screen
+            this.pleaseWait = false;
+
+            // Change the error screen props
+            this.views[this.currentView - 1].props = {
+                title: title,
+                message: message,
+            };
+
+            // Show the error screen
+            this.currentView =
+                this.views.findIndex((view) => view.name == 'error') + 1;
+        },
+        async connected() {
+            // Check for a socket id
+            if (this.socket?.id == undefined) {
+                this.showError(
+                    this.__('Uh oh!'),
+                    this.__('Could not connect to the server.'),
+                );
+            }
+
+            this.pleaseWait = false;
+        },
+        async plexCreateAccount(value: EventRecords['plexCreateAccount']) {
+            // Create the form data
+            const formData = new FormData();
+            formData.append('token', value);
+            formData.append('code', this.$route.params.invite as string);
+            formData.append('socket_id', this.socket?.id as string);
+
+            // Make API request to create the account
+            const response = await this.$axios
+                .post('/api/plex', formData)
+                .catch((err) => {
+                    this.showError(
+                        this.__('Uh oh!'),
+                        err.response?.data?.message ??
+                            this.__('Could not create the account.'),
+                    );
+                });
+
+            // Check that response contains a room
+            if (response?.data?.room == undefined) {
+                this.showError(
+                    this.__('Uh oh!'),
+                    this.__('Could not create the account.'),
+                );
+            }
+
+            // Show the next screen
+            this.currentView =
+                this.views.findIndex((view) => view.name == 'stepper') + 1;
+        },
+        async jellyfinCreateAccount(
+            value: EventRecords['jellyfinCreateAccount'],
+        ) {
+            // Create the form data
+            const formData = new FormData();
+            formData.append('username', value.username);
+            formData.append('email', value.email);
+            formData.append('password', value.password);
+            formData.append('code', this.$route.params.invite as string);
+            formData.append('socket_id', this.socket?.id as string);
+
+            // Make API request to create the account
+            const response = await this.$axios
+                .post('/api/jellyfin', formData)
+                .catch((err) => {
+                    this.showError(
+                        this.__('Uh oh!'),
+                        err.response?.data?.message ??
+                            this.__('Could not create the account.'),
+                    );
+                });
+
+            // Check that response contains a room
+            if (response?.data?.room == undefined) {
+                this.showError(
+                    this.__('Uh oh!'),
+                    this.__('Could not create the account.'),
+                );
+            }
+
+            // Show the next screen
+            this.currentView =
+                this.views.findIndex((view) => view.name == 'stepper') + 1;
+        },
+        async embyCreateAccount(
+            value: EventRecords['embyCreateAccount'],
+        ) {
+            // Create the form data
+            const formData = new FormData();
+            formData.append('username', value.username);
+            formData.append('email', value.email);
+            formData.append('password', value.password);
+            formData.append('code', this.$route.params.invite as string);
+            formData.append('socket_id', this.socket?.id as string);
+
+            // Make API request to create the account
+            const response = await this.$axios
+                .post('/api/emby', formData)
+                .catch((err) => {
+                    this.showError(
+                        this.__('Uh oh!'),
+                        err.response?.data?.message ??
+                            this.__('Could not create the account.'),
+                    );
+                });
+
+            // Check that response contains a room
+            if (response?.data?.room == undefined) {
+                this.showError(
+                    this.__('Uh oh!'),
+                    this.__('Could not create the account.'),
+                );
+            }
+
+            // Show the next screen
+            this.currentView =
+                this.views.findIndex((view) => view.name == 'stepper') + 1;
+        },
+    },
+    async mounted() {
+        // Initialize the socket connection
+        this.socket = this.$io('/' + this.settings.server_type);
+        this.socket.on('connect', () => this.connected());
+        this.socket.on('connect_error', () =>
+            this.showError(
+                this.__('Uh oh!'),
+                this.__('Could not connect to the server.'),
+            ),
+        );
+        this.socket.on('error', (message) =>
+            this.showError(this.__('Uh oh!'), message),
+        );
+        this.socket.on('error', this.$toast.error);
+        this.socket.on('log', (message) => console.error(message));
+        this.socket.on('message', this.$toast.info);
+        this.socket.on('step', (step: number) => (this.activeStep = step));
+        this.socket.on('done', () =>
+            setTimeout(
+                () =>
+                    (this.currentView =
+                        this.views.findIndex((view) => view.name == 'success') +
+                        1),
+                1000,
+            ),
+        );
+
+        // Initialize the event bus
+        this.eventBus.on('plexCreateAccount', this.plexCreateAccount);
+        this.eventBus.on('jellyfinCreateAccount', this.jellyfinCreateAccount);
+        this.eventBus.on('embyCreateAccount', this.embyCreateAccount);
+
+        this.eventBus.on(
+            'pleaseWait',
+            (pleaseWait) => (this.pleaseWait = pleaseWait),
+        );
+        this.eventBus.on('pageTitle', (title) => (this.pageTitle = title));
+    },
+    async beforeUnmount() {
+        // Disconnect the socket
+        this.socket?.disconnect();
+
+        // Remove the event bus listeners
+        this.eventBus.off('*');
+    },
 });
 </script>
diff --git a/apps/wizarr-frontend/src/modules/join/router/index.ts b/apps/wizarr-frontend/src/modules/join/router/index.ts
deleted file mode 100644
index e7dbd5d03..000000000
--- a/apps/wizarr-frontend/src/modules/join/router/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-const routes: Readonly<RouteRecordRaw[]> = [
-    {
-        path: '/j/:invite',
-        name: 'join-invite',
-        component: () => import('../views/Join.vue'),
-    },
-    {
-        path: '/join',
-        name: 'join',
-        component: () => import('../views/Join.vue'),
-    },
-];
-
-export default routes;
diff --git a/apps/wizarr-frontend/src/modules/join/views/Join.vue b/apps/wizarr-frontend/src/modules/join/views/Join.vue
deleted file mode 100644
index df51f56bb..000000000
--- a/apps/wizarr-frontend/src/modules/join/views/Join.vue
+++ /dev/null
@@ -1,327 +0,0 @@
-<template>
-    <div class="flex flex-row-reverse flex-column m-3">
-        <LanguageSelector iconClasses="text-base h-8 w-8" />
-        <ThemeToggle iconClasses="text-base h-6 w-6" />
-    </div>
-
-    <div>
-        <div
-            class="flex justify-center items-center flex-col mt-12 mb-3 space-y-6"
-        >
-            <WizarrLogo rounded class="w-[150px] h-[150px]" />
-            <h1
-                class="text-2xl font-semibold text-center text-gray-900 dark:text-white"
-            >
-                {{
-                    __('Type in your invite code for %{server_name}!', {
-                        server_name: settings.server_name
-                    })
-                }}
-            </h1>
-        </div>
-        <section>
-            <div
-                class="flex flex-col items-center justify-center md:container py-8 mx-auto"
-            >
-                <div
-                    class="w-full md:w-1/2 lg:w-1/3 bg-white rounded shadow dark:border dark:bg-gray-800 dark:border-gray-700 overflow-hidden"
-                >
-                    <div class="relative">
-                        <Carousel
-                            :views="views"
-                            :currentView="currentView"
-                            :pageTitle="pageTitle"
-                            :pleaseWait="pleaseWait"
-                            :stepper="activeStep"
-                        />
-                    </div>
-                </div>
-            </div>
-        </section>
-        <div class="flex justify-center items-center flex-col mb-3 space-y-6">
-            <p class="text-sm text-center text-gray-900 dark:text-white">
-                {{ __('Made by ') }}
-                <a
-                    class="text-primary font-bold hover:underline"
-                    target="_blank"
-                    href="https://github.com/wizarrrr/wizarr"
-                    >Wizarr</a
-                >
-            </p>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
-import { useServerStore } from '@/stores/server';
-import { Collapse } from 'vue-collapsed';
-
-import Carousel from '../../core/components/Carousel.vue';
-import WizarrLogo from '@/components/WizarrLogo.vue';
-
-import LanguageSelector from '@/components/Buttons/LanguageSelector.vue';
-import ThemeToggle from '@/components/Buttons/ThemeToggle.vue';
-
-import eventBus from '../events';
-
-import type { Socket } from 'socket.io-client';
-import type {
-    ServerToClientEvents,
-    ClientToServerEvents,
-} from '@/plugins/socket';
-import type { EventRecords } from '../types/EventRecords';
-
-export default defineComponent({
-    name: 'JoinView',
-    components: {
-        WizarrLogo,
-        Carousel,
-        Collapse,
-        LanguageSelector,
-        ThemeToggle,
-    },
-    data() {
-        return {
-            socket: null as Socket<
-                ServerToClientEvents,
-                ClientToServerEvents
-            > | null,
-            eventBus: eventBus,
-            pleaseWait: true,
-            pageTitle: '',
-            currentView: 1,
-            activeStep: 0,
-            views: [
-                {
-                    name: 'join',
-                    title: this.__('Please enter your invite code'),
-                    component: () => import('../pages/JoinForm.vue'),
-                },
-                // {
-                //     name: "payment",
-                //     title: this.__("Make Payment"),
-                //     component: () => import("../pages/Payment.vue"),
-                //     props: {
-                //         eventBus: eventBus,
-                //         code: this.$route.params.invite as string,
-                //     },
-                // },
-                {
-                    name: 'create',
-                    title: this.__('Setup your account'),
-                    component: () => import('../pages/Signup.vue'),
-                    props: {
-                        eventBus: eventBus,
-                    },
-                },
-                {
-                    name: 'stepper',
-                    title: this.__('Please wait...'),
-                    component: () => import('../pages/Stepper.vue'),
-                    props: {
-                        eventBus: eventBus,
-                    },
-                },
-                {
-                    name: 'success',
-                    title: this.__('All done!'),
-                    component: () => import('../pages/Complete.vue'),
-                },
-                {
-                    name: 'error',
-                    component: () => import('../pages/Error.vue'),
-                    props: {
-                        title: this.__('Uh oh!'),
-                        message: this.__(
-                            'Something went wrong while trying to join the server. Please try again later.',
-                        ),
-                    },
-                },
-            ],
-        };
-    },
-    computed: {
-        noHeader() {
-            return this.isView(['error']);
-        },
-        ...mapState(useServerStore, ['settings']),
-    },
-    methods: {
-        isView(name: string | string[]) {
-            return Array.isArray(name)
-                ? name.includes(this.views[this.currentView - 1].name)
-                : this.views[this.currentView - 1].name == name;
-        },
-        async showError(title: string, message: string) {
-            // Hide the please wait screen
-            this.pleaseWait = false;
-
-            // Change the error screen props
-            this.views[this.currentView - 1].props = {
-                title: title,
-                message: message,
-            };
-
-            // Show the error screen
-            this.currentView =
-                this.views.findIndex((view) => view.name == 'error') + 1;
-        },
-        async connected() {
-            // Check for a socket id
-            if (this.socket?.id == undefined) {
-                this.showError(
-                    this.__('Uh oh!'),
-                    this.__('Could not connect to the server.'),
-                );
-            }
-
-            this.pleaseWait = false;
-        },
-        async plexCreateAccount(value: EventRecords['plexCreateAccount']) {
-            // Create the form data
-            const formData = new FormData();
-            formData.append('token', value);
-            formData.append('code', this.$route.params.invite as string);
-            formData.append('socket_id', this.socket?.id as string);
-
-            // Make API request to create the account
-            const response = await this.$axios
-                .post('/api/plex', formData)
-                .catch((err) => {
-                    this.showError(
-                        this.__('Uh oh!'),
-                        err.response?.data?.message ??
-                            this.__('Could not create the account.'),
-                    );
-                });
-
-            // Check that response contains a room
-            if (response?.data?.room == undefined) {
-                this.showError(
-                    this.__('Uh oh!'),
-                    this.__('Could not create the account.'),
-                );
-            }
-
-            // Show the next screen
-            this.currentView =
-                this.views.findIndex((view) => view.name == 'stepper') + 1;
-        },
-        async jellyfinCreateAccount(
-            value: EventRecords['jellyfinCreateAccount'],
-        ) {
-            // Create the form data
-            const formData = new FormData();
-            formData.append('username', value.username);
-            formData.append('email', value.email);
-            formData.append('password', value.password);
-            formData.append('code', this.$route.params.invite as string);
-            formData.append('socket_id', this.socket?.id as string);
-
-            // Make API request to create the account
-            const response = await this.$axios
-                .post('/api/jellyfin', formData)
-                .catch((err) => {
-                    this.showError(
-                        this.__('Uh oh!'),
-                        err.response?.data?.message ??
-                            this.__('Could not create the account.'),
-                    );
-                });
-
-            // Check that response contains a room
-            if (response?.data?.room == undefined) {
-                this.showError(
-                    this.__('Uh oh!'),
-                    this.__('Could not create the account.'),
-                );
-            }
-
-            // Show the next screen
-            this.currentView =
-                this.views.findIndex((view) => view.name == 'stepper') + 1;
-        },
-        async embyCreateAccount(
-            value: EventRecords['embyCreateAccount'],
-        ) {
-            // Create the form data
-            const formData = new FormData();
-            formData.append('username', value.username);
-            formData.append('email', value.email);
-            formData.append('password', value.password);
-            formData.append('code', this.$route.params.invite as string);
-            formData.append('socket_id', this.socket?.id as string);
-
-            // Make API request to create the account
-            const response = await this.$axios
-                .post('/api/emby', formData)
-                .catch((err) => {
-                    this.showError(
-                        this.__('Uh oh!'),
-                        err.response?.data?.message ??
-                            this.__('Could not create the account.'),
-                    );
-                });
-
-            // Check that response contains a room
-            if (response?.data?.room == undefined) {
-                this.showError(
-                    this.__('Uh oh!'),
-                    this.__('Could not create the account.'),
-                );
-            }
-
-            // Show the next screen
-            this.currentView =
-                this.views.findIndex((view) => view.name == 'stepper') + 1;
-        },
-    },
-    async mounted() {
-        // Initialize the socket connection
-        this.socket = this.$io('/' + this.settings.server_type);
-        this.socket.on('connect', () => this.connected());
-        this.socket.on('connect_error', () =>
-            this.showError(
-                this.__('Uh oh!'),
-                this.__('Could not connect to the server.'),
-            ),
-        );
-        this.socket.on('error', (message) =>
-            this.showError(this.__('Uh oh!'), message),
-        );
-        this.socket.on('error', this.$toast.error);
-        this.socket.on('log', (message) => console.error(message));
-        this.socket.on('message', this.$toast.info);
-        this.socket.on('step', (step: number) => (this.activeStep = step));
-        this.socket.on('done', () =>
-            setTimeout(
-                () =>
-                    (this.currentView =
-                        this.views.findIndex((view) => view.name == 'success') +
-                        1),
-                1000,
-            ),
-        );
-
-        // Initialize the event bus
-        this.eventBus.on('plexCreateAccount', this.plexCreateAccount);
-        this.eventBus.on('jellyfinCreateAccount', this.jellyfinCreateAccount);
-        this.eventBus.on('embyCreateAccount', this.embyCreateAccount);
-
-        this.eventBus.on(
-            'pleaseWait',
-            (pleaseWait) => (this.pleaseWait = pleaseWait),
-        );
-        this.eventBus.on('pageTitle', (title) => (this.pageTitle = title));
-    },
-    async beforeUnmount() {
-        // Disconnect the socket
-        this.socket?.disconnect();
-
-        // Remove the event bus listeners
-        this.eventBus.off('*');
-    },
-});
-</script>
diff --git a/apps/wizarr-frontend/src/router/index.ts b/apps/wizarr-frontend/src/router/index.ts
index 8b88cb1af..b4650d409 100644
--- a/apps/wizarr-frontend/src/router/index.ts
+++ b/apps/wizarr-frontend/src/router/index.ts
@@ -12,7 +12,6 @@ import middlewarePipeline from './middlewarePipeline';
 // Import all Routes from the modules
 import homeRoutes from '@/modules/home/router';
 import authenticationRoutes from '@/modules/authentication/router';
-import joinRoutes from '@/modules/join/router';
 import adminRoutes from '@/modules/admin/router';
 import settingsRoutes from '@/modules/settings/router';
 import helpRoutes from '@/modules/help/router';
@@ -26,9 +25,8 @@ const router = createRouter({
             ? createWebHistory()
             : createMemoryHistory(),
     routes: [
-        ...homeRoutes, // Homepage routes ["/"]
+        ...homeRoutes, // Homepage routes ["/", "/i/:invite"]
         ...authenticationRoutes, // Authentication routes ["/login", "/register", "/forgot-password", "/reset-password"]
-        ...joinRoutes, // Join routes ["/join", "/j/:id"]
         ...adminRoutes, // Admin routes ["/admin", "/admin/:page"]
         ...settingsRoutes, // Settings routes ["/admin/settings", "/admin/settings/:page"]
         ...helpRoutes, // Help routes ["/help", "/open"]
diff --git a/apps/wizarr-frontend/tailwind.config.js b/apps/wizarr-frontend/tailwind.config.js
index c4fd78398..c4f54bd5e 100644
--- a/apps/wizarr-frontend/tailwind.config.js
+++ b/apps/wizarr-frontend/tailwind.config.js
@@ -21,7 +21,6 @@ export const theme = {
         },
         animation: {
             wiggle: 'wiggle 0.5s ease-in-out infinite',
-            // animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
             shake: 'shake 0.82s cubic-bezier(.36,.07,.19,.97) both',
         },
         keyframes: {
@@ -37,10 +36,6 @@ export const theme = {
             },
         },
     },
-    // fontFamily: {
-    //     'display': ['motiva sans', 'sans-serif'],
-    //     'body': ['motiva sans', 'sans-serif'],
-    // },
 };
 
 export const plugins = [
diff --git a/docs/getting-started/reverse-proxy.md b/docs/getting-started/reverse-proxy.md
index 3dfc7a4cb..391303937 100644
--- a/docs/getting-started/reverse-proxy.md
+++ b/docs/getting-started/reverse-proxy.md
@@ -142,9 +142,9 @@ plex.example.com {
             "scan=\"/"      "href=\"/wizarr/"
             "/scan"         "/wizarr/scan"
             # include in join code path copy
-            "navigator.clipboard.writeText(url + \"/j/\" + invite_code);" "navigator.clipboard.writeText(url + \"/wizarr/j/\" + invite_code);"
+            "navigator.clipboard.writeText(url + \"/i/\" + invite_code);" "navigator.clipboard.writeText(url + \"/wizarr/i/\" + invite_code);"
         }
-        
+
         # Your wizarr backend
         reverse_proxy http://127.0.0.1:5690
     }