app/src/components/CrudField.vue

@@ -10,21 +10,21 @@ interface Props {
 }
 
 const props = defineProps<Props>(); // Define props for the component
-// const { value, errorMessage, ...fieldAttrs } = useField(props.name); // Setup field logic using vee-validate
+const { value, errorMessage, ...fieldAttrs } = useField(props.name); // Setup field logic using vee-validate
 </script>
 
 <template>
   <ion-item>
     <Field name="name">
-<!--      <IonInput-->
-<!--          :label="label"-->
-<!--          :label-placement="labelPlacement || 'stacked'"-->
-<!--          v-model="value"-->
-<!--          v-bind="fieldAttrs"-->
-<!--          :type="type || 'text'"-->
-<!--      >-->
-<!--        <small v-if="errorMessage" class="error-message">{{ errorMessage }}</small>-->
-<!--      </IonInput>-->
+      <IonInput
+          :label="label"
+          :label-placement="labelPlacement || 'stacked'"
+          v-model="value"
+          v-bind="fieldAttrs"
+          :type="type || 'text'"
+      >
+        <small v-if="errorMessage" class="error-message">{{ errorMessage }}</small>
+      </IonInput>
     </Field>
   </ion-item>
 </template>

app/src/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { useStore } from 'vuex'
 import { RouteRecordRaw } from 'vue-router';
-import PlayerListVuew from '../views/PlayerListView.vue'
+import PlayerList from '../views/PlayerList.vue'
 import PlayerView from '../views/PlayerView.vue'
 import LoginView from '../views/LoginView.vue'
 import HomeView from '../views/HomeView.vue'
@@ -18,7 +18,7 @@ const routes: Array<RouteRecordRaw> = [
   { path: '/setup', component: SetupView },
   { path: '/home', component: HomeView },
   { path: '/profile', component: ProfileView },
-  { path: '/players', component: PlayerListVuew },
+  { path: '/players', component: PlayerList },
   { path: '/profile/:id', component: ProfileView },
   { path: '/bullpen', component: BullpenView },
   { path: '/stats', component: BullpenListView },

app/src/views/LoginView.vue

@@ -53,7 +53,6 @@ onMounted(() => {
 });
 
 const submit = handleSubmit((values, { resetForm }) => {
-  loginError.value = '';
   store.dispatch('auth/login', {
     email: values.email,
     password: values.password,
@@ -84,9 +83,9 @@ const onLogin = () => {
   });
 }
 
-// const changeServer = () => {
-//   router.push({ path: '/setup'});
-// }
+const changeServer = () => {
+  router.push({ path: '/setup'});
+}
 
 </script>
 
@@ -140,7 +139,7 @@ const onLogin = () => {
             </ion-item>
             <ion-button expand="block" class="ion-margin-top" type="submit">Login</ion-button>
           </form>
-          <p v-if="loginError" class="error-message">{{ loginError }}</p>
+          <p v-if="loginError" class="error-text">{{ loginError }}</p>
         </ion-card-content>
       </ion-card>
     </div>

app/src/views/PlayerList.vue

@@ -63,6 +63,16 @@ ion-label strong {
   text-overflow: ellipsis;
 }
 
+#container {
+  text-align: center;
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 #container strong {
   font-size: 20px;
   line-height: 26px;

app/tests/unit/example.spec.ts

@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils'
-import PlayerListVuew from '../../src/views/PlayerListView.vue'
+import PlayerList from '../../src/views/PlayerList.vue'
 import { describe, expect, test } from 'vitest'
 
-describe('PlayerListVuew.vue', () => {
+describe('PlayerList.vue', () => {
   test('renders home vue', () => {
-    const wrapper = mount(PlayerListVuew)
+    const wrapper = mount(PlayerList)
     expect(wrapper.text()).toMatch('Ready to create an app?')
   })
 })