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