БЛОГ НА HUSL


Django: две функции из views.py рендерить на один html-шаблон

Автор вопроса: Даниил Край

код из файла views.py

from django.http import HttpResponse
from django.shortcuts import render, HttpResponseRedirect
from users.models import User
from users.forms import UserLoginForm, UserRegistrationForm
from django.contrib import auth
from django.urls import reverse

def login(request):
    if request.method == 'POST':
        form = UserLoginForm(data=request.POST)
        if form.is_valid():
            username = request.POST['username']
            password = request.POST['password']
            user = auth.authenticate(username=username, password=password)
            if user:
                auth.login(request, user)
                return HttpResponseRedirect(reverse('home'))
    else:
        form = UserLoginForm()
    context = {'form_login': form}
    return render(request, 'users/login.html', context)

def registration(request):
    if request.method == 'POST':
        form = UserRegistrationForm(data=request.POST)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect(reverse('home'))
    else:
        form = UserRegistrationForm()
    context_reg = {'form_registation': form}
    return render(request, 'users/login.html', context_reg)

Я возвращаю обе функции на шаблон 'users/login.html'

файл forms.py

from django.contrib.auth.forms import AuthenticationForm, UserCreationForm
from users.models import User
from django import forms
class UserLoginForm(AuthenticationForm):
    username = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Имя',}))
    password = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': 'Пароль',}))

    class Meta:
        model = User
        fields = ('username', 'password')


class UserRegistrationForm(UserCreationForm):
    username = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Имя', }))
    email = forms.CharField(widget=forms.EmailInput(attrs={'placeholder': 'Эл. почта', }))
    password1 = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': 'Пароль', }))
    password2 = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': 'Подтвердите пароль', }))

    class Meta:
        model = User
        fields = ('username', 'email', 'password1', 'password2')

файл login.html

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7f8;
  padding: 30px;
}

/*.navbar {*/
/*  width: 100%;*/
/*  height: 70px;*/
/*  background-color: white;*/
/*  align-items: end;*/
/*}*/

/*.navbar .container{*/
/*  margin-left: 9%;*/
/*  margin-right: 9%;*/
/*  !*наследуем высоту от родителя*!*/
/*  height: inherit;*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*}*/

.container{
  position: relative;
  max-width: 850px;
  width: 100%;
  background: #fff;
  padding: 40px 30px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  perspective: 2700px;
}
.container .cover{
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 50%;
  z-index: 98;
  transition: all 1s ease;
  transform-origin: left;
  transform-style: preserve-3d;
}
.container #flip:checked ~ .cover{
  transform: rotateY(-180deg);
}
 .container .cover .front,
 .container .cover .back{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.cover .back{
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.container .cover::before,
.container .cover::after{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: cornflowerblue;
  opacity: 0.5;
  z-index: 12;
}
.container .cover::after{
  opacity: 0.3;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.container .cover img{
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 10;
}
.container .cover .text{
  position: absolute;
  z-index: 130;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cover .text .text-1,
.cover .text .text-2{
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.cover .text .text-2{
  font-size: 15px;
  font-weight: 500;
}
.container .forms{
  height: 100%;
  width: 100%;
  background: #fff;
}
.container .form-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-content .login-form,
.form-content .signup-form{
  width: calc(100% / 2 - 25px);
}
.forms .form-content .title{
  position: relative;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}
.forms .form-content .title:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 25px;
  background: cornflowerblue;
}
.forms .signup-form  .title:before{
  width: 20px;
}
.forms .form-content .input-boxes{
  margin-top: 30px;
}
.forms .form-content .input-box{
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  margin: 10px 0;
  position: relative;
}
.form-content .input-box input{
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.form-content .input-box input:focus,
.form-content .input-box input:valid{
  border-color: cornflowerblue;
}
.form-content .input-box i{
  position: absolute;
  color: cornflowerblue;
  font-size: 17px;
}
.forms .form-content .text{
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.forms .form-content .text a{
  text-decoration: none;
}
.forms .form-content .text a:hover{
  text-decoration: underline;
}
.forms .form-content .button{
  color: #fff;
  margin-top: 40px;
}
.forms .form-content .button input{
  color: #fff;
  background: cornflowerblue;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  transition: all 0.4s ease;
}
.forms .form-content .button input:hover{
  background: #6471ed;
}
.forms .form-content label{
  color: #6471ed;
  cursor: pointer;
}
.forms .form-content label:hover{
  text-decoration: underline;
}
.forms .form-content .login-text,
.forms .form-content .sign-up-text{
  text-align: center;
  margin-top: 25px;
}
.container #flip{
  display: none;
}
@media (max-width: 730px) {
  .container .cover{
    display: none;
  }
  .form-content .login-form,
  .form-content .signup-form{
    width: 100%;
  }
  .form-content .signup-form{
    display: none;
  }
  .container #flip:checked ~ .forms .signup-form{
    display: block;
  }
  .container #flip:checked ~ .forms .login-form{
    display: none;
  }
}
<div class="container">
    <input type="checkbox" id="flip">
    <div class="cover">
      <div class="front">
        <img src="" alt="">
      </div>
      <div class="back">
        <!--<img class="backImg" src="images/backImg.jpg" alt="">-->
      </div>
    </div>
    <div class="forms">
        <div class="form-content">
          <div class="login-form">
            <div class="title">Вход</div>
          <form action="{% url 'users:login' %}" method="post">
            {% csrf_token %}
            <div class="input-boxes">
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                {{ form_login.username }}
              </div>
              <div class="input-box">
                <i class="fas fa-lock"></i>
                {{ form_login.password }}
              </div>
              <div class="text"><a href="#">Забыли пароль?</a></div>
              <div class="button input-box">
                <input type="submit" value="Продолжить">
              </div>
              <div class="text sign-up-text">Нет аккаунта? <label for="flip">Зарегистрироваться</label></div>
            </div>
        </form>
      </div>
        <div class="signup-form">
          <div class="title">Регистрация</div>
        <form action="{% url 'users:registration' %}" method="post">
            {% csrf_token %}
            <div class="input-boxes">
              <div class="input-box">
                <i class="fas fa-user"></i>
                {{ form_registation.username }}
              </div>
              <div class="input-box">
                <i class="fas fa-envelope"></i>
                {{ form_registation.email }}
              </div>
              <div class="input-box">
                <i class="fas fa-lock"></i>
                {{ form_registation.password1 }}
              </div>
              <div class="input-box">
                <i class="fas fa-lock"></i>
                {{ form_registation.password2 }}
              </div>
              <div class="button input-box">
                <input type="submit" value="Продолжить">
              </div>
              <div class="text sign-up-text">Уже есть аккаунт? <label for="flip">Войти</label></div>
            </div>
      </form>
    </div>
    </div>
    </div>
  </div>

Проблема заключается в том, что отображаются только поля Входа, а у Регистрации пусто:

я думаю, что причина может крыться в том, что в файле views.py на шаблон login.html я возвращаю сразу две функции. Можно ли это как-то исправить, не разделяя вход и регистрацию на два шаблона?


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.