Login form at the end of comment list. (f1afecce) · Commits · extjs / jsduck

template/app/controller/Auth.js

+25 −9

Original line number	Diff line number	Diff line
		@@ -13,14 +13,14 @@ Ext.define('Docs.controller.Auth', {

		refs: [
		{
		ref: 'authForm',
		selector: 'authForm'
		ref: "authHeaderForm",
		selector: "authHeaderForm"
		}
		],

		init: function() {
		this.control({
		'authForm': {
		'authHeaderForm, authForm': {
		login: this.login,
		logout: this.logout
		}
		@@ -45,31 +45,47 @@ Ext.define('Docs.controller.Auth', {
		}
		},

		login: function(username, password, remember) {
		login: function(form, username, password, remember) {
		Docs.Auth.login({
		username: username,
		password: password,
		remember: remember,
		success: this.setLoggedIn,
		failure: function(reason) {
		this.getAuthForm().showMessage(reason);
		form.showMessage(reason);
		},
		scope: this
		});
		},

		logout: function() {
		logout: function(form) {
		Docs.Auth.logout(this.setLoggedOut, this);
		},

		setLoggedIn: function() {
		this.getAuthForm().showLoggedIn(Docs.Auth.getUser());
		this.getAuthHeaderForm().showLoggedIn(Docs.Auth.getUser());
		this.eachCmp("commentsListWithForm", function(list) {
		list.showCommentingForm();
		});
		this.eachCmp("commentsList", function(list) {
		list.refresh();
		});
		this.getController("Tabs").showCommentsTab();
		},

		setLoggedOut: function(user) {
		this.getAuthForm().showLoggedOut();
		setLoggedOut: function() {
		this.getAuthHeaderForm().showLoggedOut();
		this.eachCmp("commentsListWithForm", function(list) {
		list.showAuthForm();
		});
		this.eachCmp("commentsList", function(list) {
		list.refresh();
		});
		this.getController("Tabs").hideCommentsTab();
		},

		eachCmp: function(selector, callback, scope) {
		Ext.Array.forEach(Ext.ComponentQuery.query(selector), callback, scope);
		}

		});

template/app/view/Viewport.js

+2 −2

Original line number	Diff line number	Diff line
		@@ -9,7 +9,7 @@ Ext.define('Docs.view.Viewport', {
		'Docs.view.Tabs',
		'Docs.view.TreeContainer',
		'Docs.view.welcome.Index',
		'Docs.view.auth.Form',
		'Docs.view.auth.HeaderForm',
		'Docs.view.comments.Index',
		'Docs.view.cls.Index',
		'Docs.view.cls.Container',
		@@ -50,7 +50,7 @@ Ext.define('Docs.view.Viewport', {
		{ xtype: 'container', flex: 1 },
		{
		id: 'loginContainer',
		xtype: 'authForm',
		xtype: 'authHeaderForm',
		width: 500,
		padding: '10 20 0 0'
		},

template/app/view/auth/Form.js

+8 −49

Original line number	Diff line number	Diff line
		/**
		* View for login form in header.
		* View for login form at the end of comments.
		*/
		Ext.define('Docs.view.auth.Form', {
		extend: 'Ext.container.Container',
		alias: 'widget.authForm',
		requires: [
		'Docs.Tip',
		'Docs.Comments'
		'Docs.Tip'
		],

		loginTplHtml: [
		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" />',
		@@ -20,46 +20,21 @@ Ext.define('Docs.view.auth.Form', {
		'</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.
		*/

		/**
		* @event logout
		* Fired when logout link clicked.
		*/

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

		this.getEl().addListener('click', this.showLoginForm, this, {
		preventDefault: true,
		delegate: '.login'
		});

		this.getEl().addListener('click', function() {
		this.fireEvent("logout");
		}, this, {
		preventDefault: true,
		delegate: '.logout'
		});
		},

		/**
		* Shows login form.
		*/
		showLoginForm: function() {
		var tpl = Ext.create('Ext.Template', this.loginTplHtml.join(''));
		tpl.overwrite(this.getEl(), {});
		this.bindSubmit();
		},

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

		@@ -72,7 +47,7 @@ Ext.define('Docs.view.auth.Form', {

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

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

		/**
		@@ -82,22 +57,6 @@ Ext.define('Docs.view.auth.Form', {
		showMessage: function(msg) {
		var submitEl = this.getEl().down('input[type=submit]');
		Docs.Tip.show(msg, submitEl, 'bottom');
		},

		/**
		* Shows message about who's logged in.
		* @param {Object} user
		*/
		showLoggedIn: function(user) {
		var userSignature = Docs.Comments.avatar(user.emailHash) + ' ' + user.userName;
		this.update('<span>' + userSignature + '</span> \| <a href="#" class="logout">Logout</a>');
		},

		/**
		* Shows message about being currently logged out.
		*/
		showLoggedOut: function() {
		this.update('<a href="#" class="login">Sign in / Register</a>');
		}

		});

template/app/view/auth/HeaderForm.js

0 → 100644

+105 −0

Original line number	Diff line number	Diff line
		/**
		* View for login form in header.
		*/
		Ext.define('Docs.view.auth.HeaderForm', {
		extend: 'Ext.container.Container',
		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.
		* @param {Docs.view.auth.HeaderForm} form
		*/

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

		this.getEl().addListener('click', this.showLoginForm, this, {
		preventDefault: true,
		delegate: '.login'
		});

		this.getEl().addListener('click', function() {
		this.fireEvent("logout", this);
		}, this, {
		preventDefault: true,
		delegate: '.logout'
		});
		},

		/**
		* 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');
		},

		/**
		* Shows message about who's logged in.
		* @param {Object} user
		*/
		showLoggedIn: function(user) {
		var userSignature = Docs.Comments.avatar(user.emailHash) + ' ' + user.userName;
		this.update('<span>' + userSignature + '</span> \| <a href="#" class="logout">Logout</a>');
		},

		/**
		* Shows message about being currently logged out.
		*/
		showLoggedOut: function() {
		this.update('<a href="#" class="login">Sign in / Register</a>');
		}

		});

template/app/view/comments/ListWithForm.js

+41 −10

Original line number	Diff line number	Diff line
		@@ -8,6 +8,7 @@ Ext.define('Docs.view.comments.ListWithForm', {
		requires: [
		'Docs.view.comments.List',
		'Docs.view.comments.Form',
		'Docs.view.auth.Form',
		'Docs.Comments',
		'Docs.Auth'
		],
		@@ -24,23 +25,22 @@ Ext.define('Docs.view.comments.ListWithForm', {
		initComponent: function() {
		this.items = [
		this.list = new Docs.view.comments.List({
		}),
		this.form = new Docs.view.comments.Form({
		title: this.newCommentTitle,
		user: Docs.Auth.getUser(),
		listeners: {
		submit: this.postComment,
		scope: this
		}
		})
		];

		this.callParent(arguments);

		if (Docs.Auth.isLoggedIn()) {
		this.showCommentingForm();
		}
		else {
		this.showAuthForm();
		}
		},

		postComment: function(content) {
		Docs.Comments.post(this.target, content, function(comment) {
		this.form.setValue('');
		this.commentingForm.setValue('');
		this.list.load([comment], true);
		}, this);
		},
		@@ -51,7 +51,38 @@ Ext.define('Docs.view.comments.ListWithForm', {
		* @param {Boolean} append True to append the comments to existing ones.
		*/
		load: function(comments, append) {
		this.down("commentsList").load(comments, append);
		this.list.load(comments, append);
		},

		/**
		* Shows the login form.
		*/
		showAuthForm: function() {
		if (this.commentingForm) {
		this.remove(this.commentingForm);
		delete this.commentingForm;
		}
		this.authForm = new Docs.view.auth.Form();
		this.add(this.authForm);
		},

		/**
		* Shows the commenting form.
		*/
		showCommentingForm: function() {
		if (this.authForm) {
		this.remove(this.authForm);
		delete this.authForm;
		}
		this.commentingForm = new Docs.view.comments.Form({
		title: this.newCommentTitle,
		user: Docs.Auth.getUser(),
		listeners: {
		submit: this.postComment,
		scope: this
		}
		});
		this.add(this.commentingForm);
		}

		});