Improve Devices & sessions settings

- Add label for better accessibility
- Only allow to add app token with a name
- Align in rows

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

1 files changed, 27 insertions, 6 deletions

diff --git a/apps/settings/src/components/AuthTokenSetupDialogue.vue b/apps/settings/src/components/AuthTokenSetupDialogue.vue
index 6500f533881..9a03d0971ac 100644
--- a/apps/settings/src/components/AuthTokenSetupDialogue.vue
+++ b/apps/settings/src/components/AuthTokenSetupDialogue.vue
@@ -20,32 +20,36 @@
   -->
 
 <template>
-	<div v-if="!adding">
+	<div v-if="!adding" class="row spacing">
+		<!-- Port to TextField component when available -->
 		<input v-model="deviceName"
 			type="text"
 			:maxlength="120"
 			:disabled="loading"
 			:placeholder="t('settings', 'App name')"
 			@keydown.enter="submit">
-		<Button :disabled="loading"
+		<Button :disabled="loading || deviceName.length === 0"
+			type="primary"
 			@click="submit">
 			{{ t('settings', 'Create new app password') }}
 		</Button>
 	</div>
-	<div v-else>
+	<div v-else class="spacing">
 		{{ t('settings', 'Use the credentials below to configure your app or device.') }}
 		{{ t('settings', 'For security reasons this password will only be shown once.') }}
 		<div class="app-password-row">
-			<span class="app-password-label">{{ t('settings', 'Username') }}</span>
+			<label for="app-username" class="app-password-label">{{ t('settings', 'Username') }}</label>
 			<input :value="loginName"
+				id="app-username"
 				type="text"
 				class="monospaced"
 				readonly="readonly"
 				@focus="selectInput">
 		</div>
 		<div class="app-password-row">
-			<span class="app-password-label">{{ t('settings', 'Password') }}</span>
+			<label for="app-password" class="app-password-label">{{ t('settings', 'Password') }}</label>
 			<input ref="appPassword"
+				id="app-password"
 				:value="appPassword"
 				type="text"
 				class="monospaced"
@@ -180,7 +184,8 @@ export default {
 
 <style lang="scss" scoped>
 	.app-password-row {
-		display: table-row;
+		display: flex;
+		align-items: center;
 
 		.icon {
 			background-size: 16px 16px;
@@ -198,6 +203,14 @@ export default {
 		padding-right: 1em;
 		text-align: right;
 		vertical-align: middle;
+		width: 100px;
+	}
+
+	.row input {
+		height: 44px !important;
+		padding: 7px 12px;
+		margin-right: 12px;
+		width: 200px;
 	}
 
 	.monospaced {
@@ -210,4 +223,12 @@ export default {
 		margin: 3px 3px 3px 3px;
 	}
 
+	.row {
+		display: flex;
+		align-items: center;
+	}
+
+	.spacing {
+		padding-top: 16px;
+	}
 </style>