{{define "head"}}<title>Finish Creating Account &mdash; {{.SiteName}}</title>
<style>input{margin-bottom:0.5em;}</style>
<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="tight content-container">
	<h1>Finish creating account</h1>

	{{if .Flashes}}<ul class="errors">
		{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}
	</ul>{{end}}

    <div id="billing">
	    <form action="/oauth/signup" method="post" style="text-align: center;margin-top:1em;" onsubmit="return disableSubmit()">
	        <input type="hidden" name="access_token" value="{{ .AccessToken }}" />
	        <input type="hidden" name="token_username" value="{{ .TokenUsername }}" />
	        <input type="hidden" name="token_alias" value="{{ .TokenAlias }}" />
	        <input type="hidden" name="token_email" value="{{ .TokenEmail }}" />
	        <input type="hidden" name="token_remote_user" value="{{ .TokenRemoteUser }}" />
	        <input type="hidden" name="provider" value="{{ .Provider }}" />
	        <input type="hidden" name="client_id" value="{{ .ClientID }}" />
	        <input type="hidden" name="signature" value="{{ .TokenHash }}" />
	        {{if .InviteCode}}<input type="hidden" name="invite_code" value="{{ .InviteCode }}" />{{end}}

            <dl class="billing">
                <label>
                    <dt>Display Name</dt>
                    <dd>
                        <input type="text" style="width: 100%; box-sizing: border-box;" name="alias" placeholder="Name"{{ if .Alias }} value="{{.Alias}}"{{ end }} />
                    </dd>
                </label>
                <label>
                    <dt>Username</dt>
					<dd>
		<input type="text" id="username" name="username" style="width: 100%; box-sizing: border-box;" placeholder="Username" value="{{.LoginUsername}}" /><br />
		{{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</dt>
                    <dd>
<input type="text" name="email" style="width: 100%; box-sizing: border-box;" placeholder="Email"{{ if .Email }} value="{{.Email}}"{{ end }} />
                    </dd>
                </label>
                <dt>
                    <input type="submit" id="btn-login" value="Next" />
                </dt>
            </dl>
        </form>
    </div>

<script type="text/javascript" src="/js/h.js"></script>
<script type="text/javascript">
// Copied from signup.tmpl
// NOTE: this element is named "alias" on signup.tmpl and "username" here
var $alias = H.getEl('username');

function disableSubmit() {
    // Validate input
    if (!aliasOK) {
        var $a = $alias;
        $a.el.className = 'error';
        $a.el.focus();
        $a.el.scrollIntoView();
        return false;
    }

	var $btn = document.getElementById("btn-login");
	$btn.value = "Logging in...";
	$btn.disabled = true;
	return true;
}

// Copied from signup.tmpl
var $aliasSite = document.getElementById('alias-site');
var aliasOK = true;
var typingTimer;
var doneTypingInterval = 750;
var doneTyping = function(genID) {
    // 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 {
                    if (genID === true) {
                        $alias.el.value = alias + "-" + randStr(4);
                        doneTyping();
                        return;
                    }
                    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);
});
function randStr(len) {
    var res = '';
    var chars = '23456789bcdfghjklmnpqrstvwxyz';
    for (var i=0; i<len; i++) {
        res += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return res;
}
doneTyping(true);
</script>
{{end}}