@concretecms/bedrock 1.3.6 → 1.4.0

package/assets/cms/components/form/ConcreteUserSelect.vue

@@ -0,0 +1,126 @@
+<template>
+    <concrete-ajax-select
+        :name="inputName"
+        :access-token="accessToken"
+        :css-classes="['ccm-form-select-user']"
+        :data-source-url="dataSourceUrl"
+        :selected-options-url="selectedOptionsUrl"
+        :value="userId"
+        @change="updateSelected"
+        :form-data="formData"
+    >
+    </concrete-ajax-select>
+</template>
+
+<script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect */
+import ConcreteAjaxSelect from './ConcreteAjaxSelect'
+export default {
+    components: { ConcreteAjaxSelect },
+    prop: ['userId'],
+    model: {
+        prop: 'userId',
+        event: 'change'
+    },
+    props: {
+        includeAvatar: {
+            type: Boolean,
+            default: false
+        },
+        labelFormat: {
+            type: String,
+            default: 'auto'
+        },
+        accessToken: {
+            type: String,
+            required: true
+        },
+        inputName: {
+            type: String
+        },
+        userId: {
+            type: [Number, String, Array],
+            required: false
+        }
+    },
+    computed: {
+        formData() {
+            return {
+                labelFormat: this.labelFormat,
+                includeAvatar: this.includeAvatar,
+                userId: this.userId
+            }
+        }
+    },
+    data() {
+        return {
+            dataSourceUrl: CCM_DISPATCHER_FILENAME + '/ccm/system/user/autocomplete',
+            selectedOptionsUrl: CCM_DISPATCHER_FILENAME + '/ccm/system/user/autocomplete/get_selected',
+            selectedUserId: null
+        }
+    },
+    watch: {
+        userId: {
+            immediate: true,
+            handler: function(userId) {
+                this.selectedUserId = userId
+            }
+        }
+    },
+    methods: {
+        updateSelected(value) {
+            this.selectedUserId = value
+            this.$emit('change', this.selectedUserId)
+        },
+        renderOption(item) {
+            var option = '<div>'
+
+            if (item.avatar) {
+                option += `<div class="ccm-form-select-user-avatar">
+                                <img src="${item.avatar}"/>
+                           </div>`
+            }
+
+            option += '<div>'
+            option += `<div class="ccm-form-select-user-label-primary">
+                            ${escape(item.primary_label)}
+                       </div>`
+
+            if (item.secondary_label) {
+                option += `<div class="ccm-form-select-user-label-secondary text-secondary">
+                               ${escape(item.secondary_label)}
+                           </div>`
+            }
+
+            option += '</div>'
+            option += '</div>'
+            return option
+        }
+    }
+}
+</script>
+<style lang="scss">
+.ccm-form-select-user {
+  .item,
+  .option {
+    align-items: center;
+    display: flex;
+  }
+
+  .ccm-form-select-user-label-secondary {
+    font-size: 0.8rem;
+  }
+
+  .ccm-form-select-user-avatar {
+    flex: 0 0 20px; // Ensure this is at least 30px wide
+    margin-right: 12px;
+
+    img {
+      border-radius: 50%;
+      height: auto;
+      max-width: 100%;
+    }
+  }
+}
+</style>

package/assets/cms/components/form/IconSelector.vue

@@ -1,10 +1,12 @@
 <template>
-    <select class="form-control" :name="name" :title="title" v-model="selectedOption" ref="iconSelector">
-        <option v-for="icon in icons" :value="icon.value" :data-icon="icon.value + ' fa-fw'">{{ icon.label }}</option>
+    <select :name="name" :title="title" v-model="selectedOption" ref="iconSelector">
+        <option v-for="icon in icons" :value="icon.value">{{ icon.label }}</option>
     </select>
 </template>
 
 <script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect */
 import { icons } from '../iconlist'
 
 // Export our component definition
