Das Login-Formular von TYPO3 ist – auch in der Version, die ccs_styled_content erstellt, ein übler Tabellenverhau, den man sich schenken kann. besonders, wenn man das Login-Formular über ein Template einbinden und so auf jeder Seite verfügbar haben will, wirkt sich das störend aus: Was, wenn die Felder neben einander in einer schmalen Leiste eingebunden sein sollen? Oder in einem Randstreifen, etwa unterhalb der Navigation?

Login-Formular einbinden – quick and dirty

Es gibt eine Quick-and-Dirty-Methode: Einfach das Formular in der Template-Datei (z.B. meintemplate.htm) hart codieren:

1. <form action=”20.0.html” method=”post” name=”login” enctype=”multipart/form-data”>Mein Login<br />
2. <input type=”hidden” name=”logintype” value=”login”>
3. <input type=”hidden” name=”pid” value=”15″ />
4. Mitglied: <input type=”text” name=”user”>
5. Passwort: <input type=”password” name=”pass”>
6. <input type=”submit” name=”submit” value=”Login” class=”submit”>
7. </form>

Form action verweist auf die Seite, zu der man nach  dem Login springen möchte, also die erste Seite des passwortgeschützten Bereichs. Das hidden field “pid” nennt den Sysordner mit den Zugangsdaten der Frontend-User.

Sieht gut aus, erreicht maximale Gestaltungsmöglichkeiten, denn ich kann den Submit-Button mit einer Klasse versehen (class =”submit”) und separat von den Input-Feldern formatieren (z.B. weniger breit und mit Rahmen). Der Nachteil: So greifen wir nicht auf die erweiterten Funktionen des Login-Formulars zu, also z.B. die Überprüfung der Eingabe (wenn das Pflichtfeld “user” leer blieb) und die Ausgabe eines anderen Buttons “Logout”, wenn man sich eingelogged hat. Hier kommt die umständlichere, dafür aber funktionstüchtige Variante:

Login-Formular per Typoscript

Dafür überschreiben wir im Setup des Templates einige Werte, leeren ein paar andere, die überflüssig sind, und formatieren unsere Werte dann per CSS. Nicht vergessen: Hinterher noch auf einen Marker im Template legen, damit man das Formular auch angezeigt bekommt (page.10.marks.LOGIN < tt_content.login.20).

1. #Login formatieren
2. tt_content.login.20.hiddenFields.pid.value = 15
3. tt_content.login.20.redirect = 20
4. tt_content.login.20.stdWrap.wrap = Mein Login<br />
5. tt_content.login.20.layout = ###LABEL### ###FIELD###
6. tt_content.login.20.labelWrap.wrap =
7. tt_content.login.20.dataArray.10.label.data >
8. tt_content.login.20.dataArray.20.label.data >
9. tt_content.login.20.dataArray.10.label = Mitglied
10. tt_content.login.20.dataArray.20.label = Passwort
11. tt_content.login.20.commentWrap.wrap =
12. tt_content.login.20.REQ.labelWrap.wrap =
13. tt_content.login.20.COMMENT >
14. tt_content.login.20.COMMENT.layout = <span></span>
15. tt_content.login.20.badMess = Pflichtfelder ausfüllen:
16. tt_content.login.20.image = file
17. tt_content.login.20.image.file = fileadmin/Admin/Login.gif
18. [loginUser = *]
19. tt_content.login.20.image = file
20. tt_content.login.20.image.file = fileadmin/Admin/Logout.gif
21. [GLOBAL]

Zeile 2: Angabe de Sysordners mit den FE-User-Daten
Zeile 3: Angabe der Zielseite (Homepage des passwortgeschützten Bereichs)
Zeile 4: Wrap aller Inhalte innerhalb des Formulars (hier für eine Überschrift genutzt)
Zeile 5: Layout von Feldbezeichnung und Feld (hier nur neben einander, kann per CSS mit input {disply:block} unter einander gestellt werden
Zeile 6: entfernt die innere Formatierung um die Feldbeschriftung
Zeile 7-10: entfernen die englische Beschriftung der beiden Felder und ersetzen sie durch eine Beschriftung unserer Wahl. Achtung, 7-8 sind nötig, sonst funktionieren 9-10 nicht. Überschreiben allein reicht nicht.
Zeile 11-12: entfernen Wraps für Kommentare (Hinweise nach dem Login) und Pflichtfeld-Beschriftungen
Zeile 13-14: Ich brauchte keine Information, die nach dem Login erscheint (Username und ein leeres Feld für Passwort). Auch hier reicht das Leeren nicht, ich habe es mit einem einfachen <span></span> überschrieben.
Zeile 15: Meldung, die erscheint, wenn man die Felder nicht ausfüllt.

Man kann auch noch mehr Werte überschreiben oder leeren. Grundsätzlich sind alle Elemente in eine Tabellenzelle gepackt, Labels noch einmal mit einem Absatz umgeben, der z.B. eine getrennte Formatierung von Beschriftungen für Pflichtfelder  gegenüber anderen Feldern erlaubt. Meist braucht man aber nur ein Minimum an Optionen und kann sich so viel Code vom Hals schaffen. Ein Überblick über die default-Einstellungen der Loginbox tt_content.login findet sich – so man das statische Template eingebunden hat – im Template Analyzer EXT:css_styled_content/static ab Zeile 761, sonst natürlich im TSOB.

Submit-Button als Grafik ausgeben

Leider erlaubt der Einbau des Login-Formulars nicht, den Submit-Button eigenständig zu wrappen oder ihm eine Klasse zuzuweisen. Eine separate Formaterung mit CSS fällt damit flach. Man kann den Button aber durch eine Grafik ersetzen:

Zeile 16-21: tt_content.login.20.image ruft die Grafik auf, die man dem Submit-Button zuweist. Da wir für den Logout-Button eine andere Grafik brauchen, binden wir sie mit Conditions (Zeile 18-21) ein. Die Grafik Logout.gif wird nur angezeigt, wenn der User sich eingelogged hatte.