New authentication UI (cvat-ai#5181)

* Add social accounts authentication && improve email confirmation

* Pass env variables to docker

* Update helm chart

* Update email verification templates

* Small refactoring

* Send email verification && redirect to /auth/email-verification-sent

* added new login form

* added main assets

* added main social buttons

* changed reset password form

* refactored reset password page

* Fix helm chart

* Fix typo

* Pass enabled advanced auth methods to client

* Rename class

* Fix

* Fix helm

* Fix github scope

* changed register page

* adjusted no social auth methods

* Some fixes

* Fix schema generation

* Fixes

* Apply comments

* Update changelog

* added responsiveness, refactored inputs

* cleanup

* fixed email-confirmed.tsx

* updated reset page, changed style on register page

* added fonts, fixed some ui problems

* removed some code

* fixed index.html

* made resizing less expressed

* fixed form sizing, issue#5166

* fixed submiting form by enter

* made toggle bigger, fixed headers

* updated versions

* removed extra lines

* fixed fields on form

* changed tests

* fixed more tests

* fixed comments

* reverted header

* added grid-unit-size for height, removed for fonts

* added new animation

Co-authored-by: Maya <maya17grd@gmail.com>

CHANGELOG.md

@@ -18,7 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Mask tools are supported now (brush, eraser, polygon-plus, polygon-minus, returning masks
 from online detectors & interactors) (<https://github.com/opencv/cvat/pull/4543>)
 - Added Webhooks (<https://github.com/opencv/cvat/pull/4863>)
-- Authentication with social accounts google & github (<https://github.com/opencv/cvat/pull/5147>)
+- Authentication with social accounts google & github (<https://github.com/opencv/cvat/pull/5147>, <https://github.com/opencv/cvat/pull/5181>)
 - REST API tests to export job datasets & annotations and validate their structure  (<https://github.com/opencv/cvat/pull/5160>)
 
 ### Changed

cvat-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-core",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "Part of Computer Vision Tool which presents an interface for client-side integration",
   "main": "src/api.ts",
   "scripts": {

cvat-core/src/api-implementation.ts

@@ -63,17 +63,15 @@ const config = require('./config').default;
             firstName,
             lastName,
             email,
-            password1,
-            password2,
+            password,
             userConfirmations,
         ) => {
             const user = await serverProxy.server.register(
                 username,
                 firstName,
                 lastName,
                 email,
-                password1,
-                password2,
+                password,
                 userConfirmations,
             );
 

cvat-core/src/api.ts

@@ -127,22 +127,20 @@ function build() {
              * @param {string} firstName A first name for the new account
              * @param {string} lastName A last name for the new account
              * @param {string} email A email address for the new account
-             * @param {string} password1 A password for the new account
-             * @param {string} password2 The confirmation password for the new account
+             * @param {string} password A password for the new account
              * @param {Object} userConfirmations An user confirmations of terms of use if needed
              * @returns {Object} response data
              * @throws {module:API.cvat.exceptions.PluginError}
              * @throws {module:API.cvat.exceptions.ServerError}
              */
-            async register(username, firstName, lastName, email, password1, password2, userConfirmations) {
+            async register(username, firstName, lastName, email, password, userConfirmations) {
                 const result = await PluginRegistry.apiWrapper(
                     cvat.server.register,
                     username,
                     firstName,
                     lastName,
                     email,
-                    password1,
-                    password2,
+                    password,
                     userConfirmations,
                 );
                 return result;
@@ -173,6 +171,10 @@ function build() {
                 const result = await PluginRegistry.apiWrapper(cvat.server.logout);
                 return result;
             },
+            async advancedAuthentication() {
+                const result = await PluginRegistry.apiWrapper(cvat.server.advancedAuthentication);
+                return result;
+            },
             /**
              * Method returns enabled advanced authentication methods
              * @method advancedAuthentication

cvat-core/src/server-proxy.ts

@@ -313,16 +313,16 @@ class ServerProxy {
             }
         }
 
-        async function register(username, firstName, lastName, email, password1, password2, confirmations) {
+        async function register(username, firstName, lastName, email, password, confirmations) {
             let response = null;
             try {
                 const data = JSON.stringify({
                     username,
                     first_name: firstName,
                     last_name: lastName,
                     email,
-                    password1,
-                    password2,
+                    password1: password,
+                    password2: password,
                     confirmations,
                 });
                 response = await Axios.post(`${config.backendAPI}/auth/register`, data, {

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.43.0",
+  "version": "1.43.1",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/actions/auth-actions.ts

@@ -91,8 +91,7 @@ export const registerAsync = (
     firstName: string,
     lastName: string,
     email: string,
-    password1: string,
-    password2: string,
+    password: string,
     confirmations: UserConfirmation[],
 ): ThunkAction => async (dispatch) => {
     dispatch(authActions.register());
@@ -103,8 +102,7 @@ export const registerAsync = (
             firstName,
             lastName,
             email,
-            password1,
-            password2,
+            password,
             confirmations,
         );
 

cvat-ui/src/assets/index.d.ts

@@ -0,0 +1,5 @@
+// Copyright (C) 2022 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+declare module '*.svg';

cvat-ui/src/components/email-confirmation-pages/email-confirmed.tsx

@@ -1,4 +1,5 @@
 // Copyright (C) 2021-2022 Intel Corporation
+// Copyright (C) 2022 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -17,9 +18,9 @@ const { Countdown } = Statistic;
  */
 
 function EmailConfirmationPage(): JSX.Element {
-    const linkRef = useRef();
-    const onFinish = () => {
-        linkRef.current.click();
+    const linkRef = useRef<HTMLAnchorElement>(null);
+    const onFinish = (): void => {
+        linkRef.current?.click();
     };
     return (
         <Layout>