|
- {{define "head"}}<title>Log in — {{.SiteName}}</title>
- <meta name="description" content="Log in to {{.SiteName}}.">
- <meta itemprop="description" content="Log in to {{.SiteName}}.">
- <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>Log in to {{.SiteName}}</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 }}" />
-
- <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="Login" />
- </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() {
- // 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);
- });
- doneTyping();
- </script>
- {{end}}
|