[FOLLOWUP][TASK] New Login Screen 26/38926/6
authorBenjamin Kott <benjamin.kott@outlook.com>
Sun, 26 Apr 2015 12:58:08 +0000 (14:58 +0200)
committerNicole Cordes <typo3@cordes.co>
Mon, 27 Apr 2015 08:23:40 +0000 (10:23 +0200)
- Resolve image paths equally without fal compat layer
- Remove border if background image is set
- Increase border radius

Releases: master
Resolves: #66431
Change-Id: Icf5217c46467268f67d4e7fd91903e916535ebfa
Reviewed-on: http://review.typo3.org/38926
Reviewed-by: Andreas Fernandez <andreas.fernandez@aspedia.de>
Tested-by: Andreas Fernandez <andreas.fernandez@aspedia.de>
Reviewed-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Tested-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Reviewed-by: Nicole Cordes <typo3@cordes.co>
Tested-by: Nicole Cordes <typo3@cordes.co>
typo3/sysext/backend/Classes/Controller/LoginController.php
typo3/sysext/backend/Resources/Private/Templates/Login.html
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_login_screen.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index cb1fe3e..a6cab9a 100644 (file)
@@ -22,6 +22,7 @@ use TYPO3\CMS\Core\FormProtection\FormProtectionFactory;
 use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Core\Utility\HttpUtility;
+use TYPO3\CMS\Core\Utility\PathUtility;
 use TYPO3\CMS\Fluid\View\StandaloneView;
 use TYPO3\CMS\Lang\LanguageService;
 
@@ -229,9 +230,13 @@ class LoginController {
 
                // Background Image
                if (!empty($extConf['loginBackgroundImage'])) {
+                       $backgroundImage = $this->getUriForFileName($extConf['loginBackgroundImage']);
                        $this->getDocumentTemplate()->inDocStylesArray[] = '
                                @media (min-width: 768px){
-                                       .typo3-login { background-image: url("' . $extConf['loginBackgroundImage'] . '"); }
+                                       .typo3-login-carousel-control.right,
+                                       .typo3-login-carousel-control.left,
+                                       .panel-login { border: 0; }
+                                       .typo3-login { background-image: url("' . $backgroundImage . '"); }
                                }
                        ';
                }
@@ -266,7 +271,11 @@ class LoginController {
                        } else {
                                $logo = 'EXT:backend/Resources/Public/Images/typo3_orange.svg';
                        }
+                       $this->getDocumentTemplate()->inDocStylesArray[] = '
+                               .typo3-login-logo .typo3-login-image { max-width: 150px; }
+                       ';
                }
+               $logo = $this->getUriForFileName($logo);
 
                // Start form
                $formType = empty($this->getBackendUserAuthentication()->user['uid']) ? 'loginForm' : 'logoutForm';
