Modifications graphique + prise en compte de l'état actif/expiré
This commit is contained in:
xdrm-brackets
parent
dca56c6247
commit
50ad82eb90
|
|
@ -1,2 +1,2 @@
|
|||
section[data-panel-list]{display:block;position:relative;border-radius:3px;border:1px solid #ccc;background-color:#fff;font-size:.8em}section[data-panel-list]>div[data-header]{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding:.5em .7em;border-radius:3px 3px 0 0;border-bottom:1px solid #ccc;background-color:#f5f5f5;box-shadow:inset 0 0 5px #eee}section[data-panel-list]>div[data-header]>span,section[data-panel-list]>div[data-header]>button{color:#333;font-weight:bold;line-height:2em}section[data-panel-list]>div[data-header]>button{padding:.1em .7em;border-radius:3px;border:1px solid #555;background:#f5f5f5;transition:all .2s ease-in-out}section[data-panel-list]>div[data-header]>button:hover{background:#333;color:#fff}section[data-panel-list]>div[data-description]{display:block;position:relative;border-bottom:1px solid #ccc;padding:.7em .7em;color:#666}section[data-panel-list]>ul[data-list]{display:flex;position:relative;flex-direction:column;justify-content:flex-start;flex-wrap:nowrap;margin:0;padding:0;list-style:none}section[data-panel-list]>ul[data-list]>li[data-element]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;padding:.2em 1em}section[data-panel-list]>ul[data-list]>li[data-element]:not(:last-child){border-bottom:1px solid #ccc}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(1){display:flex;width:10em;height:6em;flex-direction:column;justify-content:flex-end;align-items:center;background:url("/f/svg/token/st/container/666666") center 1em no-repeat;background-size:auto 50%}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(1)>span{display:block;padding:0 .4em;border-radius:3px;border:1px solid #ddd;font-size:.8em;color:#666;text-transform:uppercase;font-weight:bold}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(n+2){display:flex;position:relative;flex:10em;padding:1em;flex-direction:column;justify-content:flex-start;align-items:flex-start;font-size:.9em;color:#666;font-weight:bold}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(n+2)>span[data-prefix]:before{content:attr(data-prefix) ": ";font-weight:normal}section[data-panel-list]>ul[data-list]>li[data-element]>button{padding:.1em .7em;height:2em;border-radius:3px;border:1px solid #de2b08;background:#fff;color:#de2b08;font-weight:bold;transition:all .2s ease-in-out}section[data-panel-list]>ul[data-list]>li[data-element]>button:hover{background:#de2b08;color:#fff}section[data-panel-list]>div[data-add]{display:none;position:relative;padding:1em;border-top:1px solid #ccc;background-color:#f5f5f5;font-weight:bold}section[data-panel-list]>div[data-add].active{display:block}section[data-panel-list]>div[data-add]>input[type='text']{margin:1em 0;padding:.3em .5em;border-radius:3px;border:1px solid #999;background-color:#fff;color:#000;font-weight:normal}
|
||||
section[data-panel-list]{display:block;position:relative;border-radius:3px;border:1px solid #ccc;background-color:#fff;font-size:.8em}section[data-panel-list]>div[data-header]{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding:.5em .7em;border-radius:3px 3px 0 0;border-bottom:1px solid #ccc;background-color:#f5f5f5;box-shadow:inset 0 0 5px #eee}section[data-panel-list]>div[data-header]>span,section[data-panel-list]>div[data-header]>button{color:#333;font-weight:bold;line-height:2em}section[data-panel-list]>div[data-header]>button{padding:.1em .7em;border-radius:3px;border:1px solid #555;background:#f5f5f5;transition:all .2s ease-in-out}section[data-panel-list]>div[data-header]>button:hover{background:#333;color:#fff}section[data-panel-list]>div[data-description]{display:block;position:relative;border-bottom:1px solid #ccc;padding:.7em .7em;color:#666}section[data-panel-list]>ul[data-list]{display:flex;position:relative;flex-direction:column;justify-content:flex-start;flex-wrap:nowrap;margin:0;padding:0;list-style:none}section[data-panel-list]>ul[data-list]>li[data-element]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;padding:.2em 1em}section[data-panel-list]>ul[data-list]>li[data-element]:not(:last-child){border-bottom:1px solid #ccc}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(1){display:flex;width:10em;height:6em;flex-direction:column;justify-content:flex-end;align-items:center;background:url("/f/svg/token/st/container/666666") center 1em no-repeat;background-size:auto 50%}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(1).active{background-image:url("/f/svg/token/st/container/4cbf86")}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(1)>span{display:block;padding:0 .4em;border-radius:3px;border:1px solid #ddd;font-size:.8em;color:#666;text-transform:uppercase;font-weight:bold}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(n+2){display:flex;position:relative;flex:10em;padding:1em;flex-direction:column;justify-content:flex-start;align-items:flex-start;font-size:.9em;color:#666;font-weight:bold}section[data-panel-list]>ul[data-list]>li[data-element]>div:nth-child(n+2)>span[data-prefix]:before{content:attr(data-prefix) ": ";font-weight:normal}section[data-panel-list]>ul[data-list]>li[data-element]>button{padding:.1em .7em;height:2em;border-radius:3px;border:1px solid #de2b08;background:#fff;color:#de2b08;font-weight:bold;transition:all .2s ease-in-out}section[data-panel-list]>ul[data-list]>li[data-element]>button:hover{background:#de2b08;color:#fff}section[data-panel-list]>div[data-add]{display:none;position:relative;padding:1em;border-top:1px solid #ccc;background-color:#f5f5f5;font-weight:bold}section[data-panel-list]>div[data-add].active{display:block}section[data-panel-list]>div[data-add]>input[type='text']{margin:1em 0;padding:.3em .5em;border-radius:3px;border:1px solid #999;background-color:#fff;color:#000;font-weight:normal}
|
||||
/*# sourceMappingURL=global.css.map */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"mappings": "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",
|
||||
"sources": ["global.scss"],
|
||||
"names": [],
|
||||
"file": "global.css"
|
||||
|
|
|
|||
|
|
@ -121,6 +121,12 @@ section[data-panel-list]{
|
|||
background: url('/f/svg/token/st/container/666666') center 1em no-repeat;
|
||||
background-size: auto 50%;
|
||||
|
||||
// Si le token est actif
|
||||
&.active{
|
||||
background-image: url('/f/svg/token/st/container/4cbf86');
|
||||
}
|
||||
|
||||
|
||||
// Texte pour le type d'element
|
||||
& > span{
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -32,14 +32,22 @@
|
|||
public static function getAll(){
|
||||
/* [1] On prepare et execute la requete
|
||||
=========================================================*/
|
||||
$request = Database::getPDO()->query("SELECT id_token as id, name, token, creation, expires
|
||||
$request = Database::getPDO()->query("SELECT id_token as id, name, token, expires
|
||||
FROM api_token
|
||||
WHERE CURDATE() BETWEEN creation AND expires
|
||||
ORDER BY creation ASC");
|
||||
ORDER BY expires DESC");
|
||||
|
||||
/* [2] On recupere et retourne les donnees
|
||||
/* [2] On recupere les donnees et ajout le status d'expire ou non
|
||||
=========================================================*/
|
||||
return Database::delNumeric( $request->fetchAll() );
|
||||
$data = Database::delNumeric( $request->fetchAll() );
|
||||
|
||||
// Si le token est expire
|
||||
foreach($data as $i=>$token)
|
||||
$data[$i]['expired'] = time() > strtotime($token['expires']);
|
||||
|
||||
|
||||
/* [3] On retourne le resultat
|
||||
=========================================================*/
|
||||
return $data;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -63,7 +71,7 @@
|
|||
=========================================================*/
|
||||
$check = Database::getPDO()->prepare("SELECT id_token
|
||||
FROM api_token
|
||||
WHERE CURDATE() BETWEEN creation AND expires
|
||||
WHERE CURDATE() < expires
|
||||
AND token = :token");
|
||||
$check->execute(array( ':token' => $token ));
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ $tokens = $req_tokens->answer();
|
|||
<button id='add-token'>Ajouter un accès</button>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<!-- Description des tokens actifs -->
|
||||
<div data-description>Liste des accès distants actifs. Ils seront automatiquement désactivés a la date d'expiration.</div>
|
||||
|
||||
<!-- Conteneur de la liste des elements -->
|
||||
|
|
@ -38,13 +38,19 @@ $tokens = $req_tokens->answer();
|
|||
<?php
|
||||
foreach($tokens as $token){
|
||||
echo "<li data-element data-id='".$token['id']."'>";
|
||||
echo "<div><span data-prefix='Type'>token</span></div>";
|
||||
// Si token actif
|
||||
if( !$token['expired'] )
|
||||
echo "<div class='active'><span>actif</span></div>";
|
||||
else
|
||||
echo "<div><span>Expiré</span></div>";
|
||||
|
||||
|
||||
echo "<div>";
|
||||
echo "<span>".$token['name']."</span>";
|
||||
echo "<span data-prefix='Creation'>".Database::frDate($token['creation'])."</span>";
|
||||
echo "<span data-prefix='Expiration'>".Database::frDate($token['expires'])."</span>";
|
||||
echo "<span data-prefix='Token'>".$token['token']."</span>";
|
||||
echo "</div>";
|
||||
|
||||
echo "<button class='remove-token'>Supprimer</button>";
|
||||
echo "</li>";
|
||||
}
|
||||
|
|
@ -57,7 +63,7 @@ $tokens = $req_tokens->answer();
|
|||
<!-- Creation d'un nouvel element (cache) -->
|
||||
<div data-add>
|
||||
<label for='add-name'>Nom de l'accès</label><br><input type='text' placeholder='token' id='add-name'><br>
|
||||
<label for='add-duration'>Duree de vie (jours)</label><br><input type='text' placeholder='110' id='add-duration'><br>
|
||||
<label for='add-duration'>Duree de vie (jours)</label><br><input type='text' placeholder='10' id='add-duration'><br>
|
||||
<input type='button' value='Ajouter un accès'>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue