feat: user management UI qol features (#124)

Author: JacobCoffee

cabotage/client/templates/main/home.html

@@ -1,11 +1,64 @@
 {% extends "_base.html" %}
 
 {% block content %}
+  <div class="container" id="content">
+    <div class="row">
+      <h1>Welcome!</h1>
+    </div>
 
-<div class="container" id="content">
-  <div class="row">
-    <h1>Welcome!</h1>
-  </div>
-</div>
+    {% if current_user.is_authenticated %}
+      <div class="row">
+        <div class="col-md-6">
+          <h2>Your Organizations</h2>
+          <table class="table">
+            {% for organization in current_user.organizations %}
+              <tr>
+                <td>
+                  <a href="{{ url_for('user.organization', org_slug=organization.organization.slug) }}">
+                    {{ organization.organization.name }}
+                  </a>
+                  {% if organization.admin %}
+                    <span class="label label-primary pull-right">Admin</span>
+                  {% else %}
+                    <span class="label label-default pull-right">Member</span>
+                  {% endif %}
+                </td>
+              </tr>
+            {% else %}
+              <tr>
+                <td>No organizations yet</td>
+              </tr>
+            {% endfor %}
+          </table>
+        </div>
 
+        <div class="col-md-6">
+          <h2>Your Projects</h2>
+          <table class="table">
+            {% for project in current_user.projects %}
+              <tr>
+                <td>
+                  <a href="{{ url_for('user.project', org_slug=project.organization.slug, project_slug=project.slug) }}">
+                    {{ project.organization.slug }}/{{ project.name }}
+                  </a>
+                </td>
+              </tr>
+            {% else %}
+              <tr>
+                <td>No projects yet</td>
+              </tr>
+            {% endfor %}
+          </table>
+        </div>
+      </div>
+    {% else %}
+      <div class="jumbotron text-center">
+        <h1>Welcome to Cabotage</h1>
+        <p>Please log in to manage your organizations and projects</p>
+        <p>
+          <a href="{{ url_for('security.login') }}" class="btn btn-primary btn-lg">Log In</a>
+        </p>
+      </div>
+    {% endif %}
+  </div>
 {% endblock %}

cabotage/client/templates/user/organization.html

@@ -1,6 +1,8 @@
 {% extends "_base.html" %}
 {% from "bootstrap/utils.html" import form_button %}
+
 {% block content %}
+  {% include "security/_messages.html" %}
   <div class="container" id="content">
     <div class="row">
       <h1>Organization: {{ organization.name }}</h1>
@@ -9,14 +11,79 @@ <h1>Organization: {{ organization.name }}</h1>
       <h2>Projects</h2>
     </div>
     <table class="table">
-    {% for project in organization.projects %}
+      {% for project in organization.projects %}
+        <tr>
+          <td>
+            <a href="{{ url_for("user.project", org_slug=project.organization.slug, project_slug=project.slug) }}">{{ project.name }}</a>
+          </td>
+        </tr>
+      {% endfor %}
       <tr>
-        <td><a href="{{ url_for("user.project", org_slug=project.organization.slug, project_slug=project.slug) }}">{{ project.name }}</a></td>
-      </tr>
-    {% endfor %}
-      <tr>
-        <td>{{ form_button(url_for('user.organization_project_create', org_slug=organization.slug), "Create a new Project", method="GET", class="btn btn-primary pull-right") }}</td>
+        <td colspan="2" class="text-right">
+          {{ form_button(url_for('user.organization_project_create', org_slug=organization.slug), "Create a new Project", method="GET", class="btn btn-primary") }}
+        </td>
       </tr>
     </table>
+
+    <div class="row">
+      <h2>Users</h2>
+    </div>
+    <table class="table">
+      <thead>
+        <tr>
+          <th>Username</th>
+          <th>Role</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for member in organization.members %}
+          <tr>
+            <td>{{ member.user.username }}</td>
+            <td>{{ "Admin" if member.admin else "Member" }}</td>
+            <td class="text-right">
+              {% if member.user.id != current_user.id %}  {# Don't show management buttons for current user #}
+                {% if current_user.admin or (organization.id in current_user.organizations|selectattr('admin')|map(attribute='organization_id')|list) %}
+                  {% if not member.admin %}
+                    <form action="{{ url_for('user.organization_promote_user', org_slug=organization.slug) }}"
+                      method="POST" style="display: inline;">
+                      <input type="hidden" name="user_id" value="{{ member.user.id }}">
+                      <button type="submit" class="btn btn-sm btn-success"
+                        onclick="return confirm('Are you sure you want to promote {{ member.user.username }} to admin? \n\nAn organization admin can undo this action.');">
+                        <span class="glyphicon glyphicon-arrow-up"></span> Promote
+                      </button>
+                    </form>
+                  {% elif current_user.admin or (organization.id in current_user.organizations|selectattr('admin')|map(attribute='organization_id')|list) %}
+                    <form action="{{ url_for('user.organization_demote_user', org_slug=organization.slug) }}"
+                      method="POST" style="display: inline;">
+                      <input type="hidden" name="user_id" value="{{ member.user.id }}">
+                      <button type="submit" class="btn btn-sm btn-warning"
+                        onclick="return confirm('Are you sure you want to demote {{ member.user.username }} to member?');">
+                        <span class="glyphicon glyphicon-arrow-down"></span> Demote
+                      </button>
+                    </form>
+                  {% endif %}
+                  <form action="{{ url_for('user.organization_remove_user', org_slug=organization.slug) }}"
+                    method="POST" style="display: inline;">
+                    <input type="hidden" name="user_id" value="{{ member.user.id }}">
+                    <button type="submit" class="btn btn-sm btn-danger"
+                      onclick="return confirm('Are you sure you want to remove {{ member.user.username }} from this organization?');">
+                      <span class="glyphicon glyphicon-trash"></span> Remove
+                    </button>
+                  </form>
+                {% endif %}
+              {% endif %}
+            </td>
+          </tr>
+        {% endfor %}
+        {% if current_user.admin or (organization.id in current_user.organizations|selectattr('admin')|map(attribute='organization_id')|list) %}
+          <tr>
+            <td colspan="3">
+              {{ form_button(url_for('user.organization_add_user', org_slug=organization.slug), "Add User", method="GET", class="btn btn-primary pull-right") }}
+            </td>
+          </tr>
+        {% endif %}
+      </tbody>
+    </table>
   </div>
 {% endblock %}

cabotage/client/templates/user/organization_add_user.html

@@ -0,0 +1,75 @@
+{% extends "_base.html" %}
+{% from "security/_macros.html" import render_field_with_errors, render_field %}
+{% from "bootstrap/wtf.html" import form_errors, form_field %}
+{% from "bootstrap/utils.html" import form_button %}
+
+{% block content %}
+{% include "security/_messages.html" %}
+<div class="container-fluid clearfix" id="content">
+  <div class="row">
+    <div class="col-md-8 col-md-offset-2">
+      <h1>Add User to {{ organization.name }}</h1>
+      
+      {% if current_user.admin and all_users %}
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <h3 class="panel-title">All Users</h3>
+          </div>
+          <div class="panel-body">
+            {% set member_ids = organization.members|map(attribute='user_id')|list %}
+            {% set available_users = [] %}
+            {% for user in all_users %}
+              {% if user.id not in member_ids %}
+                {% do available_users.append(user) %}
+              {% endif %}
+            {% endfor %}
+            
+            {% if available_users %}
+              <div class="table-responsive">
+                <table class="table table-striped">
+                  <thead>
+                    <tr>
+                      <th>Username</th>
+                      <th>Email</th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {% for user in available_users %}
+                      <tr>
+                        <td>{{ user.username }}</td>
+                        <td>{{ user.email }}</td>
+                        <td class="text-right">
+                          <form action="{{ url_for('user.organization_add_user', org_slug=organization.slug) }}" method="POST" style="display: inline;">
+                            {{ form.hidden_tag() }}
+                            <input type="hidden" name="email" value="{{ user.email }}">
+                            <button type="submit" class="btn btn-sm btn-success">
+                              <span class="glyphicon glyphicon-plus"></span> Add
+                            </button>
+                          </form>
+                        </td>
+                      </tr>
+                    {% endfor %}
+                  </tbody>
+                </table>
+              </div>
+            {% else %}
+              <div class="alert alert-info">
+                All users are already members of this organization.
+              </div>
+            {% endif %}
+          </div>
+        </div>
+      {% else %}
+        <div class="col-md-4 col-md-offset-4 col-sm-8 col-xs-8 col-xs-offset-2 col-sm-offset-2">
+          <form action="{{ url_for('user.organization_add_user', org_slug=organization.slug) }}" method="POST" name="organization_add_user_form">
+            {{ form.hidden_tag() }}
+            {{ form_field(form.email) }}
+            {{ form_button(form.submit, "Add User", method="POST", class="btn btn-primary") }}
+          </form>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+</div>
+{% endblock %}

cabotage/server/models/auth.py

@@ -135,7 +135,7 @@ def add_user(self, user, admin=False):
     def remove_user(self, user):
         association = OrganizationMember.query.filter_by(
             user_id=user.id, organization_id=self.id
-        )
+        ).first()
         if association:
             db.session.delete(association)
 

