Skip to content

Commit 723fd38

Browse files
peppelinuxpeppelinux
committed
qr-code page updates
1 parent 14689c0 commit 723fd38

8 files changed

Lines changed: 107 additions & 20 deletions

File tree

‎docs/OPENID4VCI-SATOSA-FRONTEND.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,9 @@ section, it's possible to override them or add new ones.
6666
| Key | Description | Example Value |
6767
| ----------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------ |
6868
| `size` | Size of the QR code in pixels | `250` |
69-
| `color` | Hex color code for the QR code | `"#000000"` |
69+
| `color` | Hex color code for the QR code | `"#0072CE"` |
7070
| `expiration_time` | Expiration time of the QR code in seconds | `120` |
71-
| `logo_path` | Relative path to the logo image, used in the center of the QR code (relative to `static_storage_url`) | `"wallet-it/wallet-icon-blue.svg"` |
71+
| `logo_path` | Relative path to the logo image, used in the center of the QR code (relative to `static_storage_url`) | `"it-wallet/wallet-icon-blue.svg"` |
7272
| `ui.static_storage_url` | Base URL or path for serving static assets (e.g., CSS, JS, images). Can be set via environment variable. | `!ENV SATOSA_BASE_STATIC` |
7373
| `ui.template_folder` | Path to the folder containing HTML templates, relative to the project root. | `templates` |
7474
| `ui.qrcode_template` | Filename of the HTML template used to render a QR code page. | `qr_code.html` |

‎docs/TOOLS-QRCODE.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ QR code settings are configured in the SATOSA backend/frontend YAML under `confi
1414
```yaml
1515
qrcode:
1616
size: 250 # Size in pixels
17-
color: "#000000" # Hex color for QR modules
17+
color: "#0072CE" # Hex color for QR modules
1818
expiration_time: 120 # Seconds until expiration
19-
logo_path: "wallet-it/wallet-icon-blue.svg" # Logo in center (relative to static_storage_url)
19+
logo_path: "it-wallet/wallet-icon-blue.svg" # Logo in center (relative to static_storage_url)
2020
ui:
2121
static_storage_url: "https://localhost/static"
2222
template_folder: "templates"

‎integration_test/conf/openid4vci_frontend.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,9 @@ config:
6464
qrcode_template: "qr_code.html"
6565
authorization_error_template: "authorization_error.html"
6666
size: 250 # px
67-
color: '#000000' # hex
67+
color: '#0072CE' # hex
6868
expiration_time: 120 # seconds
69-
logo_path: 'wallet-it/wallet-icon-blue.svg' # relative to static_storage_url
69+
logo_path: 'it-wallet/wallet-icon-blue.svg' # relative to static_storage_url
7070

7171
network:
7272
httpc_params: &httpc_params

‎integration_test/conf/potential/wp2uc1/userdenies/pyeudiw_backend.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ config:
3535

3636
qrcode:
3737
size: 250 # px
38-
color: '#000000' # hex
38+
color: '#0072CE' # hex
3939
expiration_time: 120 # seconds
40-
logo_path: 'wallet-it/wallet-icon-blue.svg' # relative to static_storage_url
40+
logo_path: 'it-wallet/wallet-icon-blue.svg' # relative to static_storage_url
4141

4242
response_code:
4343
sym_key: "1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef" # hex string of 64 characters

‎integration_test/conf/pyeudiw_backend.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ config:
3333

3434
qrcode:
3535
size: 250 # px
36-
color: '#000000' # hex
36+
color: '#0072CE' # hex
3737
expiration_time: 120 # seconds
38-
logo_path: 'wallet-it/wallet-icon-blue.svg' # relative to static_storage_url
38+
logo_path: 'it-wallet/wallet-icon-blue.svg' # relative to static_storage_url
3939

4040
response_code:
4141
sym_key: "1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef" # hex string of 64 characters

