mirror of
https://github.com/writeas/writefreely
synced 2024-12-08 14:35:44 +01:00
177 lines
4.6 KiB
Cheetah
177 lines
4.6 KiB
Cheetah
|
{{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">
|
||
|
<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>
|
||
|
</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}}
|