src/views-components/login-form/login-form.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { useState, useEffect, useRef } from 'react';
   7 import { withStyles, WithStyles, StyleRulesCallback } from '@material-ui/core/styles';
   8 import CircularProgress from '@material-ui/core/CircularProgress';
   9 import { Button, Card, CardContent, TextField, CardActions } from '@material-ui/core';
  10 import { green } from '@material-ui/core/colors';
  11 import { AxiosPromise } from 'axios';
  12 import { DispatchProp } from 'react-redux';
  13 import { saveApiToken } from 'store/auth/auth-action';
  14 import { navigateToRootProject } from 'store/navigation/navigation-action';
  15 import { replace } from 'react-router-redux';
  16
  17 type CssRules = 'root' | 'loginBtn' | 'card' | 'wrapper' | 'progress';
  18
  19 const styles: StyleRulesCallback<CssRules> = theme => ({
  20     root: {
  21         display: 'flex',
  22         flexWrap: 'wrap',
  23         width: '100%',
  24         margin: `${theme.spacing.unit} auto`
  25     },
  26     loginBtn: {
  27         marginTop: theme.spacing.unit,
  28         flexGrow: 1
  29     },
  30     card: {
  31         marginTop: theme.spacing.unit,
  32         width: '100%'
  33     },
  34     wrapper: {
  35         margin: theme.spacing.unit,
  36         position: 'relative',
  37     },
  38     progress: {
  39         color: green[500],
  40         position: 'absolute',
  41         top: '50%',
  42         left: '50%',
  43         marginTop: -12,
  44         marginLeft: -12,
  45     },
  46 });
  47
  48 type LoginFormProps = DispatchProp<any> & WithStyles<CssRules> & {
  49     handleSubmit: (username: string, password: string) => AxiosPromise;
  50     loginLabel?: string,
  51 };
  52
  53 export const LoginForm = withStyles(styles)(
  54     ({ handleSubmit, loginLabel, dispatch, classes }: LoginFormProps) => {
  55         const userInput = useRef<HTMLInputElement>(null);
  56         const [username, setUsername] = useState('');
  57         const [password, setPassword] = useState('');
  58         const [isButtonDisabled, setIsButtonDisabled] = useState(true);
  59         const [isSubmitting, setSubmitting] = useState(false);
  60         const [helperText, setHelperText] = useState('');
  61         const [error, setError] = useState(false);
  62
  63         useEffect(() => {
  64             setError(false);
  65             setHelperText('');
  66             if (username.trim() && password.trim()) {
  67                 setIsButtonDisabled(false);
  68             } else {
  69                 setIsButtonDisabled(true);
  70             }
  71         }, [username, password]);
  72
  73         // This only runs once after render.
  74         useEffect(() => {
  75             setFocus();
  76         }, []);
  77
  78         const setFocus = () => {
  79             userInput.current!.focus();
  80         };
  81
  82         const handleLogin = () => {
  83             setError(false);
  84             setHelperText('');
  85             setSubmitting(true);
  86             handleSubmit(username, password)
  87             .then((response) => {
  88                 setSubmitting(false);
  89                 if (response.data.uuid && response.data.api_token) {
  90                     const apiToken = `v2/${response.data.uuid}/${response.data.api_token}`;
  91                     const rd = new URL(window.location.href);
  92                     const rdUrl = rd.pathname + rd.search;
  93                     dispatch<any>(saveApiToken(apiToken)).finally(
  94                         () => rdUrl === '/' ? dispatch(navigateToRootProject) : dispatch(replace(rdUrl))
  95                     );
  96                 } else {
  97                     setError(true);
  98                     setHelperText(response.data.message || 'Please try again');
  99                     setFocus();
 100                 }
 101             })
 102             .catch((err) => {
 103                 setError(true);
 104                 setSubmitting(false);
 105                 setHelperText(`${(err.response && err.response.data && err.response.data.errors[0]) || 'Error logging in: '+err}`);
 106                 setFocus();
 107             });
 108         };
 109
 110         const handleKeyPress = (e: any) => {
 111             if (e.keyCode === 13 || e.which === 13) {
 112                 if (!isButtonDisabled) {
 113                     handleLogin();
 114                 }
 115             }
 116         };
 117
 118         return (
 119             <React.Fragment>
 120             <form className={classes.root} noValidate autoComplete="off">
 121                 <Card className={classes.card}>
 122                     <div className={classes.wrapper}>
 123                     <CardContent>
 124                         <TextField
 125                             inputRef={userInput}
 126                             disabled={isSubmitting}
 127                             error={error} fullWidth id="username" type="email"
 128                             label="Username" margin="normal"
 129                             onChange={(e) => setUsername(e.target.value)}
 130                             onKeyPress={(e) => handleKeyPress(e)}
 131                         />
 132                         <TextField
 133                             disabled={isSubmitting}
 134                             error={error} fullWidth id="password" type="password"
 135                             label="Password" margin="normal"
 136                             helperText={helperText}
 137                             onChange={(e) => setPassword(e.target.value)}
 138                             onKeyPress={(e) => handleKeyPress(e)}
 139                         />
 140                     </CardContent>
 141                     <CardActions>
 142                         <Button variant="contained" size="large" color="primary"
 143                             className={classes.loginBtn} onClick={() => handleLogin()}
 144                             disabled={isSubmitting || isButtonDisabled}>
 145                             {loginLabel || 'Log in'}
 146                         </Button>
 147                     </CardActions>
 148                     { isSubmitting && <CircularProgress color='secondary' className={classes.progress} />}
 149                     </div>
 150                 </Card>
 151             </form>
 152             </React.Fragment>
 153         );
 154     });