61👍
you can overide default Authentication form
like this
from django.contrib.auth.forms import AuthenticationForm, UsernameField
from django import forms
class UserLoginForm(AuthenticationForm):
def __init__(self, *args, **kwargs):
super(UserLoginForm, self).__init__(*args, **kwargs)
username = UsernameField(widget=forms.TextInput(
attrs={'class': 'form-control', 'placeholder': '', 'id': 'hello'}))
password = forms.CharField(widget=forms.PasswordInput(
attrs={
'class': 'form-control',
'placeholder': '',
'id': 'hi',
}
))
in url.py you can pass this custom authentication form like this
from django.contrib.auth import views
from myapp.forms import UserLoginForm
urlpatterns = [
path(
'login/',
views.LoginView.as_view(
template_name="login.html",
authentication_form=UserLoginForm
),
name='login'
)
]
also, you can override the login template
and customize the template as per you requirement
<form method="post">
{{ form.non_field_errors }}
<div class="form-group">
<label for="{{ form.username.id_for_label }}">Username:</label>
{{ form.username }}
{{ form.username.errors }}
</div>
<div class="form-group">
<label for="{{ form.password.id_for_label }}">Password:</label>
{{ form.password }}
{{ form.password.errors }}
</div>
<button type="submit">Login</button>
</form>
12👍
You can customise your form rendering by overriding/editing templates/registration/login.html as below.
This is for example only you can change css styles and formatting as you want.
<h2>Login</h2>
<form method="post">
{{ form.non_field_errors }}
<div class="fieldWrapper">
{{ form.username.errors }}
<label for="{{ form.username.id_for_label }}">Username:</label>
{{ form.username }}
</div>
<div class="fieldWrapper">
{{ form.password.errors }}
<label for="{{ form.password.id_for_label }}">Password:</label>
{{ form.password }}
</div>
<button type="submit">Login</button>
</form>
You may also loop over form’s fields
<h2>Login</h2>
<form method="post">
{% for field in form %}
<div class="fieldWrapper">
{{ field.errors }}
{{ field.label_tag }} {{ field }}
{% if field.help_text %}
<p class="help">{{ field.help_text|safe }}</p>
{% endif %}
</div>
{% endfor %}
<button type="submit">Login</button>
</form>
You could also check more form rendering options from here
- [Django]-Django and Middleware which uses request.user is always Anonymous
- [Django]-Django allauth example [Errno 61] Connection refused
- [Django]-How to process a form (via get or post) using class-based views?
8👍
From question, I assume you want to change the html template’s look and feel instead of python forms class. In this case all you need to do is include input type fields with the matching names and ids attributes what default django-auth form expects. You can achieve this using following steps.
- Render the template as you are rendering right now (using {{form.as_p}}).
- Inspect elements and check user name, password and submit button’s name and ids generated by default auth form.
- Recreate same tags using your own custom style.
It comes something similar to below:
<form method="POST">
{% csrf_token %}
<input type="input" class="form-control" name="username" id="inputEmail" placeholder="Username" required >
<input type="password" class="form-control" name="password" id="inputPass" placeholder="Password" required>
<button type="submit" style="opacity: 1 !important;">Login</button>
<a href="/password_reset">Reset Password</a>
</form>
After this you can use your imagination and design the login form as per your requirement.
Hope this helps.
- [Django]-Why is assertDictEqual needed if dicts can be compared by `==`?
- [Django]-What is the right way to validate if an object exists in a django view without returning 404?
- [Django]-How to handle per object permission in Django nowadays?