Improve aesthetics and reusability of HTML templates #13652

germain-gg · 2022-08-27T09:38:20Z

This pull request solves two issues:

Reusability and consistency of the HTML templates, by moving parts of the HTML to fragments. The folder structure changed slightly and those includes are moved to the fragments/ folder
Adds some very basic styling to the HTML template, inspiration taken from https://github.com/vector-im/element-web/blob/develop/src/vector/static/incompatible-browser.html

This does not pretend to solve every single problems with templates. Customisations of these pages is intentionally left out, as I was focusing on bringing some more solid foundations to these templates to allow easier iterations

Please review this without whitespace: https://github.com/matrix-org/synapse/pull/13652/files?w=1

💔 Before

All content left aligned in the browser window

💖 After

Content is centered in the browser window and the font size when viewed with a screen

The logo displayed will be Matrix unless the appName is set to Element, Vector or Riot. This follows an already existing pattern that was used in synapse/res/templates/notice_expiry.html.

Sign off

Signed-off-by: Germain Souquet germain@souquet.com

Pull Request Checklist

Pull request is based on the develop branch
Pull request includes a changelog file. The entry should:
- Be a short description of your change which makes sense to users. "Fixed a bug that prevented receiving messages from other servers." instead of "Moved X method from EventStore to EventWorkerStore.".
- Use markdown where necessary, mostly for code blocks.
- End with either a period (.) or an exclamation mark (!).
- Start with a capital letter.
- Feel free to credit yourself, by adding a sentence "Contributed by @github_username." or "Contributed by [Your Name]." to the end of the entry.
Pull request includes a sign off
Code style is correct
(run the linters)

FAO @nadonomy

clokep · 2022-08-29T12:24:06Z

@gsouquet Looks like this has some test failures!

synapse/res/templates/account_previously_renewed.html

clokep · 2022-08-29T12:30:11Z

changelog.d/13652.feature

@@ -0,0 +1 @@
+Improve aesthetics of HTML templates.


This seems to have pretty big backwards compatibility ramifications (if someone customized their templates). I think we at least need to leave some upgrade notes?