‎integration_test/static/css/style.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -404,3 +404,70 @@
404404
.btn {
405405
font-size: 18px;
406406
}
407+
408+
.qr-slim-header {
409+
border-bottom: 1px solid #d9e3f1;
410+
padding-bottom: 0.75rem;
411+
}
412+
413+
.qr-back-row {
414+
margin-bottom: 0.5rem;
415+
}
416+
417+
.qr-slim-header-top {
418+
display: flex;
419+
justify-content: space-between;
420+
align-items: center;
421+
gap: 0.75rem;
422+
margin-bottom: 0.5rem;
423+
}
424+
425+
.qr-back-link {
426+
color: #0065cc;
427+
font-weight: 600;
428+
text-decoration: none;
429+
}
430+
431+
.qr-back-link:hover {
432+
text-decoration: underline;
433+
}
434+
435+
.qr-org-name {
436+
color: #17324d;
437+
font-size: 1.125rem;
438+
font-weight: 600;
439+
}
440+
441+
.qr-language-selector {
442+
width: 5.5rem;
443+
}
444+
445+
.qr-cancel-link {
446+
color: #0065cc;
447+
font-weight: 600;
448+
text-decoration: underline;
449+
}
450+
451+
@media (min-width: 900px) {
452+
.qr-language-selector {
453+
display: none;
454+
}
455+
}
456+
457+
@media (max-width: 899.98px) {
458+
.qr-slim-header {
459+
padding-bottom: 0.5rem;
460+
}
461+
462+
.qr-back-row {
463+
margin-bottom: 0.25rem;
464+
}
465+
466+
.qr-slim-header-top {
467+
margin-bottom: 0.25rem;
468+
}
469+
470+
.qr-org-name {
471+
margin: 0;
472+
}
473+
}

‎integration_test/templates/qr_code.html‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,29 @@
66
<div class="card-wrapper card-space">
77
<div class="card card-bg no-after">
88
<div class="card-body">
9+
<div class="qr-slim-header mb-4">
10+
<div class="qr-back-row">
11+
<a class="qr-back-link" href="{{ selection_page_url|default('/Saml2/disco', true) }}" aria-label="Torna alla pagina di selezione">
12+
<span aria-hidden="true">←</span> Torna indietro
13+
</a>
14+
</div>
15+
<div class="qr-slim-header-top">
16+
<p class="qr-org-name mb-0">{{ organization_name|default('Nome Organizzazione', true) }}</p>
17+
<div class="qr-language-selector">
18+
<label class="visually-hidden" for="qr-language">Lingua</label>
19+
<select id="qr-language" class="form-select form-select-sm" aria-label="Selettore lingua">
20+
<option selected>IT</option>
21+
<option>EN</option>
22+
</select>
23+
</div>
24+
</div>
25+
</div>
926
<div class="row">
1027
<p id="content-title" class="qr-code-title text-center">Inquadra il codice QR</p>
1128
</div>
1229
<div id="content" class="text-center">
1330
<div class="row">
14-
<div id="content-text" class="qr-code-text">Usa la funzionalità "Inquadra" dell'app IO per accedere con IT Wallet al servizio.</div>
31+
<div id="content-text" class="lead-lg">Usa la funzionalità di <b>{{ selected_app_name|default('nome app scelta', true) }}</b> o la fotocamera del tuo smartphone</div>
1532
</div>
1633
<br>
1734
<div id="content-qrcode" class="row">
@@ -20,15 +37,15 @@
2037
contents="{{ qrcode_text }}"
2138
module-color="{{ qrcode_color }}"
2239
position-ring-color="{{ qrcode_color }}"
23-
position-center-color="{{ qrcode_color }}",
40+
position-center-color="{{ qrcode_color }}"
2441
style="
2542
width: {{ qrcode_size }}px;
2643
height: {{ qrcode_size }}px;
2744
margin: 2em auto;
2845
background-color: #fff;
2946
"
3047
>
31-
<img class="icon-qr-code" src="{{ static+qrcode_logo_path }}" slot="icon" />
48+
<img class="icon-qr-code" src="{{ static + (selected_app_logo_path|default(qrcode_logo_path, true)) }}" slot="icon" />
3249
</qr-code>
3350
</div>
3451
<div id="content-qrcode-info">
@@ -41,12 +58,15 @@
4158
scegli su quale dispositivo preferisci ricevere le notifiche.
4259
</p>
4360
<div id="content-function" class="text-center button-container mt-2">
44-
<button class="btn btn-outline-primary"
45-
action="action"
61+
<a
62+
class="qr-cancel-link"
63+
{% if entry_page_url %}
64+
href="{{ entry_page_url }}"
65+
{% else %}
66+
href="#"
4667
onclick="window.history.go(-1); return false;"
47-
>
48-
<span>Indietro</span>
49-
</button>
68+
{% endif %}
69+
>Annulla</a>
5070
</div>
5171
</div>
5272
</div>

‎pyeudiw/tests/satosa/frontends/openid4vci/mock_openid4vci.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -267,9 +267,9 @@
267267

268268
MOCK_QR_CODE_CONFIG = {
269269
"size": 250,
270-
"color": "#000000",
270+
"color": "#0072CE",
271271
"expiration_time": 120,
272-
"logo_path": "wallet-it/wallet-icon-blue.svg",
272+
"logo_path": "it-wallet/wallet-icon-blue.svg",
273273
"ui": {
274274
"static_storage_url": "http://localhost:static",
275275
"template_folder": "templates",

0 commit comments

Comments
 (0)