{% extends '../layout/admin.html' %}

{% block html_title %}アプリ設定 · {% endblock %}

{% block content_head %}
<div class="header-wrap">
  <header id="page-header">
    <h1 class="title" id="">アプリ設定</h1>
  </header>
</div>
{% endblock %}

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

  {% set emessage = req.flash('errorMessage') %}
  {% if emessage.length %}
  <div class="alert alert-danger">
    {{ emessage }}
  </div>
  {% endif %}

  <div class="row">
    <div class="col-md-3">
      {% include './widget/menu.html' with {current: 'app'} %}
    </div>
    <div class="col-md-9">

      <form action="/_api/admin/settings/app" method="post" class="form-horizontal" id="appSettingForm" role="form">
      <fieldset>
        <legend>アプリ設定</legend>
        <div class="form-group">
          <label for="settingForm[app:title]" class="col-xs-3 control-label">Wikiの名前</label>
          <div class="col-xs-6">
            <input class="form-control" type="text" name="settingForm[app:title]" value="{{ settingForm['app:title'] }}">

            <p class="help-block">ヘッダーやHTMLタイトルに使用されるWikiの名前を変更できます。</p>
          </div>
        </div>

        <div class="form-group">
          <label for="settingForm[app:confidential]" class="col-xs-3 control-label">コンフィデンシャル表示</label>
          <div class="col-xs-6">
            <input class="form-control" type="text" name="settingForm[app:confidential]" value="{{ settingForm['app:confidential'] }}" placeholder="例: 社外秘">
            <p class="help-block">ここに入力した内容は、ヘッダー等に表示されます。</p>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-3 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">更新</button>
          </div>
        </div>
      </fieldset>
      </form>

      <form action="/_api/admin/settings/sec" method="post" class="form-horizontal" id="secSettingForm" role="form">
      <fieldset>
      <legend>セキュリティ設定</legend>

        <div class="form-group">
          <label for="settingForm[security:registrationMode]" class="col-xs-3 control-label">Basic認証</label>
          <div class="col-xs-3">
            <label for="">ID</label>
            <input class="form-control" type="text" name="settingForm[security:basicName]"   value="{{ settingForm['security:basicName']|default('') }}">
          </div>
          <div class="col-xs-3">
            <label for="">パスワード</label>
            <input class="form-control" type="text" name="settingForm[security:basicSecret]" value="{{ settingForm['security:basicSecret']|default('') }}">
          </div>
          <div class="col-xs-offset-3 col-xs-9">
            <p class="help-block">
              Basic認証を設定すると、ページ全体に共通の認証がかかります。<br>
              IDとパスワードは暗号化されずに送信されるのでご注意下さい。<br>
            </p>
          </div>
        </div>

        <div class="form-group">
          <label for="settingForm[security:registrationMode]" class="col-xs-3 control-label">登録の制限</label>
          <div class="col-xs-6">
            <select class="form-control" name="settingForm[security:registrationMode]" value="{{ settingForm['security:registrationMode'] }}">
              {% for modeValue, modeLabel in consts.registrationMode %}
              <option value="{{ modeValue }}" {% if modeValue == settingForm['security:registrationMode'] %}selected{% endif %} >{{ modeLabel }}</option>
              {% endfor %}
            </select>
            <p class="help-block">ここに入力した内容は、ヘッダー等に表示されます。</p>
          </div>
        </div>

        <div class="form-group">
          <label for="settingForm[security:registrationWhiteList]" class="col-xs-3 control-label">登録許可メールアドレスの<br>ホワイトリスト</label>
          <div class="col-xs-8">
            <textarea class="form-control" type="textarea" name="settingForm[security:registrationWhiteList]" placeholder="例: @crowi.wiki">{{ settingForm['security:registrationWhiteList']|join('&#13')|raw }}</textarea>
            <p class="help-block">登録可能なメールアドレスを制限することができます。例えば、会社で使う場合、<code>@crowi.wiki</code> などと記載すると、その会社のメールアドレスを持っている人のみ登録可能になります。<br>
            1行に1メールアドレス入力してください。</p>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-3 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">更新</button>
          </div>
        </div>

      </fieldset>
      </form>

      <form action="/_api/admin/settings/mail" method="post" class="form-horizontal" id="mailSettingForm" role="form">
      <fieldset>
      <legend>メールの設定</legend>
      <p class="well">SMTPの設定がされている場合、それが利用されます。SMTP設定がなく、AWSの設定がある場合、SESでの送信を試みます。<br>どちらの設定もない場合、メールは送信されません。</p>

        <div class="form-group">
          <label for="settingForm[mail.from]" class="col-xs-3 control-label">Fromアドレス</label>
          <div class="col-xs-6">
            <input class="form-control" type="text" name="settingForm[mail:from]" placeholder="例: mail@crowi.wiki" value="{{ settingForm['mail:from'] }}">
          </div>
        </div>

        <div class="form-group">
          <label class="col-xs-3 control-label">SMTP設定</label>
          <div class="col-xs-4">
            <label for="">ホスト</label>
            <input class="form-control" type="text" name="settingForm[mail:smtpHost]"   value="{{ settingForm['mail:smtpHost']|default('') }}">
          </div>
          <div class="col-xs-2">
            <label for="">ポート</label>
            <input class="form-control" type="text" name="settingForm[mail:smtpPort]" value="{{ settingForm['mail:smtpPort']|default('') }}">
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-3 col-xs-offset-3">
            <label for="">ユーザー</label>
            <input class="form-control" type="text" name="settingForm[mail:smtpUser]"   value="{{ settingForm['mail:smtpUser']|default('') }}">
          </div>
          <div class="col-xs-3">
            <label for="">パスワード</label>
            <input class="form-control" type="password" name="settingForm[mail:smtpPassword]" value="{{ settingForm['mail:smtpPassword']|default('') }}">
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-3 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">更新</button>
          </div>
        </div>

      </fieldset>
      </form>

      <form action="/_api/admin/settings/aws" method="post" class="form-horizontal" id="awsSettingForm" role="form">
      <fieldset>
      <legend>AWS設定</legend>
        <p class="well">AWS にアクセスするための設定を行います。AWS の設定を完了させると、ファイルアップロード機能、プロフィール写真機能などが有効になります。<br>
        また、SMTP の設定が無い場合、SES を利用したメール送信が行われます。FromメールアドレスのVerify、プロダクション利用設定をする必要があります。<br>
          <br>

          <span class="text-danger"><i class="fa fa-warning"></i> この設定を途中で変更すると、これまでにアップロードしたファイル等へのアクセスができなくなりますのでご注意下さい。</span>
        </p>

        <div class="form-group">
          <label for="settingForm[app.region]" class="col-xs-3 control-label">リージョン</label>
          <div class="col-xs-6">
            <input class="form-control" type="text" name="settingForm[aws:region]" placeholder="例: ap-northeast-1" value="{{ settingForm['aws:region'] }}">
          </div>
        </div>

        <div class="form-group">
          <label for="settingForm[aws:bucket]" class="col-xs-3 control-label">バケット名</label>
          <div class="col-xs-6">
            <input class="form-control" type="text" name="settingForm[aws:bucket]" placeholder="例: crowi"  value="{{ settingForm['aws:bucket'] }}">
          </div>
        </div>

        <div class="form-group">
          <label for="settingForm[aws:accessKeyId]" class="col-xs-3 control-label">Access Key ID</label>
          <div class="col-xs-6">
            <input class="form-control" type="text" name="settingForm[aws:accessKeyId]" value="{{ settingForm['aws:accessKeyId'] }}">
          </div>

        </div>

        <div class="form-group">
          <label for="settingForm[aws:secretAccessKey]" class="col-xs-3 control-label">Secret Access Key</label>
          <div class="col-xs-6">
            <input class="form-control" type="text" name="settingForm[aws:secretAccessKey]" value="{{ settingForm['aws:secretAccessKey'] }}">
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-3 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">更新</button>
          </div>
        </div>

      </fieldset>
      </form>

      <form action="/_api/admin/settings/google" method="post" class="form-horizontal" id="googleSettingForm" role="form">
      <fieldset>
      <legend>Google 設定</legend>
        <p class="well">Google プロジェクトの設定をすると、Google アカウントにコネクトして登録やログインが可能になります。</p>

        <div class="form-group">
          <label for="settingForm[google:clientId]" class="col-xs-3 control-label">Client ID</label>
          <div class="col-xs-6">
            <input class="form-control" type="text" name="settingForm[google:clientId]" value="{{ settingForm['google:clientId'] }}">
          </div>
        </div>

        <div class="form-group">
          <label for="settingForm[google:clientSecret]" class="col-xs-3 control-label">Client Secret</label>
          <div class="col-xs-6">
            <input class="form-control" type="text" name="settingForm[google:clientSecret]" value="{{ settingForm['google:clientSecret'] }}">
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-3 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">更新</button>
          </div>
        </div>

      </fieldset>
      </form>

      <form action="/_api/admin/settings/plugin" method="post" class="form-horizontal" id="pluginSettingForm" role="form">
      <fieldset>
      <legend>プラグイン設定</legend>
        <p class="well">プラグインの読み込みを有効にします。</p>

        <div class="form-group">
          <label for="settingForm[plugin:isEnabledPlugins]" class="col-xs-3 control-label">プラグインを読み込む</label>
          <div class="col-xs-6">
            <div class="btn-group btn-toggle" data-toggle="buttons">
              <label class="btn {% if settingForm['plugin:isEnabledPlugins'] %}btn-primary active{% else %}btn-default{% endif %}">
                <input name="settingForm[plugin:isEnabledPlugins]" value="true" type="radio"
                    {% if true === settingForm['plugin:isEnabledPlugins'] %}checked{% endif %}> 有効
              </label>
              <label class="btn {% if !settingForm['plugin:isEnabledPlugins'] %}btn-primary active{% else %}btn-default{% endif %}">
                <input name="settingForm[plugin:isEnabledPlugins]" value="false" type="radio"
                    {% if !settingForm['plugin:isEnabledPlugins'] %}checked{% endif %}> 無効
              </label>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-3 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">更新</button>
          </div>
        </div>

      </fieldset>
      </form>

      <h4>インストールされているプラグイン一覧</h4>
      <table class="table table-bordered">
        <th class="text-center">
          パッケージ名
        </th>
        <th class="text-center">
          指定バージョン
        </th>
        <th class="text-center">
          インストールされているバージョン
        </th>
        {% for pluginName in Object.keys(plugins) %}
        <tr>
          <td>{{ pluginName }}</td>
          <td class="text-center">{{ plugins[pluginName] }}</td>
          <td class="text-center">(TBD)</td>
        </tr>
        {% endfor %}
      </table>

    </div>
  </div>

  <script>
    $('#appSettingForm, #secSettingForm, #mailSettingForm, #awsSettingForm, #googleSettingForm, #pluginSettingForm').each(function() {
      $(this).submit(function()
      {
        function showMessage(formId, msg, status) {
          $('#' + formId + ' .alert').remove();

          if (!status) {
            status = 'success';
          }
          var $message = $('<p class="alert"></p>');
          $message.addClass('alert-' + status);
          $message.html(msg.replace('\n', '<br>'));
          $message.insertAfter('#' + formId + ' legend');

          if (status == 'success') {
            setTimeout(function()
            {
              $message.fadeOut({
                complete: function() {
                  $message.remove();
                }
              });
            }, 5000);
          }
        }

        var $form = $(this);
        var $id = $form.attr('id');
        var $button = $('button', this);
        $button.attr('disabled', 'disabled');
        var jqxhr = $.post($form.attr('action'), $form.serialize(), function(data)
          {
            if (data.status) {
              showMessage($id, '更新しました');
            } else {
              showMessage($id, data.message, 'danger');
            }
          })
          .fail(function() {
            showMessage($id, 'エラーが発生しました', 'danger');
          })
          .always(function() {
            $button.prop('disabled', false);
        });
        return false;
      });
    });

    // Bootstrap 3 Toggle Switch Snippet
    // http://www.bootply.com/92189
    $('.btn-toggle').click(function() {
      $(this).find('.btn').toggleClass('active');

      if ($(this).find('.btn-primary').length>0) {
        $(this).find('.btn').toggleClass('btn-primary');
      }
      if ($(this).find('.btn-danger').length>0) {
        $(this).find('.btn').toggleClass('btn-danger');
      }
      if ($(this).find('.btn-success').length>0) {
        $(this).find('.btn').toggleClass('btn-success');
      }
      if ($(this).find('.btn-info').length>0) {
        $(this).find('.btn').toggleClass('btn-info');
      }

      $(this).find('.btn').toggleClass('btn-default');
    });
  </script>

</div>
{% endblock content_main %}

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