[% USE CPList -%]
[% USE JSON -%]
[%- SET bgimg = MagicRevision('/yui/slider/assets/bg-fader.gif');
   WRAPPER 'master_templates/master.tmpl'
   theme="yui"
   app_key='configure_security_policies'
   extrastyle="

.form_action {
	border:8px solid #ddd;
	margin:5px 0 20px;
	width:600px;
}

.config {
    margin: 0 0 0 25px;
}

ul, ol {
    list-style: none;
}
#content fieldset ul, #content fieldset ol, #content fieldset ul li {
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 0;
}

/* Security Form
----------------------------------------------------------------------------------------------------*/
form#securityform span {
	border:1px solid #aaa;
	display: block;
}
form#securityform fieldset {
	border: 0 none;
	margin:0;
	padding:10px 15px;
}
form#securityform legend {
	color:#4C5355;
	font-size:12px;
	font-weight: bold;
	margin: 0;
	padding: 10px 0 0;
}
.slider-bg {
    position: relative;
    background:url($bgimg) 5px 0 no-repeat;
    height:28px;
    width:228px;
}
.slider-thumb {
    cursor:default;
    position: absolute;
    top: 4px;
}
.warning{color:#ff0000; font-weight:bold;}
.status { margin-left: 1em; color: #888; }
.error  { margin-left: 1em; color: #f00; }
" %]
<script type="text/javascript" src="[%MagicRevision('/yui-gen/utilities_json/utilities_json.js')%]"></script>
<script type="text/javascript" src="[%MagicRevision('/yui/slider/slider.js')%]"></script>
<br />
<p class="description">[% locale.maketext('This interface provides the configuration settings of the Security Policy that apply to cPanel, cPanel webmail, and WHM on your server.') %]</p>
[% SET slider_fields = [] -%]
[% FOREACH err IN data.error -%]
<div class="error">[% err %]</div>
[% END -%]
[% IF data.status %] <div class="status">[% data.status %]</div>[% END -%]
<div id="content">
	<form name="securityform" id="securityform">

		<div id="policies" class="form_action">
			<fieldset>
				<legend>[% locale.maketext("Security Policy Items") %]</legend>
				<ul>
[%- FOREACH p = data.policies %]
					<li>
						<input type="checkbox" name="[% p.key %]" value="1" id="[% p.key %]" [% IF p.enabled %]checked="checked" [% END %]/>
						<label for="[% p.key %]">[% p.label %]</label>
[%      FOREACH field =  p.fields -%]
[% SET is_slider = field.type == 'slider' -%]
[% SET html_style = p.enabled ? '' : is_slider ? ' style="position:absolute;visibility:hidden"' : ' style="display:none"' -%]
						<div id="[% p.key %]-config" class="config config_container"[%html_style%]>
[%            SWITCH field.type -%]
[%            CASE 'slider' -%]
[%              slider_fields.push(field) -%]
                            <label for="[% field.id %]">[% field.label %]</label>
                                <input id="[% field.id %]" name="[% field.id %]" type="text" autofill="off" autocomplete="off" size="5" maxlength="5" value="[% field.value %]" />
                            <div class="slider-bg" id="[%field.id%]-slider-bg" tabindex="-1" title="Slider">
                                <div class="slider-thumb" id="[%field.id%]-slider-thumb"><img src="[%MagicRevision('/yui/slider/assets/thumb-n.gif')%]" /></div>
                            </div>
[%            CASE 'msg' -%]
                            <p[% IF field.class %] class="[%field.class%]"[%END%]>[% field.text %]</p>
[%            CASE -%]
							<label for="[% field.id %]">[% field.label %]</label>
							<input type="text" name="[% field.id %]" id="[% field.id %]" maxlength = "4" value="[% field.value %]" size="3" /> <span style="display:inline;border:0" class="no_panel" id="[% field.id%]_error"></span>
[%            END -%]
						</div>
[%      END -%]
					</li>
[% END -%]
			</fieldset>
			</div>
		<div id="options" class="form_action">
			<fieldset>
				<legend>[% locale.maketext("Security Policy Extensions") %]</legend>
                <p class="description">[% locale.maketext('In addition to cPanel, cPanel webmail, and WHM interfaces, enable Security Policies for the following request types:') %]</p>
				<ul>
					<li>
						<input type="checkbox" name="secpol_xml" value="1" id="secpol_xml" [% IF data.secpol_xml %]checked="checked" [% END %]/>
						<label for="secpol_xml">[% locale.maketext("API requests") %]</label>
					</li>
					<li>
						<input type="checkbox" name="secpol_dns" value="1" id="secpol_dns" [% IF data.secpol_dns %]checked="checked" [% END %]/>
						<label for="secpol_dns">[% locale.maketext("DNS Cluster Requests") %]</label>
					</li>
				</ul>
				<p class="warning">[% locale.maketext('Two-Factor Authentication is enforced for session-based [asis,API] requests regardless of this setting. Disabling the [asis,API] requests option only exempts [asis,API] requests that use HTTP Basic authentication from Security Policies. We recommend you keep the [asis,API] requests option enabled.') %]</p>
			</fieldset>
			</div>
		<p class="description">[% locale.maketext('You may need to reset your password or provide other information immediately after you click Save.') %]</p>

		<input id="cmd" class="btn-primary" name="cmd" type="submit" value="Save" />
	</form>
</div>
<script type="text/javascript">
function init_slider(field) {
    var bg        = field.id+"-slider-bg",
        thumb     = field.id+"-slider-thumb",
        valuearea = field.id+"-slider-value",
        textfield = field.id
    ;

    var bottomConstraint = 200;
    var maxval = field.maxval || 100;
    var minval = field.minval || 0;
    var scaleFactor = (maxval/bottomConstraint);
    var topConstraint = 0 - (minval/scaleFactor);
    var keyIncrement = 5;
    var tickSize = 10;

    var slider = YAHOO.widget.Slider.getHorizSlider(bg,
        thumb, topConstraint, bottomConstraint, tickSize);

    slider.getRealValue = function() {
        var thisVal = this.getValue();
        return Math.round(thisVal*scaleFactor);
    }

    var textfieldEl = DOM.get(textfield);

    var fix_text_field = function(e) {
        var v = parseInt( textfieldEl.value.trim() );
        if ( isNaN(v) ) {
            textfieldEl.value = textfieldEl.defaultValue || minval;
            return false;
        }

        if (v > maxval) {
            v = maxval;
        }
        else if (v < minval) {
            v = minval;
        }
        else {
            v = keyIncrement * Math.round(v/keyIncrement);
        }

        textfieldEl.value = v;
        return v;
    };

    EVENT.on(textfield,'keyup', function(e) {
        var v = fix_text_field();
        if (v !== false) {
            slider.setValue(Math.round(v/scaleFactor),true);
        }
    });

    var initial_value = Number(textfieldEl.value);
    var fixed_value = fix_text_field();
    if (fixed_value != initial_value) {
        textfieldEl.defaultValue = fixed_value;
    }

    var containing_div = DOM.getAncestorBy(
        slider.getEl(),
        function(el) { return( el.id && /-config$/.test(el.id) ) }
    );
    if ( containing_div.style.visibility === "hidden" ) {
        //Slider defers the initial value setting internally.
        slider.subscribe("slideEnd", function slide_end() {
            containing_div.style.display = "none";
            containing_div.style.position = "";
            containing_div.style.visibility = "";
            slider.unsubscribe("slideEnd", slide_end);
        });
    }

    var hv = parseFloat(textfieldEl.value, 10);
    slider.setValue(Math.round(hv/scaleFactor),true);

    slider.subscribe("change", function(offsetFromStart) {
        var fld = DOM.get(textfield);
        var actualValue = slider.getRealValue();
        if (actualValue < minval) {
            actualValue = minval;
        }
        fld.value = actualValue;
        DOM.get(bg).title = field.label + " = " + actualValue;
    });
};

[% slider_fields.json() %].forEach(init_slider);

// Get a list of all the config divs on the page
var checkbox_ids = [% data.policies.ofeach('key').json() %];
var cur_id;
for (var i=0; cur_id = checkbox_ids[i]; i++) {

    // Setup an onclick event that toggles the visibility
    YAHOO.util.Event.on(cur_id, "click", function(e) {
        var config_div = DOM.get( this.id+"-config" );
        if ( !config_div ) return;

        if ( this.checked ) {
            validation.verify();
            CPANEL.animate.slide_down( config_div );
        }
        else {
            var slide = CPANEL.animate.slide_up( config_div );
            slide.onComplete.subscribe( validation.verify, validation, true );
        }
    } );
}

var validate_max_age = function() {
    // If the Password Age checkbox is unchecked then no validation required.
    if ( ! document.getElementById('PasswordAge').checked ) return true;

    var field_value = document.getElementById('maxage').value;

    // re= if there's any characters other than 0123456789 return false
    if ( ! /^[0-9]{1,5}$/.test(field_value) ) return false;
    if ( ( field_value < 1 ) || ( field_value > 1095 ) ) return false;
    return true;
}

// Attach light validation to the maxage input field
var validation = new CPANEL.validate.validator("Security Policy");
validation.add("maxage", validate_max_age, "Password age must be a number greater than zero and less than 1095 (3 years)");
validation.attach();
validation.verify();

CPANEL.validate.attach_to_form("cmd", validation);
</script>
[% END #wrapper -%]