[stable28] update webauthn section to feature components

apps/settings/src/components/WebAuthn/AddDevice.vue

@@ -25,9 +25,9 @@
 	</div>
 	<div v-else>
 		<div v-if="step === RegistrationSteps.READY">
-			<button @click="start">
+			<NcButton @click="start" type="primary">
 				{{ t('settings', 'Add WebAuthn device') }}
-			</button>
+			</NcButton>
 		</div>
 
 		<div v-else-if="step === RegistrationSteps.REGISTRATION"
@@ -43,9 +43,9 @@
 				type="text"
 				:placeholder="t('settings', 'Name your device')"
 				@:keyup.enter="submit">
-			<button @click="submit">
+			<NcButton @click="submit" type="primary">
 				{{ t('settings', 'Add') }}
-			</button>
+			</NcButton>
 		</div>
 
 		<div v-else-if="step === RegistrationSteps.PERSIST"
@@ -62,6 +62,7 @@
 
 <script>
 import { confirmPassword } from '@nextcloud/password-confirmation'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import '@nextcloud/password-confirmation/dist/style.css'
 
 import logger from '../../logger.js'
@@ -84,6 +85,11 @@ const RegistrationSteps = Object.freeze({
 
 export default {
 	name: 'AddDevice',
+
+	components: {
+		NcButton,
+	},
+
 	props: {
 		httpWarning: Boolean,
 		isHttps: {

apps/settings/src/components/WebAuthn/Section.vue

@@ -25,20 +25,20 @@
 		<p class="settings-hint hidden-when-empty">
 			{{ t('settings', 'Set up your account for passwordless authentication following the FIDO2 standard.') }}
 		</p>
-		<p v-if="devices.length === 0">
+		<NcNoteCard v-if="devices.length === 0" type="info">
 			{{ t('settings', 'No devices configured.') }}
-		</p>
-		<p v-else>
+		</NcNoteCard>
+		<h3 v-else>
 			{{ t('settings', 'The following devices are configured for your account:') }}
-		</p>
+		</h3>
 		<Device v-for="device in sortedDevices"
 			:key="device.id"
 			:name="device.name"
 			@delete="deleteDevice(device.id)" />
 
-		<p v-if="!hasPublicKeyCredential" class="warning">
+		<NcNoteCard v-if="!hasPublicKeyCredential" type="warning">
 			{{ t('settings', 'Your browser does not support WebAuthn.') }}
-		</p>
+		</NcNoteCard>
 
 		<AddDevice v-if="hasPublicKeyCredential"
 			:is-https="isHttps"
@@ -49,6 +49,7 @@
 
 <script>
 import { confirmPassword } from '@nextcloud/password-confirmation'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import '@nextcloud/password-confirmation/dist/style.css'
 import sortBy from 'lodash/fp/sortBy.js'
 
@@ -63,6 +64,7 @@ export default {
 	components: {
 		AddDevice,
 		Device,
+		NcNoteCard,
 	},
 	props: {
 		initialDevices: {