display saved data on form

lib/models/config.js

@@ -107,7 +107,6 @@ module.exports = function(crowi) {
       'markdown:xss:tagWhiteList': [],
       'markdown:xss:attrWhiteList': [],
       'markdown:isEnabledLinebreaks': false,
-      'markdown:isEnabledPreventXss': false,
       'markdown:isEnabledLinebreaksInComments': true,
     };
   }

lib/views/admin/markdown.html

@@ -38,62 +38,63 @@
       {% 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>
+        <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>
-            <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 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>
-            <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 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>
-        </div>
-      </fieldset>
+        </fieldset>
       </form>
 
       <form action="/admin/markdown/xss-setting" method="post" class="form-horizontal" id="markdownSettingForm" role="form">
-        <fieldset>
-
-          {% set nameForIsXssEnabled = "markdownSetting[markdown:xss:isPrevented]" %}
+        {% set nameForIsXssEnabled = "markdownSetting[markdown:xss:isPrevented]" %}
+        {% set isXssEnabled = markdownSetting['markdown:xss:isPrevented'] %}
+        {% set xssOption = markdownSetting['markdown:xss:option'] %}
 
+        <fieldset>
           <legend>{{ t('markdown_setting.XSS_setting') }}</legend>
           <p class="well">{{ t("markdown_setting.XSS_setting_desc") }}</p>
 
@@ -105,11 +106,11 @@
             <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" data-active-class="primary">
+                  <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 true === isXssEnabled %}checked{% endif %}> ON
+                        {% if isXssEnabled %}checked{% endif %}> ON
                   </label>
-                  <label class="btn btn-default btn-rounded btn-outline {% if !isGoogleEnabled %}active{% endif %}" data-active-class="default">
+                  <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>
@@ -117,7 +118,7 @@
               </div>
             </div>
 
-            <fieldset id="xss-hide-when-disabled" {%if !isXssEnabled %}style="display: none;"{% endif %}>
+            <fieldset id="xss-hide-when-disabled" {% if !isXssEnabled %}style="display: none;"{% endif %}>
               {% set nameForXssOption = "markdownSetting[markdown:xss:option]" %}
 
               <div class="form-group">
@@ -126,21 +127,21 @@
                     <div>
                       <label data-active-class="primary">
                         <input name="{{nameForXssOption}}" value="1" type="radio"
-                        {% if !isXssEnabled %}checked{% endif %}>
+                        {% 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 true === isXssEnabled %}checked{% endif %}>
+                          {% 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 true === isXssEnabled %}checked{% endif %}>
+                        {% if xssOption === 3 %}checked{% endif %}>
                         {{ t('markdown_setting.Custom Whitelist') }}
                       </label>
                     </div>
@@ -148,76 +149,46 @@
                 </div>
               </div>
 
-              <div id="xss2-hide-when-disabled" {%if !isXssEnabled %}style="display: none;" {% endif %}>
+              <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 type="text" name="recommendedTags" rows="5" cols="40" readonly>span, iframe, input</textarea>
+                    <textarea type="text" name="recommendedTags" rows="5" cols="40" readonly>{{ markdownSetting['markdown:xss:tagWhiteList'] }}</textarea>
                   </div>
                 </div>
                 <div>
                   {{ t('markdown_setting.Tag attributes') }}
                   <div>
-                    <textarea name="recommendedAttrs" rows="5" cols="40" readonly>class, type, placeholder, name, required</textarea>
+                    <textarea name="recommendedAttrs" rows="5" cols="40" readonly>{{ markdownSetting['markdown:xss:attrWhiteList'] }}</textarea>
                   </div>
                 </div>
               </div>
 
-              <div id="xss3-hide-when-disabled" {%if !isXssEnabled %}style="display: none;" {% endif %}>
+              <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 type="text" name="markdownSetting[markdown:xss:tagWhiteList]" rows="5" cols="40" value="" placeholder="span, iframe, input"></textarea>
-                    <input type="button" class="btn btn-default" value="{{ t('markdown_setting.import_recommended', 'tags') }}" />
+                    <textarea 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 name="markdownSetting[markdown:xss:attrWhiteList]" rows="5" cols="40" value="" placeholder="class, type, placeholder, name, required"></textarea>
-                    <input type="button" class="btn btn-default" value="{{ t('markdown_setting.import_recommended', 'attrs') }}" />
+                    <textarea 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>
 
-          <script>
-            $('input[name="markdownSetting[markdown:xss:isPrevented]"]').change(function() {
-              const isEnabled = ($(this).val() === "true");
-
-              if (isEnabled) {
-                $('#xss-hide-when-disabled').show(400);
-              }
-              else {
-                $('#xss-hide-when-disabled').hide(400);
-              }
-            });
-
-            $('input[name="markdownSetting[markdown:xss:option]"]').change(function() {
-              const isEnabled = ($(this).val() === "1");
-              const isEnabled2 = ($(this).val() === "2");
-
-              if (isEnabled) {
-                $('#xss2-hide-when-disabled').hide(400);
-                $('#xss3-hide-when-disabled').hide(400);
-              }
-              else if (isEnabled2) {
-                $('#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);
-              }
-            });
-          </script>
+            </fieldset>
 
-          <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 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>
@@ -227,6 +198,39 @@
   </div>
 
 </div>
+
+<script>
+  $('input[name="markdownSetting[markdown:xss:isPrevented]"]').change(function() {
+    const isEnabled = ($(this).val() === "true");
+
+    if (isEnabled) {
+      $('#xss-hide-when-disabled').show(400);
+    }
+    else {
+      $('#xss-hide-when-disabled').hide(400);
+    }
+  });
+
+  $('input[name="markdownSetting[markdown:xss:option]"]').change(function() {
+    const isEnabled = ($(this).val() === "1");
+    const isEnabled2 = ($(this).val() === "2");
+
+    if (isEnabled) {
+      $('#xss2-hide-when-disabled').hide(400);
+      $('#xss3-hide-when-disabled').hide(400);
+    }
+    else if (isEnabled2) {
+      $('#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 %}