{{define "head"}} <title>Sign up — {{.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"> {{template "oauth-buttons" .}} {{if not .DisablePasswordAuth}} <form action="/auth/signup" method="POST" id="signup-form" onsubmit="return signup()"> <input type="hidden" name="invite_code" value="{{.Invite}}" /> <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>Password</dt> <dd><input type="password" id="password" name="pass" autocomplete="new-password" placeholder="" tabindex="2" style="width: 100%; box-sizing: border-box;" /></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> {{end}} </div> {{ end }} </div> </div> <script type="text/javascript" src="/js/h.js"></script> <script type="text/javascript"> function signup() { var $pass = document.getElementById('password'); // Validate input if (!aliasOK) { var $a = $alias; $a.el.className = 'error'; $a.el.focus(); $a.el.scrollIntoView(); return false; } if ($pass.value == "") { var $a = $pass; $a.className = 'error'; $a.focus(); $a.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}}