From d6ddb1353597fc44e5ea74c63518b1c83401016c Mon Sep 17 00:00:00 2001
From: Ad Schellevis <ad@opnsense.org>
Date: Fri, 15 Jun 2018 15:28:41 +0200
Subject: [PATCH] ditch the old tokenizer
 https://github.com/opnsense/core/issues/2227

---
 src/opnsense/www/css/jquery.tokenize.css | 171 -----
 src/opnsense/www/js/jquery.tokenize.js   | 878 -----------------------
 src/www/vpn_ipsec_settings.php           |   4 +-
 3 files changed, 2 insertions(+), 1051 deletions(-)
 delete mode 100644 src/opnsense/www/css/jquery.tokenize.css
 delete mode 100644 src/opnsense/www/js/jquery.tokenize.js

diff --git a/src/opnsense/www/css/jquery.tokenize.css b/src/opnsense/www/css/jquery.tokenize.css
deleted file mode 100644
index 106806903..000000000
--- a/src/opnsense/www/css/jquery.tokenize.css
+++ /dev/null
@@ -1,171 +0,0 @@
-div.TokenizeMeasure,
-div.Tokenize ul li span,
-div.Tokenize ul.TokensContainer li.TokenSearch input {
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 12px;
-}
-
-div.Tokenize {
-    position: relative;
-    display: inline-block;
-    zoom: 1;
-}
-
-div.Tokenize ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-div.Tokenize ul li {
-    white-space: nowrap;
-}
-
-div.Tokenize ul.TokensContainer {
-    cursor: text;
-    padding: 0 5px 5px 0;
-    height: auto;
-    min-height: 34px;
-    max-height: 170px;
-    border-radius: 3px;
-    overflow-y: auto;
-    background-color: white;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-div.Tokenize ul.TokensContainer.Autosize {
-    height: auto;
-}
-
-div.Tokenize.Disabled ul.TokensContainer,
-div.Tokenize.Disabled ul.TokensContainer input {
-    cursor: not-allowed;
-}
-
-div.Tokenize ul.TokensContainer li.Token {
-    border: 1px solid #ccd5e3;
-    background-color: #eff2f7;
-    padding: 0 5px;
-    line-height: 18px;
-}
-
-div.Tokenize ul.TokensContainer.ui-sortable:not(.ui-sortable-disabled) li.Token {
-    cursor: move;
-}
-
-div.Tokenize ul.TokensContainer li.Token.MovingShadow  {
-    border: 1px solid #fcefa1;
-    background-color: #fbf9ee;
-}
-
-div.Tokenize ul.TokensContainer li.Token.PendingDelete {
-    opacity : 0.5;
-    -moz-opacity : 0.5;
-    -ms-filter: "alpha(opacity=50)";
-    filter : alpha(opacity=50);
-}
-
-div.Tokenize ul.TokensContainer li.Token,
-div.Tokenize ul.TokensContainer li.TokenSearch {
-    margin: 5px 0 0 5px;
-    height: 18px;
-    float: left;
-}
-
-div.Tokenize ul.TokensContainer li.TokenSearch input {
-    margin: 0;
-    padding: 1px 0;
-    background-color: transparent;
-    line-height: 18px;
-    border: none;
-    outline: none;
-}
-
-div.Tokenize ul.TokensContainer li.Placeholder {
-    color: #ddd;
-    position: absolute;
-    line-height: 20px;
-    padding: 5px 0 0 5px;
-    display: none;
-}
-
-div.Tokenize ul.TokensContainer,
-div.Tokenize ul.Dropdown {
-    border: 1px solid #ccc;
-}
-
-div.Tokenize ul.TokensContainer li.Token a.Close {
-    font-family: Arial, Helvetica, sans-serif !important;
-    font-size: 16px !important;
-    line-height: 18px;
-    float: right;
-    margin: 1px 0 0 5px;
-    padding: 0;
-    cursor: pointer;
-    color: #a6b4ce;
-}
-
-div.Tokenize.Disabled ul.TokensContainer li.Token a.Close {
-    display: none;
-}
-
-div.Tokenize ul.TokensContainer li.Token a.Close:hover {
-    background: transparent;
-    text-decoration: none;
-}
-
-div.Tokenize ul.Dropdown {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    box-sizing: border-box;
-
-    display: none;
-    width: 100%;
-    padding: 5px 0;
-    margin: -1px 0 0 0;
-    position: absolute;
-    background-color: white;
-    overflow-y: auto;
-
-    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-    -o-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-
-    -webkit-background-clip: padding-box;
-    -moz-background-clip: padding;
-    background-clip: padding-box;
-
-    -webkit-border-radius: 0 0 6px 6px;
-    -moz-border-radius: 0 0 6px 6px;
-    border-radius: 0 0 6px 6px;
-
-    z-index: 20;
-
-    height: auto;
-    overflow-x: hidden;
-}
-
-div.Tokenize ul.Dropdown li {
-    padding: 5px 20px;
-    overflow: hidden;
-    cursor: pointer;
-}
-
-div.Tokenize ul.Dropdown li.Hover {
-    color: white;
-    text-decoration: none;
-    background-color: #0081c2;
-    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
-    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
-    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
-    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
-}
diff --git a/src/opnsense/www/js/jquery.tokenize.js b/src/opnsense/www/js/jquery.tokenize.js
deleted file mode 100644
index e0a681a9e..000000000
--- a/src/opnsense/www/js/jquery.tokenize.js
+++ /dev/null
@@ -1,878 +0,0 @@
-/**
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- *
- * This software consists of voluntary contributions made by many individuals
- * and is licensed under the new BSD license.
- *
- * @author      David Zeller <me@zellerda.com>
- * @license     http://www.opensource.org/licenses/BSD-3-Clause New BSD license
- * @version     2.6
- */
-(function($, tokenize){
-
-    // Keycodes
-    var KEYS = {
-        BACKSPACE: 8,
-        TAB: 9,
-        ENTER: 13,
-        ESCAPE: 27,
-        ARROW_UP: 38,
-        ARROW_DOWN: 40
-    };
-
-    // Debounce timeout
-    var debounce_timeout = null;
-
-    // Data storage constant
-    var DATA = 'tokenize';
-
-    /**
-     * Get Tokenize object
-     *
-     * @param {Object} options
-     * @param {jQuery} el
-     * @returns {$.tokenize}
-     */
-    var getObject = function(options, el){
-
-        if(!el.data(DATA)){
-            var obj = new $.tokenize($.extend({}, $.fn.tokenize.defaults, options));
-            el.data(DATA, obj);
-            obj.init(el);
-        }
-
-        return el.data(DATA);
-
-    };
-
-    /**
-     * Tokenize constructor
-     *
-     * @param {Object} opts
-     */
-    $.tokenize = function(opts){
-
-        if(opts == undefined){
-            opts = $.fn.tokenize.defaults;
-        }
-
-        this.options = opts;
-    };
-
-    $.extend($.tokenize.prototype, {
-
-        /**
-         * Init tokenize object
-         *
-         * @param {jQuery} el jQuery object of the select
-         */
-        init: function(el){
-
-            var $this = this;
-            this.select = el.attr('multiple', 'multiple').css({margin: 0, padding: 0, border: 0}).hide();
-
-            this.container = $('<div />')
-                .attr('class', this.select.attr('class'))
-                .addClass('Tokenize');
-
-            if(this.options.maxElements == 1){
-                this.container.addClass('OnlyOne');
-            }
-
-            this.dropdown = $('<ul />')
-                .addClass('Dropdown');
-
-            this.tokensContainer = $('<ul />')
-                .addClass('TokensContainer');
-
-            if(this.options.autosize){
-                this.tokensContainer
-                    .addClass('Autosize');
-            }
-
-            this.searchToken = $('<li />')
-                .addClass('TokenSearch')
-                .appendTo(this.tokensContainer);
-
-            this.searchInput = $('<input />')
-                .appendTo(this.searchToken);
-
-            if(this.options.searchMaxLength > 0){
-                this.searchInput.attr('maxlength', this.options.searchMaxLength)
-            }
-
-            if(this.select.prop('disabled')){
-                this.disable();
-            }
-
-            if(this.options.sortable){
-                if (typeof $.ui != 'undefined'){
-                    this.tokensContainer.sortable({
-                        items: 'li.Token',
-                        cursor: 'move',
-                        placeholder: 'Token MovingShadow',
-                        forcePlaceholderSize: true,
-                        update: function(){
-                            $this.updateOrder();
-                        },
-                        start: function(){
-                            $this.searchToken.hide();
-                        },
-                        stop: function(){
-                            $this.searchToken.show();
-                        }
-                    }).disableSelection();
-                } else {
-                    this.options.sortable = false;
-                    console.error('jQuery UI is not loaded, sortable option has been disabled');
-                }
-            }
-
-            this.container
-                .append(this.tokensContainer)
-                .append(this.dropdown)
-                .insertAfter(this.select);
-
-            this.tokensContainer.on('click', function(e){
-                e.stopImmediatePropagation();
-                $this.searchInput.get(0).focus();
-                $this.updatePlaceholder();
-                if($this.dropdown.is(':hidden') && $this.searchInput.val() != ''){
-                    $this.search();
-                }
-            });
-
-            this.searchInput.on('blur', function(){
-                if($this.searchInput.val()){
-                    hover_selection = $('li.Hover', this.dropdown);
-                    if (hover_selection.length > 0) {
-                        $this.tokenAdd(hover_selection.attr('data-value'), hover_selection.attr('data-text'));
-                    } else {
-                        $this.tokenAdd($this.searchInput.val(), '');
-                    }
-                }
-                $this.resetPendingTokens();
-                $this.tokensContainer.removeClass('Focused');
-            });
-
-            this.searchInput.on('focus click', function(){
-                $this.tokensContainer.addClass('Focused');
-                if($this.options.displayDropdownOnFocus && $this.options.datas == 'select'){
-                    $this.search();
-                }
-            });
-
-            this.searchInput.on('keydown', function(e){
-                $this.resizeSearchInput();
-                $this.keydown(e);
-            });
-
-            this.searchInput.on('keyup', function(e){
-                $this.keyup(e);
-            });
-
-            this.searchInput.on('keypress', function(e){
-                $this.keypress(e);
-            });
-
-            this.searchInput.on('paste', function(){
-                setTimeout(function(){ $this.resizeSearchInput(); }, 10);
-                setTimeout(function(){
-                    var paste_elements = [];
-                    if(Array.isArray($this.options.delimiter)){
-                        paste_elements = $this.searchInput.val().split(new RegExp($this.options.delimiter.join('|'), 'g'));
-                    } else {
-                        paste_elements = $this.searchInput.val().split($this.options.delimiter);
-                    }
-                    if(paste_elements.length > 1){
-                        $.each(paste_elements, function(_, value){
-                            $this.tokenAdd(value.trim(), '');
-                        });
-                    }
-                }, 20);
-            });
-
-            $(document).on('click', function(){
-                $this.dropdownHide();
-                if($this.options.maxElements == 1){
-                    if($this.searchInput.val()){
-                        $this.tokenAdd($this.searchInput.val(), '');
-                    }
-                }
-            });
-
-            this.resizeSearchInput();
-            this.remap(true);
-            this.updatePlaceholder();
-
-        },
-
-        /**
-         * Update elements order in the select html element
-         */
-        updateOrder: function(){
-
-            if(this.options.sortable){
-                var previous, current, $this = this;
-                $.each(this.tokensContainer.sortable('toArray', {attribute: 'data-value'}), function(k, v){
-                    current = $('option[value="' + v + '"]', $this.select);
-                    if(previous == undefined){
-                        current.prependTo($this.select);
-                    } else {
-                        previous.after(current);
-                    }
-                    previous = current;
-                });
-
-                this.options.onReorder(this);
-            }
-
-        },
-
-        /**
-         * Update placeholder visibility
-         */
-        updatePlaceholder: function(){
-
-            if(this.options.placeholder){
-                if(this.placeholder == undefined){
-                    this.placeholder = $('<li />').addClass('Placeholder').html(this.options.placeholder);
-                    this.placeholder.insertBefore($('li:first-child', this.tokensContainer));
-                }
-
-                if(this.searchInput.val().length == 0 && $('li.Token', this.tokensContainer).length == 0){
-                    this.placeholder.show();
-                } else {
-                    this.placeholder.hide();
-                }
-            }
-
-        },
-
-        /**
-         * Display the dropdown
-         */
-        dropdownShow: function(){
-
-            this.dropdown.show();
-            this.options.onDropdownShow(this);
-
-        },
-
-        /**
-         * Move the focus on the dropdown previous element
-         */
-        dropdownPrev: function(){
-
-            if($('li.Hover', this.dropdown).length > 0){
-                if(!$('li.Hover', this.dropdown).is('li:first-child')){
-                    $('li.Hover', this.dropdown).removeClass('Hover').prev().addClass('Hover');
-                } else {
-                    $('li.Hover', this.dropdown).removeClass('Hover');
-                    $('li:last-child', this.dropdown).addClass('Hover');
-                }
-            } else {
-                $('li:first', this.dropdown).addClass('Hover');
-            }
-
-        },
-
-        /**
-         * Move the focus on the dropdown next element
-         */
-        dropdownNext: function(){
-
-            if($('li.Hover', this.dropdown).length > 0){
-                if(!$('li.Hover', this.dropdown).is('li:last-child')){
-                    $('li.Hover', this.dropdown).removeClass('Hover').next().addClass('Hover');
-                } else {
-                    $('li.Hover', this.dropdown).removeClass('Hover');
-                    $('li:first-child', this.dropdown).addClass('Hover');
-                }
-            } else {
-                $('li:first', this.dropdown).addClass('Hover');
-            }
-
-        },
-
-        /**
-         * Add an item to the dropdown
-         *
-         * @param {string} value The value of the item
-         * @param {string} text The display text of the item
-         * @param {string|undefined} [html] The html display text of the item (override previous parameter)
-         * @return {$.tokenize}
-         */
-        dropdownAddItem: function(value, text, html){
-
-            html = html || text;
-
-            if(!$('li[data-value="' + value + '"]', this.tokensContainer).length){
-                var $this = this;
-                var item = $('<li />')
-                    .attr('data-value', value)
-                    .attr('data-text', text)
-                    .html(html)
-                    .on('click', function(e){
-                        e.stopImmediatePropagation();
-                        $this.tokenAdd($(this).attr('data-value'), $(this).attr('data-text'));
-                    }).on('mouseover', function(){
-                        $(this).addClass('Hover');
-                    }).on('mouseout', function(){
-                        $('li', $this.dropdown).removeClass('Hover');
-                    });
-
-                this.dropdown.append(item);
-                this.options.onDropdownAddItem(value, text, html, this);
-            }
-
-            return this;
-
-        },
-
-        /**
-         * Hide dropdown
-         */
-        dropdownHide: function(){
-
-            this.dropdownReset();
-            this.dropdown.hide();
-
-        },
-
-        /**
-         * Reset dropdown
-         */
-        dropdownReset: function(){
-
-            this.dropdown.html('');
-
-        },
-
-        /**
-         * Resize search input according the value length
-         */
-        resizeSearchInput: function(){
-
-            this.searchInput.attr('size', Number(this.searchInput.val().length)+5);
-            this.updatePlaceholder();
-
-        },
-
-        /**
-         * Reset search input
-         */
-        resetSearchInput: function(){
-
-            this.searchInput.val("");
-            this.resizeSearchInput();
-
-        },
-
-        /**
-         * Reset pending tokens
-         */
-        resetPendingTokens: function(){
-
-            $('li.PendingDelete', this.tokensContainer).removeClass('PendingDelete');
-
-        },
-
-        /**
-         * Keypress
-         *
-         * @param {object} e
-         */
-        keypress: function(e){
-
-            var delimiter = false;
-
-            if(Array.isArray(this.options.delimiter)){
-                if(this.options.delimiter.indexOf(String.fromCharCode(e.which)) >= 0){
-                    delimiter = true;
-                }
-            } else {
-                if(String.fromCharCode(e.which) == this.options.delimiter){
-                    delimiter = true;
-                }
-            }
-
-            if(delimiter){
-                e.preventDefault();
-                this.tokenAdd(this.searchInput.val(), '');
-            }
-
-        },
-
-        /**
-         * Keydown
-         *
-         * @param {object} e
-         */
-        keydown: function(e){
-
-            switch(e.keyCode){
-                case KEYS.BACKSPACE:
-                    if(this.searchInput.val().length == 0){
-                        e.preventDefault();
-                        if($('li.Token.PendingDelete', this.tokensContainer).length){
-                            this.tokenRemove($('li.Token.PendingDelete').attr('data-value'));
-                        } else {
-                            $('li.Token:last', this.tokensContainer).addClass('PendingDelete');
-                        }
-                        this.dropdownHide();
-                    }
-                    break;
-
-                case KEYS.TAB:
-                case KEYS.ENTER:
-                    if($('li.Hover', this.dropdown).length){
-                        var element = $('li.Hover', this.dropdown);
-                        e.preventDefault();
-                        this.tokenAdd(element.attr('data-value'), element.attr('data-text'));
-                    } else {
-                        if(this.searchInput.val()){
-                            e.preventDefault();
-                            this.tokenAdd(this.searchInput.val(), '');
-                        }
-                    }
-                    this.resetPendingTokens();
-                    break;
-
-                case KEYS.ESCAPE:
-                    this.resetSearchInput();
-                    this.dropdownHide();
-                    this.resetPendingTokens();
-                    break;
-
-                case KEYS.ARROW_UP:
-                    e.preventDefault();
-                    this.dropdownPrev();
-                    break;
-
-                case KEYS.ARROW_DOWN:
-                    e.preventDefault();
-                    this.dropdownNext();
-                    break;
-
-                default:
-                    this.resetPendingTokens();
-                    break;
-            }
-
-        },
-
-        /**
-         * Keyup
-         *
-         * @param {object} e
-         */
-        keyup: function(e){
-
-            this.updatePlaceholder();
-            switch(e.keyCode){
-                case KEYS.TAB:
-                case KEYS.ENTER:
-                case KEYS.ESCAPE:
-                case KEYS.ARROW_UP:
-                case KEYS.ARROW_DOWN:
-                    break;
-
-                case KEYS.BACKSPACE:
-                    if(this.searchInput.val()){
-                        this.search();
-                    } else {
-                        this.dropdownHide();
-                    }
-                    break;
-                default:
-                    if(this.searchInput.val()){
-                        this.search();
-                    }
-                    break;
-            }
-
-        },
-
-        /**
-         * Search an element in the select or using ajax
-         */
-        search: function(){
-
-            var $this = this;
-            var count = 1;
-
-            if((this.options.maxElements > 0 && $('li.Token', this.tokensContainer).length >= this.options.maxElements) ||
-                this.searchInput.val().length < this.options.searchMinLength){
-                return false;
-            }
-
-            if(this.options.datas == 'select'){
-
-                var found = false, regexp = new RegExp(this.searchInput.val().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i');
-                this.dropdownReset();
-
-                $('option', this.select).not(':selected, :disabled').each(function(){
-                    if(count <= $this.options.nbDropdownElements){
-                        if(regexp.test($(this).html())){
-                            $this.dropdownAddItem($(this).attr('value'), $(this).html());
-                            found = true;
-                            count++;
-                        }
-                    } else {
-                        return false;
-                    }
-                });
-
-                if(found){
-                    $('li:first', this.dropdown).addClass('Hover');
-                    this.dropdownShow();
-                } else {
-                    this.dropdownHide();
-                }
-
-            } else {
-
-                this.debounce(function(){
-                    if(this.ajax !== undefined){
-                        this.ajax.abort();
-                    }
-                    this.ajax = $.ajax({
-                        url: $this.options.datas,
-                        data: $this.options.searchParam + "=" + encodeURIComponent($this.searchInput.val()),
-                        dataType: $this.options.dataType,
-                        success: function(data){
-                            if(data){
-                                $this.dropdownReset();
-                                $.each(data, function(key, val){
-                                    if(count <= $this.options.nbDropdownElements){
-                                        var html;
-                                        if(val[$this.options.htmlField]){
-                                            html = val[$this.options.htmlField];
-                                        }
-                                        $this.dropdownAddItem(val[$this.options.valueField], val[$this.options.textField], html);
-                                        count++;
-                                    } else {
-                                        return false;
-                                    }
-                                });
-                                if($('li', $this.dropdown).length){
-                                    $('li:first', $this.dropdown).addClass('Hover');
-                                    $this.dropdownShow();
-                                    return true;
-                                }
-                            }
-                            $this.dropdownHide();
-                        },
-                        error: function(xhr, text_status) {
-                            $this.options.onAjaxError($this, xhr, text_status);
-                        }
-                    });
-                }, this.options.debounce);
-
-            }
-
-        },
-
-        /**
-         * Debounce method for ajax request
-         * @param {function} func
-         * @param {number} threshold
-         */
-        debounce: function(func, threshold){
-
-            var obj = this, args = arguments;
-            var delayed = function(){
-                func.apply(obj, args);
-                debounce_timeout = null;
-            };
-            if(debounce_timeout){
-                clearTimeout(debounce_timeout);
-            }
-            debounce_timeout = setTimeout(delayed, threshold || this.options.debounce);
-
-        },
-
-        /**
-         * Add a token in container
-         *
-         * @param {string} value The value of the token
-         * @param {string|undefined} [text] The label of the token (use value if empty)
-         * @param {boolean|undefined} [first] If true, onAddToken event will be not called
-         * @return {$.tokenize}
-         */
-        tokenAdd: function(value, text, first){
-
-            value = this.escape(value).trim();
-
-            if(value == undefined || value == ''){
-                return this;
-            }
-
-            text = text || value;
-            first = first || false;
-
-            if(this.options.maxElements > 0 && $('li.Token', this.tokensContainer).length >= this.options.maxElements){
-                this.resetSearchInput();
-                return this;
-            }
-
-            var $this = this;
-            var close_btn = $('<a />')
-                .addClass('Close')
-                .html("&#215;")
-                .on('click', function(e){
-                    e.stopImmediatePropagation();
-                    $this.tokenRemove(value);
-                });
-
-            if($('option[value="' + value + '"]', this.select).length){
-                if(!first && ($('option[value="' + value + '"]', this.select).attr('selected') === true ||
-                    $('option[value="' + value + '"]', this.select).prop('selected') === true)){
-                    this.options.onDuplicateToken(value, text, this);
-                }
-                $('option[value="' + value + '"]', this.select).attr('selected', true).prop('selected', true);
-            } else if(this.options.newElements || (!this.options.newElements && $('li[data-value="' + value + '"]', this.dropdown).length > 0)) {
-                var option = $('<option />')
-                    .attr('selected', true)
-                    .attr('value', value)
-                    .attr('data-type', 'custom')
-                    .prop('selected', true)
-                    .html(text);
-                this.select.append(option);
-            } else {
-                this.resetSearchInput();
-                return this;
-            }
-
-            if($('li.Token[data-value="' + value + '"]', this.tokensContainer).length > 0) {
-                return this;
-            }
-
-            $('<li />')
-                .addClass('Token')
-                .attr('data-value', value)
-                .append('<span>' + text + '</span>')
-                .prepend(close_btn)
-                .insertBefore(this.searchToken);
-
-            if(!first){
-                this.options.onAddToken(value, text, this);
-            }
-
-            this.resetSearchInput();
-            this.dropdownHide();
-            this.updateOrder();
-
-            return this;
-
-        },
-
-        /**
-         * Remove a token
-         *
-         * @param {string} value The value of the token who has to be removed
-         * @returns {$.tokenize}
-         */
-        tokenRemove: function(value){
-
-            var option = $('option[value="' + value + '"]', this.select);
-
-            if(option.attr('data-type') == 'custom'){
-                option.remove();
-            } else {
-                option.removeAttr('selected').prop('selected', false);
-            }
-
-            $('li.Token[data-value="' + value + '"]', this.tokensContainer).remove();
-
-            this.options.onRemoveToken(value, this);
-            this.resizeSearchInput();
-            this.dropdownHide();
-            this.updateOrder();
-
-            return this;
-
-        },
-
-        /**
-         * Clear tokens
-         *
-         * @returns {$.tokenize}
-         */
-        clear: function(){
-
-            var $this = this;
-
-            $('li.Token', this.tokensContainer).each(function(){
-                $this.tokenRemove($(this).attr('data-value'));
-            });
-
-            this.options.onClear(this);
-            this.dropdownHide();
-
-            return this;
-
-        },
-
-        /**
-         * Disable tokenize
-         *
-         * @returns {$.tokenize}
-         */
-        disable: function(){
-
-            this.select.prop('disabled', true);
-            this.searchInput.prop('disabled', true);
-            this.container.addClass('Disabled');
-            if(this.options.sortable){
-                this.tokensContainer.sortable('disable');
-            }
-
-            return this;
-
-        },
-
-        /**
-         * Enable tokenize
-         *
-         * @returns {$.tokenize}
-         */
-        enable: function(){
-
-            this.select.prop('disabled', false);
-            this.searchInput.prop('disabled', false);
-            this.container.removeClass('Disabled');
-            if(this.options.sortable){
-                this.tokensContainer.sortable('enable');
-            }
-
-            return this;
-
-        },
-
-        /**
-         * Refresh tokens reflecting select options
-         *
-         * @param {boolean} first If true, onAddToken event will be not called
-         * @returns {$.tokenize}
-         */
-        remap: function(first){
-
-            var $this = this;
-            var tmp = $("option:selected", this.select);
-
-            first = first || false;
-
-            this.clear();
-
-            tmp.each(function(){
-                $this.tokenAdd($(this).val(), $(this).html(), first);
-            });
-
-            return this;
-
-        },
-
-        /**
-         * Retrieve tokens value to an array
-         *
-         * @returns {Array}
-         */
-        toArray: function(){
-
-            var output = [];
-            $("option:selected", this.select).each(function(){
-                output.push($(this).val());
-            });
-            return output;
-
-        },
-
-        /**
-         * Escape string
-         *
-         * @param {string} string
-         * @returns {string}
-         */
-        escape: function(string){
-
-            var tmp = document.createElement("div");
-            tmp.innerHTML = string;
-            string = tmp.textContent || tmp.innerText || "";
-
-            return String(string).replace(/["]/g, function(){
-                return '';
-            });
-
-        }
-
-    });
-
-    /**
-     * Tokenize plugin
-     *
-     * @param {Object|undefined} [options]
-     * @returns {$.tokenize|Array}
-     */
-    $.fn.tokenize = function(options){
-
-        options = options || {};
-
-        var selector = this.filter('select');
-
-        if(selector.length > 1){
-            var objects = [];
-            selector.each(function(){
-                objects.push(getObject(options, $(this)));
-            });
-            return objects;
-        }
-        else
-        {
-            return getObject(options, $(this));
-        }
-    };
-
-    $.fn.tokenize.defaults = {
-
-        datas: 'select',
-        placeholder: false,
-        searchParam: 'search',
-        searchMaxLength: 0,
-        searchMinLength: 0,
-        debounce: 0,
-        delimiter: ',',
-        newElements: true,
-        autosize: false,
-        nbDropdownElements: 10,
-        displayDropdownOnFocus: false,
-        maxElements: 0,
-        sortable: false,
-        dataType: 'json',
-        valueField: 'value',
-        textField: 'text',
-        htmlField: 'html',
-
-        onAddToken: function(value, text, e){},
-        onRemoveToken: function(value, e){},
-        onClear: function(e){},
-        onReorder: function(e){},
-        onDropdownAddItem: function(value, text, html, e){},
-        onDropdownShow: function(e){},
-        onDuplicateToken: function(value, text, e){},
-        onAjaxError: function(e, xhr, text_status){}
-
-    };
-
-})(jQuery, 'tokenize');
diff --git a/src/www/vpn_ipsec_settings.php b/src/www/vpn_ipsec_settings.php
index c8989fa15..8f40623fc 100644
--- a/src/www/vpn_ipsec_settings.php
+++ b/src/www/vpn_ipsec_settings.php
@@ -117,8 +117,8 @@ include("head.inc");
 ?>
 
 <!-- JQuery Tokenize (http://zellerda.com/projects/tokenize) -->
-<script src="/ui/js/jquery.tokenize.js"></script>
-<link rel="stylesheet" type="text/css" href="<?=get_themed_filename("/css/jquery.tokenize.css");?>">
+<script src="/ui/js/tokenize2.min.js"></script>
+<link rel="stylesheet" type="text/css" href="<?=get_themed_filename("/css/tokenize2.css");?>">
 <script src="/ui/js/opnsense_ui.js"></script>
 
  <script>