Merge pull request #391 from wizarrrr/feature/home-redesign

Homepage Replacement for End Users

apps/wizarr-backend/wizarr_backend/helpers/emby.py

@@ -253,20 +253,18 @@ def invite_emby_user(username: str, password: str, code: str, server_api_key: Op
     if invitation.specific_libraries is not None and len(invitation.specific_libraries) > 0:
         sections = invitation.specific_libraries.split(",")
 
-    print(sections)
-
     # Create user object
     new_user = { "Name": str(username) }
 
     # Create user in Emby
     user_response = post_emby(api_path="/Users/New", json=new_user, server_api_key=server_api_key, server_url=server_url)
 
-    # Set user password
-    post_emby(api_path=f"/Users/{user_response['Id']}/Password", json={"NewPw": str(password)}, server_api_key=server_api_key, server_url=server_url)
-
     # Create policy object
     new_policy = {
         "EnableAllFolders": True,
+        "SimultaneousStreamLimit": 0,
+        "EnableLiveTvAccess": False,
+        "EnableLiveTvManagement": False,
         "AuthenticationProviderId": "Emby.Server.Implementations.Library.DefaultAuthenticationProvider",
     }
 
@@ -278,14 +276,10 @@ def invite_emby_user(username: str, password: str, code: str, server_api_key: Op
     # Set stream limit options
     if invitation.sessions is not None and int(invitation.sessions) > 0:
         new_policy["SimultaneousStreamLimit"] = int(invitation.sessions)
-    else:
-        new_policy["SimultaneousStreamLimit"] = 0
 
     # Set live tv access
     if invitation.live_tv is not None and invitation.live_tv == True:
         new_policy["EnableLiveTvAccess"] = True
-    else:
-        new_policy["EnableLiveTvAccess"] = False
 
     # Set the hidden user status
     if invitation.hide_user is not None and invitation.hide_user == False:
@@ -303,6 +297,9 @@ def invite_emby_user(username: str, password: str, code: str, server_api_key: Op
     # Update user policy
     post_emby(api_path=api_path, json=new_policy, server_api_key=server_api_key, server_url=server_url)
 
+    # Set user password, this is done after the policy is set due to LDAP policies
+    post_emby(api_path=f"/Users/{user_response['Id']}/Password", json={"NewPw": str(password)}, server_api_key=server_api_key, server_url=server_url)
+
     # Return response
     return user_response
 

apps/wizarr-backend/wizarr_backend/helpers/jellyfin.py

@@ -262,6 +262,9 @@ def invite_jellyfin_user(username: str, password: str, code: str, server_api_key
     # Create policy object
     new_policy = {
         "EnableAllFolders": True,
+        "MaxActiveSessions": 0,
+        "EnableLiveTvAccess": False,
+        "EnableLiveTvManagement": False,
         "AuthenticationProviderId": "Jellyfin.Server.Implementations.Users.DefaultAuthenticationProvider",
     }
 
@@ -273,14 +276,10 @@ def invite_jellyfin_user(username: str, password: str, code: str, server_api_key
     # Set session limit options
     if invitation.sessions is not None and int(invitation.sessions) > 0:
         new_policy["MaxActiveSessions"] = int(invitation.sessions)
-    else:
-        new_policy["MaxActiveSessions"] = 0
 
     # Set live tv access
     if invitation.live_tv is not None and invitation.live_tv == True:
         new_policy["EnableLiveTvAccess"] = True
-    else:
-        new_policy["EnableLiveTvAccess"] = False
 
     # Set the hidden user status
     if invitation.hide_user is not None and invitation.hide_user == False:

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

@@ -387,7 +387,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/authentication/components/LoginForm.vue

@@ -1,10 +1,6 @@
 <template>
     <FormKit type="form" @submit="passwordLogin" :actions="false">
         <div class="space-y-4">
-            <div class="flex justify-center flex-col space-y-4">
-                <h1 class="text-gray-900 dark:text-white text-2xl font-semibold">Login with your account</h1>
-            </div>
-
             <FormKit type="text" v-model="username" label="Username" name="username" placeholder="Username" required autocomplete="username webauthn" autofocus />
             <FormKit type="password" v-model="password" label="Password" name="password" placeholder="Password" required autocomplete="current-password" />
 

apps/wizarr-frontend/src/modules/authentication/views/LoginView.vue

@@ -1,36 +1,67 @@
 <template>
-    <div class="flex flex-wrap items-start md:items-center justify-center mx-auto mt-20 md:mt-0 md:h-screen">
-        <!-- Nav Bar for Public Routes -->
-        <DefaultNavBar />
+    <DefaultNavBar />
 
-        <!-- Hero Section -->
-        <section class="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-0 w-full">
-            <div class="w-full rounded md:mt-0 sm:max-w-md xl:p-0 md:shadow dark:bg-transparent md:bg-white md:dark:border md:dark:border-gray-700">
-                <div class="p-6 sm:p-8">
-                    <transition name="fade-fast" mode="out-in">
-                        <div v-if="step == 0" class="flex flex-col items-center justify-center space-y-4">
-                            <i class="fa-solid fa-spinner fa-spin dark:text-white fa-2xl m-4"></i>
-                        </div>
-                        <div v-else-if="step == 1">
-                            <LoginForm :passkeySupported="passkeySupported" @passwordLogin="passwordLogin" @passkeyLogin="passkeyLogin" key="login-form" />
-                        </div>
-                        <div v-else>
-                            <div class="flex flex-col items-center justify-center space-y-4">
-                                <span class="text-gray-900 dark:text-white">
-                                    {{ __("Something went wrong") }}
-                                </span>
+    <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"
+            >
+                {{
+                    __('Login to the Admin Dashboard')
+                }}
+            </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="p-6 sm:p-8">
+                        <transition name="fade-fast" mode="out-in">
+                            <div v-if="step == 0" class="flex flex-col items-center justify-center space-y-4">
+                                <i class="fa-solid fa-spinner fa-spin dark:text-white fa-2xl m-4"></i>
                             </div>
-                        </div>
-                    </transition>
+                            <div v-else-if="step == 1">
+                                <LoginForm :passkeySupported="passkeySupported" @passwordLogin="passwordLogin" @passkeyLogin="passkeyLogin" key="login-form" />
+                            </div>
+                            <div v-else>
+                                <div class="flex flex-col items-center justify-center space-y-4">
+                                    <span class="text-gray-900 dark:text-white">
+                                        {{ __("Something went wrong") }}
+                                    </span>
+                                </div>
+                            </div>
+                        </transition>
+                    </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 { mapState } from 'pinia';
 import { defineComponent } from "vue";
+import { useServerStore } from '@/stores/server';
 
+import WizarrLogo from '@/components/WizarrLogo.vue';
 import DefaultNavBar from "@/components/NavBars/DefaultNavBar.vue";
 import DefaultLoading from "@/components/Loading/DefaultLoading.vue";
 
@@ -49,6 +80,7 @@ export default defineComponent({
         DefaultNavBar,
         DefaultLoading,
         LoginForm,
+        WizarrLogo,
     },
     data() {
         return {
@@ -57,6 +89,9 @@ export default defineComponent({
             passkeySupported: true,
         };
     },
+    computed: {
+        ...mapState(useServerStore, ['settings']),
+    },
     methods: {
         async passwordLogin({ username, password }: { username: string; password: string }) {
             this.step = STEP.LOADING;

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: 'deprecated-invite',
+        component: () => import('../views/Home.vue'),
+    },
+    {
+        path: '/join',
+        name: 'deprecated-join',
+        component: () => import('../views/Home.vue'),
+    },
 ];
 
 export default routes;