2FAuth/resources/js_vue3/views/settings/Credentials/Edit.vue

<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.info({ text: trans('auth.webauthn.device_successfully_registered') })
            router.push({ name: 'settings.webauthn.devices' })
        })
    }

</script>

<template>
    <FormWrapper title="auth.webauthn.rename_device">
        <form @submit.prevent="updateCredential" @keydown="form.onKeydown($event)">
            <FormField v-model="form.name" fieldName="name" :fieldError="form.errors.get('name')" inputType="name" label="commons.new_name" autofocus />
            <FormButtons
                :submitId="'btnEditCredential'"
                :isBusy="form.isBusy"
                :caption="$t('commons.save')"
                :showCancelButton="true"
                cancelLandingView="settings.webauthn.devices"
            />
        </form>
    </FormWrapper>
</template>