Modul Passwort Klartext mit Passwort-Eye

Thema wurde von Anonymous, 2. November 2022 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    6. Dezember 2016
    Beiträge:
    359
    Danke erhalten:
    211
    Danke vergeben:
    156
    Ich habe mal wieder was gebastelt. Wer es haben möchte, bitte bedient euch!

    Meine Kunden haben mich schon öfters gefragt, ob das Passwort beim Registrieren nicht im Klartext angezeigt werden kann. Scheinbar wissen die nicht was sie tippen. Jedenfalls hat das Frontend sowas bisher nicht.

    Die anhängende Datei "PasswortEye.zip" entpacken und ins GXModules-Verzeichnis kopieren.
    Anschließend alle Caches leeren.
    Dann wird in der Kunden-Registierungsseite bei den Eingabefeldern die Augen gezeigt.

    Getestet in den Versionen 4.6. bis 4.7. mit Theme Malibu.

    screen-20221102-1.png
     

    Anhänge:

  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    31. März 2020
    Beiträge:
    123
    Danke erhalten:
    41
    Danke vergeben:
    173
    Weißt Du, ob das auch abwärtskompatibel für evt. 4.4. geht?
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    6. Dezember 2016
    Beiträge:
    359
    Danke erhalten:
    211
    Danke vergeben:
    156
    Kann ich nicht mehr testen, habe keine Version unter 4.6. installiert.
    Aber ich denke es müsste gehen, denn ich hatte schon andere Anpassungen an dieser Datei gemacht und es hat funktioniert.
    Einfach ausprobieren und wenn es nicht funktioniert, einfach den Ordner wieder löschen.
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    31. März 2020
    Beiträge:
    123
    Danke erhalten:
    41
    Danke vergeben:
    173
    funktioniert auch mit 4.4.
    TOP! danke dir für dieses kleine modul, was sicher einigen (kund*innen) hilft.
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    13. Juni 2018
    Beiträge:
    206
    Danke erhalten:
    98
    Danke vergeben:
    143
    sehr cool, lieben dank ;-)
     
  6. craft-tools

    craft-tools Erfahrener Benutzer

    Registriert seit:
    9. Juni 2016
    Beiträge:
    92
    Danke erhalten:
    59
    Danke vergeben:
    203
    Wir haben es auch eingebunden, herzlichen Dank :)
    I-Tüpfelchen wäre jetzt, wenn das auch beim normalen Kundenlogin greifen würde... aber das ist vermutlich eine komplett andere Baustelle?
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    351
    Danke erhalten:
    147
    Danke vergeben:
    125
    Schade, dass man solche tolle Sachen in der Cloud nicht hat.
     
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    6. Dezember 2016
    Beiträge:
    359
    Danke erhalten:
    211
    Danke vergeben:
    156
    Hier das i-Tüpfelchen.
    Die Datei einfach noch in den Ordner legen, wo auch die account_register.html liegt.

    screen-20221104-1.png
     

    Anhänge:

  9. Marias Einkaufsparadies

    Marias Einkaufsparadies Erfahrener Benutzer

    Registriert seit:
    12. Dezember 2021
    Beiträge:
    371
    Danke erhalten:
    156
    Danke vergeben:
    90
    Gib noch "hidden-xs" bei <a class= ein, Es gibt Probleme in der Mobilen Ansicht. Das Eye-Button ist dort nicht klickbar.

    Code:
    <a role="button" class="passwort-eye-button hidden-xs"
    Code:
    <!-- Login Passwort -->
    
                        {block name="box_login_dropdown_form_password"}
                        <div class="passwort-eye-behaelter">
                            <div class="form-group">
                                <input autocomplete="current-password" type="password" id="box-login-dropdown-login-password" class="passwort-eye-feld form-control" placeholder="{$txt.text_pwd}" name="{$content_data.FIELD_PWD_NAME}" />
                                <a role="button" class="passwort-eye-button hidden-xs"
                                onclick="passwortSichtbarkeitUmschalten('box-login-dropdown-login-password')">
                                <i class="fa fa-eye passwort-eye-anzeigen-icon"></i>
                                <i class="fa fa-eye-slash passwort-eye-verstecken-icon"></i>
                                </a>
                            </div>
                        </div>
    
    <script type="text/javascript">
    function passwortSichtbarkeitUmschalten(eingabefeldId) {
        const passwortFeld = document.getElementById(eingabefeldId);
        if(passwortFeld.type === "password") {
            passwortFeld.type = "text";
        } else {
            passwortFeld.type = "password";
        }
    }
    </script>
                        {/block}
    
    
    Und in der CSS-Datei würde ich noch unten
    Code:
    ::-ms-reveal {
        display: none;
    }
    einfügen. Damit unterbindest du die Edge eigene Eye-Button-Anzeige. Sonst sehen Besucher, die Edge nutzen und diese Funktion aktiviert haben, zwei "Augen".


    Hier noch die Codes für "account_change_password.html", "box_login.html" und "login.html":
     

    Anhänge:

  10. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    6. Dezember 2016
    Beiträge:
    359
    Danke erhalten:
    211
    Danke vergeben:
    156
    @Marias Einkaufsparadies - Super Tipp für die mobile Ansicht. Und danke für den Code für die Accountseite.

    Ich denke wir haben hier einen Anstoß gegeben, damit Gambio das mal überall einbaut.
     
  11. Marias Einkaufsparadies

    Marias Einkaufsparadies Erfahrener Benutzer

    Registriert seit:
    12. Dezember 2021
    Beiträge:
    371
    Danke erhalten:
    156
    Danke vergeben:
    90
    Hoffe ich auch. Besonders für die mit Cloud-Shop.
     
  12. craft-tools

    craft-tools Erfahrener Benutzer

    Registriert seit:
    9. Juni 2016
    Beiträge:
    92
    Danke erhalten:
    59
    Danke vergeben:
    203
    Ihr seid mega - super, das hat mich schon lang gestört, dass wir "Gambianer" kein Auge hatten - vielen herzlichen Dank euch beiden!
     
  13. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    13. Juni 2018
    Beiträge:
    206
    Danke erhalten:
    98
    Danke vergeben:
    143
    Moin, also das erste für die Accounterstellung funktioniert bei mir, die anderen leider nicht, woran kann es liegen?
    Danke ;-)
     
  14. Marias Einkaufsparadies

    Marias Einkaufsparadies Erfahrener Benutzer

    Registriert seit:
    12. Dezember 2021
    Beiträge:
    371
    Danke erhalten:
    156
    Danke vergeben:
    90
    Du hast die anderen auch in den Ordner hingeschoben, wo die Datei für die Accounterstellung liegt? Also in "GXModules\EigeneModule\Passwort-Eye\Shop\Themes\All" oder ähnlich. Hast du Cache gelöscht? Ach so, für "account_change_password.html" habe ich noch die Css etwas angepasst, lade bitte noch die erweiterte Css-Datei in den Css-Ordner vom Modul und ersetze dort diese. In "account_change_password.html" würde das Auge ansonsten zu sehr am Rand liegen.
     

    Anhänge:

  15. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    13. Juni 2018
    Beiträge:
    206
    Danke erhalten:
    98
    Danke vergeben:
    143

    Anhänge:

  16. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.403
    Danke erhalten:
    707
    Danke vergeben:
    92
    #16 Kai Stejuhn, 5. November 2022
    Zuletzt bearbeitet: 6. November 2022
    Ich habe mal alle Dateien hier zusammengestellt und eine ZIP-Datei für GXModules und eine ZIP-Datei für Themes erstellt. Die GXModules-Version ist als einfaches Modul gedacht, die Themes-Version kann direkt ins eigene Themes eingebunden werden und ist somit auch für, die fast immer vernachlässigten, Cloud-Shops geeignet.

    Bei der Zusammfassung habe ich dann auch eine externe Javascript-Datei erstellt, so dass die Funktion nur noch einmal vorhanden ist und nicht in jeder HTML-Datei, teilweise mehrfach, drin ist.

    Gestest habe ich das auf einem 4.7.1.0 und einen ganz frischen Cloud-Shop. Sicherheitshalber aber immer eine Sicherung machen und Benutzung auf eigene Gefahr.

    Edit: Dateien ausgetauscht nach Fehlerbehebung
     

    Anhänge:

  17. guenter_baeumler

    guenter_baeumler Erfahrener Benutzer

    Registriert seit:
    22. Juni 2018
    Beiträge:
    376
    Danke erhalten:
    69
    Danke vergeben:
    69
    Hallo Kai, vielen Dank für die Mühe. Verzeih die Frage eines "Nicht-Programmierers" Das Ziel von GXModules ist klar, wo muss der Ordner Themes hin, wenn ich "Themes-Honeygrid" nutze?
     
  18. Marias Einkaufsparadies

    Marias Einkaufsparadies Erfahrener Benutzer

    Registriert seit:
    12. Dezember 2021
    Beiträge:
    371
    Danke erhalten:
    156
    Danke vergeben:
    90
    @Kai Stejuhn Erst einmal vielen Dank für deine Verbesserung und Zusammenfassung. Kannst du bitte nur noch, wie oben beschrieben, in der "box_login_dropdown.html" "<a role="button" class="passwort-eye-button hidden-xs"..." einfügen. Wie gesagt, Mobil ist das "Auge" da nicht klickbar. Es sei denn, du weist wie man das Problem löst.
     
  19. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.403
    Danke erhalten:
    707
    Danke vergeben:
    92
    Wenn Du das Original Honeygrid-Themes hast, dann musst Du in der Verzeichnisstruktur der ZIP-Datei "DeinThemes" mit "Honeygrid" ersetzen.

    Die ZIP-Dateien geben immer die Struktur ab dem Server-Hauptverzeichnis an. Da die Themes, gerade bei angepassten und vorher kopierten Themes, unterschiedliche Namen haben, muss man hier den Teil "DienThemes" immer mit den Namen des Themes-Ordners austauschen.
     
  20. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.403
    Danke erhalten:
    707
    Danke vergeben:
    92