Fix/fix broken pwa (#1086)

* remove fetch / use axios fix #1077

* revert checkbox change

* add password peek

* fix bool check

frontend/components/Domain/Recipe/RecipeIngredients.vue

@@ -9,7 +9,7 @@
         <h3 v-if="showTitleEditor[index]" class="mt-2">{{ ingredient.title }}</h3>
         <v-divider v-if="showTitleEditor[index]"></v-divider>
         <v-list-item dense @click="toggleChecked(index)">
-          <v-checkbox hide-details :value="checked[index]" color="secondary" />
+          <v-checkbox hide-details :value="checked[index]" class="pt-0 my-auto py-auto" color="secondary" />
           <v-list-item-content>
             <VueMarkdown
               class="ma-0 pa-0 text-subtitle-1 dense-markdown"
@@ -85,13 +85,4 @@ export default defineComponent({
 .dense-markdown p {
   margin: auto !important;
 }
-
-.v-input--selection-controls {
-  margin-top: 0.5rem;
-  margin-bottom: auto !important;
-}
-
-.v-input--selection-controls__input {
-  margin-bottom: auto !important;
-}
 </style>

frontend/composables/api/use-app-info.ts

@@ -1,13 +1,16 @@
-import { onMounted, ref, Ref } from "@nuxtjs/composition-api";
+import { ref, Ref, useAsync, useContext } from "@nuxtjs/composition-api";
+import { useAsyncKey } from "../use-utils";
 import { AppInfo } from "~/types/api-types/admin";
 
 export function useAppInfo(): Ref<AppInfo | null> {
   const appInfo = ref<null | AppInfo>(null);
 
-  onMounted(async () => {
-    const data = await fetch("/api/app/about").then((res) => res.json());
-    appInfo.value = data as AppInfo;
-  });
+  const { $axios } = useContext();
+
+  useAsync(async () => {
+    const data = await $axios.get<AppInfo>("/api/app/about");
+    appInfo.value = data.data;
+  }, useAsyncKey());
 
   return appInfo;
 }

frontend/composables/use-password-field.ts

@@ -0,0 +1,22 @@
+import { computed, ref, useContext } from "@nuxtjs/composition-api";
+
+export function usePasswordField() {
+  const show = ref(false);
+
+  const { $globals } = useContext();
+
+  const passwordIcon = computed(() => {
+    return show.value ? $globals.icons.eyeOff : $globals.icons.eye;
+  });
+  const inputType = computed(() => (show.value ? "text" : "password"));
+
+  const togglePasswordShow = () => {
+    show.value = !show.value;
+  };
+
+  return {
+    inputType,
+    togglePasswordShow,
+    passwordIcon,
+  };
+}

frontend/pages/login.vue

@@ -25,7 +25,7 @@
 
       <v-card-title class="headline justify-center pb-1"> Sign In </v-card-title>
       <v-card-text>
-        <v-form @submit.prevent="authenticate()">
+        <v-form @submit.prevent="authenticate">
           <v-text-field
             v-model="form.email"
             :prepend-inner-icon="$globals.icons.email"
@@ -41,12 +41,14 @@
             id="password"
             v-model="form.password"
             :prepend-inner-icon="$globals.icons.lock"
+            :append-icon="passwordIcon"
             filled
             rounded
             class="rounded-lg"
             name="password"
             label="Password"
-            type="password"
+            :type="inputType"
+            @click:append="togglePasswordShow"
           />
           <v-checkbox v-model="form.remember" class="ml-2 mt-n2" label="Remember Me"></v-checkbox>
           <v-card-actions class="justify-center pt-0">
@@ -110,6 +112,7 @@
 import { defineComponent, ref, useContext, computed, reactive } from "@nuxtjs/composition-api";
 import { useDark } from "@vueuse/core";
 import { useAppInfo } from "~/composables/api";
+import { usePasswordField } from "~/composables/use-password-field";
 import { alert } from "~/composables/use-toast";
 import { useToggleDarkMode } from "~/composables/use-utils";
 export default defineComponent({
@@ -131,6 +134,8 @@ export default defineComponent({
 
     const appInfo = useAppInfo();
 
+    const { passwordIcon, inputType, togglePasswordShow } = usePasswordField();
+
     const allowSignup = computed(() => appInfo.value?.allowSignup || false);
 
     async function authenticate() {
@@ -169,6 +174,9 @@ export default defineComponent({
       allowSignup,
       authenticate,
       toggleDark,
+      passwordIcon,
+      inputType,
+      togglePasswordShow,
     };
   },