[Quad-Tiger]

Hallo liebe Profis,
jetzt muß ich doch mal wieder eine Anfrage stellen.
 Habe die Version 1.8.24 und alles auf dem neuesten Stand.
Auch habe ich alle 15 angezeigten Seiten bei der Suche durchgeschaut, aber leider nihct fündig geworden.

Zwei Vereinsmitglieder im Forum möchten unbedingt ein "Auge" neben der Passworteingabe beim Login haben.
Auf die Frage welches "Auge" bekam ich die Antwort das es bei anderen Seiten ja auch geht.

Also wenn man das Passwort eingegeben hat, das man es dann wenigstens kurz in Klartext anzeigen lassen kann.
Aktueller Fall: Beim Kollegen war wophl die Katze an der Tastatur und deshalb hat er alles Groß geschrieben, kam nicht ins Forum und wurde vorübergehend gesperrt.

Nun aber das Problem:
Ich bin kein Programmierer und wüßte nicht wo ich da suchen und editieren kann.

Bitte helft mir damit ich dieses "Auge" rein machen kann und Ruhe vor den beiden Nervensägen habe.

[[ExiTuS]]

Es mag sein, dass bestimmte Browser die Funktion von Haus aus mitbringen, d.h. dass Passwort-Textfelder ein "Auge" bekommen, mit dem man zwischen Sternchen und Klartext wechseln kann.

Nun darf man sich im Bereich Webdesign niemals auf bestimmte Funktionen eines Browser abhängig machen!
Daher nehmen wir an, dass dieses Auge eine selbstgemachte und Browser-übergreifende Option werden soll.
Das geht nur mit Änderungen im HTML-Code und Script (JavaScript).

1. Das Textfeld ist vom Typ (<input type="password" ...>) und kann von Natur aus nur Sternchen anzeigen.
2. Zusätzlich zu diesem Textfeld muss ein eigener Button erstellt werden (das "Auge"). Hier kann man Bilder und/oder CSS einsetzen, um es den eigenen Bedürfnissen anzupassen.
Da ein Textfeld keine weiteren HTML-Elemente enthalten kann, muss man hier ein eigenes Feld basteln, das das eigentliche Textfeld und Button enthält, (aber gleichzeitig wie ein Textfeld aussieht, wie man es gewohnt ist - oder aber das "Auge" ist außerhalb des Textfeldes - erstmal nebensächlich)
3. Mit dem Button muss ein JavaScript-Code ausgeführt werden, der das Textfeld (type="password") zu einem type="text" konvertiert. Dadurch würde der Stern-Text wieder sichtbar.

Ich gehe davon aus, dass es dafür mehr als genügend fertige Lösungen gibt, die man einfach kopieren und übernehmen kann. Suche und konzentriere dich auf die JavaScript-Konvertierung von input type.

[ExiTuS]

PS.
Der Kunde ist König! Ja ja, immer diese Ansprüche der Anwender
Solange niemand zahlt, ist er kein Kunde... sondern nur selbst ein Produkt

[itsmeJAY]

jo, wie exitus schon sagte, einfach ein Button neben das Passwortfeld mit einem on click Event..

https://www.w3schools.com/howto/howto_js...ssword.asp

[Quad-Tiger]

Ok, vielen Dank ExiTuS und itsmeJAY.
Jetzt weiß ich ja zumindest schon mal das es möglich ist.

Benötige ich also nur jemanden der mir erklärt wo ich das einfügen kann,
oder jemanden der mir das an die richtige Stelle einfügt.

@ itsmeJAY:
Dein Link ist gut. Jetzt weiß ich schon mal das ich das an zwei Stellen einfügen muß.
Für Stepp 1 add HTML bin ich bei den Templates in forumdisplay_password  fündig geworden.
Für Stepp 2 add JavaScript finde ich nirgends was wo ich das einfügen könnte.

