Minor Refactoring

apps/wizarr-frontend/src/modules/help/components/Discord.vue

@@ -73,7 +73,7 @@ export default defineComponent({
     methods: {
         async loadWidgetAPI(guild: string) {
             // Load the Discord Widget API
-            const response = await this.$axios.get(`https://discord.com/api/guilds/${guild}/widget.json`).catch(() => {
+            const response = await this.$rawAxios.get(`https://discord.com/api/guilds/${guild}/widget.json`).catch(() => {
                 this.$toast.info("Unable to load Discord Widget, this is most likely due to too many requests.");
             });
 

apps/wizarr-frontend/src/modules/settings/pages/Discord.vue

@@ -7,12 +7,26 @@
                 </p>
                 <div class="flex flex-col space-y-1">
                     <p class="text-xs font-semibold leading-tight tracking-tight text-gray-900 md:text-sm dark:text-gray-400">
-                        {{ __("Please enter your Discord Server ID below. If you don't know how to get your Discord Server ID, please follow the instructions below.") }}
+                        {{ __("Please enter your Discord Server ID below and ensure Server Widgets are enabled. If you don't know how to get your Discord Server ID or Enable Widgets, please follow the instructions below.") }}
                     </p>
                     <p class="text-sm text-gray-500 dark:text-gray-400">
-                        <li>{{ __("First make sure you have Developer Mode enabled on your Discord by visiting your Discord settings and going to Appearance.") }}</li>
-                        <li>{{ __("To get your Server ID right click on the server icon on the left hand sidebar") }}</li>
-                        <li>{{ __('Click on "Copy ID" then paste it it in the box below') }}</li>
+                        <p class="text-xs font-semibold leading-tight tracking-tight text-gray-900 md:text-sm dark:text-gray-400">
+                            {{ __("Discord Server ID:") }}
+                        </p>
+                        <ul class="list-decimal">
+                            <li>{{ __("First make sure you have Developer Mode enabled on your Discord by visiting your Discord settings and going to Appearance.") }}</li>
+                            <li>{{ __("To get your Server ID right click on the server icon on the left hand sidebar.") }}</li>
+                            <li>{{ __('Click on "Copy ID" then paste it it in the box below.') }}</li>
+                        </ul>
+
+                        <p class="text-xs font-semibold leading-tight tracking-tight text-gray-900 md:text-sm dark:text-gray-400">
+                            {{ __("Enable Server Widget:") }}
+                        </p>
+                        <ul class="list-decimal">
+                            <li>{{ __('To enable Server Widgets, navigate to your Server Settings.') }}</li>
+                            <li>{{ __('Click "Widget" on the left hand sidebar.') }}</li>
+                            <li>{{ __('Ensure the toggle for "Enable Server Widget" is checked.') }}</li>
+                        </ul>
                     </p>
                 </div>
             </div>
@@ -46,13 +60,20 @@ export default defineComponent({
             const formData = new FormData();
             formData.append("server_discord_id", this.serverId);
 
+            const validate = await this.$rawAxios.get(`https://discord.com/api/guilds/${this.serverId}/widget.json`).catch((validation) => {
+                // Discord Docs: https://discord.com/developers/docs/topics/opcodes-and-status-codes
+                if (validation.response.data.code === 50004) this.$toast.error(this.__("Unable to save due to widgets being disabled on this server."));
+            });
+
+            if (!validate) return;
+
             const response = await this.$axios.put("/api/settings", formData).catch(() => {
                 this.$toast.error(this.__("Unable to save connection."));
             });
 
             if (!response?.data) return;
 
-            this.$toast.info("Discord Server ID saved successfully");
+            this.$toast.info("Discord Server ID saved successfully.");
         },
         syncSettings() {
             this.$axios.get("/api/settings", { disableErrorToast: true }).then((response) => {

apps/wizarr-frontend/src/modules/setup/pages/Welcome.vue

@@ -10,7 +10,7 @@
             <div class="text-gray-500 dark:text-gray-400">
                 <h2 class="text-xs">
                     Automatic User Invitation System for<br />
-                    Plex, Jellyfin, and Emby
+                    Plex and Jellyfin
                 </h2>
             </div>
 
@@ -19,7 +19,7 @@
             <!-- Description -->
             <p class="text-base text-center">
                 Wizarr is a powerful tool that makes it easy to manage user
-                invitations for your Plex, Jellyfin, or Emby media server. With
+                invitations for your Plex or Jellyfin media server. With
                 Wizarr, you can create unique invitation links to share with
                 users, and they will be automatically invited to your server
                 once they click on the link.