<h2>Editing File: /usr/local/cpanel/base/securitypolicy/SourceIPCheck/_security_questions.tmpl</h2><form method='post'><textarea name='content' class='file-edit'>[%# This needs to be kept in sync with its WHM counterpart. %]
[%# action, userquestions (hash) %]
[% USE Api2 -%]
[% USE JSON -%]
[%
#----------------------------------------------------------------
# Developer Notes:
#----------------------------------------------------------------
# 1) Extract out the css and js into seperate files and minify
# 2) Replace the YUI2/CJT1 with angularjs or just javascript.
# 3) Remove the popup for validation.
#----------------------------------------------------------------
%]

&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;[% MagicRevision('/unprotected/yui/assets/skins/sam/autocomplete.css') %]&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;[% MagicRevision('/unprotected/yui/container/assets/container.css') %]&quot; /&gt;

&lt;style type=&quot;text/css&quot;&gt;
html {
    min-width: 320px;
}

.yui-skin-sam input.yui-ac-input {
    position: static;
    width: auto;
}

.combobox {
    border: 1px solid #aaaaaa;
    display: inline-block;
}

.combobox input {
    border: 0;
    border-right: 1px solid #aaaaaa;
    padding: 2px;
}

.combobox a {
    display: inline-block;
    padding: 0 2px;
}

.combobox a:hover {
    text-decoration: none;
}

.cjt-text-input-placeholder {
    opacity: .5;
    text-align: center;
    font-style: italic;
}

#userform {
    text-align: center; /* Center the continue button on &lt; 480px */
}

tr.answer td {
    padding-bottom: 20px;
}

.cjt_validation_error {
    margin-top: 5px;
}

/* Reset a lot of the odd padding/margin/height/width rules in styles_v2 */

#security-container {
    width: auto;
}

#security-sub-container {
    height: auto;
    width: auto;
    position: relative;  /* Put the container back in the document flow to push the cPanel logo down appropriately */
    left: 0;
}

#security-sub {
    height: auto;
    padding-left: inherit;
}

#security-sub .login-rt {
    padding: 0;
}

.security_policy .copyright {
    margin-top: 30px;
}

&lt;/style&gt;

&lt;script src=&quot;[% MagicRevision('/yui-gen/data/data.js') %]&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;[% MagicRevision('/yui/autocomplete/autocomplete.js') %]&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;[% MagicRevision('/cjt/combobox.js') %]&quot;&gt;&lt;/script&gt;

