Fixed bug #12699: Upgrade backend login to match t3skin
authorOliver Hader <oliver.hader@typo3.org>
Mon, 23 Nov 2009 09:48:06 +0000 (09:48 +0000)
committerOliver Hader <oliver.hader@typo3.org>
Mon, 23 Nov 2009 09:48:06 +0000 (09:48 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@6493 709f56b5-9817-0410-a4d7-c38de5d9e867

16 files changed:
typo3/index.php
typo3/sysext/lang/locallang_login.xml
typo3/sysext/t3skin/backgrounds/login-border-bottom.png [new file with mode: 0644]
typo3/sysext/t3skin/backgrounds/login-box-body.png [new file with mode: 0644]
typo3/sysext/t3skin/backgrounds/login-box-header.png [new file with mode: 0644]
typo3/sysext/t3skin/backgrounds/login-field-input.gif [new file with mode: 0644]
typo3/sysext/t3skin/backgrounds/login_headline_bg.gif
typo3/sysext/t3skin/icons/common-input-clear.png [new file with mode: 0644]
typo3/sysext/t3skin/icons/login-alert-error.gif [new file with mode: 0644]
typo3/sysext/t3skin/icons/login-alert-warning.gif [new file with mode: 0644]
typo3/sysext/t3skin/icons/login-icon-key.gif [new file with mode: 0644]
typo3/sysext/t3skin/icons/login-icon-news.gif [new file with mode: 0644]
typo3/sysext/t3skin/icons/logo-openid.png [new file with mode: 0644]
typo3/sysext/t3skin/resources/login.js [new file with mode: 0644]
typo3/sysext/t3skin/stylesheets/typo3-index-php.css
typo3/sysext/t3skin/templates/login.html

index 0b5ce6e..727a381 100644 (file)
@@ -312,6 +312,7 @@ class SC_index {
                        'NEWS'             => $this->makeLoginNews(),
                        'COPYRIGHT'        => $this->makeCopyrightNotice(),
                        'CSS_ERRORCLASS'   => ($this->commandLI ? ' class="error"' : ''),
+                       'CSS_OPENIDCLASS'  => 't3-login-openid-' . (t3lib_extMgm::isLoaded('openid') ? 'enabled' : 'disabled'),
 
                                // the labels will be replaced later on, thus the other parts above
                                // can use these markers as well and it will be replaced
@@ -325,7 +326,11 @@ class SC_index {
                        'ERROR_CAPSLOCK'   => $GLOBALS['LANG']->getLL('error.capslock', true),
                        'LABEL_DONATELINK' => $GLOBALS['LANG']->getLL('labels.donate', true),
                        'LABEL_USERNAME'   => $GLOBALS['LANG']->getLL('labels.username', true),
+                       'LABEL_OPENID'     => $GLOBALS['LANG']->getLL('labels.openId', true),
                        'LABEL_PASSWORD'   => $GLOBALS['LANG']->getLL('labels.password', true),
+                       'LABEL_WHATISOPENID' => $GLOBALS['LANG']->getLL('labels.whatIsOpenId', true),
+                       'LABEL_SWITCHOPENID' => $GLOBALS['LANG']->getLL('labels.switchToOpenId', true),
+                       'LABEL_SWITCHDEFAULT' => $GLOBALS['LANG']->getLL('labels.switchToDefault', true),
                        'CLEAR'            => $GLOBALS['LANG']->getLL('clear', true),
                        'SITELINK'         => '<a href="/">###SITENAME###</a>',
 
@@ -422,12 +427,11 @@ class SC_index {
                        if (count($parts)>1)    {       // Only if more than one interface is defined will we show the selector:
 
                                        // Initialize:
-                               $tempLabels = t3lib_div::trimExplode(',', $GLOBALS['LANG']->getLL('availableInterfaces'));
                                $labels=array();
 
-                               $labels['backend']     = $tempLabels[0];
-                               $labels['backend_old'] = $tempLabels[2];
-                               $labels['frontend']    = $tempLabels[1];
+                               $labels['backend']     = $GLOBALS['LANG']->getLL('interface.backend');
+                               $labels['backend_old'] = $GLOBALS['LANG']->getLL('interface.backend_old');
+                               $labels['frontend']    = $GLOBALS['LANG']->getLL('interface.frontend');
 
                                $jumpScript=array();
                                $jumpScript['backend']     = 'backend.php';
index 3f563b9..851d196 100644 (file)
@@ -7,12 +7,19 @@
        <data type="array">
                <languageKey index="default" type="array">
                        <label index="labels.username">Username</label>
+                       <label index="labels.openId">OpenID</label>
                        <label index="labels.password">Password</label>
                        <label index="labels.interface">Interface</label>
                        <label index="labels.submitLogin">Login</label>
                        <label index="labels.submitLogout">Log Out</label>
                        <label index="labels.donate">Donate</label>
+                       <label index="labels.whatIsOpenId">What is OpenId?</label>
+                       <label index="labels.switchToOpenId">Switch to OpenID</label>
+                       <label index="labels.switchToDefault">Switch to default login</label>
                        <label index="availableInterfaces">Backend,Front End,Traditional Backend</label>
+                       <label index="interface.backend">Backend</label>
+                       <label index="interface.frontend">Frontend</label>
+                       <label index="interface.backend_old">Traditional Backend</label>
                        <label index="headline">Login to the TYPO3 Backend on ###SITENAME###</label>
                        <label index="info.about">This is the backend login of TYPO3. You need username and password to access this administration interface. If you are a visitor of ###SITENAME###, please visit the public website: ###SITELINK###</label>
                        <label index="info.reset">Reset this form</label>
diff --git a/typo3/sysext/t3skin/backgrounds/login-border-bottom.png b/typo3/sysext/t3skin/backgrounds/login-border-bottom.png
new file mode 100644 (file)
index 0000000..36df39e
Binary files /dev/null and b/typo3/sysext/t3skin/backgrounds/login-border-bottom.png differ
diff --git a/typo3/sysext/t3skin/backgrounds/login-box-body.png b/typo3/sysext/t3skin/backgrounds/login-box-body.png
new file mode 100644 (file)
index 0000000..d8d5904
Binary files /dev/null and b/typo3/sysext/t3skin/backgrounds/login-box-body.png differ
diff --git a/typo3/sysext/t3skin/backgrounds/login-box-header.png b/typo3/sysext/t3skin/backgrounds/login-box-header.png
new file mode 100644 (file)
index 0000000..bc5bc19
Binary files /dev/null and b/typo3/sysext/t3skin/backgrounds/login-box-header.png differ
diff --git a/typo3/sysext/t3skin/backgrounds/login-field-input.gif b/typo3/sysext/t3skin/backgrounds/login-field-input.gif
new file mode 100644 (file)
index 0000000..1e7d296
Binary files /dev/null and b/typo3/sysext/t3skin/backgrounds/login-field-input.gif differ
index 6945475..03e0a9f 100644 (file)
Binary files a/typo3/sysext/t3skin/backgrounds/login_headline_bg.gif and b/typo3/sysext/t3skin/backgrounds/login_headline_bg.gif differ
diff --git a/typo3/sysext/t3skin/icons/common-input-clear.png b/typo3/sysext/t3skin/icons/common-input-clear.png
new file mode 100644 (file)
index 0000000..59c0ebb
Binary files /dev/null and b/typo3/sysext/t3skin/icons/common-input-clear.png differ
diff --git a/typo3/sysext/t3skin/icons/login-alert-error.gif b/typo3/sysext/t3skin/icons/login-alert-error.gif
new file mode 100644 (file)
index 0000000..4eb04d7
Binary files /dev/null and b/typo3/sysext/t3skin/icons/login-alert-error.gif differ
diff --git a/typo3/sysext/t3skin/icons/login-alert-warning.gif b/typo3/sysext/t3skin/icons/login-alert-warning.gif
new file mode 100644 (file)
index 0000000..abf0a6e
Binary files /dev/null and b/typo3/sysext/t3skin/icons/login-alert-warning.gif differ
diff --git a/typo3/sysext/t3skin/icons/login-icon-key.gif b/typo3/sysext/t3skin/icons/login-icon-key.gif
new file mode 100644 (file)
index 0000000..03417a7
Binary files /dev/null and b/typo3/sysext/t3skin/icons/login-icon-key.gif differ
diff --git a/typo3/sysext/t3skin/icons/login-icon-news.gif b/typo3/sysext/t3skin/icons/login-icon-news.gif
new file mode 100644 (file)
index 0000000..ba49d55
Binary files /dev/null and b/typo3/sysext/t3skin/icons/login-icon-news.gif differ
diff --git a/typo3/sysext/t3skin/icons/logo-openid.png b/typo3/sysext/t3skin/icons/logo-openid.png
new file mode 100644 (file)
index 0000000..e4a0b6c
Binary files /dev/null and b/typo3/sysext/t3skin/icons/logo-openid.png differ
diff --git a/typo3/sysext/t3skin/resources/login.js b/typo3/sysext/t3skin/resources/login.js
new file mode 100644 (file)
index 0000000..dd012bf
--- /dev/null
@@ -0,0 +1,86 @@
+TYPO3BackendLogin = {
+       start: function() {
+               TYPO3BackendLogin.registerEventListeners();
+               TYPO3BackendLogin.setVisibilityOfClearIcon($('t3-username'), $('t3-username-clearIcon'));
+               TYPO3BackendLogin.setVisibilityOfClearIcon($('t3-password'), $('t3-password-clearIcon'));
+       },
+
+       registerEventListeners: function() {
+               Event.observe(
+                               $('t3-login-switchToOpenId'),
+                               'click',
+                               TYPO3BackendLogin.switchToOpenId
+                       );
+               Event.observe(
+                       $('t3-login-switchToDefault'),
+                       'click',
+                       TYPO3BackendLogin.switchToDefault
+               );
+
+               $A(['t3-username', 't3-password']).each(function(value) {
+                       Event.observe(
+                                       $(value + '-clearIcon'),
+                                       'click',
+                                       function() { TYPO3BackendLogin.clearInputField($(value)); }
+                       );
+                       TYPO3BackendLogin.observeEvents(
+                                       $(value),
+                                       ['focus', 'blur', 'keypress'],
+                                       function() { TYPO3BackendLogin.setVisibilityOfClearIcon($(value), $(value + '-clearIcon')); }
+                       );
+               })
+       },
+
+       observeEvents: function(element, events, handler) {
+               events.each(function(event) {
+                       Event.observe(
+                               element,
+                               event,
+                               handler
+                       );
+               });
+       },
+
+       setVisibilityOfClearIcon: function(formField, clearIcon) {
+               if (formField.value) {
+                       clearIcon.show();
+               } else {
+                       clearIcon.hide();
+               }
+       },
+
+       clearInputField: function(formField) {
+               formField.value = '';
+               formField.focus();
+       },
+
+       switchToOpenId: function() {
+               $('t3-login-label-username').hide();
+               $('t3-login-label-openId').show();
+               $('t3-login-openIdLogo').show();
+
+               $('t3-login-form-footer-default').hide();
+               $('t3-login-form-footer-openId').show();
+               $('t3-login-password-section').hide();
+
+               if ($('t3-login-interface-section')) {
+                       $('t3-login-interface-section').hide();
+               }
+       },
+
+       switchToDefault: function() {
+               $('t3-login-label-username').show();
+               $('t3-login-label-openId').hide();
+               $('t3-login-openIdLogo').hide();
+
+               $('t3-login-form-footer-default').show();
+               $('t3-login-form-footer-openId').hide();
+               $('t3-login-password-section').show();
+
+               if ($('t3-login-interface-section')) {
+                       $('t3-login-interface-section').show();
+               }
+       }
+};
+
+Event.observe(window, 'load', TYPO3BackendLogin.start);
index 0fe9e52..5993512 100644 (file)
@@ -6,38 +6,52 @@
  
  */
 body#typo3-index-php {
-       background: #fefefe url(../backgrounds/login_grid.png);
+       background: #fff;
        margin: 0;
-       overflow: hidden;
 }
 
 body#typo3-index-php #t3-login-form-outer {
-       height: 87%;
-       overflow: auto;
        width: 100%;
-       position: absolute;
 }
 
 body#typo3-index-php #t3-login-form {
        margin: 30px auto 10px;
-       width: 504px;
+       width: 426px;
        text-align: left;
+       font-size: 11px;
 }
 
-body#typo3-index-php #t3-login-news-outer h2, body#typo3-index-php .t3-headline {
-       background: #b7bec8 url(../backgrounds/login_headline_bg.gif) repeat-x;
+body#typo3-index-php .t3-headline {
+       background: #b5bbc7 url('../backgrounds/login-box-header.png') repeat-x;
        padding-bottom: 2px;
-       margin: 0 0 1px;
+       margin: 0;
        width: auto;
+       height: 24px;
+       border-bottom: 1px solid #d6d9df;
 }
+
 body#typo3-index-php .t3-headline h2 {
+       background: url('../icons/login-icon-key.gif') no-repeat 10px center;
        background-color: transparent;
        margin: 0;
-       padding: 2px 0 0 4px;
+       padding: 0 0 0 40px;
        float: left;
-       color: #000;
-       width: 450px;
+       color: #fff;
+       font-size: 11px !important;
+       vertical-align: middle;
+       line-height: 24px;
+}
+
+body#typo3-index-php .t3-headline .t3-login-news-headline {
+       background: url('../icons/login-icon-news.gif') no-repeat 10px center;
+       background-color: transparent;
+       margin: 0;
+       padding: 0 0 0 40px;
+       float: left;
+       color: #fff;
+       font-size: 11px !important;
+       vertical-align: middle;
+       line-height: 24px;
 }
 
 body#typo3-index-php .t3-headline:after {
@@ -49,130 +63,99 @@ body#typo3-index-php .t3-headline:after {
 }
 
 body#typo3-index-php .t3-icons {
-       float: right;
-       padding: 3px 5px 0 0;
-}
-
-body#typo3-index-php .t3-icons .t3-help {
-       display: none;
-       position: absolute;
-       border: 1px solid #b2b3b7;
-       padding: 5px;
-       background-color: #fff;
-       max-width: 300px;
-}
-
-body#typo3-index-php .t3-icons .t3-help a {
-       text-decoration: underline;
-}
-
-body#typo3-index-php .t3-helpicon {
        float: left;
-       padding-right: 5px;
-       cursor: help;
-}
-
-body#typo3-index-php .t3-helpicon:hover .t3-help,
-body#typo3-index-php .t3-reloadicon:hover .t3-help {
-       display: block;
-}
-
-body#typo3-index-php .t3-reloadicon {
-       float: left;
-       cursor: pointer;
+       padding: 3px 5px 0 0;
 }
 
 body#typo3-index-php .t3-login-username {
        margin-top: 15px;
 }
 
-body#typo3-index-php .t3-login-username input {
-       background: #fefefe url(../icons/login_user.png) no-repeat 5px 4px;
-}
-
-body#typo3-index-php .t3-login-password input {
-       background: #fefefe url(../icons/login_padlock.png) no-repeat 7px 4px;
-}
-
 body#typo3-index-php .t3-login-username input,
 body#typo3-index-php .t3-login-password input {
