refactor: enhance structure and styling in base, user consent, and login templates for consistency with CIE branding
This commit is contained in:
gabdevele
@@ -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>
|
||||
|
||||
<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' %}">
|
||||
{% csrf_token %}
|
||||
{% 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 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>
|
||||
</aside>
|
||||
</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 %}
|
||||
|
||||
Reference in New Issue
Block a user