Commit 29dcd19d authored by Christian Heindl's avatar Christian Heindl Committed by Benjamin Kott
Browse files

[FEATURE] Add configurable footnote to login screen

We are introducing a new option to provide an optional footnote for the 
login screen. The footnote can provide for example legal information for
the login screen image or a descriptive text. This option is now 
available in the backend extension configuration.

Resolves: #82303
Releases: master
Change-Id: I14f90ecfa8eee538234dcc9542576f6ab9f1d774
Reviewed-on: https://review.typo3.org/53918

Reviewed-by: Andreas Fernandez's avatarAndreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez's avatarAndreas Fernandez <typo3@scripting-base.de>
Tested-by: Riccardo De Contardi's avatarRiccardo De Contardi <erredeco@gmail.com>
Tested-by: default avatarTYPO3com <no-reply@typo3.com>
Reviewed-by: Joerg Kummer's avatarJoerg Kummer <typo3@enobe.de>
Tested-by: Joerg Kummer's avatarJoerg Kummer <typo3@enobe.de>
Reviewed-by: Benjamin Kott's avatarBenjamin Kott <benjamin.kott@outlook.com>
Tested-by: Benjamin Kott's avatarBenjamin Kott <benjamin.kott@outlook.com>
parent 520dc986
......@@ -9,9 +9,9 @@
// According to the GPL license an interactive application must show such a notice on start-up ('If the program is interactive, make it output a short notice... ' - see GPL.txt)
// Therefore preventing this notice from being properly shown is a violation of the license, regardless of whether you remove it or use the stylesheet to obstruct the display.
//
$login-width: 360px;
$login-width: 320px;
$login-bg: #eee;
$login-border-radius: 5px;
$login-border-radius: 3px;
$login-highlight: #f80;
$login-btn-text: #fff;
$login-btn-bg: $login-highlight;
......@@ -27,27 +27,58 @@ $login-input-padding-horizontal: $padding-large-horizontal;
//
// Login
//
.typo3-login {
display: flex;
flex-direction: row;
width: 100%;
height: auto !important;
background-color: $login-bg;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
display: table;
position: absolute;
top: 0;
left: 0;
padding: 10px;
width: 100%;
min-height: 100%;
height: 100%;
}
.typo3-login-inner {
margin: 0 auto;
width: 99.999%; // IE HOTFIX TO AVOID VISIBLE X SCROLLBARS
min-height: 100vh;
display: flex;
flex-direction: column;
}
.typo3-login-container {
display: table-cell;
vertical-align: middle;
z-index: 100;
padding: 1.5em;
display: flex;
flex-direction: column;
flex: 1 1 auto;
align-items: center;
justify-content: center;
}
.typo3-login-footnote {
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
text-align: center;
padding: 1em 1.5em;
display: block;
color: #999;
@media (min-width: $screen-sm-min) {
flex: none;
position: absolute;
bottom: 1.5em;
right: 0;
}
p {
margin: 0;
}
}
.typo3-login-wrap {
width: 100%;
max-width: $login-width;
margin: 0 auto;
}
......@@ -72,7 +103,8 @@ $login-input-padding-horizontal: $padding-large-horizontal;
// Logo
//
.typo3-login-logo {
margin-bottom: 30px;
padding-top: 1em;
margin-bottom: 2.5em;
> img {
display: block;
......@@ -99,15 +131,20 @@ $login-input-padding-horizontal: $padding-large-horizontal;
border-radius: $login-border-radius;
.panel-heading {
@include border-top-radius(($login-border-radius - 1));
padding: 1.5em 2.5em;
border-top-left-radius: $login-border-radius - 1;
border-top-right-radius: $login-border-radius - 1;
}
.panel-body {
padding: 2.5em;
border-bottom: 3px solid $login-highlight;
}
.panel-footer {
@include border-bottom-radius(($login-border-radius - 1));
padding: 1.5em 2.5em;
border-bottom-left-radius: $login-border-radius - 1;
border-bottom-right-radius: $login-border-radius - 1;
}
a {
......@@ -217,6 +254,8 @@ $login-input-padding-horizontal: $padding-large-horizontal;
// Copyright
//
.typo3-login-copyright-link {
font-weight: normal !important;
@extend .clearfix;
> img {
......@@ -226,6 +265,7 @@ $login-input-padding-horizontal: $padding-large-horizontal;
}
.typo3-login-copyright-text {
font-size: 0.9em;
margin-top: $line-height-computed;
color: $login-copyright-text;
......
......@@ -165,15 +165,19 @@ class LoginController
if (!empty($extConf['loginBackgroundImage'])) {
$backgroundImage = $this->getUriForFileName($extConf['loginBackgroundImage']);
$this->getDocumentTemplate()->inDocStylesArray[] = '
@media (min-width: 768px){
.typo3-login-carousel-control.right,
.typo3-login-carousel-control.left,
.panel-login { border: 0; }
.typo3-login { background-image: url("' . $backgroundImage . '"); }
}
.typo3-login-carousel-control.right,
.typo3-login-carousel-control.left,
.panel-login { border: 0; }
.typo3-login { background-image: url("' . $backgroundImage . '"); }
.typo3-login-footnote { background-color: #000000; color: #ffffff; opacity: 0.5; }
';
}
// Login Footnote
if (!empty($extConf['loginFootnote'])) {
$this->view->assign('loginFootnote', strip_tags(trim($extConf['loginFootnote'])));
}
// Add additional css to use the highlight color in the login screen
if (!empty($extConf['loginHighlightColor'])) {
$this->getDocumentTemplate()->inDocStylesArray[] = '
......
......@@ -32,7 +32,10 @@ Have a nice day.</source>
<source>Highlight Color: If set, this color will be used as highlight color in the login screen.</source>
</trans-unit>
<trans-unit id="config.loginBackgroundImage">
<source>Background Image: If set, this image will be used as background image for the login screen for screen sizes greater than 767 pixel (e.g. fileadmin/images/my-background.jpg or EXT:my_theme/Resources/Public/Images/my-background.jpg or //domain.tld/my-background.png)</source>
<source>Background Image: If set, this image will be used as background image for the login screen (e.g. fileadmin/images/my-background.jpg or EXT:my_theme/Resources/Public/Images/my-background.jpg or //domain.tld/my-background.png)</source>
</trans-unit>
<trans-unit id="config.loginFootnote">
<source>Footnote: If set, this text will be displayed on the login screen to provide copyright information for the background image (e.g. © 2017 by Foo Bar) or a descriptive text</source>
</trans-unit>
<trans-unit id="config.backendLogo">
<source>Logo: If set, this logo will be used instead of the TYPO3 logo in the TYPO3 Backend in the left top corner (e.g. fileadmin/images/backend-logo.png or EXT:my_theme/Resources/Public/Images/backend-logo.png</source>
......
<div class="typo3-login">
<div class="typo3-login-container">
<div class="typo3-login-wrap">
<div class="panel panel-lg panel-login">
<div class="panel-body">
<div class="typo3-login-logo">
<img src="{logo}" class="typo3-login-image" alt="" />
</div>
<f:if condition="{formType} == 'LoginForm'">
<f:then>
<f:if condition="{hasLoginError}">
<div class="t3js-login-error" id="t3-login-error">
<div class="alert alert-danger">
<strong><f:translate key="login.error.message" /></strong>
<p><f:translate key="login.error.description" /></p>
<div class="typo3-login-inner">
<div class="typo3-login-container">
<div class="typo3-login-wrap">
<div class="panel panel-lg panel-login">
<div class="panel-body">
<div class="typo3-login-logo">
<img src="{logo}" class="typo3-login-image" alt="" />
</div>
<f:if condition="{formType} == 'LoginForm'">
<f:then>
<f:if condition="{hasLoginError}">
<div class="t3js-login-error" id="t3-login-error">
<div class="alert alert-danger">
<strong><f:translate key="login.error.message" /></strong>
<p><f:translate key="login.error.description" /></p>
</div>
</div>
</f:if>
<noscript>
<f:be.infobox message="{f:translate(key: 'login.error.javascript')}" state="2" />
</noscript>
<div class="hidden t3js-login-error-nocookies">
<f:be.infobox message="{f:translate(key: 'login.error.cookies')}" state="2" />
</div>
</f:if>
<noscript>
<f:be.infobox message="{f:translate(key: 'login.error.javascript')}" state="2" />
</noscript>
<div class="hidden t3js-login-error-nocookies">
<f:be.infobox message="{f:translate(key: 'login.error.cookies')}" state="2" />
</div>
<div class="typo3-login-form t3js-login-formfields">
<form action="?loginProvider={loginProviderIdentifier}" method="post" name="loginform" id="typo3-login-form">
<f:form.hidden name="login_status" value="login" />
<f:form.hidden name="userident" id="t3-field-userident" class="t3js-login-userident-field" value="" />
<f:form.hidden name="redirect_url" value="{redirectUrl}" />
<f:form.hidden name="loginRefresh" value="{loginRefresh}" />
<div class="typo3-login-form t3js-login-formfields">
<form action="?loginProvider={loginProviderIdentifier}" method="post" name="loginform" id="typo3-login-form">
<f:form.hidden name="login_status" value="login" />
<f:form.hidden name="userident" id="t3-field-userident" class="t3js-login-userident-field" value="" />
<f:form.hidden name="redirect_url" value="{redirectUrl}" />
<f:form.hidden name="loginRefresh" value="{loginRefresh}" />
<f:render partial="Login/InterfaceSelector" arguments="{_all}" />
<f:render partial="Login/InterfaceSelector" arguments="{_all}" />
<f:render section="loginFormFields" />
<f:render section="loginFormFields" />
<div class="form-group" id="t3-login-submit-section">
<button class="btn btn-block btn-login t3js-login-submit" id="t3-login-submit" type="submit" name="commandLI" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> {f:translate(key: 'login.process')}" autocomplete="off">
<f:translate key="login.submit" />
</button>
</div>
<ul class="list-unstyled typo3-login-links">
<f:for each="{loginProviders}" as="provider" key="providerKey">
<f:if condition="{provider.label}">
<f:if condition="{loginProviderIdentifier} != {providerKey}">
<li class="t3js-loginprovider-switch" data-providerkey="{providerKey}"><a href="?loginProvider={providerKey}"><i class="fa fa-fw {provider.icon-class}"></i> <span><f:translate key="{provider.label}" /></span></a></li>
<div class="form-group" id="t3-login-submit-section">
<button class="btn btn-block btn-login t3js-login-submit" id="t3-login-submit" type="submit" name="commandLI" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> {f:translate(key: 'login.process')}" autocomplete="off">
<f:translate key="login.submit" />
</button>
</div>
<ul class="list-unstyled typo3-login-links">
<f:for each="{loginProviders}" as="provider" key="providerKey">
<f:if condition="{provider.label}">
<f:if condition="{loginProviderIdentifier} != {providerKey}">
<li class="t3js-loginprovider-switch" data-providerkey="{providerKey}"><a href="?loginProvider={providerKey}"><i class="fa fa-fw {provider.icon-class}"></i> <span><f:translate key="{provider.label}" /></span></a></li>
</f:if>
</f:if>
</f:if>
</f:for>
</ul>
</form>
</div>
</f:then>
<f:else>
<form action="../../../../../../index.php" method="post" name="loginform">
<input type="hidden" name="login_status" value="logout" />
<div class="t3-login-box-body">
<div class="t3-login-logout-form">
<div class="t3-login-username">
<div class="t3-login-label t3-username">
<f:translate key="login.username" />
</div>
<div class="t3-username-current">
{backendUser.username}
</f:for>
</ul>
</form>
</div>
</f:then>
<f:else>
<form action="../../../../../../index.php" method="post" name="loginform">
<input type="hidden" name="login_status" value="logout" />
<div class="t3-login-box-body">
<div class="t3-login-logout-form">
<div class="t3-login-username">
<div class="t3-login-label t3-username">
<f:translate key="login.username" />
</div>
<div class="t3-username-current">
{backendUser.username}
</div>
</div>
</div>
<f:if condition="{showInterfaceSelector}">
<f:then>
<div class="t3-login-interface">
<div class="t3-login-label t3-interface-selector">
<f:translate key="login.interface" />
<f:if condition="{showInterfaceSelector}">
<f:then>
<div class="t3-login-interface">
<div class="t3-login-label t3-interface-selector">
<f:translate key="login.interface" />
</div>
<f:form.select name="users" options="{interfaces}" optionValueField="jumpScript" optionLabelField="label" />
</div>
<f:form.select name="users" options="{interfaces}" optionValueField="jumpScript" optionLabelField="label" />
</div>
</f:then>
<f:else>
<f:if condition="{interface}">
<f:form.hidden name="interface" value="{interface}" />
</f:if>
</f:else>
</f:if>
<input type="hidden" name="p_field" value="" />
<input class="btn btn-block btn-lg" type="submit" name="commandLO" value="{f:translate(key: 'login.submit')}" id="t3-login-submit" />
</f:then>
<f:else>
<f:if condition="{interface}">
<f:form.hidden name="interface" value="{interface}" />
</f:if>
</f:else>
</f:if>
<input type="hidden" name="p_field" value="" />
<input class="btn btn-block btn-lg" type="submit" name="commandLO" value="{f:translate(key: 'login.submit')}" id="t3-login-submit" />
</div>
</div>
</form>
</f:else>
</f:if>
</div>
<f:render partial="LoginNews" arguments="{_all}" />
<div class="panel-footer">
<div class="typo3-login-copyright-wrap">
<a href="#loginCopyright" class="typo3-login-copyright-link collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="loginCopyright">
<span><f:translate key="login.copyrightLink" /></span>
<img src="{images.typo3}" alt="{f:translate(key: 'login.typo3Logo')}" width="70" height="20" />
</a>
<div id="loginCopyright" class="collapse">
<div class="typo3-login-copyright-text">
<p>
<f:format.raw>{copyright}</f:format.raw>
</p>
<ul class="list-unstyled">
<li><a href="https://typo3.org" target="_blank" class="t3-login-link-typo3"><i class="fa fa-external-link"></i> TYPO3.org</a></li>
<li><a href="https://typo3.org/donate/online-donation/" target="_blank" class="t3-login-link-donate"><i class="fa fa-external-link"></i> <f:translate key="login.donate" /></a></li>
</ul>
</div>
</form>
</f:else>
</f:if>
</div>
<f:render partial="LoginNews" arguments="{_all}" />
<div class="panel-footer">
<div class="login-copyright-wrap">
<a href="#loginCopyright" class="typo3-login-copyright-link collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="loginCopyright">
<span><f:translate key="login.copyrightLink" /></span>
<img src="{images.typo3}" alt="{f:translate(key: 'login.typo3Logo')}" width="70" height="20" />
</a>
<div id="loginCopyright" class="collapse">
<div class="typo3-login-copyright-text">
<p>
<f:format.raw>{copyright}</f:format.raw>
</p>
<ul class="list-unstyled">
<li><a href="https://typo3.org" target="_blank" class="t3-login-link-typo3"><i class="fa fa-external-link"></i> TYPO3.org</a></li>
<li><a href="https://typo3.org/donate/online-donation/" target="_blank" class="t3-login-link-donate"><i class="fa fa-external-link"></i> <f:translate key="login.donate" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<f:if condition="{loginFootnote}">
<div class="typo3-login-footnote">
<p>{loginFootnote}</p>
</div>
</f:if>
</div>
</div>
......@@ -11,8 +11,11 @@ loginHighlightColor =
# cat=Login; type=string; label=LLL:EXT:backend/Resources/Private/Language/locallang.xlf:config.loginBackgroundImage
loginBackgroundImage =
# cat=Login; type=string; label=LLL:EXT:backend/Resources/Private/Language/locallang.xlf:config.loginFootnote
loginFootnote =
# cat=Backend; type=string; label=LLL:EXT:backend/Resources/Private/Language/locallang.xlf:config.backendLogo
backendLogo =
# cat=Backend; type=string; label=LLL:EXT:backend/Resources/Private/Language/locallang.xlf:config.backendFavicon
backendFavicon =
\ No newline at end of file
backendFavicon =
.. include:: ../../Includes.txt
===========================================================
Feature: #82303 - Add configurable footnote to login screen
===========================================================
See :issue:`82303`
Description
===========
We are introducing a new option to provide an optional footnote for the login
screen. The footnote can provide for example legal information for the login
screen image or a descriptive text. This option is now available in the backend
extension configuration.
Impact
======
If the footnote is configured the note will be displayed on the login screen.
The background image of the login screen is now also shown on smaller devices.
.. index:: Backend
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment