UserProfileNavigator.jsx 2.89 KB
Newer Older
Patrik Meijer's avatar
Patrik Meijer committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* globals window */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import AccountCircle from '@material-ui/icons/AccountCircle';

export default class UserProfileNavigator extends Component {
    static propTypes = {
        color: PropTypes.string,
        gmeClient: PropTypes.object.isRequired,
        userInfo: PropTypes.object.isRequired, // <host>/api/user
    };

    static defaultProps = {
        color: undefined,
    };

    state = {
        anchorEl: null,
    };

    openMenu = (event) => {
25
26
        const {enable} = this.props.gmeClient.gmeConfig.authentication;
        this.setState({anchorEl: enable ? event.currentTarget : null});
Patrik Meijer's avatar
Patrik Meijer committed
27
28
29
30
31
32
33
34
35
36
    };

    closeMenu = () => {
        this.setState({anchorEl: null});
    };

    goToProfile = () => {
        const {gmeClient} = this.props;
        const tempAnchor = window.document.createElement('a');
        tempAnchor.target = '_self';
37
        tempAnchor.href = `${gmeClient.gmeConfig.client.mountedPath}/profile/home`;
Patrik Meijer's avatar
Patrik Meijer committed
38
39
40
41
42
43
44
45
        window.document.body.appendChild(tempAnchor);
        tempAnchor.click();
    };

    logout = () => {
        const {gmeClient} = this.props;
        const tempAnchor = window.document.createElement('a');
        tempAnchor.target = '_self';
46
        tempAnchor.href = `${gmeClient.gmeConfig.client.mountedPath}/logout`;
Patrik Meijer's avatar
Patrik Meijer committed
47
48
49
50
51
52
53
54
55
56
        window.document.body.appendChild(tempAnchor);
        window.document.cookie = `${gmeClient.gmeConfig.authentication.jwt.cookieId}\
=; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
        window.parent.postMessage('logout', '*');

        tempAnchor.click();
    };

    render() {
        const {anchorEl} = this.state;
57
        const {userInfo, color, gmeClient} = this.props;
Patrik Meijer's avatar
Patrik Meijer committed
58
59
60
61
62
63
64

        if (userInfo === null) {
            return null;
        }

        return (
            <div>
65
66
67
                <Button size="small"
                        onClick={this.openMenu}
                        style={{width: '100%', color}}>
Patrik Meijer's avatar
Patrik Meijer committed
68
                    <AccountCircle/>
69
70
71
72
73
74
75
76
                    <span
                        title={userInfo.displayName || userInfo._id}
                        style={{
                        marginLeft: 5,
                        fontSize: 16,
                        textOverflow: 'ellipsis',
                        overflowX: 'auto',
                    }}> {userInfo.displayName || userInfo._id}</span>
Patrik Meijer's avatar
Patrik Meijer committed
77
78
79
80
81
82
83
84
85
86
87
88
89
                </Button>
                <Menu
                    id="simple-menu"
                    anchorEl={anchorEl}
                    open={Boolean(anchorEl)}
                    onClose={this.closeMenu}
                >
                    <MenuItem onClick={this.goToProfile}>Profile Page</MenuItem>
                    <MenuItem onClick={this.logout}>Logout</MenuItem>
                </Menu>
            </div>);
    }
}