Add user management pages

templates/user/articles.tmpl

@@ -0,0 +1,145 @@
+{{define "articles"}}
+{{template "header" .}}
+
+<div class="snug content-container">
+
+{{if .Flashes}}<ul class="errors">
+	{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}
+</ul>{{end}}
+
+<h2 id="posts-header">drafts</h2>
+
+{{ if .AnonymousPosts }}<div class="atoms posts">
+	{{ range $el := .AnonymousPosts }}<div id="post-{{.ID}}" class="post">
+		<h3><a href="/{{.ID}}" itemprop="url">{{.DisplayTitle}}</a></h3>
+		<h4>
+			<date datetime="{{.Created}}" pubdate itemprop="datePublished" content="{{.Created}}">{{.DisplayDate}}</date>
+			<a class="action" href="/{{.ID}}/edit">edit</a>
+			<a class="delete action" href="/{{.ID}}" onclick="delPost(event, '{{.ID}}', true)">delete</a>
+			{{ if $.Collections }}
+			{{if gt (len $.Collections) 1}}<div class="action flat-select">
+				<select id="move-{{.ID}}" onchange="postActions.multiMove(this, '{{.ID}}')" title="Move this post to one of your blogs">
+					<option style="display:none"></option>
+					{{range $.Collections}}<option value="{{.Alias}}">{{.DisplayTitle}}</option>{{end}}
+				</select>
+				<label for="move-{{.ID}}">move to...</label>
+				<img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" />
+			</div>{{else}}
+			{{range $.Collections}}
+			<a class="action" href="/{{$el.ID}}" title="Publish this post to your blog '{{.DisplayTitle}}'" onclick="postActions.move(this, '{{$el.ID}}', '{{.Alias}}');return false">move to {{.DisplayTitle}}</a>
+			{{end}}
+			{{end}}
+			{{ end }}
+		</h4>
+		{{if .Summary}}<p>{{.Summary}}</p>{{end}}
+	</div>{{end}}
+</div>{{ else }}<div id="no-posts-published"><p>You haven't saved any drafts yet.</p>
+	<p>They'll show up here once you do. Find your blog posts from the <a href="/me/c/">Blogs</a> page.</p>
+	<p class="text-cta"><a href="/">Start writing</a></p></div>{{ end }}
+
+<div id="moving"></div>
+
+<h2 id="unsynced-posts-header" style="display: none">unsynced posts</h2>
+<div id="unsynced-posts-info" style="margin-top: 1em"></div>
+<div id="unsynced-posts" class="atoms"></div>
+
+</div>
+
+<script src="/js/h.js"></script>
+<script src="/js/postactions.js"></script>
+<script>
+var auth = true;
+function postsLoaded(n) {
+	if (n == 0) {
+		return;
+	}
+	document.getElementById('unsynced-posts-header').style.display = 'block';
+	var syncing = false;
+	var $pInfo = document.getElementById('unsynced-posts-info');
+	$pInfo.className = 'alert info';
+	var plural = n != 1;
+	$pInfo.innerHTML = '<p>You have <strong>'+n+'</strong> post'+(plural?'s that aren\'t':' that isn\'t')+' synced to your account yet. <a href="#" id="btn-sync">Sync '+(plural?'them':'it')+' now</a>.</p>';
+
+	var $noPosts = document.getElementById('no-posts-published');
+	if ($noPosts != null) {
+		$noPosts.style.display = 'none';
+		document.getElementById('posts-header').style.display = 'none';
+	}
+
+	H.getEl('btn-sync').on('click', function(e) {
+		e.preventDefault();
+		if (syncing) {
+			return;
+		}
+		var http = new XMLHttpRequest();
+		var params = [];
+		var posts = JSON.parse(H.get('posts', '[]'));
+		if (posts.length > 0) {
+			for (var i=0; i<posts.length; i++) {
+				params.push({id: posts[i].id, token: posts[i].token});
+			}
+		}
+
+		this.style.fontWeight = 'bold';
+		this.innerText = 'Syncing '+(plural?'them':'it')+' now...';
+
+		http.open("POST", "/api/posts/claim", true);
+
+		// Send the proper header information along with the request
+		http.setRequestHeader("Content-type", "application/json");
+
+		http.onreadystatechange = function() {
+			if (http.readyState == 4) {
+				syncing = false;
+				this.innerText = 'Importing '+(plural?'them':'it')+' now...';
+
+				if (http.status == 200) {
+					var res = JSON.parse(http.responseText);
+					if (res.data.length > 0) {
+						if (res.data.length != posts.length) {
+							// TODO: handle something that royally fucked up
+							console.error("Request and result array length didn't match!");
+							return;
+						}
+						for (var i=0; i<res.data.length; i++) {
+							if (res.data[i].code == 200) {
+								// Post successfully claimed.
+								for (var j=0; j<posts.length; j++) {
+									// Find post in local store
+									if (posts[j].id == res.data[i].post.id) {
+										// Remove this post
+										posts.splice(j, 1);
+										break;
+									}
+								}
+							} else {
+								for (var j=0; j<posts.length; j++) {
+									// Find post in local store
+									if (posts[j].id == res.data[i].id) {
+										// Note the error in the local post
+										posts[j].error = res.data[i].error_msg;
+										break;
+									}
+								}
+							}
+						}
+						H.set('posts', JSON.stringify(posts));
+						location.reload();
+					}
+				} else {
+					// TODO: handle error visually (option to retry)
+					console.error("Didn't work at all, man.");
+					this.style.fontWeight = 'normal';
+					this.innerText = 'Sync '+(plural?'them':'it')+' now';
+				}
+			}
+		}
+		http.send(JSON.stringify(params));
+		syncing = true;
+	});
+}
+</script>
+<script src="/js/posts.js"></script>
+
+{{template "footer" .}}
+{{end}}

