Enable the Vue 3 front-end

resources/js/views/settings/Credentials/Edit.vue

@@ -1,51 +1,41 @@
+<script setup>
+    import Form from '@/components/formElements/Form'
+    import { useNotifyStore } from '@/stores/notify'
+
+    const router = useRouter()
+    const notify = useNotifyStore()
+    const form = reactive(new Form({
+        name: trans('auth.webauthn.my_device')
+    }))
+
+    const props = defineProps({
+        credentialId: {
+            type: String,
+            default: ''
+        },
+    })
+
+    function updateCredential() {
+        form.patch('/webauthn/credentials/' + props.credentialId + '/name')
+        .then(() => {
+            notify.success({ text: trans('auth.webauthn.device_successfully_registered') })
+            router.push({ name: 'settings.webauthn.devices' })
+        })
+    }
+
+</script>
+
 <template>
-    <form-wrapper :title="$t('auth.webauthn.rename_device')">
+    <FormWrapper title="auth.webauthn.rename_device">
         <form @submit.prevent="updateCredential" @keydown="form.onKeydown($event)">
-            <form-field :form="form" fieldName="name" inputType="text" :label="$t('commons.new_name')" autofocus />
-            <form-buttons
+            <FormField v-model="form.name" fieldName="name" :fieldError="form.errors.get('name')" inputType="text" label="commons.new_name" autofocus />
+            <FormButtons
                 :submitId="'btnEditCredential'"
                 :isBusy="form.isBusy"
                 :caption="$t('commons.save')"
                 :showCancelButton="true"
-                cancelLandingView="settings.webauthn.devices" />
+                cancelLandingView="settings.webauthn.devices"
+            />
         </form>
-    </form-wrapper>
-</template>
-
-<script>
-
-    import Form from './../../../components/Form'
-
-    export default {
-        data() {
-            return {
-                form: new Form({
-                    name: this.name,
-                })
-            }
-        },
-
-        props: ['credentialId', 'name'],
-
-        methods: {
-
-            async updateCredential() {
-
-                await this.form.patch('/webauthn/credentials/' + this.credentialId + '/name')
-
-                if( this.form.errors.any() === false ) {
-                    this.$notify({ type: 'is-success', text: this.$t('auth.webauthn.device_successfully_registered') })
-                    this.$router.push({name: 'settings.webauthn.devices', params: { toRefresh: true }})
-                }
-
-            },
-
-            cancelCreation: function() {
-
-                this.$router.push({ name: 'settings.webauthn.devices' });
-            },
-
-        },
-
-    }
-</script>
+    </FormWrapper>
+</template>