botones cancel and save

src/pages/IndexPage.vue

@@ -1,16 +1,61 @@
 <template>
   <q-page class="flex flex-center">
-    <div class="column">
+    <div class="column q-pa-md q-gutter-sm">
       <div class="row">
-        {{ listaStore.pb.authStore.isValid ? "Es válido" : "No es válido" }}
+        <q-avatar size="96px">
+          <img
+            :src="
+              listaStore.pb.authStore.model.avatar.length > 0
+                ? listaStore.pb.getFileUrl(
+                    listaStore.pb.authStore.model,
+                    listaStore.pb.authStore.model.avatar
+                  )
+                : `https://cdn.quasar.dev/img/avatar.png`
+            "
+          />
+        </q-avatar>
+      </div>
+      <div class="row">
+        <q-file outlined v-model="imagen" label="Avatar" />
+      </div>
+      <div class="row">
+        <q-input
+          outlined
+          v-model="listaStore.pb.authStore.model.name"
+          label="Name"
+        />
+      </div>
+      <div class="row">
+        <q-input
+          outlined
+          v-model="listaStore.pb.authStore.model.username"
+          label="Username"
+        />
+      </div>
+      <div class="row">
+        <q-input
+          outlined
+          v-model="listaStore.pb.authStore.model.email"
+          label="email"
+        />
+      </div>
+      <div class="row">
+        <div class="col">
+          <q-btn round color="primary" icon="cancel" />
+        </div>
+        <div class="col">
+          <q-btn round color="secondary" icon="save" />
+        </div>
       </div>
-      <div class="row">{{ listaStore.pb.authStore.token }}</div>
-      <div class="row">{{ listaStore.pb.authStore.model }}</div>
     </div>
   </q-page>
 </template>
 
 <script setup>
+import { ref } from "vue";
 import { useListaStore } from "../stores/lista.js";
+
 const listaStore = useListaStore();
+
+const imagen = ref(null);
 </script>