weseek__growi/lib/views/admin/security.html

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

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

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

{% block content_main %}
<div class="content-main admin-security">
  <div class="row">
    <div class="col-md-3">
      {% include './widget/menu.html' with {current: 'security'} %}
    </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="/_api/admin/security/general" method="post" class="form-horizontal" id="generalSetting" role="form">
        <fieldset>
        <legend class="alert-anchor">{{ t('security_setting.Security settings') }}</legend>

          <div class="form-group">
            <label for="settingForm[security:registrationMode]" class="col-xs-3 control-label">{{ t('Basic authentication') }}</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="">{{ t('Password') }}</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">
                {{ t("security_setting.common_authentication") }}<br>
                {{ t("security_setting.without_encryption") }}<br>
              </p>
            </div>
          </div>

          <div class="form-group">
            <label for="settingForm[security:restrictGuestMode]" class="col-xs-3 control-label">{{ t('Guest users access') }}</label>
            <div class="col-xs-6">
              <select class="form-control selectpicker" name="settingForm[security:restrictGuestMode]" value="{{ settingForm['security:restrictGuestMode'] }}">
                {% for modeValue, modeLabel in consts.restrictGuestMode %}
                <option value="{{ t(modeValue) }}" {% if modeValue == settingForm['security:restrictGuestMode'] %}selected{% endif %} >{{ t(modeLabel) }}</option>
                {% endfor %}
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="settingForm[security:registrationMode]" class="col-xs-3 control-label">{{ t('Register limitation') }}</label>
            <div class="col-xs-6">
              <select class="form-control selectpicker" name="settingForm[security:registrationMode]" value="{{ settingForm['security:registrationMode'] }}">
                {% for modeValue, modeLabel in consts.registrationMode %}
                <option value="{{ t(modeValue) }}" {% if modeValue == settingForm['security:registrationMode'] %}selected{% endif %} >{{ t(modeLabel) }}</option>
                {% endfor %}
              </select>
              <p class="help-block">{{ t('The contents entered here will be shown in the header etc') }}</p>
            </div>
          </div>

          <div class="form-group">
            <label for="settingForm[security:registrationWhiteList]" class="col-xs-3 control-label">{{ t('The whitelist of registration permission E-mail address') }}</label>
            <div class="col-xs-8">
              <textarea class="form-control" type="textarea" name="settingForm[security:registrationWhiteList]" placeholder="{{ t('security_setting.example') }}: @growi.org">{{ settingForm['security:registrationWhiteList']|join('&#13')|raw }}</textarea>
              <p class="help-block">{{ t("security_setting.restrict_emails") }}{{ t("security_setting.for_instance") }}<code>@growi.org</code>{{ t("security_setting.only_those") }}<br>
              {{ t("security_setting.insert_single") }}</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>

      <form action="/_api/admin/security/mechanism" method="post" class="form-horizontal mt-5" id="mechanismSetting" role="form">
        <fieldset>
          <legend class="alert-anchor">{{ t('Selecting authentication mechanism') }}</legend>
          <p class="alert alert-info"><b>{{ t("security_setting.note") }}: </b>{{ t("security_setting.require_server_restart_change_auth") }}</p>
          <div class="form-group">
            <div class="col-xs-6">
              <h4>
                <div class="radio radio-primary">
                  <input type="radio" id="radioPassportAuthMech" name="settingForm[security:isEnabledPassport]" value="true"
                      {% if true === settingForm['security:isEnabledPassport'] %}checked="checked"{% endif %}>
                  <label for="radioPassportAuthMech">
                    <a href="http://passportjs.org/" target="_blank">
                      <img src="/images/admin/security/passport-logo.svg" class="passport-logo"> Passport
                    </a> {{ t("security_setting.auth_mechanism") }} <small class="text-success">({{ t("security_setting.recommended") }})</small>
                  </label>
                </div>
              </h4>
              <ul>
                <li>{{ t("security_setting.username_email_password") }}</li>
                <li>{{ t("security_setting.ldap_auth") }}</li>
                <li>{{ t("security_setting.google_auth2") }}</li>
                <li>{{ t("security_setting.github_auth2") }}</li>
                <li class="text-muted">(TBD) <del>{{ t("security_setting.facebook_auth2") }}</del></li>
                <li class="text-muted">(TBD) <del>{{ t("security_setting.twitter_auth2") }}</del></li>
              </ul>
            </div>
            <div class="col-xs-6">
              <h4>
                <div class="radio radio-primary">
                  <input type="radio" id="radioCrowiAuthMech" name="settingForm[security:isEnabledPassport]" value="false"
                      {% if !settingForm['security:isEnabledPassport'] %}checked="checked"{% endif %}>
                  <label for="radioCrowiAuthMech">
                    Crowi Classic {{ t("security_setting.auth_mechanism") }}
                  </label>
                </div>
              </h4>
              <ul>
                <li>{{ t("security_setting.username_email_password") }}</li>
                <li class="text-muted">
                  {{ t("security_setting.google_auth2") }}
                  <ul><li>{{ t("security_setting.google_auth2_by_crowi_desc") }}</li></ul>
                </li>
              </ul>
            </div>
          </div>

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


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

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

        {% set isOfficialConfigurationVisible = !isEnabledPassport() %}
        <div class="official-crowi-auth-settings" {% if !isOfficialConfigurationVisible %}style="display: none;"{% endif %}>
          {% set isRestartingServerNeeded = isPassportLocalStrategySetup() %}
          <p class="alert alert-warning"
              {% if !isRestartingServerNeeded %}style="display: none;"{% endif %}>
            <b>
              <i class="icon-exclamation" aria-hidden="true"></i>
              {{ t("security_setting.require_server_restart") }}
            </b>
            {{ t("security_setting.server_on_passport_auth") }}
          </p>

          <form action="/_api/admin/security/google" method="post" class="form-horizontal" id="googleSetting" role="form"
              {% if isRestartingServerNeeded %}style="opacity: 0.4;"{% endif %}>

            <fieldset>
              <h4>{{ t("security_setting.google_setting") }}</h4>
              <p class="well alert-anchor">
                {{ t("security_setting.connect_api_manager") }}
              </p>

              <ol class="help-block">
                <li>{{ t("security_setting.access_api_manager", "https://console.cloud.google.com/apis/credentials", "API Manager") }}</li>
                <li>{{ t("security_setting.create_project") }}</li>
                <li>{{ t("security_setting.create_auth_to_oauth") }}</li>
                <ol>
                  <li>{{ t("security_setting.select_webapp") }}</li>
                  <li>{{ t("security_setting.change_redirect_url") }}</li>
                </ol>
              </ol>

              <div class="form-group">
                <label for="settingForm[google:clientId]" class="col-xs-3 control-label">{{ t("security_setting.clientID") }}</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">{{ t("security_setting.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">{{ t('Update') }}</button>
                </div>
              </div>

            </fieldset>
          </form>
        </div>

        {#
         # passport settings nav
         #}
        {% set isPassportConfigurationVisible = settingForm['security:isEnabledPassport'] %}
        <div class="passport-settings" {% if !isPassportConfigurationVisible %}style="display: none;"{% endif %}>

          {% set isRestartingServerNeeded = !isPassportLocalStrategySetup() %}
          <p class="alert alert-warning"
              {% if !isRestartingServerNeeded %}style="display: none;"{% endif %}>
            <b>
              <i class="icon-exclamation" aria-hidden="true"></i>
              {{ t("security_setting.require_server_restart") }}
            </b>
            {{ t("security_setting.server_on_crowi_auth") }}
          </p>
          <ul class="nav nav-tabs" role="tablist" {% if isRestartingServerNeeded %}style="opacity: 0.4;"{% endif %}>
            <li class="active">
              <a href="#passport-ldap" data-toggle="tab" role="tab"><i class="fa fa-sitemap"></i> LDAP</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 class="tbd">
              <a href="#passport-facebook" data-toggle="tab" role="tab"><i class="fa fa-facebook"></i> (TBD) Facebook</a>
            </li>
            <li class="tbd">
              <a href="#passport-twitter" data-toggle="tab" role="tab"><i class="fa fa-twitter"></i> Twitter</a>
            </li>
          </ul>

          <div class="tab-content p-t-10" {% if isRestartingServerNeeded %}style="opacity: 0.4;"{% endif %}>
            <div id="passport-ldap" class="tab-pane active" role="tabpanel" >
              {% include './widget/passport/ldap.html' with { settingForm: settingForm } %}
            </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, #googleSetting, #mechanismSetting, #githubSetting, #twitterSetting').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 + ' .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;
      });
    });

    // switch display according to on / off of radio buttons
    $('input[name="settingForm[security:isEnabledPassport]"]:radio').change(function() {
      const isEnabledPassport = ($(this).val() === "true");

      if (isEnabledPassport) {
        $('.official-crowi-auth-settings').hide(400);
        $('.passport-settings').show(400);
      }
      else {
        $('.official-crowi-auth-settings').show(400);
        $('.passport-settings').hide(400);
      }
    });
  </script>
</div>
{% endblock content_main %}

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