Allow to login into UI with token from api/v1/auth/login

CHANGELOG.md

@@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.2.0] - Unreleased
 
 ### Added
-
+-   Ability to login into CVAT-UI with token from api/v1/auth/login (<https://github.com/openvinotoolkit/cvat/pull/2234>)
 -   Added eslint-prettier integration & code autoformat in precommiting hook
 -   Added layout grids toggling ('ctrl + alt + Enter')
 -   Added password reset functionality (<https://github.com/opencv/cvat/pull/2058>)

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cvat-ui",
-    "version": "1.9.11",
+    "version": "1.9.12",
     "description": "CVAT single-page application",
     "main": "src/index.tsx",
     "scripts": {
@@ -73,6 +73,7 @@
         "prop-types": "^15.7.2",
         "react": "^16.9.0",
         "react-color": "^2.18.1",
+        "react-cookie": "^4.0.3",
         "react-dom": "^16.9.0",
         "react-hotkeys": "^2.0.0",
         "react-redux": "^7.1.1",

cvat-ui/src/components/cvat-app.tsx

@@ -14,6 +14,7 @@ import Header from 'components/header/header';
 import ResetPasswordPageConfirmComponent from 'components/reset-password-confirm-page/reset-password-confirm-page';
 import ResetPasswordPageComponent from 'components/reset-password-page/reset-password-page';
 import ShorcutsDialog from 'components/shortcuts-dialog/shortcuts-dialog';
+import LoginWithTokenComponent from 'components/login-with-token/login-with-token';
 import AnnotationPageContainer from 'containers/annotation-page/annotation-page';
 import CreateTaskPageContainer from 'containers/create-task-page/create-task-page';
 import LoginPageContainer from 'containers/login-page/login-page';
@@ -32,7 +33,6 @@ import showPlatformNotification, { platformInfo, stopNotifications } from 'utils
 import '../styles.scss';
 
 
-
 interface CVATAppProps {
     loadFormats: () => void;
     loadUsers: () => void;
@@ -336,6 +336,7 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
                     <Switch>
                         <Route exact path='/auth/register' component={RegisterPageContainer} />
                         <Route exact path='/auth/login' component={LoginPageContainer} />
+                        <Route exact path='/auth/login-with-token/:sessionId/:token' component={LoginWithTokenComponent} />
                         <Route exact path='/auth/password/reset' component={ResetPasswordPageComponent} />
                         <Route exact path='/auth/password/reset/confirm' component={ResetPasswordPageConfirmComponent} />
                         <Redirect to='/auth/login' />

cvat-ui/src/components/login-with-token/login-with-token.tsx

@@ -0,0 +1,27 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React, { useEffect } from 'react';
+import { Redirect, useParams } from 'react-router';
+import { useCookies } from 'react-cookie';
+
+export default function LoginWithTokenComponent(): JSX.Element {
+    const { sessionId, token } = useParams();
+    const [cookies, setCookie] = useCookies(['sessionid', 'csrftoken']);
+
+    const expires1y = new Date(new Date().setFullYear(new Date().getFullYear() + 1));
+    const expires2w = new Date(new Date().setDate(new Date().getDate() + 13));
+
+    setCookie('sessionid', sessionId, { path: '/', expires: expires2w });
+    setCookie('csrftoken', token, { path: '/', expires: expires1y });
+
+    useEffect(() => () => {
+        window.location.reload();
+    }, [cookies.sessionid, cookies.csrftoken]);
+
+    if (cookies.sessionid && cookies.csrftoken) {
+        return (<Redirect to='/tasks' />);
+    }
+    return (<></>);
+}