I believe that way I've done this now isn't backwards incompatible (if someone has custom templates they'll still continue working fine).

DMRobertson

Looks great! However:

there are failing tests, e.g.

 Traceback (most recent call last):
  File "/home/runner/work/synapse/synapse/tests/rest/client/test_auth.py", line 555, in test_ui_auth_fails_for_incorrect_sso_user
    channel = self.helper.auth_via_oidc(
  File "/home/runner/work/synapse/synapse/tests/rest/client/utils.py", line 626, in auth_via_oidc
    oauth_uri = self.initiate_sso_ui_auth(ui_auth_session_id, cookies)
  File "/home/runner/work/synapse/synapse/tests/rest/client/utils.py", line 793, in initiate_sso_ui_auth
    assert channel.code == HTTPStatus.OK, channel.text_body
builtins.AssertionError: {"errcode":"M_UNKNOWN","error":"Internal server error"}

tests.rest.client.test_auth.UIAuthTests.test_ui_auth_fails_for_incorrect_sso_user

as Patrick says, we should mention the file renames in the upgrade notes, and explain what admins need to do if they've customised these templates.

clokep · 2022-10-19T17:40:51Z

(I'm likely going to take this over from @gsouquet when I have time.)

…styling

clokep · 2022-10-20T18:41:17Z

@DMRobertson Mind taking another look? The diff is fairly awful unless you remove whitespace.

Any thoughts if we want to update any docs?

DMRobertson

Looks great! A couple of things to check though:

DMRobertson · 2022-10-20T18:50:26Z

synapse/res/templates/_base.html

+        <img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/>
+    {% elif app_name == "Vector" %}
+        <img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
+    {% elif app_name == "Element" %}
+        <img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/>
+    {% else %}
+        <img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/>


Should these all be https://?

I was just leaving them how they are today... 🤷

synapse/res/templates/account_renewed.html

synapse/res/templates/recaptcha.html

synapse/res/templates/style.css

synapse/res/templates/_base.html

DMRobertson · 2022-10-20T21:44:13Z

Any thoughts if we want to update any docs?

Sorry, I didn't see this. I couldn't see much in the docs for this: I think the relevant bits are

synapse/docs/templates.md

Line 114 in b71b41c

## HTML page templates for registration and password reset

It might be worth pointing out there is a new _base.html, which can be replaced if admins want to change the general look and feel? Otherwise I think the examples given should be fairly self-explanatory.

Only other question: should we mention this in the upgrade notes? I think not: it's backwards compatible, no action is required. Maybe add an extra sentence to the changelog like: "These changes do not apply to override templates customised by server admins."?

…styling

synapse/res/templates/_base.html

clokep · 2022-10-21T15:59:24Z

@DMRobertson I think this is back to you.

DMRobertson

I think we agree this doesn't need to be in the upgrade notes. Not sure if the changelog suggestion is overkill, I'll leave that to your discretion.

Otherwise LGTM.

changelog.d/13652.feature

Co-authored-by: David Robertson <david.m.robertson1@gmail.com>

@asymmetric

Synapse 1.71.0 (2022-11-08) =========================== Please note that, as announced in the release notes for Synapse 1.69.0, legacy Prometheus metric names are now disabled by default. They will be removed altogether in Synapse 1.73.0. If not already done, server administrators should update their dashboards and alerting rules to avoid using the deprecated metric names. See the [upgrade notes](https://matrix-org.github.io/synapse/v1.71/upgrade.html#upgrading-to-v1710) for more details. **Note:** in line with our [deprecation policy](https://matrix-org.github.io/synapse/latest/deprecation_policy.html) for platform dependencies, this will be the last release to support PostgreSQL 10, which reaches upstream end-of-life on November 10th, 2022. Future releases of Synapse will require PostgreSQL 11+. Features -------- - Support back-channel logouts from OpenID Connect providers. ([\#11414](matrix-org/synapse#11414)) - Allow use of Postgres and SQLlite full-text search operators in search queries. ([\#11635](matrix-org/synapse#11635), [\#14310](matrix-org/synapse#14310), [\#14311](matrix-org/synapse#14311)) - Implement [MSC3664](matrix-org/matrix-spec-proposals#3664), Pushrules for relations. Contributed by Nico. ([\#11804](matrix-org/synapse#11804)) - Improve aesthetics of HTML templates. Note that these changes do not retroactively apply to templates which have been [customised](https://matrix-org.github.io/synapse/latest/templates.html#templates) by server admins. ([\#13652](matrix-org/synapse#13652)) - Enable write-ahead logging for SQLite installations. Contributed by [@asymmetric](https://github.com/asymmetric). ([\#13897](matrix-org/synapse#13897)) - Show erasure status when [listing users](https://matrix-org.github.io/synapse/latest/admin_api/user_admin_api.html#query-user-account) in the Admin API. ([\#14205](matrix-org/synapse#14205)) - Provide a specific error code when a `/sync` request provides a filter which doesn't represent a JSON object. ([\#14262](matrix-org/synapse#14262))

Fixes #14421. Broke in #13652.

@asymmetric

Synapse 1.71.0 (2022-11-08) =========================== Please note that, as announced in the release notes for Synapse 1.69.0, legacy Prometheus metric names are now disabled by default. They will be removed altogether in Synapse 1.73.0. If not already done, server administrators should update their dashboards and alerting rules to avoid using the deprecated metric names. See the [upgrade notes](https://matrix-org.github.io/synapse/v1.71/upgrade.html#upgrading-to-v1710) for more details. **Note:** in line with our [deprecation policy](https://matrix-org.github.io/synapse/latest/deprecation_policy.html) for platform dependencies, this will be the last release to support PostgreSQL 10, which reaches upstream end-of-life on November 10th, 2022. Future releases of Synapse will require PostgreSQL 11+. No significant changes since 1.71.0rc2. Synapse 1.71.0rc2 (2022-11-04) ============================== Improved Documentation ---------------------- - Document the changes to monthly active user metrics due to deprecation of legacy Prometheus metric names. ([\matrix-org#14358](matrix-org#14358), [\matrix-org#14360](matrix-org#14360)) Deprecations and Removals ------------------------- - Disable legacy Prometheus metric names by default. They can still be re-enabled for now, but they will be removed altogether in Synapse 1.73.0. ([\matrix-org#14353](matrix-org#14353)) Internal Changes ---------------- - Run unit tests against Python 3.11. ([\matrix-org#13812](matrix-org#13812)) Synapse 1.71.0rc1 (2022-11-01) ============================== Features -------- - Support back-channel logouts from OpenID Connect providers. ([\matrix-org#11414](matrix-org#11414)) - Allow use of Postgres and SQLlite full-text search operators in search queries. ([\matrix-org#11635](matrix-org#11635), [\matrix-org#14310](matrix-org#14310), [\matrix-org#14311](matrix-org#14311)) - Implement [MSC3664](matrix-org/matrix-spec-proposals#3664), Pushrules for relations. Contributed by Nico. ([\matrix-org#11804](matrix-org#11804)) - Improve aesthetics of HTML templates. Note that these changes do not retroactively apply to templates which have been [customised](https://matrix-org.github.io/synapse/latest/templates.html#templates) by server admins. ([\matrix-org#13652](matrix-org#13652)) - Enable write-ahead logging for SQLite installations. Contributed by [@asymmetric](https://github.com/asymmetric). ([\matrix-org#13897](matrix-org#13897)) - Show erasure status when [listing users](https://matrix-org.github.io/synapse/latest/admin_api/user_admin_api.html#query-user-account) in the Admin API. ([\matrix-org#14205](matrix-org#14205)) - Provide a specific error code when a `/sync` request provides a filter which doesn't represent a JSON object. ([\matrix-org#14262](matrix-org#14262)) Bugfixes -------- - Fix a long-standing bug where the `update_synapse_database` script could not be run with multiple databases. Contributed by @thefinn93 @ Beeper. ([\matrix-org#13422](matrix-org#13422)) - Fix a bug which prevented setting an avatar on homeservers which have an explicit port in their `server_name` and have `max_avatar_size` and/or `allowed_avatar_mimetypes` configuration. Contributed by @ashfame. ([\matrix-org#13927](matrix-org#13927)) - Check appservice user interest against the local users instead of all users in the room to align with [MSC3905](matrix-org/matrix-spec-proposals#3905). ([\matrix-org#13958](matrix-org#13958)) - Fix a long-standing bug where Synapse would accidentally include extra information in the response to [`PUT /_matrix/federation/v2/invite/{roomId}/{eventId}`](https://spec.matrix.org/v1.4/server-server-api/#put_matrixfederationv2inviteroomideventid). ([\matrix-org#14064](matrix-org#14064)) - Fix a bug introduced in Synapse 1.64.0 where presence updates could be missing from `/sync` responses. ([\matrix-org#14243](matrix-org#14243)) - Fix a bug introduced in Synapse 1.60.0 which caused an error to be logged when Synapse received a SIGHUP signal if debug logging was enabled. ([\matrix-org#14258](matrix-org#14258)) - Prevent history insertion ([MSC2716](matrix-org/matrix-spec-proposals#2716)) during an partial join ([MSC3706](matrix-org/matrix-spec-proposals#3706)). ([\matrix-org#14291](matrix-org#14291)) - Fix a bug introduced in Synapse 1.34.0 where device names would be returned via a federation user key query request when `allow_device_name_lookup_over_federation` was set to `false`. ([\matrix-org#14304](matrix-org#14304)) - Fix a bug introduced in Synapse 0.34.0 where logs could include error spam when background processes are measured as taking a negative amount of time. ([\matrix-org#14323](matrix-org#14323)) - Fix a bug introduced in Synapse 1.70.0 where clients were unable to PUT new [dehydrated devices](matrix-org/matrix-spec-proposals#2697). ([\matrix-org#14336](matrix-org#14336)) Improved Documentation ---------------------- - Explain how to disable the use of [`trusted_key_servers`](https://matrix-org.github.io/synapse/latest/usage/configuration/config_documentation.html#trusted_key_servers). ([\matrix-org#13999](matrix-org#13999)) - Add workers settings to [configuration manual](https://matrix-org.github.io/synapse/latest/usage/configuration/config_documentation.html#individual-worker-configuration). ([\matrix-org#14086](matrix-org#14086)) - Correct the name of the config option [`encryption_enabled_by_default_for_room_type`](https://matrix-org.github.io/synapse/latest/usage/configuration/config_documentation.html#encryption_enabled_by_default_for_room_type). ([\matrix-org#14110](matrix-org#14110)) - Update docstrings of `SynapseError` and `FederationError` to bettter describe what they are used for and the effects of using them are. ([\matrix-org#14191](matrix-org#14191)) Internal Changes ---------------- - Remove unused `@lru_cache` decorator. ([\matrix-org#13595](matrix-org#13595)) - Save login tokens in database and prevent login token reuse. ([\matrix-org#13844](matrix-org#13844)) - Refactor OIDC tests to better mimic an actual OIDC provider. ([\matrix-org#13910](matrix-org#13910)) - Fix type annotation causing import time error in the Complement forking launcher. ([\matrix-org#14084](matrix-org#14084)) - Refactor [MSC3030](matrix-org/matrix-spec-proposals#3030) `/timestamp_to_event` endpoint to loop over federation destinations with standard pattern and error handling. ([\matrix-org#14096](matrix-org#14096)) - Add initial power level event to batch of bulk persisted events when creating a new room. ([\matrix-org#14228](matrix-org#14228)) - Refactor `/key/` endpoints to use `RestServlet` classes. ([\matrix-org#14229](matrix-org#14229)) - Switch to using the `matrix-org/backend-meta` version of `triage-incoming` for new issues in CI. ([\matrix-org#14230](matrix-org#14230)) - Build wheels on macos 11, not 10.15. ([\matrix-org#14249](matrix-org#14249)) - Add debugging to help diagnose lost device list updates. ([\matrix-org#14268](matrix-org#14268)) - Add Rust cache to CI for `trial` runs. ([\matrix-org#14287](matrix-org#14287)) - Improve type hinting of `RawHeaders`. ([\matrix-org#14303](matrix-org#14303)) - Use Poetry 1.2.0 in the Twisted Trunk CI job. ([\matrix-org#14305](matrix-org#14305)) <details> <summary>Dependency updates</summary> Runtime: - Bump anyhow from 1.0.65 to 1.0.66. ([\matrix-org#14278](matrix-org#14278)) - Bump jinja2 from 3.0.3 to 3.1.2. ([\matrix-org#14271](matrix-org#14271)) - Bump prometheus-client from 0.14.0 to 0.15.0. ([\matrix-org#14274](matrix-org#14274)) - Bump psycopg2 from 2.9.4 to 2.9.5. ([\matrix-org#14331](matrix-org#14331)) - Bump pysaml2 from 7.1.2 to 7.2.1. ([\matrix-org#14270](matrix-org#14270)) - Bump sentry-sdk from 1.5.11 to 1.10.1. ([\matrix-org#14330](matrix-org#14330)) - Bump serde from 1.0.145 to 1.0.147. ([\matrix-org#14277](matrix-org#14277)) - Bump serde_json from 1.0.86 to 1.0.87. ([\matrix-org#14279](matrix-org#14279)) Tooling and CI: - Bump black from 22.3.0 to 22.10.0. ([\matrix-org#14328](matrix-org#14328)) - Bump flake8-bugbear from 21.3.2 to 22.9.23. ([\matrix-org#14042](matrix-org#14042)) - Bump peaceiris/actions-gh-pages from 3.8.0 to 3.9.0. ([\matrix-org#14276](matrix-org#14276)) - Bump peaceiris/actions-mdbook from 1.1.14 to 1.2.0. ([\matrix-org#14275](matrix-org#14275)) - Bump setuptools-rust from 1.5.1 to 1.5.2. ([\matrix-org#14273](matrix-org#14273)) - Bump twine from 3.8.0 to 4.0.1. ([\matrix-org#14332](matrix-org#14332)) - Bump types-opentracing from 2.4.7 to 2.4.10. ([\matrix-org#14133](matrix-org#14133)) - Bump types-requests from 2.28.11 to 2.28.11.2. ([\matrix-org#14272](matrix-org#14272)) </details>

germain-gg added 6 commits August 22, 2022 10:34

Template header and footer to fragments

c5d00f4

Move existing fragments to correct folder

6fce9e9

Move static assets to their own folder

3eb56fd

Set title variable and pass it to the context

d405c4f

move sso footer to fragments folder

441d69f

Add basic styling for templates

8e27b0c

germain-gg requested a review from a team as a code owner August 27, 2022 09:38

germain-gg added 3 commits August 27, 2022 10:41

Add changelog entry

08899ec

escape title variable

1a0232f

lint fix changelog entry

1b02a93

clokep reviewed Aug 29, 2022

View reviewed changes

synapse/res/templates/account_previously_renewed.html Outdated Show resolved Hide resolved

clokep reviewed Aug 29, 2022

View reviewed changes

DMRobertson suggested changes Oct 19, 2022

View reviewed changes

clokep added 6 commits October 19, 2022 13:50

Merge remote-tracking branch 'origin/develop' into gsouquet/template-…

600ff84

…styling

Switch to a base template.

5b40a4e

Move notif fragments back out.

17caf24

Move other fragments back.

7288400

Move static files back.

6cecd5a

Remove further unintentional changes.

8687721

clokep requested a review from DMRobertson October 20, 2022 18:40

DMRobertson reviewed Oct 20, 2022

View reviewed changes

clokep added 2 commits October 21, 2022 10:03

Merge remote-tracking branch 'origin/develop' into gsouquet/template-…

fd2e629

…styling

Inline styles instead of linking to them.

e09affb

clokep reviewed Oct 21, 2022

View reviewed changes

synapse/res/templates/_base.html Show resolved Hide resolved

clokep requested a review from DMRobertson October 21, 2022 15:59

DMRobertson approved these changes Oct 21, 2022

View reviewed changes

changelog.d/13652.feature Outdated Show resolved Hide resolved

Clarify changelog.

cbc3003

Co-authored-by: David Robertson <david.m.robertson1@gmail.com>

clokep enabled auto-merge (squash) October 21, 2022 17:08

clokep merged commit 1d45ad8 into matrix-org:develop Oct 21, 2022

DMRobertson mentioned this pull request Nov 14, 2022

Email notification template used for matrix.org HS regressed #14421

Closed

erikjohnston added a commit that referenced this pull request Nov 15, 2022

Fix HTML templates missing correct HTML tags

d14035f

Fixes #14421. Broke in #13652.

erikjohnston mentioned this pull request Nov 15, 2022

Fix HTML templates missing correct HTML tags #14448

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve aesthetics and reusability of HTML templates #13652

Improve aesthetics and reusability of HTML templates #13652

germain-gg commented Aug 27, 2022 •

edited by clokep

clokep commented Aug 29, 2022

clokep Aug 29, 2022

clokep Oct 19, 2022

DMRobertson left a comment

clokep commented Oct 19, 2022

clokep commented Oct 20, 2022 •

edited

DMRobertson left a comment

DMRobertson Oct 20, 2022

clokep Oct 20, 2022

DMRobertson commented Oct 20, 2022

clokep commented Oct 21, 2022

DMRobertson left a comment

Improve aesthetics and reusability of HTML templates #13652

Improve aesthetics and reusability of HTML templates #13652

Conversation

germain-gg commented Aug 27, 2022 • edited by clokep

💔 Before

💖 After

Sign off

Pull Request Checklist

clokep commented Aug 29, 2022

clokep Aug 29, 2022

Choose a reason for hiding this comment

clokep Oct 19, 2022

Choose a reason for hiding this comment

DMRobertson left a comment

Choose a reason for hiding this comment

clokep commented Oct 19, 2022

clokep commented Oct 20, 2022 • edited

DMRobertson left a comment

Choose a reason for hiding this comment

DMRobertson Oct 20, 2022

Choose a reason for hiding this comment

clokep Oct 20, 2022

Choose a reason for hiding this comment

DMRobertson commented Oct 20, 2022

clokep commented Oct 21, 2022

DMRobertson left a comment

Choose a reason for hiding this comment

germain-gg commented Aug 27, 2022 •

edited by clokep

clokep commented Oct 20, 2022 •

edited