@@ -280,6 +289,10 @@ class LoginController {
                        'presetOpenId' => $this->openIdUrl,
                        'formType' => $formType,
                        'logo' => $logo,
+                       'images' => array(
+                               'capslock' => $this->getUriForFileName('EXT:backend/Resources/Public/Images/icon_capslock.svg'),
+                               'typo3' => $this->getUriForFileName('EXT:backend/Resources/Public/Images/typo3_orange.svg'),
+                       ),
                        'isOpenIdLoaded' => ExtensionManagementUtility::isLoaded('openid'),
                        'copyright' => BackendUtility::TYPO3_copyRightNotice($GLOBALS['TYPO3_CONF_VARS']['SYS']['loginCopyrightShowVersion']),
                        'loginNewsItems' => $this->getSystemNews()
@@ -484,6 +497,31 @@ class LoginController {
        }
 
        /**
+        * Returns the uri of a relative reference, resolves the "EXT:" prefix
+        * (way of referring to files inside extensions) and checks that the file is inside
+        * the PATH_site of the TYPO3 installation
+        *
+        * @param string $filename The input filename/filepath to evaluate
+        * @return string Returns the filename of $filename if valid, otherwise blank string.
+        * @internal
+        */
+       private function getUriForFileName($filename) {
+               $urlPrefix = '';
+               if (strpos($filename, '://')) {
+                       $urlPrefix = '';
+               } elseif (strpos($filename, 'EXT:') === 0) {
+                       $absoluteFilename = GeneralUtility::getFileAbsFileName($filename);
+                       $filename = '';
+                       if ($absoluteFilename !== '') {
+                               $filename = PathUtility::getAbsoluteWebPath($absoluteFilename);
+                       }
+               } elseif (strpos($filename, '/') !== 0) {
+                       $urlPrefix = GeneralUtility::getIndpEnv('TYPO3_SITE_PATH');
+               }
+               return $urlPrefix . $filename;
+       }
+
+       /**
         * Creates JavaScript for the login form
         *
         * @return string JavaScript code
index a65ccea..69120c0 100644 (file)
@@ -4,7 +4,7 @@
                        <div class="panel panel-lg panel-login">
                                <div class="panel-body">
                                        <div class="typo3-login-logo">
-                                               <f:image src="{logo}" class="typo3-login-image" />
+                                               <img src="{logo}" class="typo3-login-image" />
                                        </div>
                                        <f:render section="{formType}" arguments="{_all}" />
                                </div>
@@ -13,7 +13,7 @@
                                        <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="{labelPrefixPath}copyright.link" /></span>
-                                                       <f:image src="EXT:backend/Resources/Public/Images/typo3_orange.svg" alt="{f:translate(key: '{labelPrefixPath}typo3.logo')}" width="70" height="20" />
+                                                       <img src="{images.typo3}" alt="{f:translate(key: '{labelPrefixPath}typo3.logo')}" width="70" height="20" />
                                                </a>
                                                <div id="loginCopyright" class="collapse">
                                                        <div class="typo3-login-copyright-text">
@@ -63,7 +63,7 @@
                                        <div class="form-control-holder">
                                                <input type="text" id="t3-username" name="username" value="{presetUsername}" placeholder="{f:translate(key: '{labelPrefixPath}labels.username')}" class="form-control input-login t3js-clearable t3js-login-username-field" autofocus="autofocus" required="required">
                                                <div class="form-notice-capslock hidden t3js-login-alert-capslock">
-                                                       <f:image src="EXT:backend/Resources/Public/Images/icon_capslock.svg" width="14" height="14" alt="{f:translate(key: '{labelPrefixPath}error.capslock')}" title="{f:translate(key: '{labelPrefixPath}error.capslock')}" />
+                                                       <img src="{images.capslock}" width="14" height="14" alt="{f:translate(key: '{labelPrefixPath}error.capslock')}" title="{f:translate(key: '{labelPrefixPath}error.capslock')}" />
                                                </div>
                                        </div>
                                </div>
@@ -73,7 +73,7 @@
                                        <div class="form-control-holder">
                                                <input type="password" id="t3-password" name="p_field" value="{presetPassword}" placeholder="{f:translate(key: '{labelPrefixPath}labels.password')}" class="form-control input-login t3js-clearable t3js-login-password-field" required="required">
                                                <div class="form-notice-capslock hidden t3js-login-alert-capslock">
-                                                       <f:image src="EXT:backend/Resources/Public/Images/icon_capslock.svg" width="14" height="14" alt="{f:translate(key: '{labelPrefixPath}error.capslock')}" title="{f:translate(key: '{labelPrefixPath}error.capslock')}" />
+                                                       <img src="{images.capslock}" width="14" height="14" alt="{f:translate(key: '{labelPrefixPath}error.capslock')}" title="{f:translate(key: '{labelPrefixPath}error.capslock')}" />
                                                </div>
                                        </div>
                                </div>
index 894ab4a..ae749c3 100644 (file)
@@ -13,6 +13,7 @@
 
 @login-width:                          360px;
 @login-bg:                                     #eee;
+@login-border-radius:          5px;
 
 @login-highlight:                      #ff8800;
 @login-btn-text:                       #fff;
 //
 .panel-login {
        border-color: darken(@login-bg, 10%);
+       border-radius: @login-border-radius;
+       .panel-heading {
+               .border-top-radius((@login-border-radius - 1));
+       }
        .panel-body {
                border-bottom: 3px solid @login-highlight;
        }
+       .panel-footer {
+               .border-bottom-radius((@login-border-radius - 1));
+       }
        a {
                font-weight: bold;
        }
index 7b2ba1a..0815e75 100644 (file)
@@ -10786,10 +10786,19 @@ a.badge-danger:hover {
 }
 .panel-login {
   border-color: #d5d5d5;
+  border-radius: 5px;
+}
+.panel-login .panel-heading {
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
 }
 .panel-login .panel-body {
   border-bottom: 3px solid #ff8800;
 }
+.panel-login .panel-footer {
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
 .panel-login a {
   font-weight: bold;
 }