Added footer with cookie notice (#3553)

* added footer

* updated license headers

* version++

* fixed eslint issues

* Update cvat-ui/src/components/login-page/intel-footer-drawer.tsx

Co-authored-by: Boris Sekachev <boris.sekachev@intel.com>

* Update cvat-ui/src/components/login-page/intel-footer-drawer.tsx

Co-authored-by: Boris Sekachev <boris.sekachev@intel.com>

* Update cvat-ui/src/components/login-page/intel-footer-drawer.tsx

Co-authored-by: Boris Sekachev <boris.sekachev@intel.com>

* fixed comments

* minor fix

* fixed linter

Co-authored-by: Boris Sekachev <boris.sekachev@intel.com>

cvat-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.23.0",
+  "version": "1.23.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.23.0",
+  "version": "1.23.1",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/components/login-page/cookie-policy-drawer.tsx

@@ -1,49 +0,0 @@
-// Copyright (C) 2020 Intel Corporation
-//
-// SPDX-License-Identifier: MIT
-
-import React, { useState, useEffect } from 'react';
-import Drawer from 'antd/lib/drawer';
-import Paragraph from 'antd/lib/typography/Paragraph';
-import Button from 'antd/lib/button/button';
-
-import { isPublic } from 'utils/enviroment';
-
-function CookieDrawer(): JSX.Element {
-    const [drawerVisible, setDrawerVisible] = useState(false);
-
-    useEffect(() => {
-        const cookiePolicyAccepted = localStorage.getItem('cookiePolicyAccepted');
-        if (cookiePolicyAccepted === null && isPublic()) {
-            setDrawerVisible(true);
-        }
-    }, []);
-
-    const onClose = (): void => {
-        localStorage.setItem('cookiePolicyAccepted', 'true');
-        setDrawerVisible(false);
-    };
-
-    return (
-        <Drawer
-            title='About Cookies on this site:'
-            placement='bottom'
-            closable={false}
-            visible={drawerVisible}
-            height={200}
-            destroyOnClose
-        >
-            <Paragraph>
-                This site uses cookies for functionality, analytics, and advertising purposes as described in our Cookie
-                and Similar Technologies Notice. To see what cookies we serve and set your preferences, please visit our
-                <a href='https://www.intel.com/cookies'> Cookie Consent Tool</a>. By continuing to use our website, you
-                agree to our use of cookies.
-            </Paragraph>
-            <Button onClick={onClose} size='large' type='primary'>
-                Accept
-            </Button>
-        </Drawer>
-    );
-}
-
-export default CookieDrawer;

cvat-ui/src/components/login-page/intel-footer-drawer.tsx

@@ -0,0 +1,27 @@
+// Copyright (C) 2021 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+import { Layout } from 'antd';
+
+import { isPublic } from 'utils/enviroment';
+import consts from 'consts';
+
+function FooterDrawer(): JSX.Element | null {
+    const { Footer } = Layout;
+    const { INTEL_TERMS_OF_USE_URL, INTEL_COOKIES_URL, INTEL_PRIVACY_URL } = consts;
+
+    return isPublic() ? (
+        <Footer style={{ textAlign: 'center', borderTop: '1px solid #e8e8e8' }}>
+            © Intel Corporation |
+            <a target='_blank' rel='noopener noreferrer' href={INTEL_TERMS_OF_USE_URL}> Terms of Use </a>
+            |
+            <a target='_blank' rel='noopener noreferrer' data-cookie-notice='true' href={INTEL_COOKIES_URL}> Cookies </a>
+            |
+            <a target='_blank' rel='noopener noreferrer' href={INTEL_PRIVACY_URL}> Privacy </a>
+        </Footer>
+    ) : null;
+}
+
+export default React.memo(FooterDrawer);

cvat-ui/src/components/login-page/login-page.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -8,9 +8,11 @@ import { Link, withRouter } from 'react-router-dom';
 import Title from 'antd/lib/typography/Title';
 import Text from 'antd/lib/typography/Text';
 import { Row, Col } from 'antd/lib/grid';
+import { Layout } from 'antd';
+
+import FooterDrawer from 'components/login-page/intel-footer-drawer';
 
 import LoginForm, { LoginData } from './login-form';
-import CookieDrawer from './cookie-policy-drawer';
 
 interface LoginPageComponentProps {
     fetching: boolean;
@@ -27,11 +29,14 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
         xl: { span: 4 },
     };
 
+    const { Content } = Layout;
+
     const { fetching, onLogin, renderResetPassword } = props;
 
     return (
-        <>
+        <Layout>
-            <Row justify='center' align='middle'>
+            <Content>
+                <Row justify='center' align='middle' style={{ height: '100%' }}>
                     <Col {...sizes}>
                         <Title level={2}> Login </Title>
                         <LoginForm
@@ -59,8 +64,9 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
                         )}
                     </Col>
                 </Row>
-            <CookieDrawer />
+            </Content>
-        </>
+            <FooterDrawer />
+        </Layout>
     );
 }
 

cvat-ui/src/components/register-page/register-page.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -9,9 +9,10 @@ import { Link, withRouter } from 'react-router-dom';
 import Title from 'antd/lib/typography/Title';
 import Text from 'antd/lib/typography/Text';
 import { Row, Col } from 'antd/lib/grid';
+import { Layout } from 'antd';
 
 import { UserAgreement } from 'reducers/interfaces';
