Merge pull request #202 from snikket-im/ka/oauthtweaks

OAuth tweaks

.github/workflows/main.yaml

@@ -48,7 +48,7 @@ jobs:
           pip install flake8 flake8-print
       - name: Linting
         run: |
-          python -m flake8 snikket_web
+          make flake8
 
   translation-check:
     runs-on: ubuntu-latest
@@ -66,10 +66,10 @@ jobs:
           pip install flask-babel
       - name: Linting
         run: |
-          sed -ri '/^"POT-Creation-Date: /d' snikket_web/translations/messages.pot
+          sed -ri '/^"POT-Creation-Date: /d;/^"Generated-By: /d' snikket_web/translations/messages.pot
           git add snikket_web/translations/messages.pot
           make extract_translations
-          sed -ri '/^"POT-Creation-Date: /d' snikket_web/translations/messages.pot
+          sed -ri '/^"POT-Creation-Date: /d;/^"Generated-By: /d' snikket_web/translations/messages.pot
           git diff --exit-code --color -- snikket_web/translations/messages.pot
 
 

Makefile

@@ -5,6 +5,8 @@ generated_css_files = $(patsubst snikket_web/scss/%.scss,snikket_web/static/css/
 translation_basepath = snikket_web/translations
 pot_file = $(translation_basepath)/messages.pot
 
+black_formatted_py = snikket_web/prosodyclient.py
+
 PYTHON3 ?= python3
 SCSSC ?= sassc --load-path snikket_web/scss/
 
@@ -34,4 +36,20 @@ compile_translations:
 	-pybabel compile -d $(translation_basepath)
 
 
+.PHONY: lint
+lint: format flake8
+
+.PHONY: format
+format:
+	$(PYTHON3) -m black $(black_formatted_py)
+
+.PHONY: flake8
+flake8:
+	$(PYTHON3) -m flake8 --exclude=$(subst $(space),$(comma),$(strip $(black_formatted_py))) snikket_web
+	$(PYTHON3) -m flake8 --ignore=E501,W503 $(black_formatted_py)
+
+.PHONY: mypy
+mypy:
+	$(PYTHON3) -m mypy --python-version 3.11 snikket_web
+
 .PHONY: build_css clean update_translations compile_translations extract_translations force_update_translations

requirements.txt

@@ -1,9 +1,10 @@
-aiohttp~=3.6
-quart~=0.17,<0.18
-flask-wtf~=1.0
+aiohttp~=3.8,<3.9
+quart~=0.18,<0.19
+flask-wtf~=1.1,<1.2
 hsluv~=5.0
-flask-babel~=1.0
-email-validator~=1.1
+flask-babel~=2.0,<3
+email-validator~=1.3
 environ-config~=20.0
-wtforms~=3.0
+wtforms~=3.0,<4
 typing-extensions
+werkzeug~=2.2,<3

snikket_web/__init__.py

@@ -158,7 +158,9 @@ class AppConfig:
         "id",
         "it",
         "pl",
+        "ru",
         "sv",
+        "uk",
         "zh_Hans_CN",
     ], converter=autosplit)
     apple_store_url = environ.var(
@@ -210,6 +212,8 @@ def create_app() -> quart.Quart:
     app.config["PRIVACY_URI"] = config.privacy_uri
     app.config["ABUSE_EMAIL"] = config.abuse_email
     app.config["SECURITY_EMAIL"] = config.security_email
+    app.config["SESSION_COOKIE_SECURE"] = True
+    app.config["SESSION_COOKIE_SAMESITE"] = "Lax"
 
     app.context_processor(proc)
     app.register_error_handler(

snikket_web/admin.py

@@ -76,16 +76,25 @@ class EditUserForm(BaseForm):
     role = wtforms.RadioField(
         _l("Access Level"),
         choices=[
-            ("prosody:restricted", _("Limited")),
+            ("prosody:restricted", _l("Limited")),
             ("prosody:registered", _l("Normal user")),
             ("prosody:admin", _l("Administrator")),
         ],
+        default="prosody:registered",
     )
 
     action_save = wtforms.SubmitField(
         _l("Update user"),
     )
 
+    action_restore = wtforms.SubmitField(
+        _l("Restore account"),
+    )
+
+    action_enable = wtforms.SubmitField(
+        _l("Unlock account"),
+    )
+
     action_create_reset = wtforms.SubmitField(
         _l("Create password reset link"),
     )
@@ -112,6 +121,32 @@ async def edit_user(localpart: str) -> typing.Union[werkzeug.Response, str]:
                 ".user_password_reset_link",
                 id_=reset_link.id_,
             ))
+        elif form.action_restore.data or form.action_enable.data:
+            await client.enable_user_account(localpart)
+            try:
+                if form.action_restore.data:
+                    await flash(
+                        _("User account restored"),
+                        "success",
+                    )
+                else:
+                    await flash(
+                        _("User account unlocked"),
+                        "success",
+                    )
+                return redirect(url_for(".users"))
+            except aiohttp.ClientResponseError:
+                if form.action_restore.data:
+                    await flash(
+                        _("Could not restore user account"),
+                        "alert",
+                    )
+                else:
+                    await flash(
+                        _("Could not unlock user account"),
+                        "alert",
+                    )
+                return redirect(url_for(".edit_user", localpart=localpart))
 
         await client.update_user(
             localpart,
@@ -123,7 +158,7 @@ async def edit_user(localpart: str) -> typing.Union[werkzeug.Response, str]:
             _("User information updated."),
             "success",
         )
