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

2 مشترك

اذهب الى الأسفل

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

مُساهمة من طرف moment الثلاثاء 6 أغسطس 2024 - 2:14

السلام عليكم ورحمة الله وبركاته
اخباركم جميعآ ممكن طلب تعديل علي الكود اظهار واخفاء كلمة السر علي شكل عين واخفاء العين
بدل 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 في الثلاثاء 6 أغسطس 2024 - 18:18 عدل 1 مرات
moment
moment
 
 

ذكر
عدد المساهمات : 76
معدل النشاط : 342
السُمعة : 0

https://gzarab.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف كونان2000 الثلاثاء 6 أغسطس 2024 - 11:44

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

هذه النتيجة بعد تعديل الكود في منتداي
طلب كود اخفاء واظهار كلمة السر Animat18
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1742
معدل النشاط : 3593
السُمعة : 309

https://anime.forumperso.com/

moment يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف moment الثلاثاء 6 أغسطس 2024 - 13:20

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

ذكر
عدد المساهمات : 76
معدل النشاط : 342
السُمعة : 0

https://gzarab.yoo7.com/

كونان2000 يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف كونان2000 الثلاثاء 6 أغسطس 2024 - 14:04

اهلا اخي  @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:

clown

النتيجة في منتداي
طلب كود اخفاء واظهار كلمة السر Animat19
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1742
معدل النشاط : 3593
السُمعة : 309

https://anime.forumperso.com/

moment يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف moment الثلاثاء 6 أغسطس 2024 - 15:38

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

ذكر
عدد المساهمات : 76
معدل النشاط : 342
السُمعة : 0

https://gzarab.yoo7.com/

كونان2000 يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف moment الثلاثاء 6 أغسطس 2024 - 17:05

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

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

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

ذكر
عدد المساهمات : 76
معدل النشاط : 342
السُمعة : 0

https://gzarab.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف moment الثلاثاء 6 أغسطس 2024 - 17:55

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

ذكر
عدد المساهمات : 76
معدل النشاط : 342
السُمعة : 0

https://gzarab.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف كونان2000 الثلاثاء 6 أغسطس 2024 - 17:57

اهلا اخي
تم تعديل الاكواد
جرب استبدل الجافا بالتالي
الكود:
$(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;
}
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1742
معدل النشاط : 3593
السُمعة : 309

https://anime.forumperso.com/

moment يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف moment الثلاثاء 6 أغسطس 2024 - 18:18

تسلم يا غالي ربنا يبارك فيك  طلب كود اخفاء واظهار كلمة السر 1f60d
moment
moment
 
 

ذكر
عدد المساهمات : 76
معدل النشاط : 342
السُمعة : 0

https://gzarab.yoo7.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف كونان2000 الثلاثاء 6 أغسطس 2024 - 18:23

moment كتب:تسلم يا غالي ربنا يبارك فيك  طلب كود اخفاء واظهار كلمة السر 1f60d
الله يسلمك اخي ويبارك فيك يارب  طلب كود اخفاء واظهار كلمة السر 1f60a Cool

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

ذكر
عدد المساهمات : 1742
معدل النشاط : 3593
السُمعة : 309

https://anime.forumperso.com/

moment يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى