Update HTML code to bootstrap 4 (#1504)

This commit is contained in:
Clément OUDOT 2018-09-20 18:04:01 +02:00
parent 185c63e151
commit f9bdc75fc0
18 changed files with 132 additions and 153 deletions

View File

@ -1,19 +1,23 @@
<TMPL_IF NAME="CHECK_LOGINS">
<div class="form-group input-group">
<span class="input-group-addon">
<input type="checkbox" name="checkLogins" aria-describedby="checkLoginsLabel" <TMPL_IF NAME="ASK_LOGINS">checked</TMPL_IF> />
</span>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" name="checkLogins" aria-describedby="checkLoginsLabel" <TMPL_IF NAME="ASK_LOGINS">checked</TMPL_IF> />
</div>
</div>
<p class="form-control">
<label id="checkLoginsLabel" for="checkLogins" trspan="checkLastLogins">Check my last logins</label>
</p>
</div>
</TMPL_IF>
<TMPL_IF NAME="STAYCONNECTED">
<div class="form-group input-group">
<span class="input-group-addon">
<input type="checkbox" id="stayconnected" name="stayconnected" aria-describedby="stayConnectedLabel" />
</span>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" id="stayconnected" name="stayconnected" aria-describedby="stayConnectedLabel" />
</div>
</div>
<p class="form-control">
<label id="stayConnectedLabel" for="stayconnected" trspan="stayConnected">Stay connected on this device</label>
</p>

View File

@ -16,13 +16,13 @@
</TMPL_IF>
<input type="hidden" name="skin" value="<TMPL_VAR NAME="SKIN">" />
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">
<div class="card text-white bg-info">
<div class="card-header">
<h3 class="card-title">
<span trspan="confirmation">Confirmation</span>
</h3>
</div>
<div class="panel-body form">
<div class="card-body form">
<TMPL_VAR NAME="MSG">

View File

@ -1,7 +1,7 @@
<!-- Custom HTML footer -->
<p>
<span trspan="serviceProvidedBy">Service provided by</span>
<a href="http://lemonldap-ng.org" target="_blank" class="btn btn-default btn-xs">
<a href="http://lemonldap-ng.org" target="_blank" class="btn btn-secondary btn-xs">
<span class="glyphicon glyphicon-new-window"></span>
LemonLDAP::NG
</a>

View File

@ -1,2 +1,2 @@
<!-- Custom HTML header -->
<img src="<TMPL_VAR NAME="STATIC_PREFIX">common/logos/logo_llng_400px.png" class="img-responsive img-rounded center-block" />
<img src="<TMPL_VAR NAME="STATIC_PREFIX">common/logos/logo_llng_400px.png" class="img-fluid rounded mx-auto d-block" />

View File

@ -4,7 +4,7 @@
<div class="message message-positive alert"><span trspan="<TMPL_IF "LEGEND"><TMPL_VAR "LEGEND"><TMPL_ELSE>enterExt2fCode</TMPL_IF>"></span></div>
<div class="panel panel-default">
<div class="card">
<form action="<TMPL_IF "TARGET"><TMPL_VAR "TARGET"><TMPL_ELSE>/ext2fcheck</TMPL_IF>" method="post" class="password" role="form">
<div class="form">

View File

@ -1,13 +1,15 @@
</div>
<div id="footer">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 col-xs-10">
<div class="col-md-8 col-10">
<TMPL_INCLUDE NAME="customfooter.tpl">
</div>
<div class="col-md-2 col-xs-2 text-right">
<div class="col-md-2 col-2 text-right">
<span id="languages"></span>
</div>
</div>
</div>
<!-- Constants -->

View File

@ -17,13 +17,13 @@
</TMPL_IF>
<input type="hidden" name="skin" value="<TMPL_VAR NAME="SKIN">" />
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">
<div class="card text-white bg-info">
<div class="card-header">
<h3 class="card-title">
<span trspan="selectIdP">Select your Identity Provider</span>
</h3>
</div>
<div class="panel-body form">
<div class="card-body form">
<input type="hidden" id="idp" name="idp"/>
@ -43,10 +43,9 @@
</div>
<TMPL_IF NAME="REMEMBER">
<p>&nbsp;</p>
<div class="checkbox">
<input type="checkbox" id="remember" name="cookie_type" value="1" aria-describedby="rememberlabel">
<label id="rememberlabel" for="remember">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="remember" name="cookie_type" value="1" aria-describedby="rememberlabel">
<label class="form-check-label" id="rememberlabel" for="remember">
<span trspan="rememberChoice">Remember my choice</span>
</label>
</div>
@ -56,7 +55,7 @@
<script type="text/javascript" src="<TMPL_VAR NAME="STATIC_PREFIX">common/js/idpchoice.min.js"></script>
//else -->
<script type="text/javascript" src="<TMPL_VAR NAME="STATIC_PREFIX">common/js/idpchoice.js"></script>
<!-- //endif -->
<!-- //endif -->
</div>
</div>

View File

@ -8,11 +8,11 @@
<input type="hidden" id="authKey" name="<TMPL_VAR NAME="CHOICE_PARAM">" value="<TMPL_VAR NAME="CHOICE_VALUE">" />
</TMPL_IF>
<input type="hidden" name="skin" value="<TMPL_VAR NAME="SKIN">" />
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" trspan="info">Information</h3>
<div class="card text-white bg-info">
<div class="card-header">
<h3 class="card-title" trspan="info">Information</h3>
</div>
<div class="panel-body">
<div class="card-body">
<TMPL_VAR NAME="MSG">
</div>
</div>

View File

@ -9,38 +9,28 @@
<TMPL_IF AUTH_LOOP>
<div id="authMenu">
<div id="authMenu" class="card">
<!-- Authentication loop -->
<div class="nav navbar-default">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-user"></span>
</a>
</div>
<!-- Choice tabs -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<TMPL_LOOP NAME="AUTH_LOOP">
<li title="<TMPL_VAR NAME="key">"><a href="#<TMPL_VAR NAME="key">"><TMPL_VAR NAME="name"></a></li>
<li class="nav-item" title="<TMPL_VAR NAME="key">"><a class="nav-link" href="#<TMPL_VAR NAME="key">"><TMPL_VAR NAME="name"></a></li>
</TMPL_LOOP>
</ul>
</div>
</nav>
<div>
<!-- Forms -->
<TMPL_LOOP NAME="AUTH_LOOP">
@ -105,7 +95,7 @@
</TMPL_IF>
<TMPL_IF NAME="DISPLAY_FORM">
<div class="panel panel-default">
<div class="card">
<TMPL_IF NAME="module">
<form id="lform" action="#" method="post" class="login <TMPL_VAR NAME="module">" role="form">
<TMPL_ELSE>
@ -122,7 +112,7 @@
</TMPL_IF>
<TMPL_IF NAME="DISPLAY_OPENID_FORM">
<div class="panel panel-default">
<div class="card">
<TMPL_IF NAME="module">
<form id="lform" action="#" method="post" class="login <TMPL_VAR NAME="module">" role="form">
<TMPL_ELSE>
@ -139,7 +129,7 @@
</TMPL_IF>
<TMPL_IF NAME="DISPLAY_SSL_FORM">
<div class="panel panel-default">
<div class="card">
<TMPL_IF NAME="module">
<form id="lform" action="#" method="post" class="login <TMPL_VAR NAME="module">" role="form">
<TMPL_ELSE>
@ -156,7 +146,7 @@
</TMPL_IF>
<TMPL_IF NAME="DISPLAY_YUBIKEY_FORM">
<div class="panel panel-default">
<div class="card">
<TMPL_IF NAME="module">
<form id="lform" action="#" method="post" class="login <TMPL_VAR NAME="module">" role="form">
<TMPL_ELSE>
@ -173,7 +163,7 @@
</TMPL_IF>
<TMPL_IF NAME="DISPLAY_LOGO_FORM">
<div class="panel panel-default">
<div class="card">
<TMPL_IF NAME="module">
<form id="lform" action="#" method="post" class="login <TMPL_VAR NAME="module">" role="form">
<TMPL_ELSE>
@ -203,7 +193,7 @@
</TMPL_IF>
<TMPL_IF NAME="DISPLAY_PASSWORD">
<div id="password" class="panel panel-default">
<div id="password" class="card">
<TMPL_INCLUDE NAME="password.tpl">
</div>
</TMPL_IF>

View File

@ -6,7 +6,7 @@
<div class="message message-<TMPL_VAR NAME="AUTH_ERROR_TYPE"> alert"><span trmsg="<TMPL_VAR NAME="AUTH_ERROR">"></span></div>
</TMPL_IF>
<div class="panel panel-default">
<div class="card">
<TMPL_IF NAME="DISPLAY_FORM">
@ -71,11 +71,9 @@
</p>
<div class="checkbox">
<label>
<input id="resendconfirmation" type="checkbox" name="resendconfirmation" aria-describedby="resendconfirmationlabel">
<label for="resendconfirmation" id="resendconfirmationlabel" trspan="confirmPwd">Yes, resend the mail</label>
</label>
<div class="form-check">
<input class="form-check-input" id="resendconfirmation" type="checkbox" name="resendconfirmation" aria-describedby="resendconfirmationlabel">
<label class="form-check-label" for="resendconfirmation" id="resendconfirmationlabel" trspan="confirmPwd">Yes, resend the mail</label>
</div>
<div class="form-group">
@ -115,11 +113,9 @@
<input name="confirmpassword" type="password" class="form-control" trplaceholder="confirmPwd" />
</div>
<div class="checkbox">
<label>
<input id="reset" type="checkbox" name="reset" aria-describedby="resetlabel"/>
<label for="reset" id="resetlabel" trspan="generatePwd">Generate the password automatically</label>
</label>
<div class="form-check">
<input class="form-check-input" id="reset" type="checkbox" name="reset" aria-describedby="resetlabel"/>
<label class="form-check-label" for="reset" id="resetlabel" trspan="generatePwd">Generate the password automatically</label>
</div>
<div class="form-group">

View File

@ -8,57 +8,45 @@
<div id="menu">
<div class="nav navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-home"></span>
</a>
</div>
<TMPL_IF DISPLAY_MODULES>
<div class="navbar-collapse collapse">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Tabs list -->
<ul class="nav navbar-nav">
<ul class="navbar-nav mr-auto">
<TMPL_LOOP NAME="DISPLAY_MODULES">
<TMPL_IF NAME="Appslist">
<li><a href="#appslist"><span>
<li class="nav-item"><a class="nav-link" href="#appslist"><span>
<img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/application_cascade.png" width="16" height="16" alt="appslist" />
<span trspan="yourApps">Your applications</span>
</span></a></li>
</TMPL_IF>
<TMPL_IF NAME="ChangePassword">
<li><a href="#password"><span>
<li class="nav-item"><a class="nav-link" href="#password"><span>
<img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/vcard_edit.png" width="16" height="16" alt="password" />
<span trspan="password">Password</span>
</span></a></li>
</TMPL_IF>
<TMPL_IF NAME="LoginHistory">
<li><a href="#loginHistory"><span>
<li class="nav-item"><a class="nav-link" href="#loginHistory"><span>
<img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/calendar.png" width="16" height="16" alt="login history" />
<span trspan="loginHistory">Login history</span>
</span></a></li>
</TMPL_IF>
<TMPL_IF NAME="OidcConsents">
<li><a href="#oidcConsents"><span>
<li class="nav-item"><a class="nav-link" href="#oidcConsents"><span>
<img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/oidc.png" width="16" height="16" alt="login history" />
<span trspan="oidcConsents">OIDC Consent</span>
</span></a></li>
</TMPL_IF>
<TMPL_IF NAME="Logout">
<li><a href="#logout"><span>
<li class="nav-item"><a class="nav-link" href="#logout"><span>
<img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/door_out.png" width="16" height="16" alt="logout" />
<span trspan="logout">Logout</span>
</span></a></li>
@ -67,19 +55,19 @@
</ul>
<ul class="user nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<span trspan="connectedAs">Connected as</span> <TMPL_VAR NAME="AUTH_USER">
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<TMPL_IF NAME="sfaManager">
<li><a href="/2fregisters">
<img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/sfa_manager.png" width="16" height="16" alt="refresh" />
<span trspan="sfaManager">sfaManager</span>
</a></li>
<TMPL_IF NAME="sfaManager">
<li class="dropdown-item"><a href="/2fregisters">
<img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/sfa_manager.png" width="16" height="16" alt="refresh" />
<span trspan="sfaManager">sfaManager</span>
</a></li>
</TMPL_IF>
<li><a href="/refresh">
<li class="dropdown-item"><a href="/refresh">
<img src="<TMPL_VAR NAME="STATIC_PREFIX">common/icons/arrow_refresh.png" width="16" height="16" alt="refresh" />
<span trspan="refreshrights">Refresh</span>
</a></li>
@ -90,7 +78,7 @@
</div>
</TMPL_IF>
</div>
</nav>
<!-- Tabs content -->
<TMPL_LOOP NAME="DISPLAY_MODULES">
@ -104,14 +92,14 @@
<TMPL_IF NAME="category">
<!-- Category -->
<div class="category cat-level-<TMPL_VAR NAME="catlevel"> <TMPL_VAR NAME="catid"> panel panel-info" id="sort_<TMPL_VAR NAME="__counter__">">
<div class="category cat-level-<TMPL_VAR NAME="catlevel"> <TMPL_VAR NAME="catid"> card border-secondary" id="sort_<TMPL_VAR NAME="__counter__">">
<div class="panel-heading">
<h3 class="catname panel-title"><TMPL_VAR NAME="catname"></h3>
<div class="card-header text-white bg-secondary">
<h4 class="catname card-title"><TMPL_VAR NAME="catname"></h4>
</div>
<TMPL_IF applications>
<div class="panel-body">
<div class="card-body">
<!-- Applications -->
<div class="row">
@ -119,36 +107,38 @@
<!-- Application -->
<div class="col-md-4">
<div class="application <TMPL_VAR NAME="appid"> panel panel-default">
<a class="btn btn-link" href="<TMPL_VAR NAME="appuri">" title="<TMPL_VAR NAME="appname">" role="button">
<div class="application <TMPL_VAR NAME="appid"> card">
<a href="<TMPL_VAR NAME="appuri">" title="<TMPL_VAR NAME="appname">" >
<div class="card-body">
<div class="row">
<!-- Logo (optional) -->
<TMPL_IF NAME="applogo">
<div class="col-xs-3">
<div class="col-3">
<img src="<TMPL_VAR NAME="STATIC_PREFIX">common/apps/<TMPL_VAR NAME="applogo">"
class="applogo <TMPL_VAR NAME="appid">"
class="applogo <TMPL_VAR NAME="appid"> img-fluid"
alt="<TMPL_VAR NAME="appname">" />
</div>
<div class="col-xs-9">
<div class="col-9">
<TMPL_ELSE>
<div class="col-xs-12">
<div class="col-12">
</TMPL_IF>
<!-- Name and link (mandatory) -->
<h4 class="appname <TMPL_VAR NAME="appid"> text-center">
<h5 class="appname <TMPL_VAR NAME="appid"> card-title">
<TMPL_VAR NAME="appname">
</h4>
</h5>
<!-- Description (optional) -->
<TMPL_IF NAME="appdesc">
<p class="appdesc <TMPL_VAR NAME="appid"> hidden-xs">
<p class="appdesc <TMPL_VAR NAME="appid"> card-subtitle mb-2 text-muted">
<TMPL_VAR NAME="appdesc">
</p>
</TMPL_IF>
</div>
</div>
</div>
</a>
</div>
@ -173,11 +163,11 @@
<TMPL_IF NAME="ChangePassword">
<div id="password">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" trspan="changePwd">Change your password</h3>
<div class="card border-secondary">
<div class="card-header text-white bg-secondary">
<h3 class="card-title" trspan="changePwd">Change your password</h3>
</div>
<div class="panel-body">
<div class="card-body">
<TMPL_INCLUDE NAME="password.tpl">
</div>
</div>
@ -187,21 +177,21 @@
<TMPL_IF NAME="LoginHistory">
<div id="loginHistory">
<TMPL_IF NAME="SUCCESS_LOGIN">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" trspan="lastLogins">Last logins</h3>
<div class="card border-secondary">
<div class="card-header text-white bg-secondary">
<h3 class="card-title" trspan="lastLogins">Last logins</h3>
</div>
<div class="panel-body">
<div class="card-body">
<TMPL_VAR NAME="SUCCESS_LOGIN">
</div>
</div>
</TMPL_IF>
<TMPL_IF NAME="FAILED_LOGIN">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" trspan="lastFailedLogins">Last failed logins</h3>
<div class="card border-secondary">
<div class="card-header text-white bg-secondary">
<h3 class="card-title" trspan="lastFailedLogins">Last failed logins</h3>
</div>
<div class="panel-body">
<div class="card-body">
<TMPL_VAR NAME="FAILED_LOGIN">
</div>
</div>
@ -211,11 +201,11 @@
<TMPL_IF NAME="OidcConsents">
<div id="oidcConsents">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" trspan="oidcConsentsFull">OpenID-Connect Consents</h3>
<div class="card border-secondary">
<div class="card-header text-white bg-secondary">
<h3 class="card-title" trspan="oidcConsentsFull">OpenID-Connect Consents</h3>
</div>
<div class="panel-body">
<div class="card-body">
<TMPL_VAR NAME="OIDC_CONSENTS">
</div>
</div>
@ -224,11 +214,11 @@
<TMPL_IF NAME="Logout">
<div id="logout">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" trspan="areYouSure">Are you sure ?</h3>
<div class="card border-secondary">
<div class="card-header text-white bg-secondary">
<h3 class="card-title" trspan="areYouSure">Are you sure ?</h3>
</div>
<div class="panel-body buttons">
<div class="card-body buttons">
<a href="<TMPL_VAR NAME="LOGOUT_URL">" class="btn btn-success" role="button">
<span class="glyphicon glyphicon-ok"></span>
<span trspan="imSure">I'm sure</span>

View File

@ -10,12 +10,12 @@
<TMPL_IF NAME="AUTH_URL">
<input type="hidden" name="url" value="<TMPL_VAR NAME="AUTH_URL">" />
</TMPL_IF>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title" trspan="gotNewMessages">You have some new messages</h3>
<div class="card text-white bg-info">
<div class="card-header">
<h3 class="card-title" trspan="gotNewMessages">You have some new messages</h3>
</div>
<div class="panel-body">
<div class="form well">
<div class="card-body">
<div class="form card.card-body">
<TMPL_VAR NAME="NOTIFICATION">
</div>
</div>

View File

@ -6,7 +6,7 @@
<div class="message message-<TMPL_VAR NAME="AUTH_ERROR_TYPE"> alert"><span trmsg="<TMPL_VAR NAME="AUTH_ERROR">"></span></div>
</TMPL_IF>
<div class="panel panel-default">
<div class="card">
<TMPL_IF NAME="DISPLAY_FORM">
@ -85,11 +85,9 @@
</p>
<div class="checkbox">
<label for="resendconfirmation">
<input id="resendconfirmation" type="checkbox" name="resendconfirmation" ariadescribedby="resendconfirmationlabel">
<label id="resendconfirmationlabel" for="resendconfirmation" trspan="yesResendMail">Yes, resend the mail</label>
</label>
<div class="form-check">
<input class="form-check-input" id="resendconfirmation" type="checkbox" name="resendconfirmation" ariadescribedby="resendconfirmationlabel">
<label class="form-check-label" id="resendconfirmationlabel" for="resendconfirmation" trspan="yesResendMail">Yes, resend the mail</label>
</div>
<div class="form-group">

View File

@ -4,7 +4,7 @@
<div class="message message-positive alert"><span trspan="enterTotpCode"></span></div>
<div class="panel panel-default">
<div class="card">
<form action="/totp2fcheck" method="post" class="password" role="form">
<div class="form">

View File

@ -5,8 +5,8 @@
</div>
<main id="menucontent" class="container">
<div class="panel panel-info">
<div class="panel-body">
<div class="card">
<div class="card-body">
<div id="divToHide">
<canvas id="qr"></canvas>

View File

@ -5,8 +5,8 @@
</div>
<main id="menucontent" class="container">
<div class="panel panel-info">
<div class="panel-body">
<div class="card">
<div class="card-body">
<div id="u2fPermission" trspan="u2fPermission" class="alert alert-info">You may be prompted to allow the site permission to access your security keys. After granting permission, the device will start to blink.
</div>
<div class="buttons">

View File

@ -6,7 +6,7 @@
<div class="message message-<TMPL_VAR NAME="AUTH_ERROR_TYPE"> alert"><span trmsg="<TMPL_VAR NAME="AUTH_ERROR">"></span></div>
</TMPL_IF>
<div class="panel panel-default">
<div class="card">
<TMPL_IF NAME="FAILED">
<p trspan="u2fFailed"></p>

View File

@ -4,8 +4,8 @@
<div id="color" class="message message-positive alert"><span id="msg" trspan="clickOnYubikey"></span></div>
</div>
<main id="menucontent" class="container">
<div class="panel panel-info">
<div class="panel-body">
<div class="card text-white bg-info">
<div class="card-body">
<form action="/2fregisters/yubikey/register" method="post">
<div class="form-group">
<b><span trspan="name">Name</span></b> : <input type="text" id="UBKName" name="UBKName" value="MyYubikey"/>