Wie in meiner Anfrage schon geschrieben bin ich kein Programmierer, 
nur der Admin vom Forum und 2. Vorstand vom Quad-Verein. 


@ ExiTuS: Zu Deinem PS: 
Kunden sind es nicht, nur Vereinsmitglieder.
Aber bezahlen tun sie schon, indem sie Mitgliedsbeiträge leisten.
Zumindest der Webspace wird von den Beiträgen bezahlt. (Ich nicht) 

[Schnapsnase]

Der HTML-Teil sollte eigentlich ins Template "header_welcomeblock_guest_login_modal", wenn Du dieses denn benutzt.
Das Javascript kannst Du z.B. im Verzeichnis /jscripts ablegen und verlinkst es dann in o.g. Template

[[ExiTuS]]

In folgenden Templates tauchen Passwort-Felder auf:
- forumdisplay_password (Passwort-geschützes Forum)
- header_welcomeblock_guest_login_modal (Popup-Login aus dem Header)
- member_login (herkömmliche Loginseite)
- member_register_password (Registrierung)
- portal_welcome_guesttext (Login im Portal)
- usercp_changename (UserCP Benutzername ändern)
- usercp_email (UserCP E-Mail ändern)
- usercp_password (UserCP Passwort ändern)

Es ist wichtig, dass jedes input-Element eine eigene ID bekommt (falls nicht bereits gesetzt):
<input type="passwort" id="XXXXX" ...>

Das Stück JavaScript muss nicht in eine Datei ausgelagert werden, sondern kann getrost mit in das Template eingefügt werden - hier ein minimierter Einzeiler. Achte auf die ID:

Code:

<script>function ToggleInputPW() { var in_pw_type = document.getElementById("XXXXX"); if (in_pw_type.type === "password") { in_pw_type.type = "text"; } else { in_pw_type.type = "password"; } }</script>

Der Button könnte in etwa so aussehen (hier in Anlehnung an die Postbit-Buttons):

Code:

<span class="postbit_buttons"><a href="#" title="Passwort anzeigen/verstecken" class="postbit_find" onclick="ToggleInputPW()"><span></span></a></span>

Natürlich kannst du hier jedes andere Element nutzen, hauptsache es wird mit einem onclick="" ausgestattet.

Viel Erfolg!

[ExiTuS]

[Quad-Tiger]

Oh, danke Dir [ExiTuS].
Mache ich mich gleich drüber.
Die Checkbox habe ich nach Anleitung von Schnapsnase schon drin,
aber sie funktioniert noch nicht.
Habe Probleme mit der Verlinkung.

Jetzt probiere ich Deine Anleitung.

Mit euch werde ich vielleicht doch noch zum Programmierer.

[Schnapsnase]

Die Verlinkung kannst Du so im Template einfügen:

Code:

<script type="text/javascript" src="https://deinforum.de/jscripts/scriptdatei_password.js"></script>

Wenn Du das Script eben nicht auslagern möchtest, dann mach es so, wie von [ExiTuS] beschrieben.
Ich hatte nicht behauptet, dass es ausgelagert werden muss.
Der Übersichtlichkeit halber mache ich das aber gern.

[[ExiTuS]]

Jau, es geht nichts über Ordnung und Übersicht
Doch jede Auslagerung in eine Datei kostet einen weiteren HTTP-Request.

Eine weitere Idee:
Man könnte die Passwörter auch mittels Mouseover sichtbar machen.
Hierfür müsste man das "onclick" durch ein "onmouseover/onmouseout" ersetzen, z.B.

Code:

<input type="password" id="XXXXX" onmouseover="PWShow()" onmouseout="PWHide()">
<script>
function PWShow() { document.getElementById("XXXXX").type = "text"; }
function PWHide() { document.getElementById("XXXXX").type = "password"; }
</script>

[ExiTuS]

[Schnapsnase]

@[ExiTuS]
"onmouseover" macht sich bei Mobilgeräten immer etwas schlecht.
Sonst ist`s natürlich ne gute Idee.