Chore: Added Enterprise Options to Login customization

apps/meteor/app/lib/server/startup/settings.ts

@@ -82,10 +82,6 @@ settingsRegistry.addGroup('Accounts', function () {
 		type: 'int',
 		public: true,
 	});
-	this.add('Accounts_ShowFormLogin', true, {
-		type: 'boolean',
-		public: true,
-	});
 	this.add('Accounts_EmailOrUsernamePlaceholder', '', {
 		type: 'string',
 		public: true,
@@ -1573,6 +1569,46 @@ settingsRegistry.addGroup('Push', function () {
 });
 
 settingsRegistry.addGroup('Layout', function () {
+	this.section('Login', function () {
+		this.add('Layout_Login_Hide_Logo', false, {
+			type: 'boolean',
+			public: true,
+			enterprise: true,
+			invalidValue: false,
+		});
+		this.add('Layout_Login_Hide_Title', false, {
+			type: 'boolean',
+			public: true,
+			enterprise: true,
+			invalidValue: false,
+		});
+		this.add('Layout_Login_Hide_Powered_By', false, {
+			type: 'boolean',
+			public: true,
+			enterprise: true,
+			invalidValue: false,
+		});
+		this.add('Layout_Login_Template', 'horizontal-template', {
+			type: 'select',
+			values: [
+				{
+					key: 'vertical-template',
+					i18nLabel: 'Layout_Login_Template_Vertical',
+				},
+				{
+					key: 'horizontal-template',
+					i18nLabel: 'Layout_Login_Template_Horizontal',
+				},
+			],
+			public: true,
+			enterprise: true,
+			invalidValue: 'horizontal-template',
+		});
+		this.add('Accounts_ShowFormLogin', true, {
+			type: 'boolean',
+			public: true,
+		});
+	});
 	this.section('Content', function () {
 		this.add('Layout_Home_Title', 'Home', {
 			type: 'string',

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -2713,6 +2713,16 @@
   "Last_Updated": "Last Updated",
   "Launched_successfully": "Launched successfully",
   "Layout": "Layout",
+  "Layout_Login_Hide_Logo": "Hide Logo",
+  "Layout_Login_Hide_Logo_Description": "Hide the logo on the login page.",
+  "Layout_Login_Hide_Title": "Hide Title",
+  "Layout_Login_Hide_Title_Description": "Hide the title on the login page.",
+  "Layout_Login_Hide_Powered_By": "Hide \"Powered by\"",
+  "Layout_Login_Hide_Powered_By_Description": "Hide the \"Powered by\" on the login page.",
+  "Layout_Login_Template": "Login Template",
+  "Layout_Login_Template_Description": "Customize the look of the login page.",
+  "Layout_Login_Template_Vertical": "Vertical",
+  "Layout_Login_Template_Horizontal": "Horizontal",
   "Layout_Description": "Customize the look of your workspace.",
   "Layout_Home_Body": "Home Body",
   "Layout_Home_Title": "Home Title",

packages/web-ui-registration/src/RegisterSecretPageRouter.tsx

@@ -4,10 +4,10 @@ import type { ReactElement } from 'react';
 import type { DispatchLoginRouter } from './hooks/useLoginRouter';
 import LoginRegisterForm from './RegisterForm';
 import RegisterFormDisabled from './RegisterFormDisabled';
+import RegisterTemplate from './RegisterTemplate';
 import SecretRegisterForm from './SecretRegisterForm';
 import SecretRegisterInvalidForm from './SecretRegisterInvalidForm';
 import FormSkeleton from './template/FormSkeleton';
-import HorizontalTemplate from './template/HorizontalTemplate';
 
 export const RegisterSecretPageRouter = ({
 	setLoginRoute,
@@ -16,7 +16,8 @@ export const RegisterSecretPageRouter = ({
 	setLoginRoute: DispatchLoginRouter;
 	origin: 'register' | 'secret-register';
 }): ReactElement => {
-	const registrationMode = useSetting('Accounts_RegistrationForm');
+	const registrationMode = useSetting<string>('Accounts_RegistrationForm');
+
 	const isPublicRegistration = registrationMode === 'Public';
 	const isRegistrationAllowedForSecret = registrationMode === 'Secret URL';
 	const isRegistrationDisabled = registrationMode === 'Disabled' || (origin === 'register' && isRegistrationAllowedForSecret);
@@ -27,17 +28,17 @@ export const RegisterSecretPageRouter = ({
 
 	if (isPublicRegistration) {
 		return (
-			<HorizontalTemplate>
+			<RegisterTemplate>
 				<LoginRegisterForm setLoginRoute={setLoginRoute} />
-			</HorizontalTemplate>
+			</RegisterTemplate>
 		);
 	}
 
 	if (isRegistrationDisabled) {
 		return (
-			<HorizontalTemplate>
+			<RegisterTemplate>
 				<RegisterFormDisabled setLoginRoute={setLoginRoute} />
-			</HorizontalTemplate>
+			</RegisterTemplate>
 		);
 	}
 
@@ -46,9 +47,9 @@ export const RegisterSecretPageRouter = ({
 	}
 
 	return (
-		<HorizontalTemplate>
+		<RegisterTemplate>
 			<FormSkeleton />
-		</HorizontalTemplate>
+		</RegisterTemplate>
 	);
 };
 

packages/web-ui-registration/src/RegisterTemplate.tsx

@@ -0,0 +1,16 @@
+import { useSetting } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+
+import HorizontalTemplate from './template/HorizontalTemplate';
+import VerticalTemplate from './template/VerticalTemplate';
+
+const RegisterTemplate = ({ children }: { children: ReactElement }): ReactElement => {
+	const template = useSetting<'vertical-template' | 'horizontal-template'>('Layout_Login_Template');
+
+	if (template === 'vertical-template') {
+		return <VerticalTemplate>{children}</VerticalTemplate>;
+	}
+	return <HorizontalTemplate>{children}</HorizontalTemplate>;
+};
+
+export default RegisterTemplate;

packages/web-ui-registration/src/RegistrationPageRouter.tsx

@@ -3,8 +3,8 @@ import type { ReactElement } from 'react';
 import { LoginForm } from './LoginForm';
 import ResetPasswordForm from './ResetPasswordForm';
 import { useLoginRouter } from './hooks/useLoginRouter';
-import HorizontalTemplate from './template/HorizontalTemplate';
 import RegisterSecretPageRouter from './RegisterSecretPageRouter';
+import RegisterTemplate from './RegisterTemplate';
 
 export const RegistrationPageRouter = ({
 	defaultRoute = 'login',
@@ -15,17 +15,17 @@ export const RegistrationPageRouter = ({
 
 	if (route === 'login') {
 		return (
-			<HorizontalTemplate>
+			<RegisterTemplate>
 				<LoginForm setLoginRoute={setLoginRoute} />
-			</HorizontalTemplate>
+			</RegisterTemplate>
 		);
 	}
 
 	if (route === 'reset-password') {
 		return (
-			<HorizontalTemplate>
+			<RegisterTemplate>
 				<ResetPasswordForm setLoginRoute={setLoginRoute} />
-			</HorizontalTemplate>
+			</RegisterTemplate>
 		);
 	}
 

packages/web-ui-registration/src/SecretRegisterInvalidForm.tsx

@@ -6,7 +6,11 @@ import VerticalTemplate from './template/VerticalTemplate';
 const SecretRegisterInvalidForm = (): ReactElement => {
 	const t = useTranslation();
 
-	return <VerticalTemplate>{t('Invalid_secret_URL_message')}</VerticalTemplate>;
+	return (
+		<VerticalTemplate>
+			<h2>{t('Invalid_secret_URL_message')}</h2>
+		</VerticalTemplate>
+	);
 };
 
 export default SecretRegisterInvalidForm;

packages/web-ui-registration/src/components/LoginPoweredBy.tsx

@@ -1,14 +1,24 @@
 import { Link } from '@rocket.chat/layout';
+import { Box } from '@rocket.chat/fuselage';
 import { Trans } from 'react-i18next';
 import type { ReactElement } from 'react';
+import { useSetting } from '@rocket.chat/ui-contexts';
 
-export const LoginPoweredBy = (): ReactElement => (
-	<Trans i18nKey='registration.page.poweredBy'>
-		Powered by
-		<Link href='https://rocket.chat/' target='_blank' rel='noopener noreferrer'>
-			Rocket.Chat
-		</Link>
-	</Trans>
-);
+export const LoginPoweredBy = (): ReactElement | null => {
+	const hidePoweredBy = useSetting<boolean>('Layout_Login_Hide_Powered_By');
+	if (hidePoweredBy) {
+		return null;
+	}
+	return (
+		<Box mbe='x18'>
+			<Trans i18nKey='registration.page.poweredBy'>
+				{'Powered by '}
+				<Link href='https://rocket.chat/' target='_blank' rel='noopener noreferrer'>
+					Rocket.Chat
+				</Link>
+			</Trans>
+		</Box>
+	);
+};
 
 export default LoginPoweredBy;

packages/web-ui-registration/src/components/RegisterTitle.tsx

@@ -2,7 +2,12 @@ import { useSetting } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { Trans } from 'react-i18next';
 
-export const RegisterTitle = (): ReactElement => {
-	const siteName = String(useSetting('Site_Name'));
+export const RegisterTitle = (): ReactElement | null => {
+	const siteName = useSetting<string>('Site_Name');
+	const hideTitle = useSetting<boolean>('Layout_Login_Hide_Title');
+
+	if (hideTitle) {
+		return null;
+	}
 	return <Trans i18nKey='registration.component.welcome'>Welcome to {siteName} workspace</Trans>;
 };

packages/web-ui-registration/src/template/HorizontalTemplate.tsx

@@ -8,6 +8,7 @@ import {
 } from '@rocket.chat/layout';
 import type { ReactElement, ReactNode } from 'react';
 import { Box } from '@rocket.chat/fuselage';
+import { useSetting } from '@rocket.chat/ui-contexts';
 
 import LoginSwitchLanguageFooter from '../components/LoginSwitchLanguageFooter';
 import LoginPoweredBy from '../components/LoginPoweredBy';
@@ -16,13 +17,14 @@ import { RegisterTitle } from '../components/RegisterTitle';
 import { useAssetPath } from '../hooks/useAssetPath';
 
 const HorizontalTemplate = ({ children }: { children: ReactNode }): ReactElement => {
+	const hideLogo = useSetting<boolean>('Layout_Login_Hide_Logo');
 	const customLogo = useAssetPath('Assets_logo');
 	const customBackground = useAssetPath('Assets_background');
 
 	return (
 		<HorizontalWizardLayout
 			background={customBackground}
-			logo={customLogo ? <Box is='img' maxHeight='x40' mi='neg-x8' src={customLogo} alt='Logo' /> : undefined}
+			logo={!hideLogo && customLogo ? <Box is='img' maxHeight='x40' mi='neg-x8' src={customLogo} alt='Logo' /> : <></>}
 		>
 			<HorizontalWizardLayoutAside>
 				<HorizontalWizardLayoutTitle>

packages/web-ui-registration/src/template/VerticalTemplate.tsx

@@ -1,6 +1,7 @@
 import { VerticalWizardLayout, VerticalWizardLayoutTitle, VerticalWizardLayoutFooter } from '@rocket.chat/layout';
 import type { ReactElement, ReactNode } from 'react';
 import { Box } from '@rocket.chat/fuselage';
+import { useSetting } from '@rocket.chat/ui-contexts';
 
 import LoginSwitchLanguageFooter from '../components/LoginSwitchLanguageFooter';
 import LoginPoweredBy from '../components/LoginPoweredBy';
@@ -9,21 +10,20 @@ import { RegisterTitle } from '../components/RegisterTitle';
 import { useAssetPath } from '../hooks/useAssetPath';
 
 const VerticalTemplate = ({ children }: { children: ReactNode }): ReactElement => {
+	const hideLogo = useSetting<boolean>('Layout_Login_Hide_Logo');
 	const customLogo = useAssetPath('Assets_logo');
 	const customBackground = useAssetPath('Assets_background');
 
 	return (
 		<VerticalWizardLayout
 			background={customBackground}
-			logo={customLogo ? <Box is='img' maxHeight='x40' mi='neg-x8' src={customLogo} alt='Logo' /> : undefined}
+			logo={!hideLogo && customLogo ? <Box is='img' maxHeight='x40' mi='neg-x8' src={customLogo} alt='Logo' /> : <></>}
 		>
 			<VerticalWizardLayoutTitle>
 				<RegisterTitle />
-				<LoginPoweredBy />
 			</VerticalWizardLayoutTitle>
-			<Box is='h2' fontScale='h2'>
-				{children}
-			</Box>
+			<LoginPoweredBy />
+			{children}
 			<VerticalWizardLayoutFooter>
 				<LoginTerms />
 				<LoginSwitchLanguageFooter />