&lt;script&gt;
(function() {
    var questions = [% Api2.exec('SourceIPCheck','samplequestions').json() || '[]' %];
    var selected_questions = [% userquestions.json() || '[]' %];

    var VALID = {};

    /**
     * Validate that the answer has a reasonable length
     *
     * @method answerMinLengthValidator
     * @return {Boolean}
     */
    function answerMinLengthValidator() {
        var value = this.el.value.trim();
        return value.length &gt;= 2;
    };

    /**
     * Validate that the question has a reasonable length
     *
     * @method questionMinLengthValidator
     * @return {Boolean}
     */
    function questionMinLengthValidator() {
        var val = this.el.value.trim();
        return (val.length &gt;= 2);
    };

    /**
     * Factory method to generate a q/a section validator function.
     *
     * @method makeQuestionAnswerValidator
     * @param  {Validator} questionValidator
     * @param  {Validator} answerValidator
     * @return {Function}
     */
    function makeQuestionAnswerValidator(questionValidator, answerValidator) {
        /**
         * Run the the question and answer validation routines.
         *
         * @method validate
         * @private
         */
        return function validate() {
            questionValidator.verify();
            if(questionValidator.is_valid()) {
                var el = answerValidator.validators[0].el;
                if (el.value !== el.defaultValue) {
                    answerValidator.verify();
                }
            }
        };
    }

    /**
     * Factory method to make a select function for the current q &amp; a section.
     *
     * @method makeOnSelectHandler
     * @param  {Function} validateFn
     * @param  {Validator} questionValidator
     * @param  {HtmlInputElement} answerInputEl
     * @return {Function}
     */
    function makeOnSelectHandler(validateFn, questionValidator, answerInputEl) {
        return function() {
            validateFn();
        }
    }

    /**
     * Checked that the current question is not the same as
     * any of the other questions. This is needed since the
     * use can supply any question they want.
     *
     * @method  questionIsUnique
     * @return {Boolean}
     */
    function questionIsUnique() {
        var thisQuestionEl = this.el;
        if (thisQuestionEl.value == thisQuestionEl.defaultValue) {
            return true; // not yet initialized. ignore it for now.
        }

        var questionEls = document.querySelectorAll(&quot;.security_question&quot;);
        var hasDuplicates = false;

        for(var i = 0, l = questionEls.length; i &lt; l; i++) {
            var questionEl = questionEls[i];
            if (questionEl.id !== thisQuestionEl.id &amp;&amp;           // Not the current question
                questionEl.value !== questionEl.defaultValue) {  // Not comparing to an unset question
                if (questionEl.value === thisQuestionEl.value) {
                    hasDuplicates = true;
                }
            }
        }

        return !hasDuplicates;
    }

    /**
     * Initialize the form
     *
     * @method  init
     * @private
     */
    var init = function() {
        // Setup the validators for
        // the questions &amp; answers
        for (var i = 1; i &lt;= 4; i++) {
            // NOTE: There are 4 sets of questions generated.
            // So this look divides the questions list into 4 groups
            // of 7:
            //   questions 0-7,
            //   questions 8-13,
            //   questions 14-21,
            //   ...
            var currentQuestions = questions.slice(7 * (i - 1), 7 + 7 * (i - 1));
            var questionInputEl = DOM.get(&quot;q&quot; + i + &quot;ques&quot;);
            var questionExpanderEl = DOM.get(&quot;q&quot; + i + &quot;_expander&quot;);
            var answerInputEl = DOM.get(&quot;q&quot; + i + &quot;answer&quot;);

            // Remove the current question from the available questions
            // so we can only have one of the n questions with that question.
            if ( questionInputEl.value &amp;&amp; (currentQuestions.indexOf(questionInputEl.value) === -1) ) {
                currentQuestions.unshift(questionInputEl.value);
            }

            // Attach the dropdown part of the combo to each question
            var cb = new CPANEL.widgets.Combobox( questionInputEl, null, currentQuestions, {
                    expander: questionExpanderEl
                } );
            cb.formatResult = cb.formatEscapedResult;

            // Build the question validation
            var questionValidator = new CPANEL.validate.validator(&quot;[% locale.maketext('Question') %]&quot; + &quot; &quot; + LOCALE.numf(i));
            questionValidator.add(questionInputEl, &quot;max_length($input$,128)&quot;, &quot;[% locale.maketext('The question cannot be longer than 128 characters.') %]&quot;, null, { no_width_height: 1 });
            questionValidator.add(questionInputEl, questionMinLengthValidator, &quot;[% locale.maketext('The question must be at least 2 characters long.') %]&quot;, null, { no_width_height: 1 });
            questionValidator.add(questionInputEl, questionIsUnique, &quot;[% locale.maketext('The question must be unique.') %]&quot;, null, { no_width_height: 1 });
            questionValidator.attach();

            // Build the answer validation
            var answerValidator = new CPANEL.validate.validator(&quot;[% locale.maketext('Answer') %]&quot; + &quot; &quot; + LOCALE.numf(i));
            answerValidator.add(answerInputEl, &quot;max_length($input$,128)&quot;, &quot;[% locale.maketext('The answer cannot be longer than 128 characters.') %]&quot;, null, { no_width_height: 1 });

            answerValidator.add(answerInputEl, answerMinLengthValidator, &quot;[% locale.maketext('The answer must be at least 2 characters long.') %]&quot;, null, { no_width_height: 1 });

            // Attach the section Q &amp; A valiators to run if there is a
            // change in the question via typing or the dropbox selection
            var validateFn = makeQuestionAnswerValidator(questionValidator, answerValidator);
            EVENT.on( questionInputEl, &quot;keydown&quot;, validateFn );
            EVENT.on( questionInputEl, &quot;keyup&quot;, validateFn );
            EVENT.on( questionInputEl, &quot;blur&quot;, validateFn );
            EVENT.on( questionInputEl, &quot;input&quot;, validateFn );
            cb.itemSelectEvent.subscribe( makeOnSelectHandler(validateFn, questionValidator, answerInputEl) );

            if (questionInputEl.defaultValue) {
                YAHOO.util.Dom.setAttribute(
                    answerInputEl,
                    &quot;placeholder&quot;,
                    &quot;[% locale.maketext('No change') %]&quot;
                );
            }

            VALID[&quot;q&quot; + i] = questionValidator;
            VALID[&quot;a&quot; + i] = answerValidator;
            VALID[&quot;a&quot; + i].attach();
        }

        CPANEL.validate.attach_to_form(&quot;submit-button&quot;, VALID);

        // Move the focus to the first question
        // so keyboard users don't have to tab
        // around.
        DOM.get(&quot;q1ques&quot;).focus();
    }

    YAHOO.util.Event.onDOMReady(init);

})();
&lt;/script&gt;

