lemoncurry/lemonauth/jinja2/lemonauth/indie.html

{% extends 'lemoncurry/layout.html' %}

{% block styles %}
<link rel="stylesheet" type="text/stylus" href="{{ static('lemonauth/css/indie.styl') }}">
{% endblock %}

{% block main %}
      <div class="container">
        <form class="card" method="post" action="{{ url('lemonauth:indie_approve') }}">
          <h4 class="card-header h-x-app">
            {% if app %}
            {% if app.logo is defined %}
            <img class="u-logo" src="{{ app.logo[0] }}" alt="{{ app.name[0] }}" />
            {% endif %}
            sign in to <span class="p-name">{{ app.name[0] }}</span> (<a class="u-url code" href="{{ params.client_id }}">{{ params.client_id }}</a>)?
            {% else %}
            sign in to <a class="u-url p-name code" href="{{ params.client_id }}">{{ params.client_id }}</a>?
            {% endif %}
            {% if verified %}
            <span data-tooltip data-tippy-theme="dark success" data-tippy-html="#verified-success">
              <i class="fas fa-check-circle verified-success"></i>
            </span>
            {% else %}
            <span data-tooltip data-tippy-theme="dark warning" data-tippy-html="#verified-warning">
              <i class="fas fa-question-circle verified-warning"></i>
            </span>
            {% endif %}
          </h4>

          <div class="card-body">
            <p class="card-text">do you want to confirm your identity, <a class="code" href="{{ me }}">{{ me }}</a>, with this app?</p>
            {% if params.response_type == 'code' %}
            <p class="card-text">additionally, this app is requesting the following <i>scopes</i> - you can edit the scopes that will be granted to the app, if you wish</p>
            <div class="card-text form-group">
              {% for scope in scopes %}
              <div class="form-check">
                <input class="form-check-input" id="scopes-{{ scope }}" name="scope" type="checkbox" checked value="{{ scope }}" />
                <label class="form-check-label" for="scopes-{{ scope }}">{{ scope }}</label>
              </div>
              {% endfor %}
            </div>
            {% endif %}
            <p class="card-text"><small>you will be redirected to <a class="code" href="{{ redirect_uri }}">{{ redirect_uri }}</a> after authorising this app</small></p>
          </div>

          <div class="card-footer">
            <button class="btn btn-success" type="submit">
              <i class="fas fa-check"></i>
              approve
            </button>
          </div>

          {{ csrf_input }}
          <input type="hidden" name="me" value="{{ me }}">
          <input type="hidden" name="client_id" value="{{ params.client_id }}">
          <input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
          {% if params.state %}
          <input type="hidden" name="state" value="{{ params.state }}">
          {% endif %}
          <input type="hidden" name="response_type" value="{{ params.response_type }}">
        </form>
      </div>

      <div id="verified-success" hidden>
        this client has been <strong>verified</strong> using <code>{{ '<link rel="redirect_uri">' | escape }}</code> - they are who they claim to be!
      </div>
      <div id="verified-warning" hidden>
        this client could <strong>not</strong> be verified using <code>{{ '<link rel="redirect_uri">' | escape }}</code> - check the redirect uri carefully yourself!
      </div>
{% endblock %}

{% block foot %}
<script type="text/javascript">
  tippy('[data-tippy-theme]', {
    arrow: true,
    content: function(element) {
      return document.querySelector(element.getAttribute('data-tippy-html')).innerHTML;
    }
  });
</script>
{% endblock %}