feat(users): manage instance user accounts and roles from Settings > Users

.gitignore

@@ -17,8 +17,8 @@ selenium-debug.log
 package-lock.json
 
 # Generated files
-src/stories/01-api.mdx 
-src/stories/02-hooks.mdx 
+src/stories/01-api.mdx
+src/stories/02-hooks.mdx
 src/stories/03-widgets.mdx
 
 # Editor directories and files
@@ -44,6 +44,8 @@ src/stories/03-widgets.mdx
 .aider*
 graphify-out/
 docs/superpowers/
+.ralph-tui/
+tasks/
 
 # MSW service worker — regenerated on install via the `msw.workerDirectory`
 # postinstall hook (see package.json). Not edited by hand; do not commit.

src/api/index.js

@@ -116,6 +116,10 @@ export class Api {
     return this.sendAction('/api/users/admin', { method: Method.GET, params })
   }
 
+  updateUser(uid, data) {
+    return this.sendAction(`/api/users/admin/${encodeURIComponent(uid)}`, { method: Method.PUT, data })
+  }
+
   grantUserRole(uid, project, role) {
     return this.sendActionAsText(
       `/api/users/admin/${encodeURIComponent(uid)}/index/${encodeURIComponent(project)}?role=${encodeURIComponent(role)}`,
@@ -131,14 +135,25 @@ export class Api {
     })
   }
 
-  createUser({ uid, email, name, provider, password, domain, index } = {}) {
-    const data = { login: uid, email, name, provider, password, domain, index }
+  // role is 'domain_admin' or 'instance_admin' (case-insensitive on the backend); domain is only
+  // meaningful for domain_admin (ignored for instance_admin) and defaults server-side to 'default'.
+  grantInstanceRole(uid, role, domain = null) {
+    const params = omitBy({ role, domain }, isNull)
+    return this.sendAction(`/api/users/admin/${encodeURIComponent(uid)}/role`, { method: Method.PUT, params })
+  }
+
+  revokeInstanceRole(uid, role, domain = null) {
+    const params = omitBy({ role, domain }, isNull)
+    return this.sendAction(`/api/users/admin/${encodeURIComponent(uid)}/role`, { method: Method.DELETE, params })
+  }
+
+  createUser({ uid, email, name, provider, password } = {}) {
+    const data = { login: uid, email, name, provider, password }
     return this.sendAction('/api/users', { method: Method.POST, data })
   }
 
-  deleteUser(uid, { domain, index } = {}) {
-    const data = { domain, index }
-    return this.sendActionAsText(`/api/users/admin/${encodeURIComponent(uid)}`, { method: Method.DELETE, data })
+  deleteUser(uid) {
+    return this.sendActionAsText(`/api/users/admin/${encodeURIComponent(uid)}`, { method: Method.DELETE })
   }
 
   getPathBanners(project) {

src/components/Button/ButtonRowAction/ButtonRowActionRoles.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+import ButtonRowAction from '@/components/Button/ButtonRowAction/ButtonRowAction'
+import IPhGear from '~icons/ph/gear'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <button-row-action
+    :icon="IPhGear"
+    :label="t('buttonRowAction.manageRoles')"
+  />
+</template>

src/components/Display/DisplayRole.vue

@@ -1,36 +1,10 @@
 <script setup>
-import { computed, markRaw } from 'vue'
+import { computed } from 'vue'
 import { AppIcon } from '@icij/murmur'
 import { useI18n } from 'vue-i18n'
 
-import IPhPersonSimpleBike from '~icons/ph/person-simple-bike'
-import IPhPersonSimpleRun from '~icons/ph/person-simple-run'
-import IPhPersonSimpleWalk from '~icons/ph/person-simple-walk'
-import IPhPersonSimpleHike from '~icons/ph/person-simple-hike'
-import IPhPersonSimpleSwim from '~icons/ph/person-simple-swim'
-import IPhPersonSimpleTaiChi from '~icons/ph/person-simple-tai-chi'
-
 import { usePolicies } from '@/composables/usePolicies.js'
-import { ROLE, ROLE_ICON_DEFAULT, NO_ROLE } from '@/enums/roles.js'
-
-const ROLE_ICON = {
-  [ROLE.INSTANCE_ADMIN]: markRaw(IPhPersonSimpleBike),
-  [ROLE.DOMAIN_ADMIN]: markRaw(IPhPersonSimpleRun),
-  [ROLE.PROJECT_ADMIN]: markRaw(IPhPersonSimpleWalk),
-  [ROLE.PROJECT_EDITOR]: markRaw(IPhPersonSimpleHike),
-  [ROLE.PROJECT_MEMBER]: markRaw(IPhPersonSimpleSwim),
-  [ROLE.PROJECT_VISITOR]: markRaw(IPhPersonSimpleTaiChi),
-  [NO_ROLE]: ROLE_ICON_DEFAULT,
-}
-
-const ROLE_COLOR = {
-  [ROLE.INSTANCE_ADMIN]: 'var(--bs-danger)',
-  [ROLE.DOMAIN_ADMIN]: 'var(--bs-success)',
-  [ROLE.PROJECT_ADMIN]: 'var(--bs-category-person)',
-  [ROLE.PROJECT_EDITOR]: 'var(--bs-warning)',
-  [ROLE.PROJECT_MEMBER]: 'var(--bs-info)',
-  [ROLE.PROJECT_VISITOR]: 'var(--bs-secondary)',
-}
+import { roleColor, roleIcon } from '@/enums/roles.js'
 
 const props = defineProps({
   value: {
@@ -49,8 +23,8 @@ const props = defineProps({
 const { formatRole } = usePolicies()
 const { t } = useI18n()
 const role = computed(() => formatRole(t, props.value))
-const icon = computed(() => ROLE_ICON[props.value] ?? ROLE_ICON_DEFAULT)
-const iconStyle = computed(() => ({ color: ROLE_COLOR[props.value] ?? 'inherit' }))
+const icon = computed(() => roleIcon(props.value))
+const iconStyle = computed(() => ({ color: roleColor(props.value) }))
 
 defineExpose({ icon, iconStyle })
 </script>

src/components/Display/DisplayUserAvatar.vue

@@ -36,7 +36,7 @@ const props = defineProps({
 
 const src = ref(null)
 const alt = computed(() => `${props.value} avatar`)
-const abbr = computed(() => props.value.slice(0, 2).toUpperCase())
+const abbr = computed(() => (props.value ?? '').slice(0, 2).toUpperCase())
 const heightWithUnit = computed(() => (isNaN(props.height) ? props.height : `${props.height}px`))
 
 const style = computed(() => {

src/components/Form/FormInputPassword.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue'
-import { ButtonIcon } from '@icij/murmur'
+import { useI18n } from 'vue-i18n'
+import { AppIcon } from '@icij/murmur'
 
 import IPhEye from '~icons/ph/eye'
 import IPhEyeSlash from '~icons/ph/eye-slash'
@@ -10,33 +11,55 @@ defineOptions({
   inheritAttrs: false
 })
 
+defineProps({
+  // Disables both the input and its visibility toggle
+  disabled: {
+    type: Boolean
+  }
+})
+
 const emit = defineEmits(['update:modelValue'])
 
+const { t } = useI18n()
+
 const visible = ref(false)
 const type = computed(() => (visible.value ? 'text' : 'password'))
 const icon = computed(() => (visible.value ? IPhEyeSlash : IPhEye))
+const toggleLabel = computed(() => (visible.value ? t('formInputPassword.hide') : t('formInputPassword.show')))
 
 function toggleVisibility() {
   visible.value = !visible.value
 }
 </script>
 
 <template>
-  <div class="form-input-password input-group flex-nowrap">
-    <b-input
+  <!-- Styled after @icij/murmur's FormControlSecret (left link toggler on the disabled-input
+       background), which can't be reused directly since its input is hard-coded readonly. -->
+  <b-input-group class="form-input-password flex-nowrap">
+    <b-button
+      variant="link"
+      class="form-input-password__toggle"
+      :aria-label="toggleLabel"
+      :title="toggleLabel"
+      :disabled="disabled"
+      @click="toggleVisibility"
+    >
+      <app-icon><component :is="icon" /></app-icon>
+    </b-button>
+    <b-form-input
       v-bind="$attrs"
+      :disabled="disabled"
       :type="type"
-      class="form-input-password__input border-end-0"
+      class="form-input-password__input"
       @update:model-value="emit('update:modelValue', $event)"
     />
-    <span class="form-input-password__end input-group-text border-start-0">
-      <button-icon
-        :icon-left="icon"
-        hide-label
-        variant="outline-secondary"
-        class="form-input-password__toggle p-1 border-0"
-        @click="toggleVisibility"
-      />
-    </span>
-  </div>
+  </b-input-group>
 </template>
+
+<style lang="scss" scoped>
+.form-input-password__toggle {
+  background: $input-disabled-bg;
+  border: $input-border-width solid $input-border-color;
+  border-right: 0;
+}
+</style>

src/components/InstanceUsers/InstanceUsersActions.vue

@@ -0,0 +1,39 @@
+<script setup>
+import ButtonRowActionDelete from '@/components/Button/ButtonRowAction/ButtonRowActionDelete.vue'
+import ButtonRowActionEdit from '@/components/Button/ButtonRowAction/ButtonRowActionEdit.vue'
+import ButtonRowActionRoles from '@/components/Button/ButtonRowAction/ButtonRowActionRoles.vue'
+
+const props = defineProps({
+  user: {
+    type: Object,
+    required: true
+  },
+  canManageAccount: {
+    type: Boolean
+  },
+  isCurrentUser: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['open'])
+
+function open(action) {
+  emit('open', { action, uid: props.user.uid })
+}
+</script>
+
+<template>
+  <div class="instance-users-actions d-inline-flex gap-1">
+    <button-row-action-roles @click="open('manage')" />
+    <button-row-action-edit
+      v-if="canManageAccount"
+      @click="open('edit')"
+    />
+    <button-row-action-delete
+      v-if="canManageAccount"
+      :disabled="isCurrentUser"
+      @click="open('delete')"
+    />
+  </div>
+</template>

src/components/InstanceUsers/InstanceUsersList.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import DisplayUser from '@/components/Display/DisplayUser.vue'
+import InstanceUsersActions from '@/components/InstanceUsers/InstanceUsersActions.vue'
+import InstanceUsersRoleBadges from '@/components/InstanceUsers/InstanceUsersRoleBadges.vue'
+import PageTableGeneric from '@/components/PageTable/PageTableGeneric.vue'
+import { useAuth } from '@/composables/useAuth.js'
+import { compareGrants, isInstanceOrDomainRole, parsePermission } from '@/enums/roles.js'
+
+defineOptions({ name: 'InstanceUsersList' })
+
+const props = defineProps({
+  users: {
+    type: Array,
+    default: () => []
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  query: {
+    type: String,
+    default: ''
+  },
+  canManageAccounts: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['open'])
+
+const { t } = useI18n()
+const { isCurrentUser } = useAuth()
+
+const sort = defineModel('sort', { type: String, default: null })
+const order = defineModel('order', { type: String, default: 'asc' })
+
+const fields = computed(() => [
+  { key: 'uid', text: t('settings.users.fields.uid.label'), sortable: true, emphasis: true },
+  { key: 'name', text: t('settings.users.fields.name.label'), sortable: true },
+  { key: 'email', text: t('settings.users.fields.email.label'), sortable: true },
+  { key: 'roles', text: t('settings.users.fields.role.label'), sortable: true, sortingKey: 'role' }
+])
+
+const emptyLabel = computed(() =>
+  props.query
+    ? t('settings.users.noResults')
+    : t('settings.users.empty')
+)
+
+// One badge per grant, highest role first. Instance/domain admin have no single project to
+// badge (their identity is instance/domain-wide), so InstanceUsersRoleBadge gets project: null.
+function roleBadgesForPermissions(permissions) {
+  return (permissions ?? [])
+    .map(parsePermission)
+    .filter(({ role, project }) => isInstanceOrDomainRole(role) || (project && project !== '*'))
+    .sort(compareGrants)
+    .map(({ role, project }) => ({ role, project: isInstanceOrDomainRole(role) ? null : project }))
+}
+
+const items = computed(() =>
+  props.users.map(user => ({
+    ...user,
+    roles: roleBadgesForPermissions(user.permissions)
+  }))
+)
+</script>
+
+<template>
+  <div class="instance-users-list">
+    <page-table-generic
+      v-model:sort="sort"
+      v-model:order="order"
+      :items="items"
+      :fields="fields"
+      :loading="loading"
+      primary-key="uid"
+    >
+      <template #cell(uid)="{ item }">
+        <display-user :value="item.uid" />
+      </template>
+      <template #cell(roles)="{ item }">
+        <instance-users-role-badges
+          :roles="item.roles"
+          @more="emit('open', { action: 'manage', uid: item.uid })"
+        />
+      </template>
+      <template #row-actions="{ item }">
+        <instance-users-actions
+          :user="item"
+          :can-manage-account="canManageAccounts"
+          :is-current-user="isCurrentUser(item.uid)"
+          @open="emit('open', $event)"
+        />
+      </template>
+      <template #empty>
+        <p class="text-secondary small m-3">
+          {{ emptyLabel }}
+        </p>
+      </template>
+    </page-table-generic>
+  </div>
+</template>