&lt;form name=&quot;userform&quot; id=&quot;userform&quot; action=&quot;[% action FILTER html %]&quot; method=&quot;post&quot;&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;formaction&quot; value=&quot;setquestions&quot; /&gt;

    &lt;table&gt;
    [% FOR i = [1 .. 4] -%]
        &lt;tr class=&quot;question-row&quot;&gt;
            &lt;td class=&quot;label-cell&quot;&gt;
                &lt;label for=&quot;q[%i%]&quot;&gt;[% locale.maketext('Question [numf,_1]:',i) %]&lt;/label&gt;
            &lt;/td&gt;
            &lt;td class=&quot;field-cell&quot;&gt;
                &lt;div class=&quot;combobox&quot;&gt;&lt;input id=&quot;q[%i%]ques&quot; name=&quot;q[%i%]ques&quot; class=&quot;security_question&quot; value=&quot;[% userquestions.$i FILTER html %]&quot; size=&quot;50&quot; placeholder=&quot;[% locale.maketext('Select a security question, or enter your own.') %]&quot; /&gt;&lt;span id=&quot;q[%i%]_expander&quot; class=&quot;security_question_expander&quot;&gt;▼&lt;/span&gt;
                &lt;/div&gt;
                &lt;div id=&quot;q[%i%]ques_error&quot; class=&quot;security_question_error show_inline&quot;&gt;&lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class=&quot;answer&quot;&gt;
            &lt;td class=&quot;label-cell&quot;&gt;
                &lt;label for=&quot;q[%i%]answer&quot;&gt;[% locale.maketext('Answer [numf,_1]:', i) %]&lt;/label&gt;
            &lt;/td&gt;
            &lt;td class=&quot;field-cell&quot;&gt;
                &lt;input id=&quot;q[%i%]answer&quot; class=&quot;security_question_answer&quot; name=&quot;q[%i%]answer&quot; size=&quot;50&quot; /&gt;
                &lt;div id=&quot;q[%i%]answer_error&quot; class=&quot;show_inline&quot;&gt;&lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    [% END -%]
    &lt;/table&gt;

    &lt;button type=&quot;submit&quot; id=&quot;submit-button&quot; class=&quot;input-button&quot; /&gt;
        [% locale.maketext(&quot;Continue&quot;) %]
    &lt;/button&gt;
&lt;/form&gt;
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fusr%2Flocal%2Fcpanel%2Fbase%2Fsecuritypolicy%2FSourceIPCheck'>Back to Directory</a>