Allow selecting a role when creating an invitation

Includes some reorganization and prettification of the creation form.

snikket_web/admin.py

@@ -284,12 +284,21 @@ class InvitePost(BaseForm):
     type_ = wtforms.RadioField(
         _l("Invitation type"),
         choices=[
-            ("account", _l("Individual (for one person)")),
-            ("group", _l("Group (for multiple people)")),
+            ("account", _l("Individual")),
+            ("group", _l("Group")),
         ],
         default="account",
     )
 
+    role = wtforms.RadioField(
+        _l("Access Level"),
+        choices=[
+            ("prosody:restricted", _l("Limited")),
+            ("prosody:registered", _l("Normal user")),
+            ("prosody:admin", _l("Administrator")),
+        ],
+    )
+
     action_create_invite = wtforms.SubmitField(
         _l("New invitation link")
     )
@@ -369,11 +378,13 @@ async def create_invite() -> typing.Union[str, werkzeug.Response]:
         if form.type_.data == "group":
             invite = await client.create_group_invite(
                 group_ids=form.circles.data,
+                role_names=[form.role.data],
                 ttl=form.lifetime.data,
             )
         else:
             invite = await client.create_account_invite(
                 group_ids=form.circles.data,
+                role_names=[form.role.data],
                 ttl=form.lifetime.data,
             )
         await flash(

snikket_web/prosodyclient.py

@@ -160,6 +160,7 @@ class AdminInviteInfo:
     expires: datetime
     reusable: bool
     group_ids: typing.Collection[str]
+    role_names: typing.Collection[str]
     is_reset: bool
 
     @classmethod
@@ -177,6 +178,7 @@ class AdminInviteInfo:
             xmpp_uri=data.get("xmpp_uri"),
             landing_page=data.get("landing_page"),
             group_ids=data.get("groups", []),
+            role_names=data.get("roles", []),
             reusable=data["reusable"],
             is_reset=data.get("reset", False),
         )
@@ -1086,12 +1088,14 @@ class ProsodyClient:
             self,
             *,
             group_ids: typing.Collection[str] = [],
+            role_names: typing.Collection[str] = [],
             restrict_username: typing.Optional[str] = None,
             ttl: typing.Optional[int] = None,
             session: aiohttp.ClientSession,
             ) -> AdminInviteInfo:
         payload: typing.Dict[str, typing.Any] = {}
         payload["groups"] = list(group_ids)
+        payload["roles"] = list(role_names)
         if restrict_username is not None:
             payload["username"] = restrict_username
         if ttl is not None:
@@ -1108,11 +1112,13 @@ class ProsodyClient:
             self,
             *,
             group_ids: typing.Collection[str] = [],
+            role_names: typing.Collection[str] = [],
             ttl: typing.Optional[int] = None,
             session: aiohttp.ClientSession,
             ) -> AdminInviteInfo:
         payload: typing.Dict[str, typing.Any] = {
             "groups": list(group_ids),
+            "roles": list(role_names),
         }
         if ttl is not None:
             payload["ttl"] = ttl

snikket_web/scss/app.scss

@@ -259,6 +259,13 @@ div.form.layout-expanded {
 		margin: 0;
 	}
 
