commit b7203c8058edd504adcf1b66a58eee526a4d694c parent e1ddfb866dc45ae6e71a4d4e8925d5d5b9a69bdf Author: Martin Schanzenbach <schanzen@gnunet.org> Date: Thu, 17 Apr 2025 22:13:04 +0200 add fancy progress icons Diffstat:
| M | static/css/style.css | | | 39 | +++++++++++++++++++++++++++++++++++++++ |
| M | web/templates/landing_email.html | | | 50 | ++++++++++++++++++++++++++++++-------------------- |
| M | web/templates/landing_phone.html | | | 44 | +++++++++++++++++++++++++++----------------- |
| M | web/templates/lookup_result.html | | | 86 | ++++++++++++++++++++++++++++++++++++++++++++----------------------------------- |
| M | web/templates/validation_landing.html | | | 156 | ++++++++++++++++++++++++++++++++++++++++++++------------------------------------ |
5 files changed, 230 insertions(+), 145 deletions(-)
diff --git a/static/css/style.css b/static/css/style.css @@ -8,6 +8,45 @@ border-radius: 1em; } +ul.timeline { + list-style-type: none; + position: relative; +} +ul.timeline:before { + content: ' '; + background: #d4d9df; + display: inline-block; + position: absolute; + left: 29px; + width: 2px; + height: 100%; + z-index: 400; +} +ul.timeline > li { + margin: 20px 0; + padding-left: 20px; +} + +ul.timeline > li:before { + content: ' '; + background: white; + display: inline-block; + position: absolute; + border-radius: 50%; + border: 3px solid #ddd; + left: 20px; + width: 20px; + height: 20px; + z-index: 400; +} + +ul.timeline > li.inprogress:before { + border: 3px solid #22c0e8; +} + +ul.timeline > li.done:before { + border: 3px solid #333; +} /*.card { // box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1); // border: 1px solid #e6e4e9; diff --git a/web/templates/landing_email.html b/web/templates/landing_email.html @@ -21,30 +21,40 @@ <p class="mb-0">{{.error}}</p> </div> </div> - {{end}} - <div class="card"> - <div class="card-body"> - <h4 class="cart-title">{{ call .tr "lookupEmail" }}</h4> - <hr> - <p class="card-text">{{ call .tr "lookupEmailDescription" }}</p> + {{end}} + <div class="row"> + <div class="col-2"> + <ul class="timeline"> + <li class="inprogress">{{ call .tr "lookup" }}</li> + <li>{{ call .tr "registerOrModify" }}</li> + <li>{{ call .tr "confirm" }}</li> + </ul> </div> - <form method="get" action="/lookup/email"> - <div class="row"> - <div class="col-lg-6 offset-lg-3 text-center"> - <div class="input-group mb-3"> - <div class="form-floating"> - <input type="email" name="address" id="floatingInput" class="form-control" placeholder="jdoe@example.com" aria-label="Default" aria-describedby="inputGroup-sizing-default" data-sb-validations="required,email"> - <label for="floatingInput">{{ call .tr "email" }}</label> + <div class="col-8"> + <div class="card"> + <div class="card-body"> + <h4 class="cart-title">{{ call .tr "lookupEmail" }}</h4> + <hr> + <p class="card-text">{{ call .tr "lookupEmailDescription" }}</p> + </div> + <form method="get" action="/lookup/email"> + <div class="row"> + <div class="col-lg-6 offset-lg-3 text-center"> + <div class="input-group mb-3"> + <div class="form-floating"> + <input type="email" name="address" id="floatingInput" class="form-control" placeholder="jdoe@example.com" aria-label="Default" aria-describedby="inputGroup-sizing-default" data-sb-validations="required,email"> + <label for="floatingInput">{{ call .tr "email" }}</label> + </div> + <div class="invalid-feedback text-white" data-sb-feedback="emailAddressBelow:required">Email Address is required.</div> + <div class="invalid-feedback text-white" data-sb-feedback="emailAddressBelow:email">Email Address is not valid.</div> + <input class="input-group-text btn btn-outline-primary" type="submit" value="{{ call .tr "lookup" }}"> + </div> </div> - <div class="invalid-feedback text-white" data-sb-feedback="emailAddressBelow:required">Email Address is required.</div> - <div class="invalid-feedback text-white" data-sb-feedback="emailAddressBelow:email">Email Address is not valid.</div> - <input class="input-group-text btn btn-outline-primary" type="submit" value="{{ call .tr "lookup" }}"> </div> - </div> + </form> </div> - </form> + </div> </div> - </div> - {{ template "footer.html" . }} + {{ template "footer.html" . }} </body> </html> diff --git a/web/templates/landing_phone.html b/web/templates/landing_phone.html @@ -22,27 +22,37 @@ </div> </div> {{end}} - <div class="card"> - <div class="card-body"> - <h4 class="card-title">{{ call .tr "lookupPhoneNr" }}</h4> - <p class="card-text">{{ call .tr "lookupPhoneDescription" }}</p> + <div class="row"> + <div class="col-2"> + <ul class="timeline"> + <li class="inprogress">{{ call .tr "lookup" }}</li> + <li>{{ call .tr "registerOrModify" }}</li> + <li>{{ call .tr "confirm" }}</li> + </ul> </div> - <form method="get" action="/lookup/phone"> - <div class="row"> - <div class="col-lg-6 offset-lg-3 text-center"> - <div class="input-group mb-3"> - <span class="input-group-text" id="inputGroup-sizing-default">+</span> - <div class="form-floating"> - <input type="text" name="address" id="phoneInput" class="form-control" aria-label="Default" placeholder="49123456789" aria-describedby="inputGroup-sizing-default"> - <label for="phoneInput">{{ call .tr "phone" }}</label> + <div class="col-8"> + <div class="card"> + <div class="card-body"> + <h4 class="card-title">{{ call .tr "lookupPhoneNr" }}</h4> + <p class="card-text">{{ call .tr "lookupPhoneDescription" }}</p> + </div> + <form method="get" action="/lookup/phone"> + <div class="row"> + <div class="col-lg-6 offset-lg-3 text-center"> + <div class="input-group mb-3"> + <span class="input-group-text" id="inputGroup-sizing-default">+</span> + <div class="form-floating"> + <input type="text" name="address" id="phoneInput" class="form-control" aria-label="Default" placeholder="49123456789" aria-describedby="inputGroup-sizing-default"> + <label for="phoneInput">{{ call .tr "phone" }}</label> + </div> + <input class="input-group-text btn btn-outline-primary" type="submit" value="{{ call .tr "lookup" }}"> + </div> </div> - <input class="input-group-text btn btn-outline-primary" type="submit" value="{{ call .tr "lookup" }}"> </div> - </div> + </form> </div> - </form> + </div> </div> - </div> - {{ template "footer.html" . }} + {{ template "footer.html" . }} </body> </html> diff --git a/web/templates/lookup_result.html b/web/templates/lookup_result.html @@ -28,51 +28,61 @@ </div> </div> <div class="container pt-5"> - <div class="card"> - {{if .available}} - <div class="card-body"> - <h4 class="card-title">{{ call .tr "available" }}</h4> - <hr> - <p class="card-text">{{ call .tr "notYetLinked" .address}}</p> - </div> - <form id="regform"> - <input id="methodInput" type="hidden" name="method" value="{{.method}}"> - <input id="addrInput" type="hidden" name="address" value="{{.address}}"> - <div class="row"> - <div class="col-lg-8 offset-lg-2 text-center"> - <div class="input-group mb-3"> - <!--<span class="input-group-text" id="inputGroup-sizing-default">{{.address}}: </span>--> - <input id="uriInput" name="target_uri" type="text" class="form-control" placeholder="{{ call .tr "paymentSystemAddressExample" }}" aria-label="Default" aria-describedby="inputGroup-sizing-default"> - <input class="input-group-text btn btn-outline-primary" type="submit" value="{{ call .tr "linkIt" }}"> + <div class="row"> + <div class="col-2"> + <ul class="timeline"> + <li class="done">{{ call .tr "lookup" }}</li> + <li class="inprogress">{{ call .tr "registerOrModify" }}</li> + <li>{{ call .tr "confirm" }}</li> + </ul> + </div> + <div class="col-8"> + <div class="card"> + {{if .available}} + <div class="card-body"> + <h4 class="card-title">{{ call .tr "available" }}</h4> + <hr> + <p class="card-text">{{ call .tr "notYetLinked" .address}}</p> + </div> + <form id="regform"> + <input id="methodInput" type="hidden" name="method" value="{{.method}}"> + <input id="addrInput" type="hidden" name="address" value="{{.address}}"> + <div class="row"> + <div class="col-lg-8 offset-lg-2 text-center"> + <div class="input-group mb-3"> + <!--<span class="input-group-text" id="inputGroup-sizing-default">{{.address}}: </span>--> + <input id="uriInput" name="target_uri" type="text" class="form-control" placeholder="{{ call .tr "paymentSystemAddressExample" }}" aria-label="Default" aria-describedby="inputGroup-sizing-default"> + <input class="input-group-text btn btn-outline-primary" type="submit" value="{{ call .tr "linkIt" }}"> + </div> </div> </div> + </form> + {{else}} + <div class="card-body" role="alert"> + <h4 class="card-title">{{ call .tr "lookupResultFound" }}</h4> + <hr> + <p class="card-text">{{ call .tr "isLinked" .address }}</p> </div> - </form> - {{else}} - <div class="card-body" role="alert"> - <h4 class="card-title">{{ call .tr "lookupResultFound" }}</h4> - <hr> - <p class="card-text">{{ call .tr "isLinked" .address }}</p> - </div> - <form id="regform"> - <input id="methodInput" type="hidden" name="method" value="{{.method}}"> - <input id="addrInput" type="hidden" name="address" value="{{.address}}"> - <input id="uriInput" type="hidden" name="target_uri" value=""> - <div class="row"> - <div class="col-lg-6 offset-lg-3 text-center"> - <div class="input-group mb-3"> - <!--<span class="input-group-text" id="inputGroup-sizing-default">{{.address}}: </span>--> - <input disabled="disabled" type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" value="{{.result}}"> - <input class="input-group-text btn btn-outline-danger" type="submit" value="{{ call .tr "deleteIt" }}"> + <form id="regform"> + <input id="methodInput" type="hidden" name="method" value="{{.method}}"> + <input id="addrInput" type="hidden" name="address" value="{{.address}}"> + <input id="uriInput" type="hidden" name="target_uri" value=""> + <div class="row"> + <div class="col-lg-6 offset-lg-3 text-center"> + <div class="input-group mb-3"> + <!--<span class="input-group-text" id="inputGroup-sizing-default">{{.address}}: </span>--> + <input disabled="disabled" type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" value="{{.result}}"> + <input class="input-group-text btn btn-outline-danger" type="submit" value="{{ call .tr "deleteIt" }}"> + </div> </div> </div> - </div> - </form> - {{end}} + </form> + {{end}} + </div> </div> + </div> </div> - </div> - {{ template "footer.html" . }} + {{ template "footer.html" . }} </body> <script> var form = document.getElementById('regform'); diff --git a/web/templates/validation_landing.html b/web/templates/validation_landing.html @@ -1,84 +1,100 @@ <!DOCTYPE html> <html lang="en"> - <head> - <!-- Required meta tags --> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> - <link href="/css/bootstrap.min.css" rel="stylesheet"> - <link href="/css/style.css" rel="stylesheet"> - <title>Validation Landing Page</title> - </head> - <body> - {{if .error}} - <div class="container pt-5"> - <div id="ebanner" class="alert alert-danger" role="alert"> - <h4 class="alert-heading">An error occured!</h4> - <hr> - <p class="mb-0">{{.error}}.</p> - </div> - </div> - {{end}} - <div class="container pt-5"> - <div id="sbanner" class="alert alert-success" role="alert" hidden> - <h4 class="alert-heading">Registration successful!</h4> - <hr> - You may now <a href="/">go back to the front page</a>. - </div> + <head> + <!-- Required meta tags --> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <link href="/css/bootstrap.min.css" rel="stylesheet"> + <link href="/css/style.css" rel="stylesheet"> + <link href="/fontawesome/css/fontawesome.css" rel="stylesheet" /> + <link href="/fontawesome/css/solid.css" rel="stylesheet" /> + <title>{{ call .tr "title" }}</title> + </head> + <body> + {{ template "nav.html" . }} + {{if .error}} + <div class="container pt-5"> + <div id="ebanner" class="alert alert-danger" role="alert"> + <h4 class="alert-heading">An error occured!</h4> + <hr> + <p class="mb-0">{{.error}}.</p> </div> - {{if .WalletLink}} - <div class="qr"> - <h1>Scan this QR code with your Taler Wallet to complete your registration.</h1> - <a href="{{.WalletLink}}"> - <img class="taldir-qr" src="{{.QRCode}}"/> - </a> + </div> + {{end}} + <div class="container pt-5"> + <div id="sbanner" class="alert alert-success" role="alert" hidden> + <h4 class="alert-heading">Registration successful!</h4> + <hr> + You may now <a href="/">go back to the front page</a>. </div> - {{else}} - <div id="regcontainer" class="container pt-5"> - <div class="alert alert-info" role="alert"> - <h4 class="alert-heading">{{ call .tr "confirmation" }}</h4> - <hr> - {{ .confirmDeletionOrRegistration }} - <div class="row mt-2"> - <div class="col-lg-6 offset-lg-3 text-center"> - <form id="regform"> - <input id="haddrInput" name="haddr" type="hidden" value="{{.haddress}}"> - <input id="solutionInput" name="solution" type="hidden" value="{{.solution}}"> - <input class="btn btn-outline-primary" type="submit" value="{{ call .tr "confirm" }}"> - </form> + </div> + {{if .WalletLink}} + <div class="qr"> + <h1>Scan this QR code with your Taler Wallet to complete your registration.</h1> + <a href="{{.WalletLink}}"> + <img class="taldir-qr" src="{{.QRCode}}"/> + </a> + </div> + {{else}} + <div class="container pt-5"> + <div class="row"> + <div class="col-2"> + <ul class="timeline"> + <li class="done">{{ call .tr "lookup" }}</li> + <li class="done">{{ call .tr "registerOrModify" }}</li> + <li id="confirmitem" class="inprogress">{{ call .tr "confirm" }}</li> + </ul> + </div> + <div class="col-8"> + <div id="regcontainer" class="card"> + <div class="card-body"> + <h4 class="card-title">{{ call .tr "confirmation" }}</h4> + <p class="card-text">{{ .confirmDeletionOrRegistration }}</p> + <div class="row mt-2"> + <div class="col-lg-6 offset-lg-3 text-center"> + <form id="regform"> + <input id="haddrInput" name="haddr" type="hidden" value="{{.haddress}}"> + <input id="solutionInput" name="solution" type="hidden" value="{{.solution}}"> + <input id="confirmbutton" class="btn btn-outline-primary" type="submit" value="{{ call .tr "confirm" }}"> + </form> + </div> + </div> </div> </div> </div> </div> {{end}} - {{ template "footer.html" . }} - </body> - <script> - var form = document.getElementById('regform'); - form.onsubmit = function(event){ - var xhr = new XMLHttpRequest(); - var data = new FormData(form); - var haddr = data.get("haddr"); - data.delete("haddr"); - xhr.open('POST','/' + haddr) - xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); - var json = JSON.stringify(Object.fromEntries(data)); - xhr.send(json); + {{ template "footer.html" . }} + </body> + <script> + var form = document.getElementById('regform'); + form.onsubmit = function(event){ + var xhr = new XMLHttpRequest(); + var data = new FormData(form); + var haddr = data.get("haddr"); + data.delete("haddr"); + xhr.open('POST','/' + haddr) + xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); + var json = JSON.stringify(Object.fromEntries(data)); + xhr.send(json); - xhr.onreadystatechange = function() { - if (xhr.readyState == XMLHttpRequest.DONE) { - if (xhr.status == 204) { - var sbanner = document.getElementById('sbanner'); - var regcontainer = document.getElementById('regcontainer'); - sbanner.hidden = false; - regcontainer.hidden = true; - } else { - window.location.href = "?error=Registration failed"; - } + xhr.onreadystatechange = function() { + if (xhr.readyState == XMLHttpRequest.DONE) { + if (xhr.status == 204) { + var sbanner = document.getElementById('sbanner'); + var confirmitem = document.getElementById('confirmitem'); + var confirmbutton = document.getElementById('confirmbutton'); + sbanner.hidden = false; + confirmitem.classList.add("done"); + confirmbutton.disabled = true; + } else { + window.location.href = "?error=Registration failed"; } } - - //Dont submit the form. - return false; } - </script> + + //Dont submit the form. + return false; + } + </script> </html>