116 lines
3.2 KiB
JavaScript
116 lines
3.2 KiB
JavaScript
import React, { useState, useMemo } 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";
|
|
import { useToast } from "../../../hooks";
|
|
import styles from "../styles";
|
|
import { useTuitioUser } from "@flare/tuitio-react-client";
|
|
|
|
const useStyles = makeStyles(styles);
|
|
|
|
const LoggedInComponent = ({ credentials, onChange, onLogin, onLogout }) => {
|
|
const classes = useStyles();
|
|
const { t } = useTranslation();
|
|
const [expanded, setExpanded] = useState(false);
|
|
const { info } = useToast();
|
|
const { lastLoginDate, userName } = useTuitioUser();
|
|
|
|
const handleExpandLogin = () => {
|
|
setExpanded(!expanded);
|
|
};
|
|
|
|
const loginDate = useMemo(() => {
|
|
if (lastLoginDate) {
|
|
const valueForDisplay = t("LONG_DATE", { date: lastLoginDate });
|
|
return valueForDisplay;
|
|
}
|
|
|
|
return "N/A";
|
|
}, [lastLoginDate, t]);
|
|
|
|
const handleLogin = async () => {
|
|
const result = await onLogin();
|
|
if (result) {
|
|
setExpanded(false);
|
|
info(t("Login.UserChanged"));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={classes.loggedInContent}>
|
|
<Card className={classes.loggedInCard}>
|
|
<CardHeader
|
|
avatar={
|
|
<Avatar aria-label="user" className={classes.avatar}>
|
|
<AccountBox />
|
|
</Avatar>
|
|
}
|
|
title={<strong>{t("Login.Hello", { username: userName })}</strong>}
|
|
subheader={
|
|
<Tooltip title={t("Login.AuthenticationDate")}>
|
|
<Typography variant="caption" display="block">
|
|
{loginDate}
|
|
</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={handleLogin}
|
|
/>
|
|
</CardContent>
|
|
</Collapse>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
LoggedInComponent.propTypes = {
|
|
credentials: PropTypes.object.isRequired,
|
|
onChange: PropTypes.func.isRequired,
|
|
onLogin: PropTypes.func.isRequired,
|
|
onLogout: PropTypes.func.isRequired
|
|
};
|
|
|
|
export default LoggedInComponent;
|