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