-       box-shadow: 2px 2px 2px #8e8b88 inset;
-       -moz-box-shadow: 2px 2px 2px #8e8b88 inset;
-       -webkit-box-shadow: 2px 2px 2px #8e8b88 inset;
 }
 
 body#typo3-index-php .t3-login-field {
-       height: 25px;
-       padding-top: 15px;
+       height: 21px;
+       padding: 0;
+       margin: 5px 0 0;
+       line-height: 21px;
+       position: relative;
+}
+
+body#typo3-index-php .t3-login-field .t3-login-clearInputField {
+       position: absolute;
+       left: 255px;
+       top: 5px;
 }
 
 body#typo3-index-php .t3-login-field label {
        color: #7f8083;
-       display: block;
        float: left;
-       font-size: 16px;
        padding-right: 10px;
-       text-align: right;
-       text-transform: uppercase;
-       width: 150px;
+       width: 65px;
 }
 
 body#typo3-index-php .t3-login-field input {
-       color: #555;
-       background-color: #bbc0b8;
-       font-size: 14px;
-       height: 20px;
-       width: 270px;
-       padding-left: 25px;
+       color: #000;
+       height: 19px;
+       line-height: 19px;
+       width: 168px;
+       margin: 0;
+       padding: 2px 23px 0 5px;
+       border: 1px solid #7c7c7c;
+       background: #ffffff url('../backgrounds/login-field-input.gif') repeat-x;
 }
 
