From c5173c186341e6e549036f7e0a6a6650aa6ef278 Mon Sep 17 00:00:00 2001 From: Marcin Tojek Date: Thu, 28 Sep 2023 15:39:56 +0200 Subject: [PATCH 1/4] site: use custom application name --- .../AppearanceSettingsPageView.tsx | 33 +++++++++++++++++++ site/src/pages/LoginPage/LoginPage.tsx | 4 ++- site/src/pages/LoginPage/LoginPageView.tsx | 18 +++++++++- site/src/pages/LoginPage/SignInForm.tsx | 4 ++- site/src/utils/appearance.ts | 16 +++++++++ 5 files changed, 72 insertions(+), 3 deletions(-) create mode 100644 site/src/utils/appearance.ts diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx index 2aa975d27e180..c083a0cafabd6 100644 --- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx @@ -42,6 +42,16 @@ export const AppearanceSettingsPageView = ({ const styles = useStyles(); const theme = useTheme(); + const applicationNameForm = useFormik<{ + application_name: string; + }>({ + initialValues: { + application_name: appearance.application_name, + }, + onSubmit: (values) => onSaveAppearance(values, false), + }); + const applicationNameFieldHelpers = getFormHelpers(applicationNameForm); + const logoForm = useFormik<{ logo_url: string; }>({ @@ -87,6 +97,22 @@ export const AppearanceSettingsPageView = ({ +
Submit} + > + +
+
{ const location = useLocation(); const [authState, authSend] = useAuth(); const redirectTo = retrieveRedirect(location.search); + const applicationName = getApplicationName(); if (authState.matches("signedIn")) { return ; @@ -18,7 +20,7 @@ export const LoginPage: FC = () => { return ( <> - Sign in to Coder + Sign in to {applicationName} = ({ // This allows messages to be displayed at the top of the sign in form. // Helpful for any redirects that want to inform the user of something. const info = new URLSearchParams(location.search).get("info") || undefined; + const logoURL = getLogoURL(); + const applicationLogo = logoURL ? ( +
+ (e.currentTarget.style.display = "none")} + onLoad={(e) => (e.currentTarget.style.display = "inline")} + /> +
+ ) : ( + + ); return isLoading ? ( ) : (
- + {applicationLogo} > = ({ // Hide password auth by default if any OAuth method is enabled const [showPasswordAuth, setShowPasswordAuth] = useState(!oAuthEnabled); const styles = useStyles(); + const applicationName = getApplicationName(); return (

- Sign in to Coder + Sign in to {applicationName}

{Boolean(error) && ( diff --git a/site/src/utils/appearance.ts b/site/src/utils/appearance.ts new file mode 100644 index 0000000000000..230eb0af3eeb7 --- /dev/null +++ b/site/src/utils/appearance.ts @@ -0,0 +1,16 @@ +export const getApplicationName = (): string => { + const c = document + .querySelector(`meta[name=application-name]`) + ?.getAttribute("content"); + // Fallback to "Coder" if the application name is not available for some reason. + // We need to check if the content does not look like {{ .ApplicationName}} + // as it means that Coder is running in development mode (port :8080). + return c && !c.startsWith("{{ .") ? c : "Coder"; +}; + +export const getLogoURL = (): string => { + const c = document + .querySelector(`meta[property=logo-url]`) + ?.getAttribute("content"); + return c && !c.startsWith("{{ .") ? c : ""; +}; From c9aaea1bbcb6841e53dc9d99c7df2f60d7da3610 Mon Sep 17 00:00:00 2001 From: Marcin Tojek Date: Thu, 28 Sep 2023 15:47:30 +0200 Subject: [PATCH 2/4] stories --- .../AppearanceSettingsPageView.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx index bd45ec90d1dfb..c6fb7283cf72d 100644 --- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx +++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx @@ -6,7 +6,7 @@ const meta: Meta = { component: AppearanceSettingsPageView, args: { appearance: { - application_name: "", + application_name: "Foobar", logo_url: "https://github.com/coder.png", service_banner: { enabled: true, From a623f2b5774dfa7daff12273a1215ff6dab0754d Mon Sep 17 00:00:00 2001 From: Marcin Tojek Date: Thu, 28 Sep 2023 16:33:14 +0200 Subject: [PATCH 3/4] Fix: a11y --- site/src/pages/LoginPage/LoginPageView.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx index 4b5adbd1b902e..474b03339f9ef 100644 --- a/site/src/pages/LoginPage/LoginPageView.tsx +++ b/site/src/pages/LoginPage/LoginPageView.tsx @@ -6,7 +6,7 @@ import { AuthContext, UnauthenticatedData } from "xServices/auth/authXService"; import { SignInForm } from "./SignInForm"; import { retrieveRedirect } from "utils/redirect"; import { CoderIcon } from "components/Icons/CoderIcon"; -import { getLogoURL } from "utils/appearance"; +import { getApplicationName, getLogoURL } from "utils/appearance"; export interface LoginPageViewProps { context: AuthContext; @@ -29,11 +29,12 @@ export const LoginPageView: FC = ({ // This allows messages to be displayed at the top of the sign in form. // Helpful for any redirects that want to inform the user of something. const info = new URLSearchParams(location.search).get("info") || undefined; + const applicationName = getApplicationName(); const logoURL = getLogoURL(); const applicationLogo = logoURL ? (
Date: Thu, 28 Sep 2023 18:13:03 +0200 Subject: [PATCH 4/4] fix: use document.head --- site/src/utils/appearance.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/utils/appearance.ts b/site/src/utils/appearance.ts index 230eb0af3eeb7..3e9e3785f0064 100644 --- a/site/src/utils/appearance.ts +++ b/site/src/utils/appearance.ts @@ -1,5 +1,5 @@ export const getApplicationName = (): string => { - const c = document + const c = document.head .querySelector(`meta[name=application-name]`) ?.getAttribute("content"); // Fallback to "Coder" if the application name is not available for some reason. @@ -9,7 +9,7 @@ export const getApplicationName = (): string => { }; export const getLogoURL = (): string => { - const c = document + const c = document.head .querySelector(`meta[property=logo-url]`) ?.getAttribute("content"); return c && !c.startsWith("{{ .") ? c : "";