1

I am extending a form UserLoginForm from Django's built-in AuthenticationForm. I am passing this form to my login page. I want to add password toggle functionality to this. This is my UserLoginForm and this is my login page. But I want to add password functionality like this. I have tried 'data-toggle' attribute in my form but that didn't work. As I am extending from built-in form, I could not toggle functionality through "id" of the element. I am using Bootstrap5. Please let me know how do I add password toggle functionality in this case.

Yusuf
  • 13
  • 4
  • 1
    Does this answer your question? [How to show and hide password when click on eye icon using jquery](https://stackoverflow.com/questions/51552661/how-to-show-and-hide-password-when-click-on-eye-icon-using-jquery) – Abdul Aziz Barkat Jun 06 '21 at 08:12

2 Answers2

0
class CustomerLoginFrom(ModelForm):
    class Meta:
        model = UserLogin
        fields = ['user_name','password']
        labels = {
            "user_name": "*Username",
            "password": "*Password"
        }    
        widgets = {
            "user_name":  TextInput(attrs={'placeholder':'ex:test','autocomplete': 'off'}), 
            "password": PasswordInput(attrs={'placeholder':'********','autocomplete': 'off','data-toggle': 'password'}),
        }

Try like this.

Ashraful Islam
  • 546
  • 2
  • 8
0

The above functionality is achieved by importing this library, https://pypi.org/project/django-widget-tweaks/

<label>{{ form.password.label}}<span class="text-muted mb-4">
                                    </span></label>
    <small class="form-text text-muted mb-4 small">
           At least 8 characters and 1 digit
    </small>
    {% render_field form.password id="pwd" %}

Script can be added by getting id from here id="pwd"

Yusuf
  • 13
  • 4