Aggiustamenti Proxy, Impl di list.

app.vue

@@ -1,11 +1,9 @@
 <template>
-  <div>
-    <NuxtRouteAnnouncer/>
-    <div>
-      <NuxtPage/>
-    </div>
-    <Toast/>
-  </div>
+  <NuxtLoadingIndicator/>
+  <NuxtLayout>
+    <NuxtPage/>
+  </NuxtLayout>
+  <Toast/>
 </template>
 
 <script setup lang="ts">

assets/css/main.css

@@ -1 +1,3 @@
-@import "tailwindcss";
+@import "tailwindcss";
+
+@import "primeicons/primeicons.css";

components/FloatInputPwdField.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+const id = useId();
+const props = defineProps({
+  value: {
+    type: String,
+    default: undefined,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  }
+});
+
+// use `toRef` to create reactive references to `name` prop which is passed to `useField`
+// this is important because vee-validte needs to know if the field name changes
+// https://vee-validate.logaretm.com/v4/guide/composition-api/caveats
+const name = toRef(props, 'name');
+
+// we don't provide any rules here because we are using form-level validation
+// https://vee-validate.logaretm.com/v4/guide/validation#form-level-validation
+const {
+  value: inputValue,
+  errorMessage,
+  handleBlur,
+  meta
+} = useField(name, undefined, {
+  initialValue: props.value
+});
+
+const invalid = computed(() => errorMessage.value ? true : undefined);
+
+const show = ref(false);
+const type = computed(() => show.value ? 'text' : 'password');
+const icon = computed(() => show.value ? 'pi pi-eye-slash' : 'pi pi-eye');
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-2">
+    <div class="flex flex-row justify-between gap-2">
+      <FloatLabel variant="on" class="grow">
+        <InputText
+          :id="id" v-model="inputValue" class="w-full" :invalid="invalid" :type="type" @blur="handleBlur"
+        />
+        <label :for="id">
+          {{ label }}
+        </label>
+      </FloatLabel>
+      <Button :icon="icon" @click="show = !show"/>
+    </div>
+    <Message v-if="errorMessage && meta.touched" class="text-wrap">{{ errorMessage }}</Message>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

components/FloatInputTextField.vue

@@ -42,7 +42,7 @@ const invalid = computed(() => errorMessage.value ? true : undefined);
   <div class="grid grid-cols-1 gap-2">
     <FloatLabel variant="on">
       <InputText
-        :id="id" v-model="inputValue" class="w-full" :invalid="invalid" @blur="handleBlur"
+        :id="id" v-model="inputValue" class="w-full" :invalid="invalid" :type="type" @blur="handleBlur"
       />
       <label :for="id">
         {{ label }}

nuxt.config.ts

@@ -22,21 +22,19 @@ export default defineNuxtConfig({
       ErrorMessage: 'VeeErrorMessage',
     },
   },
+  routeRules: {
+    // On Prod this is done by NGINX using `proxy_cookie_domain` and `proxy_cookie_path`
+    '/api/**': {
+      proxy: {
+        to: 'https://api.barracuda.rossinienergy.com/**',
+        cookieDomainRewrite: "",
+        cookiePathRewrite: "/",
+      }
+    }
+  },
   vite: {
     plugins: [
       tailwindcss(),
     ],
-    server: {
-      // On Prod this is done by NGINX using `proxy_cookie_domain` and `proxy_cookie_path`
-      proxy: {
-        '/api': {
-          target: 'https://api.barracuda.rossinienergy.com',
-          changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/api/, ''),
-          cookieDomainRewrite: "",
-          cookiePathRewrite: "/",
-        },
-      }
-    }
   },
 });

package.json

@@ -18,6 +18,7 @@
     "@vee-validate/zod": "^4.15.0",
     "eslint": "^9.0.0",
     "nuxt": "^3.16.0",
+    "primeicons": "^7.0.0",
     "primevue": "^4.3.2",
     "tailwindcss": "^4.0.14",
     "vee-validate": "^4.15.0",

