127 lines
3.0 KiB
JavaScript
127 lines
3.0 KiB
JavaScript
import React, { useState, useCallback } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import {
|
|
Avatar,
|
|
Collapse,
|
|
Tooltip,
|
|
Divider,
|
|
Typography,
|
|
Card,
|
|
CardContent,
|
|
CardActions,
|
|
CardHeader,
|
|
IconButton
|
|
} from "@material-ui/core";
|
|
import { AccountBox, RotateLeft, ExitToApp } from "@material-ui/icons";
|
|
import LoginComponent from "./LoginComponent";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
card: {
|
|
minWidth: 350
|
|
},
|
|
onRight: {
|
|
marginLeft: "auto"
|
|
},
|
|
avatar: {
|
|
backgroundColor: theme.palette.primary.main
|
|
},
|
|
collapseContent: {
|
|
padding: 0
|
|
}
|
|
}));
|
|
|
|
const LoggedInComponent = ({
|
|
credentials,
|
|
token,
|
|
onChange,
|
|
onLogin,
|
|
onLogout
|
|
}) => {
|
|
const classes = useStyles();
|
|
const { t } = useTranslation();
|
|
const [expanded, setExpanded] = useState(false);
|
|
|
|
const handleExpandLogin = () => {
|
|
setExpanded(!expanded);
|
|
};
|
|
|
|
const getTokenValidFrom = useCallback(() => {
|
|
const tokenValidFrom = token?.validFrom;
|
|
|
|
if (tokenValidFrom) {
|
|
const valueForDisplay = t("LONG_DATE", { date: tokenValidFrom });
|
|
return valueForDisplay;
|
|
}
|
|
|
|
return "N/A";
|
|
}, [token, t]);
|
|
|
|
return (
|
|
<Card className={classes.card}>
|
|
<CardHeader
|
|
avatar={
|
|
<Avatar aria-label="user" className={classes.avatar}>
|
|
<AccountBox />
|
|
</Avatar>
|
|
}
|
|
title={
|
|
<strong>
|
|
{t("Login.Hello", { username: credentials.userName })}
|
|
</strong>
|
|
}
|
|
subheader={
|
|
<Tooltip title={t("Login.AuthenticationDate")}>
|
|
<Typography variant="caption" display="block">
|
|
{getTokenValidFrom()}
|
|
</Typography>
|
|
</Tooltip>
|
|
}
|
|
/>
|
|
|
|
<CardActions disableSpacing>
|
|
<Tooltip title={t("Login.ChangeUser")}>
|
|
<IconButton
|
|
size="small"
|
|
className={classes.onRight}
|
|
onClick={handleExpandLogin}
|
|
aria-expanded={expanded}
|
|
aria-label="show login component"
|
|
>
|
|
<RotateLeft />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title={t("Login.Logout")}>
|
|
<IconButton size="small" onClick={onLogout}>
|
|
<ExitToApp />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</CardActions>
|
|
<Divider />
|
|
<Collapse in={expanded} timeout="auto" unmountOnExit>
|
|
<CardContent
|
|
className={classes.collapseContent}
|
|
style={{ paddingBottom: "5px" }}
|
|
>
|
|
<LoginComponent
|
|
credentials={credentials}
|
|
onChange={onChange}
|
|
onLogin={onLogin}
|
|
/>
|
|
</CardContent>
|
|
</Collapse>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
LoggedInComponent.propTypes = {
|
|
credentials: PropTypes.object.isRequired,
|
|
token: PropTypes.object,
|
|
onChange: PropTypes.func.isRequired,
|
|
onLogin: PropTypes.func.isRequired,
|
|
onLogout: PropTypes.func.isRequired
|
|
};
|
|
|
|
export default LoggedInComponent;
|