+	fieldset.descriptive-radio-selection {
+		p {
+			margin-top: 0;
+			margin-bottom: $w-s2;
+		}
+	}
+
 	input[type="radio"] + label, input[type="checkbox"] + label {
 		font-weight: inherit;
 		color: inherit;
@@ -363,6 +370,10 @@ div.form.layout-expanded {
 		margin-left: 0.25em;
 	}
 
+	.radio-button-ext {
+		margin-left: 0.5rem;
+	}
+
 	div.select-wrap {
 		display: block;
 		border-bottom: $w-s4 solid $primary-500;

snikket_web/static/img/icons.svg

@@ -148,6 +148,11 @@ licensed under the terms of the Apache 2.0 License -->
 <path d="M0 0h24v24H0V0z" fill="none" />
 <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V18c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05.02.01.03.03.04.04 1.14.83 1.93 1.94 1.93 3.41V18c0 .35-.07.69-.18 1H22c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5z" />
 </symbol>
+<!-- from: social/person/materialiconsround/24px.svg -->
+<symbol id="icon-person" viewBox="0 0 24 24">
+<path d="M0 0h24v24H0V0z" fill="none" />
+<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z" />
+</symbol>
 <!-- from: social/group_add/materialiconsround/24px.svg -->
 <symbol id="icon-create_group" viewBox="0 0 24 24">
 <path d="M0 0h24v24H0V0z" fill="none" />

snikket_web/templates/admin_create_invite_form.html

@@ -1,20 +1,57 @@
-{% from "library.j2" import form_button, render_errors %}
+{% from "library.j2" import form_button,
+                            render_errors,
+                            access_level_description, access_level_icon,
+                            invite_type_description, invite_type_icon
+%}
 <form method="POST" action="{{ url_for(".create_invite") }}">
 {{- invite_form.csrf_token -}}
 <div class="form layout-expanded">
 	<h2 class="form-title">{% trans %}Create new invitation{% endtrans %}</h2>
 	<p class="form-descr weak">{% trans %}Create a new invitation link to invite more users to your Snikket service by clicking the button below.{% endtrans %}</p>
+
+	<!-- Invitation type -->
 	<div class="f-ebox">
-		<fieldset>{#- -#}
+		<fieldset class="descriptive-radio-selection">{#- -#}
 			<legend>{{ invite_form.type_.label.text }}</legend>
-			<span>{% trans %}Choose whether this invitation link will allow more than one person to join.{% endtrans %}</span>
-			{{- invite_form.type_ -}}
+			<p>{% trans %}Choose whether this invitation link will allow more than one person to join.{% endtrans %}</p>
+
+			{%- for invite_type in invite_form.type_ -%}
+			<div class="radio-button-ext">
+				{{ invite_type }}<label for="{{ invite_type.id }}">
+					{%- trans title=invite_type.label.text, icon=invite_type_icon(invite_type.data), description=invite_type_description(invite_type.data) -%}
+					<span class="invite-type">{{ title }}{{ icon }}</span><p>{{ description }}</p>
+					{%- endtrans -%}
+				</label>
+			</div>
+			{%- endfor -%}
 		</fieldset>
 	</div>
+
+	<!-- Access level -->
+	<div class="f-ebox">
+		<fieldset class="descriptive-radio-selection">{#- -#}
+			<legend>{{ invite_form.role.label.text }}</legend>
+			<p>{% trans %}The access level of a user determines what interactions are allowed for them on your Snikket service.{% endtrans %}</p>
+			{%- for level in invite_form.role -%}
+			<div class="radio-button-ext">
+				{{ level }}<label for="{{ level.id }}">
+					{%- trans title=level.label.text, icon=access_level_icon(level.data), description=access_level_description(level.data) -%}
+					<span class="access-level">{{ title }}{{ icon }}</span><p>{{ description }}</p>
+					{%- endtrans -%}
+				</label>
+			</div>
+			{%- endfor -%}
+		</fieldset>
+	</div>
+
+
+	<!-- Valid for -->
 	<div class="f-ebox">
 		{{ invite_form.lifetime.label }}
 		<div class="select-wrap">{{ invite_form.lifetime }}</div>
 	</div>
+
+	<!-- Invite to circle -->
 	<div class="f-ebox">
 {#
 	NOTE: This is for when/if we ever support multi-group invites.
@@ -28,6 +65,7 @@
 		<div class="select-wrap">{{ invite_form.circles }}</div>
 		{%- call render_errors(invite_form.circles) -%}{%- endcall -%}
 	</div>
+
 	<div class="f-bbox">
 		{%- call form_button("create_link", invite_form.action_create_invite, class="primary") %}{% endcall -%}
 	</div>

snikket_web/templates/admin_edit_user.html

@@ -1,21 +1,5 @@
 {% extends "admin_app.html" %}
-{% from "library.j2" import box, form_button, standard_button, icon %}
-{% macro access_level_description(role, caller=None) %}
-{%- if role == "prosody:restricted" -%}
-{% trans %}Limited users can interact with users on the same Snikket service and be members of circles.{% endtrans %}
-{%- elif role == "prosody:registered" -%}
-{% trans %}Like limited users and can also interact with users on other Snikket services.{% endtrans %}
-{%- elif role == "prosody:admin" -%}
-{% trans %}Like normal users and can access the admin panel in the web portal.{% endtrans %}
-{%- endif -%}
-{% endmacro %}
-{% macro access_level_icon(role, caller=None) %}
-{%- if role == "prosody:restricted" -%}
-{% call icon("lock") %}{% endcall %}
-{%- elif role == "prosody:admin" -%}
-{% call icon("admin") %}{% endcall %}
-{%- endif -%}
-{% endmacro %}
+{% from "library.j2" import box, form_button, standard_button, icon, access_level_description, access_level_icon %}
 {% block content %}
 <h1>{% trans user_name=target_user.localpart %}Edit user {{ user_name }}{% endtrans %}</h1>
 <form method="POST">{{ form.csrf_token }}<div class="form layout-expanded">

snikket_web/templates/library.j2

@@ -147,3 +147,37 @@
 {% trans %}Can be used once to create an account on this Snikket service.{% endtrans %}
 {%- endif -%}
 {%- endmacro -%}
+
+{% macro access_level_description(role, caller=None) %}
+{%- if role == "prosody:restricted" -%}
+{% trans %}Limited users can interact with users on the same Snikket service and be members of circles.{% endtrans %}
+{%- elif role == "prosody:registered" -%}
+{% trans %}Like limited users and can also interact with users on other Snikket services.{% endtrans %}
+{%- elif role == "prosody:admin" -%}
+{% trans %}Like normal users and can access the admin panel in the web portal.{% endtrans %}
+{%- endif -%}
+{% endmacro %}
+
+{% macro access_level_icon(role, caller=None) %}
+{%- if role == "prosody:restricted" -%}
+{% call icon("lock") %}{% endcall %}
+{%- elif role == "prosody:admin" -%}
+{% call icon("admin") %}{% endcall %}
+{%- endif -%}
+{% endmacro %}
+
+{% macro invite_type_description(invite_type, caller=None) %}
+{%- if invite_type == "account" -%}
+{% trans %}Invite a single person (invitation link can only be used once).{% endtrans %}
+{%- elif invite_type == "group" -%}
+{% trans %}Invite a group of people (invitation link can be used multiple times).{% endtrans %}
+{%- endif -%}
+{% endmacro %}
+
+{% macro invite_type_icon(invite_type, caller=None) %}
+{%- if invite_type == "account" -%}
+{% call icon("person") %}{% endcall %}
+{%- elif invite_type == "group" -%}
+{% call icon("people") %}{% endcall %}
+{%- endif -%}
+{% endmacro %}