-body#typo3-index-php .t3-login-field input:focus {
-       border-color: #f88f24;
-       background-color: #fff;
+body#typo3-index-php #t3-login-form-fields {
+       padding: 14px 0 0 30px;
+       margin: 0;
+       display: none;
 }
 
-body#typo3-index-php #t3-login-form-inner {
-       border: 1px solid #737373;
-       padding: 1px;
-       background: #dfe0e5;
+body#typo3-index-php #t3-interfaceselector {
+       width: 198px;
+       font-size: 11px;
 }
 
-body#typo3-index-php #t3-login-form-fields {
-       padding-bottom: 30px;
-       display: none;
+body#typo3-index-php #t3-interfaceselector option {
+       height: 19px;
 }
 
-body#typo3-index-php #t3-capslock {
-       margin: 10px 0 0 160px;
-       border: 2px solid #be0027;
-       background-color: #ffd6cf;
-       color: #be0027;
-       font-weight: bold;
-       padding: 3px;
-       width: 288px;
+body#typo3-index-php .t3-login-form-footer {
+       text-align: right;
+       vertical-align: middle;
+       margin: 10px 0 0;
 }
 
-body#typo3-index-php #t3-capslock * {
-       vertical-align: middle;
+body#typo3-index-php .t3-login-form-footer a {
+       cursor: pointer;
+}
+       
+body#typo3-index-php #t3-login-openIdLogo {
+       position: absolute;
+       top: -4px;
+       right: 0;
 }
 
-body#typo3-index-php #t3-capslock img {
-       margin-right: 5px;
+body#typo3-index-php .t3-login-form-footer,
+body#typo3-index-php .t3-login-form-footer a.switchToOpenId {
+       color: #777d7d;
+       font-size: 10px;
 }
 
-body#typo3-index-php #t3-interfaceselector {
-       margin-top: 3px;
+body#typo3-index-php .t3-login-openid-disabled .t3-login-form-footer,
+body#typo3-index-php .t3-login-openid-disabled #t3-login-openIdLogo {
+       display: none;
 }
 
 body#typo3-index-php .t3-login-submit {
-       border-color: #b2b3b7;
-       font-size: 14px;
-       font-weight: bold;
-       margin-left: 160px;
-       margin-top: 15px;
-       padding: 0 25px;
+       font-size: 11px;
+       border-color: #7c7c7c;
+       margin: 15px 0 0 75px;
+       padding: 3px 16px;
        text-align: left;
-       background: #fff url(../backgrounds/login_submit_bg.gif) repeat-x;
+       background: #d6d6d6 url(../backgrounds/login_submit_bg.gif) repeat-x;
 }
 
 body#typo3-index-php .t3-login-error {
@@ -185,46 +168,10 @@ body#typo3-index-php .t3-login-error {
        padding: 10px;
 }
 
