Update assembly_badge_token view

Improve the explanation what a badge token is and how it can be used.

src/backoffice/locale/de/LC_MESSAGES/django.po

@@ -240,6 +240,27 @@ msgstr "Redeem Token"
 msgid "BadgeToken__Badge_back__button %(badge)s"
 msgstr "Zurück zu %(badge)s"
 
+msgid "BadgeToken__introduction"
+msgstr "Mit diesem Token kannst du Teilnehmenden eine Badge verleihen. Dazu hast du mehrere Möglichkeiten. Um die Informationen im aktuellen Design anzuzeigen folge diesem Link:"
+
+msgid "BadgeToken__redeem__info_link"
+msgstr "Auf der Website"
+
+msgid "BadgeToken__redeem_link_label"
+msgstr "Einlöse-Link"
+
+msgid "BadgeToken__redeem_link__introduction"
+msgstr "Mit diesem Link können sich Teilnehmende die Badge holen (wird z.B. auch im QR Code verwendet)"
+
+msgid "BadgeToken__redeem_token_label"
+msgstr "Einlöse-Token"
+
+msgid "BadgeToken__redeem_token__introduction"
+msgstr "Mit diesem Token können sich Benutzer die Badge in ihrem Profile hinzufügen"
+
+msgid "BadgeToken__no_qr__introduction"
+msgstr "Der QR Code für dieses Token konnte nicht gefunden werden, bitte speicher das Token um einen neuen zu generieren."
+
 msgid "BadgeToken__token__help"
 msgstr "Mit diesem Token können sich Teilnehmende das Badge holen!"
 
@@ -252,12 +273,6 @@ msgstr "Anzahl der Einlösungen"
 msgid "BadgeToken__redeemed_count__help"
 msgstr "Wie viele Teilnehmende haben sich das Badge mit diesem Token geholt?"
 
-msgid "BadgeToken__show_badge_redeem_page"
-msgstr "Einlöseseite anzeigen"
-
-msgid "BadgeToken__no_qr__introduction"
-msgstr "Der QR Code für dieses Token konnte nicht gefunden werden, bitte speicher das Token um einen neuen zu generieren."
-
 msgid "Badges"
 msgstr "Badges"
 

src/backoffice/locale/en/LC_MESSAGES/django.po

@@ -240,6 +240,27 @@ msgstr "Redeem Token"
 msgid "BadgeToken__Badge_back__button %(badge)s"
 msgstr "Back to %(badge)s"
 
+msgid "BadgeToken__introduction"
+msgstr "You can use this token to award participants a badge. You have several options. To display the information in the current design, follow this link:"
+
+msgid "BadgeToken__redeem__info_link"
+msgstr "On the website"
+
+msgid "BadgeToken__redeem_link_label"
+msgstr "Redemption link"
+
+msgid "BadgeToken__redeem_link__introduction"
+msgstr "Participants can use this link to get the badge (also used in the QR code, for example)"
+
+msgid "BadgeToken__redeem_token_label"
+msgstr "Redemption token"
+
+msgid "BadgeToken__redeem_token__introduction"
+msgstr "With this token, users can add the badge to their profile"
+
+msgid "BadgeToken__no_qr__introduction"
+msgstr "The QR code for this token could not be found, please save the token to generate a new one."
+
 msgid "BadgeToken__token__help"
 msgstr "Participants can use this token to get the badge!"
 
@@ -252,12 +273,6 @@ msgstr "Number of redemptions"
 msgid "BadgeToken__redeemed_count__help"
 msgstr "How many participants got the badge with this token?"
 
-msgid "BadgeToken__show_badge_redeem_page"
-msgstr "Link to redeem page"
-
-msgid "BadgeToken__no_qr__introduction"
-msgstr "The QR code for this token could not be found, please save the token to generate a new one."
-
 msgid "Badges"
 msgstr "badges"
 
