From 51b3d803e9b317e360c31dd938e99041bb186c5e Mon Sep 17 00:00:00 2001
From: Jess Archer <jess@jessarcher.com>
Date: Tue, 8 Feb 2022 11:01:18 +1000
Subject: [PATCH 1/4] Transition to <script setup>

---
 .../resources/js/Components/Button.vue        |  20 ++-
 .../resources/js/Components/Checkbox.vue      |  48 +++---
 .../resources/js/Components/Dropdown.vue      |  96 ++++++------
 .../resources/js/Components/DropdownLink.vue  |  14 +-
 .../resources/js/Components/Input.vue         |  28 ++--
 .../resources/js/Components/InputError.vue    |  10 +-
 .../resources/js/Components/Label.vue         |  10 +-
 .../resources/js/Components/NavLink.vue       |  32 ++--
 .../js/Components/ResponsiveNavLink.vue       |  32 ++--
 .../js/Components/ValidationErrors.vue        |  23 ++-
 .../resources/js/Layouts/Authenticated.vue    |  38 ++---
 .../resources/js/Layouts/Guest.vue            |  17 +--
 .../js/Pages/Auth/ConfirmPassword.vue         |  93 +++++-------
 .../js/Pages/Auth/ForgotPassword.vue          | 102 ++++++-------
 .../resources/js/Pages/Auth/Login.vue         | 128 +++++++---------
 .../resources/js/Pages/Auth/Register.vue      | 137 ++++++++----------
 .../resources/js/Pages/Auth/ResetPassword.vue | 126 +++++++---------
 .../resources/js/Pages/Auth/VerifyEmail.vue   |  89 +++++-------
 .../resources/js/Pages/Dashboard.vue          |  17 +--
 .../resources/js/Pages/Welcome.vue            |  28 ++--
 20 files changed, 456 insertions(+), 632 deletions(-)

diff --git a/stubs/inertia-vue/resources/js/Components/Button.vue b/stubs/inertia-vue/resources/js/Components/Button.vue
index c5c15f86d..6d4697e32 100644
--- a/stubs/inertia-vue/resources/js/Components/Button.vue
+++ b/stubs/inertia-vue/resources/js/Components/Button.vue
@@ -1,16 +1,14 @@
+<script setup>
+defineProps({
+    type: {
+        type: String,
+        default: 'submit',
+    },
+});
+</script>
+
 <template>
     <button :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150">
         <slot />
     </button>
 </template>
-
-<script>
-export default {
-    props: {
-        type: {
-            type: String,
-            default: 'submit',
-        },
-    }
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Components/Checkbox.vue b/stubs/inertia-vue/resources/js/Components/Checkbox.vue
index 7bd5a4d30..0d82f3c39 100644
--- a/stubs/inertia-vue/resources/js/Components/Checkbox.vue
+++ b/stubs/inertia-vue/resources/js/Components/Checkbox.vue
@@ -1,32 +1,30 @@
-<template>
-    <input type="checkbox" :value="value" v-model="proxyChecked"
-           class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
-</template>
+<script setup>
+import { computed } from 'vue';
 
-<script>
-export default {
-    emits: ['update:checked'],
+const emit = defineEmits(['update:checked']);
 
-    props: {
-        checked: {
-            type: [Array, Boolean],
-            default: false,
-        },
-        value: {
-            default: null,
-        },
+const props = defineProps({
+    checked: {
+        type: [Array, Boolean],
+        default: false,
+    },
+    value: {
+        default: null,
     },
+});
 
-    computed: {
-        proxyChecked: {
-            get() {
-                return this.checked;
-            },
+const proxyChecked = computed({
+    get() {
+        return props.checked;
+    },
 
-            set(val) {
-                this.$emit("update:checked", val);
-            },
-        },
+    set(val) {
+        emit("update:checked", val);
     },
-}
+});
 </script>
+
+<template>
+    <input type="checkbox" :value="value" v-model="proxyChecked"
+           class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+</template>
diff --git a/stubs/inertia-vue/resources/js/Components/Dropdown.vue b/stubs/inertia-vue/resources/js/Components/Dropdown.vue
index 092cd6ad0..cf600a449 100644
--- a/stubs/inertia-vue/resources/js/Components/Dropdown.vue
+++ b/stubs/inertia-vue/resources/js/Components/Dropdown.vue
@@ -1,3 +1,46 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+    align: {
+        default: 'right'
+    },
+    width: {
+        default: '48'
+    },
+    contentClasses: {
+        default: () => ['py-1', 'bg-white']
+    }
+});
+
+const closeOnEscape = (e) => {
+    if (open.value && e.key === 'Escape') {
+        open.value = false;
+    }
+};
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape));
+onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
+
+const widthClass = computed(() => {
+    return {
+        '48': 'w-48',
+    }[props.width.toString()];
+});
+
+const alignmentClasses = computed(() => {
+    if (props.align === 'left') {
+        return 'origin-top-left left-0';
+    } else if (props.align === 'right') {
+        return 'origin-top-right right-0';
+    } else {
+        return 'origin-top';
+    }
+});
+
+const open = ref(false);
+</script>
+
 <template>
     <div class="relative">
         <div @click="open = ! open">
