Lock Slug field by default

Author: lcharette

packages/sprinkle-admin/app/locale/en_US/messages.php

@@ -60,6 +60,7 @@
         'NOT_FOUND'           => 'Group not found',
         'PAGE'                => 'Groups',
         'PAGE_DESCRIPTION'    => 'A listing of the groups for your site.  Provides management tools for editing and deleting groups.',
+        'SLUG_UNMODIFIABLE'   => 'The slug should not be changed. Click to unlock and use with caution.',
         'UPDATE'              => 'Details updated for group <strong>{{name}}</strong>',
         'USERS'               => 'Users in this group',
     ],
@@ -110,6 +111,7 @@
         'PAGE_DESCRIPTION'    => 'A listing of the roles for your site. Provides management tools for editing and deleting roles.',
         'PERMISSIONS'         => 'Role permissions',
         'PERMISSIONS_UPDATED' => 'Permissions updated for role <strong>{{name}}</strong>',
+        'SLUG_UNMODIFIABLE'   => 'The slug should not be changed. Click to unlock and use with caution.',
         'UPDATE'              => 'Update Roles',
         'UPDATED'             => 'Details updated for role <strong>{{name}}</strong>',
         'USERS'               => 'Users with this role',

packages/sprinkle-admin/app/locale/fr_FR/messages.php

@@ -60,6 +60,7 @@
         'NOT_FOUND'           => 'Groupe non trouvé',
         'PAGE'                => 'Groupes',
         'PAGE_DESCRIPTION'    => 'Une liste des groupes pour votre site. Fournit des outils de gestion pour éditer et supprimer des groupes.',
+        'SLUG_UNMODIFIABLE'   => 'Le slug ne devrait pas être modifié. Cliquez pour déverrouiller et utilisez avec précaution.',
         'UPDATE'              => 'Les détails du groupe <strong>{{name}}</strong> ont été enregistrés',
         'USERS'               => 'Utilisateurs dans ce groupe',
     ],
@@ -110,6 +111,7 @@
         'PAGE_DESCRIPTION'    => 'Une liste des rôles de votre site. Fournit des outils de gestion pour modifier et supprimer des rôles.',
         'PERMISSIONS'         => 'Autorisations associés à ce rôle',
         'PERMISSIONS_UPDATED' => 'Autorisations mises à jour pour le rôle <strong>{{name}}</strong>',
+        'SLUG_UNMODIFIABLE'   => 'Le slug ne devrait pas être modifié. Cliquez pour déverrouiller et utilisez avec précaution.',
         'UPDATE'              => 'Mettre à jour les rôles',
         'UPDATED'             => 'Détails mis à jour pour le rôle <strong>{{name}}</strong>',
         'USERS'               => 'Utilisateurs avec ce rôle',

packages/theme-pink-cupcake/src/components/Pages/Admin/Group/GroupForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useGroupApi } from '@userfrosting/sprinkle-admin/composables'
 import type { GroupInterface } from '@userfrosting/sprinkle-account/interfaces'
 
@@ -13,6 +13,15 @@ const props = defineProps<{ group?: GroupInterface }>()
  */
 const { createGroup, updateGroup, r$, formData, apiLoading, resetForm } = useGroupApi()
 
+/**
+ * Helper methods & Variables
+ */
+const slugForcedUnlocked = ref<boolean>(false)
+const disabledChange = computed<boolean>(() => {
+    if (slugForcedUnlocked.value) return false
+    return props.group != null
+})
+
 /**
  * Watchers - Watch for changes in the group prop and update formData
  * accordingly. Useful when the group prop is updated from the parent component,
@@ -81,9 +90,20 @@ const submitForm = async () => {
                 <label class="uk-form-label" for="form-stacked-text">{{ $t('SLUG') }}</label>
                 <div class="uk-inline uk-width-1-1">
                     <font-awesome-icon class="fa-form-icon" icon="tag" fixed-width />
+                    <button
+                        class="uk-button uk-button-default uk-form-button"
+                        type="button"
+                        :uk-tooltip="$t('GROUP.SLUG_UNMODIFIABLE')"
+                        @click="slugForcedUnlocked = !slugForcedUnlocked"
+                        v-if="props.group != null">
+                        <font-awesome-icon
+                            fixed-width
+                            :icon="slugForcedUnlocked ? 'lock-open' : 'lock'" />
+                    </button>
                     <input
                         class="uk-input"
                         :class="{ 'uk-form-danger': r$.slug.$error }"
+                        :disabled="disabledChange"
                         type="text"
                         :placeholder="$t('SLUG')"
                         aria-label="Group Slug"

packages/theme-pink-cupcake/src/components/Pages/Admin/Role/RoleForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { RoleInterface } from '@userfrosting/sprinkle-account/interfaces'
 import { useRoleApi } from '@userfrosting/sprinkle-admin/composables'
 
@@ -13,6 +13,15 @@ const props = defineProps<{ role?: RoleInterface }>()
  */
 const { createRole, updateRole, r$, formData, apiLoading, resetForm } = useRoleApi()
 
+/**
+ * Helper methods & Variables
+ */
+const slugForcedUnlocked = ref<boolean>(false)
+const disabledChange = computed<boolean>(() => {
+    if (slugForcedUnlocked.value) return false
+    return props.role != null
+})
+
 /**
  * Watchers - Watch for changes in the role prop and update formData
  * accordingly. Useful when the role prop is updated from the parent component,
@@ -80,9 +89,20 @@ const submitForm = async () => {
                 <label class="uk-form-label" for="form-stacked-text">{{ $t('SLUG') }}</label>
                 <div class="uk-inline uk-width-1-1">
                     <font-awesome-icon class="fa-form-icon" icon="tag" fixed-width />
+                    <button
+                        class="uk-button uk-button-default uk-form-button"
+                        type="button"
+                        :uk-tooltip="$t('ROLE.SLUG_UNMODIFIABLE')"
+                        @click="slugForcedUnlocked = !slugForcedUnlocked"
+                        v-if="props.role != null">
+                        <font-awesome-icon
+                            fixed-width
+                            :icon="slugForcedUnlocked ? 'lock-open' : 'lock'" />
+                    </button>
                     <input
                         class="uk-input"
                         :class="{ 'uk-form-danger': r$.slug.$error }"
+                        :disabled="disabledChange"
                         type="text"
                         :placeholder="$t('SLUG')"
                         aria-label="Role Slug"
@@ -91,7 +111,6 @@ const submitForm = async () => {
                         v-model="formData.slug" />
                     <UFFormValidationError :errors="r$.$errors.slug" />
                 </div>
-                <!-- TODO : Disable + unlock button; Auto generate slug -->
             </div>
 
             <div class="uk-margin">