Merge pull request #40100 from nextcloud/fix/37082-replace_input_on_security_page

apps/settings/src/components/AuthToken.vue

@@ -26,13 +26,14 @@
 			<div :class="iconName.icon" />
 		</td>
 		<td class="token-name">
-			<input v-if="token.canRename && renaming"
+			<NcTextField v-if="token.canRename && renaming"
 				ref="input"
 				v-model="newName"
 				type="text"
+				:label="t('settings', 'Device name')"
 				@keyup.enter="rename"
 				@change="rename"
-				@keyup.esc="cancelRename">
+				@keyup.esc="cancelRename" />
 			<span v-else>{{ iconName.name }}</span>
 			<span v-if="wiping" class="wiping-warning">({{ t('settings', 'Marked for remote wipe') }})</span>
 		</td>
@@ -86,6 +87,7 @@
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 // When using capture groups the following parts are extracted the first is used as the version number, the second as the OS
 const userAgentMap = {
@@ -157,6 +159,7 @@ export default {
 		NcActions,
 		NcActionButton,
 		NcActionCheckbox,
+		NcTextField,
 	},
 	props: {
 		token: {

apps/settings/src/components/AuthTokenSetupDialogue.vue

@@ -22,12 +22,14 @@
 <template>
 	<div v-if="!adding" id="generate-app-token-section" class="row spacing">
 		<!-- Port to TextField component when available -->
-		<input v-model="deviceName"
+		<NcTextField v-model="deviceName"
 			type="text"
 			:maxlength="120"
 			:disabled="loading"
+			class="app-name-text-field"
+			:label="t('settings', 'App name')"
 			:placeholder="t('settings', 'App name')"
-			@keydown.enter="submit">
+			@keydown.enter="submit" />
 		<NcButton :disabled="loading || deviceName.length === 0"
 			type="primary"
 			@click="submit">
@@ -87,6 +89,7 @@ import '@nextcloud/password-confirmation/dist/style.css'
 import { showError } from '@nextcloud/dialogs'
 import { getRootUrl } from '@nextcloud/router'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import Check from 'vue-material-design-icons/Check.vue'
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
@@ -98,6 +101,7 @@ export default {
 		ContentCopy,
 		NcButton,
 		QR,
+		NcTextField,
 	},
 	props: {
 		add: {
@@ -205,9 +209,9 @@ export default {
 		width: 100px;
 	}
 
-	.row input {
+	.app-name-text-field {
 		height: 44px !important;
-		padding: 7px 12px;
+		padding-left: 12px;
 		margin-right: 12px;
 		width: 200px;
 	}