feat: Show first login date in user list

Signed-off-by: Christopher Ng <chrng8@gmail.com>

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

@@ -71,6 +71,12 @@
 				{{ t('settings', 'Storage location') }}
 			</span>
 		</th>
+		<th v-if="showConfig.showFirstLogin"
+			class="header__cell"
+			data-cy-user-list-header-first-login
+			scope="col">
+			<span>{{ t('settings', 'First login') }}</span>
+		</th>
 		<th v-if="showConfig.showLastLogin"
 			class="header__cell"
 			data-cy-user-list-header-last-login

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

@@ -229,6 +229,12 @@
 			</template>
 		</td>
 
+		<td v-if="showConfig.showFirstLogin"
+			class="row__cell"
+			data-cy-user-list-cell-first-login>
+			<span v-if="!isObfuscated">{{ userFirstLogin }}</span>
+		</td>
+
 		<td v-if="showConfig.showLastLogin"
 			:title="userLastLoginTooltip"
 			class="row__cell"

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

@@ -24,6 +24,11 @@
 				:checked.sync="showStoragePath">
 				{{ t('settings', 'Show storage path') }}
 			</NcCheckboxRadioSwitch>
+			<NcCheckboxRadioSwitch type="switch"
+				data-test="showFirstLogin"
+				:checked.sync="showFirstLogin">
+				{{ t('settings', 'Show first login') }}
+			</NcCheckboxRadioSwitch>
 			<NcCheckboxRadioSwitch type="switch"
 				data-test="showLastLogin"
 				:checked.sync="showLastLogin">
@@ -164,6 +169,15 @@ export default {
 			},
 		},
 
+		showFirstLogin: {
+			get() {
+				return this.showConfig.showFirstLogin
+			},
+			set(status) {
+				this.setShowConfig('showFirstLogin', status)
+			},
+		},
+
 		showLastLogin: {
 			get() {
 				return this.showConfig.showLastLogin

apps/settings/src/mixins/UserRowMixin.js

@@ -4,6 +4,7 @@
  */
 
 import { formatFileSize } from '@nextcloud/files'
+import { useFormatDateTime } from '@nextcloud/vue'
 
 export default {
 	props: {
@@ -36,6 +37,12 @@ export default {
 			default: () => [],
 		},
 	},
+	setup(props) {
+		const { formattedFullTime } = useFormatDateTime(props.user.firstLogin, { relativeTime: false })
+		return {
+			formattedFullTime,
+		}
+	},
 	computed: {
 		showConfig() {
 			return this.$store.getters.getShowConfig
@@ -120,6 +127,16 @@ export default {
 			return userLang
 		},
 
+		userFirstLogin() {
+			if (this.user.firstLogin > 0) {
+				return this.formattedFullTime
+			}
+			if (this.user.firstLogin < 0) {
+				return t('settings', 'Unknown')
+			}
+			return t('settings', 'Never')
+		},
+
 		/* LAST LOGIN */
 		userLastLoginTooltip() {
 			if (this.user.lastLogin > 0) {

apps/settings/src/store/users.js

@@ -40,6 +40,7 @@ const state = {
 	showConfig: {
 		showStoragePath: localStorage.getItem('account_settings__showStoragePath') === 'true',
 		showUserBackend: localStorage.getItem('account_settings__showUserBackend') === 'true',
+		showFirstLogin: localStorage.getItem('account_settings__showFirstLogin') === 'true',
 		showLastLogin: localStorage.getItem('account_settings__showLastLogin') === 'true',
 		showNewUserForm: localStorage.getItem('account_settings__showNewUserForm') === 'true',
 		showLanguages: localStorage.getItem('account_settings__showLanguages') === 'true',