lib.itmens/users/templates/users/login.html
2024-05-20 12:00:17 -04:00

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>