feat: Improve account panel UI for locked and suspended accounts

src/web/pages/account/login.rs

@@ -63,7 +63,7 @@ async fn route_login(
 	Extension(context): Extension<TemplateContext>,
 	Expect(Query(LoginQuery { next, reauthenticate })): Expect<Query<LoginQuery>>,
 	session_store: Session,
-	user: User,
+	user: User<true>,
 	PostForm(form): PostForm<LoginForm>,
 ) -> Result {
 	let user_id = user.into_session().map(|session| session.user_id);

src/web/pages/account/mod.rs

@@ -58,19 +58,34 @@ struct ThreepidQuery {
 template! {
 	struct Account use "account.html.j2" {
 		user_card: UserCard,
+		body: AccountBody
+	}
+}
+
+#[derive(Debug)]
+enum AccountBody {
+	Unlocked {
+		suspended: bool,
 		email_requirement: EmailRequirement,
 		email: Option<String>,
-		devices: Vec<DeviceCard>
-	}
+		devices: Vec<DeviceCard>,
+	},
+	Locked,
 }
 
 async fn get_account(
 	State(services): State<crate::State>,
 	Extension(context): Extension<TemplateContext>,
-	user: User,
+	user: User<true>,
 ) -> Result {
 	let user_id = user.expect(LoginTarget::Account)?;
 
+	let user_card = UserCard::for_local_user(&services, user_id.clone()).await;
+
+	if services.users.is_locked(&user_id).await.unwrap() {
+		return response!(Account::new(context, user_card, AccountBody::Locked));
+	}
+
 	let email_requirement = services.threepid.email_requirement();
 	let email = services
 		.threepid
@@ -78,8 +93,6 @@ async fn get_account(
 		.await
 		.map(|address| address.to_string());
 
-	let user_card = UserCard::for_local_user(&services, user_id.clone()).await;
-
 	let dehydrated_device_id = services.users.get_dehydrated_device_id(&user_id).await.ok();
 
 	let mut devices: Vec<_> = services
@@ -111,7 +124,14 @@ async fn get_account(
 		.collect()
 		.await;
 
-	response!(Account::new(context, user_card, email_requirement, email, device_cards))
+	let suspended = services.users.is_suspended(&user_id).await.unwrap();
+
+	response!(Account::new(context, user_card, AccountBody::Unlocked {
+		suspended,
+		email_requirement,
+		email,
+		devices: device_cards
+	}))
 }
 
 #[derive(Deserialize)]

src/web/pages/account/password/reset.rs

@@ -197,7 +197,9 @@ async fn route_reset_password_validate(
 				UserId::parse(format!("@{localpart}:{}", services.globals.server_name()))
 					.unwrap();
 
-			require_active(&services, &user_id).await?;
+			if let Err(response) = require_active(&services, &user_id, true).await {
+				return Ok(response);
+			}
 
 			let user_card = UserCard::for_local_user(&services, user_id.clone()).await;
 

src/web/pages/oauth/grant.rs

@@ -42,7 +42,7 @@ template! {
 async fn route_authorization_code(
 	State(services): State<crate::State>,
 	Extension(context): Extension<TemplateContext>,
-	user: User,
+	user: User<true>,
 	Expect(Query(query)): Expect<Query<AuthorizationCodeQuery>>,
 	PostForm(form): PostForm<()>,
 ) -> Result {

src/web/pages/resources/components.css

@@ -47,6 +47,12 @@
             font-weight: normal;
         }
     }
+
+    &.danger {
+        display: block;
+        background-color: oklch(from red 0.2 c h);
+        border: 1px dashed red;
+    }
 }
 
 .card-list {

src/web/pages/templates/_layout.html.j2

@@ -27,7 +27,8 @@
                     {%~ else ~%}
                         ({{ version_info }})
                     {%~ endif ~%}
-                {%~ endif ~%}</p>
+                {%~ endif ~%}
+            </p>
         </footer>
     {%~ endblock ~%}
 </body>

src/web/pages/templates/account.html.j2

@@ -8,46 +8,67 @@ Your account
 <div class="panel">
     <h1>Manage your account</h1>
     {{ user_card }}
-    <section>
-        {% if email_requirement.may_change() %}
-            <p>
-                {% if let Some(email) = email %}
-                    Your account's associated email address is <code>{{ email }}</code>.
-                {% else %}
-                    Your account has no associated email address.
+    {% match body %}
+        {% when AccountBody::Unlocked { suspended, email_requirement, email, devices } %}
+            {% if suspended %}
+                <p class="card danger">
+                    ⚠️ Your account has been suspended by your homeserver's administrator.
+                    Some functionality may be restricted.
+                </p>
+            {% endif %}
+            <section>
+                {% if email_requirement.may_change() %}
+                    <p>
+                        {% if let Some(email) = email %}
+                            Your account's associated email address is <code>{{ email }}</code>.
+                        {% else %}
+                            Your account has no associated email address.
+                        {% endif %}
+                        <a href="email/change/">Change your email</a>
+                    </p>
                 {% endif %}
-                <a href="email/change/">Change your email</a>
+                <p>
+                    <a href="password/change">Change your password</a>
+                </p>
+            </section>
+
+            <section>
+                <a class="button fullwidth" href="logout">Log out</a>
+            </section>
+
+            <section>
+                <details>
+                    <summary>Your devices ({{ devices.len() }})</summary>
+                    <div class="card-list" id="devices">
+                        {% for device in devices %}
+                            {{ device }}
+                        {% else %}
+                            <span>
+                                Your account has no devices. <a href="https://matrix.org/ecosystem/clients">Choose a client</a>
+                                and sign in to start chatting on Matrix.
+                            </span>
+                        {% endfor %}
+                    </div>
+                </details>
+            </section>
+
+            <section>
+                <details>
+                    <summary>Danger zone</summary>
+                    <p>
+                        Settings here <em class="negative">may affect the integrity of your account</em>.
+                    </p>
+                    <a href="cross_signing_reset">Reset your digital identity</a> &bullet;
+                    <a href="deactivate">Deactivate your account</a>
+                </details>
+            </section>
+        {% when AccountBody::Locked %}
+            <p class="card danger">
+                ⚠️ Your account has been locked by your homeserver's administrator.
             </p>
-        {% endif %}
-        <p>
-            <a href="password/change">Change your password</a>
-        </p>
-    </section>
-
-    <section>
-        <a class="button fullwidth" href="logout">Log out</a>
-    </section>
-
-    <section>
-        <details>
-            <summary>Your devices ({{ devices.len() }})</summary>
-            <div class="card-list" id="devices"car>
-                {% for device in devices %}
-                    {{ device }}
-                {% endfor %}
-            </div>
-        </details>
-    </section>
-
-    <section>
-        <details>
-            <summary>Danger zone</summary>
-            <p>
-                Settings here <em class="negative">may affect the integrity of your account</em>.
-            </p>
-            <a href="cross_signing_reset">Reset your digital identity</a> &bullet;
-            <a href="deactivate">Deactivate your account</a>
-        </details>
-    </section>
+            <section>
+                <a class="button fullwidth" href="logout">Log out</a>
+            </section>
+    {% endmatch %}
 </div>
 {%- endblock -%}

src/web/pages/templates/device_info.html.j2

@@ -28,7 +28,7 @@ Device information
             {% else %}
                 This device can access and control all features of your Matrix account.
                 <br>
-                <small>❖ <i>This is a legacy device. Legacy devices always have full access to your account.</i></small>
+                <small>❖ This is a legacy device. Legacy devices always have full access to your account.</small>
             {% endif %}
         </p>
     </section>