-import CookieDrawer from 'components/login-page/cookie-policy-drawer';
+import FooterDrawer from 'components/login-page/intel-footer-drawer';
 import RegisterForm, { RegisterData, UserConfirmation } from './register-form';
 
 interface RegisterPageComponentProps {
@@ -38,10 +39,12 @@ function RegisterPageComponent(props: RegisterPageComponentProps & RouteComponen
     };
 
     const { fetching, userAgreements, onRegister } = props;
+    const { Content } = Layout;
 
     return (
-        <>
+        <Layout>
-            <Row justify='center' align='middle'>
+            <Content>
+                <Row justify='center' align='middle' style={{ height: '100%' }}>
                     <Col {...sizes}>
                         <Title level={2}> Create an account </Title>
                         <RegisterForm
@@ -69,8 +72,9 @@ function RegisterPageComponent(props: RegisterPageComponentProps & RouteComponen
                         </Row>
                     </Col>
                 </Row>
-            <CookieDrawer />
+            </Content>
-        </>
+            <FooterDrawer />
+        </Layout>
     );
 }
 

cvat-ui/src/components/reset-password-confirm-page/reset-password-confirm-page.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -6,10 +6,12 @@ import React from 'react';
 import { connect } from 'react-redux';
 import Title from 'antd/lib/typography/Title';
 import { Row, Col } from 'antd/lib/grid';
+import { Layout } from 'antd';
 
 import { CombinedState } from 'reducers/interfaces';
 import { resetPasswordAsync } from 'actions/auth-actions';
 
+import FooterDrawer from 'components/login-page/intel-footer-drawer';
 import ResetPasswordConfirmForm, { ResetPasswordConfirmData } from './reset-password-confirm-form';
 
 interface StateToProps {
@@ -46,8 +48,12 @@ function ResetPasswordPagePageComponent(props: ResetPasswordConfirmPageComponent
 
     const { fetching, onResetPasswordConfirm } = props;
 
+    const { Content } = Layout;
+
     return (
-        <Row justify='center' align='middle'>
+        <Layout>
+            <Content>
+                <Row justify='center' align='middle' style={{ height: '100%' }}>
                     <Col {...sizes}>
                         <Title level={2}> Change password </Title>
                         <ResetPasswordConfirmForm
@@ -63,6 +69,9 @@ function ResetPasswordPagePageComponent(props: ResetPasswordConfirmPageComponent
                         />
                     </Col>
                 </Row>
+            </Content>
+            <FooterDrawer />
+        </Layout>
     );
 }
 

cvat-ui/src/components/reset-password-page/reset-password-page.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -8,9 +8,11 @@ import { connect } from 'react-redux';
 import Title from 'antd/lib/typography/Title';
 import Text from 'antd/lib/typography/Text';
 import { Row, Col } from 'antd/lib/grid';
+import { Layout } from 'antd';
 
 import { requestPasswordResetAsync } from 'actions/auth-actions';
 import { CombinedState } from 'reducers/interfaces';
+import FooterDrawer from 'components/login-page/intel-footer-drawer';
 import ResetPasswordForm, { ResetPasswordData } from './reset-password-form';
 
 interface StateToProps {
@@ -46,9 +48,12 @@ function ResetPasswordPagePageComponent(props: ResetPasswordPageComponentProps):
     };
 
     const { fetching, onResetPassword } = props;
+    const { Content } = Layout;
 
     return (
-        <Row justify='center' align='middle'>
+        <Layout>
+            <Content>
+                <Row justify='center' align='middle' style={{ height: '100%' }}>
                     <Col {...sizes}>
                         <Title level={2}> Reset password </Title>
                         <ResetPasswordForm
@@ -67,6 +72,9 @@ function ResetPasswordPagePageComponent(props: ResetPasswordPageComponentProps):
                         </Row>
                     </Col>
                 </Row>
+            </Content>
+            <FooterDrawer />
+        </Layout>
     );
 }
 

cvat-ui/src/consts.ts

@@ -22,6 +22,9 @@ const LATEST_COMMENTS_SHOWN_QUICK_ISSUE = 3;
 const QUICK_ISSUE_INCORRECT_POSITION_TEXT = 'Wrong position';
 const QUICK_ISSUE_INCORRECT_ATTRIBUTE_TEXT = 'Wrong attribute';
 const DEFAULT_PROJECT_SUBSETS = ['Train', 'Test', 'Validation'];
+const INTEL_TERMS_OF_USE_URL = 'https://www.intel.com/content/www/us/en/legal/terms-of-use.html';
+const INTEL_COOKIES_URL = 'https://www.intel.com/content/www/us/en/privacy/intel-cookie-notice.html';
+const INTEL_PRIVACY_URL = 'https://www.intel.com/content/www/us/en/privacy/intel-privacy-notice.html';
 
 export default {
     UNDEFINED_ATTRIBUTE_VALUE,
@@ -41,4 +44,7 @@ export default {
     QUICK_ISSUE_INCORRECT_POSITION_TEXT,
     QUICK_ISSUE_INCORRECT_ATTRIBUTE_TEXT,
     DEFAULT_PROJECT_SUBSETS,
+    INTEL_TERMS_OF_USE_URL,
+    INTEL_COOKIES_URL,
+    INTEL_PRIVACY_URL,
 };

cvat-ui/src/utils/enviroment.ts

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT