django views – hyperlinks with thumbnails

Please avoid hard-coding urls in Django. You can use the power of reverse url matching here. Since you already have name assigned to your urls, you can have container in your index.html like this:

<div class = "container">
   <div class="row">
       <div class="col-xs-6 col-md-3">
            <a href="{% url 'signup' %}" class="thumbnail">
            <img src="/static/img/signup.jpg" alt = "Sign Up as New User">
            </a>
            <h3> Sign Up </h3>
       </div>
       <div class="col-xs-6 col-md-3">
           <a href="{% url 'login' %}" class="thumbnail">
           <img src="/static/img/login.jpg" alt = "Log In as Existing User">
           </a>
           <h3> Log In </h3>
       </div>
   </div>
</div>

This would help in redirecting to corresponding urls using your urls.py.

Next, you need to create a forms to be displayed on signup and login page. Since you’ve imported Customer from models, I’m assuming that you want to create signup and login for them.

So you can put in your forms.py:

from django.contrib.auth.forms import AuthenticationForm, UserCreationForm
from django import forms

from .models import Customer

class LoginForm(AuthenticationForm):
    username = forms.CharField(label="Username", max_length=30,
                               widget=forms.TextInput(attrs={'class': 'form-control', 'name': 'username'}))
    password = forms.CharField(label="Password", max_length=30,
                widget=forms.PasswordInput(attrs={'class': 'form-control', 'name': 'password'}))


class SignUpForm(UserCreationForm):
    class Meta:
        model = Customer

In SignUpForm you can also specify the fields you want from the user while registering by providing fields as a list of attributes of Customer model.

In your login.html you can provide a space for your LoginForm to render like:

<form action="{% url 'login' %}" method="POST">
  {% csrf_token %}
  {% for field in form %}
    <b>{{ field.label }}</b>:
    {{ field }}<br>
    {{ field.errors }}
  {% endfor %}
  <input type="submit" value="Sumbit">
</form>

Similarly your signup.html would also provide form like this:

<form action="{% url 'signup' %}" method="POST">
  {% csrf_token %}
  {% for field in form %}
    <b>{{ field.label }}</b>:
    {{ field }}<br>
    {{ field.errors }}<br>
  {% endfor %}
  <input type="submit" value="Sumbit">
</form>

Finally edit your login and signup views to store the data like this:

from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render
from django.contrib.auth import authenticate, login, logout

from .forms import LoginForm, SignUpForm

def login(request):
    if request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
        user = authenticate(username=username, password=password)
        if user is not None:
            login(request, user)
            return HttpResponse("Logged in", status=200)
        else:
            form = LoginForm(request.POST)
            context = {'form': form}
            return render(request, 'login.html', context=context, status=401)
    if request.method == 'GET':
        form = LoginForm(None)
        context = {'form': form}
        return render(request, 'login.html', context=context)


def signup(request):
    if request.method == 'POST':
        form = SignUpForm(request.POST)
        if form.is_valid():
            form.save()
        else:
            context = {'form': form}
            return render(request, 'signup.html', context=context)
        return HttpResponse("Registered Successfully", status=200)

    if request.method == 'GET':
        form = SignUpForm(None)
        context = {'form': form}
        return render(request, 'signup.html', context=context)

Note here that I’ve used login and logout functionality of django.contrib.auth. This may not be what you want for your application. But the idea is pretty much similar.