Как отличить сообщения Django в шаблонах при использовании вложенных модалов? - PullRequest
Новая
       6

Как отличить сообщения Django в шаблонах при использовании вложенных модалов?

0 голосов
/ 12 сентября 2018

Итак, я ломаю голову над этим уже 2 дня. Любая помощь будет потрясающей!

Я считаю, что в основе моей проблемы лежит то, что у меня есть вложенные модалы и пользовательская форма начальной загрузки в обоих: первая для входа в систему, а вторая для регистрации. Давайте предположим, что в одном случае я хочу выполнить все свои проверки на стороне сервера и, возможно, получить полный контроль над каждым из сообщений о проверке ошибок, а также с тем, как и где они должны отображаться в соответствии с их вводом. Как мне это сделать, используя django.contrib.messages?

** Если бы я мог использовать некоторые из встроенных методов Bootstrap 4 для проверки в качестве первой линии защиты, или data-validate-on-blur , чтобы работать так же, как это происходит с Abide Zurb Foundation. , даже лучше.

Теги шаблонов в каждом модале base.html: 

{% if messages %}
    <div class='container-fluid bg-white mt-5 pt-5 pl-4 mb-4'>
        {% for message in messages %}
            <p class="small font-poller text-danger">{{ message }}</p>
        {% endfor %}
    </div>
{% endif %}

Испытания и несчастья на данный момент:

В его нынешнем виде и с различными обходными путями, которые я нашел в переполнении стека, то есть с помощью jQuery для переключения модального режима (не самого красивого, так как он перезагружает страницу), лучшее, что я смог сделать до сих пор кровоточит мои сообщения между модалами и / или моими представлениями перенаправления.

Я читал темы о том, как очистить сообщения Django, и подумал, что это может быть исправлением, поэтому, если после закрытия модального окна или открытия нового модального сообщения сообщения, по сути, удаляются до повторной отправки формы. Другими словами, сообщения об ошибках входа в систему являются уникальными для модального имени входа при нажатии кнопки отправки формы, а сообщения об ошибках регистрации являются уникальными для режима регистрации при нажатии кнопки отправки формы.

К сожалению, я не понял, как использовать представление (views.py), чтобы успешно достичь этого. Мысль приходит на ум, потому что, поскольку я использую модалы для запуска этого события, мне придется использовать jQuery для этого, но я также потерпел неудачу на этом фронте. Я действительно надеюсь, что есть более простое решение для этого.

Заранее спасибо,

Dev

PS - мои фрагменты:

views.py 

