React UI: cookie policy drawer (#1511)

CHANGELOG.md

@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.0.0] - Unreleased
 ### Added
+- cvat-ui: added cookie policy drawer for login page (<https://github.com/opencv/cvat/pull/1511>)
 - Added `datumaro_project` export format (https://github.com/opencv/cvat/pull/1352)
 
 ### Changed

cvat-ui/package-lock.json

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

cvat-ui/package.json

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

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

@@ -0,0 +1,50 @@
+
+// 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 = () => {
+        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/login-page.tsx

@@ -10,6 +10,7 @@ import Text from 'antd/lib/typography/Text';
 import { Row, Col } from 'antd/lib/grid';
 
 import LoginForm, { LoginData } from './login-form';
+import CookieDrawer from './cookie-policy-drawer';
 
 interface LoginPageComponentProps {
     fetching: boolean;
@@ -31,25 +32,28 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
     } = props;
 
     return (
-        <Row type='flex' justify='center' align='middle'>
+        <>
-            <Col {...sizes}>
+            <Row type='flex' justify='center' align='middle'>
-                <Title level={2}> Login </Title>
+                <Col {...sizes}>
-                <LoginForm
+                    <Title level={2}> Login </Title>
-                    fetching={fetching}
+                    <LoginForm
-                    onSubmit={(loginData: LoginData): void => {
+                        fetching={fetching}
-                        onLogin(loginData.username, loginData.password);
+                        onSubmit={(loginData: LoginData): void => {
-                    }}
+                            onLogin(loginData.username, loginData.password);
-                />
+                        }}
-                <Row type='flex' justify='start' align='top'>
+                    />
-                    <Col>
+                    <Row type='flex' justify='start' align='top'>
-                        <Text strong>
+                        <Col>
-                            New to CVAT? Create
+                            <Text strong>
-                            <Link to='/auth/register'> an account</Link>
+                                New to CVAT? Create
-                        </Text>
+                                <Link to='/auth/register'> an account</Link>
-                    </Col>
+                            </Text>
-                </Row>
+                        </Col>
-            </Col>
+                    </Row>
-        </Row>
+                </Col>
+            </Row>
+            <CookieDrawer />
+        </>
     );
 }
 

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

@@ -10,6 +10,7 @@ import Text from 'antd/lib/typography/Text';
 import { Row, Col } from 'antd/lib/grid';
 
 import RegisterForm, { RegisterData } from './register-form';
+import CookieDrawer from 'components/login-page/cookie-policy-drawer';
 
 interface RegisterPageComponentProps {
     fetching: boolean;
@@ -35,32 +36,35 @@ function RegisterPageComponent(
     } = props;
 
     return (
-        <Row type='flex' justify='center' align='middle'>
+        <>
-            <Col {...sizes}>
+            <Row type='flex' justify='center' align='middle'>
-                <Title level={2}> Create an account </Title>
+                <Col {...sizes}>
-                <RegisterForm
+                    <Title level={2}> Create an account </Title>
-                    fetching={fetching}
+                    <RegisterForm
-                    onSubmit={(registerData: RegisterData): void => {
+                        fetching={fetching}
-                        onRegister(
+                        onSubmit={(registerData: RegisterData): void => {
-                            registerData.username,
+                            onRegister(
-                            registerData.firstName,
+                                registerData.username,
-                            registerData.lastName,
+                                registerData.firstName,
-                            registerData.email,
+                                registerData.lastName,
-                            registerData.password1,
+                                registerData.email,
-                            registerData.password2,
+                                registerData.password1,
-                        );
+                                registerData.password2,
-                    }}
+                            );
-                />
+                        }}
-                <Row type='flex' justify='start' align='top'>
+                    />
-                    <Col>
+                    <Row type='flex' justify='start' align='top'>
-                        <Text strong>
+                        <Col>
-                            Already have an account?
+                            <Text strong>
-                            <Link to='/auth/login'> Login </Link>
+                                Already have an account?
-                        </Text>
+                                <Link to='/auth/login'> Login </Link>
-                    </Col>
+                            </Text>
-                </Row>
+                        </Col>
-            </Col>
+                    </Row>
-        </Row>
+                </Col>
+            </Row>
+            <CookieDrawer />
+        </>
     );
 }
 

cvat-ui/src/cvat-store.ts

@@ -10,7 +10,7 @@ import {
     Reducer,
 } from 'redux';
 import { createLogger } from 'redux-logger';
-import isDev from 'utils/enviroment';
+import {isDev} from 'utils/enviroment';
 
 
 const logger = createLogger({

cvat-ui/src/utils/enviroment.ts

@@ -2,6 +2,10 @@
 //
 // SPDX-License-Identifier: MIT
 
-export default function isDev(): boolean {
+export function isDev(): boolean {
     return process.env.NODE_ENV === 'development';
 }
+
+export function isPublic(): boolean {
+    return process.env.PUBLIC_INSTANCE === 'true';
+}