Alternative Auth methods support (#312)

Parent issue: sequentech/epi#114

avRegistration/fields/tel-field-directive/tel-field-directive.less

@@ -30,8 +30,8 @@
 
 .intl-tel-input.allow-dropdown
 {
- margin-top: 12px !important;
- margin-bottom: -18px !important;
+ margin-top: 0;
+ margin-bottom: 0;
  width: 100%;
 }
 .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag

avRegistration/login-controller/login-controller.html

@@ -9,6 +9,8 @@
       username="{{username}}"
       is-otl="{{isOtl}}"
       otl-secret="{{otlSecret}}"
+      with-alt-method="{{withAltMethod}}"
+      selected-alt-method="{{selectedAltMethod}}"
       ng-if="!isOpenId"
     >
     </div>

avRegistration/login-controller/login-controller.js

@@ -28,6 +28,8 @@ angular.module('avRegistration')
       $scope.username = $stateParams.username;
       $scope.isOpenId = $stateParams.isOpenId;
       $scope.withCode = $stateParams.withCode;
+      $scope.withAltMethod = $stateParams.withAltMethod;
+      $scope.selectedAltMethod = $stateParams.altmethod;
       $scope.isOtl = $stateParams.isOtl;
       $scope.otlSecret = $stateParams.otlSecret;
     }

avRegistration/login-directive/login-directive.html

@@ -33,6 +33,37 @@
           >
         </div>
     </div>
+
+    <!-- Shows the alternative auth method tabs in case there's any -->
+    <div class="col-sm-12 alternative-auth-methods-tabs" ng-if="alternative_auth_methods">
+      <ul class="nav nav-tabs">
+        <li 
+          class="default-auth-method"
+          ng-class="{'active': current_alt_auth_method_id == null}"
+        >
+          <a
+            ng-click="setCurrentAltAuthMethod(null)"
+          >
+            <i class="fa fa-user"></i>
+            <span ng-i18next="avRegistration.defaultAuthMethod"></span>
+          </a>
+        </li>
+        <li
+          ng-repeat="alt_auth_method in alternative_auth_methods"
+          ng-class="{'active': current_alt_auth_method_id == alt_auth_method.id}"
+        >
+          <a ng-click="setCurrentAltAuthMethod(alt_auth_method)">
+            <i
+              ng-if="alt_auth_method.icon"
+              class="{{alt_auth_method.icon}}"
+              ></i>
+            <span>
+              {{getAltAuthMethodName(alt_auth_method)}}
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
 
     <div class="col-sm-12" ng-if="method !== 'openid-connect'">
         <form name="form" id="loginForm" role="form" class="form-horizontal">

avRegistration/login-directive/login-directive.js

@@ -40,6 +40,14 @@ angular.module('avRegistration')
         scope.isOtl = attrs.isOtl;
         scope.otlSecret = attrs.otlSecret;
         scope.error = null;
+        scope.current_alt_auth_method_id = undefined;
+        scope.alternative_auth_methods = null;
+
+        if (!attrs.withAltMethod || !attrs.selectedAltMethod) {
+          scope.selectedAltMethod = null;
+        } else {
+          scope.selectedAltMethod = attrs.selectedAltMethod;
+        }
 
         // by default
         scope.hide_default_login_lookup_field = false;
@@ -316,6 +324,11 @@ angular.module('avRegistration')
           var data = {
             'captcha_code': Authmethod.captcha_code,
           };