pages/login.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { toTypedSchema } from '@vee-validate/zod';
 import * as zod from 'zod';
+import { FetchError } from "ofetch";
 
 const zodSchema = zod.object({
   username: zod.string().min(1, { message: 'This is required' }),
@@ -10,10 +11,23 @@ const schema = toTypedSchema(zodSchema);
 
 const toast = useToast();
 
-function onSubmit(v: unknown) {
+async function onSubmit(v: unknown) {
   const values = v as zod.infer<typeof zodSchema>;
+  try {
+    await $fetch('/api/public/1/auth/login/', {
+      method: 'POST',
+      body: values
+    });
+  } catch (e) {
+    if (e instanceof FetchError) {
+      toast.add({ summary: 'Error during Login', detail: e.data, severity: 'error' });
+      return;
+    } else {
+      throw e;
+    }
+  }
   toast.add({ summary: 'Success', detail: 'The form has been submitted.', severity: 'success' });
-  console.log(values);
+  await navigateTo('/user/myself');
 }
 </script>
 
@@ -26,8 +40,8 @@ function onSubmit(v: unknown) {
           <VeeForm v-slot="{isSubmitting}" :validation-schema="schema" @submit="onSubmit">
             <div class="grid grid-cols-1 gap-2">
               <FloatInputTextField name="username" label="Username"/>
-              <FloatInputTextField name="password" label="Password"/>
-              <Button type="submit" :loading="isSubmitting">Submit</Button>
+              <FloatInputPwdField name="password" label="Password"/>
+              <Button label="Submit" type="submit" :loading="isSubmitting"/>
             </div>
           </VeeForm>
         </template>

pages/user/list.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const { data, status, error } = useFetch('/api/internal/current/users/?limit=100&is_readonly=0', {
+  method: 'GET',
+  headers: {
+    'Accept': 'application/json',
+  }
+});
+
+</script>
+
+<template>
+  <div>
+    <!-- Causa useFetch va basically sempre in SSR gli stati diversi da success e error non appaiono mai. -->
+    <div v-if="status === 'pending'">
+      <p>LOADING...</p>
+    </div>
+    <div v-else-if="status === 'error'">
+      <p>ERROR: {{ error }}</p>
+    </div>
+    <div v-else-if="status ==='success'">
+      <p>DATA:</p>
+      <p>{{ data }}</p>
+    </div>
+    <div v-else-if="status === 'idle'">
+      <p>IDLE???</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       nuxt:
         specifier: ^3.16.0
         version: 3.16.0(@parcel/watcher@2.5.1)(db0@0.3.1)(eslint@9.22.0(jiti@2.4.2))(ioredis@5.6.0)(lightningcss@1.29.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.36.0)(terser@5.39.0)(typescript@5.8.2)(vite@6.2.2(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0)
+      primeicons:
+        specifier: ^7.0.0
+        version: 7.0.0
       primevue:
         specifier: ^4.3.2
         version: 4.3.2(vue@3.5.13(typescript@5.8.2))
@@ -3097,6 +3100,9 @@ packages:
     resolution: {integrity: sha512-4yf0QO/sllf/1zbZWYnvWw3NxCQwLXKzIj0G849LSufP15BXKM0rbD2Z3wVnkMfjdn/CB0Dpp444gYAACdsplg==}
     engines: {node: '>=18'}
 
+  primeicons@7.0.0:
+    resolution: {integrity: sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==}
+
   primevue@4.3.2:
     resolution: {integrity: sha512-TCCLu66k0pW8LmL8ho4w8evPEwc1agCP4ojY5OIsr2pqYepzBqlsSP2GSSv+Kv5EwWqg4ufh0bor+XVJl9sIVw==}
     engines: {node: '>=12.11.0'}
@@ -7336,6 +7342,8 @@ snapshots:
     dependencies:
       parse-ms: 4.0.0
 
+  primeicons@7.0.0: {}
+
   primevue@4.3.2(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       '@primeuix/styled': 0.5.0