ANLEITUNG: Button Passwort sichtbar machen

[noRiddle (revilonetz)]

Hi Community.
Ich brauchte es gerade und teile es nun hier. Habe ein kurzes Javascript zusammengeschrieben um einen Button zur Sichtbarmachung der Zeichen bei der Passworteingabe zu generieren.
Mit dem hier geposteten Code nur für Templates die FontAwesome benutzen geeignet.

Im Standard-Template tpl_modified_responsive in /templates/tpl_modified_responsive/javascript/extra/default.js.php ganz unten diesen Code einfügen:

Code: PHP  [Auswählen]

<?php
//BOC "show pass" implementation, 05-2021, noRiddle
?>
<script>
$(function() {
    if($('input[type="password"]').length) {
        let $ipw = $('input[type="password"]'),
            sh_pw = ' <i class="shw-pw fa fa-eye"></i>';
        $ipw.each(function() {
            let $this = $(this),
                th = $this.outerHeight(),
                icfs = 22,
                nth = th/2 - icfs/2;
            $this.wrap('<div class="pssw-wrap" style="position:relative;"></div>');
            $(sh_pw).insertAfter($this).css({'position':'absolute', 'top':nth+'px', 'right':'5px', 'font-size':icfs+'px', 'color':'#555', 'cursor':'pointer'});
        });
        $('.shw-pw').on('click', function() {
            let $that = $(this);
                $tpi = $that.prev('input'),
                tpiattp = $tpi.attr('type'),
                tswp = tpiattp == 'password' ? true : false;

             $tpi.prop('type', (tswp ? 'text' : 'password'));
             $that.toggleClass('fa-eye', !tswp).toggleClass('fa-eye-slash', tswp);
        });
    }
});
</script>
<?php
//EOC "show pass" implementation, 05-2021, noRiddle
?>

In /templates/YOUR_TEMPLATE/stylesheet.css diesen Code anlegen:

Code: CSS  [Auswählen]

/*BOC "show pass" icon in passw fields, 05-2021, noRiddle*/
#create_account .pssw-wrap {
    display:inline-block;
    width:95%;
}
#create_account .pssw-wrap input {
    width:100%;
}
/*EOC "show pass" icon in passw fields, 05-2021, noRiddle*/

Für andere Templates bitte selbst schauen wo es am besten eingefügt wird.

Der Code erkennt wenn auf der aufgerufenen Seite ein Passwort-Feld vorhanden ist und generiert einen Container der das Passwort-Feld mit position:relative  umgibt, um den Button dann absolute positioniert ins Passwort-Feld einfügen zu können. Die Styles sind inline generiert da für die Positionierung des Buttons die Höhe des Input-Feldes automat. berechnet wird. Die font-size des Buttons ist konfigurierbar bei icfs.
Wer will kann den Teil der nicht autom. berechnet werden muß natürlich in CSS ausgliedern.

Wie ich's hier gepostet habe hat man allerdings komprimiert mit knappen drei Zeilen Code eine schöne und leicht zu implementierende Funktion.

[ Für Gäste sind keine Dateianhänge sichtbar ] [ Für Gäste sind keine Dateianhänge sichtbar ]

Gruß,
noRiddle

[EDIT Tomcraft 01.10.2021: Code korrigiert.]
[EDIT Tomcraft 01.10.2021: Fehler korrigiert.]
[EDIT Tomcraft 01.10.2021: Code aktualisiert.]

Linkback: https://www.modified-shop.org/forum/index.php?topic=41861.0

[awids]

Das ist ja mal ein hübsche Erweiterung, auch wenn ich sie selbst nicht nutze (den Satz wollte ich auch mal raushauen ).

Das Script ist auch sehr leicht anpassbar, wenn man z. B. Glyphicons oder eine andere Font nutzt. Sehr gut.

Ich könnte mir das Script auch sehr gut als eigene Datei im Javascript-Extra-Ordner vorstellen. Ist aber kein Muss.

Nochmals vielen lieben Dank!

[noRiddle (revilonetz)]

Das ist ja mal ein hübsche Erweiterung, auch wenn ich sie selbst nicht nutze (den Satz wollte ich auch mal raushauen ).
[...]

Wer sollte sowas je schonmal gesagt haben...

[DerNachbar]

Vielen Dank für die Erweiterung. Ich bin mir sicher, dass meine Kunden das nützlich finden werden. Zumindest ist sowas für mich immer hilfreich, wenn ich irgendwo rum shoppe. Danke dir nochmal!

