81 lines
2.2 KiB
JavaScript
81 lines
2.2 KiB
JavaScript
|
import React from "react";
|
||
|
|
import { makeStyles } from "@material-ui/core/styles";
|
||
|
|
import Card from "@material-ui/core/Card";
|
||
|
|
import CardHeader from "@material-ui/core/CardHeader";
|
||
|
|
import CardContent from "@material-ui/core/CardContent";
|
||
|
|
import CardActions from "@material-ui/core/CardActions";
|
||
|
|
import { Avatar, Collapse, Tooltip, Divider } from "@material-ui/core";
|
||
|
|
import IconButton from "@material-ui/core/IconButton";
|
||
|
|
import { AccountBox, RotateLeft, ExitToApp } from "@material-ui/icons";
|
||
|
|
import LoginComponent from "./LoginComponent";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
|
||
|
|
const useStyles = makeStyles(theme => ({
|
||
|
|
root: {
|
||
|
|
minWidth: 350
|
||
|
|
},
|
||
|
|
onRight: {
|
||
|
|
marginLeft: "auto"
|
||
|
|
},
|
||
|
|
avatar: {
|
||
|
|
backgroundColor: theme.palette.primary.main
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
|
||
|
|
const LoggedInComponent = ({ credentials, onChange, onLogin, onLogout }) => {
|
||
|
|
const classes = useStyles();
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const [expanded, setExpanded] = React.useState(false);
|
||
|
|
|
||
|
|
const handleExpandLogin = () => {
|
||
|
|
setExpanded(!expanded);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card className={classes.root}>
|
||
|
|
<CardHeader
|
||
|
|
avatar={
|
||
|
|
<Avatar aria-label="recipe" className={classes.avatar}>
|
||
|
|
<AccountBox />
|
||
|
|
</Avatar>
|
||
|
|
}
|
||
|
|
title={<strong>{t("Server.ActiveSession")}</strong>}
|
||
|
|
subheader="September 14, 2016"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
<LoginComponent
|
||
|
|
credentials={credentials}
|
||
|
|
onChange={onChange}
|
||
|
|
onLogin={onLogin}
|
||
|
|
/>
|
||
|
|
</CardContent>
|
||
|
|
</Collapse>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
LoggedInComponent.propTypes = {};
|
||
|
|
|
||
|
|
export default LoggedInComponent;
|