weseek__growi/lib/views/me/external-accounts.html

{% extends '../layout/2column.html' %}

{% block html_title %}{{ t('Password Settings') }} · {{ path }}{% endblock %}

{% block content_head %}
<div class="header-wrap">
  <header id="page-header">
    <h1 class="title" id="">{{ t('User Settings') }}</h1>
  </header>
</div>
{% endblock %}

{% block content_main %}
<div class="content-main">

  <ul class="nav nav-tabs">
    <li><a href="/me"><i class="fa fa-gears"></i> {{ t('User Information') }}</a></li>
    <li class="active"><a href="/me/external-accounts"><i class="fa fa-user-plus"></i> {{ t('External Accounts') }}</a></li>
    <li><a href="/me/password"><i class="fa fa-key"></i> {{ t('Password Settings') }}</a></li>
    <li><a href="/me/apiToken"><i class="fa fa-rocket"></i> {{ t('API Settings') }}</a></li>
  </ul>

  <div class="tab-content">

  {% set error = req.flash('errorMessage') %}
  {% if error.length %}
  {% for e in error %}
  <div class="alert alert-danger">
    <b>Server Error occured:</b><br>
    {{ e }}
  </div>
  {% endfor %}
  {% endif %}

  {% set warn = req.flash('warningMessage') %}
  {% if warn.length %}
  {% for w in warn %}
  <div class="alert alert-warning">
    {{ w }}
  </div>
  {% endfor %}
  {% endif %}

  {% set message = req.flash('successMessage') %}
  {% if message.length %}
  <div class="alert alert-success">
    <b>{{ message }}</b>
  </div>
  {% endif %}



  <legend style="line-height: 1.7em;">
    <button class="btn btn-default btn-sm pull-right" data-target="#create-external-account" data-toggle="modal">
      <i class="fa fa-plus-circle" aria-hidden="true"></i>
      Add
    </button>
    {{ t('External Accounts') }}
  </legend>

  <div class="row">
    <div class="col-md-12">
      <table class="table table-hover table-striped table-bordered table-user-list">
        <thead>
          <tr>
            <th width="120px">Authentication Provider</th>
            <th>
              <code>accountId</code>
            </th>
            <th width="200px">{{ t('Created') }}</th>
            <th width="150px">{{ t('Admin') }}</th>
          </tr>
        </thead>
        <tbody>
          {% for account in externalAccounts %}
          <tr>
            <td>{{ account.providerType }}</td>
            <td>
              <strong>{{ account.accountId }}</strong>
            </td>
            <td>{{ account.createdAt|date('Y-m-d', account.createdAt.getTimezoneOffset()) }}</td>
            <td class="text-center">
              <button class="btn btn-default btn-sm btn-danger"
                  data-toggle="modal" data-target="#diassociate-external-account" data-provider-type="{{ account.providerType }}" data-account-id="{{ account.accountId }}">
                <i class="fa fa-unlink"></i>
                {{ t('Diassociate') }}
              </button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {# modal #}
  <style>
    .modal.create-external-account .modal-dialog {
      width: 750px;
    }
  </style>
  <div class="modal create-external-account" id="create-external-account">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">{{ t('Create External Account') }}</h4>
        </div>

        <div class="modal-body">

          <ul class="nav nav-tabs passport-settings" role="tablist">
            <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 OAuth</a>
            </li>
            <li>
              <a href="#passport-facebook" data-toggle="tab" role="tab"><i class="fa fa-facebook"></i> Facebook</a>
            </li>
            <li>
              <a href="#passport-twitter" data-toggle="tab" role="tab"><i class="fa fa-twitter"></i> Twitter</a>
            </li>
            <li>
              <a href="#passport-github" data-toggle="tab" role="tab"><i class="fa fa-github"></i> Github</a>
            </li>
          </ul>

          <div class="tab-content passport-settings">
            <div id="passport-ldap" class="tab-pane active" role="tabpanel" >
              <div id="form-box">
                <form id="formLdapAssociation" method="post" class="form-horizontal" role="form">
                  <fieldset>
                    <div class="form-group">
                      <label for="username" class="col-xs-3 control-label">{{ t('Username') }}</label>
                      <div class="col-xs-6">
                        <input class="form-control" name="loginForm[username]">
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="password" class="col-xs-3 control-label">{{ t('Password') }}</label>
                      <div class="col-xs-6">
                        <input class="form-control col-xs-4" type="password" name="loginForm[password]">
                      </div>
                    </div>

                    <div class="form-group">
                      <div class="col-xs-12 text-right">
                        <button type="button" class="btn btn-default" onclick="testAssociateLdap()">{{ t('Test') }}</button>
                        <button type="button" class="btn btn-primary" onclick="associateLdap()">{{ t('Add') }}</button>
                      </div>
                    </div>

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

            <div id="passport-google-oauth" class="tab-pane" role="tabpanel">
              (TBD)
            </div>

            <div id="passport-facebook" class="tab-pane" role="tabpanel">
              (TBD)
            </div>

            <div id="passport-twitter" class="tab-pane" role="tabpanel">
              (TBD)
            </div>

            <div id="passport-github" class="tab-pane" role="tabpanel">
              (TBD)
            </div>

          </div><!-- /.tab-content -->

        </div><!-- /.modal-body -->

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->

    <script>
      /**
       * associate (submit the form)
       */
      function associateLdap() {
        var $form = $('#formLdapAssociation');
        var $action = '/me/external-accounts/associateLdap';
        $form.attr('action', $action);
        $form.submit();
      }

      /**
       * test association (ajax)
       */
      function testAssociateLdap() {
        function showMessage(formId, msg, status) {
          $('#' + formId + ' > .alert').remove();

          var $message = $('<p class="alert"></p>');
          $message.addClass('alert-' + status);
          $message.html(msg.replace('\n', '<br>'));
          $message.insertBefore('#' + formId);

          if (status == 'success') {
            setTimeout(function()
            {
              $message.fadeOut({
                complete: function() {
                  $message.remove();
                }
              });
            }, 5000);
          }
        }

        var $form = $('#formLdapAssociation');
        var $action = '/_api/me/external-accounts/testAssociateLdap';
        var $id = $form.attr('id');
        var $button = $('button', this);
        $button.attr('disabled', 'disabled');

        var jqxhr = $.post($action, $form.serialize(), function(data)
          {
            if (!data.status) {
              showMessage($id, 'data.status not found', 'danger');
            }
            else {
              showMessage($id, data.message, data.status);
            }
          })
          .fail(function() {
            showMessage($id, 'エラーが発生しました', 'danger');
          })
          .always(function() {
            $button.prop('disabled', false);
          });
          return false;
      }
    </script>

  </div><!-- /.modal -->

  <div class="modal diassociate-external-account" id="diassociate-external-account">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">{{ t('Diassociate External Account') }}</h4>
        </div>

        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <p><b>
                Are you sure to diassociate the
                <span class="diassociate-provider-type"></span> account
                <code class="diassociate-account-id"></code>?
              </b></p>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <form action="/me/external-accounts/disassociate" method="post">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <input type="hidden" name="providerType">
            <input type="hidden" name="accountId">
            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">
              {{ t('Cancel') }}
            </button>
            <button type="submit" class="btn btn-sm btn-danger">
              <i class="fa fa-unlink"></i>
              {{ t('Diassociate') }}
            </button>
          </form>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->

    <script>
      $('#diassociate-external-account').on('show.bs.modal', function (event) {
        var modal = $(this);
        var button = $(event.relatedTarget); // Button that triggered the modal
        // get data-*
        var providerType = button.data('provider-type');
        var accountId = button.data('account-id');
        // set labels
        modal.find('.diassociate-provider-type').text(providerType);
        modal.find('.diassociate-account-id').text(accountId);
        // set hidden inputs
        modal.find('input:hidden[name="providerType"]').val(providerType);
        modal.find('input:hidden[name="accountId"]').val(accountId);
      })
    </script>
  </div><!-- /.modal -->

</div>
{% endblock content_main %}

{% block content_footer %}
{% endblock %}

{% block footer %}
{% endblock %}