@@ -58,9 +60,16 @@ export default {
         }
     },
     mounted() {
-        $(this.$refs.iconSelector).selectpicker({
-            liveSearch: true,
-            width: 'fit'
+        new TomSelect(this.$el, {
+            maxOptions: null,
+            render: {
+                option: function (data, escape) {
+                    return '<div class="d-flex align-items-center"><span class="d-flex align-items-center justify-content-center me-2" style="width: 32px"><i class="' + data.value + '"></i></span><span>' + data.text + '</span></div>'
+                },
+                item: function (item, escape) {
+                    return '<div class="d-flex  align-items-center"><span class="d-flex align-items-center justify-content-center me-2" style="width: 32px"><i class="' + item.value + '"></i></span><span>' + item.text + '</span></div>'
+                }
+            }
         })
     }
 }

package/assets/cms/components/form/PasswordInput.vue

@@ -1,26 +1,56 @@
 <template>
+  <div class="password-widget">
     <div class="input-group">
-        <input
-            class="form-control"
-            autocomplete="off"
-            value=""
-            :name="name"
-            :id="name"
-            :type="inputType"
-        />
-        <button v-if="toggler" type="button" class="input-group-icon" @click="toggle()">
-            <i :class="`fas fa-${iconName}`" aria-hidden="true"></i>
-        </button>
+      <input
+        class="form-control"
+        autocomplete="off"
+        value=""
+        :name="name"
+        :id="name"
+        :type="inputType"
+        v-model="enteredPassword"
+      />
+      <button
+        v-if="toggler"
+        type="button"
+        class="input-group-icon"
+        @click="passwordVisible = !passwordVisible"
+      >
+        <i aria-hidden="true" class="fas" :class="iconClasses"></i>
+      </button>
     </div>
+
+    <ul
+      v-if="strengthMeter"
+      class="d-flex align-items-center mt-2 password-strength-meter"
+    >
+      <li
+        v-for="bar in bars"
+        class="flex-grow-1 rounded h-100 me-2 bg-light bar"
+        :class="strength.id >= bar.id ? 'active' : ''"
+        :title="bar.value"
+      ></li>
+    </ul>
+  </div>
 </template>
 
 <script>
+import { passwordStrength } from 'check-password-strength'
+
 export default {
-    data() {
+    data: () => {
         return {
+            i18n: {
+                invalid: 'Invalid',
+                tooWeak: 'Too Weak',
+                weak: 'Weak',
+                medium: 'Medium',
+                strong: 'Strong',
+                veryStrong: 'Very Strong'
+            },
+            enteredPassword: '',
             passwordVisible: false,
-            inputType: 'password',
-            iconName: 'eye'
+            passwordStrengthOptions: []
         }
     },
     props: {
@@ -30,20 +60,107 @@ export default {
         toggler: {
             type: Boolean,
             default: true
+        },
+        strengthMeter: {
+            type: Boolean,
+            default: false
         }
     },
-    methods: {
-        toggle() {
-            this.passwordVisible = !this.passwordVisible
-
-            if (this.passwordVisible === true) {
-                this.inputType = 'text'
-                this.iconName = 'eye-slash'
-            } else {
-                this.inputType = 'password'
-                this.iconName = 'eye'
+    computed: {
+        inputType() {
+            return this.passwordVisible ? 'text' : 'password'
+        },
+        iconClasses() {
+            return {
+                'fa-eye': !this.passwordVisible,
+                'fa-eye-slash': this.passwordVisible
             }
+        },
+        strength() {
+            return passwordStrength(
+                this.enteredPassword,
+                this.passwordStrengthOptions
+            )
+        },
+        bars() {
+            return this.passwordStrengthOptions.filter(
+                (option) => option.id >= 0
+            )
         }
+    },
+    mounted() {
+        if (window.ccmi18n_passwordInput) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_passwordInput[key]) {
+                    this.i18n[key] = window.ccmi18n_passwordInput[key]
+                }
+            }
+        }
+
+        this.passwordStrengthOptions = [
+            {
+                id: -1,
+                value: this.i18n.invalid, // concretecms requirement: min 5 character
+                minDiversity: 0,
+                minLength: 0
+            },
+            {
+                id: 0,
+                value: this.i18n.tooWeak,
+                minDiversity: 1,
+                minLength: 5
+            },
+            {
+                id: 1,
+                value: this.i18n.weak,
+                minDiversity: 2,
+                minLength: 6
+            },
+            {
+                id: 2,
+                value: this.i18n.medium,
+                minDiversity: 4,
+                minLength: 8
+            },
+            {
+                id: 3,
+                value: this.i18n.strong,
+                minDiversity: 4,
+                minLength: 12
+            },
+            {
+                id: 4,
+                value: this.i18n.veryStrong,
+                minDiversity: 4,
+                minLength: 16
+            }
+        ]
     }
 }
 </script>
+
+<style lang="scss" scoped>
+* {
+  --var-active-color: #b8d935;
+}
+
+.password-strength-meter {
+  height: 3px;
+  list-style: none;
+  padding: 0;
+
+  .bar {
+    box-shadow: 0 0 0 0 var(--var-active-color) inset;
+    cursor: help;
+    transition: all ease-in 200ms;
+
+    &.active {
+      box-shadow: 1000px 0 0 0 var(--var-active-color) inset;
+    }
+
+    &:last-child {
+      margin-right: 0 !important;
+    }
+  }
+}
+</style>

package/assets/cms/components/groups/Chooser.vue

@@ -87,7 +87,7 @@ export default {
             if (my.mode === 'select') {
                 options.onClick = function(node) {
                     if (node.data.gID) {
-                        my.triggerSelect(node.data.gID, node.title)
+                        my.triggerSelect(node.data.gID, node.data.gName ?? node.title, node.data.gDisplayName ?? node.title)
                     } else {
                         return false
                     }
@@ -122,12 +122,13 @@ export default {
                 window.location.href = CCM_DISPATCHER_FILENAME + '/dashboard/users/groups/edit/' + group.gID
             }
             if (this.mode === 'select') {
-                this.triggerSelect(group.gID, group.gDisplayName)
+                this.triggerSelect(group.gID, group.gName, group.gDisplayName)
             }
         },
-        triggerSelect(gID, gName) {
-            ConcreteEvent.publish('SelectGroup', { gID: gID, gName: gName })
-            this.$emit('select', { gID: gID, gName: gName })
+        triggerSelect(gID, gName, gDisplayName) {
+            gID = parseInt(gID) || 0
+            ConcreteEvent.publish('SelectGroup', { gID, gName, gDisplayName })
+            this.$emit('select', { gID, gName, gDisplayName })
         },
         performSearch(event) {
             this.searchSubmitted = 'searching'

package/assets/cms/components/index.js

@@ -20,7 +20,19 @@ import ConcreteFileChooser from './file-manager/Chooser'
 import ConcreteExpressEntrySelector from './express/Selector'
 import ConcreteUserChooser from './user/Chooser'
 import ConcreteGroupChooser from './groups/Chooser'
+import ConcreteSelect from './form/ConcreteSelect'
+import ConcreteAjaxSelect from './form/ConcreteAjaxSelect'
+import ConcreteExpressEntrySelect from './form/ConcreteExpressEntrySelect'
+import ConcretePageSelect from './form/ConcretePageSelect'
+import ConcreteUserSelect from './form/ConcreteUserSelect'
+import ConcreteOptionSelect from './form/ConcreteOptionSelect'
+import ConcreteLocaleSelect from './form/ConcreteLocaleSelect'
+import ConcreteToolbarSiteList from './toolbar/ConcreteToolbarSiteList'
+import ConcreteGroupInput from './form/ConcreteGroupInput'
 import ConcreteFileUploader from './file-manager/Uploader/UploadFromComputer'
+import ConcreteAnnouncementBroadcast from './Announcement/Broadcast'
+import ConcreteThumbnailEditor from './Image/ThumbnailEditor'
+import ConcreteHelpModal from './Help/Modal'
 import Board from './Board'
 import BoardSlot from './BoardSlot'
 import BoardInstanceRule from './BoardInstanceRule'
@@ -52,14 +64,26 @@ export default {
     ConcreteFileInput,
     ConcreteThemeColorInput,
     ConcreteExpressEntryInput,
+    ConcreteExpressEntrySelect,
     ConcreteExpressEntrySelector,
     ConcreteFileUploader,
     ConcreteGroupChooser,
+    ConcreteGroupInput,
     ConcretePageChooserSearch,
     ConcretePageInput,
+    ConcreteSelect,
+    ConcreteAjaxSelect,
+    ConcretePageSelect,
+    ConcreteUserSelect,
+    ConcreteOptionSelect,
+    ConcreteLocaleSelect,
+    ConcreteThumbnailEditor,
+    ConcreteToolbarSiteList,
     ConcreteUserInput,
     ConcreteEventOccurrenceInput,
     ConcreteFileDirectoryInput,
+    ConcreteAnnouncementBroadcast,
+    ConcreteHelpModal,
     Board,
     BoardSlot,
     BoardInstanceRule,

package/assets/cms/components/toolbar/ConcreteToolbarSiteList.vue

@@ -0,0 +1,62 @@
+<template>
+    <input />
+</template>
+
+<script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect */
+export default {
+    data() {
+        return {
+
+        }
+    },
+    props: {
+        token: {
+            type: String,
+            required: true
+        },
+        uri: {
+            type: String,
+            required: true
+        },
+        selectedSite: {
+            type: [String, Number],
+            required: false
+        },
+        sites: {
+            type: Array,
+            required: true
+        }
+    },
+    watch: {
+    },
+    computed: {
+        options: function() {
+            const options = []
+            this.sites.forEach((site) => {
+                options.push({ value: site.id, text: site.name })
+            })
+            return options
+        }
+    },
+    mounted() {
+        var config = {}
+        config.maxOptions = null
+        config.options = this.options
+        config.maxItems = 1
+        config.items = [this.selectedSite]
+        this.$nextTick(() => {
+            const select = new TomSelect(this.$el, config)
+            select.on('change', (option) => {
+                const url = CCM_DISPATCHER_FILENAME + '/ccm/site/redirect/' + option +
+                    '?rUri=' + encodeURIComponent(this.uri) +
+                    '&ccm_token=' + this.token
+                window.location.href = url
+            })
+        })
+    },
+    methods: {
+    }
+}
+</script>

package/assets/cms/components/user/Chooser/Search.vue

@@ -24,6 +24,7 @@
             <users v-if="keywords"
                 :selectedUsers.sync="selectedUsers"
                 :multipleSelection="multipleSelection"
+                :hideUsername="hideUsername"
                 :routePath="this.routePath + keywords"/>
         </div>
     </div>
@@ -57,6 +58,10 @@ export default {
         multipleSelection: {
             type: Boolean,
             default: true
+        },
+        hideUsername: {
+            type: Boolean,
+            default: false
         }
     },
     watch: {

package/assets/cms/components/user/Chooser/Users.vue

@@ -6,7 +6,7 @@
                 <thead>
                     <tr>
                         <th></th>
-                        <th @click="sortBy('name')" :class="getSortColumnClassName('name')"><a href="javascript:void(0)">{{ i18n.username }}</a></th>
+                        <th v-if="!hideUsername" @click="sortBy('name')" :class="getSortColumnClassName('name')"><a href="javascript:void(0)">{{ i18n.username }}</a></th>
                         <th @click="sortBy('email')" :class="getSortColumnClassName('email')"><a href="javascript:void(0)">{{ i18n.email }}</a></th>
                         <th @click="sortBy('dateAdded')" :class="getSortColumnClassName('dateAdded')"><a href="javascript:void(0)">{{ i18n.date }}</a></th>
                         <th>{{ i18n.status }}</th>
@@ -19,7 +19,7 @@
                             <input type="checkbox" v-if="multipleSelection" v-model="selectedUsers" :id="'user-' + user.id" :value="user">
                             <input type="radio" v-if="!multipleSelection" v-model="selectedUsers" :id="'user-' + user.id" :value="user">
                         </td>
-                        <td>{{user.name}}</td>
+                        <td v-if="!hideUsername">{{user.name}}</td>
                         <td>{{user.email}}</td>
                         <td>{{user.dateAdded}}</td>
                         <td>{{user.status}}</td>
@@ -58,6 +58,10 @@ export default {
         multipleSelection: {
             type: Boolean,
             default: true
+        },
+        hideUsername: {
+            type: Boolean,
+            default: true
         }
     },
     methods: {

package/assets/cms/components/user/Chooser.vue

@@ -1,6 +1,10 @@
 <template>
     <div>
-        <search :selectedUsers.sync="selectedUsers" :multiple-selection="multipleSelection"/>
+        <search
+            :selectedUsers.sync="selectedUsers"
+            :multiple-selection="multipleSelection"
+            :hide-username="hideUsername"
+        />
         <div class="dialog-buttons">
             <button class="btn btn-secondary" data-dialog-action="cancel">{{ i18n.cancel }}</button>
             <button type="button" @click="chooseUsers" :disabled="selectedUsers.length === 0" class="btn btn-primary">{{ i18n.choose }}</button>
@@ -9,18 +13,20 @@
 </template>
 
 <script>
-import Users from './Chooser/Users'
 import Search from './Chooser/Search'
 
 export default {
     components: {
-        Users,
         Search
     },
     props: {
         multipleSelection: {
             type: Boolean,
             default: true
+        },
+        hideUsername: {
+            type: Boolean,
+            default: false
         }
     },
     data() {

package/assets/cms/js/ajax-request/base.js

@@ -49,10 +49,19 @@
         },
 
         error: function(r, my) {
-            ConcreteEvent.fire('AjaxRequestError', {
-                response: r
-            })
-            ConcreteAlert.dialog(ccmi18n.error, ConcreteAjaxRequest.renderErrorResponse(r, true))
+            if (r.readyState !== 0) {
+                // This happens in Firefox. I don't know why. It happens when an AJAX request is in process and then
+                // the page is navigated away from. I feel like Chrome handles this transparently, or maybe jQuery
+                // handles it better behind the scenes and doesn't send the error object on to the 'error' handler
+                // of the jquery .ajax() method. Regardless, sometimes incomplete AJAX requests in Firefox
+                // trigger the error handler without real data, so they just show "Undefined" as a popup.
+                // (e.g. https://github.com/concretecms/concretecms/issues/11135)
+                // So let's only pop the dialog if the readyState is NOT 0.
+                ConcreteEvent.fire('AjaxRequestError', {
+                    response: r
+                })
+                ConcreteAlert.dialog(ccmi18n.error, ConcreteAjaxRequest.renderErrorResponse(r, true))
+            }
         },
 
         validateResponse: function(r, callback) {

package/assets/cms/js/alert.js

@@ -98,13 +98,14 @@ class ConcreteAlert {
             icon: 'check-circle',
             title: false,
             message: false,
+            plainTextMessage: false,
             delay: 2000,
             callback: () => {}
         }, defaults)
 
         const notifyOptions = {
             text: options.message,
-            textTrusted: true,
+            textTrusted: !options.plainTextMessage,
             icon: 'fas fa-' + options.icon,
             type: options.type,
             delay: options.delay,

package/assets/cms/js/base.js

@@ -7,10 +7,6 @@ import PNotify from './pnotify'
 import 'json5'
 import 'jquery.cookie'
 import 'jquery-form'
-import 'bootstrap-select/js/bootstrap-select'
-import './modifiable-bootstrap-select'
-import 'ajax-bootstrap-select'
-import './modifiable-ajax-bootstrap-select'
 import 'dropzone/dist/dropzone'
 
 // jQuery UI components
@@ -32,8 +28,10 @@ import './concrete'
 import './panels'
 import './toolbar'
 import './legacy-dialog'
+import './modal'
 import './alert'
 import './page-notification'
+import './select-combo-box'
 
 // Edit Mode
 import './edit-mode'
@@ -74,17 +72,11 @@ import './users'
 // Express
 import './express'
 
-// Style customizer
-
-// In-page editable fields
-// TBD
-
 // File Manager
 import './file-manager/uploader'
 import './file-manager/file-manager'
 
 // Miscellaneous UI components
-import 'selectize'
 import 'spectrum-colorpicker2'
 import 'tristate/jquery.tristate'
 import 'jquery-text-counter/textcounter'
@@ -101,6 +93,7 @@ import './calendar'
 // Vue components.
 import components from '@concretecms/bedrock/assets/cms/components/index'
 import VueManager from '@concretecms/bedrock/assets/cms/js/vue/Manager'
+import './jquery-vue'
 
 window.NProgress = NProgress
 window._ = _