weseek__growi/src/server/views/me/index.html

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

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

{% block content_header %}
<div class="header-wrap">
  <header id="page-header">
    <h1 id="mypage-title" class="title">{{ 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 m-t-10">
    {{ smessage }}
  </div>
  {% endif %}

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

  {% if req.form.errors.length > 0 %}
  <div class="alert alert-danger m-t-10">
    <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">
        <label for="userForm[isEmailPublished]" class="col-sm-2 control-label">{{ t('Disclose E-mail') }}</label>
        <div class="col-sm-4">
          <div class="radio radio-primary radio-inline">
            <input type="radio" id="radioEmailShow" name="userForm[isEmailPublished]" value="{{ true }}" {% if user.isEmailPublished == true %}checked="checked"{% endif %}>
            <label for="radioEmailShow">{{ t('Show') }}</label>
          </div>
          <div class="radio radio-primary radio-inline">
            <input type="radio" id="radioEmailHide" name="userForm[isEmailPublished]" value="{{ false }}" {% if user.isEmailPublished == false %}checked="checked"{% endif %}>
            <label for="radioEmailHide">{{ t('Hide') }}</label>
          </div>
        </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">
          <div class="radio radio-primary radio-inline">
            <input type="radio" id="radioLangEn" name="userForm[lang]" value="{{ consts.language.LANG_EN_US }}" {% if user.lang == consts.language.LANG_EN_US %}checked="checked"{% endif %}>
            <label for="radioLangEn">{{ t('English') }}</label>
          </div>
          <div class="radio radio-primary radio-inline">
            <input type="radio" id="radioLangJa" name="userForm[lang]" value="{{ consts.language.LANG_JA }}" {% if user.lang == consts.language.LANG_JA %}checked="checked"{% endif %}>
            <label for="radioLangJa">{{ t('Japanese') }}</label>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <input type="hidden" name="_csrf" value="{{ csrf() }}">
          <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">
        <h4>
          <div class="radio radio-primary">
            <input type="radio" id="radioGravatar" form="formImageType" name="imagetypeForm[isGravatarEnabled]" value="true" {% if user.isGravatarEnabled %}checked="checked"{% endif %}>
            <label for="radioGravatar">
              <img src="https://gravatar.com/avatar/00000000000000000000000000000000?s=24" /> Gravatar
            </label>
            <a href="https://gravatar.com/">
              <small><i class="icon-arrow-right-circle" aria-hidden="true"></i></small>
            </a>
          </div>
        </h4>

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

      <div class="form-group col-md-4 col-sm-7">
        <h4>
          <div class="radio radio-primary">
            <input type="radio" id="radioUploadPicture" form="formImageType" name="imagetypeForm[isGravatarEnabled]" value="false" {% if !user.isGravatarEnabled  %}checked="checked"{% endif %}>
            <label for="radioUploadPicture">
              {{ t('Upload Image') }}
            </label>
          </div>
        </h4>
        <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>
            <form id="remove-attachment" action="/_api/attachments.removeProfileImage" method="post" class="form-horizontal"
                style="{% if not user.imageAttachment %}display: none{% endif %}">
              <input type="hidden" name="_csrf" value="{{ csrf() }}">
              <button type="submit" class="btn btn-danger">{{ t('Delete Image') }}</button>
            </form>
            </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/attachments.uploadProfileImage" id="pictureUploadForm" method="post" class="form-horizontal" role="form">
              <input type="hidden" name="_csrf" value="{{ csrf() }}">
              <input type="file" name="profileImage" 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>
    $("#pictureUploadForm input[name=profileImage]").on('change', function(){
      if ($(this).val() == '') {
        return false;
      }

      var $form = $('#pictureUploadForm');
      var formData = new FormData();
      formData.append('file', this.files[0]);
      formData.append('_csrf', document.getElementsByName("_csrf")[0].value);

      $('#pictureUploadFormProgress').html('<div class="speeding-wheel-sm m-r-5"></div> アップロード中...');
      $.ajax($form.attr("action"), {
        type: 'post',
        processData: false,
        contentType: false,
        data: formData
      })
      .then(function(data) {
        if (data.ok) {
          var attachment = data.attachment;
          $('#settingUserPicture').attr('src', attachment.filePathProxied + '?time=' + (new Date()));
          $('form#remove-attachment').show();
          $('form#remove-attachment input[name=attachment_id]').val(attachment.id);
          $('#pictureUploadFormMessage')
            .addClass('alert alert-success')
            .html('変更しました');
        }
        else {
          throw new Error('statis is invalid');
        }
      })
      .catch(function(err) {
        $('#pictureUploadFormMessage')
          .addClass('alert alert-danger')
          .html('変更中にエラーが発生しました。');
      })
      // finally
      .then(function() {
        $('#pictureUploadFormProgress').html('');
      });
      return false;
    });

    $('form#remove-attachment').on('submit', function(event) {
      // process with jQuery
      event.preventDefault();

      $.post($(this).attr('action'), $(this).serializeArray())
      .then(function(data) {
        if (data.ok) {
          $('#settingUserPicture').attr('src', '/images/icons/user.svg');
          $('form#remove-attachment').hide();
        }
        else {
          throw new Error('statis is invalid');
        }
      })
      .catch(function(err) {
        $('#pictureUploadFormMessage')
          .addClass('alert alert-danger')
          .html('変更中にエラーが発生しました。');
      })
    });
  </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 %}