-        return redirect(url_for(".edit_user", localpart=localpart))
+        return redirect(url_for(".users"))
 
     elif request.method == "GET":
         form.localpart.data = target_user_info.localpart
@@ -256,6 +291,20 @@ class InvitePost(BaseForm):
         default="account",
     )
 
+    role = wtforms.RadioField(
+        _l("Access Level"),
+        choices=[
+            ("prosody:restricted", _l("Limited")),
+            ("prosody:registered", _l("Normal user")),
+            ("prosody:admin", _l("Administrator")),
+        ],
+        default="prosody:registered",
+    )
+
+    note = wtforms.StringField(
+        _l("Comment (optional)"),
+    )
+
     action_create_invite = wtforms.SubmitField(
         _l("New invitation link")
     )
@@ -335,12 +384,16 @@ 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,
+                note=form.note.data,
             )
         else:
             invite = await client.create_account_invite(
                 group_ids=form.circles.data,
+                role_names=[form.role.data],
                 ttl=form.lifetime.data,
+                note=form.note.data,
             )
         await flash(
             _("Invitation created"),
@@ -699,21 +752,21 @@ def get_system_stats() -> typing.MutableMapping[
 
 class AnnouncementForm(BaseForm):
     text = wtforms.StringField(
-        _("Message contents"),
+        _l("Message contents"),
         widget=wtforms.widgets.TextArea(),
         validators=[wtforms.validators.DataRequired()],
     )
 
     online_only = wtforms.BooleanField(
-        _("Only send to online users"),
+        _l("Only send to online users"),
     )
 
     action_post_all = wtforms.SubmitField(
-        _("Post to all users"),
+        _l("Post to all users"),
     )
 
     action_send_preview = wtforms.SubmitField(
-        _("Send preview to yourself"),
+        _l("Send preview to yourself"),
     )
 
 
@@ -778,6 +831,11 @@ async def system() -> typing.Union[str, werkzeug.Response]:
         except KeyError:
             pass
 
+        try:
+            metrics["users"] = prosody_metrics["users"]
+        except KeyError:
+            pass
+
         for k in list(metrics.keys()):
             if metrics[k] is None:
                 # so that defaulting in jinja works

snikket_web/infra.py

@@ -4,6 +4,8 @@ import math
 import secrets
 import typing
 
+from datetime import datetime, timedelta, timezone
+
 import quart.flask_patch  # noqa:F401
 from quart import (
     current_app,
@@ -13,7 +15,8 @@ from quart import (
 
 import flask_babel
 import flask_wtf
-from flask_babel import _
+from flask_babel import lazy_gettext as _l
+import flask_babel as _
 
 from . import prosodyclient
 
@@ -50,7 +53,7 @@ def flatten(a: typing.Iterable, levels: int = 1) -> typing.Iterable:
 
 def circle_name(c: typing.Any) -> str:
     if c.id_ == "default" and c.name == "default":
-        return _("Main")
+        return _l("Main")
     return c.name
 
 
@@ -70,6 +73,43 @@ def format_bytes(n: float) -> str:
     return "{} {}".format(n, unit)
 
 
+def format_last_activity(timestamp: typing.Optional[int]) -> str:
+    if timestamp is None:
+        return _l("Never")
+
+    last_active = datetime.fromtimestamp(timestamp, tz=timezone.utc)
+    # TODO: This 'now' should use the user's local time zone, but we
+    # don't have that information. Thus 'today'/'yesterday' may be
+    # slightly inaccurate, but compared to alternative solutions it
+    # should hopefully be "good enough".
+    now = datetime.now(tz=timezone.utc)
+    time_ago = now - last_active
+
+    yesterday = now - timedelta(days=1)
+
+    if (
+        last_active.year == now.year
+        and last_active.month == now.month
+        and last_active.day == now.day
+    ):
+        return _l("Today")
+    elif (
+        last_active.year == yesterday.year
+        and last_active.month == yesterday.month
+        and last_active.day == yesterday.day
+    ):
+        return _l("Yesterday")
+
+    return _.gettext(
+        "%(time)s ago",
+        time=flask_babel.format_timedelta(time_ago, granularity="day"),
+    )
+
+
+def template_now() -> typing.Dict[str, typing.Any]:
+    return dict(now=lambda: datetime.now(timezone.utc))
+
+
 def add_vary_language_header(resp: quart.Response) -> quart.Response:
     if getattr(g, "language_header_accessed", False):
         resp.vary.add("Accept-Language")
@@ -86,6 +126,8 @@ def init_templating(app: quart.Quart) -> None:
     app.template_filter("format_bytes")(format_bytes)
     app.template_filter("flatten")(flatten)
     app.template_filter("circle_name")(circle_name)
+    app.template_filter("format_last_activity")(format_last_activity)
+    app.context_processor(template_now)
     app.after_request(add_vary_language_header)
 
 

snikket_web/invite.py

@@ -47,10 +47,20 @@ def apple_store_badge() -> str:
     return url_for("static", filename="img/apple/en.svg")
 
 
+def play_store_badge() -> str:
+    locale = selected_locale()
+    filename = "{}_badge_web_generic.png".format(locale)
+    static_path = pathlib.Path(__file__).parent / "static" / "img" / "google"
+    if (static_path / filename).exists():
+        return url_for("static", filename="img/google/{}".format(filename))
+    return url_for("static", filename="img/google/en_badge_web_generic.png")
+
+
 @bp.context_processor
 def context() -> typing.Dict[str, typing.Any]:
     return {
         "apple_store_badge": apple_store_badge,
+        "play_store_badge": play_store_badge,
     }
 
 
@@ -116,6 +126,10 @@ class RegisterForm(BaseForm):
 
     password = wtforms.PasswordField(
         _l("Password"),
+        validators=[
+            wtforms.validators.InputRequired(),
+            wtforms.validators.Length(min=10),
+        ],
     )
 
     password_confirm = wtforms.PasswordField(
@@ -184,6 +198,10 @@ async def register(id_: str) -> typing.Union[str, werkzeug.Response]:
 class ResetForm(BaseForm):
     password = wtforms.PasswordField(
         _l("Password"),
+        validators=[
+            wtforms.validators.InputRequired(),
+            wtforms.validators.Length(min=10),
+        ],
     )
 
     password_confirm = wtforms.PasswordField(

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;
@@ -708,8 +719,7 @@ input[type="submit"], button, .button {
 	height: 1.5em;
 	vertical-align: middle;
 	background-size: cover;
-	box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.2);
-	border-radius: $w-s4;
+	border-radius: 10%;
 
 	margin: 0 0.25em;
 
@@ -982,19 +992,18 @@ div.profile-card {
 	}
 }
 
-/* clipboard button */
+/* clipboard and share buttons */
 
-.copy-to-clipboard {
+.copy-to-clipboard, .share-button {
 	cursor: pointer;
 	font-style: normal;
 	text-decoration: none;
 }
 
-body.no-copy .copy-to-clipboard {
+body.no-copy .copy-to-clipboard, body.no-share .share-button {
 	display: none !important;
 }
 
-
 /* magic */
 
 pre.guru-meditation {
@@ -1068,6 +1077,10 @@ pre.guru-meditation {
 		}
 	}
 
+	label, legend {
+		color: $gray-800 !important;
+	}
+
 	.box {
 		background-color: black;
 		border-color: $gray-800;
@@ -1202,6 +1215,13 @@ pre.guru-meditation {
 	p.form-desc.weak, p.field-desc.weak {
 		color: $gray-700;
 	}
+
+	.user-badge-icon {
+		color: $gray-900 !important;
+		background-color: $gray-100 !important;
+		border-color: $gray-300 !important;
+		box-shadow: black 0 0 2px !important;
+	}
 }
 
 /* tooltip magic */
@@ -1252,3 +1272,53 @@ pre.guru-meditation {
 .with-tooltip:hover:before, .with-tooltip:hover:after {
 	display: block;
 }
+
+.username-with-avatar {
+	display: flex;
+	align-items: center;
+
+	.avatar-container {
+		position: relative;
+
+		.avatar {
+			margin-left: 0;
+		}
+	}
+
+	.user-badge-icon {
+		position: absolute;
+		bottom: -10px;
+		right: 0px;
+		background: white;
+		border-radius: 50%;
+		width: 1.2em;
+		height: 1.2em;
+		border-color: $gray-500;
+		border-width: 1px;
+		border-style: solid;
+		text-align: center;
+		margin: 0;
+		padding: 0;
+		margin: 0;
+		padding: 0;
+		box-shadow: $gray-500 0px 0px 2px;
+
+		line-height: 1;
+		.icon {
+			/* vertical-align: text-bottom; */
+			padding: 0.1em;
+		}
+	}
+
+	.user-info-container {
+		margin-left: 0.5em;
+	}
+
+	.user-display-name {
+		font-size: 110%;
+	}
+
+	.user-jid {
+		font-size: 90%;
+	}
+}

snikket_web/static/img/icons.svg

@@ -42,6 +42,16 @@ licensed under the terms of the Apache 2.0 License -->
 <g fill="none"><path d="M0 0h24v24H0V0z" /><path d="M0 0h24v24H0V0z" opacity=".87" /></g>
 <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z" />
 </symbol>
+<!-- from: action/lock_open/materialiconsround/24px.svg -->
+<symbol id="icon-lock_open" viewBox="0 0 24 24">
+<path d="M0 0h24v24H0V0z" fill="none" />
+<path d="M12 13c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-5h-1V6c0-2.76-2.24-5-5-5-2.28 0-4.27 1.54-4.84 3.75-.14.54.18 1.08.72 1.22.53.14 1.08-.18 1.22-.72C9.44 3.93 10.63 3 12 3c1.65 0 3 1.35 3 3v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 11c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8z" />
+</symbol>
+<!-- from: action/restore_from_trash/materialiconsround/24px.svg -->
+<symbol id="icon-restore_from_trash" viewBox="0 0 24 24">
+<path d="M0 0h24v24H0V0z" fill="none" />
+<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v10zm5.65-8.65c.2-.2.51-.2.71 0L16 14h-2v4h-4v-4H8l3.65-3.65zM15.5 4l-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z" />
+</symbol>
 <!-- from: communication/import_export/materialiconsround/24px.svg -->
 <symbol id="icon-import_export" viewBox="0 0 24 24">
 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -138,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" />
@@ -178,4 +193,9 @@ licensed under the terms of the Apache 2.0 License -->
 <g><rect fill="none" height="24" width="24" /><rect fill="none" height="24" width="24" /></g>
 <g><g><path d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z" /><polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93" /><polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9" /></g></g>
 </symbol>
+<!-- from: social/share/materialiconsround/24px.svg -->
+<symbol id="icon-share" viewBox="0 0 24 24">
+<path d="M0 0h24v24H0V0z" fill="none" />
+<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z" />
+</symbol>
 </defs></svg>

snikket_web/templates/admin_create_invite_form.html

@@ -1,19 +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>
-			{{- 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.
@@ -27,6 +65,13 @@
 		<div class="select-wrap">{{ invite_form.circles }}</div>
 		{%- call render_errors(invite_form.circles) -%}{%- endcall -%}
 	</div>
+
+	<!-- Comment -->
+	<div class="f-ebox">
+		{{ invite_form.note.label }}
+		{{ invite_form.note }}
+	</div>
+
 	<div class="f-bbox">
 		{%- call form_button("create_link", invite_form.action_create_invite, class="primary") %}{% endcall -%}
 	</div>

snikket_web/templates/admin_edit_circle.html

@@ -1,5 +1,5 @@
 {% extends "admin_app.html" %}
-{% from "library.j2" import form_button, standard_button, value_or_hint, custom_form_button, clipboard_button, icon %}
+{% from "library.j2" import form_button, standard_button, value_or_hint, custom_form_button, clipboard_button, icon, render_user with context %}
 {% block head_lead %}
 {{ super() }}
 {% include "copy-snippet.html" %}
@@ -47,7 +47,7 @@
 	<tbody>
 {%- for chat in circle_chats -%}
 		<tr>
-			<td class="collapsible">{% call value_or_hint(chat.name) %}{% endcall %}</td>
+			<td>{% call value_or_hint(chat.name) %}{% endcall %}</td>
 			<td class="nowrap">
 				{%- call custom_form_button("delete", form.action_remove_group_chat.name, chat.id_, class="primary danger", slim=True) -%}
 					{% trans name=chat.name %}Delete group chat '{{ name }}'{% endtrans %}
@@ -71,7 +71,6 @@
 <div class="el-2 elevated"><table>
 	<thead>
 		<th>{% trans %}Login name{% endtrans %}</th>
-		<th class="collapsible">{% trans %}Display name{% endtrans %}</th>
 		<th>{% trans %}Actions{% endtrans %}</th>
 	</thead>
 	<tbody>
@@ -79,13 +78,12 @@
 		<tr>
 			<td>
 				{%- if member -%}
-				{{ localpart }}
+				{%- call render_user(member) -%}{%- endcall -%}
 				{%- else -%}
 				{{ localpart }}
 				<span class="with-tooltip above" data-tooltip="{% trans %}The user has been deleted from the server.{% endtrans %}"><em> ({% trans %}deleted{% endtrans %})</em></span>
 				{%- endif -%}
 			</td>
-			<td class="collapsible">{% call value_or_hint(member.display_name) %}{% endcall %}</td>
 			<td class="nowrap">
 				{%- call custom_form_button("remove_user", form.action_remove_user.name, member.localpart, class="primary danger", slim=True) -%}
 					{% trans username=member.localpart %}Remove user {{ username }} from circle{% endtrans %}

snikket_web/templates/admin_edit_invite.html

@@ -1,5 +1,5 @@
 {% extends "admin_app.html" %}
-{% from "library.j2" import showuri, form_button, standard_button, extract_circle_name, invite_type_description %}
+{% from "library.j2" import showuri, form_button, standard_button, extract_circle_name, invite_type_name, invite_type_description %}
 {% block head_lead %}
 {{ super() }}
 {% include "copy-snippet.html" %}
@@ -13,9 +13,10 @@
 		<dt>{% trans %}Valid until{% endtrans %}</dt>
 		<dd>{{ invite.expires | format_date }}</dd>
 		<dt><label for="link-field">{% trans %}Link{% endtrans %}</label></dt>
-		<dd>{% call showuri(invite.landing_page, id_="link-field") %}{% endcall %}</dd>
+		<dd>{% call showuri(invite.landing_page, id_="link-field") %}{% trans %}Invitation to Snikket{% endtrans %}{% endcall %}</dd>
 		<dt>{% trans %}Invitation type{% endtrans %}</dt>
-		<dd>{% call invite_type_description(invite) %}{% endcall %}</dd>
+		{% set invite_type = invite.reusable and "group" or "account" %}
+		<dd><span class="with-tooltip above" data-tooltip="{% call invite_type_description(invite_type) %}{% endcall %}">{% call invite_type_name(invite_type) %}{% endcall %}</span></dd>
 		{%- set ngroups = invite.group_ids | length -%}
 		{%- if ngroups > 1 -%}
 		{#- not supported via the web UI, but we should still display it properly -#}

snikket_web/templates/admin_edit_user.html

@@ -1,30 +1,35 @@
 {% 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">
+	{% if target_user.deletion_request %}
+	<div class="box alert">
+		<header>{% trans %}This user account is pending deletion{% endtrans %}</header>
+		<p>{% trans date=target_user.deletion_request.deleted_at | format_datetime %}The owner of the account sent a deletion request on {{ date }} using their app.{% endtrans %}
+		<p>{% trans time=(target_user.deletion_request.pending_until - now())|format_timedelta %}The account has been locked, and will be automatically deleted permanently in {{ time }}.{% endtrans %}</p>
+
+		<p>{% trans %}If this was a mistake, you can cancel the deletion and restore the account.{% endtrans %}</p>
+
+		{%- call form_button("restore_from_trash", form.action_restore, class="secondary") %}{% endcall %}
+	</div>
+	{% elif not target_user.enabled %}
+	<div class="box alert">
+		<header>{% trans %}This user account is locked{% endtrans %}</header>
+		<p>{% trans %}The user will not be able to log in to their account until it is unlocked again.{% endtrans %}</p>
+
+		{%- call form_button("lock_open", form.action_enable, class="secondary") %}{% endcall %}
+	</div>
+	{% endif %}
+
 	<h2 class="form-title">{% trans %}Edit user{% endtrans %}</h2>
+
 	<div class="f-ebox">
 		{{ form.localpart.label }}
 		{{ form.localpart(readonly="readonly") }}
 		<p class="form-desc weak">{% trans %}The login name cannot be changed.{% endtrans %}</p>
 	</div>
+
 	<div class="f-ebox">
 		{{ form.display_name.label }}
 		{{ form.display_name }}
@@ -63,14 +68,14 @@
 		{% trans %}If the user has lost their password, you can use the button below to create a special link which allows to change the password of the account, once.{% endtrans %}
 	</p>
 	<div class="f-bbox">
-		{%- call form_button("passwd", form.action_create_reset, class="primary") -%}{%- endcall -%}
+		{%- call form_button("passwd", form.action_create_reset, class="secondary") -%}{%- endcall -%}
 	</div>
 	<h2 class="form-title">{% trans %}Debug information{% endtrans %}</h2>
 	<p class="form-desc">
 		{% trans %}In some cases, extended information about the user account and the connected devices is necessary to troubleshoot issues. The button below reveals this (sensitive) information.{% endtrans %}
 	</p>
 	<div class="f-bbox">
-		{%- call standard_button("bug_report", url_for(".debug_user", localpart=target_user.localpart), class="primary") -%}
+		{%- call standard_button("bug_report", url_for(".debug_user", localpart=target_user.localpart), class="secondary") -%}
 			{%- trans -%}Show debug information{%- endtrans -%}
 		{%- endcall -%}
 	</div>

snikket_web/templates/admin_invites.html

@@ -1,5 +1,5 @@
 {% extends "admin_app.html" %}
-{% from "library.j2" import action_button, icon, clipboard_button, form_button, custom_form_button, extract_circle_name, invite_type_name, invite_type_description %}
+{% from "library.j2" import action_button, icon, clipboard_button, share_button, form_button, custom_form_button, extract_circle_name, invite_type_name, invite_type_description %}
 {% block head_lead %}
 {{ super() }}
 {% include "copy-snippet.html" %}
@@ -18,17 +18,18 @@
 	<col/>
 	<thead>
 		<tr>
-			<th>{% trans %}Expires{% endtrans %}</th>
 			<th class="collapsible">{% trans %}Type{% endtrans %}</th>
 			<th class="collapsible">{% trans %}Circle{% endtrans %}</th>
+			<th>{% trans %}Expires{% endtrans %}</th>
+			<th>{% trans %}Comment{% endtrans %}</th>
 			<th>{% trans %}Actions{% endtrans %}</th>
 		</tr>
 	</thead>
 	<tbody>
 {% for invite in invites %}
+		{% set invite_type = invite.reusable and "group" or "account" %}
 		<tr>
-			<td>{{ (invite.expires - now) | format_timedelta(add_direction=True) }}</td>
-			<td class="collapsible"><span class="with-tooltip above" data-tooltip="{% call invite_type_description(invite) %}{% endcall %}">{% call invite_type_name(invite) %}{% endcall %}</span></td>
+			<td class="collapsible"><span class="with-tooltip above" data-tooltip="{% call invite_type_description(invite_type) %}{% endcall %}">{% call invite_type_name(invite_type) %}{% endcall %}</span></td>
 			<td class="collapsible">
 				{#- -#}
 				<ul class="inline">
@@ -38,6 +39,8 @@
 				</ul>
 				{#- -#}
 			</td>
+			<td>{{ (invite.expires - now) | format_timedelta(add_direction=True) }}</td>
+			<td>{% if invite.note is not none %}{{ invite.note }}{% endif %}</td>
 			<td class="nowrap">
 				{%- call action_button("more", url_for(".edit_invite", id_=invite.id_), class="secondary") -%}
 					{% trans %}Show invite details{% endtrans %}
@@ -45,6 +48,9 @@
 				{%- call clipboard_button(invite.landing_page, class="primary") -%}
 					{% trans %}Copy invite link to clipboard{% endtrans %}
 				{%- endcall -%}
+				{%- call share_button("Invitation to Snikket", invite.landing_page, class="primary") -%}
+					{% trans %}Share invitation link{% endtrans %}
+				{%- endcall -%}
 				{%- call custom_form_button("remove_link", form.action_revoke.name, invite.id_, class="secondary danger", slim=True) -%}
 					{% trans %}Delete invitation{% endtrans %}
 				{%- endcall -%}

snikket_web/templates/admin_reset_user_password.html

@@ -15,7 +15,7 @@
 		<dt>{% trans %}Valid until{% endtrans %}</dt>
 		<dd>{{ reset_link.expires | format_date }}</dd>
 		<dt><label for="link-field">{% trans %}Link{% endtrans %}</label></dt>
-		<dd>{% call showuri(reset_link.landing_page, id_="link-field") %}{% endcall %}</dd>
+		<dd>{% call showuri(reset_link.landing_page, id_="link-field") %}Reset your Snikket password{% endcall %}</dd>
 	</dd>
 	<div class="f-bbox">
 		{%- call custom_form_button("remove_link", form.action_revoke.name, reset_link.id_, class="secondary danger") -%}

snikket_web/templates/admin_system.html

@@ -76,13 +76,20 @@
 			<em>{% trans %}unknown{% endtrans %}</em>
 			{%- endif -%}
 		</dd>
-		<dt>{% trans %}Connected devices{% endtrans %}</dt>
+		<dt>{% trans %}Active users{% endtrans %}</dt>
 		<dd>
+			<ul>
 			{%- if metrics.prosody_devices | default(None) is not none -%}
-			{{ metrics.prosody_devices }}
+			<li>{% trans %}Connected now:{% endtrans %} {{ metrics.prosody_devices }}</li>
 			{%- else -%}
-			<em>{% trans %}unknown{% endtrans %}</em>
+			<li><em>{% trans %}unknown{% endtrans %}</em></li>
 			{%- endif -%}
+			{%- if metrics.users | default(None) is not none -%}
+			<li>{% trans %}Past 24 hours:{% endtrans %} {{ metrics.users.active_1d }}</li>
+			<li>{% trans %}Past 7 days:{% endtrans %} {{ metrics.users.active_7d }}</li>
+			<li>{% trans %}Past 30 days:{% endtrans %} {{ metrics.users.active_30d }}</li>
+			{%- endif -%}
+			</ul>
 		</dd>
 	</dl>
 </div>

snikket_web/templates/admin_users.html

@@ -1,12 +1,12 @@
 {% extends "admin_app.html" %}
-{% from "library.j2" import action_button, icon, value_or_hint, custom_form_button %}
+{% from "library.j2" import action_button, avatar, icon, render_user, value_or_hint, custom_form_button with context %}
 {% block content %}
 <h1>{% trans %}Manage users{% endtrans %}</h1>
 <div class="elevated el-2"><table>
 	<thead>
 		<tr>
-			<th>{% trans %}Login name{% endtrans %}</th>
-			<th>{% trans %}Display name{% endtrans %}</th>
+			<th>{% trans %}User{% endtrans %}</th>
+			<th>{% trans %}Last active{% endtrans %}</th>
 			<th>{% trans %}Actions{% endtrans %}</th>
 		</tr>
 	</thead>
@@ -14,20 +14,19 @@
 {% for user in users %}
 		<tr>
 			<td>
-				{{- user.localpart -}}
-				{%- if user.has_admin_role -%}
-					<span class="with-tooltip above" data-tooltip="{% trans %}The user is an administrator.{% endtrans %}">{% call icon("admin") %}{% trans %} (Administrator){% endtrans %}{% endcall %}</span>
-				{%- endif -%}
-				{%- if user.has_restricted_role -%}
-					<span class="with-tooltip above" data-tooltip="{% trans %}The user is restricted.{% endtrans %}">{% call icon("lock") %}{% trans %} (Restricted){% endtrans %}{% endcall %}</span>
-				{%- endif -%}
+				{%- call render_user(user) -%}{%- endcall -%}
 			</td>
-			<td>{% call value_or_hint(user.display_name) %}{% endcall %}</td>
+			{% if user.enabled %}
+			<td>{{ user.last_active | format_last_activity }}</td>
+			{% elif user.deletion_request %}
+			<td>{% trans %}Deleted{% endtrans %}</td>
+			{% else %}
+			<td>{% trans %}Locked{% endtrans %}</td>
+			{% endif %}
 			<td class="nowrap">
 				{%- call action_button("edit", url_for(".edit_user", localpart=user.localpart), class="primary") -%}
 					{% trans user_name=user.localpart %}Edit user {{ user_name }}{% endtrans %}
 				{%- endcall -%}
-				</form>
 			</td>
 		</tr>
 {% endfor %}

snikket_web/templates/base.html

@@ -16,5 +16,5 @@
 		<meta name="msapplication-TileColor" content="#fbd308">
 		<meta name="theme-color" content="#fbd308">
 	</head>
-	<body{% if body_id | default(False) %} id="{{ body_id }}"{% endif %} class="{% if is_in_debug_mode %}debug{% endif %}{% if body_class | default(False) %} {{ body_class }}{% endif %}"{% if onload | default(False) %} onload="{{ onload }}"{% endif %}>{% block body %}{% endblock %}</body>
+	<body{% if body_id | default(False) %} id="{{ body_id }}"{% endif %} class="{% if is_in_debug_mode %}debug{% endif %}{% if body_class | default(False) %} {{ body_class }}{% endif %} no-copy no-share"{% if onload | default(False) %} onload="{{ onload }}"{% endif %}>{% block body %}{% endblock %}</body>
 </html>

snikket_web/templates/copy-snippet.html

@@ -115,8 +115,63 @@ var copy_to_clipboard_btn = function(el) {
   });
 };
 
+var copy_to_clipboard_btn = function(el) {
+  var text = el.dataset.cliptext;
+  if (!text) {
+	console.error('copy_to_clipboard used on element without text to copy');
+  }
+  copyTextToClipboard(text, el, function(success) {
+	var existing_result_el = document.getElementById("clipboard-result");
+	if (existing_result_el !== null) {
+	  existing_result_el.parentNode.removeChild(existing_result_el);
+	}
+
+	var icon = "done";
+	if (!success) {
+		icon = "cancel";
+	}
+	var icon_bak = get_current_icon(el.firstChild);
+	change_icon(el.firstChild, icon);
+	setTimeout(function() {
+		change_icon(el.firstChild, icon_bak);
+	  el.blur();
+	}, 1500);
+  });
+};
+
+var share_url_btn = function(el) {
+	let data = {
+		"title": el.dataset.shareTitle,
+		"url": el.dataset.shareUrl,
+	}
+
+	let icon_bak = get_current_icon(el.firstChild);
+
+	new Promise(function (resolve, reject) {
+		if(!navigator.canShare || !navigator.canShare(data)) {
+			return reject();
+		}
+		return resolve(navigator.share(data));
+	}).then(function () {
+		// Success
+		change_icon(el.firstChild, "done");
+	}, function () {
+		// Failure
+		change_icon(el.firstChild, "cancel");
+	}).finally(function () {
+		// Either way, clear status icon after 1.5s
+		setTimeout(function() {
+			change_icon(el.firstChild, icon_bak);
+			el.blur();
+		}, 1500);
+	});
+}
+
 window.addEventListener('load', function() {
 	document.body.classList.remove("no-copy");
+	if(navigator.share) {
+		document.body.classList.remove("no-share");
+	}
 });
 </script>
 

snikket_web/templates/invite_reset.html

@@ -7,7 +7,6 @@
 {% block head_lead %}
 {{ super() }}
 <title>{% trans %}Reset your password | Snikket{% endtrans %}</title>
-<script async type="text/javascript" src="{{ url_for("static", filename="js/qrcode.min.js") }}"></script>
 {% endblock %}
 {% block content %}
 <form method="POST"><div class="form layout-expanded">
@@ -27,9 +26,4 @@
 		{%- call form_button("passwd", form.action_reset, class="primary") -%}{%- endcall -%}
 	</div>
 </div></form>
-<script type="text/javascript">
-	var onload = function() {
-		apply_qr_code(document.getElementById("qr-uri"));
-	};
-</script>
 {% endblock %}

snikket_web/templates/invite_view.html

@@ -32,7 +32,7 @@
 {%- endif -%}
 	<div class="install-buttons">
 		<ul>
-			<li><a href="{{ play_store_url }}"><img alt='{% trans %}Get it on Google Play{% endtrans %}' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' class="play"/></a></li>
+			<li><a href="{{ play_store_url }}"><img alt='{% trans %}Get it on Google Play{% endtrans %}' src='{{ play_store_badge() }}' class="play"/></a></li>
 {%- if apple_store_url -%}
 			<li><a href="{{ apple_store_url }}" class="popover" data-popover-id="apple-popover"><img alt='{% trans %}Download on the App Store{% endtrans %}' src="{{ apple_store_badge() }}" class="apple"></a></li>
 {%- endif -%}
@@ -134,7 +134,6 @@
 
 	var onload = function() {
 		apply_qr_code(document.getElementById("qr-invite-page"));
-		apply_qr_code(document.getElementById("qr-uri"));
 		var popover_as = document.getElementsByClassName("popover");
 		for (var i = 0; i < popover_as.length; ++i) {
 			var a = popover_as[i];

snikket_web/templates/library.j2

@@ -10,12 +10,38 @@
 {%- endif -%}
 {%- endmacro %}
 
+{% macro render_user(user, caller=None) -%}
+<div class="username-with-avatar">
+	<div class="avatar-container">
+		{%- call avatar(user.localpart+"@"+config["SNIKKET_DOMAIN"], user.avatar_info[0].hash if user.avatar_info | length > 0 else None ) %}{% endcall -%}
+		{%- if user.has_admin_role -%}
+		<div class="user-badge-icon">
+			<span class="with-tooltip above" data-tooltip="{% trans %}The user is an administrator.{% endtrans %}">{% call icon("admin") %}{% trans %} (Administrator){% endtrans %}{% endcall %}</span>
+		</div>
+		{%- elif user.has_restricted_role -%}
+		<div class="user-badge-icon">
+			<span class="with-tooltip above" data-tooltip="{% trans %}The user is restricted.{% endtrans %}">{% call icon("lock") %}{% trans %} (Restricted){% endtrans %}{% endcall %}</span>
+		</div>
+		{%- endif -%}
+	</div>
+	<div class="user-info-container">
+		{%- if user.display_name %}
+		<div class="user-display-name">{{- user.display_name -}}</div>
+		{%- endif %}
+		<div class="user-jid"><span class="user-jid-localpart">{{- user.localpart -}}</span><span class="user-jid-at">@</span><span class="user-jid-domain">{{- config["SNIKKET_DOMAIN"] -}}</span></div>
+	</div>
+</div>
+{%- endmacro -%}
+
 {% macro showuri(uri, caller=None, id_=None) %}
 {%- if uri is none -%}
 <em>—</em>
 {%- else -%}
 <div><input type="text" {% if id_ %}id="{{ id_ }}" {% endif %}readonly="readonly" value="{{ uri }}"></div>
-<div>{% call clipboard_button(uri, show_label=True) %}{% trans %}Copy link{% endtrans %}{% endcall %}</div>
+<div>
+  {% call clipboard_button(uri, show_label=True) %}{% trans %}Copy link{% endtrans %}{% endcall %}
+  {% call share_button(caller() if caller is not none else None, uri, show_label=True) %}{% trans %}Share{% endtrans %}{% endcall %}
+</div>
 {%- endif -%}
 {% endmacro %}
 
@@ -59,7 +85,7 @@
 
 {% macro clipboard_button(data, show_label=False, caller=None, class=None) -%}
 {%- set label = caller() -%}
-<a class="button{% if class %} {{ class }}{% endif %}"
+<a class="button copy-to-clipboard{% if class %} {{ class }}{% endif %}"
 	href="#"
 {% if not show_label %}
 	aria-label="{{ label }}"
@@ -74,6 +100,24 @@
 </a>
 {%- endmacro %}
 
+{% macro share_button(title, url, show_label=False, caller=None, class=None) -%}
+{%- set label = caller() -%}
+<a class="button share-button{% if class %} {{ class }}{% endif %}"
+	href="#"
+{% if not show_label %}
+	aria-label="{{ label }}"
+	title="{{ label }}"
+{% endif %}
+	data-share-title="{{ title }}"
+	data-share-url="{{ url }}"
+	onclick="share_url_btn(this); return false;">
+	{%- call icon("share") %}{% endcall -%}
+{%- if show_label %}
+	<span>{{ label }}</span>
+{% endif -%}
+</a>
+{%- endmacro %}
+
 {% macro render_errors(field, caller=None) -%}
 {%- set error_list = field.errors if field.errors is not mapping else (field.errors.values() | flatten | list) -%}
 {%- if error_list -%}
@@ -109,18 +153,44 @@
 {%- endif -%}
 {% endmacro %}
 
-{%- macro invite_type_name(invite_info, caller=None) -%}
-{%- if invite_info.reusable -%}
-{% trans %}Group{% endtrans %}
-{%- else -%}
+{%- macro invite_type_name(invite_type, caller=None) -%}
+{%- if invite_type == "account" -%}
 {% trans %}Individual{% endtrans %}
+{%- else -%}
+{% trans %}Group{% endtrans %}
 {%- endif -%}
 {%- endmacro -%}
 
-{%- macro invite_type_description(invite_info, caller=None) -%}
-{%- if invite_info.reusable -%}
-{% trans %}Can be used multiple times to create accounts on this Snikket service.{% endtrans %}
-{%- else -%}
-{% trans %}Can be used once to create an account on this Snikket service.{% endtrans %}
+{% 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 -%}
+{% 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 %}

snikket_web/templates/login.html

@@ -30,7 +30,7 @@
 		<div class="f-bbox">
 			{%- call form_button("login", form.action_signin, class="primary") -%}{% endcall -%}
 		</div>
-	</from>
+	</form>
 	<script type="text/javascript">
 var domainCheck = function() {
 	var form = document.getElementById("login-form");

snikket_web/templates/user_home.html

@@ -6,8 +6,13 @@
 {% include "copy-snippet.html" %}
 {% endblock %}
 {% block content %}
-<h1>{% trans %}Welcome!{% endtrans %}</h1>
-<p>{% trans user_name=user_info.display_name %}Welcome home, {{ user_name }}.{% endtrans %}</p>
+{% if user_info.is_admin and metrics.users and metrics.users.active_1d <= 1 %}
+<aside class="box hint">
+  <header>{% trans %}Welcome to Snikket!{% endtrans %}</header>
+  <p>{% trans %}Now your Snikket instance is up and running, the next step is to invite people to join it. Family, friends, colleagues... you choose!{% endtrans %}</p>
+  <a href="/admin/invitations">{% trans %}Create new invitation{% endtrans %}</a>
+</aside>
+{% endif %}
 <nav class="welcome">
 	<ul>
 		<li class="wide">

snikket_web/user.py

@@ -32,16 +32,22 @@ class ChangePasswordForm(BaseForm):
 
     new_password = wtforms.PasswordField(
         _l("New password"),
-        validators=[wtforms.validators.InputRequired()]
+        validators=[
+            wtforms.validators.InputRequired(),
+            wtforms.validators.Length(min=10),
+        ]
     )
 
     new_password_confirm = wtforms.PasswordField(
         _l("Confirm new password"),
-        validators=[wtforms.validators.InputRequired(),
-                    wtforms.validators.EqualTo(
-                        "new_password",
-                        _l("The new passwords must match.")
-                    )]
+        validators=[
+            wtforms.validators.InputRequired(),
+            wtforms.validators.EqualTo(
+                "new_password",
+                _l("The new passwords must match.")
+            ),
+            wtforms.validators.Length(min=10),
+        ]
     )
 
 
@@ -91,7 +97,15 @@ class ImportAccountDataForm(BaseForm):
 @client.require_session()
 async def index() -> str:
     user_info = await client.get_user_info()
-    return await render_template("user_home.html", user_info=user_info)
+    try:
+        metrics = await client.get_system_metrics()
+    except (werkzeug.exceptions.Unauthorized, werkzeug.exceptions.Forbidden):
+        metrics = {}
+    return await render_template(
+        "user_home.html",
+        user_info=user_info,
+        metrics=metrics,
+    )
 
 
 @bp.route('/passwd', methods=["GET", "POST"])

tools/icons.list

@@ -6,6 +6,8 @@ action/logout:logout
 action/login:login
 action/exit_to_app:exit_to_app
 action/lock:lock
+action/lock_open:lock_open
+action/restore_from_trash:restore_from_trash
 communication/import_export:import_export
 communication/qr_code:qrcode
 communication/vpn_key:passwd
@@ -25,6 +27,7 @@ navigation/cancel:cancel
 navigation/more_vert:more
 social/groups:groups
 social/people:people
+social/person:person
 social/group_add:create_group
 social/person_add:add_user
 social/person_remove:remove_user
@@ -33,3 +36,4 @@ image/edit:edit
 action/admin_panel_settings:admin
 content/link:link
 content/insights:insights
+social/share:share

tools/import-icons.sh

@@ -9,9 +9,9 @@ set -euo pipefail
 #   FLAVOR    one of '', 'round', 'sharp', 'outlined', 'twoshade'
 #   SVGOUT    path to the newly created SVG file
 root="$1/src"
-iconlist_file="$2"
-flavor="$3"
-output_file="$4"
+iconlist_file="${2-tools/icons.list}"
+flavor="${3-round}"
+output_file="${4-snikket_web/static/img/icons.svg}"
 
 printf '<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n<defs>\n' > "$output_file"
 printf '<!-- These icons are sourced from Google’s Material Icons set,\nlicensed under the terms of the Apache 2.0 License -->\n' >> "$output_file"