Skip to content

Commit

Permalink
React UI: cookie policy drawer (cvat-ai#1511)
Browse files Browse the repository at this point in the history
  • Loading branch information
ActiveChooN authored and Fernando Martínez González committed Aug 3, 2020
1 parent 483a3f2 commit 2e73ad7
Show file tree
Hide file tree
Showing 8 changed files with 112 additions and 49 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion cvat-ui/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion cvat-ui/package.json
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
50 changes: 50 additions & 0 deletions cvat-ui/src/components/login-page/cookie-policy-drawer.tsx
Original file line number Diff line number Diff line change
@@ -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;
42 changes: 23 additions & 19 deletions cvat-ui/src/components/login-page/login-page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -31,25 +32,28 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
} = props;

return (
<Row type='flex' justify='center' align='middle'>
<Col {...sizes}>
<Title level={2}> Login </Title>
<LoginForm
fetching={fetching}
onSubmit={(loginData: LoginData): void => {
onLogin(loginData.username, loginData.password);
}}
/>
<Row type='flex' justify='start' align='top'>
<Col>
<Text strong>
New to CVAT? Create
<Link to='/auth/register'> an account</Link>
</Text>
</Col>
</Row>
</Col>
</Row>
<>
<Row type='flex' justify='center' align='middle'>
<Col {...sizes}>
<Title level={2}> Login </Title>
<LoginForm
fetching={fetching}
onSubmit={(loginData: LoginData): void => {
onLogin(loginData.username, loginData.password);
}}
/>
<Row type='flex' justify='start' align='top'>
<Col>
<Text strong>
New to CVAT? Create
<Link to='/auth/register'> an account</Link>
</Text>
</Col>
</Row>
</Col>
</Row>
<CookieDrawer />
</>
);
}

Expand Down
56 changes: 30 additions & 26 deletions cvat-ui/src/components/register-page/register-page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -35,32 +36,35 @@ function RegisterPageComponent(
} = props;

return (
<Row type='flex' justify='center' align='middle'>
<Col {...sizes}>
<Title level={2}> Create an account </Title>
<RegisterForm
fetching={fetching}
onSubmit={(registerData: RegisterData): void => {
onRegister(
registerData.username,
registerData.firstName,
registerData.lastName,
registerData.email,
registerData.password1,
registerData.password2,
);
}}
/>
<Row type='flex' justify='start' align='top'>
<Col>
<Text strong>
Already have an account?
<Link to='/auth/login'> Login </Link>
</Text>
</Col>
</Row>
</Col>
</Row>
<>
<Row type='flex' justify='center' align='middle'>
<Col {...sizes}>
<Title level={2}> Create an account </Title>
<RegisterForm
fetching={fetching}
onSubmit={(registerData: RegisterData): void => {
onRegister(
registerData.username,
registerData.firstName,
registerData.lastName,
registerData.email,
registerData.password1,
registerData.password2,
);
}}
/>
<Row type='flex' justify='start' align='top'>
<Col>
<Text strong>
Already have an account?
<Link to='/auth/login'> Login </Link>
</Text>
</Col>
</Row>
</Col>
</Row>
<CookieDrawer />
</>
);
}

Expand Down
2 changes: 1 addition & 1 deletion cvat-ui/src/cvat-store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
6 changes: 5 additions & 1 deletion cvat-ui/src/utils/enviroment.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}

0 comments on commit 2e73ad7

Please sign in to comment.