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