Django форма входа в модальном окне

@samq · Регистрация: 18.12.2016

Студворк — интернет-сервис помощи студентам

Недавно начал изучать django, хотел реализовать форму входа в модальном окне , только не знаю как это все можно реализовать, что нужно прописать в urls.

html

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
  <!DOCTYPE html>
{% load bootstrap3 %}
<html{% if LANGUAGE_CODE %} lang="{{ LANGUAGE_CODE }}"{% endif %}>
 
<head>
    <meta charset="utf-8">
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block bootstrap3_title %}django-bootstrap3 template title{% endblock %}</title>
    {% bootstrap_css %}
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    {% if 'javascript_in_head'|bootstrap_setting %}{% bootstrap_javascript jquery=True %}{% endif %}
    {% block bootstrap3_extra_head %}{% endblock %}
    {% load staticfiles %}
    <link rel="stylesheet" href={% static "rss_news/css/bootstrap.css" %}>
    <link rel="stylesheet" href={% static "rss_news/style.css" %}>
</head>
 
<body>
{% block bootstrap3_content %}
     <div id="wrapper" class="container well">
      <div class="row">
 
        <div id="header" class="col-md-12">
          <nav class="navbar" role="navigation">
            <div id="but1" class="col-md-12 text-right">
              <button type="button" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-sm">Вход</button>
              <button type="button" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-lg">Регистрация</button>
                <!-- Модальное окно регистрации-->
                <div class="modal fade bd-example-modal-lg" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="myModal">
                    <div class="modal-dialog modal-lg" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                          <h4 class="modal-title text-center" id="myModalLabel">Регистрация пользователя</h4>
                        </div>
                        <div class="modal-body">
                          <!-- Форма регистрации -->
                          <form action="" class="form-horizontal">
                            <div class="form-group">
                              <label for="lastName" class="control-label col-xs-3">Логин:</label>
                              <div class="col-xs-9">
                                <input type="text" class="form-control" id="nickName">
                              </div>
                            </div>
                            <div class="form-group">
                              <label for="lastName" class="control-label col-xs-3">Имя:</label>
                              <div class="col-xs-9">
                                <input type="text" class="form-control" id="surnName">
                              </div>
                            </div>
                            <div class="form-group">
                              <label for="lastName" class="control-label col-xs-3">Фамилия:</label>
                              <div class="col-xs-9">
                                <input type="text" class="form-control" id="lastName">
                              </div>
                            </div>
                            <div class="form-group">
                              <label for="lastName" class="control-label col-xs-3">Email:</label>
                              <div class="col-xs-9">
                                <input type="email" class="form-control" id="email">
                              </div>
                            </div>
                            <div class="form-group">
                              <label for="lastName" class="control-label col-xs-3">Пароль:</label>
                              <div class="col-xs-9">
                                <input type="password" class="form-control" id="pass">
                              </div>
                            </div>
                            <div class="form-group">
                              <label for="lastName" class="control-label col-xs-3 text-center" id="pass_r">Повторите пароль:</label>
                              <div class="col-xs-9">
                                <input type="password" class="form-control" id="pass_repeat">
                              </div>
                            </div>
                          </form>
                          <!-- /Форма регистрации -->
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                          <button type="button" class="btn btn-primary">Отправить</button>
                        </div>
                      </div>
                    </div>
                </div>
                <!-- /Модальное окно регистрации -->
                <!-- Модальное окно входа -->
                <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                  <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                         </button>
                        <h4 class="modal-title text-center" id="myModalLabel">Авторизация</h4>
                      </div>
                        <div class="modal-body">
                          <!-- Форма входа -->
 
                          <form  class="form-horizontal" action="{% url 'signup_user' %}" method="post">
                          {% csrf_token %}
                            <div class="form-group">
                              <label for="lastName" class="control-label col-xs-3" name="user_name">Логин:</label>
                              <div class="col-xs-9">
                                <input type="text" class="form-control" name="username" id="nickName">
                              </div>
                            </div>
                            <div class="form-group">
                              <label for="lastName" class="control-label col-xs-3">Пароль:</label>
                              <div class="col-xs-9">
                                <input type="password" class="form-control" name="password" id="pass">
                              </div>
                            </div>
                              <button type="submit" class="btn btn-primary">Отправить</button>
                          </form>
                          <!-- /входа -->
                    </div>
                  </div>
                </div>
                <!-- /Модальное окно входа -->
            </div>
          </nav>
        </div>
 
      </div>
 
      <div class="row" id="content">
        <div class="col-md-12">
          <div class="well" id="content_article">
          </div>
        </div>
      </div>
 
    </div>
 
