How to use registration(signup/login) modal(bootstrap template) with django views?

Question

I am new to programming. I found nice bootstrap modal for registration, so i put it to my html code and it looks nice but nothing can be pressed or post. Before i was using django and UserCreationForm without modals. So help me to concatenate these two things:

so this is my bootstrap modal that i found

<!-- Modal -->
<div class="modal fade" id="elegantModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <!--Content-->
    <div class="modal-content form-elegant">
      <!--Header-->
      <div class="modal-header text-center">
        <h3 class="modal-title w-100 dark-grey-text font-weight-bold my-3" id="myModalLabel"><strong>Войти</strong></h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!--Body-->
        <form type="post" action="{% url 'common:login' %}">
      <div class="modal-body mx-4">
        <!--Body-->
        <div class="md-form mb-5">
          <input type="email" name="useremail" id="Form-email1" class="form-control validate">
          <label data-error="wrong" data-success="right" for="Form-email1">Ваша почта</label>
        </div>

        <div class="md-form pb-3">
          <input type="password" id="Form-pass1" class="form-control validate">
          <label data-error="wrong" data-success="right" for="Form-pass1">Пароль</label>
          <p class="font-small blue-text d-flex justify-content-end">Забыли <a href="#" class="blue-text ml-1">
              пароль?</a></p>
        </div>

        <div class="text-center mb-3">
          <button type="button" class="btn blue-gradient btn-block btn-rounded">ок</button>
        </div>
        <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> или войти
          с помощью:</p>

        <div class="row my-3 d-flex justify-content-center">
          <!--Facebook-->
          <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-facebook-f text-center"></i></button>
          <!--Twitter-->
          <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-twitter"></i></button>
          <!--Google +-->
          <button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fab fa-google-plus-g"></i></button>
        </div>
      </div>
            </form>
      <!--Footer-->
      <div class="modal-footer mx-5 pt-3 mb-1">
        <p class="font-small grey-text d-flex justify-content-end">Первый раз? <a href="{% url 'common:signup' %}" class="blue-text ml-1">
            Зарегистрируйся</a></p>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>
<!-- Modal -->

and this is my views.py before using modal:

def signup(request):
    if request.method == 'POST':
        form = UserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('index')
    else:
        form = UserCreationForm()
    return render(request, 'registration/signup.html', {'form': form})

So help me to show how it should work. Actually i used to use {{form.as_p}} but how should i do in this case?

Answer 1

I think what you are looking for is Django Forms

official doc- https://docs.djangoproject.com/en/2.2/topics/forms/

other- ( https://www.tutorialspoint.com/django/django_form_processing )

First, you need to create a form model and define the fields which you are taking as input. Here is a sample-

from django import forms

class LoginForm(forms.Form):
  user = forms.CharField(max_length = 100)
  password = forms.CharField(max_length =100)

Then, you need to modify the view according to form. Here is a sample-

def login(request):
  username = "not logged in"
  if request.method == "POST":
    #Get the posted form
    MyLoginForm = LoginForm(request.POST)

    if MyLoginForm.is_valid():
      username = MyLoginForm.cleaned_data['username']
  else:
    MyLoginForm = Loginform()

  return render(request, 'loggedin.html', {"username" : username})

and if you are sending data through POST, don't forget to add csrf token just in Html file.

form type="post" action="{% url 'common:login' %}"> {% csrf_token %}