178 lines
7.6 KiB
HTML
178 lines
7.6 KiB
HTML
{% load i18n %}
|
|
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="zh" class="login-page">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta property="og:title" content="{{ site_name }}">
|
|
<meta name="description"
|
|
property="og:description"
|
|
content="{{ site_description }}">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="{{ site_url }}">
|
|
<meta property="og:image" content="{{ site_logo }}">
|
|
<meta property="og:site_name" content="{{ site_name }}">
|
|
<title>{{ site_name }} - {% trans 'Register' %} / {% trans "Login" %}</title>
|
|
{% include "common_libs.html" %}
|
|
<meta name="robots" content="noindex">
|
|
<script src="{{ cdn_url }}/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
|
|
<script src="{{ cdn_url }}/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
if (!window.htmx || !window._hyperscript) return; // disable login if cash, htmx or hyperscript not loaded
|
|
$('.delayed').remove(); $('#loginButton').prop("disabled", false);
|
|
});
|
|
</script>
|
|
<style type="text/css">
|
|
.delayed {
|
|
animation: 10s _fadeIn;
|
|
animation-fill-mode: forwards;
|
|
visibility: hidden;
|
|
}
|
|
@keyframes _fadeIn {
|
|
99% {
|
|
visibility: hidden;
|
|
}
|
|
100% {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<article>
|
|
<header style="text-align: center;">
|
|
<img src="{{ site_logo }}" class="logo" alt="logo">
|
|
</header>
|
|
<div>
|
|
{% if request.user.is_authenticated %}
|
|
<a href="{{ request.session.next_url | default:'/' }}" class="button">{% trans 'back to your home page.' %}</a>
|
|
{% else %}
|
|
<form action="{% url 'users:connect' %}" method="post">
|
|
{% csrf_token %}
|
|
{% if allow_any_site %}
|
|
<input required
|
|
name="email"
|
|
id="email"
|
|
type="email"
|
|
placeholder="{% trans "email address" %}"
|
|
disabled
|
|
autocomplete="email"
|
|
style="display:none" />
|
|
<input required
|
|
name="domain"
|
|
id="domain"
|
|
autofocus
|
|
pattern="(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,})"
|
|
placeholder="{% trans "domain name of your instance, e.g. mastodon.social" %}"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
spellcheck="false" />
|
|
<div role="group" style="width:100%">
|
|
<select style="width:max-content"
|
|
required
|
|
onchange="switch_login()"
|
|
name="method">
|
|
<option disabled value="">{% trans "Login Method" %}</option>
|
|
<option selected value="fedi">{% trans "Fediverse Identity" %}</option>
|
|
<option value="email">{% trans "Email Verification" %}</option>
|
|
</select>
|
|
<input style="width:100%"
|
|
type='submit'
|
|
value="{% trans 'Register' %} / {% trans "Login" %}"
|
|
id="loginButton"
|
|
disabled />
|
|
</div>
|
|
{{ sites|json_script:"sites-data" }}
|
|
<script>
|
|
function switch_login(){
|
|
if ($('select').val() == 'email') {
|
|
$('#domain').prop("disabled", true);
|
|
$('#domain').hide();
|
|
$('#email').prop("disabled", false);
|
|
$('#email').show();
|
|
$('#email')[0].focus();
|
|
//$('#domain').val('');
|
|
$('#fedi-tips').hide();
|
|
$('#email-tips').show();
|
|
} else {
|
|
$('#email').prop("disabled", true);
|
|
$('#email').hide();
|
|
$('#domain').prop("disabled", false);
|
|
$('#domain').show();
|
|
$('#domain')[0].focus();
|
|
//$('#email').val('');
|
|
$('#fedi-tips').show();
|
|
$('#email-tips').hide();
|
|
}
|
|
}
|
|
const sites = JSON.parse(document.getElementById('sites-data').textContent);
|
|
const autoCompleteJS = new autoComplete({ placeHolder: "{% trans "select or input domain name of your instance (excl. @)" %}",
|
|
selector: "#domain",
|
|
data: {
|
|
src: sites
|
|
},
|
|
submit: true,
|
|
resultsList: {
|
|
tabSelect: true,
|
|
maxResults: 10
|
|
},
|
|
events: {
|
|
input: {
|
|
selection: (event) => {
|
|
const selection = event.detail.selection.value;
|
|
autoCompleteJS.input.value = selection;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
var d = Cookies.get('mastodon_domain');
|
|
if (d) {
|
|
if (d == "@") {
|
|
$('select').val('email');
|
|
switch_login()
|
|
} else {
|
|
$('#domain').val(Cookies.get('mastodon_domain'));
|
|
}
|
|
}
|
|
</script>
|
|
{% else %}
|
|
<select name="domain">
|
|
{% for site in sites %}<option value="{{ site }}">@{{ site }}</option>{% endfor %}
|
|
</select>
|
|
<input type='submit' value="{% trans 'Authorize' %}" id="loginButton" />
|
|
{% endif %}
|
|
{% if invite_status %}
|
|
<small>
|
|
{% if invite_status == 1 %}
|
|
<i class="fa-solid fa-circle-check"></i> {% trans "Valid invitation code, please login or register." %}
|
|
{% elif invite_status == -1 %}
|
|
<i class="fa-solid fa-person-circle-question"></i> {% trans "Please use invitation link to register a new account; existing user may login." %}
|
|
{% elif invite_status == -2 %}
|
|
<i class="fa-solid fa-circle-xmark"></i> {% trans "Invitation code invalid or expired." %}
|
|
{% endif %}
|
|
</small>
|
|
{% endif %}
|
|
<small id="fedi-tips">
|
|
{% blocktrans %}Select Email Verification if you don't have a <a href="https://joinmastodon.org/servers" target="_blank">Fediverse account</a>.{% endblocktrans %}
|
|
</small>
|
|
<small id="email-tips" style="display:none;">{% trans "Enter your email address to register or sign in if you don't have a Fediverse account, or have associated your email with your Fediverse account before; otherwise please sign in via Fediverse, and associate your email address once logged in." %}</small>
|
|
</form>
|
|
{% endif %}
|
|
<small class="hide_unless_alter_domain">
|
|
<br>
|
|
{% blocktrans %}You are visiting an alternative domain for {{ site_name }}, please always use <a href="{{ site_url }}{{ request.get_full_path }}">original version</a> if possible.{% endblocktrans %}
|
|
</small>
|
|
<div class="delayed">{% trans "Loading timed out, please check your network (VPN) settings." %}</div>
|
|
</div>
|
|
</article>
|
|
<footer>
|
|
<br>
|
|
<small>
|
|
{% blocktrans %}Using this site implies consent of our <a href="/pages/rules/">rules</a> and <a href="/pages/terms/">terms</a>, and use of cookies to provide necessary functionality.{% endblocktrans %}
|
|
</small>
|
|
</footer>
|
|
</body>
|
|
</html>
|