diff options
Diffstat (limited to 'apps/settings/src')
| -rw-r--r-- | apps/settings/src/components/AuthTokenSetupDialogue.vue | 33 |
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> |