Passwort beim Login anzeigen! Aktualisiert 30.04.20
Die Idee, bei der Passworteingabe sich das Passwort anzeigen zu lassen, ist nicht neu! Die Beschaffenheit der Passwörter, aber auch der Sicherheit wegen, werden Passwörter immer komplexer und länger! Da sind Fehleingaben oder vergessene Passwörter an der Tagesordnung. Von Vorteil ist es daher, hier nachzurüsten! Die neuste Version vom Browser "MS Edge" stellt bereits die Funktion zur Verfügung, leider ohne Optionen. Andere Browser werden bestimmt nachziehen! Wie man im Bild sehen kann, ist das Symbol recht klein und schwarz. Auf Webseiten mit einem dunklen Design, wird das Auge kaum wahrgenommen!
Installation fürs Business-Template V4
Es gibt 3 Variationen, die durch ihre unterschiedlichen Funktionsweisen und Darstellungen vielen Ansprüchen gerecht werden! Die Passwortanzeige wird aktiviert im "Login", in der "Anmeldung" und in der Portalbox "Userinfo"! Als Auslösesymbol könnte man auch "Unicodes" verwenden, die allerdings nicht in allen Browsern funktionieren oder gleich aussehen! In den folgenden Beispielen werden daher Grafiken benutzt, die auch beliebig angepasst werden können!
Unicodes:
Grafiken:
Versionen:
Passwort anzeigen per "Mouseover"
Passwort ein- und ausblenden per "Klick"
Passwort ein- und ausblenden mittels "Checkbox"
Version 1: Passwort anzeigen per "Mouseover"! Hat man sensible Daten und möchte das Passwort nur äußerst kurz anzeigen, ist die folgende Version per "Mouseover" optimal! Nach einem Klick auf die Passwort-Eingabezeile, wird das Auslöse-Symbol ganz rechts angezeigt! Nur beim "Mouseover" auf das Auslöse-Symbol wird das Passwort angezeigt!
Das komplette Skript mit der CSS kann in die "Fußzeile" oder am besten als Plugin in den "bottom_header" eingetragen werden! Das Template wird nicht verändert!
In Zeile 4 kann die Größe der Grafik verändert werden. Gegebenenfalls "margin-top" anpassen!
Hat man eher ein dunkles Design, Zeile 10 freigeben (Doppelstrich entfernen) und Zeile 9 auskommentieren (Doppelstrich hinzufügen)! Hier werden hellere Grafiken genommen, um den Kontrast zu gewährleisten!
Version 2: Passwort ein- und ausblenden per "Klick"! Möchte man das Passwort, um sich nicht zu verschreiben, während der gesamten Passworteingabe angezeigt bekommen, ist die folgende Version per "Klick" optimal! Nach einem Klick auf die Passwort-Eingabezeile, wird das Auslöse-Symbol ganz rechts angezeigt! Ein Klick auf das Auslöse-Symbol blendet das Passwort fest ein und wieder aus!
Das komplette Skript mit der CSS kann in die "Fußzeile" oder am besten als Plugin in den "bottom_header" eingetragen werden! Das Template wird nicht verändert!
In Zeile 4 kann die Größe der Grafik verändert werden. Gegebenenfalls "margin-top" anpassen!
Hat man eher ein dunkles Design, Zeile 10 freigeben (Doppelstrich entfernen) und Zeile 9 auskommentieren (Doppelstrich hinzufügen)! Hier werden hellere Grafiken genommen, um den Kontrast zu gewährleisten!
Version 3: Passwort ein- und ausblenden per "Checkbox"! Möchte man die neue Funktion besonders hervorheben, eignet sich die folgende Version per "Checkbox" besonders gut! Die "Checkbox" wird immer angezeigt und bekommt einen kleinen Beschreibungswortlaut! Das Passwort wird durch die "Checkbox" fest ein-und ausgeblendet!
Das komplette Skript mit der CSS kann in die "Fußzeile" oder am besten als Plugin in den "bottom_header" eingetragen werden! Das Template wird nicht verändert!
Das Skript ist sehr klein und benötigt keine Grafiken!
Soll das Feature auch mobil funktionieren, ist ein weiterer Eintrag unter Mobil notwendig!
Die Eintragungen entsprechen, mit kleinen Formatänderungen, dem Business Template V4!
Das folgende JavaScript kommt unter Mobil in Eigenes Javascript!
Die CSS wird unter Eigene Fußzeile eingetragen!
Das JavaScript wird unter Mobil in Eigenes Javascript eingetragen!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<!-- Passwort zeigen - Mit 'checkbox' / Für die mobile Version und die responsive Templates V6 --> <script> $(function(){ var passw = $("input[name='pww'],input[name='puw']"); passw.parent().append('<div class="myPass"><input type="checkbox"><span>Passwort anzeigen</span></div>');
<!-- Passwort zeigen - Mit 'checkbox' / Für die mobile Version und die responsive Templates V6 --> <style> .myPass span{white-space:nowrap;line-height:30px;font-size:12px;} .myPass input{width:30px !important;box-shadow:none;cursor:pointer;position:relative;top:2px;} </style>
Passwort beim Login anzeigen - Für alle Templates! Aktualisiert 20.09.20
Um das Passwort in allen Templates, auch im "Responsive-Design", beim Login oder beim Anmelden unkompliziert sichtbar zu machen, bietet sich das Skript per "Checkbox" bestens an! Nimmt man eine andere Variante, "per Mouseover" oder "per Klick" müssen zu viele, individuelle Korrekturen in der Formatierung bedacht und angepasst werden! Für das Gaia-Template V3 ist noch ein kleines Feature aktiv, das den Schnell-Login oben rechts ausblendet, wenn der große Login oder die Anmeldung aufgerufen wird!
Das komplette Skript mit der CSS kann in die "Fußzeile" oder am besten als Plugin in den "bottom_header" eingetragen werden!
Damit das Skript auch in der "Mobilen Version" funktioniert, Installation im folgenden Spoiler unter V 3.11 beachten! Das Template wird dadurch nicht verändert!
Wird nur das "Responsive-Design" genutzt, sind die Eintragungen in der "Fußzeile" oder im "bottom_header" nicht mehr notwendig!
Die Eintragungen entsprechen, mit kleinen Formatänderungen, dem Business Template V4!
Das folgende JavaScript kommt unter Mobil in Eigenes Javascript!
Die CSS wird unter Eigene Fußzeile eingetragen!
Das JavaScript wird unter Mobil in Eigenes Javascript eingetragen!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<!-- Passwort zeigen - Mit 'checkbox' / Für die mobile Version und die responsive Templates V6 --> <script> $(function(){ var passw = $("input[name='pww'],input[name='puw']"); passw.parent().append('<div class="myPass"><input type="checkbox"><span>Passwort anzeigen</span></div>');
<!-- Passwort zeigen - Mit 'checkbox' / Für die mobile Version und die responsive Templates V6 --> <style> .myPass span{white-space:nowrap;line-height:30px;font-size:12px;} .myPass input{width:30px !important;box-shadow:none;cursor:pointer;position:relative;top:2px;} </style>
PS: Es wäre natürlich gut, wenn Xobor das Plugin in den unterschiedlichen Templates fest übernehmen würde. Dann gäbe es keine Anpassungsschwierigkeiten oder Fehlfunktionen!
Es hat sich gezeigt, dass das Gaia Template V3 im Aufbau schon sehr speziell ist! Habe die Beiträge nochmal überarbeiten müssen, um Formatfehler in den Gaia Error-Meldungen zu beheben und um das Zusammenspiel mit dem mobilen Template, einschließlich "Responsive-Design", besser zu verstehen! Zusätzlich ist auch ein Update notwendig, damit der noch kommende Beitrag, Kennwort-Validierung mit "Passwort beim Login anzeigen" zusammenarbeiten! Alle Änderungen sind bereits in Beitrag # 1 und Beitrag #2 vorgenommen!