-body#typo3-index-php #t3-noscript-error {
-       background: #ffd6cf url(../backgrounds/login_noscript.gif) no-repeat left bottom;
-       border: 3px solid #be0027;
-       margin: 2px;
-       padding: 10px 10px 10px 80px;
-       height: 130px;
-}
-
-body#typo3-index-php #t3-noscript-error p {
-       padding-top: 20px;
-       color: #be0027;
-       font-size: 20px;
-       font-weight: bold;
-       text-transform: uppercase;
-}
-
-body#typo3-index-php #t3-nocookies-error p {
-       padding-top: 20px;
-       color: #ff8700;
-       font-size: 20px;
-       font-weight: bold;
-       text-transform: uppercase;
-}
-
-body#typo3-index-php #t3-nocookies-error {
-       background: #ffe7cc url(../backgrounds/login_nocookies.gif) no-repeat left bottom;
-       border: 3px solid #FF8700;
-       margin: 2px;
-       padding: 10px 10px 10px 130px;
-       height: 130px;
-}
-
 body#typo3-index-php div#t3-copyright-notice {
-       background: url(../icons/login_logo_sw.gif) no-repeat top left;
-       text-align: left;
-       margin-top: 25px;
-       padding-left: 48px;
+       margin-top: 15px;
        font-weight: normal;
-       color: #838383;
-       min-height: 35px;
+       color: #b0b0b0;
 }
 
 * html body#typo3-index-php div#t3-copyright-notice {
@@ -232,7 +179,7 @@ body#typo3-index-php div#t3-copyright-notice {
 }
 
 body#typo3-index-php div#t3-copyright-notice a {
-       color: #838383;
+       color: #b0b0b0;
        text-decoration: underline;
 }
 body#typo3-index-php div#t3-copyright-notice a:hover {
@@ -245,73 +192,133 @@ body#typo3-index-php div#t3-copyright-notice img {
 
 body#typo3-index-php div#t3-login-image {
        text-align: left;
-       width: 500px;
        height: auto;
        padding: 0;
-       margin: 0;
+       margin: 0 0 30px;
 }
 
 body#typo3-index-php #t3-footer {
-       position: absolute;
-       bottom: 0;
-       padding-bottom: 20px;
-       height: 10%;
-       width: 100%;
-       background: #f8f8f9 url(../backgrounds/login_footer.png) 0 -1px repeat-x;
+       border-top: 1px solid #d1d2d3;
+       margin: 40px auto 10px;
+       width: 426px;
 }
 
 body#typo3-index-php #t3-meta-links {
-       float: right;
-       margin-top: 20px;
-       margin-left: 100px;
-       width: 135px;
-       text-align: center;
+       margin-top: 15px;
+       color: #b0b0b0;
 }
 
 body#typo3-index-php #t3-meta-links a {
-       display: block;
-       width: 100px;
-       border: 1px solid #b2b3b7;
-       padding: 5px;
-       margin-bottom: 3px;
-       font-size: 9px;
-       font-weight: bold;
-       color: #999;
+       color: #b0b0b0;
+       text-decoration: underline;
 }
 
 body#typo3-index-php #t3-meta-links a:hover {
-       background-color: #ededf0;
+       color: #000;
 }
 
 /**
  * @section login news
  */
 body#typo3-index-php #t3-login-news-outer {
-       width: 500px;
-       border: 1px solid #737373;
-       margin-top: 30px;
-       padding: 1px;
-       background: #fff;
+       margin-top: 35px;
+}
+
+body#typo3-index-php #t3-login-news-outer .t3-login-box-body {
+       padding-top: 0;
+       padding-bottom: 20px;
 }
 
 body#typo3-index-php #t3-login-news-outer #t3-login-news {
-       margin: 12px;
+       margin: 0 30px;
        clear: both;
 }
 
+body#typo3-index-php #t3-login-news-outer #t3-login-news .t3-login-news-item {
+       padding-top: 20px;
+}
+
 body#typo3-index-php #t3-login-news-outer #t3-login-news dt {
-       font-size: 12px;
+       font-weight: bold;
 }
 
 body#typo3-index-php #t3-login-news-outer #t3-login-news dd {
        margin-left: 0;
        border: 0;
        padding: 0;
-       font-size: 10px;
        clear: both;
-       padding-bottom: 15px;
 }
 
-body#typo3-index-php #t3-login-news-outer .t3-news-date {
-       float: right;
+/**
+ * @section logout
+ */
+
+body#typo3-index-php .t3-login-logout-form .t3-username-current {
+       color: #7f8083;
+       float: left;
+       line-height: 21px;
+       height: 21px;
+       vertical-align: middle;
+}
+
+body#typo3-index-php .t3-login-logout-form div.t3-login-label {
+       color: #7f8083;
+       float: left;
+       padding-right: 10px;
+       width: 65px;
+       line-height: 21px;
+}
+
+/**
+ * @section erros/warnings
+ */
+
+.t3-login-alert {
+       padding: 15px;
 }