@@ -26,56 +69,3 @@
         </transition>
     </div>
 </template>
-
-<script>
-import { onMounted, onUnmounted, ref } from 'vue'
-
-export default {
-    props: {
-        align: {
-            default: 'right'
-        },
-        width: {
-            default: '48'
-        },
-        contentClasses: {
-            default: () => ['py-1', 'bg-white']
-        }
-    },
-
-    setup() {
-        let open = ref(false)
-
-        const closeOnEscape = (e) => {
-            if (open.value && e.key === 'Escape') {
-                open.value = false
-            }
-        }
-
-        onMounted(() => document.addEventListener('keydown', closeOnEscape))
-        onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
-
-        return {
-            open,
-        }
-    },
-
-    computed: {
-        widthClass() {
-            return {
-                '48': 'w-48',
-            }[this.width.toString()]
-        },
-
-        alignmentClasses() {
-            if (this.align === 'left') {
-                return 'origin-top-left left-0'
-            } else if (this.align === 'right') {
-                return 'origin-top-right right-0'
-            } else {
-                return 'origin-top'
-            }
-        },
-    }
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Components/DropdownLink.vue b/stubs/inertia-vue/resources/js/Components/DropdownLink.vue
index bf453fc12..7e995b78e 100644
--- a/stubs/inertia-vue/resources/js/Components/DropdownLink.vue
+++ b/stubs/inertia-vue/resources/js/Components/DropdownLink.vue
@@ -1,15 +1,9 @@
+<script setup>
+import { Link } from '@inertiajs/inertia-vue3';
+</script>
+
 <template>
     <Link class="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">
         <slot />
     </Link>
 </template>
-
-<script>
-import { Link } from '@inertiajs/inertia-vue3';
-
-export default {
-    components: {
-        Link,
-    }
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Components/Input.vue b/stubs/inertia-vue/resources/js/Components/Input.vue
index 393e7e6d5..cebf8a3d9 100644
--- a/stubs/inertia-vue/resources/js/Components/Input.vue
+++ b/stubs/inertia-vue/resources/js/Components/Input.vue
@@ -1,17 +1,19 @@
-<template>
-    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" ref="input">
-</template>
+<script setup>
+import { ref } from 'vue';
+
+defineProps(['modelValue']);
+
+defineEmits(['update:modelValue']);
 
-<script>
-export default {
-    props: ['modelValue'],
+const input = ref(null);
 
-    emits: ['update:modelValue'],
+const focus = () => input.focus();
 
-    methods: {
-        focus() {
-            this.$refs.input.focus()
-        }
-    }
-}
+defineExpose({
+    focus,
+});
 </script>
+
+<template>
+    <input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" ref="input">
+</template>
diff --git a/stubs/inertia-vue/resources/js/Components/InputError.vue b/stubs/inertia-vue/resources/js/Components/InputError.vue
index 91bf90f6d..2bb0b8ecf 100644
--- a/stubs/inertia-vue/resources/js/Components/InputError.vue
+++ b/stubs/inertia-vue/resources/js/Components/InputError.vue
@@ -1,3 +1,7 @@
+<script setup>
+defineProps(['message']);
+</script>
+
 <template>
     <div v-show="message">
         <p class="text-sm text-red-600">
@@ -5,9 +9,3 @@
         </p>
     </div>
 </template>
-
-<script>
-export default {
-    props: ['message']
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Components/Label.vue b/stubs/inertia-vue/resources/js/Components/Label.vue
index 87e8c71a1..7a9676326 100644
--- a/stubs/inertia-vue/resources/js/Components/Label.vue
+++ b/stubs/inertia-vue/resources/js/Components/Label.vue
@@ -1,12 +1,10 @@
+<script setup>
+defineProps(['value']);
+</script>
+
 <template>
     <label class="block font-medium text-sm text-gray-700">
         <span v-if="value">{{ value }}</span>
         <span v-else><slot /></span>
     </label>
 </template>
-
-<script>
-export default {
-    props: ['value']
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Components/NavLink.vue b/stubs/inertia-vue/resources/js/Components/NavLink.vue
index 8b910c946..180d07d01 100644
--- a/stubs/inertia-vue/resources/js/Components/NavLink.vue
+++ b/stubs/inertia-vue/resources/js/Components/NavLink.vue
@@ -1,25 +1,17 @@
+<script setup>
+import { computed } from 'vue';
+import { Link } from '@inertiajs/inertia-vue3';
+
+const props = defineProps(['href', 'active']);
+
+const classes = computed(() => props.active
+    ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition  duration-150 ease-in-out'
+    : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out'
+);
+</script>
+
 <template>
     <Link :href="href" :class="classes">
         <slot />
     </Link>
 </template>
-
-<script>
-import { Link } from '@inertiajs/inertia-vue3';
-
-export default {
-    components: {
-        Link,
-    },
-
-    props: ['href', 'active'],
-
-    computed: {
-        classes() {
-            return this.active
-                ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition  duration-150 ease-in-out'
-                : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out'
-        }
-    }
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Components/ResponsiveNavLink.vue b/stubs/inertia-vue/resources/js/Components/ResponsiveNavLink.vue
index 18ecf31f3..21ff81a2a 100644
--- a/stubs/inertia-vue/resources/js/Components/ResponsiveNavLink.vue
+++ b/stubs/inertia-vue/resources/js/Components/ResponsiveNavLink.vue
@@ -1,25 +1,17 @@
+<script setup>
+import { computed } from 'vue';
+import { Link } from '@inertiajs/inertia-vue3';
+
+const props = defineProps(['href', 'active']);
+
+const classes = computed(() => props.active
+    ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
+    : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out'
+);
+</script>
+
 <template>
     <Link :href="href" :class="classes">
         <slot />
     </Link>
 </template>
-
-<script>
-import { Link } from '@inertiajs/inertia-vue3';
-
-export default {
-    components: {
-        Link,
-    },
-
-    props: ['href', 'active'],
-
-    computed: {
-        classes() {
-            return this.active
-                ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
-                : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out'
-        }
-    }
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Components/ValidationErrors.vue b/stubs/inertia-vue/resources/js/Components/ValidationErrors.vue
index 42dca4bda..fa4853162 100644
--- a/stubs/inertia-vue/resources/js/Components/ValidationErrors.vue
+++ b/stubs/inertia-vue/resources/js/Components/ValidationErrors.vue
@@ -1,3 +1,12 @@
+<script setup>
+import { computed } from 'vue';
+import { usePage } from '@inertiajs/inertia-vue3';
+
+const errors = computed(() => usePage().props.value.errors);
+
+const hasErrors = computed(() => Object.keys(errors.value).length > 0);
+</script>
+
 <template>
     <div v-if="hasErrors">
         <div class="font-medium text-red-600">Whoops! Something went wrong.</div>
@@ -7,17 +16,3 @@
         </ul>
     </div>
 </template>
-
-<script>
-export default {
-    computed: {
-        errors() {
-            return this.$page.props.errors
-        },
-
-        hasErrors() {
-            return Object.keys(this.errors).length > 0
-        },
-    }
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Layouts/Authenticated.vue b/stubs/inertia-vue/resources/js/Layouts/Authenticated.vue
index ec3bf66a5..3b0071e77 100644
--- a/stubs/inertia-vue/resources/js/Layouts/Authenticated.vue
+++ b/stubs/inertia-vue/resources/js/Layouts/Authenticated.vue
@@ -1,3 +1,15 @@
+<script setup>
+import { ref } from 'vue';
+import BreezeApplicationLogo from '@/Components/ApplicationLogo.vue';
+import BreezeDropdown from '@/Components/Dropdown.vue';
+import BreezeDropdownLink from '@/Components/DropdownLink.vue';
+import BreezeNavLink from '@/Components/NavLink.vue';
+import BreezeResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
+import { Link } from '@inertiajs/inertia-vue3';
+
+const showingNavigationDropdown = ref(false);
+</script>
+
 <template>
     <div>
         <div class="min-h-screen bg-gray-100">
@@ -96,29 +108,3 @@
         </div>
     </div>
 </template>
-
-<script>
-import BreezeApplicationLogo from '@/Components/ApplicationLogo.vue'
-import BreezeDropdown from '@/Components/Dropdown.vue'
-import BreezeDropdownLink from '@/Components/DropdownLink.vue'
-import BreezeNavLink from '@/Components/NavLink.vue'
-import BreezeResponsiveNavLink from '@/Components/ResponsiveNavLink.vue'
-import { Link } from '@inertiajs/inertia-vue3';
-
-export default {
-    components: {
-        BreezeApplicationLogo,
-        BreezeDropdown,
-        BreezeDropdownLink,
-        BreezeNavLink,
-        BreezeResponsiveNavLink,
-        Link,
-    },
-
-    data() {
-        return {
-            showingNavigationDropdown: false,
-        }
-    },
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Layouts/Guest.vue b/stubs/inertia-vue/resources/js/Layouts/Guest.vue
index e886c806f..69d30919f 100644
--- a/stubs/inertia-vue/resources/js/Layouts/Guest.vue
+++ b/stubs/inertia-vue/resources/js/Layouts/Guest.vue
@@ -1,3 +1,8 @@
+<script setup>
+import BreezeApplicationLogo from '@/Components/ApplicationLogo.vue';
+import { Link } from '@inertiajs/inertia-vue3';
+</script>
+
 <template>
     <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
         <div>
@@ -11,15 +16,3 @@
         </div>
     </div>
 </template>
-
-<script>
-import BreezeApplicationLogo from '@/Components/ApplicationLogo.vue'
-import { Link } from '@inertiajs/inertia-vue3';
-
-export default {
-    components: {
-        BreezeApplicationLogo,
-        Link,
-    }
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue
index 4e8385832..63ab3f172 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -1,59 +1,44 @@
-<template>
-    <Head title="Confirm Password" />
-
-    <div class="mb-4 text-sm text-gray-600">
-        This is a secure area of the application. Please confirm your password before continuing.
-    </div>
+<script setup>
+import { computed } from 'vue';
+import BreezeButton from '@/Components/Button.vue';
+import BreezeGuestLayout from '@/Layouts/Guest.vue';
+import BreezeInput from '@/Components/Input.vue';
+import BreezeLabel from '@/Components/Label.vue';
+import BreezeValidationErrors from '@/Components/ValidationErrors.vue';
+import { Head, useForm } from '@inertiajs/inertia-vue3';
+
+const form = useForm({
+    password: '',
+});
+
+const submit = () => {
+    form.post(route('password.confirm'), {
+        onFinish: () => form.reset(),
+    })
+};
+</script>
 
-    <BreezeValidationErrors class="mb-4" />
+<template>
+    <BreezeGuestLayout>
+        <Head title="Confirm Password" />
 
-    <form @submit.prevent="submit">
-        <div>
-            <BreezeLabel for="password" value="Password" />
-            <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" autofocus />
+        <div class="mb-4 text-sm text-gray-600">
+            This is a secure area of the application. Please confirm your password before continuing.
         </div>
 
-        <div class="flex justify-end mt-4">
-            <BreezeButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                Confirm
-            </BreezeButton>
-        </div>
-    </form>
+        <BreezeValidationErrors class="mb-4" />
+
+        <form @submit.prevent="submit">
+            <div>
+                <BreezeLabel for="password" value="Password" />
+                <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" autofocus />
+            </div>
+
+            <div class="flex justify-end mt-4">
+                <BreezeButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                    Confirm
+                </BreezeButton>
+            </div>
+        </form>
+    </BreezeGuestLayout>
 </template>
-
-<script>
-import BreezeButton from '@/Components/Button.vue'
-import BreezeGuestLayout from '@/Layouts/Guest.vue'
-import BreezeInput from '@/Components/Input.vue'
-import BreezeLabel from '@/Components/Label.vue'
-import BreezeValidationErrors from '@/Components/ValidationErrors.vue'
-import { Head } from '@inertiajs/inertia-vue3';
-
-export default {
-    layout: BreezeGuestLayout,
-
-    components: {
-        BreezeButton,
-        BreezeInput,
-        BreezeLabel,
-        BreezeValidationErrors,
-        Head,
-    },
-
-    data() {
-        return {
-            form: this.$inertia.form({
-                password: '',
-            })
-        }
-    },
-
-    methods: {
-        submit() {
-            this.form.post(this.route('password.confirm'), {
-                onFinish: () => this.form.reset(),
-            })
-        }
-    }
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue
index 7832ebbb9..0a5b93dae 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/ForgotPassword.vue
@@ -1,65 +1,49 @@
-<template>
-    <Head title="Forgot Password" />
-
-    <div class="mb-4 text-sm text-gray-600">
-        Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.
-    </div>
-
-    <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
-        {{ status }}
-    </div>
+<script setup>
+import BreezeButton from '@/Components/Button.vue';
+import BreezeGuestLayout from '@/Layouts/Guest.vue';
+import BreezeInput from '@/Components/Input.vue';
+import BreezeLabel from '@/Components/Label.vue';
+import BreezeValidationErrors from '@/Components/ValidationErrors.vue';
+import { Head, useForm } from '@inertiajs/inertia-vue3';
+
+defineProps({
+    status: String,
+});
+
+const form = useForm({
+    email: '',
+});
+
+const submit = () => {
+    form.post(route('password.email'));
+};
+</script>
 
-    <BreezeValidationErrors class="mb-4" />
+<template>
+    <BreezeGuestLayout>
+        <Head title="Forgot Password" />
 
-    <form @submit.prevent="submit">
-        <div>
-            <BreezeLabel for="email" value="Email" />
-            <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
+        <div class="mb-4 text-sm text-gray-600">
+            Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.
         </div>
 
-        <div class="flex items-center justify-end mt-4">
-            <BreezeButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                Email Password Reset Link
-            </BreezeButton>
+        <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
+            {{ status }}
         </div>
-    </form>
-</template>
-
-<script>
-import BreezeButton from '@/Components/Button.vue'
-import BreezeGuestLayout from '@/Layouts/Guest.vue'
-import BreezeInput from '@/Components/Input.vue'
-import BreezeLabel from '@/Components/Label.vue'
-import BreezeValidationErrors from '@/Components/ValidationErrors.vue'
-import { Head } from '@inertiajs/inertia-vue3';
 
-export default {
-    layout: BreezeGuestLayout,
-
-    components: {
-        BreezeButton,
-        BreezeInput,
-        BreezeLabel,
-        BreezeValidationErrors,
-        Head,
-    },
-
-    props: {
-        status: String,
-    },
-
-    data() {
-        return {
-            form: this.$inertia.form({
-                email: ''
-            })
-        }
-    },
-
-    methods: {
-        submit() {
-            this.form.post(this.route('password.email'))
-        }
-    }
-}
-</script>
+        <BreezeValidationErrors class="mb-4" />
+
+        <form @submit.prevent="submit">
+            <div>
+                <BreezeLabel for="email" value="Email" />
+                <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
+            </div>
+
+            <div class="flex items-center justify-end mt-4">
+                <BreezeButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                    Email Password Reset Link
+                </BreezeButton>
+            </div>
+        </form>
+    </BreezeGuestLayout>
+</template>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue b/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
index ebc57c61d..76002b0f5 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/Login.vue
@@ -1,85 +1,67 @@
-<template>
-    <Head title="Log in" />
-
-    <BreezeValidationErrors class="mb-4" />
+<script setup>
+import BreezeButton from '@/Components/Button.vue';
+import BreezeCheckbox from '@/Components/Checkbox.vue';
+import BreezeGuestLayout from '@/Layouts/Guest.vue';
+import BreezeInput from '@/Components/Input.vue';
+import BreezeLabel from '@/Components/Label.vue';
+import BreezeValidationErrors from '@/Components/ValidationErrors.vue';
+import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
 
-    <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
-        {{ status }}
-    </div>
+defineProps({
+    canResetPassword: Boolean,
+    status: String,
+});
 
-    <form @submit.prevent="submit">
-        <div>
-            <BreezeLabel for="email" value="Email" />
-            <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
-        </div>
+const form = useForm({
+    email: '',
+    password: '',
+    remember: false
+});
 
-        <div class="mt-4">
-            <BreezeLabel for="password" value="Password" />
-            <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" />
-        </div>
+const submit = () => {
+    form.post(route('login'), {
+        onFinish: () => form.reset('password'),
+    });
+};
+</script>
 
-        <div class="block mt-4">
-            <label class="flex items-center">
-                <BreezeCheckbox name="remember" v-model:checked="form.remember" />
-                <span class="ml-2 text-sm text-gray-600">Remember me</span>
-            </label>
-        </div>
+<template>
+    <BreezeGuestLayout>
+        <Head title="Log in" />
 
-        <div class="flex items-center justify-end mt-4">
-            <Link v-if="canResetPassword" :href="route('password.request')" class="underline text-sm text-gray-600 hover:text-gray-900">
-                Forgot your password?
-            </Link>
+        <BreezeValidationErrors class="mb-4" />
 
-            <BreezeButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                Log in
-            </BreezeButton>
+        <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
+            {{ status }}
         </div>
-    </form>
-</template>
-
-<script>
-import BreezeButton from '@/Components/Button.vue'
-import BreezeCheckbox from '@/Components/Checkbox.vue'
-import BreezeGuestLayout from '@/Layouts/Guest.vue'
-import BreezeInput from '@/Components/Input.vue'
-import BreezeLabel from '@/Components/Label.vue'
-import BreezeValidationErrors from '@/Components/ValidationErrors.vue'
-import { Head, Link } from '@inertiajs/inertia-vue3';
 
-export default {
-    layout: BreezeGuestLayout,
+        <form @submit.prevent="submit">
+            <div>
+                <BreezeLabel for="email" value="Email" />
+                <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
+            </div>
 
-    components: {
-        BreezeButton,
-        BreezeCheckbox,
-        BreezeInput,
-        BreezeLabel,
-        BreezeValidationErrors,
-        Head,
-        Link,
-    },
+            <div class="mt-4">
+                <BreezeLabel for="password" value="Password" />
+                <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="current-password" />
+            </div>
 
-    props: {
-        canResetPassword: Boolean,
-        status: String,
-    },
+            <div class="block mt-4">
+                <label class="flex items-center">
+                    <BreezeCheckbox name="remember" v-model:checked="form.remember" />
+                    <span class="ml-2 text-sm text-gray-600">Remember me</span>
+                </label>
+            </div>
 
-    data() {
-        return {
-            form: this.$inertia.form({
-                email: '',
-                password: '',
-                remember: false
-            })
-        }
-    },
+            <div class="flex items-center justify-end mt-4">
+                <Link v-if="canResetPassword" :href="route('password.request')" class="underline text-sm text-gray-600 hover:text-gray-900">
+                    Forgot your password?
+                </Link>
 
-    methods: {
-        submit() {
-            this.form.post(this.route('login'), {
-                onFinish: () => this.form.reset('password'),
-            })
-        }
-    }
-}
-</script>
+                <BreezeButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                    Log in
+                </BreezeButton>
+            </div>
+        </form>
+    </BreezeGuestLayout>
+</template>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue b/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue
index 05e7be159..67c83bf89 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/Register.vue
@@ -1,79 +1,62 @@
-<template>
-    <Head title="Register" />
-
-    <BreezeValidationErrors class="mb-4" />
-
-    <form @submit.prevent="submit">
-        <div>
-            <BreezeLabel for="name" value="Name" />
-            <BreezeInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required autofocus autocomplete="name" />
-        </div>
-
-        <div class="mt-4">
-            <BreezeLabel for="email" value="Email" />
-            <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autocomplete="username" />
-        </div>
-
-        <div class="mt-4">
-            <BreezeLabel for="password" value="Password" />
-            <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="new-password" />
-        </div>
-
-        <div class="mt-4">
-            <BreezeLabel for="password_confirmation" value="Confirm Password" />
-            <BreezeInput id="password_confirmation" type="password" class="mt-1 block w-full" v-model="form.password_confirmation" required autocomplete="new-password" />
-        </div>
-
-        <div class="flex items-center justify-end mt-4">
-            <Link :href="route('login')" class="underline text-sm text-gray-600 hover:text-gray-900">
-                Already registered?
-            </Link>
+<script setup>
+import BreezeButton from '@/Components/Button.vue';
+import BreezeGuestLayout from '@/Layouts/Guest.vue';
+import BreezeInput from '@/Components/Input.vue';
+import BreezeLabel from '@/Components/Label.vue';
+import BreezeValidationErrors from '@/Components/ValidationErrors.vue';
+import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
+
+const form = useForm({
+    name: '',
+    email: '',
+    password: '',
+    password_confirmation: '',
+    terms: false,
+});
+
+const submit = () => {
+    form.post(route('register'), {
+        onFinish: () => form.reset('password', 'password_confirmation'),
+    });
+};
+</script>
 
-            <BreezeButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                Register
-            </BreezeButton>
-        </div>
-    </form>
+<template>
+    <BreezeGuestLayout>
+        <Head title="Register" />
+
+        <BreezeValidationErrors class="mb-4" />
+
+        <form @submit.prevent="submit">
+            <div>
+                <BreezeLabel for="name" value="Name" />
+                <BreezeInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required autofocus autocomplete="name" />
+            </div>
+
+            <div class="mt-4">
+                <BreezeLabel for="email" value="Email" />
+                <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autocomplete="username" />
+            </div>
+
+            <div class="mt-4">
+                <BreezeLabel for="password" value="Password" />
+                <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="new-password" />
+            </div>
+
+            <div class="mt-4">
+                <BreezeLabel for="password_confirmation" value="Confirm Password" />
+                <BreezeInput id="password_confirmation" type="password" class="mt-1 block w-full" v-model="form.password_confirmation" required autocomplete="new-password" />
+            </div>
+
+            <div class="flex items-center justify-end mt-4">
+                <Link :href="route('login')" class="underline text-sm text-gray-600 hover:text-gray-900">
+                    Already registered?
+                </Link>
+
+                <BreezeButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                    Register
+                </BreezeButton>
+            </div>
+        </form>
+    </BreezeGuestLayout>
 </template>
-
-<script>
-import BreezeButton from '@/Components/Button.vue'
-import BreezeGuestLayout from '@/Layouts/Guest.vue'
-import BreezeInput from '@/Components/Input.vue'
-import BreezeLabel from '@/Components/Label.vue'
-import BreezeValidationErrors from '@/Components/ValidationErrors.vue'
-import { Head, Link } from '@inertiajs/inertia-vue3';
-
-export default {
-    layout: BreezeGuestLayout,
-
-    components: {
-        BreezeButton,
-        BreezeInput,
-        BreezeLabel,
-        BreezeValidationErrors,
-        Head,
-        Link,
-    },
-
-    data() {
-        return {
-            form: this.$inertia.form({
-                name: '',
-                email: '',
-                password: '',
-                password_confirmation: '',
-                terms: false,
-            })
-        }
-    },
-
-    methods: {
-        submit() {
-            this.form.post(this.route('register'), {
-                onFinish: () => this.form.reset('password', 'password_confirmation'),
-            })
-        }
-    }
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue b/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue
index ebbbd9fc4..3c60703b2 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/ResetPassword.vue
@@ -1,73 +1,57 @@
-<template>
-    <Head title="Reset Password" />
-
-    <BreezeValidationErrors class="mb-4" />
-
-    <form @submit.prevent="submit">
-        <div>
-            <BreezeLabel for="email" value="Email" />
-            <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
-        </div>
-
-        <div class="mt-4">
-            <BreezeLabel for="password" value="Password" />
-            <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="new-password" />
-        </div>
-
-        <div class="mt-4">
-            <BreezeLabel for="password_confirmation" value="Confirm Password" />
-            <BreezeInput id="password_confirmation" type="password" class="mt-1 block w-full" v-model="form.password_confirmation" required autocomplete="new-password" />
-        </div>
+<script setup>
+import BreezeButton from '@/Components/Button.vue';
+import BreezeGuestLayout from '@/Layouts/Guest.vue';
+import BreezeInput from '@/Components/Input.vue';
+import BreezeLabel from '@/Components/Label.vue';
+import BreezeValidationErrors from '@/Components/ValidationErrors.vue';
+import { Head, useForm } from '@inertiajs/inertia-vue3';
+
+const props = defineProps({
+    email: String,
+    token: String,
+});
+
+const form = useForm({
+    token: props.token,
+    email: props.email,
+    password: '',
+    password_confirmation: '',
+});
+
+const submit = () => {
+    form.post(route('password.update'), {
+        onFinish: () => form.reset('password', 'password_confirmation'),
+    });
+};
+</script>
 
-        <div class="flex items-center justify-end mt-4">
-            <BreezeButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                Reset Password
-            </BreezeButton>
-        </div>
-    </form>
+<template>
+    <BreezeGuestLayout>
+        <Head title="Reset Password" />
+
+        <BreezeValidationErrors class="mb-4" />
+
+        <form @submit.prevent="submit">
+            <div>
+                <BreezeLabel for="email" value="Email" />
+                <BreezeInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required autofocus autocomplete="username" />
+            </div>
+
+            <div class="mt-4">
+                <BreezeLabel for="password" value="Password" />
+                <BreezeInput id="password" type="password" class="mt-1 block w-full" v-model="form.password" required autocomplete="new-password" />
+            </div>
+
+            <div class="mt-4">
+                <BreezeLabel for="password_confirmation" value="Confirm Password" />
+                <BreezeInput id="password_confirmation" type="password" class="mt-1 block w-full" v-model="form.password_confirmation" required autocomplete="new-password" />
+            </div>
+
+            <div class="flex items-center justify-end mt-4">
+                <BreezeButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                    Reset Password
+                </BreezeButton>
+            </div>
+        </form>
+    </BreezeGuestLayout>
 </template>
-
-<script>
-import BreezeButton from '@/Components/Button.vue'
-import BreezeGuestLayout from '@/Layouts/Guest.vue'
-import BreezeInput from '@/Components/Input.vue'
-import BreezeLabel from '@/Components/Label.vue'
-import BreezeValidationErrors from '@/Components/ValidationErrors.vue'
-import { Head } from '@inertiajs/inertia-vue3';
-
-export default {
-    layout: BreezeGuestLayout,
-
-    components: {
-        BreezeButton,
-        BreezeInput,
-        BreezeLabel,
-        BreezeValidationErrors,
-        Head,
-    },
-
-    props: {
-        email: String,
-        token: String,
-    },
-
-    data() {
-        return {
-            form: this.$inertia.form({
-                token: this.token,
-                email: this.email,
-                password: '',
-                password_confirmation: '',
-            })
-        }
-    },
-
-    methods: {
-        submit() {
-            this.form.post(this.route('password.update'), {
-                onFinish: () => this.form.reset('password', 'password_confirmation'),
-            })
-        }
-    }
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Pages/Auth/VerifyEmail.vue b/stubs/inertia-vue/resources/js/Pages/Auth/VerifyEmail.vue
index 2bc1fed9d..a1bb8c0d3 100644
--- a/stubs/inertia-vue/resources/js/Pages/Auth/VerifyEmail.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Auth/VerifyEmail.vue
@@ -1,59 +1,42 @@
-<template>
-    <Head title="Email Verification" />
+<script setup>
+import { computed } from 'vue';
+import BreezeButton from '@/Components/Button.vue';
+import BreezeGuestLayout from '@/Layouts/Guest.vue';
+import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
+
+const props = defineProps({
+    status: String,
+});
+
+const form = useForm();
 
-    <div class="mb-4 text-sm text-gray-600">
-        Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.
-    </div>
+const submit = () => {
+    form.post(route('verification.send'));
+};
 
-    <div class="mb-4 font-medium text-sm text-green-600" v-if="verificationLinkSent" >
-        A new verification link has been sent to the email address you provided during registration.
-    </div>
+const verificationLinkSent = computed(() => props.status === 'verification-link-sent');
+</script>
 
-    <form @submit.prevent="submit">
-        <div class="mt-4 flex items-center justify-between">
-            <BreezeButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                Resend Verification Email
-            </BreezeButton>
+<template>
+    <BreezeGuestLayout>
+        <Head title="Email Verification" />
 
-            <Link :href="route('logout')" method="post" as="button" class="underline text-sm text-gray-600 hover:text-gray-900">Log Out</Link>
+        <div class="mb-4 text-sm text-gray-600">
+            Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.
         </div>
-    </form>
-</template>
 
-<script>
-import BreezeButton from '@/Components/Button.vue'
-import BreezeGuestLayout from '@/Layouts/Guest.vue'
-import { Head, Link } from '@inertiajs/inertia-vue3';
-
-export default {
-    layout: BreezeGuestLayout,
-
-    components: {
-        BreezeButton,
-        Head,
-        Link,
-    },
-
-    props: {
-        status: String,
-    },
-
-    data() {
-        return {
-            form: this.$inertia.form()
-        }
-    },
-
-    methods: {
-        submit() {
-            this.form.post(this.route('verification.send'))
-        },
-    },
-
-    computed: {
-        verificationLinkSent() {
-            return this.status === 'verification-link-sent';
-        }
-    }
-}
-</script>
+        <div class="mb-4 font-medium text-sm text-green-600" v-if="verificationLinkSent" >
+            A new verification link has been sent to the email address you provided during registration.
+        </div>
+
+        <form @submit.prevent="submit">
+            <div class="mt-4 flex items-center justify-between">
+                <BreezeButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+                    Resend Verification Email
+                </BreezeButton>
+
+                <Link :href="route('logout')" method="post" as="button" class="underline text-sm text-gray-600 hover:text-gray-900">Log Out</Link>
+            </div>
+        </form>
+    </BreezeGuestLayout>
+</template>
diff --git a/stubs/inertia-vue/resources/js/Pages/Dashboard.vue b/stubs/inertia-vue/resources/js/Pages/Dashboard.vue
index e758b0eb4..bc0e58856 100644
--- a/stubs/inertia-vue/resources/js/Pages/Dashboard.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Dashboard.vue
@@ -1,3 +1,8 @@
+<script setup>
+import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
+import { Head } from '@inertiajs/inertia-vue3';
+</script>
+
 <template>
     <Head title="Dashboard" />
 
@@ -19,15 +24,3 @@
         </div>
     </BreezeAuthenticatedLayout>
 </template>
-
-<script>
-import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue'
-import { Head } from '@inertiajs/inertia-vue3';
-
-export default {
-    components: {
-        BreezeAuthenticatedLayout,
-        Head,
-    },
-}
-</script>
diff --git a/stubs/inertia-vue/resources/js/Pages/Welcome.vue b/stubs/inertia-vue/resources/js/Pages/Welcome.vue
index 34c2b3fac..613c1e6da 100644
--- a/stubs/inertia-vue/resources/js/Pages/Welcome.vue
+++ b/stubs/inertia-vue/resources/js/Pages/Welcome.vue
@@ -1,3 +1,14 @@
+<script setup>
+import { Head, Link } from '@inertiajs/inertia-vue3';
+
+defineProps({
+    canLogin: Boolean,
+    canRegister: Boolean,
+    laravelVersion: String,
+    phpVersion: String,
+})
+</script>
+
 <template>
     <Head title="Welcome" />
 
@@ -175,20 +186,3 @@
         }
     }
 </style>
-
-<script>
-import { Head, Link } from '@inertiajs/inertia-vue3';
-
-export default {
-    components: {
-      Head,
-      Link,
-    },
-    props: {
-        canLogin: Boolean,
-        canRegister: Boolean,
-        laravelVersion: String,
-        phpVersion: String,
-    },
-}
-</script>

From 4fb0f17a3daa3918861ec75624aafb74e0bdacc0 Mon Sep 17 00:00:00 2001
From: Taylor Otwell <taylor@laravel.com>
Date: Tue, 8 Feb 2022 12:14:30 -0600
Subject: [PATCH 2/4] update inertia version

---
 src/Console/InstallsInertiaStacks.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Console/InstallsInertiaStacks.php b/src/Console/InstallsInertiaStacks.php
index e85917bdb..a595e4b69 100644
--- a/src/Console/InstallsInertiaStacks.php
+++ b/src/Console/InstallsInertiaStacks.php
@@ -14,7 +14,7 @@ trait InstallsInertiaStacks
     protected function installInertiaVueStack()
     {
         // Install Inertia...
-        $this->requireComposerPackages('inertiajs/inertia-laravel:^0.4.3', 'laravel/sanctum:^2.8', 'tightenco/ziggy:^1.0');
+        $this->requireComposerPackages('inertiajs/inertia-laravel:^0.5.4', 'laravel/sanctum:^2.8', 'tightenco/ziggy:^1.0');
 
         // NPM Packages...
         $this->updateNodePackages(function ($packages) {

From d86830933f39d2e4f91e560e8b1e73c9c54cb86a Mon Sep 17 00:00:00 2001
From: Jess Archer <jess@jessarcher.com>
Date: Wed, 9 Feb 2022 09:26:40 +1000
Subject: [PATCH 3/4] Fix autofocus of Input component

---
 stubs/inertia-vue/resources/js/Components/Input.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/stubs/inertia-vue/resources/js/Components/Input.vue b/stubs/inertia-vue/resources/js/Components/Input.vue
index cebf8a3d9..1b48f9a0e 100644
--- a/stubs/inertia-vue/resources/js/Components/Input.vue
+++ b/stubs/inertia-vue/resources/js/Components/Input.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 defineProps(['modelValue']);
 
@@ -7,10 +7,10 @@ defineEmits(['update:modelValue']);
 
 const input = ref(null);
 
-const focus = () => input.focus();
-
-defineExpose({
-    focus,
+onMounted(() => {
+    if (input.hasAttribute('autofocus')) {
+        input.focus();
+    }
 });
 </script>
 

From cc22f1069635bdb9a6b92e95218ac88a5479c945 Mon Sep 17 00:00:00 2001
From: Taylor Otwell <taylor@laravel.com>
Date: Tue, 8 Feb 2022 18:13:47 -0600
Subject: [PATCH 4/4] use value property

---
 stubs/inertia-vue/resources/js/Components/Input.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/stubs/inertia-vue/resources/js/Components/Input.vue b/stubs/inertia-vue/resources/js/Components/Input.vue
index 1b48f9a0e..dde81e8c9 100644
--- a/stubs/inertia-vue/resources/js/Components/Input.vue
+++ b/stubs/inertia-vue/resources/js/Components/Input.vue
@@ -8,8 +8,8 @@ defineEmits(['update:modelValue']);
 const input = ref(null);
 
 onMounted(() => {
-    if (input.hasAttribute('autofocus')) {
-        input.focus();
+    if (input.value.hasAttribute('autofocus')) {
+        input.value.focus();
     }
 });
 </script>