Djangoroidの奮闘記

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

django備忘録21 Login Form in Bootstrap Navbar

参照サイト

bootstrapのformについては、こちらのサイトが非常にわかりやすかったです！

designup.jp

Navbarを利用したLogin formを作成

  • navbar.html にフォームタグを追加する。 class=navbar-form→navbarのフォーム class=navbar-right→navbarの右側（右寄せ？）に配置
      <form class='navbar-form navbar-right' method='POST' action=''>{% csrf_token %}
      </form>
  • さらにnavbar.htmlを修正 form-group は、formの配置を自動的に綺麗にしてくれるためのclassのようです。
      <form class='navbar-form navbar-right' method='POST' action=''>{% csrf_token %}
          <div class='form-group'>
          </div>
          <div class='form-group'>
          </div>
          <button type='submit' class='btn btn-default'>ログイン</button>
      </form>
  • さらに、フォームを完成させていく。 form-controlなどを追加していく。type フォームの種類、class=フォームcontrol
      <form class='navbar-form navbar-right' method='POST' action=''>{% csrf_token %}
          <div class='form-group'>
              <input type='text' class='form-control' name='username' placeholder="ユーザー名" />
          </div>
          <div class='form-group'>
              <input type='password' class='form-control' name='password' placeholder="パスワード" />
          </div>
          <button type='submit' class='btn btn-default'>ログイン</button>
      </form>

  • ログインボタンはできたので、削除しておく

  • さらに上記のフォームを　is_authenticatedのelseの後に入れておくか、もしくは、 {% if not request.user.is_authenticated %}　を設置してそのあとに入れる。

  • navbar ログインのactionを設定する前に動作を確認する。 accounts/login 画面で、入力した時などの動作を確認する。

例えば、formsタグのところは、以下のようになっている。 多分、重要なのは、name= の所。ここは上記で設定したnameと同じなので、良さそう。

<form method="post" action=".">
  <input type="hidden" name="***" value="***">
  

<div id="div_id_username" class="form-group"> <label for="id_username" class="control-label  requiredField">
                ユーザ名<span class="asteriskField">*</span> </label> <div class="controls "> <input class="textinput textInput form-control" id="id_username" maxlength="254" name="username" type="text"> </div> </div> <div id="div_id_password" class="form-group"> <label for="id_password" class="control-label  requiredField">
                パスワード<span class="asteriskField">*</span> </label> <div class="controls "> <input class="textinput textInput form-control" id="id_password" name="password" type="password"> </div> </div>


  <input class="btn btn-block btn-primary" type="submit" value="Submit">
  <input type="hidden" name="next" value="">
</form>
  • データの整合性取れそうなので、以下のようにurl "auth_login" でreverseで、ログインurlにデータを送付する。（データというのは、この場合、usernameと、password）
      <form class='navbar-form navbar-right' method='POST' action='{% url "auth_login" %}'>{% csrf_token %}

  • ちなみにログインに失敗した場合は、再度login_urlが表示される。なぜなら、多分、auth_loginのviewでredirectが多分設定されているから？？

  • また、accounts/loginの画面を開いている時は、ログインフォームが２つあることになってしまうため、表示させないようにする。そのための設定は以下のような感じ。

navbar.html

...
      {% if not request.user.is_authenticated and not "/accounts/login" in request.get_full_path %}
...

ちなみに、 not "/accounts/login" in request.get_full_path 　は、/accounts/login　が、今のページのfullpathに含まれていない場合という意味！