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/external-accounts"><i class="fa fa-user-plus"></i> {{ t('External Accounts') }}</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">
        <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">

    <!-- 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-sm-offset-1 col-sm-3">
        <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="fa fa-external-link" aria-hidden="true"></i></small>
            </a>
          </h4>
        </div>

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

      <div class="form-group col-sm-8">
        <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 }}" 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-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">
              </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('<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 %}