summaryrefslogtreecommitdiffstats
path: root/apps/settings/src/components/UserList/UserRow.vue
diff options
context:
space:
mode:
Diffstat (limited to 'apps/settings/src/components/UserList/UserRow.vue')
-rw-r--r--apps/settings/src/components/UserList/UserRow.vue124
1 files changed, 67 insertions, 57 deletions
diff --git a/apps/settings/src/components/UserList/UserRow.vue b/apps/settings/src/components/UserList/UserRow.vue
index ed42db76e07..4007c551901 100644
--- a/apps/settings/src/components/UserList/UserRow.vue
+++ b/apps/settings/src/components/UserList/UserRow.vue
@@ -56,23 +56,23 @@
:user="user"
:is-dark-theme="isDarkTheme"
:class="{'row--menu-opened': openedMenu}" />
- <div v-else
+ <tr v-else
:class="{
'disabled': loading.delete || loading.disable,
'row--menu-opened': openedMenu
}"
:data-id="user.id"
class="row row--editable">
- <div :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}"
+ <td :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}"
class="avatar">
<img v-if="!loading.delete && !loading.disable && !loading.wipe"
:src="generateAvatar(user.id, isDarkTheme)"
alt=""
height="32"
width="32">
- </div>
+ </td>
<!-- dirty hack to ellipsis on two lines -->
- <div v-if="user.backendCapabilities.setDisplayName" class="displayName">
+ <td v-if="user.backendCapabilities.setDisplayName" class="displayName">
<form :class="{'icon-loading-small': loading.displayName}"
class="displayName"
@submit.prevent="updateDisplayName">
@@ -90,53 +90,56 @@
type="submit"
value="">
</form>
- </div>
- <div v-else class="name">
+ </td>
+ <td v-else class="name">
{{ user.id }}
<div class="displayName subtitle">
<div :title="user.displayname.length > 20 ? user.displayname : ''" class="cellText">
{{ user.displayname }}
</div>
</div>
- </div>
- <form v-if="settings.canChangePassword && user.backendCapabilities.setPassword"
- :class="{'icon-loading-small': loading.password}"
- class="password"
- @submit.prevent="updatePassword">
- <label class="hidden-visually" :for="'password'+user.id+rand">{{ t('settings', 'Add new password') }}</label>
- <input :id="'password'+user.id+rand"
- ref="password"
- :disabled="loading.password || loading.all"
- :minlength="minPasswordLength"
- maxlength="469"
- :placeholder="t('settings', 'Add new password')"
- autocapitalize="off"
- autocomplete="new-password"
- autocorrect="off"
- required
- spellcheck="false"
- type="password"
- value="">
- <input class="icon-confirm" type="submit" value="">
- </form>
- <div v-else />
- <form :class="{'icon-loading-small': loading.mailAddress}"
- class="mailAddress"
- @submit.prevent="updateEmail">
- <label class="hidden-visually" :for="'mailAddress'+user.id+rand">{{ t('settings', 'Add new email address') }}</label>
- <input :id="'mailAddress'+user.id+rand"
- ref="mailAddress"
- :disabled="loading.mailAddress||loading.all"
- :placeholder="t('settings', 'Add new email address')"
- :value="user.email"
- autocapitalize="off"
- autocomplete="new-password"
- autocorrect="off"
- spellcheck="false"
- type="email">
- <input class="icon-confirm" type="submit" value="">
- </form>
- <div :class="{'icon-loading-small': loading.groups}" class="groups">
+ </td>
+ <td v-if="settings.canChangePassword && user.backendCapabilities.setPassword">
+ <form :class="{'icon-loading-small': loading.password}"
+ class="password"
+ @submit.prevent="updatePassword">
+ <label class="hidden-visually" :for="'password'+user.id+rand">{{ t('settings', 'Add new password') }}</label>
+ <input :id="'password'+user.id+rand"
+ ref="password"
+ :disabled="loading.password || loading.all"
+ :minlength="minPasswordLength"
+ maxlength="469"
+ :placeholder="t('settings', 'Add new password')"
+ autocapitalize="off"
+ autocomplete="new-password"
+ autocorrect="off"
+ required
+ spellcheck="false"
+ type="password"
+ value="">
+ <input class="icon-confirm" type="submit" value="">
+ </form>
+ </td>
+ <td v-else />
+ <td>
+ <form :class="{'icon-loading-small': loading.mailAddress}"
+ class="mailAddress"
+ @submit.prevent="updateEmail">
+ <label class="hidden-visually" :for="'mailAddress'+user.id+rand">{{ t('settings', 'Add new email address') }}</label>
+ <input :id="'mailAddress'+user.id+rand"
+ ref="mailAddress"
+ :disabled="loading.mailAddress||loading.all"
+ :placeholder="t('settings', 'Add new email address')"
+ :value="user.email"
+ autocapitalize="off"
+ autocomplete="new-password"
+ autocorrect="off"
+ spellcheck="false"
+ type="email">
+ <input class="icon-confirm" type="submit" value="">
+ </form>
+ </td>
+ <td :class="{'icon-loading-small': loading.groups}" class="groups">
<label class="hidden-visually" :for="'groups'+user.id+rand">{{ t('settings', 'Add user to group') }}</label>
<NcMultiselect :id="'groups'+user.id+rand"
:close-on-select="false"
@@ -157,8 +160,8 @@
@tag="createGroup">
<span slot="noResult">{{ t('settings', 'No results') }}</span>
</NcMultiselect>
- </div>
- <div v-if="subAdminsGroups.length>0 && settings.isAdmin"
+ </td>
+ <td v-if="subAdminsGroups.length>0 && settings.isAdmin"
:class="{'icon-loading-small': loading.subadmins}"
class="subadmins">
<label class="hidden-visually" :for="'subadmins'+user.id+rand">{{ t('settings', 'Set user as admin for') }}</label>
@@ -178,8 +181,8 @@
@select="addUserSubAdmin">
<span slot="noResult">{{ t('settings', 'No results') }}</span>
</NcMultiselect>
- </div>
- <div :title="usedSpace"
+ </td>
+ <td :title="usedSpace"
:class="{'icon-loading-small': loading.quota}"
class="quota">
<label class="hidden-visually" :for="'quota'+user.id+rand">{{ t('settings', 'Select user quota') }}</label>
@@ -196,8 +199,8 @@
track-by="id"
@input="setUserQuota"
@tag="validateQuota" />
- </div>
- <div v-if="showConfig.showLanguages"
+ </td>
+ <td v-if="showConfig.showLanguages"
:class="{'icon-loading-small': loading.languages}"
class="languages">
<label class="hidden-visually" :for="'language'+user.id+rand">{{ t('settings', 'Set the language') }}</label>
@@ -213,14 +216,14 @@
label="name"
track-by="code"
@input="setUserLanguage" />
- </div>
+ </td>
<!-- don't show this on edit mode -->
- <div v-if="showConfig.showStoragePath || showConfig.showUserBackend"
+ <td v-if="showConfig.showStoragePath || showConfig.showUserBackend"
class="storageLocation" />
- <div v-if="showConfig.showLastLogin" />
+ <td v-if="showConfig.showLastLogin" />
- <div class="userActions">
+ <td class="userActions">
<div v-if="!loading.all"
class="toggleUserActions">
<NcActions>
@@ -242,8 +245,8 @@
<div class="icon-checkmark" />
{{ feedbackMessage }}
</div>
- </div>
- </div>
+ </td>
+ </tr>
</template>
<script>
@@ -697,4 +700,11 @@ export default {
.row::v-deep .multiselect__single {
z-index: auto !important;
}
+ .displayName input,
+ .password input,
+ .mailAddress input {
+ width: 100%;
+ height: 44px!important;
+ border: 2px solid var(--color-border-dark);
+ }
</style>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-19 20:49:01 +0000