snikket-web-portal/snikket_web/templates/invite_view.html

{% extends "invite.html" %}
{% set onload = "onload();" %}
{% set body_id = "invite" %}
{% from "library.j2" import action_button %}
{% block head_lead %}
<title>{% trans site_name=config["SITE_NAME"] %}Invite to {{ site_name }} | Snikket{% endtrans %}</title>
<script async type="text/javascript" src="{{ url_for("static", filename="js/invite-magic.js") }}"></script>
<script async type="text/javascript" src="{{ url_for("static", filename="js/qrcode.min.js") }}"></script>
<link rel="alternate" href="{{ invite.xmpp_uri }}">
{% endblock %}
{% block content %}
<div class="elevated box el-3">
	<h1>{% trans site_name=config["SITE_NAME"] %}Invite to {{ site_name }}{% endtrans %}</h1>
	<div class="powered-by">{% trans logo_url=url_for("static", filename="img/snikket-logo-text.svg") %}Powered by <img src="{{ logo_url }}" alt="Snikket">{% endtrans %}</div>
	{%- if invite.inviter -%}
	<p>{% trans site_name=config["SITE_NAME"], inviter_name=invite.inviter %}You have been invited to chat with {{ inviter_name }} using Snikket, a secure, privacy-friendly chat app on {{ site_name }}.{% endtrans %}</p>
	{%- else -%}
	<p>{% trans site_name=config["SITE_NAME"] %}You have been invited to chat on {{ site_name }} using Snikket, a secure, privacy-friendly chat app.{% endtrans %}</p>
	{%- endif -%}
	<h2>{% trans %}Get started{% endtrans %}</h2>
{%- if apple_store_url -%}
	<p>{% trans %}Install the Snikket App on your Android or iOS device.{% endtrans %}</p>
{%- else -%}
	<p>{% trans ios_info_url="https://snikket.org/faq/#is-there-an-ios-app" %}Install the Snikket App on your Android device (<a href="{{ ios_info_url }}" rel="noopener noreferrer" target="_blank">iOS coming soon!</a>).{% endtrans %}</p>
{%- endif -%}
	<div class="install-buttons">
		<ul>
			<li><a href="{{ play_store_url }}"><img alt='{% trans %}Get it on Google Play{% endtrans %}' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' class="play"/></a></li>
{%- if apple_store_url -%}
			<li><a href="{{ apple_store_url }}" class="popover" data-popover-id="apple-popover"><img alt='{% trans %}Download on the App Store{% endtrans %}' src="{{ apple_store_badge() }}" class="apple"></a></li>
{%- endif -%}
			<li><a href="{{ f_droid_url }}" class="popover" data-popover-id="fdroid-popover"><img alt='{% trans %}Get it on F-Droid{% endtrans %}' src='{{ url_for('static', filename='img/f-droid-badge.png') }}' class="fdroid"/></a></li>
		</ul>
		{%- call standard_button("qrcode", "#qr-modal", class="primary", onclick="open_modal(this); return false;") -%}
			{% trans %}Send to mobile device{% endtrans %}
		{%- endcall -%}
	</div>
	<p>{% trans %}After installation the app should automatically open and prompt you to create an account. If not, simply click the button below.{% endtrans %}</p>
	<h3>{% trans %}App already installed?{% endtrans %}</h3>
	{%- call standard_button("exit_to_app", invite.xmpp_uri, class="secondary") -%}
		{% trans %}Open the app{% endtrans %}
	{%- endcall -%}
	<p class="weak">{% trans %}This button works only if you have the app installed already!{% endtrans %}</p>

	<h2>{% trans %}Alternatives{% endtrans %}</h2>
	<p>{% trans register_url=url_for(".register", id_=invite_id) %}You can connect to Snikket using any XMPP-compatible software. If the button above does not work with your app, you may need to <a href="{{ register_url }}">register an account manually</a>.{% endtrans %}</p>
