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

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

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

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

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

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

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

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

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

الكود:

.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 كتب:ده الي عندي في المنتدي بالفعل بس مغيرش الايقونة

الكود:

[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; /* تأكد من أن الأيقونة فوق الحقل */
}


الكود:

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

الكود:


/* تغيير لون الأيقونة عند المرور فوقها */
.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 كتب:تسلم اخي بارك الله فيك