src/views/inactive-panel/inactive-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 { Dispatch } from 'redux';
   7 import { connect } from 'react-redux';
   8 import { Grid, Typography, Button } from '@material-ui/core';
   9 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
  10 import { ArvadosTheme } from 'common/custom-theme';
  11 import { navigateToLinkAccount } from 'store/navigation/navigation-action';
  12 import { RootState } from 'store/store';
  13 import { sanitizeHTML } from 'common/html-sanitize';
  14
  15 export type CssRules = 'root' | 'ontop' | 'title';
  16
  17 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  18     root: {
  19         position: 'relative',
  20         backgroundColor: theme.palette.grey["200"],
  21         background: 'url("arvados-logo-big.png") no-repeat center center',
  22         backgroundBlendMode: 'soft-light',
  23     },
  24     ontop: {
  25         zIndex: 10
  26     },
  27     title: {
  28         marginBottom: theme.spacing.unit * 6,
  29         color: theme.palette.grey["800"]
  30     }
  31 });
  32
  33 export interface InactivePanelActionProps {
  34     startLinking: () => void;
  35 }
  36
  37 const mapDispatchToProps = (dispatch: Dispatch): InactivePanelActionProps => ({
  38     startLinking: () => {
  39         dispatch<any>(navigateToLinkAccount);
  40     }
  41 });
  42
  43 const mapStateToProps = (state: RootState): InactivePanelStateProps => ({
  44     inactivePageText: state.auth.config.clusterConfig.Workbench.InactivePageHTML,
  45     isLoginClusterFederation: state.auth.config.clusterConfig.Login.LoginCluster !== '',
  46 });
  47
  48 export interface InactivePanelStateProps {
  49     inactivePageText: string;
  50     isLoginClusterFederation: boolean;
  51 }
  52
  53 type InactivePanelProps = WithStyles<CssRules> & InactivePanelActionProps & InactivePanelStateProps;
  54
  55 export const InactivePanelRoot = ({ classes, startLinking, inactivePageText, isLoginClusterFederation }: InactivePanelProps) =>
  56     <Grid container justify="center" alignItems="center" direction="column" spacing={24}
  57         className={classes.root}
  58         style={{ marginTop: 56, height: "100%" }}>
  59         <Grid item>
  60             <Typography>
  61                 <span dangerouslySetInnerHTML={{ __html: sanitizeHTML(inactivePageText) }} style={{ margin: "1em" }} />
  62             </Typography>
  63         </Grid>
  64         { !isLoginClusterFederation
  65         ? <><Grid item>
  66             <Typography align="center">
  67             If you would like to use this login to access another account click "Link Account".
  68             </Typography>
  69         </Grid>
  70         <Grid item>
  71             <Button className={classes.ontop} color="primary" variant="contained" onClick={() => startLinking()}>
  72                 Link Account
  73             </Button>
  74         </Grid></>
  75         : <><Grid item>
  76             <Typography align="center">
  77                 If you would like to use this login to access another account, please contact your administrator.
  78             </Typography>
  79         </Grid></> }
  80     </Grid >;
  81
  82 export const InactivePanel = connect(mapStateToProps, mapDispatchToProps)(
  83     withStyles(styles)(InactivePanelRoot));