{% endblock %}
{% if not 'javascript_in_head'|bootstrap_setting %}{% bootstrap_javascript jquery=True %}{% endif %}
{% block bootstrap3_extra_script %}{% endblock %}
</body>
 
</html>

urls

Кликните здесь для просмотра всего текста

Python
1
2
3
4
5
6
7
8
 from django.conf.urls import url, include
from django.contrib import admin
from rss.apps.rss_news import views
 
urlpatterns = [
    url(r'$', views.index),
    url(r'', views.signup_user),
]

views

Кликните здесь для просмотра всего текста

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  
from django.contrib.auth import authenticate
from django.contrib.auth.views import login
 
from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render
 
 
# Create your views here.
def index(request):
 
    context = {
 
    }
    return render(request, "index.html", context)
 
def signup_user(request):
    user_name = request.POST["user_name"]
    print(user_name)
 
    return HttpResponseRedirect("/")

@dondublon · 17.10.2017, 13:53

А разве в браузере можно делать модальные окна?

Не в смысле фиксированные диалоги, а с html.

@google_online · 20.10.2017, 06:53

Нужно создать во views.py функцию для входа, к примеру "sign_in" а в urls.py прописать название этой функции примерно так

Python
1
2
3
4
5
from . import views
urlpatterns = [
    url(r'$', views.index),
    url(r'^sign-in/$', views.sign_in, name="sign_in"),
]

В модальном окне просто отображайте форму. Там айдишники другие, не такие как у вас. Для пользователя id=id_username пароль id=id_password

Сообщение от samq

signup_user

sign up - это регистрация а sign in - это вход. Запомните сами и передайте другим

@TimeTwo · 23.10.2017, 16:01

Видимо форма авторизации нужна именно в модальном окне bootstrap....
во первых используйте настледование django шаблонов - очень удобная вещь.

создайте шаблон типа такого:

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="modal fade" id="help" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Форма авторизации</h4>
      </div>
      <div class="modal-body">
    {% if user.is_authenticated %}
        <form method="post" action="{% url auth:logout %}?next={{ request.path|urlencode }}">
          {% csrf_token %}
          <input type="submit" name="logout" value="{% trans "Logout" %}"/>
        </form>
    {% else %}
        <form method="post" action="{% url auth:login %}?next={{ request.path|urlencode }}">
          {% csrf_token %}
          <input type="text" name="username" maxlength="30" id="id_username"/>
          <input type="password" name="password" id="id_password"/>
          <input type="submit" name="login" value="{% trans "Login" %}"/>
        </form>
        {% endif %}
      </div>
    </div>
  </div>
</div>

( request.path|urlencode обеспечивает возврат на страницу обратно)
Далее подключайте его тегом {% include %} в base.html

если не хотите использовать стандартный механизм авторизации джанго по каким то причинам, напишите еще вьюху свою типа такой :

Python
1
2
3
4
5
6
7
8
9
10
11
12
def login(request):
    u"""
    Вызывает соответствующее представление Django, анализирует результат.
    В случае ошибки генерирует сообщение и возвращает пользователя на прежнюю страницу.
    """
    response = original_login(request)
    if isinstance(response, HttpResponseRedirect):
        return response
    else:
        messages.error(request, _(u'Your credentials are wrong. Sorry.'))
        return_to = request.REQUEST.get(REDIRECT_FIELD_NAME, reverse('frontend:index'))
        return HttpResponseRedirect(return_to)

@samq · 24.10.2017, 15:26 **[ТС]**

Добавлено через 4 минуты
TimeTwo, Спасибо за помощь=) + дополн. информацию.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@dondublon 4649 / 2069 / 366 Регистрация: 17.03.2012 Сообщений: 10,172 Записей в блоге: 6
	17.10.2017, 13:53
	А разве в браузере можно делать модальные окна? Не в смысле фиксированные диалоги, а с html. 0

@samq 0 / 0 / 0 Регистрация: 18.12.2016 Сообщений: 15
	24.10.2017, 15:26 [ТС]
	Добавлено через 4 минуты TimeTwo, Спасибо за помощь=) + дополн. информацию. 0

Django форма входа в модальном окне

Решение