weseek__growi/lib/views/me/index.html

{% extends '../layout-growi/base/layout.html' %}

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

{% block content_header %}
<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="icon-user"></i> {{ t('User Information') }}</a></li>
    {% if isEnabledPassport() %}
    <li><a href="/me/external-accounts"><i class="icon-share-alt"></i> {{ t('External Accounts') }}</a></li>
    {% endif %}
    <li><a href="/me/password"><i class="icon-lock"></i> {{ t('Password Settings') }}</a></li>
    <li><a href="/me/apiToken"><i class="icon-paper-plane"></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 m-t-20">
    <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">
        <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 }}">
        </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>
      <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">
          <label class="radio-inline"><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 class="radio-inline"><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>
      <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 m-t-20">

    <!-- separeted form tag -->
    <form action="/me/imagetype" id="formImageType" method="post" class="form" role="form"></form>

    <fieldset>

      <legend>{{ t('Set Profile Image') }}</legend>

      <div class="form-group col-md-2 col-sm-offset-1 col-sm-4">
        <div class="radio">
          <h4>
            <input type="radio" form="formImageType" name="imagetypeForm[isGravatarEnabled]" value="true" {% if user.isGravatarEnabled %}checked="checked"{% endif %}>
            <img src="https://gravatar.com/avatar/00000000000000000000000000000000?s=24" /> Gravatar
            <a href="https://gravatar.com/">
              <small><i class="icon-arrow-right-circle" aria-hidden="true"></i></small>
            </a>
          </h4>
        </div>

        <img src="{{ user|gravatar }}" width="64">
      </div><!-- /.col-sm* -->

      <div class="form-group col-md-4 col-sm-7">
        <div class="radio">
          <h4>
            <input type="radio" form="formImageType" name="imagetypeForm[isGravatarEnabled]" value="false" {% if !user.isGravatarEnabled  %}checked="checked"{% endif %}>
            {{ t('Upload Image') }}
          </h4>
        </div>
        <div class="form-group">
          <div id="pictureUploadFormMessage"></div>
          <label for="" class="col-sm-4 control-label">
            {{ t('Current Image') }}
          </label>
          <div class="col-sm-8">
            <p>
            <img src="{{ user|uploadedpicture }}" class="picture picture-lg img-circle" 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-4 control-label">
            {{ t('Upload new image') }}
          </label>
          <div class="col-sm-8">
            {% 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" class="d-flex align-items-center">
              </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" form="formImageType" class="btn btn-primary">{{ t('Update') }}</button>
        </div>
      </div>

    </fieldset>
  </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('<div class="speeding-wheel-sm m-r-5"></div> アップロード中...');
      $.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>

  {% if googleLoginEnabled() %}
  <div class="form-box">
    <legend>{{ t('Google Setting') }}</legend>
    <form action="/me/auth/google" method="post" class="form-horizontal col-sm-12" role="form">
      <fieldset>
        {% 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>
          <p>
            <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>
          <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 %}
      </fieldset>
    </form>
  </div>
  {% endif %}

  </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 layout_footer %}
{% endblock layout_footer %}