templates/user/collection.tmpl

@@ -0,0 +1,234 @@
+{{define "upgrade"}}
+<p><a href="/me/plan?to=/me/c/{{.Alias}}">Upgrade</a> for <span>$40 / year</span> to edit.</p>
+{{end}}
+
+{{define "collection"}}
+{{template "header" .}}
+
+<div class="content-container snug">
+	<div id="overlay"></div>
+
+	<h2>Customize {{.DisplayTitle}} <a href="/{{.Alias}}/">view blog</a></h2>
+
+	{{if .Flashes}}<ul class="errors">
+		{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}
+	</ul>{{end}}
+
+<form name="customize-form" action="/api/collections/{{.Alias}}" method="post" onsubmit="return disableSubmit()">
+<div id="collection-options">
+	<div style="text-align:center">
+		<h1><input type="text" name="title" id="title" value="{{.DisplayTitle}}" placeholder="Title" /></h1>
+		<p><input type="text" name="description" id="description" value="{{.Description}}" placeholder="Description" /></p>
+	</div>
+
+	<div class="option">
+		<h2><a name="preferred-url"></a>URL</h2>
+		<div class="section">
+			{{if eq .Alias .Username}}<p style="font-size: 0.8em">This blog uses your username in its URL{{if .Federation}} and fediverse handle{{end}}. You can change it in your <a href="/me/settings">Account Settings</a>.</p>{{end}}
+			<ul style="list-style:none">
+				<li>
+					{{.FriendlyHost}}/<strong>{{.Alias}}</strong>/
+				</li>
+				<li>
+					<strong id="normal-handle-env" class="fedi-handle" {{if or (not .Federation) .SingleUser}}style="display:none"{{end}}>@<span id="fedi-handle">{{.Alias}}</span>@<span id="fedi-domain">{{.FriendlyHost}}</span></strong>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<div class="option">
+		<h2>Publicity</h2>
+		<div class="section">
+			<ul style="list-style:none">
+				<li>
+					<label><input type="radio" name="visibility" id="visibility-unlisted" value="0" {{if .IsUnlisted}}checked="checked"{{end}} />
+						Unlisted
+					</label>
+					<p>This blog is visible to anyone with its link.</p>
+				</li>
+				<li>
+				<label class="option-text"><input type="radio" name="visibility" id="visibility-private" value="2" {{if .IsPrivate}}checked="checked"{{end}} />
+						Private
+					</label>
+					<p>Only you may read this blog (while you're logged in).</p>
+				</li>
+				<li>
+					<label class="option-text"><input type="radio" name="visibility" id="visibility-protected" value="4" {{if .IsProtected}}checked="checked"{{end}} />
+						Password-protected: <input type="password" class="low-profile" name="password" id="collection-pass" autocomplete="new-password" placeholder="{{if .IsProtected}}xxxxxxxxxxxxxxxx{{else}}a memorable password{{end}}" />
+					</label>
+					<p>A password is required to read this blog.</p>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<div class="option">
+		<h2>Display Format</h2>
+		<div class="section">
+			<p class="explain">Customize how your posts display on your page.
+			</p>
+			<ul style="list-style:none">
+				<li>
+					<label><input type="radio" name="format" id="format-blog" value="blog" {{if or (not .Format) (eq .Format "blog")}}checked="checked"{{end}} />
+						Blog
+					</label>
+					<p>Dates are shown. Latest posts listed first.</p>
+				</li>
+				<li>
+					<label class="option-text"><input type="radio" name="format" id="format-novel" value="novel" {{if eq .Format "novel"}}checked="checked"{{end}} />
+						Novel
+					</label>
+					<p>No dates shown. Oldest posts first.</p>
+				</li>
+				<li>
+					<label class="option-text"><input type="radio" name="format" id="format-notebook" value="notebook" {{if eq .Format "notebook"}}checked="checked"{{end}} />
+						Notebook
+					</label>
+					<p>No dates shown. Latest posts first.</p>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<div class="option">
+		<h2>Text Rendering</h2>
+		<div class="section">
+			<p class="explain">Customize how plain text renders on your blog.</p>
+			<ul style="list-style:none">
+				<li>
+					<label class="option-text disabled"><input type="checkbox" name="markdown" checked="checked" disabled />
+						Markdown
+					</label>
+				</li>
+				<li>
+					<label><input type="checkbox" name="mathjax" {{if .RenderMathJax}}checked="checked"{{end}} />
+						MathJax
+					</label>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<div class="option">
+		<h2>Custom CSS</h2>
+		<div class="section">
+			<textarea id="css-editor" class="section codable" name="style_sheet">{{.StyleSheet}}</textarea>
+			<p class="explain">See our guide on <a href="https://guides.write.as/customizing/#custom-css">customization</a>.</p>
+		</div>
+	</div>
+
+	<div class="option" style="text-align: center; margin-top: 4em;">
+		<input type="submit" id="save-changes" value="Save changes" />
+		<p><a href="/{{.Alias}}/">View Blog</a></p>
+		{{if ne .Alias .Username}}<p><a class="danger" href="#modal-delete" onclick="promptDelete();">Delete Blog...</a></p>{{end}}
+	</div>
+</div>
+</form>
+</div>
+
+		<div id="modal-delete" class="modal">
+			<h2>Are you sure you want to delete this blog?</h2>
+			<div class="body short">
+				<p style="text-align:left">This will permanently erase <strong>{{.DisplayTitle}}</strong> ({{.FriendlyHost}}/{{.Alias}}) from the internet. Any posts on this blog will be saved and made into drafts (found on your <a href="/me/posts/">Drafts</a> page).</p>
+				<p>If you're sure you want to delete this blog, enter its name in the box below and press <strong>Delete</strong>.</p>
+
+				<ul id="delete-errors" class="errors"></ul>
+
+				<input id="confirm-text" placeholder="{{.Alias}}" type="text" class="boxy" style="margin-top: 0.5em;" />
+				<div style="text-align:right; margin-top: 1em;">
+					<a id="cancel-delete" style="margin-right:2em" href="#">Cancel</a>
+					<button id="btn-delete" class="danger" onclick="deleteBlog(); return false;">Delete</button>
+				</div>
+			</div>
+		</div>
+
+<script src="/js/h.js"></script>
+<script src="/js/ace.js" type="text/javascript" charset="utf-8"></script>
+<script>
+// Begin shared modal code
+function showModal(id) {
+	document.getElementById('overlay').style.display = 'block';
+	document.getElementById('modal-'+id).style.display = 'block';
+}
+
+var closeModals = function(e) {
+	e.preventDefault();
+	document.getElementById('overlay').style.display = 'none';
+	var modals = document.querySelectorAll('.modal');
+	for (var i=0; i<modals.length; i++) {
+		modals[i].style.display = 'none'; 
+	}
+};
+H.getEl('overlay').on('click', closeModals);
+H.getEl('cancel-delete').on('click', closeModals);
+// end
+var deleteBlog = function(e) {
+	if (document.getElementById('confirm-text').value != '{{.Alias}}') {
+		document.getElementById('delete-errors').innerHTML = '<li class="urgent">Enter <strong>{{.Alias}}</strong> in the box below.</li>';
+		return;
+	}
+	// Clear errors
+	document.getElementById('delete-errors').innerHTML = '';
+	document.getElementById('btn-delete').innerHTML = 'Deleting...';
+
+	var http = new XMLHttpRequest();
+	var url = "/api/collections/{{.Alias}}?web=1";
+	http.open("DELETE", url, true);
+	http.setRequestHeader("Content-type", "application/json");
+	http.onreadystatechange = function() {
+		if (http.readyState == 4) {
+			if (http.status == 204) {
+				window.location = '/me/c/';
+			} else {
+				var data = JSON.parse(http.responseText);
+				document.getElementById('delete-errors').innerHTML = '<li class="urgent">'+data.error_msg+'</li>';
+				document.getElementById('btn-delete').innerHTML = 'Delete';
+			}
+		}
+	};
+	http.send(null);
+};
+
+function createHidden(theForm, key, value) {
+    var input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = key;
+    input.value = value;
+    theForm.appendChild(input);
+}
+function disableSubmit() {
+	var $form = document.forms['customize-form'];
+	createHidden($form, 'style_sheet', cssEditor.getSession().getValue());
+	createHidden($form, 'script', jsEditor.getSession().getValue());
+	var $btn = document.getElementById("save-changes");
+	$btn.value = "Saving changes...";
+	$btn.disabled = true;
+	return true;
+}
+function promptDelete() {
+	showModal("delete");
+}
+
+var $fediDomain = document.getElementById('fedi-domain');
+var $fediCustomDomain = document.getElementById('fedi-custom-domain');
+var $customDomain = document.getElementById('domain-alias');
+var $customHandleEnv = document.getElementById('custom-handle-env');
+var $normalHandleEnv = document.getElementById('normal-handle-env');
+
+var opt = {
+	showLineNumbers: false,
+	showPrintMargin: 0,
+};
+var theme = "ace/theme/chrome";
+var cssEditor = ace.edit("css-editor");
+cssEditor.setTheme(theme);
+cssEditor.session.setMode("ace/mode/css");
+cssEditor.setOptions(opt);
+var jsEditor = ace.edit("js-editor");
+jsEditor.setTheme(theme);
+jsEditor.session.setMode("ace/mode/javascript");
+jsEditor.setOptions(opt);
+</script>
+
+{{template "footer" .}}
+{{end}}

templates/user/collections.tmpl

@@ -0,0 +1,111 @@
+{{define "collections"}}
+{{template "header" .}}
+
+<div class="snug content-container">
+
+{{if .Flashes}}<ul class="errors">
+	{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}
+</ul>{{end}}
+
+<h2>blogs</h2>
+<ul class="atoms collections">
+	{{range $i, $el := .Collections}}<li class="collection"><h3>
+		<a class="title" href="/{{.Alias}}/">{{if .Title}}{{.Title}}{{else}}{{.Alias}}{{end}}</a>
+	</h3> 
+	<h4>
+		<a class="action new-post" href="/#{{.Alias}}">new post</a>
+		<a class="action" href="/me/c/{{.Alias}}">customize</a>
+		<a class="action" href="/me/c/{{.Alias}}/stats">stats</a>
+	</h4>
+	{{if .Description}}<p class="description">{{.Description}}</p>{{end}}
+</li>{{end}}
+	<li id="create-collection">
+		{{if not .NewBlogsDisabled}}
+		<form method="POST" action="/api/collections" id="new-collection-form" onsubmit="return createCollection()">
+			<h4>
+				<input type="text" name="title" placeholder="Blog name" id="blog-name">
+				<input type="hidden" name="web" value="true" />
+				<input type="submit" value="Create" id="create-collection-btn">
+			</h4>
+		</form>
+		{{end}}
+	</li>
+</ul>
+{{if not .NewBlogsDisabled}}<p style="margin-top:0"><a id="new-collection" href="#new-collection">New blog</a></p>{{end}}
+
+</div>
+
+{{template "foot" .}}
+
+<script src="/js/h.js"></script>
+<script>
+function createCollection() {
+	var input = He.get('blog-name');
+	if (input.value == "") {
+		return false;
+	}
+	var form = He.get('new-collection-form');
+	var submit = He.get('create-collection-btn');
+	submit.value = "Creating...";
+	submit.disabled = "disabled";
+	He.postJSON("/api/collections", {
+		title: input.value,
+		web: true
+	}, function(code, data) {
+		if (data.code == 201) {
+			location.reload();
+		} else {
+			var $createColl = document.getElementById('create-collection');
+			var $submit = $createColl.querySelector('input[type=submit]');
+			$submit.value = "Create";
+			$submit.disabled = "";
+			var $err = $createColl.querySelector('.error');
+			if (data.code == 409) {
+				if ($err === null) {
+					var url = He.create('span');
+					url.className = "error";
+					url.innerText = "This name is taken.";
+					$createColl.appendChild(url);
+				} else {
+					$err.innerText = "This name is taken.";
+				}
+			} else {
+				if ($err === null) {
+					var url = He.create('span');
+					url.className = "error";
+					url.innerText = data.error_msg;
+					$createColl.appendChild(url);
+				} else {
+					$err.innerText = "This name is taken.";
+				}
+			}
+		}
+	});
+	return false;
+};
+(function() {
+	H.getEl('new-collection').on('click', function(e) {
+		e.preventDefault();
+		var collForm = He.get('create-collection');
+		if (collForm.style.display == '' || collForm.style.display == 'none') {
+			// Show form
+			this.textContent = "Cancel";
+			collForm.style.display = 'list-item';
+			collForm.querySelector('input[type=text]').focus();
+			return;
+		}
+		// Hide form
+		this.textContent = "New blog";
+		collForm.style.display = 'none';
+	});
+	if (location.hash == '#new-collection' || location.hash == '#new') {
+		var collForm = He.get('create-collection');
+		collForm.style.display = 'list-item';
+		collForm.querySelector('input[type=text]').focus();
+		He.get('new-collection').textContent = "Cancel";
+	}
+}());
+</script>
+
+{{template "body-end" .}}
+{{end}}

templates/user/export.tmpl

@@ -0,0 +1,28 @@
+{{define "export"}}
+{{template "header" .}}
+
+<div class="snug content-container">
+	<h2 id="posts-header">Export</h2>
+	<p>Your data on {{.SiteName}} is always free. Download and back-up your work any time.</p>
+
+	<table class="classy export">
+		<tr>
+			<th style="width: 40%">Export</th>
+			<th colspan="2">Format</th>
+		</tr>
+		<tr>
+			<th>Posts</th>
+			<td><p class="text-cta"><a href="/me/posts/export.csv">CSV</a></p></td>
+			<td><p class="text-cta"><a href="/me/posts/export.zip">ZIP</a></p></td>
+		</tr>
+		<tr>
+			<th>User + Blogs + Posts</th>
+			<td><p class="text-cta"><a href="/me/export.json">JSON</a></p></td>
+			<td><p class="text-cta"><a href="/me/export.json?pretty=1">Prettified</a></p></td>
+		</tr>
+	</table>
+
+</div>
+
+{{template "footer" .}}
+{{end}}

templates/user/include/footer.tmpl

@@ -0,0 +1,35 @@
+{{define "footer"}}
+	{{template "foot" .}}
+	{{template "body-end" .}}
+{{end}}
+{{define "foot"}}
+	</div>
+	<footer>
+		<hr />
+		<nav>
+			<a class="home" href="/">{{.SiteName}}</a>
+			<a href="/about">about</a>
+			<a href="https://writefreely.org/guide" target="guides">guide</a>
+			<a href="/privacy">privacy</a>
+			<a>{{.Version}}</a>
+		</nav>
+	</footer>
+
+	<script type="text/javascript">
+	try { // Google Fonts
+	  WebFontConfig = {
+		custom: { families: [ 'Lora:400,700:latin' ], urls: [ '/css/fonts.css' ] }
+	  };
+	  (function() {
+		var wf = document.createElement('script');
+		wf.src = '/js/webfont.js';
+		wf.type = 'text/javascript';
+		wf.async = 'true';
+		var s = document.getElementsByTagName('script')[0];
+		s.parentNode.insertBefore(wf, s);
+	  })();
+	} catch (e) { /* ¯\_(ツ)_/¯ */ }
+	</script>
+{{end}}
+{{define "body-end"}}</body>
+</html>{{end}}

templates/user/include/header.tmpl

@@ -0,0 +1,37 @@
+{{define "header"}}<!DOCTYPE HTML>
+<html>
+<head>
+	<meta charset="utf-8">
+
+	<title>{{.PageTitle}} {{if .Separator}}{{.Separator}}{{else}}&mdash;{{end}} {{.SiteName}}</title>
+
+	<link rel="stylesheet" type="text/css" href="/css/write.css" />
+	<link rel="shortcut icon" href="/favicon.ico" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<meta name="theme-color" content="#888888" />
+	<meta name="apple-mobile-web-app-title" content="{{.SiteName}}">
+	<link rel="apple-touch-icon" sizes="152x152" href="/img/touch-icon-152.png">
+	<link rel="apple-touch-icon" sizes="167x167" href="/img/touch-icon-167.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="/img/touch-icon-180.png">
+</head>
+<body id="me">
+	<header>
+		<h1><a href="/" title="Return to editor">{{.SiteName}}</a></h1>
+		<nav id="user-nav">
+			<nav class="dropdown-nav">
+				<ul><li><a>{{.Username}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /><ul>
+						<li><a href="/me/settings">Account settings</a></li>
+						<li><a href="/me/export">Export</a></li>
+						<li class="separator"><hr /></li>
+						<li><a href="/me/logout">Log out</a></li>
+					</ul></li>
+				</ul>
+			</nav>
+			<nav class="tabs">
+				<a href="/me/c/"{{if eq .Path "/me/c/"}} class="selected"{{end}}>Blogs</a>
+				<a href="/me/posts/"{{if eq .Path "/me/posts/"}} class="selected"{{end}}>Drafts</a>
+			</nav>
+		</nav>
+	</header>
+	<div id="official-writing">
+{{end}}

templates/user/settings.tmpl

@@ -0,0 +1,83 @@
+{{define "settings"}}
+{{template "header" .}}
+
+<style type="text/css">
+.option { margin: 2em 0em; }
+h3 { font-weight: normal; }
+.section > *:not(input) { font-size: 0.86em; }
+</style>
+<div class="content-container snug regular">
+	<h2>{{if .IsLogOut}}Before you go...{{else}}Account Settings{{end}}</h2>
+	{{if .Flashes}}<ul class="errors">
+		{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}
+	</ul>{{end}}
+
+	{{ if .IsLogOut }}
+	<div class="alert info">
+		<p class="introduction">Please add an <strong>email address</strong> and/or <strong>passphrase</strong> so you can log in again later.</p>
+	</div>
+	{{ else }}
+	<div class="option">
+		<p>Change your account settings here.</p>
+	</div>
+
+	<form method="post" action="/api/me/self" autocomplete="false">
+		<div class="option">
+			<h3>Username</h3>
+			<div class="section">
+				<input type="text" name="username" value="{{.Username}}" tabindex="1" />
+				<input type="submit" value="Update" style="margin-left: 1em;" />
+			</div>
+		</div>
+	</form>
+	{{ end }}
+
+	<form method="post" action="/api/me/self" autocomplete="false">
+		<input type="hidden" name="logout" value="{{.IsLogOut}}" />
+		<div class="option">
+			<h3>Passphrase</h3>
+			<div class="section">
+				{{if and (not .HasPass) (not .IsLogOut)}}<div class="alert info"><p>Add a passphrase to easily log in to your account.</p></div>{{end}}
+				{{if .HasPass}}<p>Current passphrase</p>
+				<input type="password" name="current-pass" placeholder="Current passphrase" tabindex="1" /> <input class="show" type="checkbox" id="show-cur-pass" /><label for="show-cur-pass"> Show</label>
+				<p>New passphrase</p>
+				{{end}}
+				{{if .IsLogOut}}<input type="text" value="{{.Username}}" style="display:none" />{{end}}
+				<input type="password" name="new-pass" autocomplete="new-password" placeholder="New passphrase" tabindex="{{if .IsLogOut}}1{{else}}2{{end}}" /> <input class="show" type="checkbox" id="show-new-pass" /><label for="show-new-pass"> Show</label>
+			</div>
+		</div>
+
+		<div class="option">
+			<h3>Email</h3>
+			<div class="section">
+				{{if and (not .Email) (not .IsLogOut)}}<div class="alert info"><p>Add your email to get:</p>
+				<ul>
+					<li>No-passphrase login</li>
+					<li>Account recovery if you forget your passphrase</li>
+				</ul></div>{{end}}
+				<input type="email" name="email" style="letter-spacing: 1px" placeholder="Email address" value="{{.Email}}" size="40" tabindex="{{if .IsLogOut}}2{{else}}3{{end}}" />
+			</div>
+		</div>
+
+		<div class="option" style="text-align: center; margin-top: 4em;">
+			<input type="submit" value="Save changes" tabindex="4" />
+		</div>
+	</form>
+</div>
+
+<script>
+var showChecks = document.querySelectorAll('input.show');
+for (var i=0; i<showChecks.length; i++) {
+	showChecks[i].addEventListener('click', function() {
+		var prevEl = this.previousElementSibling;
+		if (prevEl.type == "password") {
+			prevEl.type = "text";
+		} else {
+			prevEl.type = "password";
+		}
+	});
+}
+</script>
+
+{{template "footer" .}}
+{{end}}

templates/user/stats.tmpl

@@ -0,0 +1,53 @@
+{{define "stats"}}
+{{template "header" .}}
+<style>
+table.classy th { text-align: left }
+table.classy th.num { text-align: right }
+td + td {
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+}
+td.num {
+	text-align: right;
+}
+table.classy.export a { text-transform: inherit; }
+td.none {
+	font-style: italic;
+}
+</style>
+
+<div class="content-container snug">
+	<h2 id="posts-header">{{if .Collection}}{{.Collection.DisplayTitle}} {{end}}Stats</h2>
+
+	<p>Stats for all time.</p>
+	
+	{{if .Federation}}
+	<h3>Fediverse stats</h3>
+	<table id="fediverse" class="classy export">
+		<tr>
+			<th>Followers</th>
+		</tr>
+		<tr>
+			<td>{{.APFollowers}}</td>
+		</tr>
+	</table>
+	{{end}}
+
+	<h3>Top {{len .TopPosts}} posts</h3>
+	<table class="classy export">
+		<tr>
+			<th>Post</th>
+			{{if not .Collection}}<th>Blog</th>{{end}}
+			<th class="num">Total Views</th>
+		</tr>
+		{{range .TopPosts}}<tr>
+			<td style="word-break: break-all;"><a href="{{if .Collection}}{{.Collection.CanonicalURL}}{{.Slug.String}}{{else}}/{{.ID}}{{end}}">{{if ne .Title.String ""}}{{.Title.String}}{{else}}<em>{{.ID}}</em>{{end}}</a></td>
+			{{ if not $.Collection }}<td>{{if .Collection}}<a href="{{.Collection.CanonicalURL}}">{{.Collection.Title}}</a>{{else}}<em>Draft</em>{{end}}</td>{{ end }}
+			<td class="num">{{.ViewCount}}</td>
+		</tr>{{end}}
+	</table>
+
+</div>
+
+{{template "footer" .}}
+{{end}}