Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Django e-commerce part32 Login as Dropdown Menu

Dropdown menu にログインボタンをつける

navbar.html を編集する。

コメントアウトしていたdropdown を元に戻す。 以下のような感じで、dropdown listの中に入れてみる。

          <ul class="nav navbar-nav navbar-right">
            {% if request.user.is_authenticated %}
            <li><a href="{% url 'auth_logout' %}">Logout</a></li>
            {% else %}
                <li><a href="{% url 'registration_register' %}">Register</a></li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Log in<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                {% if not request.user.is_authenticated and not "/accounts/login" in request.get_full_path %}
                    <form class='navbar-form navbar-right' method='POST' action='{% url "auth_login" %}'>{% csrf_token %}
                    <div class='form-group'>
                    <input type='text' class='form-control' name='username' placeholder='Username' />
                    </div>
                    <div class='form-group'>
                    <input type='password' class='form-control' name='password' placeholder='Password' />
                    </div>
                    <button type='submit' class='btn btn-default'>Login</button>
                    </form>

                {% endif %}
                <!-- <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li> -->
              </ul>
            </li>
            {% endif %}
          </ul>

さらに、ログインボタンの箇所を少し修正。

<button type='submit' class='btn btn-default btn-block'>Login</button>

ログインページもしくは、ログイン済みの場合は、ログインのdropdownlistを消す。 また、パスワードをお忘れですかのリンクも貼る。

          <ul class="nav navbar-nav navbar-right">
            {% if request.user.is_authenticated %}
            <li><a href="{% url 'auth_logout' %}">Logout</a></li>
            {% else %}
                <li><a href="{% url 'registration_register' %}">新規登録</a></li>
                {% if not request.user.is_authenticated and not "/accounts/login" in request.get_full_path %}
                    <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">ログイン<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">

                    <form class='navbar-form navbar-right' method='POST' action='{% url "auth_login" %}'>{% csrf_token %}
                    <div class='form-group'>
                    <input type='text' class='form-control' name='username' placeholder='Username' />
                    </div>
                    <div class='form-group'>
                    <input type='password' class='form-control' name='password' placeholder='Password' />
                    </div>
                    <button type='submit' class='btn btn-default btn-block'>ログイン</button>
                    </form>
                <p class='text-center'><a href='{% url "auth_password_reset" %}'>パスワードをお忘れですか?</p>
                {% endif %}
                <!-- <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li> -->
            {% endif %}
          </ul>