feat: ✨ Replaced the default homepage with the invite interface

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>

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"]),

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,
  },
  ],

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 {

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({

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,
  },
  ],

apps/wizarr-frontend/src/modules/join/pages/Complete.vue → 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>

apps/wizarr-frontend/src/modules/join/pages/JoinForm.vue → 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

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;