letro/letro-authentication-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

rebranding html templates and styles

Browse Source
This commit is contained in:
Letro Bot
2026-04-03 17:30:09 +03:30
parent dc3133021f
commit 1bad9bdb7c
15 changed files with 310 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>matrix-authentication-service</title>
<title>letro-authentication-service</title>
<script type="application/javascript">
window.APP_CONFIG = JSON.parse(
'{"root": "/account/", "graphqlEndpoint": "/graphql"}',

17
frontend/src/components/PageHeading/PageHeading.module.css
View File

@@ -48,6 +48,19 @@
}
}
& .brand-logo {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
margin-block-end: var(--cpd-space-1x);
& svg {
display: block;
block-size: auto;
}
}
& .header {
display: flex;
flex-direction: column;
@@ -78,5 +91,9 @@
@media screen and (min-width: 768px) {
.page-heading {
margin-block-start: var(--cpd-space-8x);
& .brand-logo {
margin-block-end: var(--cpd-space-2x);
}
}
}

1
frontend/src/entrypoints/templates.css
View File

@@ -17,6 +17,7 @@
@import "../components/Layout/Layout.module.css";
@import "../components/Footer/Footer.module.css";
@import "../components/PageHeading/PageHeading.module.css";
@import "../styles/brand-theme.css";
.cpd-text-body-lg-regular {
font: var(--cpd-font-body-lg-regular);

23
frontend/src/entrypoints/templates.ts
View File

@@ -96,3 +96,26 @@ for (const element of document.querySelectorAll<HTMLInputElement>(
)) {
patchUsernameInput(element);
}
function patchDisableSubmitUntilValid(formElement: HTMLFormElement) {
const submitButton = formElement.querySelector<HTMLButtonElement>(
'.cpd-button[data-kind="primary"][type="submit"]',
);
if (!submitButton) return;
const syncDisabledState = () => {
submitButton.disabled = !formElement.checkValidity();
};
syncDisabledState();
formElement.addEventListener("input", syncDisabledState);
formElement.addEventListener("change", syncDisabledState);
}
for (const formElement of document.querySelectorAll<HTMLFormElement>(
"form[data-disable-submit-until-valid]",
)) {
patchDisableSubmitUntilValid(formElement);
}

95
frontend/src/styles/brand-theme.css Normal file
View File

@@ -0,0 +1,95 @@
/* Copyright 2026 New Vector Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
:root {
--brand-color-accent: #D51C0B;
--brand-input-background: #F4F4F4;
--brand-input-background-autofill: #EEF3FA;
--brand-link-muted: #696B7799;
--brand-link-muted-hover: #55565E;
--brand-link-muted-active: #292A2D;
--brand-primary-gradient: linear-gradient(45deg, #C20000 6.43%, #C30300 19.99%, #C60E00 32.57%, #CB2000 45.16%, #D33900 56.78%, #DD5A00 67.43%, #E98200 79.04%, #F7B000 89.69%, #FFC800 94.53%);
}
.cpd-text-control {
background: var(--brand-input-background);
border-color: transparent;
}
.cpd-text-control:-webkit-autofill,
.cpd-text-control:-webkit-autofill:hover,
.cpd-text-control:-webkit-autofill:focus,
.cpd-text-control:-webkit-autofill:active {
-webkit-text-fill-color: var(--cpd-color-text-primary);
-webkit-box-shadow: 0 0 0 1000px var(--brand-input-background-autofill) inset;
box-shadow: 0 0 0 1000px var(--brand-input-background-autofill) inset;
background-color: var(--brand-input-background-autofill);
border-color: transparent;
transition: background-color 99999s ease-out 0s;
}
.cpd-text-control:-webkit-autofill:not(:hover):not(:focus):not(:active) {
border-color: transparent;
}
@media (hover) {
.cpd-text-control:hover {
border-color: var(--brand-color-accent);
}
}
.cpd-text-control:active {
border-color: var(--brand-color-accent);
}
.cpd-text-control:focus,
.cpd-text-control:focus-visible {
outline: 2px solid color-mix(in srgb, var(--brand-color-accent) 20%, white);
outline-offset: 0;
border-color: var(--brand-color-accent);
}
.cpd-button[data-kind="primary"]:not(.destructive) {
background: var(--brand-primary-gradient);
border-width: 0;
}
@media (hover) {
.cpd-button[data-kind="primary"]:not(.destructive):hover {
filter: brightness(1.03);
}
}
.cpd-button[data-kind="primary"]:not(.destructive):active,
.cpd-button[data-kind="primary"]:not(.destructive)[aria-expanded="true"] {
filter: brightness(0.96);
}
.cpd-button[data-kind="primary"]:not(.destructive)[disabled] {
filter: none;
}
.login-page .cpd-link[data-kind="primary"] {
color: var(--brand-link-muted);
}
@media (hover) {
.login-page .cpd-link[data-kind="primary"]:hover {
color: var(--brand-link-muted-hover);
background: transparent;
}
}
.login-page .cpd-link[data-kind="primary"]:active {
color: var(--brand-link-muted-active);
background: transparent;
}
[data-disable-submit-until-valid] .cpd-button[type="submit"][data-kind="primary"][disabled] {
cursor: not-allowed;
filter: grayscale(0.2);
opacity: 0.55;
}

2
templates/app.html
View File

@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
{% set _ = translator(lang) %}
<!DOCTYPE html>
<html lang="{{ lang }}">
<html lang="{{ lang }}" class="cpd-theme-light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2
templates/base.html
View File

@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
{% import "components/captcha.html" as captcha %}
<!DOCTYPE html>
<html lang="{{ lang }}">
<html lang="{{ lang }}" class="cpd-theme-light">
<head>
<meta charset="utf-8">
<title>{% block title %}{{ _("app.name") }}{% endblock title %}</title>

141
templates/components/brand_logo.html Normal file
View File

File diff suppressed because one or more lines are too long

6
templates/pages/device_link.html
View File

@@ -8,10 +8,12 @@ Please see LICENSE files in the repository root for full details.
{% extends "base.html" %}
{% import "components/brand_logo.html" as brand_logo %}
{% block content %}
<header class="page-heading">
<div class="icon">
{{ icon.link() }}
<div class="brand-logo">
{{ brand_logo.postnumber_logo() }}
</div>
<div class="header">

7
templates/pages/login.html
View File

@@ -8,13 +8,14 @@ Please see LICENSE files in the repository root for full details.
{% extends "base.html" %}
{% import "components/brand_logo.html" as brand_logo %}
{% from "components/idp_brand.html" import logo %}
{% block content %}
<form method="POST" class="flex flex-col gap-10">
<form method="POST" class="login-page flex flex-col gap-10" data-disable-submit-until-valid>
<header class="page-heading">
<div class="icon">
{{ icon.user_profile_solid() }}
<div class="brand-logo">
{{ brand_logo.postnumber_logo() }}
</div>
{% if next and next.kind == "link_upstream" %}

6
templates/pages/reauth.html
View File

@@ -8,10 +8,12 @@ Please see LICENSE files in the repository root for full details.
{% extends "base.html" %}
{% import "components/brand_logo.html" as brand_logo %}
{% block content %}
<header class="page-heading">
<div class="icon">
{{ icon.lock() }}
<div class="brand-logo">
{{ brand_logo.postnumber_logo() }}
</div>
<div class="header">

5
templates/pages/register/index.html
View File

@@ -8,13 +8,14 @@ Please see LICENSE files in the repository root for full details.
{% extends "base.html" %}
{% import "components/brand_logo.html" as brand_logo %}
{% from "components/idp_brand.html" import logo %}
{% block content %}
<form method="GET" class="flex flex-col gap-10" action="{{ '/register/password' | prefix_url }}">
<header class="page-heading">
<div class="icon">
{{ icon.user_profile_solid() }}
<div class="brand-logo">
{{ brand_logo.letro_logo() }}
</div>
<div class="header">

6
templates/pages/register/password.html
View File

@@ -8,10 +8,12 @@ Please see LICENSE files in the repository root for full details.
{% extends "base.html" %}
{% import "components/brand_logo.html" as brand_logo %}
{% block content %}
<header class="page-heading">
<div class="icon">
{{ icon.user_profile_solid() }}
<div class="brand-logo">
{{ brand_logo.letro_logo() }}
</div>
<div class="header">

13
templates/pages/upstream_oauth2/do_register.html
View File

@@ -8,13 +8,14 @@ Please see LICENSE files in the repository root for full details.
{% extends "base.html" %}
{% import "components/brand_logo.html" as brand_logo %}
{% from "components/idp_brand.html" import logo %}
{% block content %}
{% if force_localpart %}
<header class="page-heading">
<div class="icon">
{{ icon.download() }}
<div class="brand-logo">
{{ brand_logo.framed_logo() }}
</div>
<div class="header">
@@ -28,8 +29,8 @@ Please see LICENSE files in the repository root for full details.
</header>
{% elif upstream_oauth_provider.human_name is not none %}
<header class="page-heading">
<div class="icon">
{{ icon.user_profile_solid() }}
<div class="brand-logo">
{{ brand_logo.framed_logo() }}
</div>
<div class="header">
@@ -40,8 +41,8 @@ Please see LICENSE files in the repository root for full details.
</header>
{% else %}
<header class="page-heading">
<div class="icon">
{{ icon.mention() }}
<div class="brand-logo">
{{ brand_logo.framed_logo() }}
</div>
<div class="header">

6
templates/pages/upstream_oauth2/suggest_link.html
View File

@@ -8,10 +8,12 @@ Please see LICENSE files in the repository root for full details.
{% extends "base.html" %}
{% import "components/brand_logo.html" as brand_logo %}
{% block content %}
<header class="page-heading">
<div class="icon">
{{ icon.link() }}
<div class="brand-logo">
{{ brand_logo.postnumber_logo() }}
</div>
<div class="header">