Merge branch 'master' of github.com:psychobunny/node-forum

public/css/style.less

@@ -142,7 +142,9 @@ footer.footer {
 
 	.profile-image-block {
 		background: white;
-
+		display: inline-block;
+		text-align: center;
+		font-size: 12px;
 	}
 	li {
 		padding-bottom: 15px;
@@ -170,16 +172,12 @@ footer.footer {
 		padding: 5px;
 		padding-left: 10px;
 	}
+	.post-content {
+		min-height: 50px;
+		padding: 2px 5px 0 5px;
+	}
 
 	.post-block {
-
-		.caret {
-			margin-top: -10px;
-			margin-left: -18px;
-			display: block;
-			border-width: 8px 8px 8px 0;
-			border-color: transparent #ddd transparent;
-		}
 		.post-buttons {
 			font-size: 12px;
 			float: right;
@@ -199,9 +197,6 @@ footer.footer {
 		background: #fff;
 	}
 
-	li:last-child {
-		border-bottom: 0;
-	}
 }
 
 #user_label {

public/src/templates.js

@@ -5,7 +5,7 @@ var templates = {};
 
 	templates.ready = function(callback) {
 		//quick implementation because introducing a lib to handle several async callbacks
-		if (callback == null) ready_callback();
+		if (callback == null && ready_callback) ready_callback();
 		else ready_callback = callback;
 	}
 

public/templates/account.tpl

@@ -0,0 +1,18 @@
+<h1>Account Settings</h1>
+<div class="well">
+    <div class="alert" id="message" style="display:none">
+        <button type="button" class="close" data-dismiss="message">&times;</button>
+        <strong></strong>
+        <p></p>
+    </div>
+    <label for="email">Email Address</label><input type="text" placeholder="Enter Email Address" id="email" /><br />
+    <button class="btn btn-primary" id="reset" type="submit">Reset Password</button>
+    <p>
+        If you see this, you are logged in.
+    </p>
+</div>
+<script type="text/javascript">
+(function() {
+    // ...
+}());
+</script>

public/templates/header.tpl

@@ -30,7 +30,7 @@
 						<li class="active"><a href="/">Forum</a></li>
 					</ul>
 					<ul class="nav pull-right" id="right-menu">
-						<li><a href="#" id="user_label"></a></li>
+						<li><a href="/account" id="user_label"></a></li>
 					</ul>
 				</div>
 			</div>

public/templates/home.tpl

@@ -3,7 +3,7 @@
 <!-- BEGIN topics -->
 <a href="topic/{topics.slug}"><li class="topic-row">
 	<h4>{topics.title}</h4>
-	<p>Posted {topics.relativeTime} by <span class="username">{topics.uid}</span>. {topics.post_count} posts.</p>
+	<p>Posted {topics.relativeTime} by <span class="username">{topics.username}</span>. {topics.post_count} posts.</p>
 </li></a>
 <!-- END topics -->
 </ul>
@@ -14,20 +14,6 @@ new_post.onclick = function() {
 }
 
 jQuery('document').ready(function() {
-	jQuery('.username').each(function() {
-		var userId = this.innerHTML;
-
-		(function(span){
-			socket.on('api:user.getNameByUid', function(username) {
-				span.innerHTML = username;	
-			});
-		})(this);
-		
-		socket.emit('api:user.getNameByUid', { fields: [ 'username' ], 'uid': userId });
-
-	})
-	
-	
 	
 	
 	

public/templates/topic.tpl

@@ -1,7 +1,7 @@
 <div class="container">
 	<ul class="breadcrumb">
 		<li><a href="/">Home</a> <span class="divider">/</span></li>
-		<li class="active">{TOPIC_NAME}</li>
+		<li class="active">{topic_name}</li>
 	</ul>
 </div>
 
@@ -9,20 +9,18 @@
 <!-- BEGIN posts -->
 <li class="row">
 	<div class="span1 profile-image-block">
-		
-			<img src="https://en.gravatar.com/userimage/18452752/f59e713c717466d2f5ad2a6970769f32.png" align="left" />
-			
+		<!--<i class="icon-spinner icon-spin icon-2x pull-left"></i>-->
+		<img src="https://en.gravatar.com/userimage/18452752/f59e713c717466d2f5ad2a6970769f32.png" align="left" />
+		<i class="icon-star"></i>2432
 	</div>
 	<div class="span11">
 		<div class="post-block">
-			
-
-			<p>{posts.content}</p>
+			<div id="content_{posts.pid}" class="post-content">{posts.content}</div>
 			<!--<p>Posted {posts.relativeTime} by user {posts.uid}.</p>-->
 			<div class="profile-block">
-				posted by <strong>psychobunny</strong> {posts.relativeTime}
+				posted by <strong>{posts.userName}</strong> {posts.relativeTime}
 				<span class="post-buttons">
-					<div class="quote"><i class="icon-quote-left"></i></div>
+					<div id="quote_{posts.pid}" class="quote"><i class="icon-quote-left"></i></div>
 					<div class="favourite"><i class="icon-star-empty"></i></div>
 					<div class="post_reply">Reply <i class="icon-reply"></i></div>
 				</span>
@@ -38,11 +36,14 @@
 
 <script type="text/javascript">
 jQuery('.post_reply').click(function() {
-	app.open_post_window('reply', "{TOPIC_ID}", "{TOPIC_NAME}");
+	app.open_post_window('reply', "{topic_id}", "{topic_name}");
 });
 
 jQuery('.quote').click(function() {
-	app.open_post_window('quote', "{TOPIC_ID}", "{TOPIC_NAME}");
+	app.open_post_window('quote', "{topic_id}", "{topic_name}");
+
+	// this needs to be looked at, obviously. only single line quotes work well I think maybe replace all \r\n with > ?
+	document.getElementById('post_content').innerHTML = '> ' + document.getElementById('content_' + this.id.replace('quote_', '')).innerHTML;
 });
 
 jQuery('.favourite').click(function() {

src/posts.js

@@ -1,6 +1,7 @@
 var	RDB = require('./redis.js'),
 	utils = require('./utils.js'),
-	marked = require('marked');
+	marked = require('marked'),
+	user = require('./user.js');
 
 (function(Posts) {
 	//data structure
@@ -21,12 +22,14 @@ var	RDB = require('./redis.js'),
 			RDB.lrange('tid:' + tid + ':posts', start, end, function(pids) {
 				var content = [],
 					uid = [],
-					timestamp = [];
+					timestamp = [],
+					pid = [];
 
 				for (var i=0, ii=pids.length; i<ii; i++) {
 					content.push('pid:' + pids[i] + ':content');
 					uid.push('pid:' + pids[i] + ':uid');
 					timestamp.push('pid:' + pids[i] + ':timestamp');
+					pid.push(pids[i]);
 				}
 
 				if (pids.length > 0) {
@@ -39,17 +42,21 @@ var	RDB = require('./redis.js'),
 							uid = replies[1];
 							timestamp = replies[2];
 
-							var posts = [];
-							for (var i=0, ii=content.length; i<ii; i++) {
-								posts.push({
-									'content' : marked(content[i]),
-									'uid' : uid[i],
-									'timestamp' : timestamp[i],
-									'relativeTime': utils.relativeTime(timestamp[i])
-								});
-							}
+							user.get_usernames_by_uids(uid, function(userNames) {
+								var posts = [];
+								for (var i=0, ii=content.length; i<ii; i++) {
+									posts.push({
+										'pid' : pid[i],
+										'content' : marked(content[i]),
+										'uid' : uid[i],
+										'userName' : userNames[i] || 'anonymous',
+										'timestamp' : timestamp[i],
+										'relativeTime': utils.relativeTime(timestamp[i])
+									});
+								}
 
-							callback({'TOPIC_NAME':topic_name, 'TOPIC_ID': tid, 'posts': posts});
+								callback({'topic_name':topic_name, 'topic_id': tid, 'posts': posts});
+							});
 						});
 				} else {
 					callback({});

src/templates.js

@@ -25,7 +25,7 @@
 
 	Templates.init = function() {
 		loadTemplates([
-			'header', 'footer', 'register', 'home', 'topic',
+			'header', 'footer', 'register', 'home', 'topic', 'account',
 			'login', 'reset', 'reset_code', 'logout',
 			'403',
 			'emails/reset', 'emails/reset_plaintext'

src/topics.js

@@ -1,6 +1,7 @@
 var	RDB = require('./redis.js'),
 	posts = require('./posts.js'),
-	utils = require('./utils.js');
+	utils = require('./utils.js'),
+	user = require('./user.js');
 
 (function(Topics) {
 	//data structure
@@ -68,25 +69,33 @@ var	RDB = require('./redis.js'),
 					.mget(slug)
 					.mget(postcount)
 					.exec(function(err, replies) {
+						
 						title = replies[0];
 						uid = replies[1];
 						timestamp = replies[2];
 						slug = replies[3];
 						postcount = replies[4];
 
-						var topics = [];
-						for (var i=0, ii=title.length; i<ii; i++) {
-							topics.push({
-								'title' : title[i],
-								'uid' : uid[i],
-								'timestamp' : timestamp[i],
-								'relativeTime': utils.relativeTime(timestamp[i]),
-								'slug' : slug[i],
-								'post_count' : postcount[i]
-							});
-						}
+						user.get_usernames_by_uids(uid, function(userNames) {
+							var topics = [];
+							
+							for (var i=0, ii=title.length; i<ii; i++) {
+								
+								topics.push({
+									'title' : title[i],
+									'uid' : uid[i],
+									'username': userNames[i],
+									'timestamp' : timestamp[i],
+									'relativeTime': utils.relativeTime(timestamp[i]),
+									'slug' : slug[i],
+									'post_count' : postcount[i]
+								});
+							}
+						
+							callback({'topics': topics});
+						});
+
 						
-						callback({'topics': topics});
 					}
 				);
 			} else callback([]);

src/user.js

@@ -264,6 +264,17 @@ var	config = require('../config.js'),
 		RDB.get('uid:' + uid+ ':username', callback);
 	};
 
+	User.get_usernames_by_uids = function(uids, callback) {
+		var userIds = [];
+		for(var i=0, ii=uids.length; i<ii; i++) {
+			userIds.push('uid:' + uids[i] + ':username');
+		}
+		
+		RDB.mget(userIds, function(data) {
+			callback(data);
+		});
+	};
+
 	User.get_uid_by_email = function(email, callback) {
 		RDB.get('email:' + email, callback)
 	};

src/webserver.js

@@ -78,14 +78,6 @@ passport.deserializeUser(function(uid, done) {
 (function(app) {
 	var templates = global.templates;
 
-	function refreshTemplates() {
-		//need a better solution than copying this code on every call. is there an "onconnect" event?
-		if (DEVELOPMENT === true) {
-			// refreshing templates
-			modules.templates.init();
-		}
-	}
-
 	// Middlewares
 	app.use(express.favicon());	// 2 args: string path and object options (i.e. expire time etc)
 	app.use(require('less-middleware')({ src: path.join(__dirname, '../', '/public') }));
@@ -259,8 +251,11 @@ passport.deserializeUser(function(uid, done) {
 	});
 
 	app.get('/account', function(req, res) {
-		refreshTemplates();
-		res.send(templates['header'] + templates['account_settings'] + templates['footer']);
+
+ 		if (req.user === undefined) 
+ 			return res.redirect('/403');
+
+		res.send(templates['header'] + templates['account'] + templates['footer']);
 	});
 
 	app.get('/users', function(req, res) {