fixes: pages with additional TS changes

Author: connorabbas

src/components/DeleteUserModal.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
 import { useRouter } from 'vue-router';
-import Password from 'primevue/password';
 import { useAuthStore } from '@/stores/auth';
 import { useAxiosForm } from '@/composables/useAxiosForm';
 import { useFlashMessage } from '@/composables/useFlashMessage.js';
+import Password from 'primevue/password';
 import InputErrors from '@/components/InputErrors.vue';
 
 const modalOpen = defineModel<boolean>({ default: false });
@@ -13,7 +13,7 @@ const authStore = useAuthStore();
 const router = useRouter();
 const { setFlashMessage } = useFlashMessage();
 
-type PasswordInputType = InstanceType<typeof Password>;
+type PasswordInputType = InstanceType<typeof Password> & { $el: HTMLElement };
 const passwordInput = useTemplateRef<PasswordInputType>('password-input');
 
 const {
@@ -38,7 +38,7 @@ const deleteAccount = () => {
             console.error('error');
             if (passwordInput.value && passwordInput.value?.$el) {
                 const passwordInputElement = passwordInput.value.$el.querySelector('input');
-                passwordInputElement.focus();
+                passwordInputElement?.focus();
             }
         },
         onFinish: () => resetFormFields(),

src/views/auth/ForgotPassword.vue

@@ -3,13 +3,15 @@ import { useTemplateRef, computed, onMounted } from 'vue';
 import { useAxiosForm } from '@/composables/useAxiosForm';
 import { useAuthStore } from '@/stores/auth';
 import { useFlashMessage } from '@/composables/useFlashMessage.js';
+import InputText from 'primevue/inputtext';
 import GuestAuthLayout from '@/layouts/GuestAuthLayout.vue';
 import InputErrors from '@/components/InputErrors.vue';
 
 const authStore = useAuthStore();
 const { flashMessages, setFlashMessage } = useFlashMessage();
 
-const emailInput = useTemplateRef('email-input');
+type InputTextType = InstanceType<typeof InputText> & { $el: HTMLElement };
+const emailInput = useTemplateRef<InputTextType>('email-input');
 
 const {
     data: formData,
@@ -34,7 +36,9 @@ const loading = computed(() => {
 });
 
 onMounted(() => {
-    emailInput.value.$el.focus();
+    if (emailInput.value) {
+        emailInput.value.$el.focus();
+    }
 });
 </script>
 

src/views/auth/Login.vue

@@ -4,14 +4,16 @@ import { useRouter } from 'vue-router';
 import { useAxiosForm } from '@/composables/useAxiosForm';
 import { useAuthStore } from '@/stores/auth';
 import { useFlashMessage } from '@/composables/useFlashMessage.js';
+import InputText from 'primevue/inputtext';
 import GuestAuthLayout from '@/layouts/GuestAuthLayout.vue';
 import InputErrors from '@/components/InputErrors.vue';
 
 const router = useRouter();
 const authStore = useAuthStore();
 const { flashMessages } = useFlashMessage();
 
-const emailInput = useTemplateRef('email-input');
+type InputTextType = InstanceType<typeof InputText> & { $el: HTMLElement };
+const emailInput = useTemplateRef<InputTextType>('email-input');
 
 const {
     data: formData,
@@ -28,7 +30,7 @@ const submit = () => {
     authStore.fetchCsrfCookie().then(() => {
         submitForm('/login', {
             onSuccess: () => {
-                const redirectPath = router.currentRoute.value.query?.redirect;
+                const redirectPath = router.currentRoute.value.query?.redirect as string;
                 if (redirectPath) {
                     router.push({ path: redirectPath });
                 } else {
@@ -47,7 +49,9 @@ const loading = computed(() => {
 });
 
 onMounted(() => {
-    emailInput.value.$el.focus();
+    if (emailInput.value) {
+        emailInput.value.$el.focus();
+    }
 });
 </script>
 

src/views/auth/Register.vue

@@ -3,13 +3,15 @@ import { useTemplateRef, computed, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAxiosForm } from '@/composables/useAxiosForm';
 import { useAuthStore } from '@/stores/auth';
+import InputText from 'primevue/inputtext';
 import GuestAuthLayout from '@/layouts/GuestAuthLayout.vue';
 import InputErrors from '@/components/InputErrors.vue';
 
 const router = useRouter();
 const authStore = useAuthStore();
 
-const nameInput = useTemplateRef('name-input');
+type InputTextType = InstanceType<typeof InputText> & { $el: HTMLElement };
+const nameInput = useTemplateRef<InputTextType>('name-input');
 
 const {
     data: formData,
@@ -37,7 +39,9 @@ const loading = computed(() => {
 });
 
 onMounted(() => {
-    nameInput.value.$el.focus();
+    if (nameInput.value) {
+        nameInput.value.$el.focus();
+    }
 });
 </script>
 

src/views/auth/ResetPassword.vue

@@ -4,6 +4,7 @@ import { useAxiosForm } from '@/composables/useAxiosForm';
 import { useAuthStore } from '@/stores/auth';
 import { useRoute, useRouter } from 'vue-router';
 import { useFlashMessage } from '@/composables/useFlashMessage.js';
+import InputText from 'primevue/inputtext';
 import GuestAuthLayout from '@/layouts/GuestAuthLayout.vue';
 import InputErrors from '@/components/InputErrors.vue';
 
@@ -19,7 +20,8 @@ const route = useRoute();
 const authStore = useAuthStore();
 const { setFlashMessage } = useFlashMessage();
 
-const emailInput = useTemplateRef('email-input');
+type InputTextType = InstanceType<typeof InputText> & { $el: HTMLElement };
+const emailInput = useTemplateRef<InputTextType>('email-input');
 
 const {
     data: formData,
@@ -28,7 +30,7 @@ const {
     post: submitForm,
 } = useAxiosForm({
     token: props.token,
-    email: route.query?.email ?? '',
+    email: route.query?.email as string ?? '',
     password: '',
     password_confirmation: '',
 });
@@ -49,7 +51,9 @@ const loading = computed(() => {
 });
 
 onMounted(() => {
-    emailInput.value.$el.focus();
+    if (emailInput.value) {
+        emailInput.value.$el.focus();
+    }
 });
 </script>
 

src/views/settings/Password.vue

@@ -8,6 +8,7 @@ import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/UserSettingsLayout.vue';
 import InputErrors from '@/components/InputErrors.vue';
 
+
 const breadcrumbs = [
     { label: 'Dashboard', route: { name: 'dashboard' } },
     { label: 'Password settings' },
@@ -16,8 +17,9 @@ const breadcrumbs = [
 const toast = useToast();
 const authStore = useAuthStore();
 
-const currentPasswordInput = useTemplateRef('current-password-input');
-const newPasswordInput = useTemplateRef('new-password-input');
+type PasswordInputType = InstanceType<typeof Password> & { $el: HTMLElement };
+const currentPasswordInput = useTemplateRef<PasswordInputType>('current-password-input');
+const newPasswordInput = useTemplateRef<PasswordInputType>('new-password-input');
 
 const {
     data: formData,
@@ -47,17 +49,16 @@ const submit = () => {
             await nextTick();
             if (validationErrors.value?.password) {
                 resetFormFields('password', 'password_confirmation');
-                const newPasswordInputElement = newPasswordInput.value.$el.querySelector('input');
-                if (newPasswordInputElement) {
-                    newPasswordInputElement.focus();
+                if (newPasswordInput.value && newPasswordInput.value?.$el) {
+                    const newPasswordInputElement = newPasswordInput.value.$el.querySelector('input');
+                    newPasswordInputElement?.focus();
                 }
             }
             if (validationErrors.value?.current_password) {
                 resetFormFields('current_password');
-                const currentPasswordInputElement = currentPasswordInput.value.$el.querySelector('input');
-                console.log(currentPasswordInput.value.$el);
-                if (currentPasswordInputElement) {
-                    currentPasswordInputElement.focus();
+                if (currentPasswordInput.value && currentPasswordInput.value?.$el) {
+                    const currentPasswordInputElement = currentPasswordInput.value.$el.querySelector('input');
+                    currentPasswordInputElement?.focus();
                 }
             }
         },

src/views/settings/Profile.vue

@@ -27,8 +27,8 @@ const {
     processing: updating,
     patch: submitForm,
 } = useAxiosForm({
-    name: authStore.user.name || '',
-    email: authStore.user.email || '',
+    name: authStore.user?.name || '',
+    email: authStore.user?.email || '',
 });
 const submit = () => {
     submitForm('/profile', {
@@ -95,7 +95,7 @@ const resendVerifyEmail = () => {
                                 <InputErrors :errors="validationErrors?.email" />
                             </div>
 
-                            <div v-if="authStore.mustVerifyEmail && authStore.user.email_verified_at === null">
+                            <div v-if="authStore.mustVerifyEmail && authStore.user?.email_verified_at === null">
                                 <p class="text-sm mt-2">
                                     Your email address is unverified.
                                     <a