Merge remote-tracking branch 'origin/main' into 18207-Workbench2-is-not-clearing...
[arvados-workbench2.git] / src / views-components / login-form / login-form.tsx
index 2d4451c6a30925836e37658aaf2c9143e579010e..aac1364207420247b0e620b3ee3b2679cda9d08e 100644 (file)
@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+import React from 'react';
 import { useState, useEffect, useRef } from 'react';
 import { withStyles, WithStyles, StyleRulesCallback } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
@@ -10,8 +10,8 @@ import { Button, Card, CardContent, TextField, CardActions } from '@material-ui/
 import { green } from '@material-ui/core/colors';
 import { AxiosPromise } from 'axios';
 import { DispatchProp } from 'react-redux';
-import { saveApiToken } from '~/store/auth/auth-action';
-import { navigateToRootProject } from '~/store/navigation/navigation-action';
+import { saveApiToken } from 'store/auth/auth-action';
+import { navigateToRootProject } from 'store/navigation/navigation-action';
 
 type CssRules = 'root' | 'loginBtn' | 'card' | 'wrapper' | 'progress';
 
@@ -46,10 +46,11 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
 
 type LoginFormProps = DispatchProp<any> & WithStyles<CssRules> & {
     handleSubmit: (username: string, password: string) => AxiosPromise;
+    loginLabel?: string,
 };
 
 export const LoginForm = withStyles(styles)(
-    ({ handleSubmit, dispatch, classes }: LoginFormProps) => {
+    ({ handleSubmit, loginLabel, dispatch, classes }: LoginFormProps) => {
         const userInput = useRef<HTMLInputElement>(null);
         const [username, setUsername] = useState('');
         const [password, setPassword] = useState('');
@@ -84,8 +85,8 @@ export const LoginForm = withStyles(styles)(
             handleSubmit(username, password)
             .then((response) => {
                 setSubmitting(false);
-                const apiToken = response.data.token;
-                if (apiToken) {
+                if (response.data.uuid && response.data.api_token) {
+                    const apiToken = `v2/${response.data.uuid}/${response.data.api_token}`;
                     dispatch<any>(saveApiToken(apiToken)).finally(
                         () => dispatch(navigateToRootProject));
                 } else {
@@ -97,7 +98,7 @@ export const LoginForm = withStyles(styles)(
             .catch((err) => {
                 setError(true);
                 setSubmitting(false);
-                setHelperText(`${err.response && err.response.data && err.response.data.errors[0] || 'Error logging in: '+err}`);
+                setHelperText(`${(err.response && err.response.data && err.response.data.errors[0]) || 'Error logging in: '+err}`);
                 setFocus();
             });
         };
@@ -137,7 +138,7 @@ export const LoginForm = withStyles(styles)(
                         <Button variant="contained" size="large" color="primary"
                             className={classes.loginBtn} onClick={() => handleLogin()}
                             disabled={isSubmitting || isButtonDisabled}>
-                            Log in
+                            {loginLabel || 'Log in'}
                         </Button>
                     </CardActions>
                     { isSubmitting && <CircularProgress color='secondary' className={classes.progress} />}