</div>
<div id="qr-modal" class="modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;" onclick="close_modal(this); return false;">
	<div role="document" class="elevated box el-2" onclick="event.stopPropagation();">
		<header class="modal-title">
			{#- -#}
			<span>{% trans %}Scan invite code{% endtrans %}</span>
			{#- -#}
			{%- call action_button("close", "#", onclick="close_modal(this.parentNode.parentNode.parentNode); return false;", class="tertiary") -%}
				{% trans %}Close{% endtrans %}
			{%- endcall -%}
		</header>
		<p>{% trans %}You can transfer this invite to your mobile device by scanning a code with your camera. You can use either a QR scanner app or the Snikket app itself.{% endtrans %}</p>
		<div id="qr-invite-page" data-qrdata="{{ url_for(".view", id_=invite_id, _external=True, _scheme="https") }}" class="qr"></div>
		{#- -#}
		{%- call standard_button("close", "#", onclick="close_modal(this.parentNode.parentNode); return false;", class="primary") -%}
			{% trans %}Close{% endtrans %}
		{%- endcall -%}
	</div>
</div>
{%- if apple_store_url -%}
<div id="apple-popover" class="modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;" onclick="close_modal(this); return false;">
	<div role="document" class="elevated box el-2" onclick="event.stopPropagation();">
		<header class="modal-title">
			{#- -#}
			<span>{% trans %}Install on iOS{% endtrans %}</span>
			{#- -#}
			{%- call action_button("close", "#", onclick="close_modal(this.parentNode.parentNode.parentNode); return false;", class="tertiary") -%}
				{% trans %}Close{% endtrans %}
			{%- endcall -%}
		</header>
		<p>{% trans %}After downloading Snikket from the App Store, you have to return to this invite link and tap on "Open the app" to proceed.{% endtrans %}</p>
		<ol>
			<li><p>{% trans %}First download Snikket from the App Store using the button below:{% endtrans %}</p>
			<p><a href="{{ apple_store_url }}"><img alt='{% trans %}Download on the App Store{% endtrans %}' src="{{ apple_store_badge() }}" class="apple"></a></p>
			<li><p>{% trans %}After the installation is complete, you can return to this page and tap the "Open the app" button to continue with the setup:{% endtrans %}</p>
			<p>
			{%- call standard_button("exit_to_app", invite.xmpp_uri, class="primary") -%}
				{% trans %}Open the app{% endtrans %}
			{%- endcall -%}
			</p></li>
		</ol>
		{#- -#}
		{%- call standard_button("close", "#", onclick="close_modal(this.parentNode.parentNode); return false;", class="secondary") -%}
			{% trans %}Close{% endtrans %}
		{%- endcall -%}
	</div>
</div>
{%- endif -%}
<div id="fdroid-popover" class="modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;" onclick="close_modal(this); return false;">
	<div role="document" class="elevated box el-2" onclick="event.stopPropagation();">
		<header class="modal-title">
			{#- -#}
			<span>{% trans %}Install via F-Droid{% endtrans %}</span>
			{#- -#}
			{%- call action_button("close", "#", onclick="close_modal(this.parentNode.parentNode.parentNode); return false;", class="tertiary") -%}
				{% trans %}Close{% endtrans %}
			{%- endcall -%}
		</header>
		<p>{% trans %}After installing Snikket via F-Droid, you have to return to this invite link and tap on "Open the app" to proceed.{% endtrans %}</p>
		<ol>
			<li><p>{% trans %}First install Snikket from F-Droid using the button below:{% endtrans %}</p>
			<p><a href="{{ f_droid_url }}"><img alt='{% trans %}Install via F-Droid{% endtrans %}' src='{{ url_for('static', filename='img/f-droid-badge.png') }}' class="fdroid"/></a></p></li>
			<li><p>{% trans %}After the installation is complete, you can return to this page and tap the "Open the app" button to continue with the setup:{% endtrans %}</p>
			<p>
			{%- call standard_button("exit_to_app", invite.xmpp_uri, class="primary") -%}
				{% trans %}Open the app{% endtrans %}
			{%- endcall -%}
			</p></li>
		</ol>
		{#- -#}
		{%- call standard_button("close", "#", onclick="close_modal(this.parentNode.parentNode); return false;", class="secondary") -%}
			{% trans %}Close{% endtrans %}
		{%- endcall -%}
	</div>
</div>
<script type="text/javascript">
	var catch_popover = function() {
		open_modal(this);
		return false;
	}

	var onload = function() {
		apply_qr_code(document.getElementById("qr-invite-page"));
		apply_qr_code(document.getElementById("qr-uri"));
		var popover_as = document.getElementsByClassName("popover");
		for (var i = 0; i < popover_as.length; ++i) {
			var a = popover_as[i];
			a.onclick = catch_popover;
			a.href = "#" + a.dataset.popoverId;
		}
	};
</script>
{% endblock %}