+
+          // set alternative auth method id
+          if (scope.current_alt_auth_method_id) {
+            data.alt_auth_method_id = scope.current_alt_auth_method_id;
+          }
           var hasEmptyCode = false;
           _.each(scope.login_fields, function (field) {
             if (angular.isUndefined(field.value)) {
@@ -455,6 +468,61 @@ angular.module('avRegistration')
           );
         };
 
+        scope.getUriParam = function (paramName) {
+          var uri = $window.location.href;
+          var paramName2 = paramName.replace(/[\[\]]/g, '\\$&');
+          var rx = new RegExp('[?&]' + paramName2 + '(=([^&#]*)|&|#|$)');
+          var params = rx.exec(uri);
+
+          if (!params)
+          {
+              return null;
+          }
+
+          if (!params[2])
+          {
+              return '';
+          }
+          return decodeURIComponent(params[2].replace(/\+/g, ' ')) || undefined;
+        };
+
+        /**
+         * Returns the translated name of the given alternative authentication
+         * method.
+         * @param {*} altAuthMethod altAuthMethod object
+         */
+        scope.getAltAuthMethodName = function(altAuthMethod) {
+          var langCode = $window.i18n.lng();
+          if (
+            altAuthMethod.public_name_i18n &&
+            altAuthMethod.public_name_i18n[langCode]
+          ) {
+            return altAuthMethod.public_name_i18n[langCode];
+          } else {
+            return altAuthMethod.public_name;
+          }
+        };
+
+        /**
+         * Sets the current alt auth method
+         * @param {*} altAuthMethod altAuthMethod object
+         */
+        scope.setCurrentAltAuthMethod = function(altAuthMethod) {
+          if (altAuthMethod === scope.current_alt_auth_method_id) {
+            return;
+          }
+
+          var authevent = angular.copy(scope.base_authevent);
+          if (altAuthMethod === null) {
+            scope.current_alt_auth_method_id = null;
+          } else {
+            scope.current_alt_auth_method_id = altAuthMethod.id;
+            authevent.extra_fields = altAuthMethod.extra_fields;
+            authevent.auth_method = altAuthMethod.auth_method_name;
+          }
+          scope.apply(authevent);
+        };
+
         scope.apply = function(authevent) {
             scope.hasOtpFieldsCode = Authmethod.hasOtpCodeField(authevent);
             scope.method = authevent['auth_method'];
@@ -523,8 +591,14 @@ angular.module('avRegistration')
                   el.value = scope.stateData[el.name];
                   el.disabled = true;
                 } else {
-                  el.value = null;
-                  el.disabled = false;
+                  var uriValue = scope.getUriParam(el.name);
+                  if (angular.isString(uriValue)) {
+                    el.value = uriValue;
+                    el.disabled = true;
+                  } else {
+                    el.value = null;
+                    el.disabled = false;
+                  }
                 }
                 if (el.type === "email") {
                   if (scope.email !== null) {
@@ -599,7 +673,15 @@ angular.module('avRegistration')
                 .then(
                   function onSuccess(response) {
                     if (response.data.status === "ok") {
-                        scope.apply(response.data.events);
+                      scope.base_authevent = angular.copy(response.data.events);
+                      scope.alternative_auth_methods = scope.base_authevent.alternative_auth_methods;
+                      var altAuthMethod = _.find(
+                        scope.alternative_auth_methods,
+                        function (altAuthMethod) {
+                          return altAuthMethod.id === scope.selectedAltMethod; 
+                        }
+                      ) || null;
+                      scope.setCurrentAltAuthMethod(altAuthMethod);
                     } else {
                         scope.status = 'Not found';
                         document.querySelector(".input-error").style.display = "block";

avRegistration/login-directive/login-directive.less

@@ -7,6 +7,17 @@
     min-height: calc(100vh - 149px);
   }
 
+  .alternative-auth-methods-tabs {
+    margin-bottom: 20px;
+    a {
+     text-decoration: none;
+    }
+
+    i {
+      margin-right: 5px;
+    }
+  }
+
   .loginheader {
     margin-bottom: 30px;
     color: @av-secondary;

avUi/election-creation.js

@@ -44,7 +44,8 @@ angular.module('avUi')
                 allow_public_census_query: el.allow_public_census_query,
                 hide_default_login_lookup_field: el.hide_default_login_lookup_field,
                 parent_id: el.parent_id || null,
-                children_election_info: el.children_election_info || null
+                children_election_info: el.children_election_info || null,
+                alternative_auth_methods: el.census.alternative_auth_methods || null
             };
 
             // Set election id if existing in election configuration