@enso-ui/users 3.0.4 → 3.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 laravel-enso
+Copyright (c) 2026 laravel-enso
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -25,4 +25,4 @@ Thank you to all the users who already contributed to Enso!
 
 ## License
 
-[ISC](https://opensource.org/licenses/ISC)
+MIT

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@enso-ui/users",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "Basic users package",
   "main": "bulma/index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/enso-ui/users.git"
@@ -15,39 +12,28 @@
     "vue"
   ],
   "author": "Adrian Ocneanu <aocneanu@gmail.com>",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/enso-ui/users/issues"
   },
   "homepage": "https://github.com/enso-ui/users#readme",
   "dependencies": {
     "@enso-ui/accessories": "^4.0",
-    "@enso-ui/auth": "^3.0",
+    "@enso-ui/auth": "^3.1.0",
     "@enso-ui/confirmation": "^2.0",
     "@enso-ui/directives": "^2.0",
     "@enso-ui/divider": "^2.0",
-    "@enso-ui/forms": "^3.0",
+    "@enso-ui/forms": "^4.0.0",
     "@enso-ui/modal": "^3.0",
-    "@enso-ui/tables": "^3.0",
+    "@enso-ui/tables": "^4.0.0",
     "@enso-ui/tabs": "^2.0",
-    "@enso-ui/ui": "^6.0",
+    "@enso-ui/ui": "^7.0.0",
     "@enso-ui/uploader": "^2.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.2",
-    "@fortawesome/free-brands-svg-icons": "^5.11.2",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/vue-fontawesome": "3.0.0-5",
-    "vue": "^3.0",
-    "vuex": "^4.0.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "5.0.0-beta.6",
-    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
-    "@vue/eslint-config-airbnb": "^5.0.0",
-    "autoprefixer": "^9.6.1",
-    "babel-eslint": "^10.0.1",
-    "cross-env": "^6.0.0",
-    "eslint": "^7.0.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-vue": "^8.0.0"
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-brands-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "3.1.3",
+    "pinia": "^3.0.3",
+    "vue": "^3.0"
   }
 }

package/src/bulma/components/navbar/ProfileControl.vue

@@ -4,8 +4,7 @@
             <a class="navbar-item"
                 @click="visitProfile()"
                 v-if="isTouch">
-                <avatar class="is-30x30"
-                    :user="user"/>
+                <avatar :user="user"/>
             </a>
             <div :class="[
                 'navbar-item user-profile',
@@ -14,8 +13,7 @@
             ]" v-else>
                 <a class="navbar-link is-arrowless"
                     @click.stop="toggle()">
-                    <avatar class="is-30x30"
-                        :user="user"/>
+                    <avatar :user="user"/>
                     <span class="ml-1">
                         {{ user.person.appellative || user.person.name }}
                     </span>
@@ -37,22 +35,22 @@
                     <nav class="level navbar-item">
                         <div class="level-left">
                             <div class="level-item">
-                                <a class="button is-small is-success ml-1"
+                                <a class="button is-small ml-1"
                                     @click="visitProfile(); toggle()">
                                     <span>{{ i18n('Profile') }}</span>
                                     <span class="icon is-small">
-                                        <fa icon="eye"/>
+                                        <fa :icon="faEye"/>
                                     </span>
                                 </a>
                             </div>
                         </div>
                         <div class="level-right">
                             <div class="level-item">
-                                <a class="button is-small is-danger ml-3"
+                                <a class="button is-small ml-3"
                                     @click="logout(); toggle()">
                                     <span>{{ i18n('Logout') }}</span>
                                     <span class="icon is-small">
-                                        <fa icon="sign-out-alt"/>
+                                        <fa :icon="faRightFromBracket"/>
                                     </span>
                                 </a>
                             </div>
