<rdoc:include file="head.htm" />

<div class="portlet box default">
<div class="portlet-title">
    <div class="caption">
        <i class="fa fa-globe"></i>$sys_component_name
    </div>    
</div>

<div class="portlet-body form">

    <!-- BEGIN FORM-->
    <form action="$_base" name='ruiform' method="POST" class="form-horizontal" id="mypwdform">
        <input type="hidden" name="sbt" value="$sbt">
        <input type="hidden" name="component" value="$component">
        <input type="hidden" name="task" value="password">
    
        <div class="form-body">
            <div class="alert alert-danger display-hide">
                <button class="close" data-close="alert"></button>
                You have some form errors. Please check below.
            </div>
            <div class="alert alert-success display-hide">
                <button class="close" data-close="alert"></button>
                Your form validation is successful!
            </div>

             <div class="form-group">
                <label class="control-label col-md-3">@t[Old password]
                <span class="required"> * </span>
               
                </label>
                
                <div class="col-md-4">
                    <input type="password" name="params[password]" id="password" class='form-control' />                          
                </div>
            </div>
            
            <div class="form-group">
                <label class="control-label col-md-3">@t[New password]
                <span class="required"> * </span>
               
                </label>
                
                <div class="col-md-4">
                    <input type="password" name="params[newpassword]" id="Password2" class='form-control' />              
                </div>
            </div>
            
             <div class="form-group">
                <label class="control-label col-md-3">@t[New password again]
                <span class="required"> * </span>
                
                </label>
                
                <div class="col-md-4">
                    <input type="password" name="params[newpassword2]" id="newpassword2" class='form-control' />
                </div>
            </div>
            
        </div>
        <div class="form-actions">
            <div class="row">
                <div class="col-md-offset-3 col-md-9">
                    <button type="submit" class="btn btn-primary" id="btnSubmit">@t[Submit]</button>
                </div>
            </div>
        </div>
    </form>
    <!-- END FORM-->
</div>
</div>

<script type="text/javascript">
jQuery(document).ready(function() {
    
    $('#mypwdform').validate({
                errorElement: 'span', //default input error message container
                errorClass: 'help-block', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                rules: {
                    'params[password]': {
                        required: true,
                    },
                    'params[newpassword]': {
                        required: true,
                    },
                    'params[newpassword2]': {
                        required: true,
                    },
                },
                messages: {  
                    'params[password]': {
                        required: t("The field is required."),
                    }, 
                    'params[newpassword]': {
                        required: t("The field is required."),
                    },    
                    'params[newpassword2]': {
                         required: t("The field is required."),
                    },         
                },

                invalidHandler: function (event, validator) { //display error alert on form submit   
                    $('.alert-danger', $('.login-form')).show();
                },

                highlight: function (element) { // hightlight error inputs
                    $(element)
                        .closest('.form-group').addClass('has-error'); // set error class to the control group
                },

                success: function (label) {
                    label.closest('.form-group').removeClass('has-error');
                    label.remove();
                },

                errorPlacement: function (error, element) {
                    error.insertAfter(element);
                },

                submitHandler: function (form) {
                    showWaiting("请稍后。。。");       
                       
                       var pkey = "$pkey";
                       var  formData = $(form).serializeArray();
                       
                       for (i=0; i<formData.length; i++) {
	  		                if (formData[i].name == "params[password]" 
	  		                || formData[i].name == "params[newpassword]"
	  		                || formData[i].name == "params[newpassword2]") {
	  			                formData[i].value = encrypt(formData[i].value, pkey);
	  		                }
	                   }
                	   
                       $.post(form.action, formData, function(res) {
                            if (res.status == 0) {
                                rui.showSuccess('操作成功.');  
                                rui.redirect(G.basename+"/logout", 1);                              
                            } else {
                               rui.showStatus(res);
                            }
                        }).fail(function(){
                              rui.showError('系统错误！');      
                        }); 
                    closeWaiting();
                }
            });
});
   
</script>

<rdoc:include file="foot.htm" />