Add templates for second factor user authentication

deploy/html/user_login_secondfactor.html

@@ -1,28 +1,50 @@
 {%- extends "viur_base.html" %}
 
 {%- block content %}
-	{% if action == "otp" %}
-		<h1 class="headline">OTP</h1>
+    <h1 class="headline">{{ name }}</h1>
 
-		<form action="/user/f2_timebasedotp/otp" method="POST" class="">
-			<input name="skey" type="hidden" value="{{ getSecurityKey() }}">
+    {% if action_name == "otp" or action_name == "authenticator_otp" %}
+        {% if action_name == "otp" -%}
+            <p>{% translate "user_second_factor_otp_text", "Please enter your OTP token from your generator." %}</p>
+        {%- elif action_name == "authenticator_otp" -%}
+            <p>{% translate "user_second_factor_authenticator_otp_text", "Please enter your OTP token from your authenticator app." %}</p>
+        {%- endif %}
 
-			<div class="msg msg--error {{ "is-active" if secondFactorFailed }}">
-				{{ embedSvg("icon-cross") }}
-				<div class="msg-content">
-					<h3 class="msg-headline">Error!</h3>
-					<p>The entered token was invaild!</p>
-				</div>
-			</div>
+        <form action="{{ action_url }}" method="POST" class="">
+            <input name="skey" type="hidden" value="{{ getSecurityKey() }}">
 
-			<div class="input-group">
-				<label class="label has-icon" for="otptoken">{{ embedSvg("icon-token") }}OTP Token</label>
-				<input id="username" name="otptoken" type="text" class="input js-focus" placeholder="OTP Token">
-			</div>
+            {% for error in skel["errors"] %}
+                <div class="msg msg--error is-active">
+                    {{ embedSvg("icon-cross") }}
+                    <div class="msg-content">
+                        <h3 class="msg-headline">{{ error["errorMessage"] }}</h3>
+                    </div>
+                </div>
+            {% endfor %}
 
-			<button type="submit" id="submitbtn" name="submit" class="btn btn--primary">Login</button>
-		</form>
-	{% else %}
-		<div>Unimplemented second factor action: {{ action }}</div>
-	{% endif %}
+            <div class="msg msg--error {{ "is-active" if secondFactorFailed }}">
+                {{ embedSvg("icon-cross") }}
+                <div class="msg-content">
+                    <h3 class="msg-headline">{% translate "error", "Error!" %}</h3>
+                    <p>{% translate "user_second_factor_invalid_token", "The entered token was invalid!" %}</p>
+                </div>
+            </div>
+
+            <div class="input-group">
+                <label class="label has-icon" for="otptoken">
+                    {{ embedSvg("icon-token") }}{% translate "user_second_factor_token", "OTP Token" %}
+                </label>
+                <input id="otptoken" name="otptoken" type="text" class="input js-focus"
+                       placeholder="{% translate "user_second_factor_token", "OTP Token" %}">
+            </div>
+
+            <button type="submit" id="submitbtn" name="submit"
+                    class="btn btn--primary">{% translate "user_second_factor_submit", "Login" %}</button>
+        </form>
+    {% else %}
+        <p>
+            {% translate "user_second_factor_unimplemented", "Unimplemented second factor action:" %} {{ name }}
+            ({{ action_name }})
+        </p>
+    {% endif %}
 {%- endblock content %}

deploy/html/user_second_factor_choice.html

@@ -0,0 +1,17 @@
+{%- extends "viur_base.html" %}
+
+{%- block content %}
+    <h1 class="headline">{% translate "user_second_factor_choice_headline", "Second Factor" %}</h1>
+
+    <p>{% translate "user_second_factor_choice_text", "Your account is secured by a second factor. Please choose with which one you want to continue the login." %}</p>
+
+    <p>
+        <strong>{% translate "user_second_factor_choice_list", "Available factors" %}</strong><br>
+
+        {% for second_factor in second_factors %}
+            <a href="{{ second_factor.start_url }}">{{ translate(second_factor.NAME) }}</a>
+            {% if not loop.last %}<br>{% endif %}
+        {% endfor %}
+    </p>
+
+{%- endblock content %}

deploy/html/user_secondfactor_add.html

@@ -0,0 +1,33 @@
+{%- extends "viur_base.html" %}
+
+{%- block content %}
+    <h1 class="headline">{% translate "user_second_factor_add_headline", "Add Second Factor" %}: {{ name }}</h1>
+
+    {% if action_name == "authenticator_otp" %}
+        <p>{% translate "user_second_factor_add_authenticator_otp_text", "Please scan the QR code below with your authentication app (Google Authenticator, Authy, ...) and then enter the OTP token in the field below to confirm successful setup." %}</p>
+
+        <a href="{{ otp_uri }}">
+            {{ qrcode(otp_uri) }}
+        </a>
+
+        <form method="POST" action="{{ add_url }}">
+            <input name="skey" type="hidden" value="{{ getSecurityKey() }}">
+
+            <div class="input-group">
+                <label class="label" for="otp">
+                    {% translate "user_second_factor_token", "OTP Token" %}
+                </label>
+                <input class="input" id="otp" name="otp" type="text"
+                       placeholder="{% translate "user_second_factor_token", "OTP Token" %}">
+            </div>
+
+            <input class="btn btn--primary" type="submit"
+                   value="{% translate "user_second_factor_add_submit", "Validate Second Factor" %}">
+        </form>
+    {% else %}
+        <p>
+            {% translate "user_second_factor_unimplemented", "Unimplemented second factor action:" %} {{ name }}
+            ({{ action_name }})
+        </p>
+    {% endif %}
+{%- endblock content %}

deploy/html/user_secondfactor_add_success.html

@@ -0,0 +1,15 @@
+{% extends "viur_base.html" %}
+
+{% block content %}
+    <h1 class="headline">{% translate "user_second_factor_add_headline", "Add Second Factor" %}</h1>
+
+    <div class="msg msg--success is-active">
+        {{ embedSvg("icon-check") }}
+        <div class="msg-content">
+            <h3 class="msg-headline">{% translate "user_second_factor_add_success_msg", "Done" %}</h3>
+            <p>{% translate "user_second_factor_add_success_text", "Your second factor has been successfully added." %}</p>
+        </div>
+    </div>
+
+    <a href="/user/login">{% translate "login", "Login" %}</a>
+{% endblock %}