Cho phép hiển thị/ẩn mật khẩu WordPress

2 tháng ago, WordPress Plugin, Views
Cho phép hiển thị/ẩn mật khẩu WordPress

Giới thiệu về Hiển thị/Ẩn Mật khẩu WordPress

Trong thế giới số ngày nay, việc quản lý mật khẩu là vô cùng quan trọng. Đối với người dùng WordPress, việc nhập mật khẩu chính xác khi đăng nhập hoặc quản lý tài khoản là một thao tác thường xuyên. Tuy nhiên, việc gõ sai mật khẩu có thể gây ra sự khó chịu và mất thời gian. Chính vì vậy, tính năng hiển thị/ẩn mật khẩu trở nên vô cùng hữu ích, giúp người dùng dễ dàng kiểm tra mật khẩu đã nhập và tránh các lỗi không đáng có.

Bài viết này sẽ hướng dẫn bạn cách triển khai tính năng hiển thị/ẩn mật khẩu trong WordPress, cả ở giao diện người dùng và trong quá trình phát triển tùy chỉnh. Chúng ta sẽ khám phá các phương pháp khác nhau, từ sử dụng plugin đến viết code tùy chỉnh, để mang lại trải nghiệm người dùng tốt nhất.

Lợi ích của tính năng Hiển thị/Ẩn Mật khẩu

Tính năng hiển thị/ẩn mật khẩu mang lại nhiều lợi ích thiết thực cho người dùng WordPress:

  • Giảm thiểu sai sót khi nhập mật khẩu: Bằng cách hiển thị mật khẩu đã nhập, người dùng có thể dễ dàng phát hiện và sửa chữa các lỗi chính tả hoặc gõ nhầm.
  • Tiết kiệm thời gian: Tránh phải nhập lại mật khẩu nhiều lần do sai sót, giúp tiết kiệm thời gian và tăng hiệu quả làm việc.
  • Cải thiện trải nghiệm người dùng: Tạo cảm giác an tâm và tin tưởng khi người dùng biết chính xác mật khẩu mình đã nhập.
  • Đặc biệt hữu ích trên thiết bị di động: Việc gõ mật khẩu trên màn hình cảm ứng nhỏ có thể khó khăn, tính năng này giúp đảm bảo tính chính xác.

Triển khai Hiển thị/Ẩn Mật khẩu bằng Plugin

Cách đơn giản nhất để thêm tính năng hiển thị/ẩn mật khẩu vào WordPress là sử dụng plugin. Có rất nhiều plugin miễn phí và trả phí có sẵn trên thị trường, mỗi plugin có các tính năng và tùy chọn khác nhau. Dưới đây là một số plugin phổ biến:

  • Show Password
  • Show Hide Password
  • Reveal Password

Để cài đặt plugin, bạn có thể thực hiện theo các bước sau:

  1. Đăng nhập vào trang quản trị WordPress của bạn.
  2. Truy cập “Plugins” -> “Add New”.
  3. Tìm kiếm plugin bạn muốn cài đặt (ví dụ: “Show Password”).
  4. Nhấp vào nút “Install Now”.
  5. Sau khi cài đặt xong, nhấp vào nút “Activate”.

Sau khi kích hoạt plugin, tính năng hiển thị/ẩn mật khẩu sẽ tự động được thêm vào các trường mật khẩu trên trang web của bạn. Thông thường, bạn sẽ thấy một biểu tượng con mắt bên cạnh trường mật khẩu, cho phép bạn hiển thị hoặc ẩn mật khẩu bằng cách nhấp vào biểu tượng đó.

Triển khai Hiển thị/Ẩn Mật khẩu bằng Code Tùy Chỉnh

Nếu bạn muốn có nhiều quyền kiểm soát hơn đối với giao diện và chức năng của tính năng hiển thị/ẩn mật khẩu, bạn có thể triển khai nó bằng code tùy chỉnh. Phương pháp này đòi hỏi kiến thức về HTML, CSS và JavaScript.

Bước 1: Thêm HTML vào Trường Mật khẩu

Đầu tiên, bạn cần thêm một biểu tượng (ví dụ: con mắt) và một button vào trường mật khẩu trong HTML. Bạn có thể sử dụng WordPress hooks để thêm HTML vào trường mật khẩu hiện có. Ví dụ, bạn có thể sử dụng hook `login_form` để thêm HTML vào trang đăng nhập:

“`html

“`

Trong đoạn code trên, chúng ta tạo một container `password-container` để chứa trường mật khẩu và button hiển thị/ẩn mật khẩu. Button có id `toggle-password` và thuộc tính `aria-label` để tăng khả năng tiếp cận.

Bước 2: Thêm CSS để Định dạng Biểu tượng

