From 2e73ad7b3f9c513ccb8a7f3dcb7fa8085ed57dee Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Wed, 13 May 2020 23:01:13 +0300 Subject: [PATCH] React UI: cookie policy drawer (#1511) --- CHANGELOG.md | 1 + cvat-ui/package-lock.json | 2 +- cvat-ui/package.json | 2 +- .../login-page/cookie-policy-drawer.tsx | 50 +++++++++++++++++ .../src/components/login-page/login-page.tsx | 42 +++++++------- .../register-page/register-page.tsx | 56 ++++++++++--------- cvat-ui/src/cvat-store.ts | 2 +- cvat-ui/src/utils/enviroment.ts | 6 +- 8 files changed, 112 insertions(+), 49 deletions(-) create mode 100644 cvat-ui/src/components/login-page/cookie-policy-drawer.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 68e1d1386854..bd171feccfc1 100644 --- a/CHANGELOG.md +++ b/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 () - Added `datumaro_project` export format (https://github.com/opencv/cvat/pull/1352) ### Changed diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 3e2c48f40b39..1106d159acb0 100644 --- a/cvat-ui/package-lock.json +++ b/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": { diff --git a/cvat-ui/package.json b/cvat-ui/package.json index f9b49018c56e..baf227c21c92 100644 --- a/cvat-ui/package.json +++ b/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": { diff --git a/cvat-ui/src/components/login-page/cookie-policy-drawer.tsx b/cvat-ui/src/components/login-page/cookie-policy-drawer.tsx new file mode 100644 index 000000000000..80a05122c574 --- /dev/null +++ b/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 ( + + + 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 Cookie Consent Tool. + By continuing to use our website, you agree to our use of cookies. + + + + ); +} + +export default CookieDrawer; diff --git a/cvat-ui/src/components/login-page/login-page.tsx b/cvat-ui/src/components/login-page/login-page.tsx index 950cd4e846cf..87cebb51446e 100644 --- a/cvat-ui/src/components/login-page/login-page.tsx +++ b/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 ( - - - Login - { - onLogin(loginData.username, loginData.password); - }} - /> - - - - New to CVAT? Create - an account - - - - - + <> + + + Login + { + onLogin(loginData.username, loginData.password); + }} + /> + + + + New to CVAT? Create + an account + + + + + + + ); } diff --git a/cvat-ui/src/components/register-page/register-page.tsx b/cvat-ui/src/components/register-page/register-page.tsx index 23b3b2050451..2ab78de9bbf3 100644 --- a/cvat-ui/src/components/register-page/register-page.tsx +++ b/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 ( - - - Create an account - { - onRegister( - registerData.username, - registerData.firstName, - registerData.lastName, - registerData.email, - registerData.password1, - registerData.password2, - ); - }} - /> - - - - Already have an account? - Login - - - - - + <> + + + Create an account + { + onRegister( + registerData.username, + registerData.firstName, + registerData.lastName, + registerData.email, + registerData.password1, + registerData.password2, + ); + }} + /> + + + + Already have an account? + Login + + + + + + + ); } diff --git a/cvat-ui/src/cvat-store.ts b/cvat-ui/src/cvat-store.ts index ce3cbf660b2c..1c528c4ec928 100644 --- a/cvat-ui/src/cvat-store.ts +++ b/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({ diff --git a/cvat-ui/src/utils/enviroment.ts b/cvat-ui/src/utils/enviroment.ts index 137e9dd1a905..677dbc6f370e 100644 --- a/cvat-ui/src/utils/enviroment.ts +++ b/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'; +}