show message to press button, restructured js a bit

darookee · Nov 27, 2016 · ce3b193 · ce3b193
1 parent e7c99c2
commit ce3b193
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 14 deletions.
diff --git a/Resources/public/js/auth.js b/Resources/public/js/auth.js
@@ -5,6 +5,8 @@ var u2fauth = u2fauth || {};
 u2fauth.formId = 'u2fForm';
 u2fauth.authCodeId = '_auth_code';
 u2fauth.keynameId = 'u2fkeyname';
+u2fauth.pressButtonId = 'u2fpressbutton';
+u2fauth.errorId = 'u2fError';
 u2fauth.errorTranslation = {
     1: 'Unknown Error',
     2: 'Bad Request',
@@ -27,41 +29,70 @@ u2fauth.ready = function(fn) {
 };
 
 u2fauth.authenticate = function() {
+    u2fauth.clearError();
+    u2fauth.showPressButton();
+
     var form = document.getElementById(u2fauth.formId);
-    var codeField = document.getElementById(u2fauth.authCodeId);
     var request = JSON.parse(form.dataset.request);
 
     u2f.sign(request[0].appId, request[0].challenge, request, function(data){
+        u2fauth.hidePressButton();
         if(!data.errorCode) {
-            codeField.value = JSON.stringify(data);
-            form.submit();
+            u2fauth.submit(form, data);
         } else {
-            u2fauth.showError(data.errorCode, function(){u2fauth.authenticate(request, codeField, form);});
+            u2fauth.showError(data.errorCode, u2fauth.authenticate);
         }
     });
 };
 
 u2fauth.register = function() {
-    var keyname = document.getElementById(u2fauth.keynameId);
-    keyname.style.display = "none"; 
+    u2fauth.clearError();
+    u2fauth.hideKeyname();
+    u2fauth.showPressButton();
+
     var form = document.getElementById(u2fauth.formId);
-    var codeField = document.getElementById(u2fauth.authCodeId);
     var request = JSON.parse(form.dataset.request);
 
     u2f.register(request[0].appId, [request[0]], request[1], function(data){
+        u2fauth.hidePressButton();
         if(!data.errorCode) {
-            codeField.value = JSON.stringify(data);
-            form.submit();
+            u2fauth.submit(form, data);
         } else {
-            u2fauth.showError(data.errorCode, function(){u2fauth.register(request, codeField, form);});
+            u2fauth.showError(data.errorCode, u2fauth.register);
         }
     });
 };
 
-u2fauth.showError = function(error, callback) {
-    var errorDisplay;
+u2fauth.submit = function(form, data) {
+    var codeField = document.getElementById(u2fauth.authCodeId);
+    codeField.value = JSON.stringify(data);
+    form.submit();
+}
 
-    errorDisplay = document.getElementById('u2fError');
+u2fauth.hideKeyname = function() {
+    var keyname = document.getElementById(u2fauth.keynameId);
+    keyname.style.display = 'none';
+}
+
+u2fauth.hidePressButton = function() {
+    var pressButton = document.getElementById(u2fauth.pressButtonId);
+    pressButton.style.display = 'none';
+}
+
+u2fauth.showPressButton = function() {
+    var pressButton = document.getElementById(u2fauth.pressButtonId);
+    pressButton.style.display = 'block';
+}
+
+u2fauth.clearError = function() {
+    var errorDisplay = document.getElementById(u2fauth.errorId);
+    errorDisplay.style.display = 'none';
+    errorDisplay.innerText = '';
+}
+
+u2fauth.showError = function(error, callback) {
+    var errorDisplay = document.getElementById(u2fauth.errorId);
+    errorDisplay.style.display = 'block';
     errorDisplay.innerText = u2fauth.errorTranslation[error];
     errorDisplay.onclick = callback;
 };

diff --git a/Resources/views/Authentication/form.html.twig b/Resources/views/Authentication/form.html.twig
@@ -2,6 +2,7 @@
     {% for flashMessage in app.session.flashbag.get('two_factor') %}
     <p class="error">{{ flashMessage|trans }}</p>
     {% endfor %}
+    <div id="u2fpressbutton" style="display: none;">Press Button on token</div>
     <p class="widget"><input id="_auth_code" type="hidden" autocomplete="off" name="_auth_code" /></p>
     {% if useTrustedOption %}<p class="widget"><label for="_trusted"><input id="_trusted" type="checkbox" name="_trusted" /> {{ 'scheb_two_factor.trusted'|trans }}</label></p>{% endif %}
     <div id="u2fError"></div>

diff --git a/Resources/views/Registration/register.html.twig b/Resources/views/Registration/register.html.twig
@@ -3,8 +3,9 @@
         <input type="text" name="keyName" id="keyName" placeholder="Name your FIDO-Device"/>
         <input type="button" value="Register" onclick="u2fauth.register()" />
     </div>
+    <div id="u2fpressbutton" style="display: none;">Press Button on token</div>
     <input type="hidden" name="_auth_code" id="_auth_code" />
-    <div id="u2fError"></div>
+    <div id="u2fError" style="display: none;"></div>
 </form>
 <script src="/bundles/ru2ftwofactor/js/u2f-api.js"></script>
 <script src="/bundles/ru2ftwofactor/js/auth.js"></script>