feat: remove password column, widen groups column

Signed-off-by: mykh-hailo <kristianderonta0205@gmail.com>

Author: mykh-hailo

apps/settings/src/components/UserList.vue

@@ -50,7 +50,7 @@
 			</template>
 
 			<template #header>
-				<UserListHeader :has-obfuscated="hasObfuscated" />
+				<UserListHeader />
 			</template>
 
 			<template #footer>
@@ -410,4 +410,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>

apps/settings/src/components/Users/UserListHeader.vue

@@ -29,21 +29,14 @@
 				{{ t('settings', 'Account name') }}
 			</span>
 		</th>
-		<th
-			class="header__cell"
-			:class="{ 'header__cell--obfuscated': hasObfuscated }"
-			data-cy-user-list-header-password
-			scope="col">
-			<span>{{ passwordLabel }}</span>
-		</th>
 		<th
 			class="header__cell"
 			data-cy-user-list-header-email
 			scope="col">
 			<span>{{ t('settings', 'Email') }}</span>
 		</th>
 		<th
-			class="header__cell header__cell--large"
+			class="header__cell header__cell--groups"
 			data-cy-user-list-header-groups
 			scope="col">
 			<span>{{ t('settings', 'Groups') }}</span>
@@ -121,13 +114,6 @@ import Vue from 'vue'
 export default Vue.extend({
 	name: 'UserListHeader',
 
-	props: {
-		hasObfuscated: {
-			type: Boolean,
-			required: true,
-		},
-	},
-
 	computed: {
 		showConfig() {
 			// @ts-expect-error: allow untyped $store
@@ -138,14 +124,6 @@ export default Vue.extend({
 			// @ts-expect-error: allow untyped $store
 			return this.$store.getters.getServerData
 		},
-
-		passwordLabel(): string {
-			if (this.hasObfuscated) {
-				// TRANSLATORS This string is for a column header labelling either a password or a message that the current user has insufficient permissions
-				return t('settings', 'Password or insufficient permissions message')
-			}
-			return t('settings', 'Password')
-		},
 	},
 
 	methods: {

apps/settings/src/components/Users/UserRow.vue

@@ -49,36 +49,6 @@
 			<span class="row__subtitle">{{ user.id }}</span>
 		</td>
 
-		<td
-			data-cy-user-list-cell-password
-			class="row__cell"
-			:class="{ 'row__cell--obfuscated': hasObfuscated }">
-			<template v-if="editing && settings.canChangePassword && user.backendCapabilities.setPassword">
-				<NcTextField
-					v-model="editedPassword"
-					class="user-row-text-field"
-					data-cy-user-list-input-password
-					:data-loading="loading.password || undefined"
-					:trailing-button-label="t('settings', 'Submit')"
-					:class="{ 'icon-loading-small': loading.password }"
-					:show-trailing-button="true"
-					:disabled="loading.password || isLoadingField"
-					:minlength="minPasswordLength"
-					maxlength="469"
-					:label="t('settings', 'Set new password')"
-					trailing-button-icon="arrowEnd"
-					autocapitalize="off"
-					autocomplete="new-password"
-					required
-					spellcheck="false"
-					type="password"
-					@trailing-button-click="updatePassword" />
-			</template>
-			<span v-else-if="isObfuscated">
-				{{ t('settings', 'You do not have permissions to see the details of this account') }}
-			</span>
-		</td>
-
 		<td class="row__cell" data-cy-user-list-cell-email>
 			<template v-if="editing">
 				<NcTextField
@@ -105,7 +75,7 @@
 			</span>
 		</td>
 
-		<td class="row__cell row__cell--large row__cell--multiline" data-cy-user-list-cell-groups>
+		<td class="row__cell row__cell--groups row__cell--multiline" data-cy-user-list-cell-groups>
 			<template v-if="editing">
 				<label
 					class="hidden-visually"
@@ -1080,4 +1050,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>

apps/settings/src/components/Users/VirtualList.vue

@@ -157,6 +157,7 @@ export default Vue.extend({
 	--cell-padding: 7px;
 	--cell-width: 200px;
 	--cell-width-large: 300px;
+	--cell-width-groups: 380px;
 	--cell-min-width: calc(var(--cell-width) - (2 * var(--cell-padding)));
 	--sticky-column-z-index: calc(var(--vs-dropdown-z-index) + 1); // Keep the sticky column on top of the select dropdown
 
@@ -188,4 +189,4 @@ export default Vue.extend({
 		width: 100%;
 	}
 }
-</style>
+</style>

apps/settings/src/components/Users/shared/styles.scss

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-@mixin row {
+ @mixin row {
 	position: relative;
 	display: flex;
 	min-width: 100%;
@@ -79,6 +79,11 @@
 			width: var(--cell-width-large);
 		}
 
+		&--groups {
+			min-width: var(--cell-width-groups);
+			width: var(--cell-width-groups);
+		}
+
 		&--obfuscated {
 			min-width: 400px;
 			width: 400px;