טופס התחברות הוא וידג'ט שימושי מאוד באלמנטור, ובעזרתו אנחנו יכולים לאפשר למשתמשי האתר להתחבר אליו. זה שימושי בעיקר באתרי מסחר וגם במערכות למידה ובעוד מגוון סוגי אתרים בהם המשתמש יכול להיכנס לאזור אישי. את טופס ההתחברות אפשר למקם בכל דף באתר וכך ליצור עמוד התחברות (Login) מותאם ומעוצב אישית.
בימים אלה אני עובד עם אופיר מנחם על אתר גדול בתחום הלמידה (LMS), וכחלק מהעבודה אופיר הציב לי אתגר: לקחת את טופס ההתחברות (שנוצר באלמנטור) ולהוסיף לו את האפשרות להציג את הסיסמה באופן גלוי (באמצעות כפתור קטן).
בטופס ההתחברות הרגיל של וורדפרס (זה שנמצא בכתובת wp-login.php) ובטופס ההתחברות המובנה של ווקומרס קיימת אפשרות מובנית להציג את הסיסמה. בעיני זו אפשרות חשובה מאוד מבחינת UI/UX, כי היא מאפשרת למשתמש לעשות בקרה על הסיסמה שהוא הזין ולוודא שאין טעות הקלדה. זה חשוב במיוחד עבור משתמשים שמשתמשים בכמה שפות (לדוגמה: עברית ואנגלית), וכמובן כל משתמש שיש לו caps lock (כלומר – כל משתמש דסקטופ).
הבעייה והפיתרון
בטופס ההתחברות של אלמנטור, לעומת זאת, האפשרות הזאת חסרה. אבל זה לא אומר שאין לנו איך להוסיף אותה! בהדרכה הזאת תלמדו איך להוסיף כפתור עם אייקון של עין, שקליק עליו הופך את הסיסמה לגלויה. וקליק נוסף מסתיר אותה שוב. מבחינה טכנית, שדה סיסמה לעולם לא יציג את התווים שבו, הוא תמיד יציג רק עיגולים / כוכביות (תלוי בדפדפן). לכן, כשרוצים שהשדה יציג את מה שהוזן אליו, הופכים אותו באופן זמני לשדה טקסט רגיל – ממש כמו השדה של הזנת שם משתמש. כשרוצים להסתיר את הסיסמה פשוט הופכים את השדה בחזרה לשדה סיסמה.
זאת התוצאה הסופית:
נתחיל בהוספה של סקריפט (באמצעות enqueue לקובץ JS או טעינה להוק wp_footer או עם פיצ'ר Custom code של אלמנטור):
<script>
jQuery(document).ready(function($) {
$('#password').attr('spellcheck','false').after('<div aria-label="הצג סיסמה" class="show-password-button" tabindex="0" role="button"><svg class="icon show-icon" enable-background="new 0 0 128 128" height="512" viewBox="0 0 128 128" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m64 104c-41.873 0-62.633-36.504-63.496-38.057-.672-1.209-.672-2.678 0-3.887.863-1.552 21.623-38.056 63.496-38.056s62.633 36.504 63.496 38.057c.672 1.209.672 2.678 0 3.887-.863 1.552-21.623 38.056-63.496 38.056zm-55.293-40.006c4.758 7.211 23.439 32.006 55.293 32.006 31.955 0 50.553-24.775 55.293-31.994-4.758-7.211-23.439-32.006-55.293-32.006-31.955 0-50.553 24.775-55.293 31.994zm55.293 24.006c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm0-40c-8.822 0-16 7.178-16 16s7.178 16 16 16 16-7.178 16-16-7.178-16-16-16z"/></svg><svg class="icon hide-icon" enable-background="new 0 0 128 128" height="512" viewBox="0 0 128 128" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m79.891 65.078 7.27-7.27c.529 1.979.839 4.048.839 6.192 0 13.234-10.766 24-24 24-2.144 0-4.213-.31-6.192-.839l7.27-7.27c7.949-.542 14.271-6.864 14.813-14.813zm47.605-3.021c-.492-.885-7.47-13.112-21.11-23.474l-5.821 5.821c9.946 7.313 16.248 15.842 18.729 19.602-4.741 7.219-23.339 31.994-55.294 31.994-4.792 0-9.248-.613-13.441-1.591l-6.573 6.573c6.043 1.853 12.685 3.018 20.014 3.018 41.873 0 62.633-36.504 63.496-38.057.672-1.209.672-2.677 0-3.886zm-16.668-39.229-88 88c-.781.781-1.805 1.172-2.828 1.172s-2.047-.391-2.828-1.172c-1.563-1.563-1.563-4.094 0-5.656l11.196-11.196c-18.1-10.927-27.297-27.012-27.864-28.033-.672-1.209-.672-2.678 0-3.887.863-1.552 21.623-38.056 63.496-38.056 10.827 0 20.205 2.47 28.222 6.122l12.95-12.95c1.563-1.563 4.094-1.563 5.656 0s1.563 4.094 0 5.656zm-76.495 65.183 10.127-10.127c-2.797-3.924-4.46-8.709-4.46-13.884 0-13.234 10.766-24 24-24 5.175 0 9.96 1.663 13.884 4.459l8.189-8.189c-6.47-2.591-13.822-4.27-22.073-4.27-31.955 0-50.553 24.775-55.293 31.994 3.01 4.562 11.662 16.11 25.626 24.017zm15.934-15.935 21.809-21.809c-2.379-1.405-5.118-2.267-8.076-2.267-8.822 0-16 7.178-16 16 0 2.958.862 5.697 2.267 8.076z"/></svg></button>');
$('.show-password-button').on('click', function () {
var passwordField = document.getElementById('password');
if (passwordField.type === "password") {
passwordField.type = "text";
$(this).attr('aria-label','הסתר סיסמה').children('.show-icon').css('display', 'none').next('.hide-icon').css('display', 'block');
} else {
passwordField.type = "password";
$(this).attr('aria-label','הצג סיסמה').children('.show-icon').css('display', 'block').next('.hide-icon').css('display', 'none');
}
});
// keyboard accessibility
$('.show-password-button').keypress(function(e){
if(e.which == 13){ $(this).click(); }
});
});
</script>מה הסקריפט הזה עושה?
בהתחלה הוא מגדיר לשדה החיפוש spellcheck="false" מטעמי אבטחה. אח"כ הוא מוסיף את הכפתור מיד אחרי שדה הסיסמה. בתוך הכפתור כבר נמצאים שני איורים כ Inline svg – עין (שמייצגת את הצגת הסיסמה) ועין עם קו אלכסוני עליה (שמייצגת את הסתרת הסיסמה).
אחר כך ניגשים לנהל את כל מה שצריך לקרות בלחיצה:
יש תנאי שבודק אם השדה הוא ברגע נתון שדה סיסמה. אם כן, אנחנו הופכים אותו לשדה טקסט. גם כפתור המעבר משתנה: מסתירים את אייקון העין, ומציגים את האייקון של עין עם קו. הaria-label של הכפתור משתנה גם הוא בהתאם, ל"הסתרת סיסמה".
ומה קורה במצב ההפוך? בדוק ההיפך:
שדה הטקסט הופך להיות שדה סיסמה. בכפתור המעבר משתנה: אייקון העין עם הקו מוסתר, ומוציג במקומו אייקון עין. הaria-label של הכפתור משתנה ל"הצגת סיסמה".
ורגע לפני שמסיימים יש קוד שבודק אם המשתמש לחץ על מקש Enter כאשר הפוקוס היה על כפתור הצגת / הסתרת סיסמה. במצב כזה הסקריפט מדמה קליק על הכפתור, ממש כמו קליק של עכבר.
אפשר לראות שבכל התהליך שמרנו גם על נגישות:
- וידאנו שהכפתור זמין למשתמשי מקלדת: tabindex="0" ולחיצה על Enter מבצעת את הפעולה של קליק
- וידאנו שהכפתור זמין למשתמשי קורא מסך: הוספנו לאייקון תיאור מילולי באמצעות aria-label (הצגת סיסמה / הסתרת סיסמה), והגדרנו אותו ככפתור עם role="button".
עכשיו מוסיפים הגדרות סגנון לכפתור הצגת סיסמה:
/* Login page - show / hide password */
.elementor-login #password {
padding-inline-end: 2.5rem;
}
.elementor-login .show-password-button {
position: absolute;
left: 1px;
bottom: 1px;
width: 2.5rem;
height: 2.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}
.elementor-login .show-password-button .icon {
width: 1em;
height: 1em;
display: block;
fill: #2271b1;
}
.elementor-login .show-password-button .icon:hover, .elementor-login .show-password-button .icon:focus {
fill: #0a4b78;
}
.elementor-login .show-password-button .hide-icon {
display: none;
}סביר מאוד שהקוד הזה ידרוש מכם מעט התאמות
יכול מאוד להיות שתרצו לשנות משהו בהגדרות כדי שהן יתאימו לעיצוב האתר שלכם (למשל – צבע האייקון, שנקבע עם fill, המיקום המדוייק של האייקון, שנקבע עם left ו bottom, או גודל האייקון שנקבע עם font-size) אם אתם מכירים ולו מעט CSS תוכלו להתאים את עיצוב הכפתור לעיצוב האתר. כמובן אם האתר הוא באנגלית יש עוד כמה כיוונים שצריך לסדר (כמו להחליף את left: 1px; ב right: 1px;).
לסיכום – כפתור הצגת סיסמה
כפתור הצגת סיסמה בשדה הזנת סיסמה הוא רעיון מצויין – הוא משפר משמעותית את ממשק המשתמש ואת חוויית המשתמש בדף ההתחברות באתר. בהדרכה הזו הראיתי כיצד להוסיף את האפשרות הזאת לטופס ההתחברות של אלמנטור, כיוון שהוא לא כולל את האפשרות הזאת מובנית.
בכל מקרה משתמשים שונאים לזכור סיסמאות, ולכן אני ממליץ מאוד לשלב טפסי התחברות "קלאסיים" יחד עם פתרונות התחברות מתקדמים יותר, כמו OTP (התחברות עם סיסמה חד פעמית שנשלחת לטלפון או לאימייל) וכמו התחברות לאתר וורדפרס דרך חשבונות ברשתות חברתיות.
