Fix login from comments block. (2743c959) · Commits · extjs / jsduck

template/app/controller/Comments.js

+2 −1

Original line number	Diff line number	Diff line
		@@ -11,6 +11,7 @@ Ext.define('Docs.controller.Comments', {
		},

		requires: [
		"Docs.view.auth.LoginHelper",
		"Docs.Syntax",
		"Docs.Tip"
		],
		@@ -682,7 +683,7 @@ Ext.define('Docs.controller.Comments', {
		}
		}
		} else {
		Docs.view.Comments.loggedOutCommentTpl.overwrite(commentWrap, {});
		Docs.view.auth.LoginHelper.renderToComments(commentWrap);
		}
		}
		},

template/app/view/Comments.js

+2 −17

Original line number	Diff line number	Diff line
		@@ -3,7 +3,7 @@
		*/
		Ext.define('Docs.view.Comments', {
		singleton: true,
		requires: ['Docs.view.auth.Login'],
		requires: ['Docs.view.auth.LoginHelper'],

		constructor: function() {
		var numComments = [
		@@ -274,21 +274,6 @@ Ext.define('Docs.view.Comments', {
		commentMetaAndGuide.join(''),
		'</form>'
		);

		if (Ext.isIE && Ext.ieVersion <= 7) {
		this.loggedOutCommentTpl = Ext.create('Ext.XTemplate',
		'<div class="new-comment">',
		'<span class="toggleNewComment"><span></span>Sorry, adding comments is not supported in IE 7 or earlier</span>',
		'</div>'
		);
		} else {
		this.loggedOutCommentTpl = Ext.create('Ext.XTemplate',
		'<div class="new-comment">',
		'<span class="toggleNewComment"><span></span>Sign in to post a comment:</span>',
		Docs.view.auth.Login.prototype.loginTplHtml.join(''),
		'</div>'
		);
		}
		},

		/**
		@@ -474,7 +459,7 @@ Ext.define('Docs.view.Comments', {

		this.makeCodeMirror(textarea, wrap);
		} else {
		this.loggedOutCommentTpl.overwrite(newComment, {});
		Docs.view.auth.LoginHelper.renderToComments(newComment);
		}
		}, this);
		},

template/app/view/auth/Login.js

+3 −31

Original line number	Diff line number	Diff line
		/**
		* View for login form.
		* View for login form in header.
		*/
		Ext.define('Docs.view.auth.Login', {
		extend: 'Ext.container.Container',
		alias: 'widget.authentication',

		loginTplHtml: [
		'<form class="loginForm" method="POST">',
		'<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>'
		],

		initComponent: function() {
		this.loginTpl = Ext.create('Ext.Template', this.loginTplHtml.join(''));
		this.callParent(arguments);
		},
		requires: 'Docs.view.auth.LoginHelper',

		/**
		* Shows login form.
		*/
		showLoginForm: function() {
		this.update(this.loginTpl.apply());
		this.getEl().down("form").on("submit", this.submitLogin, this, {preventDefault: true});
		},

		submitLogin: function(event, el) {
		var form = Ext.get(el),
		username = form.down('input[name=username]').getValue(),
		password = form.down('input[name=password]').getValue(),
		rememberEl = form.down('input[name=remember]'),
		submitEl = form.down('input[type=submit]');

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

		Docs.App.getController('Auth').login(username, password, remember, submitEl);
		Docs.view.auth.LoginHelper.renderToHeader(this.getEl());
		},

		/**

template/app/view/auth/LoginHelper.js

0 → 100644

+73 −0

Original line number	Diff line number	Diff line
		/**
		* Generates the login form for both in header and at the end of
		* comments list.
		*
		* When form is submitted, Docs.controller.Auth#login method is called.
		*/
		Ext.define('Docs.view.auth.LoginHelper', {
		singleton: true,

		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>'
		],

		/**
		* Renders the form inside Login component in header.
		* @param {Ext.Element/HTMLElement} el
		*/
		renderToHeader: function(el) {
		var tpl = Ext.create('Ext.Template', this.loginTplHtml.join(''));
		tpl.overwrite(el, {});
		this.bindSubmit(el);
		},

		/**
		* Renders the form at the end of comments list.
		* @param {Ext.Element/HTMLElement} el
		*/
		renderToComments: function(el) {
		if (Ext.isIE && Ext.ieVersion <= 7) {
		var tpl = Ext.create('Ext.XTemplate',
		'<div class="new-comment">',
		'<span class="toggleNewComment"><span></span>Sorry, ',
		'adding comments is not supported in IE 7 or earlier</span>',
		'</div>'
		);
		}
		else {
		var tpl = Ext.create('Ext.XTemplate',
		'<div class="new-comment">',
		'<span class="toggleNewComment"><span></span>Sign in to post a comment:</span>',
		this.loginTplHtml.join(''),
		'</div>'
		);
		}
		tpl.overwrite(el, {});
		this.bindSubmit(el);
		},

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

		// Gathers values from form and passes to Auth controller
		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 submitEl = form.down('input[type=submit]');

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

		Docs.App.getController('Auth').login(username, password, remember, submitEl);
		}

		});