First take at template updates. T712

pages/login.tmpl

@@ -19,6 +19,16 @@
 	</form>
 
 	{{if and (not .SingleUser) .OpenRegistration}}<p style="text-align:center;font-size:0.9em;margin:3em auto;max-width:26em;">{{if .Message}}{{.Message}}{{else}}<em>No account yet?</em> <a href="/">Sign up</a> to start a blog.{{end}}</p>{{end}}
+	{{ if .OauthSlack }}
+	<p style="text-align:center;font-size:0.9em;margin:3em auto;max-width:26em;">
+	    <a href="/oauth/slack">Sign-in with Slack.</a>
+	</p>
+	{{ end }}
+	{{ if .OauthWriteAs }}
+    <p style="text-align:center;font-size:0.9em;margin:3em auto;max-width:26em;">
+        <a href="/oauth/write.as">Sign-in with Write.As.</a>
+    </p>
+    {{ end }}
 
 <script type="text/javascript">
 function disableSubmit() {

pages/signup-oauth.tmpl

@@ -0,0 +1,163 @@
+{{define "head"}}
+<title>Sign up &mdash; {{.SiteName}}</title>
+
+<style type="text/css">
+h2 {
+	font-weight: normal;
+}
+#pricing.content-container div.form-container #payment-form {
+	display: block !important;
+}
+#pricing #signup-form table {
+	max-width: inherit !important;
+	width: 100%;
+}
+#pricing #payment-form table {
+	margin-top: 0 !important;
+	max-width: inherit !important;
+	width: 100%;
+}
+tr.subscription {
+	border-spacing: 0;
+}
+#pricing.content-container tr.subscription button {
+	margin-top: 0 !important;
+	margin-bottom: 0 !important;
+	width: 100%;
+}
+#pricing tr.subscription td {
+	padding: 0 0.5em;
+}
+#pricing table.billing > tbody > tr > td:first-child {
+	vertical-align: middle !important;
+}
+.billing-section {
+	display: none;
+}
+.billing-section.bill-me {
+	display: table-row;
+}
+#btn-create {
+	color: white !important;
+}
+#total-price {
+	padding-left: 0.5em;
+}
+#alias-site.demo {
+	color: #999;
+}
+#alias-site {
+	text-align: left;
+	margin: 0.5em 0;
+}
+form dd {
+	margin: 0;
+}
+</style>
+{{end}}
+{{define "content"}}
+<div id="pricing" class="content-container wide-form">
+
+<div class="row">
+	<div style="margin: 0 auto; max-width: 25em;">
+		<h1>Sign up</h1>
+
+		{{ if .Error }}
+			<p style="font-style: italic">{{.Error}}</p>
+		{{ else }}
+		{{if .Flashes}}<ul class="errors">
+			{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}
+		</ul>{{end}}
+
+		<div id="billing">
+			<form action="/auth/signup-oauth" method="POST" id="signup-form" onsubmit="return signup()">
+				<input type="hidden" name="provider" value="{{.Provider}}" />
+				<input type="hidden" name="access_token" value="{{.AccessToken}}" />
+				<dl class="billing">
+					<label>
+						<dt>Username</dt>
+						<dd>
+							<input type="text" id="alias" name="alias" style="width: 100%; box-sizing: border-box;" tabindex="1" autofocus />
+							{{if .Federation}}<p id="alias-site" class="demo">@<strong>your-username</strong>@{{.FriendlyHost}}</p>{{else}}<p id="alias-site" class="demo">{{.FriendlyHost}}/<strong>your-username</strong></p>{{end}}
+						</dd>
+					</label>
+					<label>
+						<dt>Email (optional)</dt>
+						<dd><input type="email" name="email" id="email" style="letter-spacing: 1px; width: 100%; box-sizing: border-box;" placeholder="me@example.com" tabindex="3" /></dd>
+					</label>
+					<dt>
+						<button id="btn-create" type="submit" style="margin-top: 0">Create blog</button>
+					</dt>
+				</dl>
+			</form>
+		</div>
+		{{ end }}
+	</div>
+</div>
+
+<script type="text/javascript" src="/js/h.js"></script>
+<script type="text/javascript">
+function signup() {
+	// Validate input
+	if (!aliasOK) {
+		var $a = $alias;
+		$a.el.className = 'error';
+		$a.el.focus();
+		$a.el.scrollIntoView();
+		return false;
+	}
+
+	var $btn = document.getElementById('btn-create');
+	$btn.disabled = true;
+	$btn.value = 'Creating...';
+	return true;
+}
+
+var $alias = H.getEl('alias');
+var $aliasSite = document.getElementById('alias-site');
+var aliasOK = true;
+var typingTimer;
+var doneTypingInterval = 750;
+var doneTyping = function() {
+	// Check on username
+	var alias = $alias.el.value;
+	if (alias != "") {
+		var params = {
+			username: alias
+		};
+		var http = new XMLHttpRequest();
+		http.open("POST", '/api/alias', true);
+
+		// Send the proper header information along with the request
+		http.setRequestHeader("Content-type", "application/json");
+
+		http.onreadystatechange = function() {
+			if (http.readyState == 4) {
+				data = JSON.parse(http.responseText);
+				if (http.status == 200) {
+					aliasOK = true;
+					$alias.removeClass('error');
+					$aliasSite.className = $aliasSite.className.replace(/(?:^|\s)demo(?!\S)/g, '');
+					$aliasSite.className = $aliasSite.className.replace(/(?:^|\s)error(?!\S)/g, '');
+					$aliasSite.innerHTML = '{{ if .Federation }}@<strong>' + data.data + '</strong>@{{.FriendlyHost}}{{ else }}{{.FriendlyHost}}/<strong>' + data.data + '</strong>/{{ end }}';
+				} else {
+					aliasOK = false;
+					$alias.setClass('error');
+					$aliasSite.className = 'error';
+					$aliasSite.textContent = data.error_msg;
+				}
+			}
+		}
+		http.send(JSON.stringify(params));
+	} else {
+		$aliasSite.className += ' demo';
+		$aliasSite.innerHTML = '{{ if .Federation }}@<strong>your-username</strong>@{{.FriendlyHost}}{{ else }}{{.FriendlyHost}}/<strong>your-username</strong>/{{ end }}';
+	}
+};
+$alias.on('keyup input', function() {
+	clearTimeout(typingTimer);
+	typingTimer = setTimeout(doneTyping, doneTypingInterval);
+});
+</script>
+
+{{end}}