[Bonner]

Vielen Dank dafür!

Bonner

[Jürgen]

Besten Dank...

Funktioniert ohne Probleme!

Gruß

Jürgen

[noRiddle (revilonetz)]

Der Korrektheit halber, auch wenn die von mir getesteten Browser es selbst ergänzen:
Bei dem Wert für top fehlt im ersten Post die Einheit px, sollte also so aussehen:

Code: PHP  [Auswählen]

<?php
//BOC show pass implementation, 05-2021, noRiddle
?>
<script>
$(function() {
    if($('input[type="password"]').length) {
        let $ipw = $('input[type="password"]'),
            sh_pw = ' <i class="shw-pw fa fa-eye"></i>';
        $ipw.each(function() {
            let th = $(this).outerHeight(),
                icfs = 22,
                nth = th/2 - icfs/2;
            $(this).wrap('<div class="pssw-wrap" style="position:relative;"></div>');
            $(sh_pw).insertAfter($(this)).css({'position':'absolute', 'top':nth+'px', 'right':'5px', 'font-size':icfs+'px', 'color':'#555', 'cursor':'pointer'});
        });
        $('.shw-pw').on('click', function() {
            let $tpi = $(this).prev('input');

            $(this).toggleClass('fa-eye fa-eye-slash');

            if($tpi.attr('type') == 'password') {
                $tpi.prop('type', 'text');
            } else if($tpi.attr('type') == 'text') {
                $tpi.prop('type', 'password');
            }
        });
    }
});
</script>
<?php
//EOC show pass implementation, 05-2021, noRiddle
?>

Gruß,
noRiddle

*EDIT*
Kürzer und etwas schneller:

Code: PHP  [Auswählen]

<?php
//BOC show pass implementation, 05-2021, noRiddle
?>
<script>
$(function() {
    if($('input[type="password"]').length) {
        let $ipw = $('input[type="password"]'),
            sh_pw = ' <i class="shw-pw fa fa-eye"></i>';
        $ipw.each(function() {
            let th = $(this).outerHeight(),
                icfs = 22,
                nth = th/2 - icfs/2;
            $(this).wrap('<div class="pssw-wrap" style="position:relative;"></div>');
            $(sh_pw).insertAfter($(this)).css({'position':'absolute', 'top':nth+'px', 'right':'5px', 'font-size':icfs+'px', 'color':'#555', 'cursor':'pointer'});
        });
        $('.shw-pw').on('click', function() {
            let $tpi = $(this).prev('input'),
                tpiattp = $tpi.attr('type');

            $(this).toggleClass('fa-eye fa-eye-slash');

             $tpi.prop('type', (tpiattp == 'password' ? 'text' : 'password'));
        });
    }
});
</script>
<?php
//EOC show pass implementation, 05-2021, noRiddle
?>

*END_EDIT*

[EDIT Tomcraft 13.05.2021: Korrektur in Beitrag 1 übernommen.]

[Viol]

Vielen Dank für die Anleitung.
Bei mir "rutscht" leider der Stern für den Hinweis der notwendigen Eingabe ein Zeile tiefer. s. Screen. Ich habe vergeblich mit CSS versucht, das hinzubekommen..
Shop Version: v2.0.5.1 rev 12725
Template: modifiziertes tpl_modified_responsive

[karsta.de]

Das kannst du hinbekommen, wenn du das Skript von noRiddle so änderst:

Code: PHP  [Auswählen]

<?php
//BOC show pass implementation, 05-2021, noRiddle
?>
<script>
$(function() {
    if($('input[type="password"]').length) {
        let $ipw = $('input[type="password"]'),
            sh_pw = ' <i class="shw-pw fa fa-eye"></i>';
        $ipw.each(function() {
            let th = $(this).outerHeight(),
                icfs = 22;
            $(this).wrap('<div class="pssw-wrap" style="display:inline;"></div>');
            $(sh_pw).insertAfter($(this)).css({'position':'absolute', 'top':'0px', 'right':'15px', 'font-size':icfs+'px', 'color':'#555', 'cursor':'pointer'});
        });
        $('.shw-pw').on('click', function() {
            let $tpi = $(this).prev('input'),
             tpiattp = $tpi.attr('type');
            $(this).toggleClass('fa-eye fa-eye-slash');
             $tpi.prop('type', (tpiattp == 'password' ? 'text' : 'password'));
        });
    }
});
</script>
<?php
//EOC show pass implementation, 05-2021, noRiddle
?>

