Add olly playgrounds terms of use window for login page

Signed-off-by: Ryan Liang <[email protected]>

public/apps/login/login-page.tsx

@@ -25,6 +25,13 @@ import {
   EuiForm,
   EuiFormRow,
   EuiHorizontalRule,
+  EuiLink,
+  EuiModal,
+  EuiModalBody,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
+  EuiModalFooter,
 } from '@elastic/eui';
 import { CoreStart } from '../../../../../src/core/public';
 import { ClientConfigType } from '../../types';
@@ -35,6 +42,7 @@ import {
   OPENID_AUTH_LOGIN,
   SAML_AUTH_LOGIN_WITH_FRAGMENT,
 } from '../../../common';
+import { termsOfUseText } from '../../utils/terms-of-use-utils';
 
 interface LoginPageDeps {
   http: CoreStart['http'];
@@ -82,6 +90,11 @@ export function LoginPage(props: LoginPageDeps) {
   const [usernameValidationFailed, setUsernameValidationFailed] = useState(false);
   const [passwordValidationFailed, setPasswordValidationFailed] = useState(false);
 
+  const [isTermsModalVisible, setIsTermsModalVisible] = useState(false);
+
+  const openTermsModal = () => setIsTermsModalVisible(true);
+  const closeTermsModal = () => setIsTermsModalVisible(false);
+
   let errorLabel: any = null;
   if (loginFailed) {
     errorLabel = (
@@ -146,6 +159,36 @@ export function LoginPage(props: LoginPageDeps) {
     );
   };
 
+  const renderTermsModal = () => {
+    if (!isTermsModalVisible) return null;
+
+    const termsParagraphs = termsOfUseText
+      .trim()
+      .split('\n\n')
+      .map((paragraph, index, array) => (
+        <p
+          key={`terms-paragraph-${index}`}
+          style={{ lineHeight: '1.2', marginBottom: index === array.length - 1 ? '0' : '20px' }}
+        >
+          {paragraph.trim()}
+        </p>
+      ));
+
+    return (
+      <EuiOverlayMask>
+        <EuiModal onClose={closeTermsModal} maxWidth={650}>
+          <EuiModalHeader>
+            <EuiModalHeaderTitle>Terms of Use</EuiModalHeaderTitle>
+          </EuiModalHeader>
+          <EuiModalBody>{termsParagraphs}</EuiModalBody>
+          <EuiModalFooter>
+            <EuiButton onClick={closeTermsModal}>Close</EuiButton>
+          </EuiModalFooter>
+        </EuiModal>
+      </EuiOverlayMask>
+    );
+  };
+
   const formOptions = (options: string | string[]) => {
     let formBody = [];
     const formBodyOp = [];
@@ -276,6 +319,13 @@ export function LoginPage(props: LoginPageDeps) {
         {formOptions(props.config.auth.type)}
         {errorLabel}
       </EuiForm>
+      <EuiSpacer size="s" />
+      <EuiText size="s" textAlign="left">
+        {'By logging in, you accept the '}
+        <EuiLink onClick={openTermsModal}> {'terms of use'}</EuiLink>
+        {' for the OpenSearch playground.'}
+      </EuiText>
+      {renderTermsModal()}
     </EuiListGroup>
   );
 }

public/utils/terms-of-use-utils.tsx

@@ -0,0 +1,29 @@
+/*
+ *   Copyright OpenSearch Contributors
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file 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 const termsOfUseText: string = `
+These terms apply to your access and use of the OpenSearch Playground. The OpenSearch Playground provides an interactive OpenSearch Dashboards experience, 
+which may include capabilities and functionality that are not yet launched as part of the OpenSearch software. The OpenSearch Playground is made available 
+to you for evaluation and feedback purposes only. We recommend that no sensitive or personal data should be provided by the user. Use of the OpenSearch 
+Playground is subject to the Privacy Notice and, in addition, OpenSearch will own and may use and evaluate all content provided by the user in the 
+OpenSearch Playground for its own purposes. 
+\n
+OpenSearch Playground may incorporate one or more machine learning models. Output generated by a machine learning model is probabilistic, and generative AI 
+may produce inaccurate or inappropriate content. The OpenSearch Playground relies on synthetic datasets and you should not rely on factual assertions output 
+to make consequential decisions. Consequential decisions include those impacting a person’s fundamental rights, health, or safety (e.g., medical diagnosis, judicial 
+proceedings, access to critical benefits like housing or government benefits, opportunities like education, decisions to hire or terminate employees, or access to 
+lending/credit, and providing legal, financial, or medical advice). Machine learning models provided in the OpenSearch Playground cannot dynamically retrieve 
+information, and outputs may not account for events or changes to underlying facts occurring after a machine learning model is trained. 
+`;