diff options
| author | Vincent Petry <vincent@nextcloud.com> | 2022-08-02 15:33:19 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-08-02 15:33:19 +0200 |
| commit | 6aec09e0c52cae6a871e9def2f9e40d02938516f (patch) | |
| tree | 75799bd60392543978f38f9809ed41ee69182beb /apps | |
| parent | fbc60009134e09a8947b9f771b2d54c252890383 (diff) | |
| parent | 256c78374f146d67a9902b3f7b4b47cd239952c9 (diff) | |
| download | nextcloud-server-6aec09e0c52cae6a871e9def2f9e40d02938516f.tar.gz nextcloud-server-6aec09e0c52cae6a871e9def2f9e40d02938516f.zip | |
Merge pull request #33428 from nextcloud/improve-accessibility-device
Improve Devices & sessions settings
Diffstat (limited to 'apps')
| -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> |