fix(apps): Show message when the user doesn't have approved apps yet

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/core/MaterialIcon.vue

@@ -258,6 +258,8 @@ const icons: Record<string, () => Promise<any>> = {
     import(`../../../node_modules/vue-material-design-icons/EyeOutline.vue`),
   PencilOutline: () =>
     import(`../../../node_modules/vue-material-design-icons/PencilOutline.vue`),
+  Apps: () =>
+    import(`../../../node_modules/vue-material-design-icons/Apps.vue`),
 };
 
 const props = withDefaults(

js/src/views/Settings/AppsView.vue

@@ -21,6 +21,7 @@
           )
         }}
       </p>
+      <div v-if="authAuthorizedApplications.length > 0">
         <div
           class="flex justify-between items-center rounded-lg bg-white shadow-xl my-6"
           v-for="authAuthorizedApplication in authAuthorizedApplications"
@@ -58,12 +59,18 @@
           </div>
           <div class="p-4">
             <o-button
-            @click="() => revoke({ appTokenId: authAuthorizedApplication.id })"
+              @click="
+                () => revoke({ appTokenId: authAuthorizedApplication.id })
+              "
               variant="danger"
               >{{ t("Revoke") }}</o-button
             >
           </div>
         </div>
+      </div>
+      <EmptyContent v-else icon="apps" inline>
+        {{ t("No apps authorized yet") }}
+      </EmptyContent>
     </section>
   </div>
 </template>
@@ -82,6 +89,7 @@ import RouteName from "../../router/name";
 import { IUser } from "@/types/current-user.model";
 import { formatDateString } from "@/filters/datetime";
 import { Notifier } from "@/plugins/notifier";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
 
 const { t } = useI18n({ useScope: "global" });
 
@@ -94,7 +102,7 @@ const { result: authAuthorizedApplicationsResult } = useQuery<{
 const authAuthorizedApplications = computed(
   () =>
     authAuthorizedApplicationsResult.value?.loggedUser
-      ?.authAuthorizedApplications
+      ?.authAuthorizedApplications ?? []
 );
 
 const urlToHostname = (url: string | undefined): string | null => {