[ARVADOS-WORKBENCH2] updated: 1.4.1-302-ga308a278

Git user git at public.arvados.org
Mon Mar 30 16:47:33 UTC 2020


Summary of changes:
 src/views-components/login-form/login-form.tsx | 99 ++++++++++++++++----------
 src/views/login-panel/login-panel.tsx          |  2 +-
 2 files changed, 61 insertions(+), 40 deletions(-)

       via  a308a27833843d90405b927ac491fea7c853b91c (commit)
       via  ad66c30d6ccf157a325b4c0df1e413a70d9026e1 (commit)
      from  09881155e1a7e253b73389e03d80d1e4efbee5f3 (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.


commit a308a27833843d90405b927ac491fea7c853b91c
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date:   Mon Mar 30 13:29:48 2020 -0300

    16212: Sets api token on login success, re-focus on login error.
    
    Also, shows an error message if successful login response doesn't have a token.
    
    Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>

diff --git a/src/views-components/login-form/login-form.tsx b/src/views-components/login-form/login-form.tsx
index 80d59995..2d4451c6 100644
--- a/src/views-components/login-form/login-form.tsx
+++ b/src/views-components/login-form/login-form.tsx
@@ -9,6 +9,9 @@ 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';
 
 type CssRules = 'root' | 'loginBtn' | 'card' | 'wrapper' | 'progress';
 
@@ -41,12 +44,12 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
     },
 });
 
-interface LoginFormProps {
+type LoginFormProps = DispatchProp<any> & WithStyles<CssRules> & {
     handleSubmit: (username: string, password: string) => AxiosPromise;
-}
+};
 
 export const LoginForm = withStyles(styles)(
-    ({ handleSubmit, classes }: LoginFormProps & WithStyles<CssRules>) => {
+    ({ handleSubmit, dispatch, classes }: LoginFormProps) => {
         const userInput = useRef<HTMLInputElement>(null);
         const [username, setUsername] = useState('');
         const [password, setPassword] = useState('');
@@ -65,24 +68,37 @@ 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);
+                const apiToken = response.data.token;
+                if (apiToken) {
+                    dispatch<any>(saveApiToken(apiToken)).finally(
+                        () => dispatch(navigateToRootProject));
+                } else {
+                    setError(true);
+                    setHelperText(response.data.message || 'Please try again');
+                    setFocus();
+                }
             })
             .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);
+                setHelperText(`${err.response && err.response.data && err.response.data.errors[0] || 'Error logging in: '+err}`);
+                setFocus();
             });
         };
 
@@ -96,40 +112,38 @@ export const LoginForm = withStyles(styles)(
 
         return (
             <React.Fragment>
-                <form className={classes.root} noValidate autoComplete="off">
-                    <Card className={classes.card}>
+            <form className={classes.root} noValidate autoComplete="off">
+                <Card className={classes.card}>
                     <div className={classes.wrapper}>
-                        <CardContent>
-                            <div>
-                                <TextField
-                                    inputRef={userInput}
-                                    disabled={isSubmitting}
-                                    error={error} fullWidth id="username" type="email"
-                                    label="Username" margin="normal"
-                                    onChange={(e) => setUsername(e.target.value)}
-                                    onKeyPress={(e) => handleKeyPress(e)}
-                                />
-                                <TextField
-                                    disabled={isSubmitting}
-                                    error={error} fullWidth id="password" type="password"
-                                    label="Password" margin="normal"
-                                    helperText={helperText}
-                                    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} />}
+                    <CardContent>
+                        <TextField
+                            inputRef={userInput}
+                            disabled={isSubmitting}
+                            error={error} fullWidth id="username" type="email"
+                            label="Username" margin="normal"
+                            onChange={(e) => setUsername(e.target.value)}
+                            onKeyPress={(e) => handleKeyPress(e)}
+                        />
+                        <TextField
+                            disabled={isSubmitting}
+                            error={error} fullWidth id="password" type="password"
+                            label="Password" margin="normal"
+                            helperText={helperText}
+                            onChange={(e) => setPassword(e.target.value)}
+                            onKeyPress={(e) => handleKeyPress(e)}
+                        />
+                    </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>
-                    </Card>
-                </form>
+                </Card>
+            </form>
             </React.Fragment>
         );
     });
diff --git a/src/views/login-panel/login-panel.tsx b/src/views/login-panel/login-panel.tsx
index e7eadbad..203a2f19 100644
--- a/src/views/login-panel/login-panel.tsx
+++ b/src/views/login-panel/login-panel.tsx
@@ -95,7 +95,7 @@ export const LoginPanel = withStyles(styles)(
 
                 {pamLogin
                 ? <Typography component="div">
-                    <LoginForm handleSubmit={
+                    <LoginForm dispatch={dispatch} handleSubmit={
                         doPAMLogin(`https://${remoteHosts[homeCluster]}`)}/>
                 </Typography>
                 : <Typography component="div" align="right">

commit ad66c30d6ccf157a325b4c0df1e413a70d9026e1
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date:   Mon Mar 30 11:43:43 2020 -0300

    16212: Set focus on username input element.
    
    Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>

diff --git a/src/views-components/login-form/login-form.tsx b/src/views-components/login-form/login-form.tsx
index 404c91ff..80d59995 100644
--- a/src/views-components/login-form/login-form.tsx
+++ b/src/views-components/login-form/login-form.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { useState, useEffect } 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';
@@ -47,6 +47,7 @@ interface LoginFormProps {
 
 export const LoginForm = withStyles(styles)(
     ({ handleSubmit, classes }: LoginFormProps & WithStyles<CssRules>) => {
+        const userInput = useRef<HTMLInputElement>(null);
         const [username, setUsername] = useState('');
         const [password, setPassword] = useState('');
         const [isButtonDisabled, setIsButtonDisabled] = useState(true);
@@ -64,6 +65,11 @@ export const LoginForm = withStyles(styles)(
             }
         }, [username, password]);
 
+        // This only run once after render.
+        useEffect(() => {
+            userInput.current!.focus();
+        }, []);
+
         const handleLogin = () => {
             setSubmitting(true);
             handleSubmit(username, password)
@@ -96,6 +102,7 @@ export const LoginForm = withStyles(styles)(
                         <CardContent>
                             <div>
                                 <TextField
+                                    inputRef={userInput}
                                     disabled={isSubmitting}
                                     error={error} fullWidth id="username" type="email"
                                     label="Username" margin="normal"

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list