Allow to login into UI with token from api/v1/auth/login (#2234)

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

* Update changelog

* style

* Rev

* Rev: Fixed style. Added cva-ui version to UI. Fixed endless redirection with wrong tokens

* eslint

* revert cvat-core/package-lock.json

* Rev: Fixed import order and return type

* Revert bindings

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-lock.json

@@ -1049,6 +1049,11 @@
             "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
             "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="
         },
+        "@types/cookie": {
+            "version": "0.3.3",
+            "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+            "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+        },
         "@types/eslint-visitor-keys": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
@@ -3161,8 +3166,7 @@
         "cookie": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-            "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
+            "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
-            "dev": true
         },
         "cookie-signature": {
             "version": "1.0.6",
@@ -11391,9 +11395,9 @@
                     }
                 },
                 "svg.draw.js": {
-                    "version": "2.0.3",
+                    "version": "2.0.4",
-                    "resolved": "https://registry.npmjs.org/svg.draw.js/-/svg.draw.js-2.0.3.tgz",
+                    "resolved": "https://registry.npmjs.org/svg.draw.js/-/svg.draw.js-2.0.4.tgz",
-                    "integrity": "sha512-GGK7vBzwdEgr5fJUupqDqYPhQBXxrtBd4CcrgqAt7S4/5REmF6JTSuITeAgfVlfXftOO90t5OqLOtJ4IEEUFVw==",
+                    "integrity": "sha512-NMbecB0vg11AP76B0aLfI2cX7g9WurPM8x3yKxuJ9feM1vkI1GVjWZZjWpo3mkEzB1UJ8pKngaPaUCIOGi8uUA==",
                     "requires": {
                         "svg.js": "2.x.x"
                     }
@@ -13974,12 +13978,11 @@
                     "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
                 },
                 "axios": {
-                    "version": "0.18.1",
+                    "version": "0.20.0",
-                    "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz",
+                    "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
-                    "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==",
+                    "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
                     "requires": {
-                        "follow-redirects": "1.5.10",
+                        "follow-redirects": "^1.10.0"
-                        "is-buffer": "^2.0.2"
                     }
                 },
                 "babel-code-frame": {
@@ -14841,20 +14844,18 @@
                             "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ=="
                         },
                         "async-mutex": {
-                            "version": "0.1.4",
+                            "version": "0.2.4",
-                            "resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.1.4.tgz",
+                            "resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.2.4.tgz",
-                            "integrity": "sha512-zVWTmAnxxHaeB2B1te84oecI8zTDJ/8G49aVBblRX6be0oq6pAybNcUSxwfgVOmOjSCvN4aYZAqwtyNI8e1YGw=="
+                            "integrity": "sha512-fcQKOXUKMQc57JlmjBCHtkKNrfGpHyR7vu18RfuLfeTAf4hK9PgOadPR5cDrBQ682zasrLUhJFe7EKAHJOduDg==",
+                            "requires": {
+                                "tslib": "^2.0.0"
+                            }
                         },
                         "big.js": {
                             "version": "5.2.2",
                             "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
                             "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
                         },
-                        "core-js": {
-                            "version": "2.3.0",
-                            "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.3.0.tgz",
-                            "integrity": "sha1-+rg/uwstjchfpjbEudNMdUIMbWU="
-                        },
                         "core-util-is": {
                             "version": "1.0.2",
                             "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -14865,11 +14866,6 @@
                             "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
                             "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
                         },
