✨ Multiple Auth-Methods on Login-Page

Gruntfile.js

@@ -223,6 +223,7 @@ module.exports = function (grunt) {
       main: {
         files: {
         'temp/app.js':['temp/app.js'],
+        'dist/appCommon-v10.5.2.js': ['temp/app.js'],
         'temp/lib.js': ['temp/lib.js'],
         'temp/libnocompat.js': ['temp/libnocompat.js']
         }
@@ -233,10 +234,10 @@ module.exports = function (grunt) {
         options:{
           mangle: false,
           compress: {},
-          beautify: true
+          beautify: true,
         },
         files: {
-          'dist/appCommon-v10.5.2.js': 'temp/app.js',
+          //'dist/appCommon-v10.5.2.js': 'temp/app.js',
           'dist/libCommon-v10.5.2.js': ['temp/lib.js'],
           'dist/libnocompat-v10.5.2.js': 'temp/libnocompat.js',
           'dist/avWidgets.js': 'avWidgets.js',

avRegistration/login-controller/login-controller.html

@@ -14,5 +14,21 @@
       selected-alt-method="{{selectedAltMethod}}"
     >
     </div>
+    <div ng-repeat="alt_method in alt_methods" ng-if="!withAltMethod">
+      <div
+        av-login
+        event-id="{{event_id}}"
+        code="{{code}}"
+        email="{{email}}"
+        with-code="{{withCode}}"
+        username="{{username}}"
+        is-otl="{{isOtl}}"
+        is-open-id="{{isOpenId}}"
+        otl-secret="{{otlSecret}}"
+        with-alt-method="true"
+        selected-alt-method="{{alt_method}}"
+      >
+      </div>
+    </div>
   </div>
 </div>

avRegistration/login-controller/login-controller.js

@@ -20,8 +20,32 @@ angular.module('avRegistration')
     'LoginController',
     function(
       $scope,
-      $stateParams
+      $stateParams,
+      Authmethod
     ) {
+      $scope.alt_methods = [];
+      if (!$stateParams.altmethod) {
+        Authmethod
+          .viewEvent($stateParams.id)
+          .then(
+            function onSuccess(response) {
+              if (response.data.status !== "ok") {
+                return;
+              }
+              $scope.alt_methods = response
+                .data
+                .events
+                .alternative_auth_methods
+                .filter(function (auth_method) {
+                  return auth_method.auth_method_name !== 'smart-link';
+                })
+                .map(function (auth_method) {
+                  return auth_method.id;
+                });
+            }
+          );
+      }
+
       $scope.event_id = $stateParams.id;
       $scope.code = $stateParams.code;
       $scope.email = $stateParams.email;

avRegistration/login-controller/login-controller.less

@@ -22,4 +22,31 @@
     .pad {
         max-width: 562px;
     }
-}
+}
+
+.container-login {
+    padding: 0 !important;
+    border: none !important;
+}
+
+.login-controller .pad {
+    margin: 80px;
+    border: 2px solid rgba(0, 0, 0, 0.05);
+    background: white;
+    padding: 30px 50px;
+    padding-bottom: 0;
+}
+
+@media (max-width: @screen-xs-max) {
+    .login-controller .pad {
+        margin: 15px 0;
+        padding: 15px;
+    }
+}
+
+@media (max-width: @screen-sm-max) {
+    .login-controller .pad {
+        margin: 20px 0;
+        padding: 30px;
+    }
+}

avRegistration/login-directive/login-directive.html

@@ -32,39 +32,6 @@
           >
         </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" ng-if="method !== 'smart-link'">
-        <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>
-        <!-- we disable click for smart-link unless it comes from a smart-link,
-          because it doesn't work -->
-        <li
-          ng-repeat="alt_auth_method in alternative_auth_methods"
-          ng-class="{'active': current_alt_auth_method_id == alt_auth_method.id, 'disabled': selectedAltMethod !== 'smart-link' && alt_auth_method.auth_method_name === 'smart-link'}"
-        >
-          <a ng-click="setCurrentAltAuthMethod(alt_auth_method, true)">
-            <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">
@@ -221,13 +188,12 @@
             ng-click="openidConnectAuth(provider)"
             alt="{{provider.public_info.description}}"
             tabindex="0"
-            class="btn btn-block btn-lg btn-success-action provider-btn"
+            class="btn btn-block btn-lg provider-btn"
             ng-class="{[provider.public_info.id]: true}"
           >
             <img
               ng-if="!!provider.public_info.icon"
               alt="{{provider.public_info.description}}"
-              class="logo-img"
               ng-src="{{provider.public_info.icon}}"
             />
             {{provider.public_info.title}}

avRegistration/login-directive/login-directive.js

@@ -881,6 +881,7 @@ angular.module('avRegistration')
               (authevent['census'] === 'open') &&
               (autheventid !== adminId || ConfigService.allowAdminRegistration)
             );
+
             if (!scope.isCensusQuery && !scope.withCode && !scope.isOtl) {
               scope.login_fields = Authmethod.getLoginFields(authevent);
             } else if (scope.withCode) {
@@ -1029,6 +1030,7 @@ angular.module('avRegistration')
             // auto-login
             if (
               !scope.isOpenId &&
+              (authevent.auth_method !== 'openid-connect') &&
               !scope.isOtl &&
               !scope.isCensusQuery &&
               !scope.withCode &&

avRegistration/login-directive/login-directive.less

@@ -1,17 +1,26 @@
 [av-login] {
-  min-height: calc(100vh - 190px);
   display: flex;
   align-items: center;
 
-  @media(max-width: @screen-xs-max) {
-    min-height: calc(100vh - 149px);
-  }
-
   .oidc-section {
     .provider-span {
       .provider-btn {
         margin-bottom: 10px;
         margin-top: 10px;
+        padding-left: 30px;
+        text-align: left;
+        color: #2d333a;
+        border: 1px solid #818181;
+        background-color: white;
+
+        &:hover {
+          border-color: @brand-success;
+        }
+
+        img {
+          max-width: 30px;
+          margin-left: 5px;
+        }
       }
     }
   }
@@ -130,6 +139,25 @@
   }
 }
 
+[av-login] .container-login {
+  padding: 0 !important;
+  border: none !important;
+  width: 100%;
+}
+
+.login-controller .pad [ng-repeat] [av-login] {
+  margin-top: 30px;
+  border-top: 1px solid #ccc;
+}
+
+.login-controller .pad [ng-repeat] [av-login] .loginheader {
+  display: none;
+}
+
+.login-controller .pad > [av-login] .loginheader {
+  display: block;
+}
+
 
 @media (max-width: @screen-sm-max) {
   .form-horizontal .col-sm-offset-4.col-sm-8.button-group {