weseek__growi/lib/views/admin/markdown.html

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

{% block html_title %}{{ customTitle(t('Markdown settings')) }}
 · {{ path }}{% endblock %}

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

{% block content_main %}
<div class="content-main">
  <div class="row">
    <div class="col-md-3">
      {% include './widget/menu.html' with {current: 'markdown'} %}
    </div>
    <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="/admin/markdown/lineBreaksSetting" method="post" class="form-horizontal" id="markdownSettingForm" role="form">
        <fieldset>
          <legend>{{ t('markdown_setting.line_break_setting') }}</legend>
          <p class="well">{{ t("markdown_setting.line_break_setting_desc") }}</p>

          <div class="form-group">
            <label for="markdownSetting[markdown:isEnabledLinebreaks]" class="col-xs-4 control-label">
              {{ t('markdown_setting.Enable Line Break') }}
            </label>
            <div class="col-xs-5">
              <div class="btn-group btn-toggle" data-toggle="buttons">
                <label class="btn btn-default btn-rounded btn-outline {% if markdownSetting['markdown:isEnabledLinebreaks'] %}active{% endif %}" data-active-class="primary">
                  <input name="markdownSetting[markdown:isEnabledLinebreaks]" value="true" type="radio"
                      {% if true === markdownSetting['markdown:isEnabledLinebreaks'] %}checked{% endif %}> ON
                </label>
                <label class="btn btn-default btn-rounded btn-outline {% if !markdownSetting['markdown:isEnabledLinebreaks'] %}active{% endif %}" data-active-class="default">
                  <input name="markdownSetting[markdown:isEnabledLinebreaks]" value="false" type="radio"
                      {% if !markdownSetting['markdown:isEnabledLinebreaks'] %}checked{% endif %}> OFF
                </label>
              </div>
              <p class="help-block">{{ t("markdown_setting.Enable Line Break desc") }}</p>
            </div>
          </div>

          <div class="form-group">
            <label for="markdownSetting[markdown:isEnabledLinebreaksInComments]" class="col-xs-4 control-label">
              {{ t("markdown_setting.Enable Line Break for comment") }}
            </label>
            <div class="col-xs-5">
              <div class="btn-group btn-toggle" data-toggle="buttons">
                <label class="btn btn-default btn-rounded btn-outline {% if markdownSetting['markdown:isEnabledLinebreaksInComments'] %}active{% endif %}" data-active-class="primary">
                  <input name="markdownSetting[markdown:isEnabledLinebreaksInComments]" value="true" type="radio"
                      {% if true === markdownSetting['markdown:isEnabledLinebreaksInComments'] %}checked{% endif %}> ON
                </label>
                <label class="btn btn-default btn-rounded btn-outline {% if !markdownSetting['markdown:isEnabledLinebreaksInComments'] %}active{% endif %}" data-active-class="default">
                  <input name="markdownSetting[markdown:isEnabledLinebreaksInComments]" value="false" type="radio"
                      {% if !markdownSetting['markdown:isEnabledLinebreaksInComments'] %}checked{% endif %}> OFF
                </label>
              </div>
              <p class="help-block">{{ t("markdown_setting.Enable Line Break for comment desc") }}</p>
            </div>
          </div>

          <div class="form-group my-3">
            <div class="col-xs-offset-4 col-xs-5">
              <input type="hidden" name="_csrf" value="{{ csrf() }}">
              <button type="submit" class="btn btn-primary">{{ t("Update") }}</button>
            </div>
          </div>
        </fieldset>
      </form>

      <form action="/admin/markdown/xss-setting" method="post" class="form-horizontal" id="markdownSettingForm" role="form">
        {% set nameForIsXssEnabled = "markdownSetting[markdown:xss:isPrevented]" %}
        {% set isXssEnabled = markdownSetting['markdown:xss:isPrevented'] %}

        <fieldset>
          <legend>{{ t('markdown_setting.XSS_setting') }}</legend>
          <p class="well">{{ t("markdown_setting.XSS_setting_desc") }}</p>

          <label for="{{nameForIsXssEnabled}}" class="col-xs-4 control-label">
            {{ t('markdown_setting.Prevent XSS(Cross Site Scripting)') }}
          </label>

          <div class="col-xs-5">
            <div class="form-group">
              <div class="col-xs-6">
                <div class="btn-group btn-toggle" data-toggle="buttons">
                  <label class="btn btn-default btn-rounded btn-outline {% if isXssEnabled %}active{% endif %}" data-active-class="primary">
                    <input name="{{nameForIsXssEnabled}}" value="true" type="radio"
                        {% if isXssEnabled %}checked{% endif %}> ON
                  </label>
                  <label class="btn btn-default btn-rounded btn-outline {% if !isXssEnabled %}active{% endif %}" data-active-class="default">
                    <input name="{{nameForIsXssEnabled}}" value="false" type="radio"
                        {% if !isXssEnabled %}checked{% endif %}> OFF
                  </label>
                </div>
              </div>
            </div>

            <fieldset id="xss-hide-when-disabled" {% if !isXssEnabled %}style="display: none;"{% endif %}>
              {% set nameForXssOption = "markdownSetting[markdown:xss:option]" %}
              {% set xssOption = markdownSetting['markdown:xss:option'] %}

              <div class="form-group">
                <div class="col-xs-6">
                  <div class="btn-group btn-toggle" data-toggle="buttons">
                    <div>
                      <label data-active-class="primary">
                        <input name="{{nameForXssOption}}" value="1" type="radio"
                        {% if xssOption === 1 %}checked{% endif %}>
                        {{ t('markdown_setting.Ignore all tags') }}
                      </label>
                    </div>
                    <div>
                      <label data-active-class="primary">
                          <input name="{{nameForXssOption}}" value="2" type="radio"
                          {% if xssOption === 2 %}checked{% endif %}>
                        {{ t('markdown_setting.Recommended setting') }}<br>
                      </label>
                    </div>
                    <div>
                      <label data-active-class="primary">
                        <input name="{{nameForXssOption}}" value="3" type="radio"
                        {% if xssOption === 3 %}checked{% endif %}>
                        {{ t('markdown_setting.Custom Whitelist') }}
                      </label>
                    </div>
                  </div>
                </div>
              </div>

              <div class="form-group" id="xss2-hide-when-disabled" {% if !isXssEnabled || (xssOption !== 2) %}style="display: none;"{% endif %}>
                <div>
                  {{ t('markdown_setting.Tag names') }}
                  <div>
                    <textarea class="form-control" type="text" name="recommendedTags" rows="5" cols="40" readonly>{{ markdownSetting['markdown:xss:recommendedTagWhiteList'] }}</textarea>
                  </div>
                </div>
                <div>
                  {{ t('markdown_setting.Tag attributes') }}
                  <div>
                    <textarea class="form-control" name="recommendedAttrs" rows="5" cols="40" readonly>{{ markdownSetting['markdown:xss:recommendedAttrWhiteList'] }}</textarea>
                  </div>
                </div>
              </div>

              <div class="form-group" id="xss3-hide-when-disabled" {% if !isXssEnabled || (xssOption !== 3) %}style="display: none;"{% endif %}>
                <div>
                  {{ t('markdown_setting.Tag names') }}
                  <div>
                    <textarea class="form-control" type="text" name="markdownSetting[markdown:xss:tagWhiteList]" rows="5" cols="40" placeholder="e.g. iframe, script, video...">{{ markdownSetting['markdown:xss:tagWhiteList'] }}</textarea>
                    <input type="button" id="btn-import-tags" class="btn btn-default" value="{{ t('markdown_setting.import_recommended', 'tags') }}" />
                  </div>
                </div>
                <div>
                  {{ t('markdown_setting.Tag attributes') }}
                  <div>
                    <textarea class="form-control" name="markdownSetting[markdown:xss:attrWhiteList]" rows="5" cols="40" placeholder="e.g. src, id, name...">{{ markdownSetting['markdown:xss:attrWhiteList'] }}</textarea>
                    <input type="button" id="btn-import-attrs" class="btn btn-default" value="{{ t('markdown_setting.import_recommended', 'attributes') }}" />
                  </div>
                </div>
              </div>

            </fieldset>

            <div class="form-group my-3">
                <div class="col-xs-5">
                  <input type="hidden" name="_csrf" value="{{ csrf() }}">
                  <button type="submit" class="btn btn-primary">{{ t("Update") }}</button>
                </div>
              </div>
          </div>

        </fieldset>
      </form>

    </div>
  </div>

</div>

<script>
  $('input[name="markdownSetting[markdown:xss:isPrevented]"]').change(function() {
    if ($(this).val()) {
      $('#xss-hide-when-disabled').show(400);
      switch($('input[name="markdownSetting[markdown:xss:option]"]:checked').val()) {
        case '1':
          console.log(1)
          break;
        case '2':
          console.log(2)
          break;
        case '3':
          console.log(3)
          break;
        default:
      }
    }
    else {
      $('#xss-hide-when-disabled').hide(400);
    }
  });

  $('input[name="markdownSetting[markdown:xss:option]"]').change(function() {
    if ($(this).val() === "1") {
      $('#xss2-hide-when-disabled').hide(400);
      $('#xss3-hide-when-disabled').hide(400);
    }
    else if ($(this).val() === "2") {
      $('#xss2-hide-when-disabled').show(400);
      $('#xss3-hide-when-disabled').hide(400);
    }
    else {
      $('#xss3-hide-when-disabled').show(400);
      $('#xss2-hide-when-disabled').hide(400);
    }
  });

  $('#btn-import-attrs')
</script>
{% endblock content_main %}

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