초보몽키의 개발공부로그
django 04. 장고 개인 프로젝트 6 - 회원가입, 로그인 폼 꾸미기
01 Mar 2017 | python 파이썬 Django 인증개인 프로젝트에 회워가입, 로그인 페이지를 커스터마이징 하는 과정을 기록하였습니다.
원하는 상태
- 회원가입, 로그인 폼을 css를 통해서 커스터마이징한다.
- User model form 필드의 기본 글자 수 제한을 변경한다.
결과물
회원가입 폼 커스터마이즈
forms.py 수정
- 회원가입에서 사용되는 UserForm을 수정한다.
widgets를 통해서 각 폼 필드의형식과 class명을 포함한어트리뷰트를 추가할 수 있다.labels를 통해서 각 폼 필드의label을 지정할 수 있다.__init__메소드를 통해서 부모모델 User의 기본 설정을 (maxlength 등) 변경할 수 있다.
from django import forms
from django.contrib.auth.models import User
class UserForm(forms.ModelForm):
class Meta:
model = User
fields = ['username', 'email', 'password']
widgets = {
'username': forms.TextInput(attrs={'class': 'form-control', 'placeholder':'15자 이내로 입력 가능합니다.'}),
'email': forms.EmailInput(attrs={'class': 'form-control'}),
'password' : forms.PasswordInput(attrs={'class': 'form-control'}),
}
labels = {
'username': '닉네임',
'email': '이메일',
'password': '패스워드'
}
# 글자수 제한
def __init__(self, *args, **kwargs):
super(UserForm, self).__init__( *args, **kwargs)
self.fields['username'].widget.attrs['maxlength'] = 15
views.py
def signup(request):
if request.method == "POST":
form = UserForm(request.POST)
if form.is_valid():
new_user = User.objects.create_user(**form.cleaned_data)
login(request, new_user)
return redirect('index')
else:
return HttpResponse('사용자명이 이미 존재합니다.')
else:
form = UserForm()
return render(request, 'memo_app/adduser.html', {'form': form})
adduser.html 템플릿 수정
{% if user.is_authenticated %}
<script type="text/javascript">
alert('잘못된 접근입니다. \n회원가입을 위해서는 로그아웃이 필요합니다.')
window.location.href = '/';
</script>
{% else %}
<form method="POST" action="" class="sign-up-form">
{%csrf_token%}
<h2 class="sub-title"> 회원가입 </h2>
{% for field in form %}
<div class="form-group">
{{ field.label }}
{{field}}
</div>
{% endfor %}
<button type="submit" class="save btn btn-success">회원가입</button>
<a href="{% url 'index' %}">
<button type="button" class="btn btn-danger">취소</button>
</a>
</form>
로그인 폼 커스터마이즈
urls.py 수정
- django 내장 인증기능
auth_views.login을 사용하면, 기본 템플릿의 경로는templates/registration/login.html이다 - 별도의 템플릿을 사용하고자 하는 경우 아래와 같은 별도 설정이 필요하다.
from django.contrib.auth import views as auth_views
urlpatterns = [
url(r'^login/$', auth_views.login, {'template_name':'memo_app/login.html'}),
]
login.html 템플릿 수정
- 템플릿 수정을 통해서 원하는 class, id 등의 어트리뷰트 설정이 가능하다.
<form method="post" action="{% url 'login' %}" class="sign-in-form">
{%csrf_token%}
<h2 class="sub-title"> 로그인 </h2>
{% if form.errors %}
<p>Your username and password didn't match. Please try again.</p>
{% endif %}
{% if next %}
{% if user.is_authenticated %}
<p>Your account doesn't have access to this page. To proceed,
please login with an account that has access.</p>
{% else %}
<p>Please login to see this page.</p>
{% endif %}
{% endif %}
<div class="form-group">
<label for="{{ form.username.id_for_label }}">닉네임</label>
<input class="form-control" id="{{ form.username.id_for_label }}" maxlength="15" name="{{ form.username.html_name }}" type="text" />
</div>
<div class="form-group">
<label for="{{ form.password.id_for_label }}">패스워드</label>
<input class="form-control" id="{{ form.password.id_for_label }}" maxlength="120" name="{{ form.password.html_name }}" type="password" />
</div>
<input type="submit" class="save btn btn-success" value="로그인">
<a href="{% url 'index' %}">
<button type="button" class="btn btn-danger">취소</button>
</a>
<input type="hidden" name="next" value="{{ next }}" />
</form>
