Extract a base class from Form and HeaderForm. (a8184d2a) · Commits · extjs / jsduck

template/app/view/auth/BaseForm.js

0 → 100644

+68 −0

Original line number	Diff line number	Diff line
		/**
		* Shared functionality of Form and HeaderForm components.
		*/
		Ext.define('Docs.view.auth.BaseForm', {
		extend: 'Ext.Component',
		requires: [
		'Docs.Tip'
		],

		/**
		* @event login
		* Fires when user fills in username and password and presses
		* submit button.
		* @param {Docs.view.auth.BaseForm} form
		* @param {String} username
		* @param {String} password
		* @param {Boolean} remember True when remember-me checked.
		*/

		/**
		* Creates the HTML to be used in login form.
		* @return {String}
		* @protected
		*/
		createLoginFormHtml: function() {
		return [
		'<form class="loginForm">',
		'<input class="username" type="text" name="username" placeholder="Username" />',
		'<input class="password" type="password" name="password" placeholder="Password" />',
		'<label><input type="checkbox" name="remember" /> Remember Me</label>',
		'<input class="submit" type="submit" value="Sign in" />',
		' or ',
		'<a class="register" href="http://www.sencha.com/forum/register.php" target="_blank">Register</a>',
		'</form>'
		].join("");
		},

		/**
		* Call this after form HTML is rendered to set up submit listener
		* for the login form.
		* @protected
		*/
		bindFormSubmitEvent: function() {
		this.getEl().down("form").on("submit", this.submitLogin, this, {preventDefault: true});
		},

		// Gathers values from form and fires login event.
		submitLogin: function(event, el) {
		var form = Ext.get(el);
		var username = form.down('input[name=username]').getValue();
		var password = form.down('input[name=password]').getValue();
		var rememberEl = form.down('input[name=remember]');

		var remember = rememberEl ? !!(rememberEl.getAttribute('checked')) : false;

		this.fireEvent("login", this, username, password, remember);
		},

		/**
		* Shows the login failure message.
		* @param {String} msg
		*/
		showMessage: function(msg) {
		var submitEl = this.getEl().down('input[type=submit]');
		Docs.Tip.show(msg, submitEl, 'bottom');
		}

		});

template/app/view/auth/Form.js

+9 −47

Original line number	Diff line number	Diff line
		@@ -2,61 +2,23 @@
		* View for login form at the end of comments.
		*/
		Ext.define('Docs.view.auth.Form', {
		extend: 'Ext.container.Container',
		extend: 'Docs.view.auth.BaseForm',
		alias: 'widget.authForm',
		requires: [
		'Docs.Tip'
		],

		html: [
		'<span class="toggleNewComment"><span></span>Sign in to post a comment:</span>',
		'<form class="loginForm">',
		'<input class="username" type="text" name="username" placeholder="Username" />',
		'<input class="password" type="password" name="password" placeholder="Password" />',
		'<label><input type="checkbox" name="remember" /> Remember Me</label>',
		'<input class="submit" type="submit" value="Sign in" />',
		' or ',
		'<a class="register" href="http://www.sencha.com/forum/register.php" target="_blank">Register</a>',
		'</form>'
		],

		cls: "new-comment",

		/**
		* @event login
		* Fires when user fills in username and password and presses
		* submit button.
		* @param {Docs.view.auth.CommentForm} form
		* @param {String} username
		* @param {String} password
		* @param {Boolean} remember True when remember-me checked.
		*/
		initComponent: function() {
		this.html = [
		'<span class="toggleNewComment"><span></span>Sign in to post a comment:</span>',
		this.createLoginFormHtml()
		];

		afterRender: function() {
		this.callParent(arguments);

		this.getEl().down("form").on("submit", this.submitLogin, this, {preventDefault: true});
		},

		// Gathers values from form and fires login event.
		submitLogin: function(event, el) {
		var form = Ext.get(el);
		var username = form.down('input[name=username]').getValue();
		var password = form.down('input[name=password]').getValue();
		var rememberEl = form.down('input[name=remember]');

		var remember = rememberEl ? !!(rememberEl.getAttribute('checked')) : false;

		this.fireEvent("login", this, username, password, remember);
		},
		afterRender: function() {
		this.callParent(arguments);

		/**
		* Shows the login failure message.
		* @param {String} msg
		*/
		showMessage: function(msg) {
		var submitEl = this.getEl().down('input[type=submit]');
		Docs.Tip.show(msg, submitEl, 'bottom');
		this.bindFormSubmitEvent();
		}

		});

template/app/view/auth/HeaderForm.js

+3 −51

Original line number	Diff line number	Diff line
		@@ -2,34 +2,12 @@
		* View for login form in header.
		*/
		Ext.define('Docs.view.auth.HeaderForm', {
		extend: 'Ext.container.Container',
		extend: 'Docs.view.auth.BaseForm',
		alias: 'widget.authHeaderForm',
		requires: [
		'Docs.Tip',
		'Docs.Comments'
		],

		loginTplHtml: [
		'<form class="loginForm">',
		'<input class="username" type="text" name="username" placeholder="Username" />',
		'<input class="password" type="password" name="password" placeholder="Password" />',
		'<label><input type="checkbox" name="remember" /> Remember Me</label>',
		'<input class="submit" type="submit" value="Sign in" />',
		' or ',
		'<a class="register" href="http://www.sencha.com/forum/register.php" target="_blank">Register</a>',
		'</form>'
		],

		/**
		* @event login
		* Fires when user fills in username and password and presses
		* submit button.
		* @param {Docs.view.auth.HeaderForm} form
		* @param {String} username
		* @param {String} password
		* @param {Boolean} remember True when remember-me checked.
		*/

		/**
		* @event logout
		* Fired when logout link clicked.
		@@ -56,34 +34,8 @@ Ext.define('Docs.view.auth.HeaderForm', {
		* Shows login form.
		*/
		showLoginForm: function() {
		var tpl = Ext.create('Ext.Template', this.loginTplHtml.join(''));
		tpl.overwrite(this.getEl(), {showLabel: this.showLabel});
		this.bindSubmit();
		},

		bindSubmit: function() {
		this.getEl().down("form").on("submit", this.submitLogin, this, {preventDefault: true});
		},

		// Gathers values from form and fires login event.
		submitLogin: function(event, el) {
		var form = Ext.get(el);
		var username = form.down('input[name=username]').getValue();
		var password = form.down('input[name=password]').getValue();
		var rememberEl = form.down('input[name=remember]');

		var remember = rememberEl ? !!(rememberEl.getAttribute('checked')) : false;

		this.fireEvent("login", this, username, password, remember);
		},

		/**
		* Shows the login failure message.
		* @param {String} msg
		*/
		showMessage: function(msg) {
		var submitEl = this.getEl().down('input[type=submit]');
		Docs.Tip.show(msg, submitEl, 'bottom');
		this.update(this.createLoginFormHtml());
		this.bindFormSubmitEvent();
		},

		/**