Как настроить форму входа на сайте WordPress, чтобы пользователи могли просматривать и скрывать свои пароли? - PullRequest
Новая
       52

Как настроить форму входа на сайте WordPress, чтобы пользователи могли просматривать и скрывать свои пароли?

0 голосов
/ 26 апреля 2020

Форма входа на моем сайте WordPress (версия 5.2.5) настраивается с помощью плагина 'Theme My Login' (версия 6.4.9).

Когда я захожу на страницу входа http://staging.alphaprofit.com/log-in-or-register/ в Microsoft Edge версии 81.0.416.64, я вижу «значок глаза».

«Значок глаза» позволяет пользователям переключаться между просмотром и скрытием своих паролей.

The ' однако значок глаза 'НЕ отображается, когда я захожу на ту же страницу входа с помощью Chrome или Firefox.

Чтобы включить значок глаза в Chrome и Firefox, я сделал следующее:

Я взял строки кода с w3schools.org https://www.w3schools.com/howto/howto_js_toggle_password.asp и добавил их в форму входа в Theme My Login file. php at http://staging.alphaprofit.com/wp-content/plugins/theme-my-login/templates/login-form.php

<div class="tml-rememberme-submit-wrap">
<p class="tml-rememberme-wrap">
<input name="showpwdchkbox" type="checkbox" id="showpwdchkbox<?php $template->the_instance(); ?>" onclick="myFununction()" />
<label for="showpwdchkbox<?php $template->the_instance(); ?>"><?php esc_attr_e( 'Show Password', 'theme-my-login' ); ?></label>
</p>
</div>

<script>
function myFununction() {
  var x = document.getElementById("user_pass");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>

Флажок «Показать пароль» появляется в Chrome и Firefox, если используется вышеуказанный код.

Переключатель флажка, однако, НЕ работает. Он не скрывает и не показывает пароль. Переключатель практически не работает.

Как мне решить эту проблему, чтобы пользователи могли просматривать и скрывать свои пароли во всех основных браузерах, таких как Chrome, Safari, Edge и Firefox?

Обновление

Спасибо за вашу помощь. Я проверил код плагина. Он имеет поле ввода пароля, расположенное чуть выше кода, который я вам ранее отправил: 

<p class="tml-user-pass-wrap">
<label for="user_pass<?php $template->the_instance(); ?>"><?php _e( 'Password', 'theme-my-login' ); ?></label>
<input type="password" name="pwd" id="user_pass<?php $template->the_instance(); ?>" class="input" value="" size="20" autocomplete="off" />
<a href="../lostpassword">Forgot Password?</a>
</p>

Код Javascript выполняется в следующих строках в функциях дочерней темы. php file: 

function load_js_tml_loginformpage() {
if (is_page(6527)) {
wp_enqueue_script('my-jvsc', 'http://staging.alphaprofit.com/wp-content/plugins/theme-my-login/templates/ummy-js.js', array('jquery'), '', false);
}
}
add_action('wp_enqueue_scripts', 'load_js_tml_loginformpage');

В данный момент файл javascript «ummy- js .js» содержит следующие строки кода. Этот код работает только для первого экземпляра «user_pass1»: 

function myFununction() {var x = document.getElementById("user_pass1");
if (x.type === "password") {x.type = "text";} else {x.type = "password";
}
}

Ссылаясь на http://staging.alphaprofit.com/log-in-or-register/, приведенный выше код Javascript имеет 2 проблемы:

1 ) В Firefox, когда пользователь начинает вводить первые несколько символов пароля на странице входа в систему, кажется, что страница сама обновляет sh. Это займет несколько секунд, прежде чем пользователь сможет продолжить ввод полного пароля. Есть ли способ остановить этот авторефр sh и задержать? Эта проблема не проявляется в Chrome.

2) Идентификатор поля пароля в плагине включает значение экземпляра, например, «user_pass1» или «user_pass2» и так далее. В настоящее время код Javascript, который я добавил, проверяет только ID = «user_pass1». Что такое синтаксис Javascript для проверки нескольких экземпляров, то есть для проверки «user_pass #» (где # = 1, 2,3 и т. Д.) Вместо одного «user_pass1». 

function myFununction() {
var x = document.getElementById("user_pass1");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}

1 Ответ

0 голосов
/ 26 апреля 2020

Вам необходимо добавить поле ввода для пароля и присвоить ему правильный идентификатор. 

function myFununction() {
  var x = document.getElementById("user_pass");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
<div class="tml-rememberme-submit-wrap">
  <p class="tml-rememberme-wrap">
    <input name="showpwdchkbox" type="checkbox" id="showpwdchkbox" onclick="myFununction()" />
    <label for="showpwdchkbox">Show</label>
  </p>
</div>
<div>
<input type="password" id="user_pass">
</div>
...