Tiếp theo, bạn cần thêm CSS để định dạng biểu tượng hiển thị/ẩn mật khẩu. Bạn có thể sử dụng một phông chữ biểu tượng như Font Awesome hoặc tạo một biểu tượng tùy chỉnh bằng CSS. Dưới đây là một ví dụ sử dụng Font Awesome:

“`css
.password-container {
position: relative;
}

#toggle-password {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
outline: none;
}

#toggle-password:before {
font-family: FontAwesome;
content: “f06e”; /* Biểu tượng con mắt (Font Awesome) */
font-size: 18px;
color: #999;
}

#toggle-password.active:before {
content: “f070”; /* Biểu tượng con mắt gạch chéo (Font Awesome) */
}
“`

Trong đoạn code trên, chúng ta sử dụng CSS để định vị biểu tượng con mắt ở bên phải trường mật khẩu và thay đổi biểu tượng khi mật khẩu được hiển thị (sử dụng class `active`).

Bước 3: Thêm JavaScript để Xử lý Sự kiện Click

Cuối cùng, bạn cần thêm JavaScript để xử lý sự kiện click trên button hiển thị/ẩn mật khẩu. JavaScript sẽ thay đổi thuộc tính `type` của trường mật khẩu từ `password` sang `text` để hiển thị mật khẩu và ngược lại. Dưới đây là một ví dụ:

“`javascript
document.addEventListener(‘DOMContentLoaded’, function() {
const togglePassword = document.querySelector(‘#toggle-password’);
const password = document.querySelector(‘#pwd’);

togglePassword.addEventListener(‘click’, function (e) {
// toggle the type attribute
const type = password.getAttribute(‘type’) === ‘password’ ? ‘text’ : ‘password’;
password.setAttribute(‘type’, type);

// toggle the eye slash icon
this.classList.toggle(‘active’);
});
});
“`

Trong đoạn code trên, chúng ta sử dụng JavaScript để lắng nghe sự kiện click trên button `toggle-password`. Khi button được nhấp, chúng ta thay đổi thuộc tính `type` của trường mật khẩu và thêm/xóa class `active` để thay đổi biểu tượng.

Ví dụ Code Hoàn Chỉnh (functions.php)

Dưới đây là một ví dụ code hoàn chỉnh mà bạn có thể thêm vào file `functions.php` của theme WordPress của bạn:

“`php
function add_show_password_to_login_form() {
?>

document.addEventListener(‘DOMContentLoaded’, function() {
const togglePassword = document.querySelector(‘#toggle-password’);
const password = document.querySelector(‘#pwd’);

togglePassword.addEventListener(‘click’, function (e) {
// toggle the type attribute
const type = password.getAttribute(‘type’) === ‘password’ ? ‘text’ : ‘password’;
password.setAttribute(‘type’, type);

// toggle the eye slash icon
this.classList.toggle(‘active’);
});
});

<?php
}
add_action('login_form', 'add_show_password_to_login_form');

function enqueue_fontawesome() {
wp_enqueue_style( 'fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' );
}
add_action( 'login_enqueue_scripts', 'enqueue_fontawesome' );
“`

Lưu ý: Đoạn code trên yêu cầu bạn phải có Font Awesome được tích hợp vào trang web của bạn. Bạn có thể tích hợp Font Awesome bằng cách thêm link CSS vào header của trang web hoặc sử dụng plugin Font Awesome.

Lời khuyên và Lưu ý quan trọng

Khi triển khai tính năng hiển thị/ẩn mật khẩu, hãy lưu ý những điều sau:

  • Bảo mật: Mặc dù tính năng này cải thiện trải nghiệm người dùng, nhưng hãy đảm bảo rằng nó không ảnh hưởng đến bảo mật. Tránh lưu trữ mật khẩu dưới dạng văn bản thuần túy (plaintext).
  • Khả năng tiếp cận: Đảm bảo rằng tính năng này có thể tiếp cận được với tất cả người dùng, bao gồm cả những người sử dụng trình đọc màn hình. Sử dụng thuộc tính `aria-label` và cung cấp mô tả rõ ràng về chức năng của biểu tượng hiển thị/ẩn mật khẩu.
  • Kiểm tra trên nhiều thiết bị và trình duyệt: Đảm bảo rằng tính năng này hoạt động tốt trên tất cả các thiết bị và trình duyệt phổ biến.

Kết luận

Tính năng hiển thị/ẩn mật khẩu là một cải tiến nhỏ nhưng quan trọng, có thể giúp cải thiện đáng kể trải nghiệm người dùng trên trang web WordPress của bạn. Bằng cách sử dụng plugin hoặc viết code tùy chỉnh, bạn có thể dễ dàng thêm tính năng này vào trang web của mình và giúp người dùng dễ dàng quản lý mật khẩu hơn.

Related Topics by Tag
, , , ,

..