Using Django registration with a Flat UI template - django

Question

I have created a template design for signup page using Flat UI. Now i want to use Django registration to register a user. I have goggled various resources but they are very complex and using Django inbuilt form to create a form.
I need simple steps that i can follow
signup.html(home/django/mysite/templates)
{% extends "base.html" %}
{% block title %}Signup page{% endblock %}
{% block content %}
<div class="container" style="width:500px">
<h3 style="margin-top:100px">Sign Up</h3>
<hr>
<div class="login-form">
<form action="" method="post">
<div class="control-group span3" style="width:400px" >
<input type="text" value="" placeholder="Enter your name" id="name" style="width:400px;padding-bottom:15px;margin-bottom:10px" >
<i class="input-icon fui-user" for="login-name"></i>
</div>
<div class="control-group span3" style="width:400px" >
<input type="text" value="" placeholder="Your E-mail" id="email" style="width:400px;padding-bottom:15px;margin-bottom:10px" >
<i class="input-icon fui-mail" for="login-name"></i>
</div>
<div class="control-group span3" style="width:400px">
<input type="password" value="" placeholder="Password" id="pass" style="width:400px;padding-bottom:15px;margin-bottom:10px">
<i class="input-icon fui-lock" for="login-pass"></i>
</div>
<div class="control-group span3" style="width:400px">
<input type="password" value="" placeholder="Confirm Password" id="login-pass" style="width:400px;padding-bottom:15px;margin-bottom:10px">
<i class="input-icon fui-lock" for="login-pass"></i>
</div>
<div style="text-align:center">
<a class="btn btn-hg btn-primary btn-wide" href="#">Sign Up</a>
<!--<a class="login-link" href="#">Lost your password ?</a> -->
</div>
</form>
</div><!-- /login-form -->
</div> <!-- /container -->
{% endblock content %}
views.py
def signup(request):
return render(request, 'signup.html')
urls.py
urlpatterns = patterns('',
url(r'^signup/$', views.signup),)
What i should write in views.py or models.py to register a user using django registration.

Answer 1

You can use django registration together with custom html/css through django forms. Here are the steps:
Provided you have included relevant imports, your urls.py looks fine so no changes needed.
Create a forms.py file in the same folder as your views.py and add the following code into forms.py:
from django import forms
class Signup_form(forms.Form):
# CSS styles should not be inline. i've moved your style contents under a 'form-control' class
name = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'type':'text', 'placeholder':'Enter your name', 'id':'name', 'name':'name', 'class' : 'form-control'}))
email = forms.EmailField(label="Email address", widget=forms.TextInput(attrs={'type':'text', 'placeholder':'Your E-mail', 'id':'email', 'name':'email', 'class' : 'form-control'}))
pass1 = forms.CharField(max_length = 20, widget=forms.TextInput(attrs={'type':'password', 'placeholder':'Password', 'id':'pass1', 'name':'pass1', 'class' : 'form-control'}))
pass2 = forms.CharField(max_length = 20, widget=forms.TextInput(attrs={'type':'password', 'placeholder':'Confirm Password', 'id':'pass2', 'name':'pass2', 'class' : 'form-control'}))
3.In your views.py file, you have to link pass the Signup_form to your views layer. Change your views.py file to the following:
from forms import Signup_form
def signup(request):
form = Signup_form()
name = request.POST.get('name','')
email = request.POST.get('email', '')
pass1 = request.POST.get('pass1', '')
pass2 = request.POST.get('pass2', '')
# Do some validations here
user = User.objects.create_user(name, email, pass2)
if user:
user.save()
return render(request, 'signup.html', {'form': form})
4.Now that you have passed your Signup_form object in views layer, you can use django template tags to display them in your signup.html page. Here's how your signup.html could look like:
{% extends "base.html" %}
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
{% block title %}Signup page{% endblock %}
{% block content %}
<div class="container" style="width:500px">
<h3 style="margin-top:100px">Sign Up</h3>
<hr>
<div class="login-form">
<form action="" method="post"> {% csrf_token %}
<div class="control-group span3" style="width:400px" >
{{ form.name.errors }}
{{ form.name }}
<i class="input-icon fui-user" for="login-name"></i>
</div>
<div class="control-group span3" style="width:400px" >
{{ form.email.errors }}
{{ form.email }}
<i class="input-icon fui-mail" for="login-name"></i>
</div>
<div class="control-group span3" style="width:400px">
{{ form.pass1.errors }}
{{ forms.pass2 }}
<i class="input-icon fui-lock" for="login-pass"></i>
</div>
<div class="control-group span3" style="width:400px">
{{ form.pass2.errors }}
{{ forms.pass2 }}
<i class="input-icon fui-lock" for="login-pass"></i>
</div>
<div style="text-align:center">
<input type="submit" class="btn btn-hg btn-primary btn-wide" value="Sign Up">
<!--<a class="login-link" href="#">Lost your password ?</a> -->
</div>
</form>
</div><!-- /login-form -->
</div> <!-- /container -->
{% endblock content %}
5.Since i have earlier moved your CSS styles(in point 2) into a 'form-control' class, now we will place it back by adding your styles in a external custom.css file. Create a custom.css file in the directory static/css/custom.css and add the following into it:
.form-control {
width:400px;
padding-bottom:15px;
margin-bottom:10px;
}

Answer 2

In your Views.py
from django.contrib.auth.models import User
def signup(request):
username = request.POST.get("name","")
password = request.POST.get("pass","")
login_pass = request.POST.get("login-pass","")
email = request.POST.get("email","")
if username != "" or password != "" or login_pass != "":
#do some validations
user = User.objects.create_user(username, email, password)
if user:
user.is_active = True
user.save()
return render(request, 'signup.html')
Above code will register a new user into system
If you would have use Django forms then all the validations will be done by Django.
Note: Please add name attribute to your HTML fields required for getting vaLues in request.POST. Also point your HTMl form action to "signup" view