WIP bootstrap4/fontawesome (#1504)

lemonldap-ng-portal/site/htdocs/static/bootstrap/css/styles.css

@@ -105,15 +105,12 @@ img.langicon {
   cursor: pointer;
 }
 
-/* OpenID Connect */
-div.openidconnect button {
-  height: 60px;
-  width: 160px;
-  margin-bottom: 5px;
+button.idploop {
+  max-width: 300px;
 }
 
-div.openidconnect button img {
-  height: 30px;
+button.idploop img {
+  max-height: 30px;
 }
 
 div.oidc_consent_message > ul {

lemonldap-ng-portal/site/htdocs/static/bootstrap/css/styles.min.css

@@ -1 +1 @@
-html,body{height:100%;background:radial-gradient(circle at 50% 0,#fff 0,#ddd 100%) no-repeat scroll 0 0 #ddd}#wrap{min-height:100%;height:auto;margin:0 auto -80px;padding:20px 0 80px}#footer{height:80px;background-color:#fff;background-color:rgba(255,255,255,0.9);text-align:center;padding-top:10px;overflow:hidden}#header img{background-color:#fff;background-color:rgba(255,255,255,0.8);margin-bottom:20px}.card,.navbar-light{background-color:#fff;background-color:rgba(255,255,255,0.9);background-image:none}.login,.password{text-align:center;padding:20px}div.form{margin:0 auto;max-width:330px}div.actions{margin:10px 0 0 0}div.actions a{margin-top:10px}.buttons{text-align:center;margin:10px 0 0 0;cursor:pointer}.btn{white-space:normal}.btn span.glyphicon{padding-right:8px}li.ui-state-active{background-color:#fafafa;background-color:rgba(250,250,250,0.9)}#appslist,#password,#loginHistory,#logout,#oidcConsents{margin-top:20px}div.category{margin:10px 0;cursor:grab}div.application{margin:5px 0;overflow:hidden}div.application a,div.application a:hover{text-decoration:none}p.notifCheck label{margin-left:5px;margin-top:3px;display:inline-block}img.langicon{cursor:pointer}div.openidconnect button{height:60px;width:160px;margin-bottom:5px}div.openidconnect button img{height:30px}div.oidc_consent_message>ul{text-align:left;list-style:circle}@media(min-width:768px){div.application{height:80px}div.application h4.appname{margin:0}#wrap{margin:0 auto -60px}#footer{height:60px}}.hiddenFrame{border:0;display:hidden;margin:0}.noborder{border:0}.max{width:100%}.link{cursor:pointer}.nodecor:hover,.nodecor:active.nodecor:focus{text-decoration:none}
+html,body{height:100%;background:radial-gradient(circle at 50% 0,#fff 0,#ddd 100%) no-repeat scroll 0 0 #ddd}#wrap{min-height:100%;height:auto;margin:0 auto -80px;padding:20px 0 80px}#footer{height:80px;background-color:#fff;background-color:rgba(255,255,255,0.9);text-align:center;padding-top:10px;overflow:hidden}#header img{background-color:#fff;background-color:rgba(255,255,255,0.8);margin-bottom:20px}.card,.navbar-light{background-color:#fff;background-color:rgba(255,255,255,0.9);background-image:none}.login,.password{text-align:center;padding:20px}div.form{margin:0 auto;max-width:330px}div.actions{margin:10px 0 0 0}div.actions a{margin-top:10px}.buttons{text-align:center;margin:10px 0 0 0;cursor:pointer}.btn{white-space:normal}.btn span.glyphicon{padding-right:8px}li.ui-state-active{background-color:#fafafa;background-color:rgba(250,250,250,0.9)}#appslist,#password,#loginHistory,#logout,#oidcConsents{margin-top:20px}div.category{margin:10px 0;cursor:grab}div.application{margin:5px 0;overflow:hidden}div.application a,div.application a:hover{text-decoration:none}p.notifCheck label{margin-left:5px;margin-top:3px;display:inline-block}img.langicon{cursor:pointer}button.idploop{max-width:300px}button.idploop img{max-height:30px}div.oidc_consent_message>ul{text-align:left;list-style:circle}@media(min-width:768px){div.application{height:80px}div.application h4.appname{margin:0}#wrap{margin:0 auto -60px}#footer{height:60px}}.hiddenFrame{border:0;display:hidden;margin:0}.noborder{border:0}.max{width:100%}.link{cursor:pointer}.nodecor:hover,.nodecor:active.nodecor:focus{text-decoration:none}

lemonldap-ng-portal/site/templates/bootstrap/idpchoice.tpl

@@ -23,20 +23,20 @@
           <span trspan="selectIdP">Select your Identity Provider</span>
         </h3>
       </div>
-      <div class="card-body form">
+      <div class="card-body">
 
       <input type="hidden" id="idp" name="idp"/>
 
-      <div class="row">
+      <div class="row text-center">
       <TMPL_LOOP NAME="LIST">
-        <div class="col-sm-6 <TMPL_VAR NAME="class"> mb-3">
-          <button type="submit" class="btn btn-secondary idploop" val="<TMPL_VAR NAME="VAL">">
+        <div class="col-sm-6 <TMPL_VAR NAME="class"> mb-3 mr-3">
+          <button type="submit" class="btn btn-secondary idploop py-3" val="<TMPL_VAR NAME="VAL">">
           <TMPL_IF NAME="icon">
-            <img src="<TMPL_VAR NAME="icon">" />
+            <img src="<TMPL_VAR NAME="icon">" class="mr-2" alt="<TMPL_VAR NAME="NAME">" title="<TMPL_VAR NAME="NAME">" />
           <TMPL_ELSE>
-            <i class="fas fa-globe"></i>
-          </TMPL_IF>
+            <i class="fas fa-globe mr-2"></i>
             <TMPL_VAR NAME="NAME">
+          </TMPL_IF>
           </button>
         </div>
       </TMPL_LOOP>

lemonldap-ng-portal/site/templates/bootstrap/oidcConsents.tpl

@@ -13,7 +13,13 @@
     <td><TMPL_VAR NAME="displayName"></td>
     <td class="localeDate" val="<TMPL_VAR NAME="epoch">"></td>
     <td><TMPL_VAR NAME="scope"></td>
-    <td><a partner="<TMPL_VAR NAME="name">" title="delete" class="oidcConsent link nodecor text-danger fas fa-minus-circle"></a></td>
+    <td>
+      <a partner="<TMPL_VAR NAME="name">" title="delete" class="oidcConsent">
+        <span class="btn btn-danger" role="button">
+          <span class="fas fa-minus-circle"></span>
+          <span trspan="unregister">Unregister</span>
+        </span>
+      </a>
     </td>
    </tr>
   </TMPL_LOOP>