feat: adds motd to the ui

api/client/webclient/webconfig.go

@@ -107,4 +107,6 @@ type WebConfigAuthSettings struct {
 	LocalConnectorName string `json:"localConnectorName,omitempty"`
 	// PrivateKeyPolicy is the configured private key policy for the cluster.
 	PrivateKeyPolicy keys.PrivateKeyPolicy `json:"privateKeyPolicy,omitempty"`
+	// MOTD is message of the day. MOTD is displayed to users before login.
+	MOTD string `json:"motd"`
 }

lib/web/apiserver.go

@@ -1397,6 +1397,7 @@ func (h *Handler) getWebConfig(w http.ResponseWriter, r *http.Request, p httprou
 			PreferredLocalMFA:  cap.GetPreferredLocalMFA(),
 			LocalConnectorName: localConnectorName,
 			PrivateKeyPolicy:   cap.GetPrivateKeyPolicy(),
+			MOTD:               cap.GetMessageOfTheDay(),
 		}
 	}
 

web/packages/teleport/src/Login/Login.tsx

@@ -14,14 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import logoSrc from 'design/assets/images/teleport-medallion.svg';
 
 import FormLogin from 'teleport/components/FormLogin';
 import Logo from 'teleport/components/LogoHero';
 
 import useLogin, { State } from './useLogin';
+import Motd from './MOTD';
 
 export default function Container() {
   const state = useLogin();
@@ -41,25 +42,35 @@ export function Login({
   isPasswordlessEnabled,
   primaryAuthType,
   privateKeyPolicyEnabled,
+  motd,
 }: State) {
+  const [showMOTD, setShowMOTD] = useState<boolean>(true);
+
+  const acknowledgeMOTD = () => {
+    setShowMOTD(false);
+  };
   return (
     <>
       <Logo src={logoSrc} />
-      <FormLogin
-        title={'Sign in to Teleport'}
-        authProviders={authProviders}
-        auth2faType={auth2faType}
-        preferredMfaType={preferredMfaType}
-        isLocalAuthEnabled={isLocalAuthEnabled}
-        onLoginWithSso={onLoginWithSso}
-        onLoginWithWebauthn={onLoginWithWebauthn}
-        onLogin={onLogin}
-        attempt={attempt}
-        clearAttempt={clearAttempt}
-        isPasswordlessEnabled={isPasswordlessEnabled}
-        primaryAuthType={primaryAuthType}
-        privateKeyPolicyEnabled={privateKeyPolicyEnabled}
-      />
+      {motd && showMOTD ? (
+        <Motd message={motd} onClick={acknowledgeMOTD} />
+      ) : (
+        <FormLogin
+          title={'Sign in to Teleport'}
+          authProviders={authProviders}
+          auth2faType={auth2faType}
+          preferredMfaType={preferredMfaType}
+          isLocalAuthEnabled={isLocalAuthEnabled}
+          onLoginWithSso={onLoginWithSso}
+          onLoginWithWebauthn={onLoginWithWebauthn}
+          onLogin={onLogin}
+          attempt={attempt}
+          clearAttempt={clearAttempt}
+          isPasswordlessEnabled={isPasswordlessEnabled}
+          primaryAuthType={primaryAuthType}
+          privateKeyPolicyEnabled={privateKeyPolicyEnabled}
+        />
+      )}
     </>
   );
 }

web/packages/teleport/src/Login/MOTD/MOTD.tsx

@@ -0,0 +1,41 @@
+/*
+Copyright 2023 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { Card, Box, Text, ButtonPrimary } from 'design';
+
+export function MOTD({ message, onClick }: Props) {
+  return (
+    <Card bg="levels.surface" my={6} mx="auto" width="464px">
+      <Box p={6}>
+        <Text typography="h2" mb={3} textAlign="center" color="text.main">
+          Message of the day!
+        </Text>
+        <Text typography="h5" mb={3} textAlign="center">
+          {message}
+        </Text>
+        <ButtonPrimary width="100%" mt={3} size="large" onClick={onClick}>
+          Continue
+        </ButtonPrimary>
+      </Box>
+    </Card>
+  );
+}
+
+type Props = {
+  message: string;
+  onClick(): void;
+};

web/packages/teleport/src/Login/MOTD/index.ts

@@ -0,0 +1,17 @@
+/*
+Copyright 2023 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export { MOTD as default } from './MOTD';

web/packages/teleport/src/Login/useLogin.ts

@@ -38,6 +38,7 @@ export default function useLogin() {
   const authProviders = cfg.getAuthProviders();
   const auth2faType = cfg.getAuth2faType();
   const isLocalAuthEnabled = cfg.getLocalAuthFlag();
+  const motd = cfg.getMOTD();
 
   function onLogin(email, password, token) {
     attemptActions.start();
@@ -87,6 +88,7 @@ export default function useLogin() {
     isPasswordlessEnabled: cfg.isPasswordlessEnabled(),
     primaryAuthType: cfg.getPrimaryAuthType(),
     privateKeyPolicyEnabled,
+    motd,
   };
 }
 

web/packages/teleport/src/config.ts

@@ -66,6 +66,8 @@ const cfg = {
     authType: 'local' as AuthType,
     preferredLocalMfa: '' as PreferredMfaType,
     privateKeyPolicy: 'none' as PrivateKeyPolicy,
+    // MOTD is message of the day, displayed to users before login.
+    motd: '',
   },
 
   proxyCluster: 'localhost',
@@ -280,6 +282,10 @@ const cfg = {
     return cfg.auth ? cfg.auth.preferredLocalMfa : null;
   },
 
+  getMOTD() {
+    return cfg.auth ? cfg.auth.motd : null;
+  },
+
   getLocalAuthFlag() {
     return cfg.auth.localAuthEnabled;
   },