From 11348cbd1caaf4bebf56435a5415ee99211596ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20K=C3=BChl?= <skuehl1972@gmail.com>
Date: Sun, 1 Jun 2025 13:31:30 +0200
Subject: [PATCH] fixed player/coach views

---
 app/src/router/index.ts              |   2 +-
 app/src/services/PlayerService.ts    |  27 ++
 app/src/types/User.ts                |   6 +-
 app/src/views/BullpenListView.vue    |   9 +-
 app/src/views/BullpenSummaryView.vue |   4 +-
 app/src/views/HomeView.vue           |  28 +-
 app/src/views/LoginView.vue          |   2 +
 app/src/views/PlayerList.vue         |  23 +-
 app/src/views/PlayerView.vue         | 526 ++++++++++++++-------------
 app/src/views/ProfileView.vue        |  25 +-
 10 files changed, 387 insertions(+), 265 deletions(-)

diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index f2b6f1e..7351304 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -19,7 +19,7 @@ const routes: Array<RouteRecordRaw> = [
   { path: '/home', component: HomeView },
   { path: '/profile', component: ProfileView },
   { path: '/players', component: PlayerList },
-  // { path: '/player', component: PlayerView },
+  { path: '/profile/:id', component: ProfileView },
   { path: '/bullpen', component: BullpenView },
   { path: '/stats', component: BullpenListView },
   { path: '/summary', component: BullpenSummaryView },
diff --git a/app/src/services/PlayerService.ts b/app/src/services/PlayerService.ts
index c68e3c4..8316cd4 100644
--- a/app/src/services/PlayerService.ts
+++ b/app/src/services/PlayerService.ts
@@ -9,6 +9,33 @@ class PlayerService extends ApiService<Player> {
         super('players');
     }
 
+    public emptyPlayer(): Player {
+        return {
+            id: 0,
+            gender: 'male',
+            bats: 'right',
+            throws: 'right',
+            height: 187,
+            weight: 84,
+            state: 'active',
+            jerseyNumber: 23,
+            createdAt: new Date(),
+            updatedAt: new Date(),
+            user: {
+                id: 0,
+                auth: {
+                    email: 'test@de.de',
+                    password: 'test$123'
+                },
+                firstName: 'Demo',
+                lastName: 'Player',
+                dateOfBirth: new Date(),
+                roles: ['player'],
+                createdAt: new Date(),
+                updatedAt: new Date()
+            }
+        };
+    }
     public fetchByUserId(userId: number): Promise<Player> {
         return api
             .get(`/${this.name}/user/${userId}`, { headers: authHeader() })
diff --git a/app/src/types/User.ts b/app/src/types/User.ts
index 8be326d..fe8459d 100644
--- a/app/src/types/User.ts
+++ b/app/src/types/User.ts
@@ -1,11 +1,13 @@
 export default interface User {
     id: number,
-    email: string,
     firstName: string,
     lastName: string,
     dateOfBirth: Date,
     roles: string[],
     createdAt: Date,
     updatedAt: Date,
-    auth: { email: string }
+    auth: {
+        email: string,
+        password: string
+    }
 }
diff --git a/app/src/views/BullpenListView.vue b/app/src/views/BullpenListView.vue
index 0993b14..079ea74 100644
--- a/app/src/views/BullpenListView.vue
+++ b/app/src/views/BullpenListView.vue
@@ -2,14 +2,21 @@
 import {
   IonButton,
   IonCard,
+  IonCardHeader,
   IonCardTitle,
   IonCardSubtitle,
+  IonCardContent,
   IonContent,
   IonFooter,
   IonHeader,
   IonPage,
   IonTitle,
-  IonToolbar, IonLabel, IonList, IonItem, IonIcon, IonBadge
+  IonToolbar,
+  IonLabel,
+  IonList,
+  IonItem,
+  IonIcon,
+  IonBadge
 } from "@ionic/vue";
 import {
   baseballOutline
diff --git a/app/src/views/BullpenSummaryView.vue b/app/src/views/BullpenSummaryView.vue
index eb84926..e9306cf 100644
--- a/app/src/views/BullpenSummaryView.vue
+++ b/app/src/views/BullpenSummaryView.vue
@@ -26,7 +26,7 @@ const router = useRouter();
 const store = useStore();
 
 const isAuthenticated = computed(() => store.state.auth.isAuthenticated);
-const pitcher = computed(() => store.state.auth.user);
+const player = computed(() => store.state.player.player);
 const pitchTypes = computed(() => store.state.pitchTypes.pitchTypes);
 const bullpen = computed(() => store.state.bullpen);
 
@@ -52,7 +52,7 @@ const gotoHome = () => {
   <ion-page>
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-title v-if="isAuthenticated">Bullpen Summary {{ pitcher.firstName }} {{ pitcher.lastName }}</ion-title>
+        <ion-title v-if="isAuthenticated">Bullpen Summary {{ player.firstName }} {{ player.lastName }}</ion-title>
         <ion-title v-else>Bullpen Summary</ion-title>
       </ion-toolbar>
     </ion-header>
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index 1928410..f116b78 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue';
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonButton, IonIcon } from '@ionic/vue';
-import { playOutline, statsChartOutline, personOutline, logOutOutline, personAddOutline } from 'ionicons/icons';
+import {
+  playOutline,
+  statsChartOutline,
+  personOutline,
+  logOutOutline,
+  personAddOutline,
+  ellipsisHorizontal, ellipsisVertical
+} from 'ionicons/icons';
 import {useStore} from "vuex";
 import {useRouter} from "vue-router";
 import BullpenSessionService from "@/services/BullpenSessionService";
@@ -21,7 +28,7 @@ if (user.value === undefined || user.value === null || user.value === '') {
 
 const startBullpen = () => {
   if (TokenService.isPlayer()) {
-    store.dispatch('player/selectPlayer', user).then(() => {
+    store.dispatch('player/selectPlayer', user.value).then(() => {
       store.dispatch("bullpen/start", user.value);
       router.push({ path: '/bullpen' });
     });
@@ -38,7 +45,7 @@ const showStats = () => {
 };
 
 const showProfile = () => {
-  router.push({ path: `/player/view/${user.value.id}`});
+  router.push({ path: `/profile/${user.value.id}`});
 };
 
 const logout = () => {
@@ -61,6 +68,19 @@ const addPlayer = () => {
       <ion-toolbar>
         <ion-title v-if="isAuthenticated">Home of {{ user.firstName }} {{ user.lastName }}</ion-title>
         <ion-title v-else>Home</ion-title>
+<!--        <ion-buttons slot="primary">-->
+<!--          <ion-button id="user-menu-trigger">-->
+<!--            <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>-->
+<!--          </ion-button>-->
+<!--          <ion-popover trigger="user-menu-trigger" trigger-action="click">-->
+<!--            <ion-content class="ion-padding">-->
+<!--              <ion-list>-->
+<!--                <ion-item button @click="showProfile">Profile</ion-item>-->
+<!--                <ion-item button @click="logout">Logout</ion-item>-->
+<!--              </ion-list>-->
+<!--            </ion-content>-->
+<!--          </ion-popover>-->
+<!--        </ion-buttons>-->
       </ion-toolbar>
     </ion-header>
 
@@ -82,7 +102,7 @@ const addPlayer = () => {
           <ion-icon :icon="playOutline" slot="start" />
           Start Bullpen Session
         </ion-button>
-        <ion-button @click="showStats" class="grid-button">
+        <ion-button v-if="TokenService.isPlayer()" @click="showStats" class="grid-button">
           <ion-icon :icon="statsChartOutline" slot="start" />
           Show Bullpen Stats
         </ion-button>
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 7f0fbf8..5143cab 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -9,6 +9,7 @@ import {
   IonCardHeader,
   IonCardTitle,
   IonCardContent,
+  IonInputPasswordToggle,
 } from "@ionic/vue";
 
 import {Field, useForm} from 'vee-validate';
@@ -132,6 +133,7 @@ const changeServer = () => {
                     id="password"
                     name="password"
                     type="password">
+                  <ion-input-password-toggle slot="end"></ion-input-password-toggle>
                 </ion-input>
               </Field>
             </ion-item>
diff --git a/app/src/views/PlayerList.vue b/app/src/views/PlayerList.vue
index 78f0a12..e2d0742 100644
--- a/app/src/views/PlayerList.vue
+++ b/app/src/views/PlayerList.vue
@@ -2,7 +2,8 @@
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useStore } from 'vuex'
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonLabel } from '@ionic/vue';
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonLabel, IonIcon, IonText } from '@ionic/vue';
+import {personCircle} from "ionicons/icons";
 import PlayerService from "@/services/PlayerService";
 import Player from "@/types/Player";
 
@@ -27,20 +28,24 @@ const selectPlayer = (player: Player) => {
   <ion-page>
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-title>Pitchers</ion-title>
+        <ion-title>Players</ion-title>
       </ion-toolbar>
     </ion-header>
 
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
-          <ion-title size="large">Pitchers</ion-title>
+          <ion-title size="large">Player List</ion-title>
         </ion-toolbar>
       </ion-header>
 
       <ion-list>
         <ion-item v-for="(player, index) in players" :key="index" button @click="selectPlayer(player)">
-          <ion-label>{{ player.user.firstName }} {{ player.user.lastName }}</ion-label>
+          <ion-icon aria-hidden="true" :icon="personCircle" slot="start"></ion-icon>
+          <ion-label>
+            <strong>{{ player.user.firstName }} {{ player.user.lastName }} <ion-badge slot="start">{{ player.jerseyNumber}}</ion-badge></strong>
+            <ion-text>Bats: {{player.bats}} / Throws: {{player.throws}}</ion-text>
+          </ion-label>
         </ion-item>
       </ion-list>
     </ion-content>
@@ -48,6 +53,16 @@ const selectPlayer = (player: Player) => {
 </template>
 
 <style scoped>
+ion-label strong {
+  display: block;
+
+  max-width: calc(100% - 60px);
+
+  overflow: hidden;
+
+  text-overflow: ellipsis;
+}
+
 #container {
   text-align: center;
 
diff --git a/app/src/views/PlayerView.vue b/app/src/views/PlayerView.vue
index 3be3b8e..acafe28 100644
--- a/app/src/views/PlayerView.vue
+++ b/app/src/views/PlayerView.vue
@@ -5,15 +5,16 @@ import {
   IonToolbar,
   IonTitle,
   IonContent,
+  IonGrid,
+  IonRow,
+  IonCol,
   IonItem,
   IonInput,
+  IonIcon,
   IonButton,
-  IonCard,
-  IonCardHeader,
-  IonCardTitle,
-  IonCardContent,
   IonSelect,
-  IonSelectOption
+  IonSelectOption,
+  IonInputPasswordToggle,
 } from '@ionic/vue';
 import { Field, useForm } from 'vee-validate';
 import * as yup from 'yup';
@@ -23,37 +24,10 @@ import Player from '@/types/Player';
 // import CrudField from '@/components/CrudField.vue'
 import PlayerService from '@/services/PlayerService';
 import {useRoute, useRouter} from 'vue-router';
-
-const props = defineProps<{ player?: Player }>();
-
-const defaultPlayer: Player = {
-  id: 0,
-  gender: 'male',
-  bats: 'right',
-  throws: 'right',
-  height: 0,
-  weight: 0,
-  state: 'active',
-  jerseyNumber: 0,
-  createdAt: new Date(),
-  updatedAt: new Date(),
-  user: {
-    id: 0,
-    email: '',
-    firstName: '',
-    lastName: '',
-    dateOfBirth: new Date(),
-    roles: [],
-    createdAt: new Date(),
-    updatedAt: new Date(),
-    auth: {
-      email: ''
-    }
-  }
-}
+import {save, stop} from "ionicons/icons";
 
 // Computed reactive player object: Either use the provided player or initialize with default
-const player = ref<Player>(props.player ? { ...props.player } : { ...defaultPlayer });
+const player = ref<Player>( PlayerService.emptyPlayer() );
 const route = useRoute();
 const router = useRouter();
 
@@ -68,24 +42,32 @@ const mode = computed(() => {
 const formattedDate = ref(player.value.user.dateOfBirth.toISOString().split('T')[0]);
 
 const schema = yup.object({
-  email: yup
-      .string()
-      .email('Invalid email address')
-      .required('E-Mail is required'),
-  firstName: yup.string().required('First name is required'),
-  lastName: yup.string().required('Last name is required'),
-  dateOfBirth: yup
-      .date()
-      .max(dayjs().subtract(5, 'year').toDate(), 'Player must be at least 5 years old')
-      .required('Geburtsdatum ist erforderlich'),
+  user: yup.object({
+    auth: yup.object({
+      email: yup.string().email('Invalid email address').required('E-Mail is required'),
+      password: yup.string()
+          .min(8, 'Minimum 8 characters')
+          .matches(/\d/, 'Must include a number')
+          .matches(/[^A-Za-z\d]/, 'Must include a special character')
+          .required('Password is required')
+    }),
+    firstName: yup.string().required('First name is required'),
+    lastName: yup.string().required('Last name is required'),
+    dateOfBirth: yup
+        .date()
+        .max(dayjs()
+            .subtract(5, 'year')
+            .toDate(), 'Player must be at least 5 years old')
+        .required('Date of birth is required'),
+  }),
   gender: yup.string().required('Gender is required'),
   bats: yup
       .string()
-      .oneOf(['R', 'L', 'S'], 'Invalid selection')
+      .oneOf(['right', 'left', 'both'], 'Invalid selection')
       .required('Batting hand is required'),
   throws: yup
       .string()
-      .oneOf(['R', 'L'], 'Invalid selection')
+      .oneOf(['right', 'left'], 'Invalid selection')
       .required('Throwing hand is required'),
   jerseyNumber: yup
       .number()
@@ -105,67 +87,47 @@ const schema = yup.object({
       .required('Height is required'),
 });
 
-const { errors, resetForm, handleSubmit, defineField } = useForm({
+const { errors, resetForm, handleSubmit, defineField, setFieldValue } = useForm({
   validationSchema: schema,
   initialValues: player.value
 });
 
-// Watch for changes in props.player to reset form when editing
-// watch(
-//     () => route.params.id || route.query.id,
-//     (newId) => {
-//       if (newId) {
-//         fetchPlayerById(Number(newId)); // Fetch player when the ID changes
-//       }
-//     }
-// );
-
 onMounted(() => {
   if (mode.value === 'view' || mode.value === 'edit') {
-    PlayerService.fetchById(Number(id))
+    PlayerService
+        .fetchById(Number(id))
         .then((response) => {
           player.value = response;
+          resetForm({ values: { ...player.value } }); // Reset form with fetched data
+          formattedDate.value = dayjs(player.value.user.dateOfBirth).format('YYYY-MM-DD');
         })
         .catch((error) => {
           console.error('Failed to fetch player:', error);
         });
+  } else {
+    console.log('Creating new player');
+    resetForm({values: {...player.value}}); // Reset form with fetched data
+    formattedDate.value = dayjs(player.value.user.dateOfBirth).format('YYYY-MM-DD');
   }
-  resetForm({ values: { ...player.value } }); // Reset form with fetched data
-  formattedDate.value = dayjs(player.value.user.dateOfBirth).format('YYYY-MM-DD');
 });
 
-// const fetchPlayerById = async (id: number) => {
-//   try {
-//     const data = await PlayerService.fetchByUserId(id); // Fetch the player from the API
-//     player.value = { ...data }; // Load the API response into the form
-//     resetForm({ values: { ...player.value } }); // Reset form with fetched data
-//     formattedDate.value = dayjs(player.value.user.dateOfBirth).format('YYYY-MM-DD');
-//     isEdit.value = true; // Set to edit mode
-//   } catch (error) {
-//     console.error('Error fetching player data:', error);
-//   }
-// };
-
-// Submit logic: Differentiate between create and update
-const submit = handleSubmit((values: Player) => {
+const submit = handleSubmit((values) => {
   if (mode.value === 'edit') {
-    console.log('Updating player:', values); // Replace with update logic
+    console.log('Updating player:', values);
     // PlayerService.(player.value.id, player.value).then(() => router.push('/players'));
   } else if (mode.value === 'create') {
-    console.log('Creating player:', values); // Replace with create logic
-    PlayerService.save(player.value).then(() => router.push('/home'));
+    console.log('Creating player:', values);
+    PlayerService.save(values).then(() => router.push('/home'));
   }
+}, ({errors}) => {
+  console.log(errors);
 });
 
-const onDateChange = (value: string) => {
-  formattedDate.value = value; // Update formatted string
-  player.value.user.dateOfBirth = new Date(value); // Convert to Date object and update
-};
-
 const [email, emailAttrs] = defineField('user.auth.email');
+const [password, passwordAttrs] = defineField('user.auth.password');
 const [firstName, firstNameAttrs] = defineField('user.firstName');
 const [lastName, lastNameAttrs] = defineField('user.lastName');
-// const [dateOfBirth, dateOfBirthAttrs] = defineField('formattedDate');
+const [dateOfBirth/*, dateOfBirthAttrs*/] = defineField('user.dateOfBirth');
 const [gender, genderAttrs] = defineField('gender');
 const [bats, batsAttrs] = defineField('bats');
 const [throws, throwsAttrs] = defineField('throws');
@@ -173,6 +135,35 @@ const [jerseyNumber, jerseyNumberAttrs] = defineField('jerseyNumber');
 const [weight, weightAttrs] = defineField('weight');
 const [height, heightAttrs] = defineField('height');
 
+const onDateChange = (value: string) => {
+  const input = value as string;
+  if (input) {
+    const parsedDate = dayjs(input, 'YYYY-MM-DD', true);
+    if (parsedDate.isValid()) {
+      setFieldValue('user.dateOfBirth', parsedDate.toDate());
+    } else {
+      setFieldValue('user.dateOfBirth', new Date());
+    }
+  } else {
+    setFieldValue('user.dateOfBirth', new Date());
+  }
+
+  formattedDate.value = value; // Update formatted string
+
+  player.value.user.dateOfBirth = new Date(value); // Convert to Date object and update
+};
+
+
+// Convert current value to yyyy-MM-dd for input
+const dateValueString = computed(() => {
+  return dayjs(dateOfBirth.value).isValid()
+      ? dayjs(dateOfBirth.value).format('YYYY-MM-DD')
+      : '';
+});
+
+const cancel = () => {
+  router.push('/home');
+}
 </script>
 
 <template>
@@ -189,171 +180,210 @@ const [height, heightAttrs] = defineField('height');
 
     <ion-content class="ion-padding">
       <form @submit="submit">
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>Personal Data</ion-card-title>
-          </ion-card-header>
-          <ion-card-content>
-<!--            <CrudField name="user.email" label="Email" labelPlacement="floating"/>-->
-            <ion-item>
-              <Field name="email">
-                <ion-input
-                    readonly: true
-                    label="E-Mail"
-                    label-placement="stacked"
-                    v-model="email"
-                    v-bind="emailAttrs"
-                    type="email"
-                >
-                  <small v-if="errors['user.email']" class="error-message">{{ errors['user.email'] }}</small>
-                </ion-input>
-              </Field>
-            </ion-item>
-
-            <ion-item>
-              <Field name="firstName">
-                <ion-input
-                    readonly: true
-                    label="First Name"
-                    label-placement="stacked"
-                    v-model="firstName"
-                    v-bind="firstNameAttrs"
-                    type="text"
-                >
-                  <small v-if="errors['user.firstName']" class="error-message">{{ errors['user.firstName'] }}</small>
-                </ion-input>
-              </Field>
-            </ion-item>
-
-            <ion-item>
-              <Field name="lastName">
-                <ion-input
-                    label="Last Name"
-                    label-placement="stacked"
-                    v-model="lastName"
-                    v-bind="lastNameAttrs"
-                    type="text"
-                >
-                  <small v-if="errors['user.lastName']" class="error-message">{{ errors['user.lastName'] }}</small>
-                </ion-input>
-              </Field>
-            </ion-item>
-
-            <ion-item>
-              <Field name="dateOfBirth">
-                <ion-input
-                    label="Date of Birth"
-                    label-placement="stacked"
-                    v-model="formattedDate"
-                    @input="onDateChange($event.target.value)"
-                    type="date"
-                >
-                  <small v-if="errors['user.dateOfBirth']" class="error-message">{{ errors['user.dateOfBirth'] }}</small>
-                </ion-input>
-              </Field>
-            </ion-item>
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>Player Data</ion-card-title>
-          </ion-card-header>
-          <ion-card-content>
-            <ion-item>
-              <Field name="gender">
-                <ion-select
-                    label="Gender"
-                    label-placement="stacked"
-                    v-model="gender"
-                    v-bind="genderAttrs"
-                    interface="action-sheet"
-                >
-                  <ion-select-option value="male">Male</ion-select-option>
-                  <ion-select-option value="female">Female</ion-select-option>
-                  <ion-select-option value="other">Diverse</ion-select-option>
-                </ion-select>
-              </Field>
-            </ion-item>
-
-            <ion-item>
-              <Field name="bats">
-                <ion-select
-                    label="Bats"
-                    label-placement="stacked"
-                    v-model="bats"
-                    v-bind="batsAttrs"
-                    interface="action-sheet"
-                >
-                  <ion-select-option value="right">Right</ion-select-option>
-                  <ion-select-option value="left">Left</ion-select-option>
-                  <ion-select-option value="both">Switch</ion-select-option>
-                </ion-select>
-              </Field>
-            </ion-item>
-
-            <ion-item>
-              <Field name="throws">
-                <ion-select
-                    label="Throws"
-                    label-placement="stacked"
-                    v-model="throws"
-                    v-bind="throwsAttrs"
-                    interface="action-sheet"
-                >
-                  <ion-select-option value="right">Right</ion-select-option>
-                  <ion-select-option value="left">Left</ion-select-option>
-                </ion-select>
-              </Field>
-            </ion-item>
-
-            <ion-item>
-              <Field name="jerseyNumber">
-                <ion-input
-                    label="Jersey Number"
-                    label-placement="stacked"
-                    v-model="jerseyNumber"
-                    v-bind="jerseyNumberAttrs"
-                    type="number"
-                >
-                  <small v-if="errors.jerseyNumber" class="error-message">{{ errors.jerseyNumber }}</small>
-                </ion-input>
-              </Field>
-            </ion-item>
-
-            <ion-item>
-              <Field name="weight">
-                <ion-input
-                    label="Weight (kg)"
-                    label-placement="stacked"
-                    v-model="weight"
-                    v-bind="weightAttrs"
-                    type="number"
-                >
-                  <small v-if="errors.weight" class="error-message">{{ errors.weight }}</small>
-                </ion-input>
-              </Field>
-            </ion-item>
-
-            <ion-item>
-              <Field name="height">
-                <ion-input
-                    label="Height (cm)"
-                    label-placement="stacked"
-                    v-model="height"
-                    v-bind="heightAttrs"
-                    type="number"
-                >
-                  <small v-if="errors.height" class="error-message">{{ errors.height }}</small>
-                </ion-input>
-              </Field>
-            </ion-item>
-          </ion-card-content>
-        </ion-card>
-
-        <div class="ion-padding-vertical">
-          <ion-button type="submit" expand="block">Save</ion-button>
-        </div>
+        <ion-grid>
+          <ion-row>
+            <ion-col>
+              <ion-item>
+                <Field name="user.auth.email">
+                  <ion-input required
+                      label="E-Mail"
+                      label-placement="stacked"
+                      v-model="email"
+                      v-bind="emailAttrs"
+                      type="email"
+                  >
+                    <small v-if="errors['user.auth.email']" class="error-message">{{ errors['user.auth.email'] }}</small>
+                  </ion-input>
+                </Field>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+          <ion-row v-if="mode === 'create'">
+            <ion-col>
+              <ion-item>
+                <Field name="user.auth.password">
+                  <ion-input required
+                      label="Password"
+                      label-placement="stacked"
+                      v-model="password"
+                      v-bind="passwordAttrs"
+                      type="password"
+                  >
+                    <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+                    <small v-if="errors['user.auth.password']" class="error-message">{{ errors['user.auth.password'] }}</small>
+                  </ion-input>
+                </Field>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <ion-item>
+                <Field name="user.firstName">
+                  <ion-input
+                      label="First Name"
+                      label-placement="stacked"
+                      v-model="firstName"
+                      v-bind="firstNameAttrs"
+                      type="text">
+                    <small v-if="errors['user.firstName']" class="error-message">{{ errors['user.firstName'] }}</small>
+                  </ion-input>
+                </Field>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <ion-item>
+                <Field name="user.lastName">
+                  <ion-input
+                      label="Last Name"
+                      label-placement="stacked"
+                      v-model="lastName"
+                      v-bind="lastNameAttrs"
+                      type="text"
+                  >
+                    <small v-if="errors['user.lastName']" class="error-message">{{ errors['user.lastName'] }}</small>
+                  </ion-input>
+                </Field>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <ion-item>
+                <Field name="user.dateOfBirth">
+                  <ion-input
+                      label="Date of Birth"
+                      label-placement="stacked"
+                      :value="dateValueString"
+                      @input="onDateChange($event.target.value)"
+                      type="date"
+                  >
+                    <small v-if="errors['user.dateOfBirth']" class="error-message">{{ errors['user.dateOfBirth'] }}</small>
+                  </ion-input>
+                </Field>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <ion-item>
+                <Field name="gender">
+                  <ion-select
+                      label="Gender"
+                      label-placement="stacked"
+                      v-model="gender"
+                      v-bind="genderAttrs"
+                      interface="action-sheet"
+                  >
+                    <ion-select-option value="male">Male</ion-select-option>
+                    <ion-select-option value="female">Female</ion-select-option>
+                    <ion-select-option value="other">Diverse</ion-select-option>
+                  </ion-select>
+                </Field>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <ion-item>
+                <Field name="bats">
+                  <ion-select
+                      label="Bats"
+                      label-placement="stacked"
+                      v-model="bats"
+                      v-bind="batsAttrs"
+                      interface="action-sheet"
+                  >
+                    <ion-select-option value="right">Right</ion-select-option>
+                    <ion-select-option value="left">Left</ion-select-option>
+                    <ion-select-option value="both">Switch</ion-select-option>
+                  </ion-select>
+                </Field>
+              </ion-item>
+            </ion-col>
+            <ion-col>
+              <ion-item>
+                <Field name="throws">
+                  <ion-select
+                      label="Throws"
+                      label-placement="stacked"
+                      v-model="throws"
+                      v-bind="throwsAttrs"
+                      interface="action-sheet"
+                  >
+                    <ion-select-option value="right">Right</ion-select-option>
+                    <ion-select-option value="left">Left</ion-select-option>
+                  </ion-select>
+                </Field>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <ion-item>
+                <Field name="jerseyNumber">
+                  <ion-input
+                      label="Jersey Number"
+                      label-placement="stacked"
+                      v-model="jerseyNumber"
+                      v-bind="jerseyNumberAttrs"
+                      type="number"
+                  >
+                    <small v-if="errors.jerseyNumber" class="error-message">{{ errors.jerseyNumber }}</small>
+                  </ion-input>
+                </Field>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <ion-item>
+                <Field name="weight">
+                  <ion-input
+                      label="Weight (kg)"
+                      label-placement="stacked"
+                      v-model="weight"
+                      v-bind="weightAttrs"
+                      type="number"
+                  >
+                    <small v-if="errors.weight" class="error-message">{{ errors.weight }}</small>
+                  </ion-input>
+                </Field>
+              </ion-item>
+            </ion-col>
+            <ion-col>
+              <ion-item>
+                <Field name="height">
+                  <ion-input
+                      label="Height (cm)"
+                      label-placement="stacked"
+                      v-model="height"
+                      v-bind="heightAttrs"
+                      type="number"
+                  >
+                    <small v-if="errors.height" class="error-message">{{ errors.height }}</small>
+                  </ion-input>
+                </Field>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <ion-button expand="block" color="danger" @click="cancel">
+                Cancel
+                <ion-icon slot="end" :icon="stop"></ion-icon>
+              </ion-button>
+            </ion-col>
+            <ion-col>
+              <ion-button type="submit" expand="block" color="success">
+                Save
+                <ion-icon slot="end" :icon="save"></ion-icon>
+              </ion-button>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
       </form>
     </ion-content>
   </ion-page>
diff --git a/app/src/views/ProfileView.vue b/app/src/views/ProfileView.vue
index b6a022f..5449941 100644
--- a/app/src/views/ProfileView.vue
+++ b/app/src/views/ProfileView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {logOutOutline, personOutline, playOutline, statsChartOutline} from "ionicons/icons";
+import {personOutline} from "ionicons/icons";
 import {
   IonAvatar,
   IonButton,
@@ -11,19 +11,38 @@ import {
   IonTitle,
   IonToolbar
 } from "@ionic/vue";
-import {computed, ref} from "vue";
+import {computed, onMounted, ref} from "vue";
 
 import {useStore} from "vuex";
-import {useRouter} from "vue-router";
+import {useRoute, useRouter} from "vue-router";
+import PlayerService from "@/services/PlayerService";
+// import dayjs from "dayjs";
 
 const userImage = ref(null);
 
 const router = useRouter();
+const route = useRoute();
 const store = useStore();
 
+const id = route.params.id as string | undefined; // `id` parameter from route
+
 const pitcher = computed(() => store.state.auth.user);
 const isAuthenticated = computed(() => store.state.auth.isAuthenticated);
 
+onMounted(() => {
+  PlayerService
+      .fetchByUserId(Number(id))
+      .then((response) => {
+        console.log('Fetched player:', response);
+        // player.value = response;
+        // resetForm({ values: { ...player.value } }); // Reset form with fetched data
+        // formattedDate.value = dayjs(player.value.user.dateOfBirth).format('YYYY-MM-DD');
+      })
+      .catch((error) => {
+        console.error('Failed to fetch player:', error);
+      });
+});
+
 const gotoHome = () => {
   router.push({path: '/home'});
 }