linting

layouts/default.vue

@@ -3,6 +3,7 @@
     <div class="container mx-auto p-4">
       <slot />
     </div>
+
     <footer class="container fixed bottom-10 mx-10 pr-10 text-gray-400">
       <slot name="footer">
         <div class="flex flex-row items-end">

nuxt.config.ts

@@ -3,17 +3,13 @@ export default defineNuxtConfig({
   ssr: false,
   app: {
     baseURL: '/yunohost/sso',
-    buildAssetsDir: '/assets/'
+    buildAssetsDir: '/assets/',
   },
-  modules: [
+  modules: ['@nuxtjs/tailwindcss', 'nuxt-icon', '@nuxtjs/google-fonts'],
-    '@nuxtjs/tailwindcss',
-    'nuxt-icon',
-    "@nuxtjs/google-fonts",
-  ],
   devtools: { enabled: true },
   googleFonts: {
     families: {
-      'Source+Sans+3': [500, 900]
+      'Source+Sans+3': [500, 900],
-    }
+    },
-  }
+  },
 })

pages/index.vue

@@ -1,4 +1,55 @@
-<template #main>
+<script setup lang="ts">
+const apiEndpoint = useApiEndpoint()
+const isLoggedIn = useIsLoggedIn()
+let me = {}
+
+const { data, error } = await useFetch(apiEndpoint + '/me', {
+  credentials: 'include',
+})
+
+if (error.value && error.value.statusCode >= 400) {
+  isLoggedIn.value = false // FIXME : not confident this actually mutates the state ...
+  // FIXME : we probably want different handlings between 401/403, 500, 502, ...
+  await navigateTo('/login')
+} else {
+  me = data.value
+
+  Object.keys(me.apps).forEach((appId) => {
+    const appTileColors = [
+      'red',
+      'orange',
+      'yellow',
+      'lime',
+      'green',
+      'teal',
+      'indigo',
+      'sky',
+      'purple',
+      'rose',
+    ]
+    const randomColorNumber =
+      parseInt(me.apps[appId].label, 36) % appTileColors.length
+    me.apps[appId].color = appTileColors[randomColorNumber]
+  })
+}
+
+async function logout() {
+  const { error } = await useFetch(apiEndpoint + '/logout', {
+    method: 'GET',
+    credentials: 'include',
+  })
+
+  if (error.value && error.value.statusCode !== 200) {
+    // FIXME : display an error or something
+  } else {
+    // FIXME : meh, turns out the cookie is still valid after successfully calling the route for some reason ... !?
+    isLoggedIn.value = false // FIXME : not confident this actually mutates the state ...
+    await navigateTo('/login')
+  }
+}
+</script>
+
+<template>
   <div>
     <div class="flex flex-row items-center min-w-full">
       <span class="flex-none pr-5">
@@ -6,7 +57,9 @@
       </span>
 
       <div class="grow">
-                <h2 class="text-2xl font-extrabold leading-none tracking-tight">{{ me.username }}</h2>
+        <h2 class="text-2xl font-extrabold leading-none tracking-tight">
+          {{ me.username }}
+        </h2>
         <h3>{{ me.fullname }}</h3>
         <h4 class="opacity-50">{{ me.mail }}</h4>
       </div>
@@ -20,98 +73,33 @@
     </div>
 
     <div id="apps" class="p-10">
-
       <div v-if="Object.keys(me.apps).length == 0">
-                <em class="text-gray-400">There is no app to list here, either because no web app yet is installed on the server, or because you don't have access to any. Please check with the admins of the server for more infos!</em>
+        <em class="text-gray-400"
+          >There is no app to list here, either because no web app yet is
+          installed on the server, or because you don't have access to any.
+          Please check with the admins of the server for more infos!</em
+        >
       </div>
 
       <ul class="flex space-x-4">
         <!-- NB : because of the usage of dynamic colors, gotta force tailwind to expose those, cf 'safelisting' -->
-                <li v-for="app in me.apps" :class="'text-center leading-none p-5 card h-32 w-32 bg-' + app.color + '-500'">
+        <li
+          v-for="app in me.apps"
+          :key="app.id"
+          :class="
+            'text-center leading-none p-5 card h-32 w-32 bg-' +
+            app.color +
+            '-500'
+          "
+        >
           <a>
-                        <div class="text-6xl font-extrabold">{{ app.label.substring(0, 2) }}</div>
+            <div class="text-6xl font-extrabold">
+              {{ app.label.substring(0, 2) }}
+            </div>
             <span class="leading-tight">{{ app.label }}</span>
           </a>
         </li>
-
-                    <!--
-                <li class="text-center leading-none p-5 card h-32 w-32 bg-rose-500">
-                    <a class="">
-                        <div class="text-6xl font-extrabold">My</div>
-                        <span class="leading-tight">My Webapp</span>
-                    </a>
-                </li>
-                <li class="text-center leading-none p-5 card h-32 w-32 bg-indigo-500">
-                    <a class="">
-                        <div class="text-6xl font-extrabold">Ne</div>
-                        <span class="">Nextcloud</span>
-                    </a>
-                </li>
-                <li class="text-center leading-none p-5 card h-32 w-32 bg-yellow-500">
-                    <a class="">
-                        <div class="text-6xl font-extrabold">Ra</div>
-                        <span class="">Rainloop</span>
-                    </a>
-                </li>
-                <li class="text-center leading-none p-5 card h-32 w-32 bg-green-500">
-                    <a class="">
-                        <div class="text-6xl font-extrabold">Et</div>
-                        <span class="">Etherpad MyPads</span>
-                    </a>
-                </li>
-                    -->
       </ul>
     </div>
