طلب كود اخفاء واظهار كلمة السر

الكود:

$(function() {
    // إضافة عناصر جديدة بعد العناصر الموجودة
    $('label[for="autologin"], .block-login label.label, .gen input[name="autologin"]').after(
        '<br /><span style="font-weight:800;">أظهار&nbsp;كلمة&nbsp;المرور</span>' +
        '<img id="toggle-password" src="https://i.servimg.com/u/f70/17/17/86/62/the_el10.jpg" alt="Toggle Password" style="float:right; cursor: pointer;" />' +
        '<br /><br />'
    );

    $('.box-login-btns-main, .form_login > div:last').before(
        '<label>' +
        '<span class="checkbox">' +
        '<img id="toggle-password" src="show-password-icon.png" alt="Toggle Password" style="cursor: pointer;" />' +
        '</span>' +
        '<span>أظهار&nbsp;كلمة&nbsp;المرور</span>' +
        '</label><br />'
    );

    // التعامل مع النقر على الصورة لتبديل إظهار كلمة المرور
    $("#toggle-password").on("click", function() {
        var passwordField = $('input[name="password"]');
        var isPasswordVisible = passwordField.attr('type') === 'text';

        if (isPasswordVisible) {
            passwordField.prop("type", "password");
            $(this).attr('src', 'https://i.servimg.com/u/f70/17/17/86/62/the_el10.jpg'); // استبدال الصورة إلى أيقونة "إظهار"
        } else {
            passwordField.prop("type", "text");
            $(this).attr('src', 'https://i.servimg.com/u/f70/17/17/86/62/the_el11.jpg'); // استبدال الصورة إلى أيقونة "إخفاء"
        }
    });
});

الكود:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

java:

css:

الكود:

$(function() {
    // تغليف كل حقل كلمة مرور في حاوية جديدة إذا لم يكن قد تم تغليفه بالفعل
    $('input[type="password"], input[name="cur_password"], input[name="new_password"], input[name="password_confirm"]').each(function() {
        if (!$(this).parent().hasClass('password-wrapper')) {
            $(this).wrap('<div class="password-wrapper"></div>');
        }
        // إضافة أيقونة التبديل داخل حقل كلمة المرور
        if ($(this).siblings('.toggle-password').length === 0) {
            $(this).after('<i class="toggle-password fas fa-eye"></i>');
        }
    });

    // التعامل مع النقر على الأيقونة لتبديل إظهار كلمة المرور
    $(document).on("click", ".toggle-password", function() {
        var passwordField = $(this).siblings('input[name="password"], input[name="cur_password"], input[name="new_password"], input[name="password_confirm"]');
        var isPasswordVisible = passwordField.attr('type') === 'text';

        if (isPasswordVisible) {
            passwordField.prop("type", "password");
            $(this).removeClass('fa-eye-slash').addClass('fa-eye');
        } else {
            passwordField.prop("type", "text");
            $(this).removeClass('fa-eye').addClass('fa-eye-slash');
        }
    });
});

الكود:

.password-wrapper {
    position: relative;
    display: inline-block;
}



.password-wrapper .toggle-password {
    position: absolute;
    top: 50%;
    left: 3px; /* تعديل حسب الحاجة */
    transform: translateY(-50%);
    cursor: pointer;
    color: #000; /* تغيير اللون حسب التصميم */
}


/* تغيير لون الأيقونة عند المرور فوقها */
.password-wrapper .toggle-password:hover {
    color: #aaa; /* لون الأيقونة عند المرور فوقها */
}

i.toggle-password.fas.fa-eye-slash {
    color: #4CAF50;
}

moment كتب:تسلم يا غالي ربنا يبارك فيك