def signup(request):
    signup_errors = User.objects.validation(request.POST, 'register')
    if len(signup_errors):
        for error in signup_errors.values():
            messages.error(request, error)
            return redirect('/')
    else:
        new_user = User.objects.create(
            first_name      = request.POST['first_name'],
            last_name       = request.POST['last_name'],
            dob             = request.POST['dob'],
            phone           = request.POST['phone'],
            address         = request.POST['address'],
            city            = request.POST['city'],
            state           = request.POST['state'],
            zipcode         = request.POST['zipcode'],
            email           = request.POST['email'],
            password        = 
bcrypt.hashpw(request.POST['password'].encode(), bcrypt.gensalt()))
        request.session['first_name'] = new_user.first_name
        request.session['id']   = new_user.id
        messages.info(request, 'You have successfully submitted your 
information.')
        return redirect('/menu')


def login(request):
    login_errors = User.objects.validation(request.POST, 'login')
    if len(login_errors):
        for error in login_errors.values():
            messages.error(request, error)
            return redirect('/')
    else:
        current_user = User.objects.get(email=request.POST['email'])
        request.session['first_name']   = current_user.first_name
        request.session['id']           = current_user.id
        messages.info(request, 'You have successfully logged in.')
        return redirect('/menu')

models.py 

class UserManager(models.Manager):
    def validation(self, postData, error_validation):
        errors = {}
        if error_validation == 'register':
            if not NAME_REGEX.match(postData['first_name']):
                errors['first_name'] = "First name can only contain 
letters!"
            if len(postData['last_name']) < 1:
                errors['last_name'] = "Last name cannot be blank."
            if not NAME_REGEX.match(postData['last_name']):
                errors['last_name'] = "Last name can only contain letters!"
        if error_validation == 'login':
            user = User.objects.filter(email=postData['email'])
            if not user:
                errors['user_login'] = "No account with that email in 
our system."
            elif not bcrypt.checkpw(postData['password'].encode(), 
user[0].password.encode()):
                errors['password_login'] = "Invalid email and/or 
password!"
        return errors

модальный логин в base.html 

<div class="modal fade text-dark" id="loginModal">
    <div class="modal-dialog">
        <div class="modal-content font-paytone">
            <div class="modal-header shadow p-3 bg_primary rounded">
                <h5 class="modal-title font-poller text-light text_shadow_success2" id="loginModal">Login <i class="fa fa-user text-center ml-1"></i></h5>
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">

                <form id="login-form" action="{% url 'ecommerce_app:login' %}" method="POST" novalidate>
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="email" name="email" class="form-control form-control-lg" placeholder="Email" required>
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
                    </div>                          
                    <input id="login-form-submit-btn" type="submit" class="btn btn-success btn-block border bg_primary btn_login" value="Log In">
                </form>

                <p class="pt-2 font-passion">Don't have an account? Sign up below!</p>
                <button id="login-form-signup-btn" class="btn btn-info btn-block border" data-toggle="modal" data-target="#registerModal">Sign Up</button>
            </div>

            {% if messages %}
                <div class="modal-footer">
                    <div class='container-fluid bg-white'>
                        {% for message in messages %}
                            <p class="small font-poller text-danger">{{ message }}</p>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

        </div>
    </div>
</div>

зарегистрировать модал в base.html 

<div class="modal fade text-dark" id="registerModal">
    <div class="modal-dialog">
        <div class="modal-content font-paytone">
            <div class="modal-header shadow p-3 bg_primary rounded">
                <h5 class="modal-title font-poller text-light text_shadow_info" id="registerModal">Sign Me Up! <i class="fa fa-user-plus ml-1"></i></h5>
                <button class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <form id='signup-form' action="/signup/" method="POST" novalidate>
                {% csrf_token %}
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="first_name">First Name</label>
                            <input type="text" name="first_name" class="form-control" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="last_name">Last Name</label>
                            <input type="text" name="last_name" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="dob">Date of Birth</label>
                            <input type="date" name="dob" class="form-control" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="phone">Phone #</label>
                            <input type="tel" name="phone" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="address">Address</label>
                        <input type="text" name="address" class="form-control" placeholder="Street" required>
                    </div>

                    <div class="form-group">
                        <div class="form-row">
                            <div class="col-7">
                              <input type="text" class="form-control" name="city" placeholder="City" required>
                            </div>
                            <div class="col">
                              <input type="text" class="form-control" name="state" placeholder="State" required>
                            </div>
                            <div class="col">
                              <input type="text" pattern="[0-9]{5}" name="zipcode" class="form-control" placeholder="Zip" required>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" name="email" class="form-control" required>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <!-- <label for="password">Password</label> -->
                            <input type="password" name="password" class="form-control" placeholder="Password" required>
                        </div>
                        <div class="form-group col-md-6">
                            <!-- <label for="confirm">Confirm Password</label> -->
                            <input type="password" name="confirm" class="form-control" placeholder="Confirm Password" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                        <button type="submit" class="btn btn-info btn-block font-fredoka">Register</button>
                        {% if messages %}
                            <div class='container-fluid bg-white mt-5 pt-5 pl-4 mb-4'>
                                {% for message in messages %}
                                    <p class="small font-poller text-danger">{{ message }}</p>
                                {% endfor %}
                            </div>
                        {% endif %}
                </div>
            </form>
        </div>
    </div>
</div>

PSS - если я могу помочь уточнить что-либо еще, пожалуйста, дайте мне знать

1 Ответ

0 голосов
/ 13 сентября 2018

Что ж, я думаю, что решил свою собственную проблему и каким-то образом вынужден поделиться с другими решением, поскольку я думаю, что на самом деле потерял сон над этой проблемой. В любом случае, я не совсем уверен, для этого ли изначально предназначен атрибут класса * Django ' extra_tags ', но для всех намерений и целей это чистое исправление и позволяет мне контролировать обе стороны на стороне сервера. и сообщения проверки клиента.

Сначала я назначаю extra_tags для 'register' и 'login' соответственно при создании и добавлении каждого экземпляра сообщения:

views.py 

def signup(request):
    errors = User.objects.validation(request.POST, 'register')
    if len(errors):
        for error in errors.values():
            messages.add_message(request, messages.ERROR, error, extra_tags="register")
        return redirect('/')

def login(request):
    errors = User.objects.validation(request.POST, 'login')
    if len(errors):
        for error in errors.values():
            messages.add_message(request, messages.ERROR, error, extra_tags="login")
        return redirect('/')

Я проверяю, есть ли сообщения, затем перебираю их, проверяю, есть ли тег 'register' (или 'login'), и, если это так, выводит некоторый текст, если нет, ничего не отображает.

base.html 

{% if messages %}
    {% for message in messages %}
        {% if 'register' in message.tags %}
            <p class="small font-poller text-danger registration_error_message">{{ message }}</p>
        {% endif %}
    {% endfor %}
{% endif %}

И последнее, но не менее важное: после того, как вы отправите форму через любой модальный режим, вам нужно будет перезагрузить модальный с вышеупомянутыми сообщениями об ошибках (или успехах). Чтобы каждый модал показывал свои соответствующие сообщения, вам придется различать, а затем переключаться, чтобы открывать каждое из них так же, как я использовал, используя template_tags в base.html, только на этот раз используя небольшой jQuery: 

<script>
    $(document).ready(function() {
        {% if messages %}
            {% for message in messages %}
                {% if 'login' in message.tags %}
                    $('#loginModal').modal('toggle');
                {% elif 'register' in message.tags %}
                    $('#registerModal').modal('toggle');
                {% endif %}
            {% endfor %}
        {% endif %}
    });
</script>
...