sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Implement new design for Welcome page (#33211)

Browse Source 
* Convert welcome.html to React component

In advance of changes to use Compound

* Fix types

* Fix tests

* Update styling to match Figma

* Fix random capitalisation

* Tweak styling

* Regenerate i18n

* Update tests

* Make linter happy

* Iterate
This commit is contained in:
Michael Telatynski
2026-04-22 15:32:05 +00:00
committed by GitHub
parent 7b89d84acb
commit 4b4289e211
24 changed files with 263 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/views/auth/AuthPage.tsx
+6 -9
View File
@@ -31,16 +31,13 @@ export default class AuthPage extends React.PureComponent<React.PropsWithChildre
if (AuthPage.welcomeBackgroundUrl) return AuthPage.welcomeBackgroundUrl;
const brandingConfig = SdkConfig.getObject("branding");
AuthPage.welcomeBackgroundUrl = "themes/element/img/backgrounds/lake.jpg";
const configuredUrl = brandingConfig?.get("welcome_background_url");
if (configuredUrl) {
if (Array.isArray(configuredUrl)) {
const index = Math.floor(Math.random() * configuredUrl.length);
AuthPage.welcomeBackgroundUrl = configuredUrl[index];
} else {
AuthPage.welcomeBackgroundUrl = configuredUrl;
}
const urls = brandingConfig.get("welcome_background_url");
if (Array.isArray(urls)) {
const index = Math.floor(Math.random() * urls.length);
AuthPage.welcomeBackgroundUrl = urls[index];
} else {
AuthPage.welcomeBackgroundUrl = urls;
}
return AuthPage.welcomeBackgroundUrl;
apps/web/src/components/views/auth/DefaultWelcome.tsx
+51
View File
@@ -0,0 +1,51 @@
/*
Copyright 2026 Element Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { Button, Heading, Text } from "@vector-im/compound-web";
import { _t } from "../../../languageHandler";
import SdkConfig from "../../../SdkConfig.ts";
import { MatrixClientPeg } from "../../../MatrixClientPeg.ts";
import { isElementBranded } from "../../../branding.ts";
const DefaultWelcome: React.FC = () => {
const brand = SdkConfig.get("brand");
const branding = SdkConfig.getObject("branding");
const logoUrl = branding.get("auth_header_logo_url");
const showGuestFunctions = !!MatrixClientPeg.get();
const isElement = isElementBranded();
return (
<div className="mx_DefaultWelcome">
<a href={branding.get("logo_link_url")} target="_blank" rel="noopener" className="mx_DefaultWelcome_logo">
<img src={logoUrl} alt={brand} />
</a>
<Heading as="h1" weight="semibold">
{isElement ? _t("welcome|title_element") : _t("welcome|title_generic", { brand })}
</Heading>
{isElement && <Text size="md">{_t("welcome|tagline_element")}</Text>}
<div className="mx_DefaultWelcome_buttons">
<Button as="a" href="#/login" kind="primary" size="sm">
{_t("action|sign_in")}
</Button>
<Button as="a" href="#/register" kind="secondary" size="sm">
{_t("action|create_account")}
</Button>
{showGuestFunctions && (
<Button as="a" href="#/directory" kind="tertiary" size="sm">
{_t("action|explore_rooms")}
</Button>
)}
</div>
</div>
);
};
export default DefaultWelcome;
apps/web/src/components/views/auth/Welcome.tsx
+20 -21
View File
@@ -5,9 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import React, { type ReactNode } from "react";
import classNames from "classnames";
import { type EmptyObject } from "matrix-js-sdk/src/matrix";
import { Glass } from "@vector-im/compound-web";
import SdkConfig from "../../../SdkConfig";
import AuthPage from "./AuthPage";
@@ -16,14 +17,12 @@ import { UIFeature } from "../../../settings/UIFeature";
import LanguageSelector from "./LanguageSelector";
import EmbeddedPage from "../../structures/EmbeddedPage";
import { MATRIX_LOGO_HTML } from "../../structures/static-page-vars";
import DefaultWelcome from "./DefaultWelcome.tsx";
export default class Welcome extends React.PureComponent<EmptyObject> {
public render(): React.ReactNode {
const pagesConfig = SdkConfig.getObject("embedded_pages");
let pageUrl: string | undefined;
if (pagesConfig) {
pageUrl = pagesConfig.get("welcome_url");
}
const pageUrl = pagesConfig?.get("welcome_url");
const replaceMap: Record<string, string> = {
"$brand": SdkConfig.get("brand"),
@@ -33,25 +32,25 @@ export default class Welcome extends React.PureComponent<EmptyObject> {
"[matrix]": MATRIX_LOGO_HTML,
};
if (!pageUrl) {
// Fall back to default and replace $logoUrl in welcome.html
const brandingConfig = SdkConfig.getObject("branding");
const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";
replaceMap["$logoUrl"] = logoUrl;
pageUrl = "welcome.html";
let body: ReactNode;
if (pageUrl) {
body = <EmbeddedPage className="mx_WelcomePage" url={pageUrl} replaceMap={replaceMap} />;
} else {
body = <DefaultWelcome />;
}
return (
<AuthPage>
<div
className={classNames("mx_Welcome", {
mx_WelcomePage_registrationDisabled: !SettingsStore.getValue(UIFeature.Registration),
})}
data-testid="mx_welcome_screen"
>
<EmbeddedPage className="mx_WelcomePage" url={pageUrl} replaceMap={replaceMap} />
<LanguageSelector />
</div>
<AuthPage addBlur={false}>
<Glass>
<div
className={classNames("mx_Welcome", {
mx_WelcomePage_registrationDisabled: !SettingsStore.getValue(UIFeature.Registration),
})}
>
{body}
<LanguageSelector />
</div>
</Glass>
</AuthPage>
);
}