+
+.t3-login-alert p {
+       padding: 0 10px 0 30px;
+       font-size: 14px;
+       line-height: 18px;
+       font-weight: bold;
+}
+
+.t3-login-alert-error {
+       background: #f6d3cf;
+       border: 1px solid #d66c68;
+}
+
+.t3-login-alert-error p {
+       background: url('../icons/login-alert-error.gif') no-repeat left 2px;
+       color: #be0027;
+}
+
+.t3-login-alert-warning {
+       background: #fbf6de;
+       border: 1px solid #b1905c;
+}
+
+.t3-login-alert-warning p {
+       background: url('../icons/login-alert-warning.gif') no-repeat left 2px;
+       color: #9e7d4a;
+}
+
+/**
+ * @section box layout
+ */
+
+.t3-login-box {
+       border: 1px solid #d6d9df;
+       border-bottom: none;
+}
+
+.t3-login-box-body {
+       background: #e3e5ea url('../backgrounds/login-box-body.gif') repeat-x;
+       padding: 10px;
+}
+
+.t3-login-box-border-bottom {
+       height: 6px;
+       background: url('../backgrounds/login-border-bottom.png') top left no-repeat;
+}
\ No newline at end of file
index 479d2dc..4addccd 100644 (file)
 <!-- ###PAGE### begin -->\r
-<div id="t3-login-form-outer">\r
+<div id="t3-login-form-outer" ###CSS_ERRORCLASS###>\r
        <div id="t3-login-form">\r
                <div id="t3-login-image">\r
                        ###LOGO###\r
                </div>\r
-               <div id="t3-login-form-inner" ###CSS_ERRORCLASS###>\r
+               <div id="t3-login-form-inner" class="t3-login-box">\r
                        <div class="t3-headline">\r
                                <h2>###HEADLINE###</h2>\r
-                               <div class="t3-icons">\r
-                                       <div class="t3-helpicon">\r
-                                               <img src="sysext/t3skin/icons/login_help.gif" alt="help" />\r
-                                               <div class="t3-help">\r
-                                                       ###INFO_ABOUT###\r
-                                               </div>\r
-                                       </div>\r
-                                       <div class="t3-reloadicon">\r
-                                               <img src="sysext/t3skin/icons/login_reload.gif" alt="reload" onclick="document.loginform.reset(); checkFocus();" />\r
-                                               <div class="t3-help">\r
-                                                       ###INFO_RELOAD###\r
-                                               </div>\r
+                       </div>\r
+                       <div class="t3-login-box-body">\r
+                               <noscript>\r
+                                       <div id="t3-noscript-error" class="t3-login-alert t3-login-alert-error">\r
+                                               <p>\r
+                                                       ###ERROR_JAVASCRIPT###\r
+                                               </p>\r
                                        </div>\r
-                               </div>\r
-                       </div>###LOGINBOX_IMAGE###\r
-                       <noscript>\r
-                               <div id="t3-noscript-error">\r
+                               </noscript>\r
+                               <div id="t3-nocookies-error" class="t3-login-alert t3-login-alert-warning" style="display:none">\r
                                        <p>\r
-                                               ###ERROR_JAVASCRIPT###\r
+                                               ###ERROR_COOKIES###\r
                                        </p>\r
                                </div>\r
-                       </noscript>\r
-                       <div id="t3-nocookies-error" style="display:none">\r
-                               <p>\r
-                                       ###ERROR_COOKIES###\r
-                               </p>\r
-                               <p>\r
-                                       <a href="#" onclick="document.getElementById('t3-nocookies-error').style.display = 'none'; document.getElementById('t3-login-form-fields').style.display = 'block'; return false;">###ERROR_COOKIES_IGNORE###</a>\r
-                               </p>\r
-                       </div>\r
-                       <div id="t3-login-form-fields">\r
                                ###FORM###\r
+                               <div class="t3-login-bottomBorder"></div>\r
+                               <script type="text/javascript">\r
+                               /*<![CDATA[*/\r
+                                       document.cookie = "testcookie";\r
+                                       cookieEnabled = (document.cookie.indexOf("testcookie") != -1) ? true : false;\r
+                                       if (cookieEnabled) {\r
+                                               document.getElementById("t3-login-form-fields").style.display = 'block';\r
+                                       }\r
+                                       else {\r
+                                               document.getElementById("t3-nocookies-error").style.display = 'block';\r
+                                       }\r
+                               /*]]>*/\r
+                               </script>\r
+                               <script type="text/javascript" src="contrib/prototype/prototype.js"></script>\r
+                               <script type="text/javascript" src="sysext/t3skin/resources/login.js"></script>\r
                        </div>\r
-                       <script type="text/javascript">\r
-                       /*<![CDATA[*/\r
-                               document.cookie = "testcookie";\r
-                               cookieEnabled = (document.cookie.indexOf("testcookie") != -1) ? true : false;\r
-                               if (cookieEnabled) {\r
-                                       document.getElementById("t3-login-form-fields").style.display = 'block';\r
-                               }\r
-                               else {\r
-                                       document.getElementById("t3-nocookies-error").style.display = 'block';\r
-                               }\r
-                       /*]]>*/\r
-                       </script>\r
                </div>\r
