rewrite the interfaces preferences page as a class

implement password changing

deluge/ui/web/js/Deluge.Preferences.Interface.js

@@ -1,48 +1,153 @@
-Deluge.Preferences.addPage({
+Ext.namespace('Ext.deluge.preferences');
-	border: false,
+Ext.deluge.preferences.Interface = Ext.extend(Ext.form.FormPanel, {
-	title: _('Interface'),
+	constructor: function(config) {
-	xtype: 'form',
+		config = Ext.apply({
-	layout: 'form',
+			border: false,
-	items: [{
+			title: _('Interface'),
-		xtype: 'fieldset',
+			layout: 'form'
-		border: false,
+		}, config);
-		title: _('Window'),
+		Ext.deluge.preferences.Interface.superclass.constructor.call(this, config);
-		autoHeight: true,
+	},
-		labelWidth: 1,
+	
-		items: [{
+	initComponent: function() {
-			xtype: 'checkbox',
+		Ext.deluge.preferences.Interface.superclass.initComponent.call(this);
+		
+		var optMan = this.optionsManager = new Deluge.OptionsManager();
+		this.on('show', this.onShow, this);
+		
+		var fieldset = this.add({
+			xtype: 'fieldset',
+			border: false,
+			title: _('Window'),
+			autoHeight: true,
+			labelWidth: 1,
+			defaultType: 'checkbox'
+		});
+		optMan.bind('show_session_speed', fieldset.add({
+			name: 'show_session_speed',
 			fieldLabel: '',
 			labelSeparator: '',
-			boxLabel: _('Show session speed in titlebar'),
+			boxLabel: _('Show session speed in titlebar')
-			id: 'show_session_speed'
+		}));
-		}]
+		
-	}, {
+		fieldset = this.add({
-		xtype: 'fieldset',
+			xtype: 'fieldset',
-		border: false,
+			border: false,
-		title: _('Sidebar'),
+			title: _('Sidebar'),
-		autoHeight: true,
+			autoHeight: true,
-		labelWidth: 1,
+			labelWidth: 1,
-		items: [{
+			defaultType: 'checkbox'
-			xtype: 'checkbox',
+		});
+		optMan.bind('sidebar_show_zero', fieldset.add({
+			name: 'sidebar_show_zero',
 			fieldLabel: '',
 			labelSeparator: '',
-			boxLabel: _('Hide filters with zero torrents'),
+			boxLabel: _('Show filters with zero torrents')
-			id: 'hide_sidebar_zero'
+		}));
-		}]
+		optMan.bind('sidebar_show_trackers', fieldset.add({
-	}, {
+			name: 'sidebar_show_trackers',
-		xtype: 'fieldset',
+			fieldLabel: '',
-		border: false,
+			labelSeparator: '',
-		title: _('Password'),
+			boxLabel: _('Show trackers with zero torrents')
-		autoHeight: true,
+		}));
-		defaultType: 'textfield',
+		
-		items: [{
+		fieldset = this.add({
-			fieldLabel: 'New Password',
+			xtype: 'fieldset',
-			inputType: 'password',
+			border: false,
-			id: 'new_password'
+			title: _('Password'),
-		}, {
+			autoHeight: true,
-			inputType: 'password',
+			labelWidth: 110,
-			fieldLabel: 'Confirm Password',
+			defaultType: 'textfield',
-			id: 'confirm_password'
+			defaults: {
-		}]
+				width: 180,
-	}]
+				inputType: 'password'
-});
+			}
+		});
+		
+		this.oldPassword = fieldset.add({
+			name: 'old_password',
+			fieldLabel: _('Old Password')
+		});
+		this.newPassword = fieldset.add({
+			name: 'new_password',
+			fieldLabel: _('New Password')
+		});
+		this.confirmPassword = fieldset.add({
+			name: 'confirm_password',
+			fieldLabel: _('Confirm Password')
+		});
+		
+		var panel = fieldset.add({
+			xtype: 'panel',
+			autoHeight: true,
+			border: false,
+			width: 320,
+			bodyStyle: 'padding-left: 230px'
+		})
+		panel.add({
+			xtype: 'button',
+			text: _('Change'),
+			listeners: {
+				'click': {
+					fn: this.onPasswordChange,
+					scope: this
+				}
+			}
+		});
+	},
+	
+	onApply: function() {
+		alert('apply');
+	},
+	
+	onGotConfig: function(config) {
+		this.optionsManager.set(config);
+	},
+	
+	onPasswordChange: function() {
+		if (this.newPassword.getValue() != this.confirmPassword.getValue()) {
+			Ext.MessageBox.show({
+				title: _('Invalid Password'),
+				msg: _('Your passwords don\'t match!'),
+				buttons: Ext.MessageBox.OK,
+				modal: false,
+				icon: Ext.MessageBox.ERROR,
+				iconCls: 'x-deluge-icon-error'
+			});
+			return;
+		}
+		
+		Deluge.Client.auth.change_password(this.oldPassword.getValue(), this.newPassword.getValue(), {
+			success: function(result) {
+				if (result) {
+					Ext.MessageBox.show({
+						title: _('Password'),
+						msg: _('Your old password was incorrect!'),
+						buttons: Ext.MessageBox.OK,
+						modal: false,
+						icon: Ext.MessageBox.ERROR,
+						iconCls: 'x-deluge-icon-error'
+					});
+				} else {
+					Ext.MessageBox.show({
+						title: _('Change Successful'),
+						msg: _('Your password was successfully changed!'),
+						buttons: Ext.MessageBox.OK,
+						modal: false,
+						icon: Ext.MessageBox.INFO,
+						iconCls: 'x-deluge-icon-info'
+					});
+				}
+			}
+		});
+	},
+	
+	onShow: function() {
+		Ext.deluge.preferences.Interface.superclass.onShow.call(this);
+		Deluge.Client.web.get_config({
+			success: this.onGotConfig,
+			scope: this
+		})
+	}
+});
+Deluge.Preferences.addPage(new Ext.deluge.preferences.Interface());