feat: userProfile

resources/js/components/content/UserProfile.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/auth.store.ts'; // Adjust the import path to your store
+import { storeToRefs } from 'pinia';
+import { ref } from 'vue';
+
+const authStore = useAuthStore();
+const { userData } = storeToRefs(authStore);
+
+const emit = defineEmits([
+  'userProfilePage'
+])
+
+// Sample data for selection components
+const roles = ['Admin', 'User', 'Editor'];
+const timezones = [
+  'UTC',
+  'America/New_York',
+  'America/Chicago',
+  'America/Denver',
+  'America/Los_Angeles',
+  'Europe/London',
+  'Europe/Berlin',
+  'Asia/Tokyo',
+];
+
+const form = ref(null);
+
+const saveUser = async () => {
+  await authStore.updateUser();
+};
+
+</script>
+
+<template>
+  <v-form ref="form">
+    <v-container>
+      <v-row>
+        <v-col cols="12" md="6">
+          <v-text-field
+              v-model="userData.login"
+              label="Login"
+              required
+          ></v-text-field>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-text-field
+              v-model="userData.firstName"
+              label="First Name"
+          ></v-text-field>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-text-field
+              v-model="userData.lastName"
+              label="Last Name"
+          ></v-text-field>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-autocomplete
+              v-model="userData.timezone"
+              :items="timezones"
+              label="Timezone"
+          ></v-autocomplete>
+        </v-col>
+
+      <v-col cols="12" md="6">
+        <v-text-field
+            v-model="userData.email"
+            label="email"
+        ></v-text-field>
+      </v-col>
+
+        <v-col cols="12" md="6">
+          <v-text-field
+              v-model="userData.cellPhone"
+              label="cellPhone"
+          ></v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-btn color="primary" @click="saveUser">
+            Salva
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-form>
+</template>