weseek__growi/lib/views/admin/security.html

{% 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">
  <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>基本設定</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:restrictGuestMode]" class="col-xs-3 control-label">ゲストユーザーのアクセス</label>
            <div class="col-xs-6">
              <select class="form-control" name="settingForm[security:restrictGuestMode]" value="{{ settingForm['security:restrictGuestMode'] }}">
                {% for modeValue, modeLabel in consts.restrictGuestMode %}
                <option value="{{ modeValue }}" {% if modeValue == settingForm['security:restrictGuestMode'] %}selected{% endif %} >{{ modeLabel }}</option>
                {% endfor %}
              </select>
            </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/security/mechanism" method="post" class="form-horizontal" id="mechanismSetting" role="form">
        <fieldset>
        <legend>認証機構設定</legend>
          <div class="form-group">
            <div class="col-xs-6">
              <h4>
                <input type="radio" name="settingForm[security:isEnabledPassport]" value="false"
                    {% if !settingForm['security:isEnabledPassport'] %}checked="checked"{% endif %}>
                Official Crowi authentication mechanism
              </h4>
              <ul>
                <li>Username, E-mail and Password authentication</li>
                <li>Google OAuth2 authentication</li>
              </ul>
            </div>
            <div class="col-xs-6">
              <h4>
                <input type="radio" name="settingForm[security:isEnabledPassport]" value="true"
                    {% if true === settingForm['security:isEnabledPassport'] %}checked="checked"{% endif %}>
                <a href="http://passportjs.org/">
                  <img src="/images/admin/security/passport-logo.svg" class="passport-logo"> Passport
                </a> authentication mechanism <small class="text-success">(Recommended)</small>
              </h4>
              <ul>
                <li>Username, E-mail and Password authentication</li>
                <li class="text-muted">(TBD) <del>LDAP authentication</del></li>
                <li class="text-muted">(TBD) <del>Google OAuth2 authentication</del></li>
                <li class="text-muted">(TBD) <del>Facebook OAuth2 authentication</del></li>
                <li class="text-muted">(TBD) <del>Twitter OAuth authentication</del></li>
                <li class="text-muted">(TBD) <del>Github OAuth2 authentication</del></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">更新</button>
            </div>
          </div>
      </form>

      <form action="/_api/admin/security/google" method="post" class="form-horizontal" id="googleSetting" role="form">
        <fieldset>
          <h3>Google 設定</h3>
          <p class="well">
            Google Cloud Platform の <a href="https://console.cloud.google.com/apis/credentials">API Manager</a>
            から OAuth2 Client ID を作成すると、Google アカウントにコネクトして登録やログインが可能になります。
          </p>

          <ol class="help-block">
            <li><a href="https://console.cloud.google.com/apis/credentials">API Manager</a> へアクセス</li>
            <li>プロジェクトを作成していない場合は作成してください</li>
            <li>「認証情報を作成」-> OAuthクライアントID</li>
            <ol>
              <li>「ウェブアプリケーション」を選択</li>
              <li>承認済みのリダイレクトURLに、 <code>https://${crowi.host}/google/callback</code> を入力<br>
              (<code>${crowi.host}</code>は環境に合わせて変更してください)</li>
            </ol>
          </ol>

          <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>

    </div>
  </div>

  <script>
    $('#generalSetting, #googleSetting, #mechanismSetting').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;
      });
    });

  </script>
</div>
{% endblock content_main %}

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