6 files changed, 110 insertions, 1 deletions
diff --git a/views/header.ejs b/views/header.ejs
index 9c8ee0d..aed34d0 100644
--- a/views/header.ejs
+++ b/views/header.ejs
@@ -16,6 +16,12 @@
 <span><a href="/forum">Forum</a></span>
 <%
 	if (user) {
+		let unread = user.unread();
+		if (unread > 0) {
+			%><span><a href="/inbox">Inbox (<%= unread %>)</a></span><%
+		} else {
+			%><span><a href="/inbox">Inbox</a></span><%
+		}
 		%><span><a href="/profile">Profile (<%= user.name %>)</a></span><%
 	} else {
 		%><span><a href="/signup">Signup</a></span><%
diff --git a/views/message_inbox.ejs b/views/message_inbox.ejs
new file mode 100644
index 0000000..91490ac
--- /dev/null
+++ b/views/message_inbox.ejs
@@ -0,0 +1,23 @@
+<%- include('header', { title: "Inbox" }) %>
+<style>
+table { width: 100%; max-width: 50em; }
+tr.unread { background-color: lemonchiffon; }
+td.from { width: 5em; }
+td.time { text-align: right; width: 5em; }
+td a { color:black; text-decoration: none; }
+</style>
+<p>
+&#xbb; <a href="/message/send">Send message</a>
+<br>
+&#xbb; <a href="/outbox">Outbox</a>
+<table>
+<tr><th>From<th>Subject<th>Date
+<% if (messages.length > 0) { messages.forEach((row) => { %>
+<tr class="<%- row.read ? "read" : "unread" %>">
+<td class="nowrap from"><%= row.from_name %>
+<td class="subject"><a href="/message/read/<%- row.message_id %>"><%= row.subject %></a>
+<td class="nowrap time"><%= row.time %>
+<% }); } else { %>
+<tr><td colspan="3">No messages</td>
+<% } %>
+</table>
diff --git a/views/message_outbox.ejs b/views/message_outbox.ejs
new file mode 100644
index 0000000..c460bd3
--- /dev/null
+++ b/views/message_outbox.ejs
@@ -0,0 +1,23 @@
+<%- include('header', { title: "Outbox" }) %>
+<style>
+table { width: 100%; max-width: 50em; }
+tr.unread { background-color: lemonchiffon; }
+td.to { width: 5em; }
+td.time { text-align: right; width: 5em; }
+td a { color:black; text-decoration: none; }
+</style>
+<p>
+&#xbb; <a href="/message/send">Send message</a>
+<br>
+&#xbb; <a href="/inbox">Inbox</a>
+<table>
+<tr><th>To<th>Subject<th>Date
+<% if (messages.length > 0) { messages.forEach((row) => { %>
+<tr class="<%- row.read ? "read" : "unread" %>">
+<td class="nowrap to"><%= row.to_name %>
+<td class="subject"><a href="/message/read/<%- row.message_id %>"><%= row.subject %></a>
+<td class="nowrap time"><%= row.time %>
+<% }); } else { %>
+<tr><td colspan="3">No messages</td>
+<% } %>
+</table>
diff --git a/views/message_read.ejs b/views/message_read.ejs
new file mode 100644
index 0000000..f4a791e
--- /dev/null
+++ b/views/message_read.ejs
@@ -0,0 +1,27 @@
+<%- include('header', { title: mail.subject }) %>
+<style>
+table { width: 100%; max-width: 50em; }
+th { width: 5em; font-weight: normal; }
+td.body { white-space: pre-wrap; padding: 10px 10px; }
+</style>
+<script>
+function delete_message(id) {
+	let warning = "Are you sure you want to DELETE this message?";
+	if (window.confirm(warning))
+		window.location.href = "/message/delete/" + id;
+}
+function reply_message(id) {
+	window.location.href = "/message/reply/" + id;
+}
+</script>
+<table>
+<tr><th>From:<td> <%= mail.from_name %>
+<tr><th>To:<td> <%= mail.to_name %>
+<tr><th>Date:<td> <%= mail.time %>
+<tr><td colspan="2" class="body"><%= mail.body %></td>
+</table>
+<p>
+<% if ( mail.from_id !== user.user_id ) { %>
+<button onclick="reply_message(<%- mail.message_id %>)">Reply</button>
+<% } %>
+<button onclick="delete_message(<%- mail.message_id %>)">Delete</button>
diff --git a/views/message_send.ejs b/views/message_send.ejs
new file mode 100644
index 0000000..6f72d74
--- /dev/null
+++ b/views/message_send.ejs
@@ -0,0 +1,30 @@
+<%- include('header', { title: "Send Message" }) %>
+<style>
+input, textarea { width: 100%; max-width: 45em; }
+</style>
+<form action="/message/send" method="post">
+<p>
+To:<br>
+<input id="to" type="text" name="to" size="80" maxlength="80"
+	onkeypress="if(event.keyCode===13){document.querySelector('#subject').focus();return false;}"
+	value="<%= to_name %>"
+	<%= to_id === 0 ? "autofocus" : "" %>
+	required>
+
+<p>
+Subject:
+<br>
+<input id="subject" type="text" name="subject" size="80" maxlength="80"
+	onkeypress="if(event.keyCode===13){document.querySelector('#body').focus();return false;}"
+	value="<%= subject %>"
+	<%= to_id > 0 ? "autofocus" : "" %>
+	pattern=".*\S+.*"
+	required>
+
+<p>
+Body:
+<br>
+<textarea id="body" name="body" rows="20" cols="80" maxlength="32000" required><%= body %></textarea>
+<p>
+<button type="submit">Send</button>
+</form>
diff --git a/views/users.ejs b/views/users.ejs
index a8f5c7d..526b722 100644
--- a/views/users.ejs
+++ b/views/users.ejs
@@ -10,7 +10,7 @@ td.avatar img{display:block;width:80px;height:80px;}
 <% userList.forEach((row) => { %>
 <tr>
 <td class="avatar"><img src="<%= row.avatar %>">
-<td><%= row.name %>
+<td><a href="/user/<%= row.user_id %>"><%= row.name %></a>
 <td><%= row.ctime %>
 <td><%= row.atime %>
 <% }); %>