@@ -65,15 +63,13 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faEye, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
+import { faEye, faRightFromBracket } from '@fortawesome/free-solid-svg-icons';
+import { auth } from '@enso-ui/auth/src/pinia/auth';
 import { clickOutside } from '@enso-ui/directives';
 import CoreProfileControl from '../../../core/components/navbar/ProfileControl.vue';
 import Avatar from '../../pages/users/components/Avatar.vue';
 
-library.add(faEye, faSignOutAlt);
 export default {
     name: 'ProfileControl',
 
@@ -83,8 +79,15 @@ export default {
 
     inject: ['i18n'],
 
+    data: () => ({
+        faEye,
+        faRightFromBracket,
+    }),
+
     methods: {
-        ...mapActions('auth', ['logout']),
+        logout() {
+            return auth().logout();
+        },
     },
 };
 </script>
@@ -95,13 +98,41 @@ export default {
             border-radius: 290486px;
         }
 
+        .navbar-link {
+            transition: background-color 0.15s ease, color 0.15s ease;
+
+            .image.avatar {
+                img {
+                    height: 30px;
+                    max-height: 30px;
+                }
+            }
+        }
+
+        .navbar-dropdown {
+            min-width: 18.5rem;
+            background-color: var(--bulma-navbar-dropdown-background-color);
+            border: 1px solid var(--bulma-border);
+            box-shadow: none;
+            overflow: hidden;
+        }
+
         .user-panel {
-            width: 17em;
+            width: 100%;
+            background-color: var(--bulma-navbar-dropdown-background-color);
             .image.avatar.is-96x96 {
                 img {
                     max-height: 96px;
                 }
             }
         }
+
+        .navbar-divider {
+            background-color: var(--bulma-border);
+        }
+
+        .level.navbar-item {
+            background-color: var(--bulma-scheme-main);
+        }
     }
 </style>

package/src/bulma/pages/users/Create.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="columns is-centered">
+    <div class="columns is-centered">
         <div class="column is-four-fifths-desktop is-full-touch">
-            <enso-form class="box has-background-light raises-on-hover">
+            <enso-form class="box">
                 <template #group_id="props">
                     <form-field v-bind="props"
                         @update:model-value="pivotParams.userGroups.id = $event"/>

package/src/bulma/pages/users/Edit.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="columns is-centered">
         <div class="column is-four-fifths-desktop is-full-touch">
-            <enso-form class="box has-background-light raises-on-hover"
+            <enso-form class="box"
                 ref="form"
                 @ready="
                     ready = true;
@@ -33,20 +33,6 @@
                         v-if="!props.field.meta.hidden"/>
                 </template>
                 <template #actions-left>
-                    <div class="level-item"
-                        v-if="canAccess('administration.users.destroy')">
-                        <a class="button is-danger"
-                            @click="deletableUser = Number.parseInt($route.params.user, 10)"
-                            v-if="ready">
-                            <span class="is-hidden-mobile">
-                                {{ i18n('Delete') }}
-                            </span>
-                            <span class="icon">
-                                <fa icon="trash-alt"/>
-                            </span>
-                            <span class="is-hidden-mobile"/>
-                        </a>
-                    </div>
                     <div class="level-item">
                         <a class="button is-warning"
                             @click="$router.push({
@@ -58,7 +44,7 @@
                                 {{ i18n('Edit Person') }}
                             </span>
                             <span class="icon">
-                                <fa icon="user-tie"/>
+                                <fa :icon="faUserTie"/>
                             </span>
                             <span class="is-hidden-mobile"/>
                         </a>
@@ -72,7 +58,7 @@
                                 {{ i18n('Reset Password') }}
                             </span>
                             <span class="icon">
-                                <fa icon="redo"/>
+                                <fa :icon="faRotateRight"/>
                             </span>
                             <span class="is-hidden-mobile"/>
                         </a>
@@ -105,37 +91,28 @@
                     </tab>
                 </template>
             </accessories>
