Merge branch '21128-toolbar-context-menu'

[arvados-workbench2.git] / src / views-components / login-form / login-form.tsx

diff --git a/src/views-components/login-form/login-form.tsx b/src/views-components/login-form/login-form.tsx
index 80d59995e8d3add6092104ed5a0c7ef8e534e60f..6c5902653bb3cdf21b1416430dfcdd4af6881ad3 100644 (file)
--- a/src/views-components/login-form/login-form.tsx
+++ b/src/views-components/login-form/login-form.tsx
@@ -2,13 +2,17 @@
 //
 // 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';
 import { Button, Card, CardContent, TextField, CardActions } from '@material-ui/core';
 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 { replace } from 'react-router-redux';
 
 type CssRules = 'root' | 'loginBtn' | 'card' | 'wrapper' | 'progress';
 
@@ -41,12 +45,13 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
     },
 });
 
-interface LoginFormProps {
+type LoginFormProps = DispatchProp<any> & WithStyles<CssRules> & {
     handleSubmit: (username: string, password: string) => AxiosPromise;
-}
+    loginLabel?: string,
+};
 
 export const LoginForm = withStyles(styles)(
-    ({ handleSubmit, classes }: LoginFormProps & WithStyles<CssRules>) => {
+    ({ handleSubmit, loginLabel, dispatch, classes }: LoginFormProps) => {
         const userInput = useRef<HTMLInputElement>(null);
         const [username, setUsername] = useState('');
         const [password, setPassword] = useState('');
@@ -65,25 +70,45 @@ export const LoginForm = withStyles(styles)(
             }
         }, [username, password]);
 
-        // This only run once after render.
+        // This only runs once after render.
         useEffect(() => {
-            userInput.current!.focus();
+            setFocus();
         }, []);
 
+        const setFocus = () => {
+            userInput.current!.focus();
+        };
+
         const handleLogin = () => {
+            setError(false);
+            setHelperText('');
             setSubmitting(true);
             handleSubmit(username, password)
-            .then((response) => {
-                setError(false);
-                console.log("LOGIN SUCESSFUL: ", response);
-                setSubmitting(false);
-            })
-            .catch((err) => {
-                setError(true);
-                console.log("ERROR: ", err.response);
-                setHelperText(`${err.response && err.response.data && err.response.data.errors[0] || 'Error logging in: '+err}`);
-                setSubmitting(false);
-            });
+                .then((response) => {
+                    setSubmitting(false);
+                    if (response.data.uuid && response.data.api_token) {
+                        const apiToken = `v2/${response.data.uuid}/${response.data.api_token}`;
+                        const rd = new URL(window.location.href);
+                        const rdUrl = rd.pathname + rd.search;
+                        dispatch<any>(saveApiToken(apiToken)).finally(
+                            () => {
+                                if ((new URL(window.location.href).pathname) !== '/my-account') {
+                                    rdUrl === '/' ? dispatch(navigateToRootProject) : dispatch(replace(rdUrl))
+                                }
+                            }
+                        );
+                    } else {
+                        setError(true);
+                        setHelperText(response.data.message || 'Please try again');
+                        setFocus();
+                    }
+                })
+                .catch((err) => {
+                    setError(true);
+                    setSubmitting(false);
+                    setHelperText(`${(err.response && err.response.data && err.response.data.errors[0]) || 'Error logging in: ' + err}`);
+                    setFocus();
+                });
         };
 
         const handleKeyPress = (e: any) => {
@@ -98,9 +123,8 @@ export const LoginForm = withStyles(styles)(
             <React.Fragment>
                 <form className={classes.root} noValidate autoComplete="off">
                     <Card className={classes.card}>
-                    <div className={classes.wrapper}>
-                        <CardContent>
-                            <div>
+                        <div className={classes.wrapper}>
+                            <CardContent>
                                 <TextField
                                     inputRef={userInput}
                                     disabled={isSubmitting}
@@ -117,17 +141,16 @@ export const LoginForm = withStyles(styles)(
                                     onChange={(e) => setPassword(e.target.value)}
                                     onKeyPress={(e) => handleKeyPress(e)}
                                 />
-                            </div>
-                        </CardContent>
-                        <CardActions>
-                            <Button variant="contained" size="large" color="primary"
-                                className={classes.loginBtn} onClick={() => handleLogin()}
-                                disabled={isSubmitting || isButtonDisabled}>
-                                Log in
-                            </Button>
-                        </CardActions>
-                        { isSubmitting && <CircularProgress color='secondary' className={classes.progress} />}
-                    </div>
+                            </CardContent>
+                            <CardActions>
+                                <Button variant="contained" size="large" color="primary"
+                                    className={classes.loginBtn} onClick={() => handleLogin()}
+                                    disabled={isSubmitting || isButtonDisabled}>
+                                    {loginLabel || 'Log in'}
+                                </Button>
+                            </CardActions>
+                            {isSubmitting && <CircularProgress color='secondary' className={classes.progress} />}
+                        </div>
                     </Card>
                 </form>
             </React.Fragment>