weseek__growi/lib/views/admin/widget/passport/twitter.html

<form action="/_api/admin/security/passport-twitter" method="post" class="form-horizontal passportStrategy" id="twitterSetting" role="form"
    {% if isRestartingServerNeeded %}style="opacity: 0.4;"{% endif %}>
  <legend>{{ t("security_setting.OAuth.Twitter.name") }}{{ t("security_setting.configuration") }}</legend>
  <p class="well alert-anchor">{{ t("security_setting.OAuth.connect_api_manager", "https://github.com/settings/developers", "GitHub Developer Settings") }}</p>
  {% set nameForIsTwitterEnabled = "settingForm[security:passport-twitter:isEnabled]" %}
  {% set isTwitterEnabled = settingForm['security:passport-twitter:isEnabled'] %}
  <div class="form-group">
    <label for="{{nameForIsTwitterEnabled}}" class="col-xs-3 control-label">{{ t("security_setting.OAuth.Twitter.name") }}</label>
    <div class="col-xs-6">
      <div class="btn-group btn-toggle" data-toggle="buttons">
        <label class="btn btn-default btn-rounded btn-outline {% if isTwitterEnabled %}active{% endif %}" data-active-class="primary">
          <input name="{{nameForIsTwitterEnabled}}" value="true" type="radio"
              {% if true === isTwitterEnabled %}checked{% endif %}> ON
        </label>
        <label class="btn btn-default btn-rounded btn-outline {% if !isTwitterEnabled %}active{% endif %}" data-active-class="default">
          <input name="{{nameForIsTwitterEnabled}}" value="false" type="radio"
              {% if !isTwitterEnabled %}checked{% endif %}> OFF
        </label>
      </div>
    </div>
  </div>
  <fieldset id="passport-twitter-hide-when-disabled" {%if !isTwitterEnabled %}style="display: none;"{% endif %}>
{# Help Section #}
<hr>
<h4>
  <i class="fa fa-question-circle" aria-hidden="true"></i>
  <a href="#collapseHelpForTwitterOauth" data-toggle="collapse">How to configure Twitter OAuth?</a>
</h4>
<ol id="collapseHelpForTwitterOauth" class="collapse">
  <li>{{ t("security_setting.OAuth.Twitter.register_1", "https://console.cloud.google.com/apis/credentials", "Google Cloud Platform API Manager") }}</li>
  <li>{{ t("security_setting.OAuth.Twitter.register_2") }}</li>
  <li>{{ t("security_setting.OAuth.Twitter.register_3") }}</li>
  <li>{{ t("security_setting.OAuth.Twitter.register_4", "https://${growi.host}/passport/google/callback", "${growi.host}") }}</li>
  <li>{{ t("security_setting.OAuth.Twitter.register_5") }}</li>
</ol>


    <div class="form-group">
      <label for="settingForm[security:passport-twitter: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[security:passport-twitter:clientId]" value="{{ settingForm['security:passport-twitter:clientId'] || '' }}">
      </div>
    </div>

    <div class="form-group">
      <label for="settingForm[security:passport-twitter: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[security:passport-twitter:clientSecret]" value="{{ settingForm['security:passport-twitter:clientSecret'] || '' }}">
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-6 col-xs-offset-3">
        <div class="checkbox checkbox-info">
          <input type="checkbox" id="bindByUserName-Twitter" name="settingForm[security:passport-twitter:isSameUsernameTreatedAsIdenticalUser]" value="1"
              {% if settingForm['security:passport-twitter:isSameUsernameTreatedAsIdenticalUser'] %}checked{% endif %} />
          <label for="bindByUserName-Twitter">
            {{ t("security_setting.Treat username matching as identical", "username") }}
          </label>
          <p class="help-block">
            <small>
              {{ t("security_setting.Treat username matching as identical_warn", "username") }}
            </small>
          </p>
        </div>
      </div>
    </div>

        <div class="form-group">
      <label for="settingForm[security:passport-twitter:callbackUrl]" class="col-xs-3 control-label">{{ t("security_setting.callback_URL") }}</label>
      <div class="col-xs-6">
        <input class="form-control" type="text" name="settingForm[security:passport-twitter:callbackUrl]" value="{{ settingForm['security:passport-twitter:callbackUrl'] || '' }}">
        <p class="help-block">
          <small>
            {{ t("security_setting.Use env var if empty", "OAUTH_TWITTER_CALLBACK_URL") }}
          </small>
        </p>
      </div>
    </div>


  </fieldset>

  <div class="form-group" id="btn-update">
    <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>

</form>

{# Help Section #}
<hr>
<h4>
  <i class="fa fa-question-circle" aria-hidden="true"></i>
  <a href="#collapseHelpForTwitterOauth" data-toggle="collapse">How to configure Google OAuth?</a>
</h4>
<ol id="collapseHelpForTwitterOauth" class="collapse">
  <li>{{ t("security_setting.OAuth.Twitter.register_1", "https://console.cloud.google.com/apis/credentials", "Google Cloud Platform API Manager") }}</li>
  <li>{{ t("security_setting.OAuth.Twitter.register_2") }}</li>
  <li>{{ t("security_setting.OAuth.Google.register_3") }}</li>
  <li>{{ t("security_setting.OAuth.Google.register_4", "https://${growi.host}/passport/google/callback", "${growi.host}") }}</li>
  <li>{{ t("security_setting.OAuth.Google.register_5") }}</li>
</ol>


<script>
  $('input[name="settingForm[security:passport-twitter:isEnabled]"]').change(function() {
      const isEnabled = ($(this).val() === "true");

      if (isEnabled) {
        $('#passport-twitter-hide-when-disabled').show(400);
      }
      else {
        $('#passport-twitter-hide-when-disabled').hide(400);
      }
    });
</script>