{% extends '../layout/2column.html' %}

{% block html_title %}パスワードの設定 · {{ path }}{% endblock %}

{% block content_head %}
<header  id="page-header">
  <h1 class="title" id="">ユーザー設定</h1>
</header>
{% endblock %}

{% block content_main %}
<div class="content-main">

  <ul class="nav nav-tabs">
    <li><a href="/me"><i class="fa fa-gears"></i> ユーザー情報</a></li>
    <li class="active"><a href="/me/password"><i class="fa fa-key"></i> パスワード設定</a></li>
  </ul>

  <div class="tab-content">

  {% if not user.password %}
  <div class="alert alert-danger">
    パスワードを設定してください
  </div>
  {% endif %}

  {% set message = req.flash('successMessage') %}
  {% if message.length %}
  <div class="alert alert-success">
    {{ message }}
  </div>
  {% endif %}

  {% if req.form.errors.length > 0 %}
  <div class="alert alert-danger">
    <ul>
    {% for error in req.form.errors %}
      <li>{{ error }}</li>
    {% endfor %}
    </ul>
  </div>
  {% endif %}

  {% if user.email %}
  <p>
  <code>{{ user.email }}</code> と設定されたパスワードの組み合わせでログイン可能になります。
  </p>
  {% endif %}

  <div id="form-box">

    <form action="/me/password" method="post" class="form-horizontal" role="form">
    <fieldset>
      {% if user.password %}
      <legend>パスワードを更新</legend>
      {% else %}
      <legend>パスワードを新規に設定</legend>
      {% endif %}
      {% if user.password %}
      <div class="form-group">
        <label for="mePassword[oldPassword]" class="col-xs-2 control-label">現在のパスワード</label>
        <div class="col-xs-6">
          <input class="form-control" type="password" name="mePassword[oldPassword]">
        </div>
      </div>
      {% endif %}
      <div class="form-group {% if not user.password %}has-error{% endif %}">
        <label for="mePassword[newPassword]" class="col-xs-2 control-label">新しいパスワード</label>
        <div class="col-xs-6">
          <input class="form-control" type="password" name="mePassword[newPassword]" required>
        </div>
      </div>
      <div class="form-group">
        <label for="mePassword[newPasswordConfirm]" class="col-xs-2 control-label">確認</label>
        <div class="col-xs-6">
          <input class="form-control col-xs-4" type="password" name="mePassword[newPasswordConfirm]" required>

          <p class="help-block">パスワードには、6文字以上の半角英数字または記号等を設定してください。</p>
        </div>
      </div>


      <div class="form-group">
        <div class="col-xs-offset-2 col-xs-10">
          <button type="submit" class="btn btn-primary">更新</button>
        </div>
      </div>

    </fieldset>
    </form>
  </div>


  </div>
</div>
{% endblock content_main %}

{% block content_footer %}
{% endblock %}

{% block footer %}
{% endblock %}