Merge ~roadmr/canonical-identity-provider:tweak-username-instructions-positioning into canonical-identity-provider:master

[Daniel Manrique]

Visual tweaks to username format instructions.

* move instructions below the field
* fix css, nesting and styling
* simplify length instructions

With help from web team (hatch / blr).

https://people.canonical.com/~roadmr/explanation-tweak-1.png

(screenshot doesn't show the new instructions which state "between 3 and 32 characters" instead of "more than 3 and fewer than 32" (it's more concise).

[Maximiliano Bertacchini (maxiberta)]

+1

review: Approve

diff --git a/src/webui/templates/registration/_create_account_form.html b/src/webui/templates/registration/_create_account_form.html
index dd3eebb..8dc70de 100644
--- a/src/webui/templates/registration/_create_account_form.html
+++ b/src/webui/templates/registration/_create_account_form.html
@@ -37,23 +37,23 @@
 
   {% if create_form.username %}
   <div class="p-form-validation{% if create_form.username.errors %} is-error{% endif %} username-input">
-    <label for="id_username">{% trans "Username" %}
-    {% ifswitch USERNAME_SHOW_REQUIREMENTS %}
-    {% if not create_form.username.errors %}
-    <ul><li class="p-form-validation__message">{% trans "More than 3 and less than 32 characters long." %}</li>
-        <li class="p-form-validation__message">{% trans "Allowed: lowercase letters, numbers and hyphens." %}</li>
-        <li class="p-form-validation__message">{% trans "<strong>NOT</strong> allowed: CAPITAL letters, special characters." %}</li>
-        <li class="p-form-validation__message">{% trans "<strong>NOT</strong> allowed: only numbers or consecutive hyphens." %}</li>
-    </ul>
-    {% endif %}
-    {% endifswitch %}
-    </label>
+    <label for="id_username">{% trans "Username" %}</label>
     {% if create_form.username.errors %}
     <p class="p-form-validation__message" style="font-style: italic">
       <strong>Error:</strong> {{ create_form.username.errors|first }}
     </p>
     {% endif %}
     {{ create_form.username }}
+    {% ifswitch USERNAME_SHOW_REQUIREMENTS %}
+    {% if not create_form.username.errors %}
+    <ul class="p-form-help-text">
+        <li style="font-size: 0.75rem">{% trans "Between 3 and 32 characters long." %}</li>
+        <li style="font-size: 0.75rem">{% trans "Allowed: lowercase letters, numbers and hyphens." %}</li>
+        <li style="font-size: 0.75rem">{% trans "<strong>NOT</strong> allowed: CAPITAL letters, special characters." %}</li>
+        <li style="font-size: 0.75rem">{% trans "<strong>NOT</strong> allowed: only numbers or consecutive hyphens." %}</li>
+    </ul>
+    {% endif %}
+    {% endifswitch %}
   </div>
   {% endif %}
   {% include "vanilla/widgets/passwords.html" with edit_account_labels=1 fields=create_form %}