Und in deiner templates/tpl_modified_responsive/stylesheet.css folgendes hinzufügst:

Code: CSS  [Auswählen]

.stern{position:relative;}

BG Karsta

[noRiddle (revilonetz)]

Mmmh, das ist in der Tat eine blöde Stelle. Überall funktioniert's perfekt, außer bei Konto-Erstellung.
Das liegt an den Tabellen, den Inline-Elementen und den Prozent-Angaben der benutzten Elemente.
Mit display:inline; auf das wrap-Element fehlt dann die Höhe, eben weil es dann ein Inline-Element ist, und die Position stimmt in der Höhe nicht mehr.
Da man an dieser Stelle einiges mit CSS korrigieren müsste - am Besten mittels des Ober-Selektors #create_account, sollte man vielleicht das CSS überhaupt aus dem Javascript ins CSS auslagern.
Klassen sind ja vorrausschauend von mir vergeben worden.

Für die Korrektur würde ich's so versuchen:

Code: CSS  [Auswählen]

#create_account .pssw-wrap {
    display:inline-block;
    width:95%;
}
#create_account .pssw-wrap input {
    width:100%;
}

Gruß,
noRiddle

[karsta.de]

GEÄNDERT:
Hatte übersehen, dass nicht überall das span.stern verwendet wird, wo das Skript Anwendung findet.

Das kannst du hinbekommen, wenn du das Skript von noRiddle so änderst:

Code: PHP  [Auswählen]

<?php
//BOC show pass implementation, 05-2021, noRiddle
?>
<script>
$(function() {
    if($('input[type="password"]').length) {
        let $ipw = $('input[type="password"]'),
            sh_pw = ' <i class="shw-pw fa fa-eye"></i>';
        $ipw.each(function() {
            let th = $(this).outerHeight(),
                icfs = 22;
            $(this).wrap('<div class="pssw-wrap"></div>');
            $(sh_pw).insertAfter($(this)).css({'position':'absolute', 'top':'0px', 'right':'15px', 'font-size':icfs+'px', 'color':'#555', 'cursor':'pointer'});
        });
        $('.shw-pw').on('click', function() {
            let $tpi = $(this).prev('input'),
             tpiattp = $tpi.attr('type');
            $(this).toggleClass('fa-eye fa-eye-slash');
             $tpi.prop('type', (tpiattp == 'password' ? 'text' : 'password'));
        });
    }
});
</script>
<?php
//EOC show pass implementation, 05-2021, noRiddle
?>

Und in deiner templates/tpl_modified_responsive/stylesheet.css folgendes hinzufügst:

Code: CSS  [Auswählen]

.pssw-wrap{display:inline;position:relative;}

Man könnte aber auch den inlinestyle für .shw-pw.fa.fa-eye & .shw-pw.fa.fa-eye-slash auslagern

BG Karsta

[Viol]

Danke für die Tipps. Hier dann mit ausgelagertem  CSS:

Code: PHP  [Auswählen]

<?php
//BOC show pass implementation, 05-2021, noRiddle
?>
<script>
$(function() {
    if($('input[type="password"]').length) {
        let $ipw = $('input[type="password"]'),
            sh_pw = ' <i class="shw-pw fa fa-eye"></i>';
        $ipw.each(function() {
            let th = $(this).outerHeight(),
                icfs = 22;
            $(this).wrap('<div class="pssw-wrap"></div>');
            $(sh_pw).insertAfter($(this))
        });
        $('.shw-pw').on('click', function() {
            let $tpi = $(this).prev('input'),
             tpiattp = $tpi.attr('type');
            $(this).toggleClass('fa-eye fa-eye-slash');
             $tpi.prop('type', (tpiattp == 'password' ? 'text' : 'password'));
        });
    }
});
</script>
<?php
//EOC show pass implementation, 05-2021, noRiddle
?>

In die stylesheet css folgendes einfügen:

Code: CSS  [Auswählen]

/*show pass noRiddle */
.pssw-wrap
{
        display:inline;position:relative;
}
 .shw-pw.fa.fa-eye,.shw-pw.fa.fa-eye-slash
{
        position: absolute;
        top:0px;
        right:15px;
        font-size:22px;
        color:#555;
        cursor: pointer;
}

[noRiddle (revilonetz)]