cabotage/server/user/forms.py

@@ -426,3 +426,14 @@ class ApplicationScaleForm(FlaskForm):
         [DataRequired()],
         description="Application to scale.",
     )
+
+
+class AddOrganizationUserForm(FlaskForm):
+    email = StringField(
+        "User Email",
+        [
+            InputRequired(),
+            Length(min=3, max=255),
+        ],
+        description="Email address of the user to add to this organization",
+    )

cabotage/server/user/views.py

@@ -14,6 +14,7 @@
     render_template,
     request,
     url_for,
+    flash,
 )
 from flask_security import (
     current_user,
@@ -49,7 +50,9 @@
 
 from cabotage.server.models.auth import (
     Organization,
+    User,
 )
+from cabotage.server.models.auth_associations import OrganizationMember
 from cabotage.server.models.projects import (
     DEFAULT_POD_CLASS,
     Application,
@@ -73,6 +76,7 @@
     EditApplicationSettingsForm,
     EditConfigurationForm,
     ReleaseDeployForm,
+    AddOrganizationUserForm,
 )
 
 from cabotage.utils.docker_auth import (
@@ -1608,3 +1612,102 @@ def github_hooks():
         process_github_hook.delay(hook_id=hook.id)
         return jsonify({"hook_id": hook.id})
     abort(403)
+
+
+@user_blueprint.route("/organizations/<org_slug>/users/add", methods=["GET", "POST"])
+@login_required
+def organization_add_user(org_slug):
+    organization = Organization.query.filter_by(slug=org_slug).first_or_404()
+    if not AdministerOrganizationPermission(organization.id).can():
+        abort(403)
+
+    form = AddOrganizationUserForm()
+    all_users = User.query.all() if current_user.admin else None
+
+    if form.validate_on_submit():
+        if user := User.query.filter_by(email=form.email.data).first():
+            organization.add_user(user)
+            db.session.commit()
+            flash("User has been added to the organization.", "success")
+            return redirect(url_for("user.organization", org_slug=org_slug))
+        else:
+            flash("User with this email address does not exist.", "error")
+    return render_template(
+        "user/organization_add_user.html",
+        organization=organization,
+        form=form,
+        all_users=all_users,
+    )
+
+
+@user_blueprint.route("/organizations/<org_slug>/users/remove", methods=["POST"])
+@login_required
+def organization_remove_user(org_slug):
+    organization = Organization.query.filter_by(slug=org_slug).first_or_404()
+    if not AdministerOrganizationPermission(organization.id).can():
+        abort(403)
+
+    user_id = request.form.get("user_id")
+    if user := User.query.get(user_id):
+        org_user_count = len(organization.members)
+        if org_user_count <= 1:
+            flash(
+                "Cannot remove the last user from an organization. Add someone else first!",
+                "warning",
+            )
+        else:
+            organization.remove_user(user)
+            db.session.commit()
+            flash(
+                f"User {user.email} removed from organization {organization.name}.",
+                "success",
+            )
+    else:
+        flash("User not found.", "error")
+    return redirect(url_for("user.organization", org_slug=org_slug))
+
+
+@user_blueprint.route("/organizations/<org_slug>/users/promote", methods=["POST"])
+@login_required
+def organization_promote_user(org_slug):
+    organization = Organization.query.filter_by(slug=org_slug).first_or_404()
+    if not AdministerOrganizationPermission(organization.id).can():
+        abort(403)
+
+    user_id = request.form.get("user_id")
+    if user := User.query.get(user_id):
+        if member := OrganizationMember.query.filter_by(
+            user_id=user.id, organization_id=organization.id
+        ).first():
+            member.admin = True
+            db.session.commit()
+            flash(
+                f"User {user.email} promoted to admin in {organization.name}.",
+                "success",
+            )
+    else:
+        flash("User not found.", "error")
+    return redirect(url_for("user.organization", org_slug=org_slug))
+
+
+@user_blueprint.route("/organizations/<org_slug>/users/demote", methods=["POST"])
+@login_required
+def organization_demote_user(org_slug):
+    organization = Organization.query.filter_by(slug=org_slug).first_or_404()
+    if not AdministerOrganizationPermission(organization.id).can():
+        abort(403)
+
+    user_id = request.form.get("user_id")
+    if user := User.query.get(user_id):
+        if member := OrganizationMember.query.filter_by(
+            user_id=user.id, organization_id=organization.id
+        ).first():
+            member.admin = False
+            db.session.commit()
+            flash(
+                f"User {user.email} demoted to member in {organization.name}.",
+                "success",
+            )
+    else:
+        flash("User not found.", "error")
+    return redirect(url_for("user.organization", org_slug=org_slug))