Workaround for issue with axios

CHANGELOG.md

@@ -13,6 +13,8 @@
   [#1582](https://github.com/nextcloud/cookbook/pull/1582) @roliverio
 - Make time input fields wider to view multiple digits in chrome
   [#1687](https://github.com/nextcloud/cookbook/pull/1687) @christianlupus
+- Prevent popup from falsely showing during loading of the app
+  [#1764](https://github.com/nextcloud/cookbook/pull/1764) @christianlupus
 
 ### Maintenance
 - Fix URL of Transifex after upstream subdomain change

src/components/SettingsDialog.vue

@@ -89,10 +89,8 @@
             <fieldset>
                 <legend class="settings-info-blocks__legend">
                     {{
-                        t(
-                            "cookbook",
-                            "Control which blocks of information are shown in the recipe view. If you do not use some features and find them distracting, you may hide them.",
-                        )
+                        // prettier-ignore
+                        t("cookbook", "Control which blocks of information are shown in the recipe view. If you do not use some features and find them distracting, you may hide them.")
                     }}
                 </legend>
                 <ul>
@@ -159,6 +157,19 @@
                 </ul>
             </fieldset>
         </NcAppSettingsSection>
+        <NcAppSettingsSection
+            id="debug"
+            :title="t('cookbook', 'Frontend debug settings')"
+            class="app-settings-section"
+        >
+            <legend class="settings-info-blocks__legend">
+                {{
+                    // prettier-ignore
+                    t("cookbook", "This allows to temporarily enable logging in the browser console in case of problems. You will not need these settings by default.")
+                }}
+            </legend>
+            <NcButton @click="enableLogger">Enable debugging</NcButton>
+        </NcAppSettingsSection>
     </NcAppSettingsDialog>
 </template>
 
@@ -174,6 +185,8 @@
 import api from "cookbook/js/api-interface"
 import { showSimpleAlertModal } from "cookbook/js/modals"
 
+import { enableLogging } from "cookbook/js/logging"
+
 export const SHOW_SETTINGS_EVENT = "show-settings"
 
 const INFO_BLOCK_KEYS = [
@@ -390,6 +403,9 @@
                     this.$log.error("Library reindexing failed!")
                 })
         },
+        enableLogger() {
+            enableLogging()
+        },
 
         beforeDestroy() {
             unsubscribe(SHOW_SETTINGS_EVENT, this.handleShowSettings)
@@ -399,7 +415,7 @@
 </script>
 
 <style scoped>
 /* TODO: Use @nextcloud/vue LoadingIcon once we update to 7.0.0 and we won't
  * have to do this */
 .material-design-icon.loading-icon:deep(svg) {
     animation: rotate var(--animation-duration, 0.8s) linear infinite;

src/js/api-interface.js

@@ -13,8 +13,11 @@ instance.interceptors.request.use((config) => {
         `[axios] Making "${config.method}" request to "${config.url}"`,
         config,
     )
-    const contentType = config.headers[config.method]["Content-Type"]
-    if (!["application/json", "text/json"].includes(contentType)) {
+    const contentType = config.headers["Content-Type"]
+    if (
+        contentType &&
+        !["application/json", "text/json"].includes(contentType)
+    ) {
         Vue.$log.warn(
             `[axios] Request to "${config.url}" is using Content-Type "${contentType}", not JSON`,
         )

src/js/logging.js

@@ -1,4 +1,4 @@
 // TODO: Switch to vuejs3-logger when we switch to Vue 3
 import VueLogger from "vuejs-logger"
 import moment from "@nextcloud/moment"
 
@@ -66,3 +66,7 @@
 
     Vue.$log.info(`Setting up logging with log level ${logLevel}`)
 }
+
+export function enableLogging() {
+    localStorage.setItem(KEY_ENABLED, true)
+}