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 <[email protected]> * Update cvat-ui/src/components/login-page/intel-footer-drawer.tsx Co-authored-by: Boris Sekachev <[email protected]> * Update cvat-ui/src/components/login-page/intel-footer-drawer.tsx Co-authored-by: Boris Sekachev <[email protected]> * fixed comments * minor fix * fixed linter Co-authored-by: Boris Sekachev <[email protected]>
cvat-ai · Aug 18, 2021 · 987b2ef · 987b2ef
1 parent 1da3c96
commit 987b2ef
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 147 deletions.
diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json
diff --git a/cvat-ui/package.json b/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": {

diff --git a/cvat-ui/src/components/login-page/cookie-policy-drawer.tsx b/cvat-ui/src/components/login-page/cookie-policy-drawer.tsx
diff --git a/cvat-ui/src/components/login-page/intel-footer-drawer.tsx b/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);
diff --git a/cvat-ui/src/components/login-page/login-page.tsx b/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,40 +29,44 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
         xl: { span: 4 },
     };
 
+    const { Content } = Layout;
+
     const { fetching, onLogin, renderResetPassword } = props;
 
     return (
-        <>
-            <Row justify='center' align='middle'>
-                <Col {...sizes}>
-                    <Title level={2}> Login </Title>
-                    <LoginForm
-                        fetching={fetching}
-                        onSubmit={(loginData: LoginData): void => {
-                            onLogin(loginData.username, loginData.password);
-                        }}
-                    />
-                    <Row justify='start' align='top'>
-                        <Col>
-                            <Text strong>
-                                New to CVAT? Create
-                                <Link to='/auth/register'> an account</Link>
-                            </Text>
-                        </Col>
-                    </Row>
-                    {renderResetPassword && (
+        <Layout>
+            <Content>
+                <Row justify='center' align='middle' style={{ height: '100%' }}>
+                    <Col {...sizes}>
+                        <Title level={2}> Login </Title>
+                        <LoginForm
+                            fetching={fetching}
+                            onSubmit={(loginData: LoginData): void => {
+                                onLogin(loginData.username, loginData.password);
+                            }}
+                        />
                         <Row justify='start' align='top'>
                             <Col>
                                 <Text strong>
-                                    <Link to='/auth/password/reset'>Forgot your password?</Link>
+                                    New to CVAT? Create
+                                    <Link to='/auth/register'> an account</Link>
                                 </Text>
                             </Col>
                         </Row>
-                    )}
-                </Col>
-            </Row>
-            <CookieDrawer />
-        </>
+                        {renderResetPassword && (
+                            <Row justify='start' align='top'>
+                                <Col>
+                                    <Text strong>
+                                        <Link to='/auth/password/reset'>Forgot your password?</Link>
+                                    </Text>
+                                </Col>
+                            </Row>
+                        )}
+                    </Col>
+                </Row>
+            </Content>
+            <FooterDrawer />
+        </Layout>
     );
 }
 

diff --git a/cvat-ui/src/components/register-page/register-page.tsx b/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,39 +39,42 @@ function RegisterPageComponent(props: RegisterPageComponentProps & RouteComponen
     };
 
     const { fetching, userAgreements, onRegister } = props;
+    const { Content } = Layout;
 
     return (
-        <>
-            <Row justify='center' align='middle'>
-                <Col {...sizes}>
-                    <Title level={2}> Create an account </Title>
-                    <RegisterForm
-                        fetching={fetching}
-                        userAgreements={userAgreements}
-                        onSubmit={(registerData: RegisterData): void => {
-                            onRegister(
-                                registerData.username,
-                                registerData.firstName,
-                                registerData.lastName,
-                                registerData.email,
-                                registerData.password1,
-                                registerData.password2,
-                                registerData.confirmations,
-                            );
-                        }}
-                    />
-                    <Row justify='start' align='top'>
-                        <Col>
-                            <Text strong>
-                                Already have an account?
-                                <Link to='/auth/login'> Login </Link>
-                            </Text>
-                        </Col>
-                    </Row>
-                </Col>
-            </Row>
-            <CookieDrawer />
-        </>
+        <Layout>
+            <Content>
+                <Row justify='center' align='middle' style={{ height: '100%' }}>
+                    <Col {...sizes}>
+                        <Title level={2}> Create an account </Title>
+                        <RegisterForm
+                            fetching={fetching}
+                            userAgreements={userAgreements}
+                            onSubmit={(registerData: RegisterData): void => {
+                                onRegister(
+                                    registerData.username,
+                                    registerData.firstName,
+                                    registerData.lastName,
+                                    registerData.email,
+                                    registerData.password1,
+                                    registerData.password2,
+                                    registerData.confirmations,
+                                );
+                            }}
+                        />
+                        <Row justify='start' align='top'>
+                            <Col>
+                                <Text strong>
+                                    Already have an account?
+                                    <Link to='/auth/login'> Login </Link>
+                                </Text>
+                            </Col>
+                        </Row>
+                    </Col>
+                </Row>
+            </Content>
+            <FooterDrawer />
+        </Layout>
     );
 }
 

diff --git a/cvat-ui/src/components/reset-password-confirm-page/reset-password-confirm-page.tsx b/cvat-ui/src/components/reset-password-confirm-page/reset-password-confirm-page.tsx
@@ -1,15 +1,17 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
 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,23 +48,30 @@ function ResetPasswordPagePageComponent(props: ResetPasswordConfirmPageComponent
 
     const { fetching, onResetPasswordConfirm } = props;
 
+    const { Content } = Layout;
+
     return (
-        <Row justify='center' align='middle'>
-            <Col {...sizes}>
-                <Title level={2}> Change password </Title>
-                <ResetPasswordConfirmForm
-                    fetching={fetching}
-                    onSubmit={(resetPasswordConfirmData: ResetPasswordConfirmData): void => {
-                        onResetPasswordConfirm(
-                            resetPasswordConfirmData.newPassword1,
-                            resetPasswordConfirmData.newPassword2,
-                            resetPasswordConfirmData.uid,
-                            resetPasswordConfirmData.token,
-                        );
-                    }}
-                />
-            </Col>
-        </Row>
+        <Layout>
+            <Content>
+                <Row justify='center' align='middle' style={{ height: '100%' }}>
+                    <Col {...sizes}>
+                        <Title level={2}> Change password </Title>
+                        <ResetPasswordConfirmForm
+                            fetching={fetching}
+                            onSubmit={(resetPasswordConfirmData: ResetPasswordConfirmData): void => {
+                                onResetPasswordConfirm(
+                                    resetPasswordConfirmData.newPassword1,
+                                    resetPasswordConfirmData.newPassword2,
+                                    resetPasswordConfirmData.uid,
+                                    resetPasswordConfirmData.token,
+                                );
+                            }}
+                        />
+                    </Col>
+                </Row>
+            </Content>
+            <FooterDrawer />
+        </Layout>
     );
 }