-                        "es6-promise": {
-                            "version": "3.0.2",
-                            "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.0.2.tgz",
-                            "integrity": "sha1-AQ1YWEI6XxGJeWZfRkhqlcbuK7Y="
-                        },
                         "fast-deep-equal": {
                             "version": "3.1.1",
                             "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
@@ -14909,21 +14905,20 @@
                             }
                         },
                         "jszip": {
-                            "version": "3.1.5",
+                            "version": "3.5.0",
-                            "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.1.5.tgz",
+                            "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.5.0.tgz",
-                            "integrity": "sha512-5W8NUaFRFRqTOL7ZDDrx5qWHJyBXy6velVudIzQUSoqAAYqzSh2Z7/m0Rf1QbmQJccegD0r+YZxBjzqoBiEeJQ==",
+                            "integrity": "sha512-WRtu7TPCmYePR1nazfrtuF216cIVon/3GWOvHS9QR5bIwSbnxtdpma6un3jyGGNhHsKCSzn5Ypk+EkDRvTGiFA==",
                             "requires": {
-                                "core-js": "~2.3.0",
+                                "lie": "~3.3.0",
-                                "es6-promise": "~3.0.2",
-                                "lie": "~3.1.0",
                                 "pako": "~1.0.2",
-                                "readable-stream": "~2.0.6"
+                                "readable-stream": "~2.3.6",
+                                "set-immediate-shim": "~1.0.1"
                             }
                         },
                         "lie": {
-                            "version": "3.1.1",
+                            "version": "3.3.0",
-                            "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+                            "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
-                            "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
+                            "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
                             "requires": {
                                 "immediate": "~3.0.5"
                             }
@@ -14949,9 +14944,9 @@
                             "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
                         },
                         "process-nextick-args": {
-                            "version": "1.0.7",
+                            "version": "2.0.1",
-                            "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+                            "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-                            "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M="
+                            "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
                         },
                         "punycode": {
                             "version": "2.1.1",
@@ -14959,18 +14954,24 @@
                             "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
                         },
                         "readable-stream": {
-                            "version": "2.0.6",
+                            "version": "2.3.7",
-                            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
+                            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-                            "integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=",
+                            "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
                             "requires": {
                                 "core-util-is": "~1.0.0",
-                                "inherits": "~2.0.1",
+                                "inherits": "~2.0.3",
                                 "isarray": "~1.0.0",
-                                "process-nextick-args": "~1.0.6",
+                                "process-nextick-args": "~2.0.0",
-                                "string_decoder": "~0.10.x",
+                                "safe-buffer": "~5.1.1",
+                                "string_decoder": "~1.1.1",
                                 "util-deprecate": "~1.0.1"
                             }
                         },
+                        "safe-buffer": {
+                            "version": "5.1.2",
+                            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+                        },
                         "schema-utils": {
                             "version": "0.4.7",
                             "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
@@ -14980,10 +14981,23 @@
                                 "ajv-keywords": "^3.1.0"
                             }
                         },
+                        "set-immediate-shim": {
+                            "version": "1.0.1",
+                            "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
+                            "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E="
+                        },
                         "string_decoder": {
-                            "version": "0.10.31",
+                            "version": "1.1.1",
-                            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+                            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-                            "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+                            "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+                            "requires": {
+                                "safe-buffer": "~5.1.0"
+                            }
+                        },
+                        "tslib": {
+                            "version": "2.0.2",
+                            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.2.tgz",
+                            "integrity": "sha512-wAH28hcEKwna96/UacuWaVspVLkg4x1aDM9JlzqaQTOFczCktkVAb5fmXChgandR1EraDPs2w8P+ozM+oafwxg=="
                         },
                         "uri-js": {
                             "version": "4.2.2",
@@ -15053,14 +15067,6 @@
                         }
                     }
                 },
-                "debug": {
-                    "version": "3.1.0",
-                    "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-                    "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-                    "requires": {
-                        "ms": "2.0.0"
-                    }
-                },
                 "decamelize": {
                     "version": "1.2.0",
                     "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
@@ -16458,12 +16464,9 @@
                     }
                 },
                 "follow-redirects": {
-                    "version": "1.5.10",
+                    "version": "1.13.0",
-                    "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+                    "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-                    "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+                    "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
-                    "requires": {
-                        "debug": "=3.1.0"
-                    }
                 },
                 "for-in": {
                     "version": "1.0.2",
@@ -17529,11 +17532,6 @@
                         "binary-extensions": "^1.0.0"
                     }
                 },
-                "is-buffer": {
-                    "version": "2.0.4",
-                    "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
-                    "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
-                },
                 "is-callable": {
                     "version": "1.1.5",
                     "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz",
@@ -28618,6 +28616,16 @@
                 "tinycolor2": "^1.4.1"
             }
         },
+        "react-cookie": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.0.3.tgz",
+            "integrity": "sha512-cmi6IpdVgTSvjqssqIEvo779Gfqc4uPGHRrKMEdHcqkmGtPmxolGfsyKj95bhdLEKqMdbX8MLBCwezlnhkHK0g==",
+            "requires": {
+                "@types/hoist-non-react-statics": "^3.0.1",
+                "hoist-non-react-statics": "^3.0.0",
+                "universal-cookie": "^4.0.0"
+            }
+        },
         "react-dom": {
             "version": "16.11.0",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.11.0.tgz",
@@ -31041,6 +31049,15 @@
                 "imurmurhash": "^0.1.4"
             }
         },
+        "universal-cookie": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+            "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+            "requires": {
+                "@types/cookie": "^0.3.3",
+                "cookie": "^0.4.0"
+            }
+        },
         "unpipe": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

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 (<></>);
+}