@@ -2253,3 +2268,6 @@ msgstr "StaticPage and all corresponding revisions deleted."
 
 msgid "StaticPageRevision__deleted"
 msgstr "StaticPageRevision deleted."
+
+#~ msgid "BadgeToken__show_badge_redeem_page"
+#~ msgstr "Link to redeem page"

src/backoffice/templates/backoffice/assembly_badge_token.html

@@ -25,7 +25,49 @@
         </div>
         <div class="card-body">
           <div class="row">
-            <div class="{% if create_token_form.create %}col-md-12{% else %}col-md-10{% endif %}">
+
+            {% if not create_token_form.create %}
+              <div class="col-md-12">
+                <div class="row mx-1 alert alert-info">
+                  <div class="col-md-10">
+
+                    <div class="mb-2">
+                      {% trans "BadgeToken__introduction" %} <a href="{% hub_absolute 'plainui:badge_token' pk=create_token_form.instance.id %}">{% trans "BadgeToken__redeem__info_link" %}</a>
+                    </div>
+                    <div class="input-group mb-1">
+                      <span class="input-group-text" id="redeem_link_label">{% trans "BadgeToken__redeem_link_label" %}</span>
+                      <input type="text"
+                             class="form-control read-only select-all"
+                             readonly
+                             id="redeem_link"
+                             value="{% hub_absolute 'plainui:manage_badges' redeem_token=create_token_form.instance.token i18n=False %}">
+                    </div>
+                    <div id="redeem_link_help" class="form-text mb-2">{% trans "BadgeToken__redeem_link__introduction" %}</div>
+                    <div class="input-group mb-1">
+                      <span class="input-group-text" id="redeem_token_label">{% trans "BadgeToken__redeem_token_label" %}</span>
+                      <input type="text"
+                             class="form-control read-only select-all"
+                             readonly
+                             id="redeem_token"
+                             value="{{ create_token_form.instance.token }}">
+                    </div>
+                    <div id="redeem_token_help" class="form-text">{% trans "BadgeToken__redeem_token__introduction" %}</div>
+                  </div>
+                  <div class="col-md-2">
+                    {% if create_token_form.instance.has_qr_code %}
+                      <div class="float-end bg-white">
+                        <img class="w-100"
+                             src="{{ create_token_form.instance.qr_full.url }}"
+                             alt="Full QR Code to redeem token">
+                      </div>
+                    {% else %}
+                      <div class="container text-bg-danger">{% trans "BadgeToken__no_qr__introduction" %}</div>
+                    {% endif %}
+                  </div>
+                </div>
+              </div>
+            {% endif %}
+            <div class="col-md-12">
               <form class="form" action="" method="post" enctype="multipart/form-data">
                 {% csrf_token %}
                 {% if not create_token_form.create %}
@@ -63,24 +105,19 @@
                 </div>
               </form>
             </div>
-            {% if not create_token_form.create %}
-              <div class="col-md-2 d-flex flex-column">
-                {% if create_token_form.instance.has_qr_code %}
-                  <div>
-                    <img class="w-100"
-                         src="{{ create_token_form.instance.qr_full.url }}"
-                         alt="Full QR Code to redeem token">
-                    <a href="{% hub_absolute 'plainui:badge_token' pk=create_token_form.instance.id %}"
-                       class="btn btn-info">{% trans "BadgeToken__show_badge_redeem_page" %}</a>
-                  </div>
-                {% else %}
-                  <div class="container text-bg-danger">{% trans "BadgeToken__no_qr__introduction" %}</div>
-                {% endif %}
-              </div>
-            {% endif %}
           </div>
         </div>
       </div>
     </div>
   </div>
 {% endblock content %}
+
+{% block scripts %}
+  <scripts nonce="{{ request.csp_nonce }}">
+$(document).ready(function() {
+$('.select-all').click(function() {
+$(this).select();
+});
+});
+  </scripts>
+{% endblock scripts %}