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

127 lines
4.1 KiB
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 %}