Merge pull request #59348 from mykh-hailo/feat/ui-enhancement

feat: remove password column from user table

Author: artonge

apps/settings/src/components/UserList.vue

@@ -37,7 +37,6 @@
 			:extra-props="{
 				users,
 				settings,
-				hasObfuscated,
 				quotaOptions,
 				languages,
 				externalActions,
@@ -50,7 +49,7 @@
 			</template>
 
 			<template #header>
-				<UserListHeader :has-obfuscated="hasObfuscated" />
+				<UserListHeader />
 			</template>
 
 			<template #footer>
@@ -77,7 +76,7 @@ import UserListHeader from './Users/UserListHeader.vue'
 import UserRow from './Users/UserRow.vue'
 import VirtualList from './Users/VirtualList.vue'
 import logger from '../logger.ts'
-import { defaultQuota, isObfuscated, unlimitedQuota } from '../utils/userUtils.ts'
+import { defaultQuota, unlimitedQuota } from '../utils/userUtils.ts'
 
 const newUser = Object.freeze({
 	id: '',
@@ -159,10 +158,6 @@ export default {
 			}
 		},
 
-		hasObfuscated() {
-			return this.filteredUsers.some((user) => isObfuscated(user))
-		},
-
 		users() {
 			return this.$store.getters.getUsers
 		},

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"
@@ -361,11 +331,6 @@ export default {
 			required: true,
 		},
 
-		hasObfuscated: {
-			type: Boolean,
-			required: true,
-		},
-
 		quotaOptions: {
 			type: Array,
 			required: true,
@@ -398,7 +363,6 @@ export default {
 			loading: {
 				all: false,
 				displayName: false,
-				password: false,
 				mailAddress: false,
 				groups: false,
 				groupsDetails: false,
@@ -413,7 +377,6 @@ export default {
 			},
 
 			editedDisplayName: this.user.displayname,
-			editedPassword: '',
 			editedMail: this.user.email ?? '',
 			// Cancelable promise for search groups request
 			promise: null,
@@ -768,29 +731,6 @@ export default {
 			}
 		},
 
-		/**
-		 * Set user password
-		 */
-		async updatePassword() {
-			this.loading.password = true
-			if (this.editedPassword.length === 0) {
-				showError(t('settings', "Password can't be empty"))
-				this.loading.password = false
-			} else {
-				try {
-					await this.$store.dispatch('setUserData', {
-						userid: this.user.id,
-						key: 'password',
-						value: this.editedPassword,
-					})
-					this.editedPassword = ''
-					showSuccess(t('settings', 'Password was successfully changed'))
-				} finally {
-					this.loading.password = false
-				}
-			}
-		},
-
 		/**
 		 * Set user mailAddress
 		 */

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
 

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

@@ -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;

cypress/e2e/settings/users_modify.cy.ts

@@ -46,35 +46,6 @@ describe('Settings: Change user properties', function() {
 		cy.get('.toastify.toast-success').contains(/Display.+name.+was.+successfully.+changed/i).should('exist')
 	})
 
-	it('Can change the password', function() {
-		// open the User settings as admin
-		cy.visit('/settings/users')
-
-		// toggle edit button into edit mode
-		toggleEditButton(user, true)
-
-		getUserListRow(user.userId).within(() => {
-			// see that the password of user is ""
-			cy.get('[data-cy-user-list-input-password]').should('exist').and('have.value', '')
-			// set the password for user to 123456
-			cy.get('[data-cy-user-list-input-password]').type('123456')
-			// When I set the password for user to 123456
-			cy.get('[data-cy-user-list-input-password]').should('have.value', '123456')
-			cy.get('[data-cy-user-list-input-password] ~ button').click()
-
-			// Make sure no confirmation modal is shown
-			handlePasswordConfirmation(admin.password)
-
-			// see that the password cell for user is done loading
-			waitLoading('[data-cy-user-list-input-password]')
-			// password input is emptied on change
-			cy.get('[data-cy-user-list-input-password]').should('have.value', '')
-		})
-
-		// Success message is shown
-		cy.get('.toastify.toast-success').contains(/Password.+successfully.+changed/i).should('exist')
-	})
-
 	it('Can change the email address', function() {
 		// open the User settings as admin
 		cy.visit('/settings/users')