241 lines
8.7 KiB
HTML
241 lines
8.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Shout.dev: Team Members{% endblock %}
|
|
|
|
{% block main %}
|
|
{% include "breadcrumbs.html" %}
|
|
<main class="container mt-5">
|
|
<section class="mb-4">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h1>Team Members</h1>
|
|
<div>
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-primary"
|
|
type="button"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#invite-modal"
|
|
>
|
|
Invite
|
|
</button>
|
|
<div
|
|
class="modal fade"
|
|
id="invite-modal"
|
|
tabindex="-1"
|
|
aria-labelledby="invite-modal-label"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<form
|
|
method="post"
|
|
action="{{ breadcrumbs.join("../invite-team-member") }}"
|
|
>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="invite-modal-label">
|
|
Invite to Team
|
|
</h1>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Cancel"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="invite-modal-email-input" class="form-label">
|
|
Email address
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="email"
|
|
inputmode="email"
|
|
class="form-control"
|
|
id="invite-modal-email-input"
|
|
aria-describedby="invite-modal-email-help"
|
|
>
|
|
<div id="invite-modal-email-help" class="form-text">
|
|
Invite link will be sent to this email address. The
|
|
recipient will need to open the link and create an
|
|
account (if they have not already) in order to join the
|
|
team.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">Invite</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="mb-3">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Email</th>
|
|
<th>Role</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for invitation in invitations %}
|
|
<tr>
|
|
<td>{{ invitation.invitation.email }}</td>
|
|
<td>Invited</td>
|
|
<td>
|
|
<button
|
|
class="btn btn-sm btn-outline-danger"
|
|
type="button"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#confirm-remove-invite-modal-{{ invitation.invitation.id }}"
|
|
>
|
|
Remove
|
|
</button>
|
|
<div
|
|
class="modal fade"
|
|
id="confirm-remove-invite-modal-{{ invitation.invitation.id }}"
|
|
tabindex="-1"
|
|
aria-labelledby="confirm-remove-invite-label-{{ invitation.invitation.id }}"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1
|
|
class="modal-title fs-5"
|
|
id="confirm-remove-invite-label-{{ invitation.invitation.id }}"
|
|
>
|
|
Confirm
|
|
</h1>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Cancel"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you sure you want to cancel the invitation to
|
|
<code>{{ invitation.invitation.email }}</code>
|
|
from <code>{{ team_name }}</code>?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<form
|
|
method="post"
|
|
action="{{ breadcrumbs.join("../remove-team-invitation") }}"
|
|
>
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
|
<input
|
|
type="hidden"
|
|
name="invitation_id"
|
|
value="{{ invitation.invitation.id }}"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="btn btn-danger">Remove</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% for user in team_members %}
|
|
<tr>
|
|
<td>{{ user.email }}</td>
|
|
<td>Owner</td>
|
|
<td>
|
|
{% if team_members.len() > 1 %}
|
|
<button
|
|
class="btn btn-sm btn-outline-danger"
|
|
type="button"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#confirm-remove-member-modal-{{ user.id }}"
|
|
>
|
|
{% if user.id == current_user.id %}
|
|
Leave
|
|
{% else %}
|
|
Remove
|
|
{% endif %}
|
|
</button>
|
|
{% endif %}
|
|
<div
|
|
class="modal fade"
|
|
id="confirm-remove-member-modal-{{ user.id }}"
|
|
tabindex="-1"
|
|
aria-labelledby="confirm-remove-member-label-{{ user.id }}"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1
|
|
class="modal-title fs-5"
|
|
id="confirm-remove-member-label-{{ user.id }}"
|
|
>
|
|
Confirm
|
|
</h1>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Cancel"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you sure you want to remove
|
|
{% if user.id == current_user.id %}
|
|
yourself
|
|
{% else %}
|
|
<code>{{ user.email }}</code>
|
|
{% endif %}
|
|
from <code>{{ team_name }}</code>?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<form
|
|
method="post"
|
|
action="{{ breadcrumbs.join("../remove-team-member") }}"
|
|
>
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
|
<input type="hidden" name="user_id" value="{{ user.id }}">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="btn btn-danger">Remove</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</main>
|
|
{% endblock %}
|