app-MAIL-temp/templates/developer/client_details/oauth_setting.html

{% extends "developer/client_details/base.html" %}

{% set client_details_page = "oauth_setting" %}
{% block client_details_content %}

  <form method="post">
    {{ form.csrf_token }}
    <h1 class="h2">OAuth2 Settings</h1>
    <div class="form-group">
      <label class="form-label">AppID / OAuth2 Client ID</label>
      <div class="input-group mt-2">
        <input disabled
               type="text"
               value="{{ client.oauth_client_id }}"
               class="form-control">
        <span class="input-group-append">
          <button data-clipboard-text="{{ client.oauth_client_id }}"
                  class="clipboard btn btn-primary"
                  type="button">
            <i class="fe fe-clipboard"></i>
          </button>
        </span>
      </div>
    </div>
    <div class="form-group">
      <label class="form-label">AppSecret / OAuth2 Client Secret</label>
      <div class="input-group mt-2">
        <input disabled
               type="password"
               value="{{ client.oauth_client_secret }}"
               class="form-control">
        <span class="input-group-append">
          <button data-clipboard-text="{{ client.oauth_client_secret }}"
                  class="clipboard btn btn-primary"
                  type="button">
            <i class="fe fe-clipboard"></i>
          </button>
        </span>
      </div>
    </div>
    <hr />
    <div class="form-group">
      <label class="form-label">Authorized Redirect URIs</label>
      <small class="text-muted">
        By default <b>localhost</b> is whitelisted.
        <br />
        A <b>redirect_uri</b> must be <b>HTTPS</b> for security reason.
      </small>
      {% if not client.redirect_uris %}

        <div class="alert alert-warning alert-dismissible fade show mb-4"
             role="alert">
          <p>
            You haven't added any
            <a href="https://www.oauth.com/oauth2-servers/redirect-uris/">redirect_uri</a>
            ,
            that is the url that will receive the <b>code</b> or <b>access-token</b> in OAuth2 flow.
          </p>
          <p>
            There's NO NEED to add <em>http://localhost:*</em> as by default,
            SimpleLogin <b>whitelists</b> localhost (unlike Facebook).
          </p>
          <p>
            You DO need to add your <b>redirect_uri</b> once your app goes live (i.e. deployed on production).
          </p>
          <p>
            The <b>redirect_uri</b> needs to be <b>HTTPS</b> for security reason.
          </p>
          <p>
            Start by adding your first <b>redirect_uri</b> here 👇
          </p>
        </div>
      {% endif %}
      {% for redirect_uri in client.redirect_uris %}

        <div class="input-group mt-2">
          <input type="url"
                 name="uri"
                 class="form-control"
                 value="{{ redirect_uri.uri }}"
                 required
                 pattern="^https:\/\/.*"
                 title="redirect_uri must be https">
          <span class="input-group-append">
            <button class="remove-uri btn btn-primary" type="button">
              <i class="fe fe-x"></i>
            </button>
          </span>
        </div>
      {% endfor %}
      <div id="new-uris">
        <!-- New uri will be put here -->
      </div>
      <button type="button" id="create-new-uri" class="mt-2 btn btn-secondary">Add new uri</button>
    </div>
    <button type="submit" class="btn btn-primary">Update</button>
  </form>
  <!-- template for new uri -->
  <div class="input-group mt-2" id="hidden-uri" style="display: none">
    <input type="url"
           name="uri"
           class="form-control"
           required
           pattern="^https:\/\/.*"
           title="redirect_uri must be https">
    <span class="input-group-append">
      <button class="remove-uri btn btn-primary" type="button">
        <i class="fe fe-x"></i>
      </button>
    </span>
  </div>
{% endblock %}
{% block script %}

  <script>
    $("#create-new-uri").on("click", function (e) {
      var clone = $("#hidden-uri").clone(true, true); // (true, true) to clone withDataAndEvents, deepWithDataAndEvents
      clone.removeAttr("id");

      $("#new-uris").append(clone);
      clone.show();
    });

    $(".remove-uri").click(function (e) {
      var currentElement = $(this);
      currentElement.parent().parent().remove();
    });

  </script>
{% endblock %}