[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