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>
main
Andrey Zhavoronkov 5 years ago committed by GitHub
parent 1da3c96b5a
commit 987b2efd5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

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

@ -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": {

@ -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;

@ -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);

@ -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>
);
}

@ -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>
);
}

@ -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,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>
);
}

@ -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,27 +48,33 @@ function ResetPasswordPagePageComponent(props: ResetPasswordPageComponentProps):
};
const { fetching, onResetPassword } = props;
const { Content } = Layout;
return (
<Row justify='center' align='middle'>
<Col {...sizes}>
<Title level={2}> Reset password </Title>
<ResetPasswordForm
fetching={fetching}
onSubmit={(resetPasswordData: ResetPasswordData): void => {
onResetPassword(resetPasswordData.email);
}}
/>
<Row justify='start' align='top'>
<Col>
<Text strong>
Go to
<Link to='/auth/login'> login page </Link>
</Text>
<Layout>
<Content>
<Row justify='center' align='middle' style={{ height: '100%' }}>
<Col {...sizes}>
<Title level={2}> Reset password </Title>
<ResetPasswordForm
fetching={fetching}
onSubmit={(resetPasswordData: ResetPasswordData): void => {
onResetPassword(resetPasswordData.email);
}}
/>
<Row justify='start' align='top'>
<Col>
<Text strong>
Go to
<Link to='/auth/login'> login page </Link>
</Text>
</Col>
</Row>
</Col>
</Row>
</Col>
</Row>
</Content>
<FooterDrawer />
</Layout>
);
}

@ -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,
};

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

Loading…
Cancel
Save