Set up the Webauthn settings view

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

@@ -0,0 +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.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>