refactor: enhance structure and styling in base, user consent, and login templates for consistency with CIE branding
This commit is contained in:
+63
-230
@@ -1,241 +1,74 @@
|
|||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="it">
|
<html class="h-100" lang="it">
|
||||||
<head>
|
<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>
|
<title>{% block page_title %}CIE Login{% endblock page_title %}</title>
|
||||||
<style>
|
<meta charset="utf-8">
|
||||||
:root {
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
--cie-blue: #0059b3;
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||||
--cie-blue-dark: #004b98;
|
|
||||||
--cie-line: #d8e6f3;
|
<link rel="stylesheet" href="https://idserver.servizicie.interno.gov.it/idp/css/l12/bootstrap-italia.min.css">
|
||||||
--cie-input-line: #8ea3ba;
|
<link rel="stylesheet" href="https://idserver.servizicie.interno.gov.it/idp/css/l12/l12.css?202603172014">
|
||||||
--cie-text: #1d3552;
|
|
||||||
--cie-muted: #607792;
|
<link rel="apple-touch-icon" sizes="57x57" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-57x57.png">
|
||||||
--cie-bg: #fbfcfe;
|
<link rel="apple-touch-icon" sizes="60x60" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-60x60.png">
|
||||||
--cie-white: #ffffff;
|
<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">
|
||||||
* { box-sizing: border-box; }
|
<link rel="apple-touch-icon" sizes="114x114" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-114x114.png">
|
||||||
html, body { margin: 0; padding: 0; }
|
<link rel="apple-touch-icon" sizes="120x120" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-120x120.png">
|
||||||
body {
|
<link rel="apple-touch-icon" sizes="144x144" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-144x144.png">
|
||||||
font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
|
<link rel="apple-touch-icon" sizes="152x152" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-152x152.png">
|
||||||
color: var(--cie-text);
|
<link rel="apple-touch-icon" sizes="180x180" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/apple-touch-icon-180x180.png">
|
||||||
background:
|
<link rel="icon" type="image/png" sizes="32x32" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/favicon-32x32.png">
|
||||||
linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,251,254,1) 100%);
|
<link rel="icon" type="image/png" sizes="192x192" href="https://idserver.servizicie.interno.gov.it/idp/images/favicon/android-chrome-192x192.png">
|
||||||
}
|
|
||||||
a { color: var(--cie-blue); }
|
<script src="https://idserver.servizicie.interno.gov.it/idp/js/l12/bootstrap-italia.bundle.min.js"></script>
|
||||||
.cie-page { min-height: 100vh; }
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||||
.cie-header {
|
{% block extra_head %}{% endblock extra_head %}
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="d-flex flex-column h-100">
|
||||||
<div class="cie-page">
|
<div id="wrapperL12-header" class="it-header-wrapper ipzs-bb py-2">
|
||||||
<header class="cie-header">
|
<div class="it-header-slim-wrapper">
|
||||||
<div class="cie-header-inner">
|
<div class="container">
|
||||||
<img class="cie-ministry-logo" src="https://idserver.servizicie.interno.gov.it/idp/images/l12/[email protected]" alt="Ministero dell'Interno">
|
<div class="row it-header-slim-wrapper-content">
|
||||||
<div class="cie-header-right">
|
<div class="col">
|
||||||
<div class="cie-lang">ITA</div>
|
<img src="https://idserver.servizicie.interno.gov.it/idp/images/l12/[email protected]" alt="Ministero dell'Interno"/>
|
||||||
<img class="cie-logo" src="https://idserver.servizicie.interno.gov.it/idp/images/l12/CIE.png" alt="Carta d'identita elettronica">
|
</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>
|
||||||
|
</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>
|
||||||
</header>
|
</div>
|
||||||
<main class="cie-main">
|
</div>
|
||||||
|
|
||||||
|
<div id="wrapperL12">
|
||||||
|
<div class="container my-4">
|
||||||
{% block container %}{% endblock container %}
|
{% block container %}{% endblock container %}
|
||||||
</main>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -4,48 +4,60 @@
|
|||||||
{% block page_title %}Rilascio Attributi{% endblock page_title %}
|
{% block page_title %}Rilascio Attributi{% endblock page_title %}
|
||||||
|
|
||||||
{% block container %}
|
{% block container %}
|
||||||
<p class="cie-kicker">{% trans "Richiesta d'accesso CIE livello 2" %}</p>
|
<div class="row">
|
||||||
<h1 class="cie-title">{{ client_organization_name|default:"Visione" }}</h1>
|
<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 %}
|
||||||
|
<div class="container attribute-release mt-3 px-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="text-justify">
|
||||||
|
<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>
|
||||||
|
|
||||||
<section class="cie-login-card">
|
<div class="my-5">
|
||||||
<div class="cie-panel" style="width:100%;">
|
<ul class="c3 text-justify ml-n3 f09">
|
||||||
<form method="post" action="{% url 'oidc_provider_consent' %}">
|
{% for claim in user_claims %}
|
||||||
{% csrf_token %}
|
<li>
|
||||||
{% for hidden in form.hidden_fields %}
|
<span class="c3">{{ claim }}</span>
|
||||||
{{ hidden }}
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="text-justify">
|
<div class="row buttons mt-4 pb-3">
|
||||||
<p class="cie-side-copy" style="margin-top:0;">
|
<div class="col-12 col-lg-4 text-center mb-3">
|
||||||
Richiesta di accesso CIE <strong>Livello</strong> <strong>{{ session.acr|default:"2" }}</strong>
|
<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>
|
||||||
</p>
|
</div>
|
||||||
<p class="cie-side-copy" style="margin-bottom:0;">
|
<div class="col-12 col-lg-4 text-center">
|
||||||
I seguenti dati stanno per essere inviati a:<br>
|
<button type="submit" class="btn btn-primary w-100" id="agree">Prosegui</button>
|
||||||
<strong style="color:#0059b3; font-size:20px;">{{ client_organization_name|default:"Visione" }}</strong>
|
</div>
|
||||||
</p>
|
<div class="col-12 col-lg-4"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col"></div>
|
||||||
<div class="cie-side-box" style="margin-top:32px;">
|
</div>
|
||||||
<ul class="cie-claims" style="margin-top:0;">
|
|
||||||
{% for claim in user_claims %}
|
|
||||||
<li>{{ claim }}</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>
|
|
||||||
|
|
||||||
<p class="cie-bottom-links" style="margin-top:0;">
|
|
||||||
{% trans "Se procedi le informazioni sopra riportate saranno trasmesse al servizio." %}
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div class="col-1 col-md-2 d-none d-sm-flex"></div>
|
||||||
|
</div>
|
||||||
{% endblock container %}
|
{% endblock container %}
|
||||||
|
|||||||
@@ -1,66 +1,140 @@
|
|||||||
{% extends 'op_base.html' %}
|
{% extends 'op_base.html' %}
|
||||||
{% load i18n %}
|
{% 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 %}
|
{% block container %}
|
||||||
<p class="cie-kicker">{% trans "Richiesta d'accesso CIE livello 2" %}</p>
|
<div class="row">
|
||||||
<h1 class="cie-title">{{ client_organization_name|default:"Visione" }}</h1>
|
<div class="col-1 col-md-2 col-lg-1 d-none d-sm-flex"></div>
|
||||||
|
<div class="col">
|
||||||
<section class="cie-login-card">
|
<div class="row">
|
||||||
<div class="cie-login-grid">
|
<div id="title" class="mb-4 col">
|
||||||
<div class="cie-panel">
|
<p class="c1">
|
||||||
<h2 class="cie-panel-title">{% trans "Entra con le tue credenziali CIE" %}</h2>
|
<strong>RICHIESTA D'ACCESSO CIE LIVELLO 2</strong>
|
||||||
<form method="post" action="{% url 'oidc_provider_authnrequest' %}">
|
</p>
|
||||||
{% csrf_token %}
|
<h1>{{ client_organization_name|default:"Visione" }}</h1>
|
||||||
{% for form_field in form.visible_fields %}
|
|
||||||
<div class="cie-field">
|
|
||||||
{% if form_field.field.widget.input_type %}
|
|
||||||
<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" %}
|
|
||||||
</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>
|
|
||||||
</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 %}
|
|
||||||
</p>
|
|
||||||
<div class="cie-side-box">
|
|
||||||
{% trans "Se annulli o rifiuti autorizzazione, browser tornerà sempre a Visione." %}
|
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div class="col-1 col-md-2 col-lg-1 d-none d-sm-flex"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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 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
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ipzs-validator" id="usernameError"> </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"> </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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1 col-md-2 col-lg-1 d-none d-sm-flex"></div>
|
||||||
|
</div>
|
||||||
{% endblock container %}
|
{% endblock container %}
|
||||||
|
|||||||
Reference in New Issue
Block a user