-
   </div>
 </template>
-
-<script setup>
-    const apiEndpoint = useApiEndpoint()
-    let isLoggedIn = useIsLoggedIn()
-    let me = {};
-
-    const { data, error } = await useFetch(
-      apiEndpoint + "/me", 
-      {credentials: 'include'}
-    )
-
-    if (error.value && error.value.statusCode >= 400) {
-
-      isLoggedIn = false; // FIXME : not confident this actually mutates the state ...
-      // FIXME : we probably want different handlings between 401/403, 500, 502, ...
-      await navigateTo('/login')
-    }
-    else
-    {
-      me = data.value
-
-      Object.keys(me.apps).map(function(app_id, index) {
-        var app_tile_colors = ['red', 'orange', 'yellow', 'lime', 'green', 'teal', 'indigo', 'sky', 'purple', 'rose']
-        var randomColorNumber = parseInt(me.apps[app_id].label, 36) % app_tile_colors.length;
-        me.apps[app_id].color = app_tile_colors[randomColorNumber]
-      })
-    }
-
-    console.log(me.apps)
-
-    async function logout() {
-
-        const { data, error } = await useFetch(apiEndpoint + "/logout", {
-          method: 'GET',
-          credentials: 'include'
-       });
-  
-       if (error.value && error.value.statusCode != 200) {
-          // FIXME : display an error or something
-       }
-       else {
-            // FIXME : meh, turns out the cookie is still valid after successfully calling the route for some reason ... !?
-
-           isLoggedIn = false; // FIXME : not confident this actually mutates the state ...
-           await navigateTo('/login')
-       }
-  };
-
-
-</script>

pages/login.vue

@@ -1,3 +1,32 @@
+<script setup lang="ts">
+const apiEndpoint = useApiEndpoint()
+const isLoggedIn = useIsLoggedIn()
+
+const form = {
+  username: '',
+  password: '',
+}
+
+async function login() {
+  const { error } = await useFetch(apiEndpoint + '/login', {
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Requested-With': '',
+    },
+    method: 'POST',
+    credentials: 'include',
+    body: { credentials: form.username + ':' + form.password },
+  })
+
+  if (error.value && error.value.statusCode !== 200) {
+    // FIXME : display an error or something
+  } else {
+    isLoggedIn.value = true // FIXME : not confident this actually mutates the state ...
+    await navigateTo('/')
+  }
+}
+</script>
+
 <template>
   <div class="w-80 mx-auto pt-20">
     <img class="flex-none mx-auto w-1/2 p-5" src="/assets/img/logo-white.svg" />
@@ -9,7 +38,13 @@
           </label>
         </div>
         <div class="">
-                    <input class="text-gray-700 rounded py-2 px-4" id="login-username" type="text" placeholder="username" v-model="form.username">
+          <input
+            id="login-username"
+            v-model="form.username"
+            class="text-gray-700 rounded py-2 px-4"
+            type="text"
+            placeholder="username"
+          />
         </div>
       </div>
       <div class="flex items-center mb-6">
@@ -19,12 +54,21 @@
           </label>
         </div>
         <div class="">
-                    <input class="text-gray-700 rounded py-2 px-4" id="login-password" type="password" placeholder="******************" v-model="form.password">
+          <input
+            id="login-password"
+            v-model="form.password"
+            class="text-gray-700 rounded py-2 px-4"
+            type="password"
+            placeholder="******************"
+          />
         </div>
       </div>
       <div class="flex items-center">
         <div class="w-full">
-                    <button class="w-full bg-indigo-500 hover:bg-indigo-400 font-bold py-2 px-4 rounded" type="submit">
+          <button
+            class="w-full bg-indigo-500 hover:bg-indigo-400 font-bold py-2 px-4 rounded"
+            type="submit"
+          >
             Connect
           </button>
         </div>
@@ -32,36 +76,3 @@
     </form>
   </div>
 </template>
-
-<!-- <template #footer></template>  -->
-
-<script setup>
-    const apiEndpoint = useApiEndpoint();
-    let isLoggedIn = useIsLoggedIn();
-
-    let form = {
-        username: "",
-        password: ""
-    }
-
-    async function login() {
-
-        const { data, error } = await useFetch(apiEndpoint + "/login", {
-            headers: { 
-                "Content-Type": "application/json", 
-                "X-Requested-With": "" 
-            },
-            method: 'POST',
-            credentials: 'include',
-            body: { credentials: form.username + ":" + form.password }
-       });
-  
-       if (error.value && error.value.statusCode != 200) {
-          // FIXME : display an error or something
-       }
-       else {
-           isLoggedIn = true; // FIXME : not confident this actually mutates the state ...
-           await navigateTo('/')
-       }
-  };
-</script>

tailwind.config.js

@@ -5,5 +5,5 @@ module.exports = {
     {
       pattern: /bg-.*-500/,
     },
-  ]
+  ],
 }