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

{% block html_title %}{{ customizeService.generateCustomTitle(t('security_settings')) }} · {% endblock %}

{% block content_header %}
<div class="header-wrap">
  <header id="page-header">
    <h1 id="admin-title" class="title">{{ t('security_settings') }}</h1>
  </header>
</div>
{% endblock %}

{% block content_main %}
<div class="content-main admin-security row">
  {% parent %}
    <div class="col-md-9">

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

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

      <form action="/_api/admin/security/general" method="post" class="form-horizontal" id="generalSetting" role="form">
        <fieldset>
        <legend class="alert-anchor">{{ t('security_settings') }}</legend>

          <div class="form-group">
            <label for="settingForm[security:restrictGuestMode]" class="col-xs-3 control-label">{{ t('security_setting.Guest Users Access') }}</label>
            <div class="col-xs-6">
              {% set selectedValue = guestModeValue %}
              <select class="form-control selectpicker" {% if isWikiModeForced %}disabled{% endif %}
                  name="settingForm[security:restrictGuestMode]" value="{{ getConfig('crowi', 'security:restrictGuestMode') }}">
                {% for modeValue, modeLabel in consts.restrictGuestMode %}
                  <option value="{{ t(modeValue) }}" {% if modeValue == selectedValue %}selected{% endif %}>{{ t(modeLabel) }}</option>
                {% endfor %}
              </select>
              {% if isWikiModeForced %}
              <p class="alert alert-warning mt-2">
                <i class="icon-exclamation icon-fw"></i><b>FIXED</b><br>
                {{ t('security_setting.Fixed by env var', 'FORCE_WIKI_MODE', getConfig('crowi', 'security:wikiMode')) }}
              </p>
              {% endif %}
            </div>
          </div>

          <div class="form-group">
            {% set configName = 'settingForm[security:list-policy:hideRestrictedByOwner]' %}
            {% set configValue = getConfig('crowi', 'security:list-policy:hideRestrictedByOwner') %}
            {% set isEnabled = !configValue %}
            <label for="{{configName}}" class="col-xs-3 control-label">{{ t("security_setting.page_listing_1") }}</label>
            <div class="col-xs-9">
              <div class="btn-group btn-toggle" data-toggle="buttons">
                <label class="btn btn-default btn-rounded btn-outline {% if isEnabled %}active{% endif %}" data-active-class="primary">
                  <input name="{{configName}}" value="false" type="radio" {% if isEnabled %}checked{% endif %}> ON
                </label>
                <label class="btn btn-default btn-rounded btn-outline {% if !isEnabled %}active{% endif %}" data-active-class="default">
                  <input name="{{configName}}" value="true" type="radio" {% if !isEnabled %}checked{% endif %}> OFF
                </label>
              </div>

              <p class="help-block small">
                {{ t("security_setting.page_listing_1_desc") }}
              </p>
            </div>
          </div>

          <div class="form-group">
            {% set configName = 'settingForm[security:list-policy:hideRestrictedByGroup]' %}
            {% set configValue = getConfig('crowi', 'security:list-policy:hideRestrictedByGroup') %}
            {% set isEnabled = !configValue %}
            <label for="{{configName}}" class="col-xs-3 control-label">{{ t("security_setting.page_listing_2") }}</label>
            <div class="col-xs-9">
              <div class="btn-group btn-toggle" data-toggle="buttons">
                <label class="btn btn-default btn-rounded btn-outline {% if isEnabled %}active{% endif %}" data-active-class="primary">
                  <input name="{{configName}}" value="false" type="radio" {% if isEnabled %}checked{% endif %}> ON
                </label>
                <label class="btn btn-default btn-rounded btn-outline {% if !isEnabled %}active{% endif %}" data-active-class="default">
                  <input name="{{configName}}" value="true" type="radio" {% if !isEnabled %}checked{% endif %}> OFF
                </label>
              </div>

              <p class="help-block small">
                {{ t("security_setting.page_listing_2_desc") }}
              </p>
            </div>
          </div>

          <div class="form-group">
            {% set configName = 'settingForm[security:pageCompleteDeletionAuthority]' %}
            {% set configValue = getConfig('crowi','security:pageCompleteDeletionAuthority') %}
            <label for="{{configName}}" class="col-xs-3 control-label">{{ t('security_setting.complete_deletion') }}</label>
            <div class="col-xs-6">
              <select class="form-control selectpicker" name="settingForm[security:pageCompleteDeletionAuthority]" value="{{ configValue }}">
                <option value="anyOne" {% if configValue == "anyOne" %}selected{% endif %}>{{ t('security_setting.anyone') }}</option>
                <option value="adminOnly" {% if configValue =="adiminOnly" %}selected{% endif %}>{{ t('security_setting.admin_only') }}</option>
                <option value="adminAndAuthor" {% if configValue == "adminAndAuthor" %}selected{% endif %}>{{ t('security_setting.admin_and_author') }}</option>
              </select>

              <p class="help-block small">
                {{ t('security_setting.complete_deletion_explain') }}
              </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">{{ t('Update') }}</button>
            </div>
          </div>

        </fieldset>
      </form>

      <!-- prevent XSS link -->
      <div class="mt-5">
        <legend>{{ t('security_setting.xss_prevent_setting') }}</legend>
        <div class="text-center">
          <a class="flexbox" style="font-size: large;" href="/admin/markdown/#preventXSS">
            <i class="fa-fw icon-login"></i> {{ t('security_setting.xss_prevent_setting_link') }}
          </a>
        </div>
       </div>


      <div class="auth-mechanism-configurations m-t-10">

        <legend>{{ t('security_setting.Authentication mechanism settings') }}</legend>

        {#
         # passport settings nav
         #}
        <div class="passport-settings">
          <ul class="nav nav-tabs" role="tablist">
            <li class="active">
              <a href="#passport-local" data-toggle="tab" role="tab"><i class="fa fa-users"></i> ID/Pass</a>
            </li>
            <li>
              <a href="#passport-ldap" data-toggle="tab" role="tab"><i class="fa fa-sitemap"></i> LDAP</a>
            </li>
            <li>
              <a href="#passport-saml" data-toggle="tab" role="tab"><i class="fa fa-key"></i> SAML</a>
            </li>
            <li>
              <a href="#passport-oidc" data-toggle="tab" role="tab"><i class="fa fa-openid"></i> OIDC</a>
            </li>
            <li>
              <a href="#passport-basic" data-toggle="tab" role="tab"><i class="fa fa-lock"></i> Basic</a>
            </li>
            <li>
              <a href="#passport-google-oauth" data-toggle="tab" role="tab"><i class="fa fa-google"></i> Google</a>
            </li>
            <li>
              <a href="#passport-github" data-toggle="tab" role="tab"><i class="fa fa-github"></i> GitHub</a>
            </li>
            <li>
              <a href="#passport-twitter" data-toggle="tab" role="tab"><i class="fa fa-twitter"></i> Twitter</a>
            </li>
            <li class="tbd">
              <a href="#passport-facebook" data-toggle="tab" role="tab"><i class="fa fa-facebook"></i> (TBD) Facebook</a>
            </li>
          </ul>

          <div class="tab-content p-t-10">
            <div id="passport-local" class="tab-pane active" role="tabpanel" >
              {% include './widget/passport/local.html' %}
            </div>

            <div id="passport-ldap" class="tab-pane" role="tabpanel" >
              {% include './widget/passport/ldap.html' with { settingForm: settingForm } %}
            </div>

            <div id="passport-saml" class="tab-pane" role="tabpanel" >
              {% include './widget/passport/saml.html' %}
            </div>

            <div id="passport-oidc" class="tab-pane" role="tabpanel">
              {% include './widget/passport/oidc.html' %}
            </div>

            <div id="passport-basic" class="tab-pane" role="tabpanel">
              {% include './widget/passport/basic.html' %}
            </div>

            <div id="passport-google-oauth" class="tab-pane" role="tabpanel">
              {% include './widget/passport/google-oauth.html' %}
            </div>

            <div id="passport-facebook" class="tab-pane" role="tabpanel">
              {% include './widget/passport/facebook.html' %}
            </div>

            <div id="passport-twitter" class="tab-pane" role="tabpanel">
              {% include './widget/passport/twitter.html' %}
            </div>

            <div id="passport-github" class="tab-pane" role="tabpanel">
              {% include './widget/passport/github.html' %}
            </div>

          </div><!-- /.tab-content -->
        </div>

      </div><!-- /.auth-mechanism-configurations -->
    </div>
  </div>

  <script>
    $('#generalSetting, #localSetting, #samlSetting, #basicSetting, #googleSetting, #githubSetting, #twitterSetting, #oidcSetting').each(function() {
      $(this).submit(function()
      {
        function showMessage(formId, msg, status) {
          $('#' + formId + ' > .alert').remove();
          $('#' + formId ).find('.alert').remove();

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

          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, '更新しました Updated');
            } else {
              showMessage($id, data.message, 'danger');
            }
          })
          .fail(function() {
            showMessage($id, 'エラーが発生しました Error', 'danger');
          })
          .always(function() {
            $button.prop('disabled', false);
        });
        return false;
      });
    });
  </script>
</div>
{% endblock content_main %}

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