weseek__growi/lib/views/me/index.html

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

{% block html_title %}{{ t('User Settings') }} · {{ path }}{% endblock %}

{% block content_head %}
<div class="header-wrap">
  <header id="page-header">
    <h1 class="title" id="">{{ t('User Settings') }}</h1>
  </header>
</div>
{% endblock %}

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

  <ul class="nav nav-tabs">
    <li class="active"><a href="/me"><i class="fa fa-gears"></i> {{ t('User Information') }}</a></li>
    <li><a href="/me/password"><i class="fa fa-key"></i> {{ t('Password Settings') }}</a></li>
    <li><a href="/me/apiToken"><i class="fa fa-rocket"></i> {{ t('API Settings') }}</a></li>
  </ul>

  <div class="tab-content">

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

  {% set wmessage = req.flash('warningMessage') %}
  {% if wmessage.length %}
  <div class="alert alert-danger">
    {{ wmessage }}
  </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 %}


  <div class="form-box">
    <form action="/me" method="post" class="form-horizontal" role="form">
      <fieldset>
        <legend>{{ t('Basic Info') }}</legend>
      <div class="form-group">
        <label for="userForm[name]" class="col-sm-2 control-label">{{ t('Name') }}</label>
        <div class="col-sm-4">
          <input class="form-control" type="text" name="userForm[name]" value="{{ user.name }}" required>
        </div>
      </div>
      <div class="form-group {% if not user.email %}has-error{% endif %}">
        <label for="userForm[email]" class="col-sm-2 control-label">{{ t('Email') }}</label>
        <div class="col-sm-4">
          <input class="form-control" type="email" name="userForm[email]" value="{{ user.email }}" required>
        </div>
        <div class="col-sm-offset-2 col-sm-10">
          {% if config.crowi['security:registrationWhiteList'] && config.crowi['security:registrationWhiteList'].length %}
          <p class="help-block">
            {{ t('page_register.form_help.email') }}
          <ul>
            {% for em in config.crowi['security:registrationWhiteList'] %}
            <li><code>{{ em }}</code></li>
            {% endfor %}
          </ul>
          </p>
          {% endif %}
        </div>
        <div class="form-group {% if not user.lang %}has-error{% endif %}">
          <label for="userForm[lang]" class="col-sm-2 control-label">{{ t('Language') }}</label>
          <div class="col-sm-4 radio">
            <label><input type="radio" name="userForm[lang]" value="{{ consts.language.LANG_EN_US }}" {% if user.lang == consts.language.LANG_EN_US %}checked="checked"{% endif %}>{{ t('English') }}</label>
            <label><input type="radio" name="userForm[lang]" value="{{ consts.language.LANG_JA }}" {% if user.lang == consts.language.LANG_JA %}checked="checked"{% endif %}>{{ t('Japanese') }}</label>
          </div>
          <div class="col-sm-offset-2 col-sm-10">
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
        </div>
      </div>
    </fieldset>
    </form>
  </div>

  <div class="form-box">
    <form action="/me/imagetype" method="post" class="form" role="form">
      <fieldset>
        <legend>{{ t('Set Profile Image') }}</legend>
        <div class="form-group col-sm-offset-1 col-sm-4">
          <div class="radio">
            <h4>
              <input type="radio" name="userForm[isGravaterEnabled]" value="true" {% if user.isGravaterEnabled %}checked="checked"{% endif %}>
              <img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?s=24" /> Gravater
            </h4>
          </div>
        </div><!-- /.col-sm* -->
        <div class="form-group col-sm-4">
          <div class="radio">
            <h4>
              <input type="radio" name="userForm[isGravaterEnabled]" value="false" {% if !user.isGravaterEnabled  %}checked="checked"{% endif %}>{{ t('Upload Image') }}
            </h4>
          </div>

          <div class="form-group">
            <div id="pictureUploadFormMessage"></div>
            <label for="" class="col-sm-6 control-label">
              {{ t('Current Image') }}
            </label>
            <div class="col-sm-6">
              <p>
              <img src="{{ user|picture }}" width="64" id="settingUserPicture"><br>
              </p>
              <p>
              {% if user.image %}
              <form action="/me/picture/delete" method="post" class="form-horizontal" role="form" onsubmit="return window.confirm('{{ t('Delete this image?') }}');">
                <button type="submit" class="btn btn-danger">{{ t('Delete Image') }}</button>
              </form>
              {% endif %}
              </p>
            </div>
          </div><!-- /.form-group -->

          <div class="form-group">
            <label for="" class="col-sm-6 control-label">
              {{ t('Upload new image') }}
            </label>
            <div class="col-sm-6">
              {% if isUploadable() %}
              <form action="/_api/me/picture/upload" id="pictureUploadForm" method="post" class="form-horizontal" role="form" enctype="multipart/form-data">
                <input name="userPicture" type="file" accept="image/*">
                <div id="pictureUploadFormProgress">
                </div>
              </form>
              {% else %}
              * {{ t('page_me.form_help.profile_image1') }}<br>
              * {{ t('page_me.form_help.profile_image2') }}<br>
              {% endif %}
            </div>
          </div><!-- /.form-group -->

        </div><!-- /.col-sm- -->

        <div class="form-group">
          <div class="col-sm-offset-4 col-sm-6">
            <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
          </div>
        </div>

      </fieldset>
    </form>
  </div><!-- /.form-box -->

  <script>
  $(function()
  {
    $("#pictureUploadForm input[name=userPicture]").on('change', function(){
      var $form = $('#pictureUploadForm');
      var fd = new FormData($form[0]);
      if ($(this).val() == '') {
        return false;
      }

      $('#pictureUploadFormProgress').html('<img src="/images/loading_s.gif"> アップロード中...');
      $.ajax($form.attr("action"), {
        type: 'post',
        processData: false,
        contentType: false,
        data: fd,
        dataType: 'json',
        success: function(data){
          if (data.status) {
            $('#settingUserPicture').attr('src', data.url + '?time=' + (new Date()));
            $('#pictureUploadFormMessage')
              .addClass('alert alert-success')
              .html('変更しました');
          } else {
            $('#pictureUploadFormMessage')
              .addClass('alert alert-danger')
              .html('変更中にエラーが発生しました。');
          }
          $('#pictureUploadFormProgress').html('');
        }
      });
      return false;
    });
  });
  </script>

  <div class="row">
    {% if googleLoginEnabled() %}

    <div class="col-sm-6"> {# Google Connect #}

      <div class="form-box">
        <form action="/me/auth/google" method="post" class="form-horizontal" role="form">
          <fieldset>
            <legend><i class="fa fa-google-plus-square"></i> {{ t('Google Setting') }}</legend>

            {% set wmessage = req.flash('warningMessage.auth.google') %}
            {% if wmessage.length %}
            <div class="alert alert-danger">
              {{ wmessage }}
            </div>
            {% endif %}

            <div class="form-group">
            {% if user.googleId %}

            <div class="col-sm-12">
              <p>
                {{ t('Connected') }}

                <input type="submit" name="disconnectGoogle" class="btn btn-default" value="{{ t('Disconnect') }}">
              </p>
              <p class="help-block">
                {{ t('page_me.form_help.google_disconnect1') }}<br>
                {{ t('page_me.form_help.google_disconnect2') }}
              </p>
            </div>

            {% else %}

            <div class="col-sm-12">
              <div class="text-center">
                <input type="submit" name="connectGoogle" class="btn btn-google" value="Googleコネクト">
              </div>
              <p class="help-block">
                {{ t('page_me.form_help.google_connect1') }}<br>
              </p>
              {% if config.crowi['security:registrationWhiteList'] && config.crowi['security:registrationWhiteList'].length %}
              <p class="help-block">
                {{ t('page_register.form_help.email') }}<br>
                {{ t('page_me.form_help.google_connect2') }}
              </p>
              <ul>
                {% for em in config.crowi['security:registrationWhiteList'] %}
                <li><code>{{ em }}</code></li>
                {% endfor %}
              </ul>
              {% endif %}
            </div>

            {% endif %}
          </div>
        </fieldset>
      </form>
    </div> {# /Google Connect #}
    {% endif %}

  </div>

  </div> {# end of .tab-contents #}

  {#
  <div class="form-box">
    <form action="/me/username" method="post" class="form-horizontal" role="form">
      <fieldset>
        <legend>ユーザーID (ユーザー名) の変更</legend>
      <div class="form-group">
        <label for="userNameForm[username]" class="col-sm-2 control-label">ユーザーID</label>
        <div class="col-sm-4">
          <input class="form-control" type="text" name="userNameForm[username]" value="{{ user.username }}" required>
          <p class="help-block">すべてのマイページの</p>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <p class="alert alert-warning">
          ユーザーIDを変更すると、<code>/user/{{ user.username }}</code> 以下のページがすべて <code>/user/新しいユーザーID</code> の下に移動されます。<br>
          また、これまでのページにリダイレクトは設定されず、この操作の取り消しもできません。<br>
          実行には十分に注意をしてください。
          </p>
          <button type="submit" class="btn btn-warning">ユーザーIDの変更を実行する</button>
        </div>
      </div>
    </fieldset>
    </form>
  </div>
  #}

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

{% block content_footer %}
{% endblock content_footer %}

{% block footer %}
{% endblock footer %}