بخصوص التعديل علي العين لكلمة السر

وعليكم السلام ورحمة الله وبركاته
ااهلا اخي moment

لا انصح بتغيير شيء بالوقت الحالي

الادارة كتب:أضافة احلى منتدى هذه  الميزة بالأمس، لكنننا لا نزال نتوقع ظهور بعض المشكلات بسبب التغييرات الشائعة باستخدام CSS.
لذا، نريد أخذ الوقت الكافي للتأكد من أن كل شيء يعمل بشكل جيد قبل إجراء تحسينات إضافية.
يعني يتم التخطيط لإجراء تحسينات صغيرة مثل لون مأخوذ من المنتدى وأيقونة اظهار/إخفاء  في مكان آخر

باختصار، هم في مرحلة مراقبة وتطوير لضمان أن كل شيء يعمل بشكل سلس.

لذلك اخي moment اترك كل شيء على حاله الى حين الانتهاء من تحسينها

حتى لا يحصل ارتباك

moment كتب:السلام عليكم ورحمة الله وبركاته
اخباركم جميعآ
بخصوص العين اخي كونان هل الادارة لم تصل بعد لحل مثل ما كنت اتناقش معك ؟

وعليكم السلام ورحمة الله وبركاته
لم يتم قبول تغير التصميم
يبدو انه استقر على التصميم الحالي

انت لازم تغير الصور من عندك
يعني انت صمم صورتين للعين
واحده للاظهار والاخرى للاخفاء وركبها

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

الكود:

.password-container {
    position: relative;
}
.show_hide_pwd {
    cursor: pointer;
    width: 24px;
    height: auto;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.show_hide_pwd.on {
    filter: invert(24%) sepia(181%) saturate(7480%) hue-rotate(310deg);
}


moment كتب:ده الي عندي في المنتدي بالفعل بس مغيرش الايقونة

بصراحه اخي انا بكل مره اركب الايقونه بالخط الرائع داخل الحقل تتعطل.
ولما اركبها خارج بعيدا عن حقل كلمة المرور تعمل

الى الان لم اجد المسبب للمشكله

ماريك تضع صورتين للعين من اختيارك باستعمال الcss التالي

احذف الcss السابق وضع مكانه التالي

الكود:

[type="password"] {
    background: url(https://i.servimg.com/u/f70/17/17/86/62/the_el10.jpg) !important;
  background-repeat: no-repeat !important;
  background-position: 1px !important;
}
 div.password-container > input {
    background: url(https://i.servimg.com/u/f70/17/17/86/62/the_el11.jpg);
background-repeat: no-repeat;
 background-position: 1px !important;
}
.show_hide_pwd {
    padding: 7px 7px 5px 7px;
    opacity: 0;
    left: 0;
    top: 10px;
    position: absolute;
}

.password-container {
    position: relative;
}
.toggle-password {
    position: absolute;
    right: 10px; /* تعديل المسافة حسب الحاجة */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1; /* تأكد من أن الأيقونة فوق الحقل */
}


انا وضعت لك صورتين للعين داخل حقل كلمة المرور.
انت استبدلهم من عندك

اهلا اخي  @moment
احتجت للذكاء الاصطناعي لاصلاحه  
احذف الاكواد السابقه الجافا والcss

واستبدلها بالتالي
الجافا

الكود:

$(function() {
    // تغليف حقل كلمة المرور في حاوية جديدة إذا لم يكن قد تم تغليفه بالفعل
  $('input#gzupassword,.fld_connexion input#password.inputbox.autowidth').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).closest('.password-wrapper').find('input[name="password"]');
        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 #toggle-password:hover {
    color: #000; /* لون الأيقونة عند المرور فوقها */
}

i.toggle-password.fas.fa-eye-slash {
    color: #f91606;
}
img.show_hide_pwd {
    display: none;
}

.password-wrapper {
    position: relative;
}

.toggle-password {
  color: #666; /* اللون الافتراضي للأيقونة */
    font-size: 16px; /* حجم الأيقونة */
    position: absolute;
    right: 70%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}


اذا لم يعمل مع منتداك اخبرني

مرحبا
جرب الجافا التالي مكان السابق

الكود:

$(function() {
        // تغليف حقل كلمة المرور في حاوية جديدة إذا لم يكن قد تم تغليفه بالفعل
      $('[type="password"]').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).closest('.password-wrapper').find('input[name="password"]');
            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');
            }
        });
    });

moment كتب:اهلآ بك اخي بس هل ممكن في خانة تغيير كلمة السر تظبط ؟
لانها مش ظابطة وبتعلق

اهلا اخي
انا دخلت منتداك وعملت فصل بين الكلاسات
انت عليك تغيير الارقم لتحريك العين في كل مكان بما يناسبه

moment كتب:تسلم اخي بارك الله فيك

الله يسلمك اخي

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