Skip to content
Snippets Groups Projects
Commit 12b0ea3d authored by Julian's avatar Julian
Browse files

Refactor base template and add narrow base template

Fixes #83.

Many authentication-related templates shared the same markup originally
copied from the login template. The duplicated code now lives in
base_narrow.html. Alerts now always have the same width as the main content.
Vertical spacing is now more consistent. The footer is now full-width.
parent e6df5bbe
No related branches found
No related tags found
No related merge requests found
Showing
with 316 additions and 370 deletions
{% extends 'base.html' %}
{% extends 'base_narrow.html' %}
{% block body %}
<div class="row mt-2 justify-content-center">
<div class="col-lg-6 col-md-10" style="background: #f7f7f7; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px;">
<div class="text-center">
<img alt="branding logo" src="{{ config.get("BRANDING_LOGO_URL") }}" class="col-lg-8 col-md-12" >
</div>
<div class="col-12 mb-3">
<h2 class="text-center">{{_('Invite Link')}}</h2>
</div>
......@@ -46,6 +40,4 @@
<a href="{{ url_for("session.login", ref=request.full_path) }}" class="btn btn-primary btn-block">{{_('Login and add the roles to your account')}}</a>
{% endif %}
{% endif %}
</div>
</div>
{% endblock %}
{% extends 'base.html' %}
{% extends 'base_narrow.html' %}
{% block body %}
<form action="{{ url_for("mfa.auth_finish", ref=ref) }}" method="POST">
<div class="row mt-2 justify-content-center">
<div class="col-lg-6 col-md-10" style="background: #f7f7f7; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px;">
<div class="text-center">
<img alt="branding logo" src="{{ config.get("BRANDING_LOGO_URL") }}" class="col-lg-8 col-md-12" >
</div>
<div class="col-12 mb-3">
<h2 class="text-center">{{_("Two-Factor Authentication")}}</h2>
</div>
......@@ -38,8 +32,6 @@
<div class="form-group col-12">
<a href="{{ url_for("session.logout") }}" class="btn btn-secondary btn-block">{{_("Cancel")}}</a>
</div>
</div>
</div>
</form>
{% if webauthn_supported and request.user_pre_mfa.mfa_webauthn_methods %}
......
{% extends 'base.html' %}
{% extends 'base_narrow.html' %}
{% block body %}
<div class="row mt-2 justify-content-center">
<div class="col-lg-6 col-md-10" style="background: #f7f7f7; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px;">
<div class="text-center">
<img alt="branding logo" src="{{ config.get("BRANDING_LOGO_URL") }}" class="col-lg-8 col-md-12" >
</div>
<div class="col-12">
<h2 class="text-center">{{_('Logout')}}</h2>
</div>
......@@ -39,8 +34,6 @@
</a>
</div>
</div>
</div>
<script>
function logout_services() {
......
{% extends 'base.html' %}
{% extends 'base_narrow.html' %}
{% block body %}
<form action="{{ url_for("selfservice.forgot_password") }}" method="POST">
<div class="row mt-2 justify-content-center">
<div class="col-lg-6 col-md-10" style="background: #f7f7f7; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px;">
<div class="text-center">
<img alt="branding logo" src="{{ config.get("BRANDING_LOGO_URL") }}" class="col-lg-8 col-md-12" >
</div>
<div class="col-12">
<h2 class="text-center">{{_("Forgot password")}}</h2>
</div>
......@@ -21,7 +16,5 @@
<div class="form-group col-12">
<button type="submit" class="btn btn-primary btn-block" tabindex = "3">{{_("Send password reset mail")}}</button>
</div>
</div>
</div>
</form>
{% endblock %}
......@@ -9,7 +9,7 @@
</div>
{% endif %}
<div class="row mt-3">
<div class="row">
<div class="col-12 col-md-5">
<h5>{{_("Profile")}}</h5>
<p>{{_("Your profile information is used by all services that are integrated into the Single-Sign-On. Your e-mail address is also used for password recovery.")}}</p>
......
{% extends 'base.html' %}
{% extends 'base_narrow.html' %}
{% block body %}
<form action="{{ url_for("selfservice.token_password", token=token) }}" method="POST" onInput="password2.setCustomValidity(password1.value != password2.value ? 'Passwords do not match.' : '') ">
<div class="row mt-2 justify-content-center">
<div class="col-lg-6 col-md-10" style="background: #f7f7f7; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px;">
<div class="text-center">
<img alt="branding logo" src="{{ config.get("BRANDING_LOGO_URL") }}" class="col-lg-8 col-md-12" >
</div>
<div class="col-12">
<h2 class="text-center">{{_("Reset password")}}</h2>
</div>
......@@ -24,7 +19,5 @@
<div class="form-group col-12">
<button type="submit" class="btn btn-primary btn-block" tabindex = "3">{{_("Set password")}}</button>
</div>
</div>
</div>
</form>
{% endblock %}
{% extends 'base.html' %}
{% extends 'base_narrow.html' %}
{% block body %}
{% if not initiation %}
......@@ -8,11 +8,6 @@
{% else %}
<form action="{{ url_for("session.deviceauth_finish") }}" method="POST">
{% endif %}
<div class="row mt-2 justify-content-center">
<div class="col-lg-6 col-md-10" style="background: #f7f7f7; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px;">
<div class="text-center">
<img alt="branding logo" src="{{ config.get("BRANDING_LOGO_URL") }}" class="col-lg-8 col-md-12" >
</div>
<div class="col-12">
<h2 class="text-center">{{_('Authorize Device Login')}}</h2>
</div>
......@@ -61,7 +56,5 @@
<button type="submit" class="btn btn-primary btn-block" tabindex = "2">{{_('Finish')}}</button>
</div>
{% endif %}
</div>
</div>
</form>
{% endblock %}
{% extends 'base.html' %}
{% extends 'base_narrow.html' %}
{% block body %}
<form action="{{ url_for("session.devicelogin_submit", ref=ref) }}" method="POST">
<div class="row mt-2 justify-content-center">
<div class="col-lg-6 col-md-10" style="background: #f7f7f7; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px;">
<div class="text-center">
<img alt="branding logo" src="{{ config.get("BRANDING_LOGO_URL") }}" class="col-lg-8 col-md-12" >
</div>
<div class="col-12">
<h2 class="text-center">{{_('Device Login')}}</h2>
</div>
......@@ -33,7 +28,5 @@
<div class="form-group col-12">
<a href="{{ url_for('session.login', ref=ref, devicelogin=True) }}" class="btn btn-secondary btn-block" tabindex="0">{{_('Cancel')}}</a>
</div>
</div>
</div>
</form>
{% endblock %}
{% extends 'base.html' %}
{% extends 'base_narrow.html' %}
{% block body %}
<form action="{{ url_for("session.login", ref=ref) }}" method="POST">
<div class="row mt-2 justify-content-center">
<div class="col-lg-6 col-md-10" style="background: #f7f7f7; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px;">
<div class="text-center">
<img alt="branding logo" src="{{ config.get("BRANDING_LOGO_URL") }}" class="col-lg-8 col-md-12" >
</div>
<div class="col-12">
<h2 class="text-center">{{_("Login")}}</h2>
</div>
......@@ -35,7 +30,5 @@
<a href="{{ url_for("selfservice.forgot_password") }}" class="float-right">{{_("Forgot Password?")}}</a>
{% endif %}
</div>
</div>
</div>
</form>
{% endblock %}
{% extends 'base.html' %}
{% extends 'base_narrow.html' %}
{% block body %}
<form action="{{ url_for(".signup_confirm_submit", token=signup.token) }}" method="POST">
<div class="row mt-2 justify-content-center">
<div class="col-lg-6 col-md-10" style="background: #f7f7f7; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px;">
<div class="text-center">
<img alt="branding logo" src="{{ config.get("BRANDING_LOGO_URL") }}" class="col-lg-8 col-md-12" >
</div>
<div class="col-12">
<h2 class="text-center">{{_('Complete Registration')}}</h2>
</div>
......@@ -20,7 +15,5 @@
<div class="form-group col-12">
<button type="submit" class="btn btn-primary btn-block">{{_('Complete Account Registration')}}</button>
</div>
</div>
</div>
</form>
{% endblock %}
{% extends 'base.html' %}
{% extends 'base_narrow.html' %}
{% block body %}
<form action="{{ url_for('.signup_submit') }}" method="POST" onInput="password2.setCustomValidity(password1.value != password2.value ? 'Passwords do not match.' : '') ">
<div class="row mt-2 justify-content-center">
<div class="col-lg-6 col-md-10" style="background: #f7f7f7; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px;">
<div class="text-center">
<img alt="branding logo" src="{{ config.get("BRANDING_LOGO_URL") }}" class="col-lg-8 col-md-12" >
</div>
<div class="col-12">
<h2 class="text-center">{{_('Account Registration')}}</h2>
</div>
......@@ -56,8 +51,6 @@
<div class="form-group col-12">
<button type="submit" class="btn btn-primary btn-block">{{_('Create Account')}}</button>
</div>
</div>
</div>
</form>
<script>
......
{% extends 'base.html' %}
{% extends 'base_narrow.html' %}
{% block body %}
<div class="row mt-2 justify-content-center">
<div class="col-lg-6 col-md-10" style="background: #f7f7f7; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px;">
<div class="text-center">
<img alt="branding logo" src="{{ config.get("BRANDING_LOGO_URL") }}" class="col-lg-8 col-md-12" >
</div>
<div class="col-12 mb-3">
<h2 class="text-center">{{_('Confirm your E-Mail Address')}}</h2>
</div>
<p>{{_('We sent a confirmation mail to <b>%(signup_mail)s</b>. You need to confirm your mail address within 48 hours to complete the account registration.', signup_mail=signup.mail|e)|safe}}</p>
<p>{{_("If you mistyped your mail address or don't receive the confirmation mail for another reason, retry the registration procedure from the beginning.")}}</p>
</div>
</div>
{% endblock %}
......@@ -107,7 +107,8 @@
</nav>
{% endblock navbar %}
<div class="container mt-2">
{% block main %}
<main role="main" class="container mt-3">
<div class="row">
{% for message in get_flashed_messages() %}
<div class="col-12">
......@@ -115,18 +116,17 @@
</div>
{% endfor %}
</div>
</div>
<main role="main" class="container">
{% block body %}
{% endblock body %}
<!-- spacer for floating footer -->
<div class="mb-5"></div>
</main>
{% endblock main %}
<!-- spacer for floating footer -->
<div class="mb-5"></div>
<footer class="footer">
{% block footer %}
<div class="container">
<div class="container-fluid">
<ul class="list-inline">
{% for link in config["FOOTER_LINKS"]%}
<li class="list-inline-item"><a href="{{ link.url }}">{{ link.title }}</a></li>
......
{% extends 'base.html' %}
{% block main %}
<main role="main" class="container mt-3">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-10 px-0">
<div class="row">
{% for message in get_flashed_messages() %}
<div class="col-12">
<div class="alert alert-primary" role="alert">{{ message }}</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-6 col-md-10" style="background: #f7f7f7; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px;">
<div class="text-center">
<img alt="branding logo" src="{{ config.get("BRANDING_LOGO_URL") }}" class="col-lg-8 col-md-12" >
</div>
{% block body %}
{% endblock body %}
</div>
</div>
</main>
{% endblock main %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment