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

السلام عليكم ورحمة الله وبركاته
اخباركم جميعآ ممكن طلب تعديل علي الكود اظهار واخفاء كلمة السر علي شكل عين واخفاء العين
بدل checkbox

الكود:

$(function() {    $('label[for="autologin"], .block-login label.label, .gen input[name="autologin"]').after('<br
    /><span style="font-weight:800;">أظهار&nbsp;كلمة&nbsp;المرور</span><input type="checkbox" class="gen"
    name="visumdp" id="visumdp" style="float:right;"></input><br /><br />');    $('.box-login-btns-main, .form_login > div:last').before('<label><span
    class="checkbox"><input type="checkbox" name="visumdp"
    id="visumdp"></input><span
    class="checkbox-check"></span></span><span>أظهار&nbsp;كلمة&nbsp;المرور</span></label><br />');    $("#visumdp").on("click", function() {        if ($(this).is(":checked")) {            $('input[name="password"]').prop("type", "text");        } else {            $('input[name="password"]').prop("type", "password");        }    });});

وعليكم السلام ورحمة الله وبركاته
اهلا اخي  @moment
تم تعديل الكود لوضع العين بدل checkbox

الكود:

$(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'); // استبدال الصورة إلى أيقونة "إخفاء"
        }
    });
});

هذه النتيجة بعد تعديل الكود في منتداي

مشكور اخي علي مجهودك
هو هل بالامكان تواجدها في المربع باسورد علي الشمال
وتكون بخاصية الـ fontawesome
لو مش باالمكان فتسلم علي مجهودك الوافي

اهلا اخي  @moment
نعم ممكن تواجدها في مربع الباسورد علي الشمال
وتكون بخاصية الـ fontawesome

لكن لازم يكون عندك كود سي اس اس بالهيدر مثل التالي

الكود:

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

ثم ضع كود الجافا المعدل + css

java:

css:

النتيجة في منتداي

مشكور اخي بارك الله فيك علي مجهودك وزادك علم وانتفاع اللهم امين

اخي هو هل ممكن اضافة الدالات بتاعت تعديل كلمة السر عليها  ؟؟
من داخل البيانات الشخصية لو نريد تعديل كلمه السر
name="cur_password"
name="new_password"
name="password_confirm"



ومشكور علي دعمك

اخي انا عدلتها وظبطت معي بعد input[name="password"]
اضيف الدوال الاخري صح كده ؟

اهلا اخي
تم تعديل الاكواد
جرب استبدل الجافا بالتالي

الكود:

$(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');
        }
    });
});

والcss بالتالي

الكود:

.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 كتب:تسلم يا غالي ربنا يبارك فيك  

الله يسلمك اخي ويبارك فيك يارب  

تم حل المشكلة & ينقل للأرشيف. يرجى مراجعة : قوانين منتدى الدعم