1 files changed, 122 insertions, 0 deletions
diff --git a/webapp/components/user_profile.jsx b/webapp/components/user_profile.jsx
new file mode 100644
index 000000000..d83ab7454
--- /dev/null
+++ b/webapp/components/user_profile.jsx
@@ -0,0 +1,122 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import * as Utils from 'utils/utils.jsx';
+
+import {FormattedMessage} from 'react-intl';
+
+import {Popover, OverlayTrigger} from 'react-bootstrap';
+
+var id = 0;
+
+function nextId() {
+    id = id + 1;
+    return id;
+}
+
+import React from 'react';
+
+export default class UserProfile extends React.Component {
+    constructor(props) {
+        super(props);
+        this.uniqueId = nextId();
+    }
+    render() {
+        let name = '...';
+        let email = '';
+        let profileImg = '';
+        if (this.props.user) {
+            name = Utils.displayUsername(this.props.user.id);
+            email = this.props.user.email;
+            profileImg = '/api/v1/users/' + this.props.user.id + '/image?time=' + this.props.user.update_at;
+        }
+
+        if (this.props.overwriteName) {
+            name = this.props.overwriteName;
+        }
+
+        if (this.props.overwriteImage) {
+            profileImg = this.props.overwriteImage;
+        }
+
+        if (this.props.disablePopover) {
+            return <div>{name}</div>;
+        }
+
+        var dataContent = [];
+        dataContent.push(
+            <img
+                className='user-popover__image'
+                src={profileImg}
+                height='128'
+                width='128'
+                key='user-popover-image'
+            />
+        );
+
+        if (!global.window.mm_config.ShowEmailAddress === 'true') {
+            dataContent.push(
+                <div
+                    className='text-nowrap'
+                    key='user-popover-no-email'
+                >
+                    <FormattedMessage
+                        id='user_profile.notShared'
+                        defaultMessage='Email not shared'
+                    />
+                </div>
+            );
+        } else {
+            dataContent.push(
+                <div
+                    data-toggle='tooltip'
+                    title={email}
+                    key='user-popover-email'
+                >
+                    <a
+                        href={'mailto:' + email}
+                        className='text-nowrap text-lowercase user-popover__email'
+                    >
+                        {email}
+                    </a>
+                </div>
+            );
+        }
+
+        return (
+            <OverlayTrigger
+                trigger='click'
+                placement='right'
+                rootClose={true}
+                overlay={
+                    <Popover
+                        title={name}
+                        id='user-profile-popover'
+                    >
+                        {dataContent}
+                    </Popover>
+                }
+            >
+                <div
+                    className='user-popover'
+                    id={'profile_' + this.uniqueId}
+                >
+                    {name}
+                </div>
+            </OverlayTrigger>
+        );
+    }
+}
+
+UserProfile.defaultProps = {
+    user: {},
+    overwriteName: '',
+    overwriteImage: '',
+    disablePopover: false
+};
+UserProfile.propTypes = {
+    user: React.PropTypes.object,
+    overwriteName: React.PropTypes.string,
+    overwriteImage: React.PropTypes.string,
+    disablePopover: React.PropTypes.bool
+};