Würde ich so nicht machen.
Die automatische Höhenberechnung und somit der Inline-Style dafür sollte im Javascript verbleiben.
Außerdem würde ich den right-Wert auf 5px belassen damit überall, also auch wenn man nicht in der Kontoerstellung ist, die richtige Position des Icons gewährleistet ist.
Für die Ausnahme in der Kontoerstellung nimmst du dann das von mir vorgeschlagene CSS:

Code: CSS  [Auswählen]

#create_account .pssw-wrap {
    display:inline-block;
    width:95%;
}
#create_account .pssw-wrap input {
    width:100%;
}

Gruß,
noRiddle

[little-key]

Hi Community.
Ich brauchte es gerade und teile es nun hier. Habe ein kurzes Javascript zusammengeschrieben um einen Button zur Sichtbarmachung der Zeichen bei der Passworteingabe zu generieren.
Mit dem hier geposteten Code nur für Templates die FontAwesome benutzen geeignet.

Im Standard-Template tpl_modified_responsive in /templates/tpl_modified_responsive/javascript/extra/default.js ganz unten diesen Code einfügen:
[...]

Lieben Dank dafür.
Der Form halber, ist das nicht die Datei default.js.php? .... erklärt sich natürlich eigentlich von selbst.

In dem Zuge ist mir aufgefallen bzw. ein Kunde wies mich darauf hin, dass keine Unterstriche im Passwort als Sonderzeichen angenommen werden?
Getestet und stimmt, Bindestriche werden akzeptiert.

Wo kann das geändert werden? Oder ist das nur bei mir so?

Danke und Grüße an alle.
PS. Habe noch die v2.0.5.1. falls in 2.0.6.0 bereits geändert.

[EDIT Tomcraft 01.10.2021: Korrektur in Beitrag 1 übernommen.]

[noRiddle (revilonetz)]

Jau, muß default.js.php heißen. Man kann doch aufpassen wie man will, es schleicht sich trotzdem oft ein
Fehlerchen ein. Du kannst aber auch eine extra PHP-Datei beliebigen Namens mit dem Code anlegen.

Ja, in der 2.0.6.0 wird der Unterstrich als Sonderzeichen akzeptiert (wenn Backend => Konfiguration => Minimum Werte => "Passwort Sonderzeichen" einen Wert > 0 enthält, ansonsten sowieso),

Gruß,
noRiddle


*NACHTRAG*

Hier nochmals zusammengefasst die imo beste Variante:
In /templates/YOUR_TEMPLATE/javascript/default.js.php oder in eine eigens angelegte PHP-Datei in selbem Verzeichnis folgenden Code anlegen:

Code: PHP  [Auswählen]

<?php
//BOC "show pass" implementation, 05-2021, noRiddle
?>
<script>
$(function() {
    if($('input[type="password"]').length) {
        let $ipw = $('input[type="password"]'),
            sh_pw = ' <i class="shw-pw fa fa-eye"></i>';
        $ipw.each(function() {
            let $this = $(this),
                th = $this.outerHeight(),
                icfs = 22,
                nth = th/2 - icfs/2;
            $this.wrap('<div class="pssw-wrap" style="position:relative;"></div>');
            $(sh_pw).insertAfter($this).css({'position':'absolute', 'top':nth+'px', 'right':'5px', 'font-size':icfs+'px', 'color':'#555', 'cursor':'pointer'});
        });
        $('.shw-pw').on('click', function() {
            let $that = $(this);
                $tpi = $that.prev('input'),
                tpiattp = $tpi.attr('type'),
                tswp = tpiattp == 'password' ? true : false;

             $tpi.prop('type', (tswp ? 'text' : 'password'));
             $that.toggleClass('fa-eye', !tswp).toggleClass('fa-eye-slash', tswp);
        });
    }
});
</script>
<?php
//EOC "show pass" implementation, 05-2021, noRiddle
?>

In /templates/YOUR_TEMPLATE/stylesheet.css diesen Code anlegen:

Code: CSS  [Auswählen]

/*BOC "show pass" icon in passw fields, 05-2021, noRiddle*/
#create_account .pssw-wrap {
    display:inline-block;
    width:95%;
}
#create_account .pssw-wrap input {
    width:100%;
}
/*EOC "show pass" icon in passw fields, 05-2021, noRiddle*/

[EDIT Tomcraft 01.10.2021: Code in Beitrag 1 aktualisiert.]