src/views/login-panel/login-panel.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 { connect, DispatchProp } from 'react-redux';
   7 import { Grid, Typography, Button, Select } from '@material-ui/core';
   8 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
   9 import { login, authActions } from 'store/auth/auth-action';
  10 import { ArvadosTheme } from 'common/custom-theme';
  11 import { RootState } from 'store/store';
  12 import { LoginForm } from 'views-components/login-form/login-form';
  13 import Axios from 'axios';
  14 import { Config } from 'common/config';
  15
  16 type CssRules = 'root' | 'container' | 'title' | 'content' | 'content__bolder' | 'button';
  17
  18 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  19     root: {
  20         position: 'relative',
  21         backgroundColor: theme.palette.grey["200"],
  22         '&::after': {
  23             content: `''`,
  24             position: 'absolute',
  25             top: 0,
  26             left: 0,
  27             bottom: 0,
  28             right: 0,
  29             opacity: 0.2,
  30         }
  31     },
  32     container: {
  33         width: '560px',
  34         zIndex: 10
  35     },
  36     title: {
  37         marginBottom: theme.spacing.unit * 6,
  38         color: theme.palette.grey["800"]
  39     },
  40     content: {
  41         marginBottom: theme.spacing.unit * 3,
  42         lineHeight: '1.2rem',
  43         color: theme.palette.grey["800"]
  44     },
  45     'content__bolder': {
  46         fontWeight: 'bolder'
  47     },
  48     button: {
  49         boxShadow: 'none'
  50     }
  51 });
  52
  53 const doPasswordLogin = (url: string) => (username: string, password: string) => {
  54     const formData: string[] = [];
  55     formData.push('username='+encodeURIComponent(username));
  56     formData.push('password='+encodeURIComponent(password));
  57     return Axios.post(`${url}/arvados/v1/users/authenticate`, formData.join('&'), {
  58         headers: {
  59             'Content-Type': 'application/x-www-form-urlencoded'
  60         },
  61     });
  62 };
  63
  64 type LoginPanelProps = DispatchProp<any> & WithStyles<CssRules> & {
  65     remoteHosts: { [key: string]: string },
  66     homeCluster: string,
  67     localCluster: string,
  68     loginCluster: string,
  69     welcomePage: string,
  70     passwordLogin: boolean,
  71 };
  72
  73 const loginOptions = ['LDAP', 'PAM', 'Test'];
  74
  75 export const requirePasswordLogin = (config: Config): boolean => {
  76     if (config && config.clusterConfig && config.clusterConfig.Login) {
  77         return loginOptions
  78             .filter(loginOption => !!config.clusterConfig.Login[loginOption])
  79             .map(loginOption => config.clusterConfig.Login[loginOption].Enable)
  80             .find(enabled => enabled === true) || false;
  81     }
  82     return false;
  83 };
  84
  85 export const LoginPanel = withStyles(styles)(
  86     connect((state: RootState) => ({
  87         remoteHosts: state.auth.remoteHosts,
  88         homeCluster: state.auth.homeCluster,
  89         localCluster: state.auth.localCluster,
  90         loginCluster: state.auth.loginCluster,
  91         welcomePage: state.auth.config.clusterConfig.Workbench.WelcomePageHTML,
  92         passwordLogin: requirePasswordLogin(state.auth.remoteHostsConfig[state.auth.loginCluster || state.auth.homeCluster]),
  93         }))(({ classes, dispatch, remoteHosts, homeCluster, localCluster, loginCluster, welcomePage, passwordLogin }: LoginPanelProps) => {
  94         const loginBtnLabel = `Log in${(localCluster !== homeCluster && loginCluster !== homeCluster) ? " to "+localCluster+" with user from "+homeCluster : ''}`;
  95
  96         return (<Grid container justify="center" alignItems="center"
  97             className={classes.root}
  98             style={{ marginTop: 56, overflowY: "auto", height: "100%" }}>
  99             <Grid item className={classes.container}>
 100                 <Typography component="div">
 101                     <div dangerouslySetInnerHTML={{ __html: welcomePage }} style={{ margin: "1em" }} />
 102                 </Typography>
 103                 {Object.keys(remoteHosts).length > 1 && loginCluster === "" &&
 104
 105                     <Typography component="div" align="right">
 106                         <label>Please select the cluster that hosts your user account:</label>
 107                         <Select native value={homeCluster} style={{ margin: "1em" }}
 108                             onChange={(event) => dispatch(authActions.SET_HOME_CLUSTER(event.target.value))}>
 109                             {Object.keys(remoteHosts).map((k) => <option key={k} value={k}>{k}</option>)}
 110                         </Select>
 111                     </Typography>}
 112
 113                 {passwordLogin
 114                 ? <Typography component="div">
 115                     <LoginForm dispatch={dispatch}
 116                         loginLabel={loginBtnLabel}
 117                         handleSubmit={doPasswordLogin(`https://${remoteHosts[loginCluster || homeCluster]}`)}/>
 118                 </Typography>
 119                 : <Typography component="div" align="right">
 120                     <Button variant="contained" color="primary" style={{ margin: "1em" }}
 121                         className={classes.button}
 122                         onClick={() => dispatch(login(localCluster, homeCluster, loginCluster, remoteHosts))}>
 123                         {loginBtnLabel}
 124                     </Button>
 125                 </Typography>}
 126             </Grid>
 127         </Grid >);}
 128     ));