Skip to content

Commit

Permalink
Fix add user dialog
Browse files Browse the repository at this point in the history
- Add label instead of placeholder for accessibility
- Port to new vue components

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
  • Loading branch information
CarlSchwan committed Sep 15, 2022
1 parent fde8c08 commit 103ba53
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 32 deletions.
72 changes: 46 additions & 26 deletions apps/settings/src/components/UserList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,12 @@
class="modal__content"
@submit.prevent="createUser">
<h2>{{ t('settings','New user') }}</h2>
<input id="newusername"
<NcTextField id="newusername"
ref="newusername"
v-model="newUser.id"
:value.sync="newUser.id"
:disabled="settings.newUserGenerateUserID"
:placeholder="settings.newUserGenerateUserID
:labelVisible="true"
:label="settings.newUserGenerateUserID
? t('settings', 'Will be autogenerated')
: t('settings', 'Username')"
autocapitalize="none"
Expand All @@ -41,39 +42,43 @@
class="modal__item"
name="username"
pattern="[a-zA-Z0-9 _\.@\-']+"
required
type="text">
<input id="newdisplayname"
v-model="newUser.displayName"
:placeholder="t('settings', 'Display name')"
required>
</NcTextField>
<NcTextField id="newdisplayname"
:value.sync="newUser.displayName"
:label="t('settings', 'Display name')"
:labelVisible="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="modal__item"
name="displayname"
type="text">
<input id="newuserpassword"
name="displayname">
</NcTextField>
<NcPasswordField id="newuserpassword"
ref="newuserpassword"
v-model="newUser.password"
:value.sync="newUser.password"
:minlength="minPasswordLength"
:placeholder="t('settings', 'Password')"
:label="t('settings', 'Password')"
:labelVisible="true"
:required="newUser.mailAddress===''"
autocapitalize="none"
autocomplete="new-password"
autocorrect="off"
class="modal__item"
name="password"
type="password">
<input id="newemail"
v-model="newUser.mailAddress"
:placeholder="t('settings', 'Email')"
name="password">
</NcPasswordField>
<NcTextField id="newemail"
:value.sync="newUser.mailAddress"
:label="t('settings', 'Email')"
:labelVisible="true"
:required="newUser.password==='' || settings.newUserRequireEmail"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="modal__item"
name="email"
type="email">
</NcTextField>
<div class="groups modal__item">
<!-- hidden input trick for vanilla html5 form validation -->
<input v-if="!settings.isAdmin"
Expand All @@ -83,12 +88,15 @@
:value="newUser.groups"
tabindex="-1"
type="text">
<label for="groupField">
{{ t('settings', 'Add user to group') }}
</label>
<NcMultiselect v-model="newUser.groups"
id="groupField"
:close-on-select="false"
:disabled="loading.groups||loading.all"
:multiple="true"
:options="canAddGroups"
:placeholder="t('settings', 'Add user to group')"
:tag-width="60"
:taggable="true"
class="multiselect-vue"
Expand All @@ -104,11 +112,14 @@
</div>
<div v-if="subAdminsGroups.length>0 && settings.isAdmin"
class="subadmins modal__item">
<label for="adminForField">
{{ t('settings', 'Set user as admin for') }}
</label>
<NcMultiselect v-model="newUser.subAdminsGroups"
id="adminForField"
:close-on-select="false"
:multiple="true"
:options="subAdminsGroups"
:placeholder="t('settings', 'Set user as admin for')"
:tag-width="60"
class="multiselect-vue"
label="name"
Expand All @@ -117,21 +128,27 @@
</NcMultiselect>
</div>
<div class="quota modal__item">
<label for="quotaField">
{{ t('settings', 'Select user quota') }}
</label>
<NcMultiselect v-model="newUser.quota"
:id="quotaField"
:allow-empty="false"
:options="quotaOptions"
:placeholder="t('settings', 'Select user quota')"
:taggable="true"
class="multiselect-vue"
label="label"
track-by="id"
@tag="validateQuota" />
</div>
<div v-if="showConfig.showLanguages" class="languages modal__item">
<label for="languageField">
{{ t('settings', 'Default language') }}
</label>
<NcMultiselect v-model="newUser.language"
id="languageField"
:allow-empty="false"
:options="languages"
:placeholder="t('settings', 'Default language')"
class="multiselect-vue"
group-label="label"
group-values="languages"
Expand Down Expand Up @@ -235,9 +252,11 @@
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
import InfiniteLoading from 'vue-infinite-loading'
import Vue from 'vue'
import NcModal from '@nextcloud/vue/dist/Components/NcModal'
import NcButton from '@nextcloud/vue/dist/Components/NcButton'
import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'

import userRow from './UserList/UserRow'

Expand Down Expand Up @@ -271,6 +290,8 @@ export default {
NcMultiselect,
InfiniteLoading,
NcButton,
NcPasswordField,
NcTextField,
},
props: {
users: {
Expand Down Expand Up @@ -603,7 +624,6 @@ export default {
padding: 20px;
flex-direction: column;
align-items: center;
text-align: center;
}
.modal__item {
margin-bottom: 16px;
Expand Down
4 changes: 2 additions & 2 deletions dist/settings-users-8351.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/settings-users-8351.js.map

Large diffs are not rendered by default.

Loading

0 comments on commit 103ba53

Please sign in to comment.