<?php require "_header.php";?>
<!-- start custom CSS/JS -->
<?php
	$username= $_SESSION["cUserName"];
	$userpassword=$_SESSION["c_pass"];
    $user_id = $_SESSION["cUserId"];
?>
<script language="javascript" type="text/javascript">
var labelArray;
labelArray = [
			 	['Old Password :<span class="comp">*</span>'],
				['New Password :<span class="comp">*</span>'],
				['Confirm Password :<span class="comp">*</span>']
			];
var user_id = '<?php  echo $user_id; ?>';
var schoolid = '<?php echo $schoolid ;?>';
Ext.BLANK_IMAGE_URL = 'images/default/s.gif';

Ext.apply(Ext.form.VTypes, {
password : function(val, field) {
if (field.initialPassField) {
var login = Ext.getCmp(field.initialPassField);
return (val == login.getValue());
}
return true;
},
passwordText : 'Passwords do not match.' 
});

Ext.onReady(function() { 
	
	Ext.QuickTips.init();
			
	var tabs = new Ext.FormPanel({
        labelWidth: 120, 
        url:'save-change-password.php?ID=<?php echo $user_id ; ?>',
		method:'post',
        frame:true,
		standardSubmit:false,        
		forceLayout: true,
        bodyStyle:'padding:6px 6px 0',        
		defaultType: 'textfield',
                items :[
					   {	
					   		xtype: 'textfield',
				            fieldLabel: 'Username',
				            name: 'username',
							value:'<?php echo $username;?>',
							width:190,
						    allowBlank:false,
							readOnly:true
					   },
					    {	
					   		xtype: 'textfield',
							labelSeparator:'',
				            fieldLabel: labelArray[0],
				            name: 'oldpassword',
							inputType:'password',
							width:190,
						    allowBlank:false						
					   },
					   {
							labelSeparator:'',
				            fieldLabel: labelArray[1],
							name:'password',
							width:190,
							inputType:'password',
							id: 'pass',
							minLength:      5,
							minLengthText:  'Password length must be between 5-15 characters.',
							maxLength:  	15,
							maxLengthText:  'Password length must be between 5-15 characters.',
							allowBlank:false
							},
							{
							labelSeparator:'',
				            fieldLabel: labelArray[2],
							name:'password1',
							width:190,
							inputType:'password',
							vtype:'password',
							initialPassField: 'pass',
							minLength:      5,
							minLengthText:  'Password length must be between 5-15 characters.',
							maxLength:  	15,
							maxLengthText:  'Password length must be between 5-15 characters.',
							allowBlank:false
						}
			  	
					]
    });	
	tabs.on({
	actioncomplete: function(form, action)
				{
					if(action.type == 'submit'){	
						 if(action.result.success=="true") {
						 	 Ext.MessageBox.show({
											   title: 'Message',
											   msg: 'Password changed successfully.',
											   buttons: Ext.MessageBox.OK,
											   icon:Ext.MessageBox.INFO
							});						
						}
					}
				}
}); 	
	var ChangePasswordWindow = new Ext.Window({
        title: 'Change Password',
		width:400,		
		height:200,		
		border: false,
		modal:true,
		layout: 'fit',
		closeAction:'close',
		collapsible:true,		
		items: tabs,
		buttonAlign: 'center',
	    buttons: [						
						{

							text: 'Change Password',
							name:'btnSave',
							id:'btnSave',
							handler: function(){
							tabs.getForm().submit({
								waitMsg: 'Saving...',	
								success: function () {		
								    Ext.MessageBox.show({
											   title: 'Message',
											   msg: 'Password changed successfully.',
											   buttons: Ext.MessageBox.OK,
											   icon:Ext.MessageBox.INFO
									  });
									  tabs.getForm().reset();
								},
								failure: function () {		
								    Ext.MessageBox.show({
											   title: 'Error',
											   msg: 'Password change failed.',
											   buttons: Ext.MessageBox.OK,
											   icon:Ext.MessageBox.ERROR
									  });
								}
							});   							
							}
						},
					   	{
						text: 'Reset',
						name:'btnReset',
						id:'btnReset',
							handler: function (){
								tabs.getForm().reset();
							}
						},
						{
						text: 'Close',
						name:'btnCancel',
						id:'btnCancel',			
						handler: function (){							
								location.href='<?php echo "loginhome.php" ?>'
							}
						}
					 ]

	});
	
	ChangePasswordWindow.on('hide',function(){location.href='<?php echo "loginhome.php" ?>'});
	
	var varWidth =  (screen.width - ChangePasswordWindow.width)/2;
	ChangePasswordWindow.setPosition(varWidth,((screen.height/4)-38));
	ChangePasswordWindow.show();
		
	tabs.getForm().findField('oldpassword').on('blur',function (){
	var varoldpassword=tabs.getForm().findField('oldpassword').getValue();	
		var resbool="";		
		if(varoldpassword!="")
		{			
					Ext.Ajax.request({
							  loadMask: true,
							  sync : true,
							  url: 'data/checkoldpassword.php',
							  params: {oldpassword: varoldpassword,userid : user_id},
							  success: function(resp) {
								resbool=Ext.decode(resp.responseText).success;			                     
										if(resbool=='false')
										{
											 Ext.MessageBox.show({
											   title: 'Error',
											   msg: 'Old Password did not match.',
											   buttons: Ext.MessageBox.OK,
											   icon:Ext.MessageBox.ERROR
									 		 });
											tabs.getForm().findField('oldpassword').reset();
										}	 			
							  }				
							});		
		}
			}); //blur event
});
</script>
<!-- end custom CSS/JS -->
<div align="center">
	<div id="main-content" align="left">
	</div>
</div>
<?php require "_footer.php";?>