Modify invitation layout

- Make URLs easily copyable - Do not show XMPP URI
2021-01-17 19:32:02 +01:00
parent 427f73811c
commit 1b6d340d49
8 changed files with 144 additions and 59 deletions
--- a/babel.cfg
+++ b/babel.cfg
@@ -1,3 +1,4 @@
 [python: snikket_web/**.py]
 [jinja2: snikket_web/templates/**.html]
+[jinja2: snikket_web/templates/**.j2]
 extensions=jinja2.ext.autoescape,jinja2.ext.with_
--- a/snikket_web/scss/app.scss
+++ b/snikket_web/scss/app.scss
@@ -789,6 +789,21 @@ table {
 	}
 }

+.long-url-link {
+	display: block;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.link-col {
+	width: $w-l6;
+}
+
+#clipboard-result + span {
+	display: none;
+}
+

 /* linearisation / responsive stuff */

@@ -828,7 +843,6 @@ table {

 .copy-to-clipboard {
 	cursor: pointer;
-	margin-left: 0.5em;
 	font-style: normal;
 	text-decoration: none;
 }
--- a/snikket_web/templates/admin_edit_invite.html
+++ b/snikket_web/templates/admin_edit_invite.html
@@ -1,36 +1,21 @@
 {% extends "admin_app.html" %}
+{% from "library.j2" import showuri %}
 {% block head_lead %}
 {{ super() }}
 {% include "copy-snippet.html" %}
 {% endblock %}
-
-{% macro clipboard_button(caller=None) -%}
-{%- set text = caller() -%}
-<a title="Copy &quot;{{ text }}&quot; to clipboard" aria-label="Copy &quot;{{ text }}&quot; to clipboard" class="copy-to-clipboard" onclick="copy_to_clipboard(this); return false;" data-cliptext="{{ text }}" href="#">📋</a>
-{%- endmacro %}
-
-{% macro showuri(uri, caller=None) %}
-{%- if uri is none -%}
-<em>—</em>
-{%- else -%}
-<a href="{{ uri }}" target="_blank">{{ uri }}</a> {% call clipboard_button() %}{{ uri }}{% endcall %}
-{%- endif -%}
-{% endmacro %}
-
 {% block content %}
 <h1>{% trans %}View invitation{% endtrans %}</h1>
 <form method="POST">
 {{ form.csrf_token }}
 <div class="form layout-expanded">
 	<dl>
-		<dt>Created</dt>
+		<dt>{% trans %}Created{% endtrans %}</dt>
 		<dd>{{ invite.created_at | format_date }}</dd>
-		<dt>Valid until</dt>
+		<dt>{% trans %}Valid until{% endtrans %}</dt>
 		<dd>{{ invite.expires | format_date }}</dd>
-		<dt>Landing page</dt>
+		<dt>{% trans %}Link{% endtrans %}</dt>
 		<dd>{% call showuri(invite.landing_page) %}{% endcall %}</dd>
-		<dt>XMPP URI</dt>
-		<dd>{% call showuri(invite.xmpp_uri) %}{% endcall %}</dd>
 	</dl>
 	<div class="f-bbox">
 		{#- -#}
--- a/snikket_web/templates/admin_invites.html
+++ b/snikket_web/templates/admin_invites.html
@@ -1,4 +1,8 @@
 {% extends "admin_app.html" %}
+{% block head_lead %}
+{{ super() }}
+{% include "copy-snippet.html" %}
+{% endblock %}
 {% block content %}
 <h1>{% trans %}Manage invitations{% endtrans %}</h1>
 <form method="POST">{{ form.csrf_token }}
@@ -12,11 +16,14 @@
 <h2>{% trans %}Pending invitations{% endtrans %}</h2>
 {% if invites %}
 <table>
+	<col/>
+	<col/>
+	<col/>
 	<thead>
 		<tr>
-			<th>Created</th>
-			<th>Expires</th>
-			<th>Actions</th>
+			<th>{% trans %}Created{% endtrans %}</th>
+			<th>{% trans %}Valid until{% endtrans %}</th>
+			<th>{% trans %}Actions{% endtrans %}</th>
 		</tr>
 	</thead>
 	<tbody>
@@ -24,9 +31,11 @@
 		<tr>
 			<td>{{ invite.created_at | format_date }}</td>
 			<td>{{ (invite.expires - now) | format_timedelta(add_direction=True) }}</td>
-			<td>
+			<td style="white-space: nowrap;">
 				{#- -#}
-				<a href="{{ url_for(".edit_invite", id_=invite.id_) }}" class="button primary btn-more" title="{% trans %}Show invite details{% endtrans %}"><span class="a11y-only">{% trans %}Show invite details{% endtrans %}</span></a>
+				<a href="{{ url_for(".edit_invite", id_=invite.id_) }}" class="button secondary btn-more" title="{% trans %}Show invite details{% endtrans %}"><span class="a11y-only">{% trans %}Show invite details{% endtrans %}</span></a>
+				{#- -#}
+				<a class="button primary" title="{% trans %}Copy invite link to clipboard{% endtrans %}" aria-label="{% trans %}Copy invite link to clipboard{% endtrans %}" data-cliptext="{{ invite.landing_page }}" onclick="copy_to_clipboard(this); return false;"><span>📋</span></a>
 				{#- -#}
 				<button type="submit" class="secondary danger btn-delete" name="{{ form.action_revoke.name }}" value="{{ invite.id_ }}"><span class="a11y-only">{% trans %}Delete invitation{% endtrans %}</span></button>
 				{#- -#}
--- a/snikket_web/templates/copy-snippet.html
+++ b/snikket_web/templates/copy-snippet.html
@@ -36,6 +36,15 @@ function copyTextToClipboard(text, context, callback) {
 }
 /* end of https://stackoverflow.com/a/30810322/1248008 */

+var insert_first = function(parent_el, new_el) {
+	var first = parent_el.firstChild;
+	if (!first) {
+		parent_el.appendChild(new_el);
+	} else {
+		parent_el.insertBefore(new_el, first);
+	}
+}
+
 var copy_to_clipboard = function(el) {
  var text = el.dataset.cliptext;
  if (!text) {
@@ -51,12 +60,12 @@ var copy_to_clipboard = function(el) {
 	result_el.id = "clipboard-result";
 	if (success) {
 	  result_el.classList.add("success");
-	  result_el.innerText = "Copied!";
+	  result_el.innerText = "✓";
 	} else {
 	  result_el.classList.add("error");
-	  result_el.innerText = "Clipboard operation failed!";
+	  result_el.innerText = "❌";
 	}
-	el.appendChild(result_el);
+	insert_first(el, result_el);
 	setTimeout(function() {
 	  el.removeChild(result_el);
 	  el.blur();
--- a/snikket_web/templates/library.j2
+++ b/snikket_web/templates/library.j2
@@ -9,3 +9,17 @@
 <div class="avatar shim" style="background-color: {{ text_to_css(from_) }}"><span data-avatar-char="{{ char or from_[0] }}"></span></div>
 {%- endif -%}
 {%- endmacro %}
+
+{% macro clipboard_button(label=_("Copy link"), caller=None) -%}
+{%- set text = caller() -%}
+<a title="{% trans content=text %}Copy &quot;{{ content }}&quot; to clipboard{% endtrans %}" aria-label="{% trans content=text %}Copy &quot;{{ content }}&quot; to clipboard{% endtrans %}" class="copy-to-clipboard" onclick="copy_to_clipboard(this); return false;" data-cliptext="{{ text }}" href="#">{{ label }}</a>
+{%- endmacro %}
+
+{% macro showuri(uri, caller=None) %}
+{%- if uri is none -%}
+<em>—</em>
+{%- else -%}
+<div><input type="text" readonly="readonly" value="{{ uri }}"></div>
+<div>{% call clipboard_button() %}{{ uri }}{% endcall %}</div>
+{%- endif -%}
+{% endmacro %}
--- a/snikket_web/translations/de/LC_MESSAGES/messages.po
+++ b/snikket_web/translations/de/LC_MESSAGES/messages.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: SnikketWeb 0.1.0\n"
 "Report-Msgid-Bugs-To: jonas@zombofant.net\n"
-"POT-Creation-Date: 2021-01-17 20:11+0100\n"
+"POT-Creation-Date: 2021-01-17 20:12+0100\n"
 "PO-Revision-Date: 2020-03-07 16:32+0100\n"
 "Last-Translator: Jonas Schäfer <jonas@zombofant.net>\n"
 "Language: de\n"
@@ -117,11 +117,25 @@ msgstr "E-Mail-Adresse"
 msgid "Danger"
 msgstr "Gefahr"

-#: snikket_web/templates/admin_edit_invite.html:21
+#: snikket_web/templates/admin_edit_invite.html:8
 msgid "View invitation"
 msgstr "Einladung anzeigen"

-#: snikket_web/templates/admin_edit_invite.html:39
+#: snikket_web/templates/admin_edit_invite.html:13
+#: snikket_web/templates/admin_invites.html:24
+msgid "Created"
+msgstr "Erzeugt"
+
+#: snikket_web/templates/admin_edit_invite.html:15
+#: snikket_web/templates/admin_invites.html:25
+msgid "Valid until"
+msgstr "Gültig bis"
+
+#: snikket_web/templates/admin_edit_invite.html:17
+msgid "Link"
+msgstr "Link"
+
+#: snikket_web/templates/admin_edit_invite.html:24
 #: snikket_web/templates/user_passwd.html:39
 #: snikket_web/templates/user_profile.html:24
 msgid "Back"
@@ -172,7 +186,7 @@ msgid "Modify administrative user information or delete users."
 msgstr "Benutzerinformationen verändern oder Benutzer löschen."

 #: snikket_web/templates/admin_home.html:11
-#: snikket_web/templates/admin_invites.html:3
+#: snikket_web/templates/admin_invites.html:7
 msgid "Manage invitations"
 msgstr "Einladungen verwalten"

@@ -188,11 +202,11 @@ msgstr "Zurück zur Hauptseite"
 msgid "Go back to your user’s web portal page."
 msgstr "Zurück zur Startseite deines Benutzers."

-#: snikket_web/templates/admin_invites.html:6
+#: snikket_web/templates/admin_invites.html:10
 msgid "Create new invitation"
 msgstr "Neue Einladung erzeugen"

-#: snikket_web/templates/admin_invites.html:7
+#: snikket_web/templates/admin_invites.html:11
 msgid ""
 "Create a new invitation link to invite more users to your Snikket "
 "instance by clicking the button below."
@@ -200,19 +214,28 @@ msgstr ""
 "Erzeuge eine neue Einladung um mehr Benutzer auf deine Snikket-Instanz "
 "einzuladen indem du den folgenden Button klickst."

-#: snikket_web/templates/admin_invites.html:12
+#: snikket_web/templates/admin_invites.html:16
 msgid "Pending invitations"
 msgstr "Ausstehende Einladungen"

-#: snikket_web/templates/admin_invites.html:29
+#: snikket_web/templates/admin_invites.html:26
+#: snikket_web/templates/admin_users.html:18
+msgid "Actions"
+msgstr "Aktionen"
+
+#: snikket_web/templates/admin_invites.html:36
 msgid "Show invite details"
 msgstr "Einladungsdetails anzeigen"

-#: snikket_web/templates/admin_invites.html:31
+#: snikket_web/templates/admin_invites.html:38
+msgid "Copy invite link to clipboard"
+msgstr "Einladungslink kopieren"
+
+#: snikket_web/templates/admin_invites.html:40
 msgid "Delete invitation"
 msgstr "Einladung löschen"

-#: snikket_web/templates/admin_invites.html:39
+#: snikket_web/templates/admin_invites.html:48
 msgid "Currently, there are no pending invitations."
 msgstr "Derzeit gibt es keine ausstehenden Einladungen."

@@ -220,15 +243,20 @@ msgstr "Derzeit gibt es keine ausstehenden Einladungen."
 msgid "Phone number"
 msgstr "Telefonnummer"

-#: snikket_web/templates/admin_users.html:18
-msgid "Actions"
-msgstr "Aktionen"
-
 #: snikket_web/templates/app.html:20 snikket_web/templates/login.html:36
 #, python-format
 msgid "A <a href=\"%(about_url)s\">Snikket</a> server"
 msgstr "Ein <a href=\"%(about_url)s\">Snikket</a>-Server"

+#: snikket_web/templates/library.j2:13
+msgid "Copy link"
+msgstr "Link kopieren"
+
+#: snikket_web/templates/library.j2:15
+#, python-format
+msgid "Copy &quot;%(content)s&quot; to clipboard"
+msgstr "&quot;%(content)s&quot; kopieren"
+
 #: snikket_web/templates/login.html:5
 msgid "Snikket Login"
 msgstr "Snikket Anmeldung"
@@ -339,6 +367,3 @@ msgstr ""
 msgid "Apply"
 msgstr "Übernehmen"

-#~ msgid "none"
-#~ msgstr "keiner"
-
--- a/snikket_web/translations/en/LC_MESSAGES/messages.po
+++ b/snikket_web/translations/en/LC_MESSAGES/messages.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2021-01-17 20:11+0100\n"
+"POT-Creation-Date: 2021-01-17 20:12+0100\n"
 "PO-Revision-Date: 2020-03-07 16:50+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: en\n"
@@ -119,11 +119,25 @@ msgstr "Address"
 msgid "Danger"
 msgstr ""

-#: snikket_web/templates/admin_edit_invite.html:21
+#: snikket_web/templates/admin_edit_invite.html:8
 msgid "View invitation"
 msgstr ""

-#: snikket_web/templates/admin_edit_invite.html:39
+#: snikket_web/templates/admin_edit_invite.html:13
+#: snikket_web/templates/admin_invites.html:24
+msgid "Created"
+msgstr ""
+
+#: snikket_web/templates/admin_edit_invite.html:15
+#: snikket_web/templates/admin_invites.html:25
+msgid "Valid until"
+msgstr ""
+
+#: snikket_web/templates/admin_edit_invite.html:17
+msgid "Link"
+msgstr ""
+
+#: snikket_web/templates/admin_edit_invite.html:24
 #: snikket_web/templates/user_passwd.html:39
 #: snikket_web/templates/user_profile.html:24
 msgid "Back"
@@ -170,7 +184,7 @@ msgid "Modify administrative user information or delete users."
 msgstr ""

 #: snikket_web/templates/admin_home.html:11
-#: snikket_web/templates/admin_invites.html:3
+#: snikket_web/templates/admin_invites.html:7
 msgid "Manage invitations"
 msgstr ""

@@ -186,29 +200,38 @@ msgstr ""
 msgid "Go back to your user’s web portal page."
 msgstr ""

-#: snikket_web/templates/admin_invites.html:6
+#: snikket_web/templates/admin_invites.html:10
 msgid "Create new invitation"
 msgstr ""

-#: snikket_web/templates/admin_invites.html:7
+#: snikket_web/templates/admin_invites.html:11
 msgid ""
 "Create a new invitation link to invite more users to your Snikket "
 "instance by clicking the button below."
 msgstr ""

-#: snikket_web/templates/admin_invites.html:12
+#: snikket_web/templates/admin_invites.html:16
 msgid "Pending invitations"
 msgstr ""

-#: snikket_web/templates/admin_invites.html:29
+#: snikket_web/templates/admin_invites.html:26
+#: snikket_web/templates/admin_users.html:18
+msgid "Actions"
+msgstr ""
+
+#: snikket_web/templates/admin_invites.html:36
 msgid "Show invite details"
 msgstr ""

-#: snikket_web/templates/admin_invites.html:31
+#: snikket_web/templates/admin_invites.html:38
+msgid "Copy invite link to clipboard"
+msgstr ""
+
+#: snikket_web/templates/admin_invites.html:40
 msgid "Delete invitation"
 msgstr ""

-#: snikket_web/templates/admin_invites.html:39
+#: snikket_web/templates/admin_invites.html:48
 msgid "Currently, there are no pending invitations."
 msgstr ""

@@ -216,15 +239,20 @@ msgstr ""
 msgid "Phone number"
 msgstr ""

-#: snikket_web/templates/admin_users.html:18
-msgid "Actions"
-msgstr ""
-
 #: snikket_web/templates/app.html:20 snikket_web/templates/login.html:36
 #, python-format
 msgid "A <a href=\"%(about_url)s\">Snikket</a> server"
 msgstr "A <a href=\"%(about_url)s\">Snikket</a> server"

+#: snikket_web/templates/library.j2:13
+msgid "Copy link"
+msgstr ""
+
+#: snikket_web/templates/library.j2:15
+#, python-format
+msgid "Copy &quot;%(content)s&quot; to clipboard"
+msgstr ""
+
 #: snikket_web/templates/login.html:5
 msgid "Snikket Login"
 msgstr "Snikket Login"