<#import "/spring.ftl" as spring>

<#-- User Password Change Window -->
Ext.define('App.view.UserChangePasswordWindow', {
	extend: 'Ext.window.Window',
	alias: 'widget.userChangePasswordWindow',

	autoScroll: true,
	constrainHeader: true,
	modal: true,
	title: 'Change password',

	onSaveBtnClick: function(button, event) {
		var me = this,
			f = me.down('form').getForm();
		if (f.isValid()) {
			f.submit({
				waitMsg: 'Saving...',
				success: function(form, action) {
					App.showMsg('Password changed');
					me.close();
				},
				failure: function(form, action) {
					App.log(action);
					App.showError(App.localeRes('Failed to change password, please make sure you have entered your current password correctly!'));
				}
			});
		}
	},

	initComponent: function() {
		var me = this;

		Ext.applyIf(me, {
			items: [
				{
					xtype: 'form',
					bodyPadding: 10,
					buttonAlign: 'left',

					url: '<@spring.url "/user/change-password" />',

					defaults: {
						selectOnFocus: true,
						labelWidth: 150,
						width: 350
					},

					items: [
						{
							xtype: 'textfield',
							name: 'password',
							fieldLabel: 'Current Password',
							inputType: 'password',
							allowBlank: false,
							minLength: 5,
							maxLength: 20
						},
						{
							xtype: 'textfield',
							name: 'newPassword',
							fieldLabel: 'New Password',
							inputType: 'password',
							allowBlank: false,
							validator: function(value) {
								<#--
								return new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!\"#$%&'()*+,-./:;<=>?@\\[\\\\\\]^_`{|}~]).{8,20}").test(value)? true:
									'Please Input Strong Password.<br/>Minimum 8 Characters<br/>Capital Letters<br/>Lower-Case Letters<br/>Symbols<br/>Numbers';
								-->
								<#-- front and back end both check-->
								const min = ${SettingsService.getInt("SYS.password.rule.length.min")};
								const max = ${SettingsService.getInt("SYS.password.rule.length.max")};
								const number = ${SettingsService.getString("SYS.password.rule.number")!};
								const upperEng = ${SettingsService.getString("SYS.password.rule.upper.eng")!};
								const lowerEng = ${SettingsService.getString("SYS.password.rule.lower.eng")!};
								const specialChar = ${SettingsService.getString("SYS.password.rule.special")!};
								
								let regExp = "^";
								if(number) regExp += '(?=.*[0-9])';
								if(upperEng) regExp += '(?=.*[A-Z])';
								if(lowerEng) regExp += '(?=.*[a-z])';
								if(specialChar) regExp += "(?=.*[!\"#$%&'()*+,-./:;<=>?@\\[\\\\\\]^_`{|}~])";
								regExp += '.{'+min+','+max+'}';
								
								if(new RegExp(regExp).test(value)){
									return true;
								}else{
									let wrongMsg = 'Please Following Password Rule.<br />';
									wrongMsg += 'Minimum ' + min + ' Characters<br />';
									wrongMsg += 'Maximum ' + max + ' Characters<br />';
									if(number) wrongMsg += 'Numbers<br />';
									if(lowerEng) wrongMsg += 'Lower-Case Letters<br />';
									if(upperEng) wrongMsg += 'Capital Letters<br />';
									if(specialChar) wrongMsg += 'Symbols<br />';
									return wrongMsg;
								}
							}
						},
						{
							xtype: 'textfield',
							fieldLabel: 'Confirm New Password',
							inputType: 'password',
							submitValue: false,
							maxLength: 20,
							validator: function(value) {
								var p = me.down('field[name=newPassword]').getValue();
								return (p == value) ? true : 'New passwords do not match!';
							}
						}
					],

					buttons: [
						{
							xtype: 'button',
							itemId: 'saveBtn',
							text: App.localeRes('Save & Close'),
							ui: "blue",
							iconCls: 'silk-disk',
							formBind: true,
							handler: me.onSaveBtnClick,
							scope: me
						},
						{
							xtype: 'component',
							flex: 1
						},
						{
							xtype: 'button',
							text: App.localeRes('Cancel'),
							handler: function(button, event) {
								me.close();
							}
						}
					]
				}
			],

			listeners: {
				show: function(window, opts) {

				},
				close: function(window, opts) {
					if (me.callbackOnClose) me.callbackOnClose();
				},
				afterrender: function(window, options) {
			        this.keyNav = new Ext.util.KeyMap({
			            target: window.el,
			            binding: [{
			                key: 13,
			                fn: function(keyCode,event){
			                	me.down('#saveBtn').click();
			                }
			            }]
			        });
			    }
			}
		});

		me.callParent(arguments);
	}

});
