178 lines
5.9 KiB
HTML
178 lines
5.9 KiB
HTML
{% extends 'default.html' %}
|
|
|
|
{% block title %}
|
|
Authorization
|
|
{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
/* Inspired from https://stackoverflow.com/a/17541916/1428034 */
|
|
/* HIDE RADIO */
|
|
[type=radio] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
/* IMAGE STYLES */
|
|
[type=radio] + img {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* CHECKED STYLES */
|
|
[type=radio]:checked + img {
|
|
{#outline: 2px solid #f00;#} display: block;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
background-color: #0ff;
|
|
border: 3px solid #88d748;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block default_content %}
|
|
<form class="card" method="post" style="max-width: 40rem; margin: auto">
|
|
<div class="card-body p-6">
|
|
<!-- User has already authorized this client -->
|
|
{% if client_user %}
|
|
<div class="card-title">
|
|
You have already authorized <b>{{ client.name }}</b>.
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="mb-4">
|
|
<b>{{ client.name }}</b> has access to the following information:
|
|
</div>
|
|
<div>
|
|
{% for scope in client.get_scopes() %}
|
|
<div>
|
|
{% if scope == Scope.AVATAR_URL and user_info[scope.value] %}
|
|
avatar: <img src="{{ user_info[scope.value] }}" class="avatar">
|
|
{% elif scope == Scope.EMAIL %}
|
|
{{ scope.value }}:
|
|
<a href="mailto:{{ user_info[scope.value] }}">
|
|
{{ user_info[scope.value] }}
|
|
</a>
|
|
{% elif scope == Scope.NAME %}
|
|
{{ scope.value }}: <b>{{ user_info[scope.value] }}</b>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
{% if client.icon_id %}
|
|
<div class="text-center">
|
|
<img src="{{ client.get_icon_url() }}" class="small-client-icon">
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="text-center mt-4">
|
|
<b>{{ client.name }}</b> will receive the following info
|
|
<div>
|
|
<small class="font-weight-lighter">You can customize the information sent to this app.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4 md-4">
|
|
<div class="col-md-3 text-left">
|
|
<label style="padding-top: .5rem">Email</label>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<select class="custom-select custom-select" name="suggested-email">
|
|
<option selected value="{{ suggested_email }}">{{ suggested_email }}</option>
|
|
<option value="{{ personal_email }}">{{ personal_email }}</option>
|
|
{% for email in other_emails %}
|
|
<option value="{{ email }}">{{ email }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
|
|
{% if current_user.can_create_custom_email() %}
|
|
<div class="mt-2">OR</div>
|
|
<div style="display: flex; align-items: center" class="mt-2">
|
|
<input class="form-control"
|
|
pattern="[0-9|A-Z|a-z]{3,}"
|
|
style="flex-grow: 2" name="custom-email-prefix">
|
|
<input type="hidden" name="email-suffix" value="{{ email_suffix }}">
|
|
<div class="ml-2">
|
|
.{{ email_suffix }}@{{ EMAIL_DOMAIN }}
|
|
</div>
|
|
</div>
|
|
<small class="text-muted">
|
|
Custom alias use alphanumeric characters and must be at least 3 characters
|
|
</small>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4 md-4">
|
|
<div class="col-md-3 text-left">
|
|
<label style="padding-top: .5rem">Name</label>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<select class="custom-select custom-select" name="suggested-name">
|
|
<option selected value="{{ suggested_name }}">{{ suggested_name }}</option>
|
|
{% for name in other_names %}
|
|
<option value="{{ name }}">{{ name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
|
|
<div class="mt-2">OR</div>
|
|
<div class="mt-2">
|
|
<input class="form-control" name="custom-name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if current_user.profile_picture_id %}
|
|
<div class="row mt-4 md-4">
|
|
<div class="col-md-3 text-left">
|
|
<label style="padding-top: 2rem">Avatar</label>
|
|
</div>
|
|
<div class="col-md-9" style="display: flex; align-items: center">
|
|
<label>
|
|
<input type="radio" name="avatar-choice" value="real" checked>
|
|
<img src="{{ current_user.profile_picture_url() }}" class="small-profile-picture">
|
|
</label>
|
|
|
|
<div style="margin: 0 1rem">OR</div>
|
|
|
|
<label>
|
|
<input type="radio" name="avatar-choice" value="default">
|
|
<img src="{{ url_for('static', filename='default-avatar.png') }}" class="small-profile-picture">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if client_user %}
|
|
<div class="form-footer">
|
|
<div class="btn-group" role="group" aria-label="Basic example">
|
|
<button type="submit" name="button" value="allow"
|
|
class="btn btn-success">Allow
|
|
</button>
|
|
|
|
<a class="btn btn-light" href="javascript:history.back()">
|
|
Cancel
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="form-footer">
|
|
<div class="btn-group btn-block" role="group" aria-label="Basic example">
|
|
<button type="submit" name="button" value="allow"
|
|
class="btn btn-success">Allow
|
|
</button>
|
|
|
|
<button type="submit" name="button" value="deny"
|
|
class="btn btn-light">Deny
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</form>
|
|
{% endblock %} |