Add validation for the OTP field on the login page

Fixes: #1152
Signed-off-by: Aurélien Bompard <[email protected]>

news/1152.feature

@@ -0,0 +1 @@
+Add validation for the OTP field on the login page

noggin/templates/_login_form.html

@@ -1,24 +1,41 @@
 {% import '_form_macros.html' as macros %}
-<form action="{{ url_for('.root') }}{% if request.args.get('next') %}?next={{ request.args.get('next') | urlencode }}{% endif %}" method="post" novalidate>
+<form
+  action="{{ url_for('.root') }}{% if request.args.get('next') %}?next={{ request.args.get('next') | urlencode }}{% endif %}"
+  method="post"
+>
   {{ login_form.csrf_token }}
   <div class="card-body">
     <div class="form-group">
-      {{ macros.with_errors(login_form.username, class="validate", placeholder="Username", tabindex="1", label=False) }}
+      {{ macros.with_errors(login_form.username, class="validate",
+      placeholder="Username", tabindex="1", label=False) }}
     </div>
     <div class="form-group">
-      {{ macros.with_errors(login_form.password, class="validate", placeholder="Password", tabindex="2", label=False) }}
+      {{ macros.with_errors(login_form.password, class="validate",
+      placeholder="Password", tabindex="2", label=False) }}
     </div>
     <div class="form-group mb-0">
-      {{ macros.with_errors(login_form.otp, class="validate", placeholder="One-Time Password (if you have one)", tabindex="3", autocomplete="off", label=False) }}
+      {{ macros.with_errors(login_form.otp, class="validate",
+      placeholder="One-Time Password (if you have one)", tabindex="3",
+      autocomplete="off", label=False, pattern="\\d{6}") }}
     </div>
     <div class="form-group mb-0 text-right">
-    {% if lost_otp_token is not defined %}
-      <small><a href="{{ url_for('.forgot_password_ask') }}">{{ _("Forgot Password?") }}</a></small>
-    {% else %}
-      <small><a href="{{ url_for('.forgot_password_ask') }}">{{ _("Forgot Password or OTP?") }}</a></small>
-    {% endif %}
-     <span class="text-muted"> | </span>
-    <small><a href="{{ url_for('.otp_sync') }}">{{ _("Sync Token") }}</a></small>
+      {% if lost_otp_token is not defined %}
+      <small
+        ><a href="{{ url_for('.forgot_password_ask') }}"
+          >{{ _("Forgot Password?") }}</a
+        ></small
+      >
+      {% else %}
+      <small
+        ><a href="{{ url_for('.forgot_password_ask') }}"
+          >{{ _("Forgot Password or OTP?") }}</a
+        ></small
+      >
+      {% endif %}
+      <span class="text-muted"> | </span>
+      <small
+        ><a href="{{ url_for('.otp_sync') }}">{{ _("Sync Token") }}</a></small
+      >
     </div>
   </div>
   <div class="card-footer d-flex justify-content-between">