Skip to content

Commit

Permalink
Feat/UI ux update (#223)
Browse files Browse the repository at this point in the history 
* feat: modified svg and error page loading

* fix: changed h3 and h4 to h1 and h2

* Review and update the subtitles

* fix: restored file

* feat: added button to retry the authentication and to reload the qrcode

* feat: added button to retry

* fix: button to retry
  • Loading branch information
@Gartic99
Gartic99 authored Jan 11, 2024
1 parent 590f3e6 commit d2ab68d
Showing 1 changed file with 70 additions and 47 deletions.
117 changes: 70 additions & 47 deletions example/satosa/templates/qr_code.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,50 +2,50 @@


{% block body %}

<div class="py-md-5 bd-content">
<div class="card-wrapper card-space">
<div class="card card-bg no-after">
<div class="card-body">
<div class="row">
<p id="content-title" class="qr-code-title text-center">Inquadra il codice QR</p>
</div>
<div id="content" class="text-center">
<div class="row">
<div id="content-text" class="qr-code-text">Usa la funzionalità "Inquadra" dell'app IO per accedere con IT Wallet al servizio.</div>
</div>
<br>
<div id="content-qrcode" class="row">
<span id="content-qrcode-payload" style="
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;">
</span>
<div id="content-qrcode-info">
<div class="card card-bg no-after">
<div class="card-body">
<div class="row">
<p id="content-title" class="qr-code-title text-center">Inquadra il codice QR</p>
</div>
<div id="content" class="text-center">
<div class="row">
<div id="content-text" class="qr-code-text">Usa la funzionalità "Inquadra" dell'app IO per accedere con IT Wallet al servizio.</div>
</div>
<br>
<div id="content-qrcode" class="row">
<span id="content-qrcode-payload" style="
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;">
</span>
<div id="content-qrcode-info">
<p id="content-qrcode-info-text" class="text-helper text-info">
Il codice è valido per <b id="timer"></b> secondi
Il codice è valido per <b id="timer"></b> secondi
</p>
<p id="content-qrcode-subtitle" class="qr-code-text" hidden>
Puoi trovarla direttamente all'interno dell'app IO.
Se hai più dispositivi mobili,
scegli su quale dispositivo preferisci ricevere le notifiche.
Puoi trovarla direttamente all'interno dell'app IO.
Se hai più dispositivi mobili,
scegli su quale dispositivo preferisci ricevere le notifiche.
</p>

<div id="content-function" class="text-center button-container mt-2">
<button class="btn btn-outline-primary"
action="action"
onclick="window.history.go(-1); return false;"
<button class="btn btn-outline-primary"
action="action"
onclick="window.history.go(-1); return false;"
>
<span>Indietro</span>
</button>
<span>Indietro</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let qrcode = document.getElementById("content-qrcode-payload")
qrcode.innerHTML = ''
Expand All @@ -56,7 +56,7 @@
});
</script>
<script>
let failureTitle = "Autenticazione fallita. Per accedere al servizio prova ad autenticarti nuovamente prestando il consenso alla presentazione dei tuoi dati dall'app IO.";
let failureTitle = "Autenticazione fallita.";
let failureText = "Qualcosa non ha funzionato. Premi “Riprova” per autenticarti nuovamente oppure segui le istruzioni visibili sull’app IO.";
let crossImg = "/static/img/cross.svg";

Expand All @@ -68,8 +68,9 @@
let connectedTitle = "Autenticazione completata";
let connectedText = "Da questo momento puoi iniziare a utilizzare il servizio";
let connectedImg = "/static/img/check.svg";

let qrCodeExpiredInfo = "Il QR code non è più valido.";
let qrCodeReloadLabel = "Aggiorna codice QR";
let retryLabel = "Riprova";

let expirationTime = "{{ qrcode_expiration_time }}";
let pollingInterval;
Expand All @@ -93,16 +94,16 @@
changeText(connectedText);
changeQrCodeImg(connectedImg);
$('#content-qrcode-info').html(`
<div id="content-function" class="text-center button-container mt-2">
<button href="${data.response_url}"
class="btn btn-primary"
aria-haspopup="false"
aria-expanded="false"
data-focus-mouse="false"
>
<span>${clickAccessLabel}</span>
</button>
</div>`
<div id="content-function" class="text-center button-container mt-2">
<button href="${data.response_url}"
class="btn btn-primary"
aria-haspopup="false"
aria-expanded="false"
data-focus-mouse="false"
>
<span>${clickAccessLabel}</span>
</button>
</div>`
);
}

Expand All @@ -111,6 +112,17 @@
blankQRcode();
clearInterval(countdown);
changeQrCodeInfo(qrCodeExpiredInfo);
$('#content-function').append(`
<button
class="btn btn-primary"
aria-haspopup="false"
aria-expanded="false"
data-focus-mouse="false"
onclick="window.location.reload(true)"
>
<b>${qrCodeReloadLabel}</b>
</button>`
);
}

function serverError(data, textStatus, jqXHR){
Expand All @@ -123,7 +135,18 @@
changeTitle(failureTitle);
changeText(failureText);
changeQrCodeImg(crossImg);
changeQrCodeInfo(null)
$('#content-qrcode-info').html(`
<div id="content-function" class="text-center button-container mt-2">
<button href=""
class="btn btn-outline-primary"
aria-haspopup="false"
aria-expanded="false"
data-focus-mouse="false"
>
<span>${retryLabel}</span>
</button>
</div>`
);
}

function changeTitle(str){
Expand Down

0 comments on commit d2ab68d

Please sign in to comment.