-            <delete-modal :user-id="deletableUser"
-                @close="deletableUser = null"
-                @destroyed="navigateToIndex"
-                v-if="!!deletableUser"/>
         </div>
     </div>
 </template>
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import {
-    faUserTie, faTrashAlt, faKey, faRedo,
+    faRotateRight, faUserTie,
 } from '@fortawesome/free-solid-svg-icons';
 import { EnsoForm, FormField } from '@enso-ui/forms/bulma';
 import Accessories from '@enso-ui/accessories/bulma';
 import { Tab } from '@enso-ui/tabs/bulma';
-import { mapState } from 'vuex';
 import { PasswordStrength } from '@enso-ui/auth';
-import DeleteModal from './components/DeleteModal.vue';
+import { useStore } from '../../../utils/pinia';
 import Tokens from './components/Tokens.vue';
 import Sessions from './components/Sessions.vue';
 
-library.add(faUserTie, faTrashAlt, faKey, faRedo);
-
 export default {
     name: 'Edit',
 
     components: {
         Accessories,
-        DeleteModal,
         EnsoForm,
         Fa,
         FormField,
@@ -153,7 +130,8 @@ export default {
     emits: ['update'],
 
     data: () => ({
-        deletableUser: null,
+        faRotateRight,
+        faUserTie,
         ready: false,
         pivotParams: { userGroups: { id: null } },
         password: null,
@@ -161,7 +139,12 @@ export default {
     }),
 
     computed: {
-        ...mapState(['enums', 'user']),
+        enums() {
+            return useStore('enums').enums;
+        },
+        user() {
+            return useStore('app').user;
+        },
         canAccessSessions() {
             return this.canAccess('administration.users.sessions.index')
                 && (`${this.user.role.id}` === this.enums.roles.Admin
@@ -174,8 +157,6 @@ export default {
 
     methods: {
         navigateToIndex() {
-            this.deletableUser = null;
-
             this.$nextTick(() => this.$router
                 .push({ name: 'administration.users.index' })
                 .catch(this.routerErrorHandler));

package/src/bulma/pages/users/Index.vue

@@ -1,46 +1,21 @@
 <template>
     <div>
-        <enso-table class="box is-paddingless raises-on-hover"
+        <EnsoTable class="box p-0"
             id="users"
             ref="table">
             <template #avatarId="{ row }">
                 <avatar class="is-24x24"
                     :user="row"/>
             </template>
-            <template #destroy-button="{ icon, cssClass, row }">
-                <a class="button is-small is-table-button ml-1"
-                    :class="cssClass"
-                    @click="deletableUser = row.id">
-                    <span class="icon is-small">
-                        <fa :icon="icon"/>
-                    </span>
-                </a>
-            </template>
-        </enso-table>
-        <delete-modal :user-id="deletableUser"
-            @close="deletableUser = null"
-            @destroyed="deletableUser = null; $refs.table.fetch()"
-            v-if="!!deletableUser"/>
+        </EnsoTable>
     </div>
 </template>
 
-<script>
-import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+<script setup>
+import { inject } from 'vue';
 import { EnsoTable } from '@enso-ui/tables/bulma';
 import Avatar from './components/Avatar.vue';
-import DeleteModal from './components/DeleteModal.vue';
-
-export default {
-    name: 'Index',
-
-    components: {
-        Avatar, DeleteModal, EnsoTable, Fa,
-    },
-
-    inject: ['canAccess', 'i18n'],
 
-    data: () => ({
-        deletableUser: null,
-    }),
-};
+const canAccess = inject('canAccess');
+const i18n = inject('i18n');
 </script>

package/src/bulma/pages/users/Show.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="columns is-multiline is-centered">
-        <div class="column is-two-thirds-desktop">
+        <div class="column is-two-thirds-widescreen">
             <user-profile/>
         </div>
     </div>

package/src/bulma/pages/users/components/Avatar.vue

@@ -10,7 +10,7 @@
 <script>
 import 'v-tooltip/dist/v-tooltip.css';
 import { VTooltip } from 'v-tooltip';
-import { mapState } from 'vuex';
+import { useStore } from '../../../../utils/pinia';
 
 export default {
     name: 'Avatar',
@@ -31,7 +31,9 @@ export default {
     },
 
     computed: {
-        ...mapState(['avatarKey']),
+        avatarKey() {
+            return useStore('app').avatarKey;
+        },
         label() {
             return this.tooltip
                 ? this.user.person?.appellative ?? this.user.person?.name

package/src/bulma/pages/users/components/Session.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="box p-1 raises-on-hover mb-2">
+    <div class="box p-1 mb-2">
         <div class="level">
             <div class="level-left">
                 <div class="level-item">
                     <span class="icon is-small m-1"
                         v-tooltip="session.ipAddress">
-                        <fa icon="link"/>
+                        <fa :icon="faLink"/>
                     </span>
                     <span>{{ session.ipAddress }}</span>
                 </div>
@@ -14,7 +14,7 @@
                 <div class="level-item">
                     <span class="icon is-small mr-1"
                         v-tooltip="lastActivity(session)">
-                        <fa icon="calendar-alt"/>
+                        <fa :icon="faCalendarDays"/>
                     </span>
                     <span class="icon is-small mr-1"
                         v-tooltip="`${session.OS} version: ${session.OSVersion}`">
@@ -31,7 +31,7 @@
                             @confirm="$emit('delete')">
                             <a class="button is-naked is-small">
                                 <span class="icon">
-                                    <fa icon="trash-alt"/>
+                                    <fa :icon="faTrashCan"/>
                                 </span>
                             </a>
                         </confirmation>
@@ -44,9 +44,8 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import {
-    faTrashAlt, faInfoCircle, faCalendarAlt, faPencilAlt, faLink,
+    faTrashCan, faCalendarDays, faLink,
     faQuestionCircle,
 } from '@fortawesome/free-solid-svg-icons';
 
@@ -59,13 +58,6 @@ import {
 import Confirmation from '@enso-ui/confirmation/bulma';
 import formatDistance from '@enso-ui/ui/src/modules/plugins/date-fns/formatDistance';
 
-library.add([
-    faCalendarAlt, faInfoCircle, faPencilAlt, faTrashAlt, faLink,
-    faQuestionCircle, faWindows, faLinux, faApple, faAndroid, faChrome,
-    faOpera, faInternetExplorer, faFirefoxBrowser, faEdge, faLinux, faUbuntu,
-    faFreebsd, faSafari,
-]);
-
 export default {
     name: 'Session',
 
@@ -83,6 +75,9 @@ export default {
     emits: ['delete'],
 
     data: () => ({
+        faCalendarDays,
+        faLink,
+        faTrashCan,
         confirmation: false,
     }),
 
@@ -98,46 +93,46 @@ export default {
             case 'Windows NT':
             case 'WindowsPhoneOS':
             case 'WindowsMobileOS':
-                return ['fab', 'windows'];
+                return faWindows;
             case 'OS X':
             case 'iOS':
             case 'iPadOS':
             case 'Macintosh':
-                return ['fab', 'apple'];
+                return faApple;
             case 'Ubuntu':
-                return ['fab', 'ubuntu'];
+                return faUbuntu;
             case 'OpenBSD':
-                return ['fab', 'freebsd'];
+                return faFreebsd;
             case 'Debian':
             case 'Linux':
-                return ['fab', 'linux'];
+                return faLinux;
             case 'ChromeOS':
-                return ['fab', 'chrome'];
+                return faChrome;
             case 'AndroidOS':
-                return ['fab', 'android'];
+                return faAndroid;
             default:
-                return 'question-circle';
+                return faQuestionCircle;
             }
         },
         browser({ browser }) {
             switch (browser) {
             case 'Opera Mini':
             case 'Opera':
-                return ['fab', 'opera'];
+                return faOpera;
             case 'Edge':
-                return ['fab', 'edge'];
+                return faEdge;
             case 'Chrome':
-                return ['fab', 'chrome'];
+                return faChrome;
             case 'Mozilla':
             case 'Firefox':
-                return ['fab', 'firefox-browser'];
+                return faFirefoxBrowser;
             case 'Safari':
-                return ['fab', 'safari'];
+                return faSafari;
             case 'IE':
-                return ['fab', 'internet-explorer'];
+                return faInternetExplorer;
 
             default:
-                return 'question-circle';
+                return faQuestionCircle;
             }
         },
     },

package/src/bulma/pages/users/components/Sessions.vue

@@ -7,7 +7,7 @@
                     type="text"
                     :placeholder="i18n('Filter')">
                 <span class="icon is-small is-left">
-                    <fa icon="search"/>
+                    <fa :icon="faSearch"/>
                 </span>
                 <span class="icon is-small is-right clear-button"
                     @click="query = ''"
@@ -16,13 +16,13 @@
                 </span>
             </p>
             <p class="control">
-                <a class="button is-rounded is-small is-bold ml-2"
+                <a class="button is-rounded is-small ml-2 has-text-weight-bold"
                     @click="fetch()">
                     <span>
                         {{ i18n('Reload') }}
                     </span>
                     <span class="icon">
-                        <fa icon="sync"/>
+                        <fa :icon="faArrowsRotate"/>
                     </span>
                 </a>
             </p>
@@ -40,12 +40,9 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlus, faSync, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faArrowsRotate, faSearch } from '@fortawesome/free-solid-svg-icons';
 import Session from './Session.vue';
 
-library.add(faPlus, faSync, faSearch);
-
 export default {
     name: 'Sessions',
 
@@ -63,6 +60,8 @@ export default {
     emits: ['remove', 'update'],
 
     data: () => ({
+        faArrowsRotate,
+        faSearch,
         sessions: [],
         query: '',
         form: false,

package/src/bulma/pages/users/components/Token.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="box p-1 raises-on-hover mb-2">
+    <div class="box p-1 mb-2">
         <div class="level">
             <div class="level-left">
                 <div class="level-item">
                     <span class="icon is-small m-1"
                         v-tooltip="token.name">
-                        <fa icon="key"/>
+                        <fa :icon="faKey"/>
                     </span>
                     <span>
                         {{ token.name }}
@@ -16,7 +16,7 @@
                 <div class="level-item">
                     <span class="icon is-small"
                         v-tooltip="lastUsed(token)">
-                        <fa icon="calendar-alt"/>
+                        <fa :icon="faCalendarDays"/>
                     </span>
                     <span class="is-pulled-right is-flex">
                         <confirmation placement="top"
@@ -25,7 +25,7 @@
                             @confirm="$emit('delete')">
                             <a class="button is-naked is-small">
                                 <span class="icon">
-                                    <fa icon="trash-alt"/>
+                                    <fa :icon="faTrashCan"/>
                                 </span>
                             </a>
                         </confirmation>
@@ -38,17 +38,12 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import {
-    faTrashAlt, faInfoCircle, faCalendarAlt, faPencilAlt,
+    faTrashCan, faCalendarDays, faKey,
 } from '@fortawesome/free-solid-svg-icons';
 import Confirmation from '@enso-ui/confirmation/bulma';
 import formatDistance from '@enso-ui/ui/src/modules/plugins/date-fns/formatDistance';
 
-library.add([
-    faCalendarAlt, faInfoCircle, faPencilAlt, faTrashAlt,
-]);
-
 export default {
     name: 'Token',
 
@@ -66,6 +61,9 @@ export default {
     emits: ['delete'],
 
     data: () => ({
+        faCalendarDays,
+        faKey,
+        faTrashCan,
         confirmation: false,
     }),
 

package/src/bulma/pages/users/components/TokenForm.vue

@@ -1,6 +1,6 @@
 <template>
     <modal>
-        <enso-form class="box has-background-light"
+        <enso-form class="box"
             v-bind="$attrs"
             disable-state/>
     </modal>

package/src/bulma/pages/users/components/Tokens.vue

@@ -2,14 +2,14 @@
     <div class="tokens-wrapper">
         <div class="field is-grouped">
             <p class="control">
-                <a class="button is-rounded is-small is-bold is-info"
+                <a class="button is-rounded is-small is-info has-text-weight-bold"
                     @click="form = true"
                     v-if="canAccess('administration.users.tokens.create')">
                     <span>
                         {{ i18n('New Token') }}
                     </span>
                     <span class="icon">
-                        <fa icon="plus"/>
+                        <fa :icon="faPlus"/>
                     </span>
                 </a>
             </p>
@@ -19,7 +19,7 @@
                     type="text"
                     :placeholder="i18n('Filter')">
                 <span class="icon is-small is-left">
-                    <fa icon="search"/>
+                    <fa :icon="faSearch"/>
                 </span>
                 <span v-if="query"
                     class="icon is-small is-right clear-button"
@@ -28,13 +28,13 @@
                 </span>
             </p>
             <p class="control">
-                <a class="button is-rounded is-small is-bold ml-2"
+                <a class="button is-rounded is-small ml-2 has-text-weight-bold"
                     @click="fetch()">
                     <span>
                         {{ i18n('Reload') }}
                     </span>
                     <span class="icon">
-                        <fa icon="sync"/>
+                        <fa :icon="faArrowsRotate"/>
                     </span>
                 </a>
             </p>
@@ -60,14 +60,11 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlus, faSync, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faArrowsRotate, faSearch } from '@fortawesome/free-solid-svg-icons';
 import Url from './Url.vue';
 import Token from './Token.vue';
 import TokenForm from './TokenForm.vue';
 
-library.add(faPlus, faSync, faSearch);
-
 export default {
     name: 'Tokens',
 
@@ -90,6 +87,9 @@ export default {
     emits: ['remove', 'update'],
 
     data: () => ({
+        faArrowsRotate,
+        faPlus,
+        faSearch,
         tokens: [],
         query: '',
         form: false,

package/src/bulma/pages/users/components/Url.vue

@@ -12,7 +12,7 @@
                     <a class="button"
                         @click="copy">
                         <span class="icon is-small">
-                            <fa icon="copy"/>
+                            <fa :icon="faCopy"/>
                         </span>
                     </a>
                 </div>
@@ -24,14 +24,11 @@
 
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCopy } from '@fortawesome/free-solid-svg-icons';
 import { focus, selectOnFocus } from '@enso-ui/directives';
 import { Modal } from '@enso-ui/modal/bulma';
 import Clipboard from '@enso-ui/clipboard';
 
-library.add(faCopy);
-
 export default {
     name: 'Url',
 
@@ -53,6 +50,10 @@ export default {
         },
     },
 
+    data: () => ({
+        faCopy,
+    }),
+
     methods: {
         copy() {
             this.$refs.clipboard.copy(this.link);

package/src/bulma/pages/users/components/UserProfile.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="box has-background-light p-5 raises-on-hover"
+    <div class="box p-5"
         v-if="profile">
         <h4 class="title is-4 has-text-centered">
             <span class="icon">
-                <fa icon="user"
+                <fa :icon="faUser"
                     size="xs"/>
             </span>
             {{ profile.person.name }}
@@ -19,10 +19,10 @@
                 <div class="field is-grouped is-justify-content-center mt-3">
                     <p class="control"
                         v-if="isSelfVisiting">
-                        <a class="button is-primary"
+                        <a class="button is-dark"
                             @click="generateAvatar">
                             <span class="icon">
-                                <fa icon="sync-alt"/>
+                                <fa :icon="faArrowsRotate"/>
                             </span>
                             <span>
                                 {{ i18n('Avatar') }}
@@ -35,10 +35,10 @@
                             :url="route('core.avatars.store')"
                             file-key="avatar">
                             <template #control="{ controlEvents }">
-                                <a class="button is-info"
+                                <a class="button is-dark"
                                     v-on="controlEvents">
                                     <span class="icon">
-                                        <fa icon="upload"/>
+                                        <fa :icon="faUpload"/>
                                     </span>
                                     <span>
                                         {{ i18n('Avatar') }}
@@ -50,10 +50,10 @@
                     <p class="control"
                         v-if="canAccess('core.impersonate.start')
                             && !isWebview && !isSelfVisiting && !impersonating">
-                        <a class="button is-warning"
+                        <a class="button is-dark"
                             @click="startImpersonating">
                             <span class="icon">
-                                <fa icon="user-circle"/>
+                                <fa :icon="faCircleUser"/>
                             </span>
                             <span>
                                 {{ i18n('Impersonate') }}
@@ -62,13 +62,13 @@
                     </p>
                     <p class="control"
                         v-if="canAccess('administration.users.edit')">
-                        <a class="button is-warning"
+                        <a class="button is-dark"
                             @click="$router.push({
                                 name: 'administration.users.edit',
                                 params: { user: profile.id },
                             }).catch(routerErrorHandler)">
                             <span class="icon">
-                                <fa icon="pencil-alt"/>
+                                <fa :icon="faPen"/>
                             </span>
                             <span>
                                 {{ i18n('Edit') }}
@@ -143,19 +143,16 @@
 </template>
 
 <script>
-import { mapState, mapMutations, mapGetters } from 'vuex';
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import {
-    faUser, faUserCircle, faSyncAlt, faUpload, faPencilAlt,
+    faArrowsRotate, faUpload, faUser, faCircleUser, faPen,
 } from '@fortawesome/free-solid-svg-icons';
 import Avatar from '@enso-ui/users/src/bulma/pages/users/components/Avatar.vue';
 import { EnsoUploader } from '@enso-ui/uploader/bulma';
 import eventBus from '@enso-ui/ui/src/core/services/eventBus';
 import Divider from '@enso-ui/divider';
 import format from '@enso-ui/ui/src/modules/plugins/date-fns/format';
-
-library.add(faUser, faUserCircle, faSyncAlt, faUpload, faPencilAlt);
+import { useStore } from '../../../../utils/pinia';
 
 export default {
     name: 'UserProfile',
@@ -170,14 +167,30 @@ export default {
     emits: ['start-impersonating'],
 
     data: () => ({
+        faArrowsRotate,
+        faCircleUser,
+        faPen,
+        faUpload,
+        faUser,
         profile: null,
     }),
 
     computed: {
-        ...mapState(['user', 'meta', 'enums', 'impersonating']),
-        ...mapState('auth', ['isAuth']),
-        ...mapState('layout', ['isMobile']),
-        ...mapGetters(['isWebview']),
+        user() {
+            return useStore('app').user;
+        },
+        meta() {
+            return useStore('app').meta;
+        },
+        impersonating() {
+            return useStore('app').impersonating;
+        },
+        isAuth() {
+            return useStore('auth').isAuth;
+        },
+        isWebview() {
+            return useStore('app').isWebview;
+        },
         isSelfVisiting() {
             return this.user.id === this.profile.id;
         },
@@ -190,7 +203,9 @@ export default {
     },
 
     methods: {
-        ...mapMutations(['updateAvatar']),
+        updateAvatar() {
+            useStore('app').updateAvatar();
+        },
         dateFormat(date) {
             return date
                 ? format(date, this.meta.dateFormat)

package/src/bulma/register.js

@@ -1,4 +1,5 @@
-import App from '@enso-ui/ui/src/core/app';
 import ProfileController from './components/navbar/ProfileControl.vue';
 
-App.registerNavbarItem('profile-controller', ProfileController, 400);
+export default App => {
+    App.registerNavbarItem('profile-controller', ProfileController, 400);
+};

package/src/bulma/routes/administration/users.js

@@ -1,6 +1,6 @@
 import routeImporter from '@enso-ui/ui/src/modules/importers/routeImporter';
 
-const routes = routeImporter(require.context('./users', false, /.*\.js$/));
+const routes = routeImporter.fromGlob(import.meta.glob('./users/*.js', { eager: true }));
 const Router = () => import('@enso-ui/ui/src/bulma/pages/Router.vue');
 
 export default {

package/src/bulma/routes/administration.js

@@ -1,6 +1,6 @@
 import routeImporter from '@enso-ui/ui/src/modules/importers/routeImporter';
 
-const routes = routeImporter(require.context('./administration', false, /.*\.js$/));
+const routes = routeImporter.fromGlob(import.meta.glob('./administration/*.js', { eager: true }));
 
 export default {
     path: '/administration',

package/src/core/components/navbar/ProfileControl.vue

@@ -1,5 +1,5 @@
 <script>
-import { mapState } from 'vuex';
+import { useStore } from '../../../utils/pinia';
 
 export default {
     name: 'CoreProfileControl',
@@ -10,11 +10,6 @@ export default {
         visible: false,
     }),
 
-    computed: {
-        ...mapState(['user']),
-        ...mapState('layout', ['isTouch']),
-    },
-
     methods: {
         hide() {
             this.visible = false;
@@ -23,17 +18,22 @@ export default {
             this.visible = !this.visible;
         },
         visitProfile() {
+            const app = useStore('app');
+
             this.$router.push({
                 name: 'administration.users.show',
-                params: { user: this.user.id },
+                params: { user: app.user.id },
             }).catch(this.routerErrorHandler);
         },
     },
 
     render() {
+        const app = useStore('app');
+        const layout = useStore('layout');
+
         return this.$slots.default({
-            user: this.user,
-            isTouch: this.isTouch,
+            user: app.user,
+            isTouch: layout.isTouch,
             visitProfile: this.visitProfile,
             hide: this.hide,
             toggle: this.toggle,

package/src/utils/pinia.js

@@ -0,0 +1,11 @@
+import { getActivePinia } from 'pinia';
+
+export const useStore = id => {
+    const store = getActivePinia()?._s?.get(id);
+
+    if (!store) {
+        throw new Error(`Missing Pinia store: ${id}`);
+    }
+
+    return store;
+};

package/src/bulma/pages/users/components/DeleteModal.vue

@@ -1,64 +0,0 @@
-<template>
-    <modal>
-        <div class="box">
-            <h5 class="subtitle is-5">
-                {{ i18n("The selected user is about to be deleted. Are you sure?") }}
-            </h5>
-            <hr>
-            <div class="level">
-                <div class="level-left"/>
-                <div class="level-right">
-                    <div class="level-item">
-                        <button class="button is-outlined"
-                            @click="$emit('close')">
-                            {{ i18n("Cancel") }}
-                        </button>
-                        <button class="button is-danger ml-1"
-                            v-focus
-                            @click="destroy()">
-                            {{ i18n("Delete User") }}
-                        </button>
-                        <button class="button is-danger ml-1"
-                            v-focus
-                            @click="destroy(true)">
-                            {{ i18n("Delete User and Person") }}
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </modal>
-</template>
-
-<script>
-import { focus } from '@enso-ui/directives';
-import { Modal } from '@enso-ui/modal/bulma';
-
-export default {
-    name: 'DeleteModal',
-
-    components: { Modal },
-
-    directives: { focus },
-
-    inject: ['http', 'i18n', 'errorHandler', 'route'],
-
-    props: {
-        userId: {
-            type: Number,
-            required: true,
-        },
-    },
-
-    emits: ['close', 'destroyed'],
-
-    methods: {
-        destroy(person = false) {
-            this.http.delete(this.route('administration.users.destroy', this.userId),
-                { params: { person: !!person } })
-                .then(({ data }) => this.$emit('destroyed', data))
-                .catch(this.errorHandler);
-        },
-    },
-};
-</script>