+               <div class="t3-login-box-border-bottom"></div>\r
                ###NEWS###\r
        </div>\r
 </div>\r
 <div id="t3-footer">\r
+       <div id="t3-copyright-notice">\r
+               ###COPYRIGHT###\r
+       </div>\r
        <div id="t3-meta-links">\r
                <a href="http://typo3.org" target="_blank">TYPO3.org</a>\r
+               &#124;\r
                <a href="http://typo3.org/donate/" target="_blank">###LABEL_DONATELINK###</a>\r
        </div>\r
-       <div id="t3-copyright-notice">\r
-               ###COPYRIGHT###\r
-       </div>\r
 </div>\r
 <!-- ###PAGE### end -->\r
 \r
 <!-- ###LOGIN_NEWS### begin -->\r
-<div id="t3-login-news-outer">\r
+<div id="t3-login-news-outer" class="t3-login-box">\r
        <div class="t3-headline">\r
                <h2 class="t3-login-news-headline">###NEWS_HEADLINE###</h2>\r
        </div>\r
-       <dl id="t3-login-news">\r
-               <!-- ###NEWS_ITEM### begin -->\r
-               <dt>\r
-                       <span class="t3-news-title">###HEADER###</span>\r
-                       <span class="t3-news-date">###DATE###</span>\r
-               </dt>\r
-               <dd>\r
-                       ###CONTENT###\r
-               </dd>\r
-               <!-- ###NEWS_ITEM### end -->\r
-       </dl>\r
+       <div class="t3-login-box-body">\r
+               <dl id="t3-login-news">\r
+                       <!-- ###NEWS_ITEM### begin -->\r
+                       <div class="t3-login-news-item">\r
+                               <dt>\r
+                                       <span class="t3-news-date">###DATE###: </span>\r
+                                       <span class="t3-news-title">###HEADER###</span>\r
+                               </dt>\r
+                               <dd>\r
+                                       ###CONTENT###\r
+                               </dd>\r
+                       </div>\r
+                       <!-- ###NEWS_ITEM### end -->\r
+               </dl>\r
+       </div>\r
 </div>\r
+<div class="t3-login-box-border-bottom"></div>\r
 <!-- ###LOGIN_NEWS### end -->\r
 \r
 <!-- ###LOGIN_FORM### begin -->\r
 \r
 <!-- ###LOGIN_ERROR### begin -->\r
-<div class="t3-login-error">\r
-       ###ERROR_MESSAGE###\r
+<div id="t3-login-error" class="t3-login-alert t3-login-alert-error">\r
+       <p>###ERROR_MESSAGE###</p>\r
 </div>\r
 <!-- ###LOGIN_ERROR### end -->\r
 \r
-<div class="t3-login-username t3-login-field">\r
-       <label for="t3-username" class="t3-username">\r
-               ###LABEL_USERNAME###:\r
-       </label>\r
-       <input type="text" id="t3-username" name="username" value="###VALUE_USERNAME###" class="t3-username" tabindex="1" onkeypress="checkCapslock(event, false)" />\r
-       <a href="#" title="###CLEAR###" onclick="document.getElementById('t3-username').value = ''; checkFocus();" ><img src="sysext/t3skin/icons/login_clear.gif" alt="clear" title="###CLEAR###" /></a>\r
+<div id="t3-capslock" class="t3-login-alert t3-login-alert-warning" style="display: none">\r
+       <p>###ERROR_CAPSLOCK###</p>\r
 </div>\r
-<div class="t3-login-password t3-login-field">\r
-       <label for="t3-password" class="t3-password">\r
-               ###LABEL_PASSWORD###:\r
-       </label>\r
-       <input type="password" id="t3-password" name="p_field" value="###VALUE_PASSWORD###" class="t3-password" tabindex="2" onkeypress="checkCapslock(event, true);" />\r
-       <a href="#" title="###CLEAR###" onclick="document.getElementById('t3-password').value = ''; checkFocus();"><img src="sysext/t3skin/icons/login_clear.gif" alt="clear" title="###CLEAR###" /></a>\r
-</div>\r
-<div id="t3-capslock" style="display: none;"><img src="sysext/t3skin/icons/login_capslock.gif" alt="caps lock" /><span>###ERROR_CAPSLOCK###</span></div>\r
-<!-- ###INTERFACE_SELECTOR### begin -->\r
-<div class="t3-login-interface t3-login-field">\r
-       <label for="t3-interfaceselector" class="t3-interface-selector">\r
-               ###LABEL_INTERFACE###:\r
-       </label>\r
-       ###VALUE_INTERFACE###\r
+\r
+<div id="t3-login-form-fields" class="###CSS_OPENIDCLASS###">\r
+       <div class="t3-login-username t3-login-field">\r
+               <label for="t3-username" class="t3-username" id="t3-login-label-username">\r
+                       ###LABEL_USERNAME###\r
+               </label>\r
+               <label for="t3-username" class="t3-username" id="t3-login-label-openId" style="display: none">\r
+                       ###LABEL_OPENID###\r
+               </label>\r
+               <input type="text" id="t3-username" name="username" value="###VALUE_USERNAME###" class="t3-username" tabindex="1" onkeypress="checkCapslock(event, false)" />\r
+               <div class="t3-login-clearInputField">\r
+                       <a id="t3-username-clearIcon" style="display: none;">\r
+                               <img src="sysext/t3skin/icons/common-input-clear.png" alt="clear" title="clear" />\r
+                       </a>\r
+               </div>\r
+               <div id="t3-login-openIdLogo" style="display: none">\r
+                       <img src="sysext/t3skin/icons/logo-openid.png" alt="OpenID" title="OpenID" />\r
+               </div>\r
+       </div>\r
+       <div class="t3-login-password t3-login-field" id="t3-login-password-section">\r
+               <label for="t3-password" class="t3-password">\r
+                       ###LABEL_PASSWORD###\r
+               </label>\r
+               <input type="password" id="t3-password" name="p_field" value="###VALUE_PASSWORD###" class="t3-password" tabindex="2" onkeypress="checkCapslock(event, true);" />\r
+               <div class="t3-login-clearInputField">\r
+                       <a id="t3-password-clearIcon" style="display: none;">\r
+                               <img src="sysext/t3skin/icons/common-input-clear.png" alt="clear" title="clear" />\r
+                       </a>\r
+               </div>\r
+       </div>\r
+       <!-- ###INTERFACE_SELECTOR### begin -->\r
+       <div class="t3-login-interface t3-login-field" id="t3-login-interface-section">\r
+               <label for="t3-interfaceselector" class="t3-interface-selector">\r
+                       ###LABEL_INTERFACE###\r
+               </label>\r
+               ###VALUE_INTERFACE###\r
+       </div>\r
+       <!-- ###INTERFACE_SELECTOR### end -->\r
+       <input type="submit" name="commandLI" value="###VALUE_SUBMIT###" class="t3-login-submit" tabindex="4" /> \r
+       <div class="t3-login-form-footer">\r
+               <div id="t3-login-form-footer-default">\r
+                       <a id="t3-login-switchToOpenId" class="switchToOpenId">###LABEL_SWITCHOPENID###</a>\r
+               </div>\r
+               <div id="t3-login-form-footer-openId" style="display: none">\r
+                       <a id="t3-login-whatIsOpenId" class="switchToOpenId">###LABEL_WHATISOPENID###</a>\r
+                       &#124;\r
+                       <a id="t3-login-switchToDefault" class="switchToOpenId">###LABEL_SWITCHDEFAULT###</a>\r
+               </div>\r
+       </div>\r
 </div>\r
-<!-- ###INTERFACE_SELECTOR### end -->\r
-<input type="submit" name="commandLI" value="###VALUE_SUBMIT###" class="t3-login-submit" tabindex="4" /> \r
 <!-- ###LOGIN_FORM### end -->\r
 \r
 <!-- ###LOGOUT_FORM### begin -->\r
-<h2>###HEADLINE###</h2>\r
-<p class="t3-username">\r
-       ###LABEL_USERNAME###:\r
-</p>\r
-<p class="t3-username-current">\r
-       ###VALUE_USERNAME###\r
-</p>\r
-<!-- ###INTERFACE_SELECTOR### begin -->\r
-<p class="t3-interface-selector">\r
-       ###LABEL_INTERFACE###:\r
-</p>\r
-###VALUE_INTERFACE###\r
-<!-- ###INTERFACE_SELECTOR### end -->\r
-\r
-<input type="hidden" name="p_field" value="" /><input type="submit" name="commandLO" value="###VALUE_SUBMIT###" class="t3-submit" />\r
+<div id="t3-login-form-fields">\r
+       <div class="t3-login-logout-form">\r
+               <div class="t3-login-username t3-login-field">\r
+                       <div class="t3-login-label t3-username">\r
+                               ###LABEL_USERNAME###\r
+                       </div>\r
+                       <div class="t3-username-current">\r
+                               ###VALUE_USERNAME###\r
+                       </div>\r
+               </div>\r
+               <!-- ###INTERFACE_SELECTOR### begin -->\r
+               <div class="t3-login-interface t3-login-field">\r
+                       <div class="t3-login-label t3-interface-selector">\r
+                               ###LABEL_INTERFACE###\r
+                       </div>\r
+                       ###VALUE_INTERFACE###\r
+                       <!-- ###INTERFACE_SELECTOR### end -->\r
+               </div>\r
+               <input type="hidden" name="p_field" value="" /><input type="submit" name="commandLO" value="###VALUE_SUBMIT###" class="t3-login-submit" />\r
+       </div>\r
+</div>\r
 <!-- ###LOGOUT_FORM### end -->\r