Commit efc00ae4 authored by pmeijer's avatar pmeijer
Browse files

Add demo for UserProfileNavigator and fix issue

parent b9709caa
...@@ -7,6 +7,7 @@ import Typography from '@material-ui/core/Typography'; ...@@ -7,6 +7,7 @@ import Typography from '@material-ui/core/Typography';
import DemoProjectSeedCards from '../src/components/ProjectSeedCards/demo'; import DemoProjectSeedCards from '../src/components/ProjectSeedCards/demo';
import DemoAttributeEditor from '../src/components/AttributeEditor/demo'; import DemoAttributeEditor from '../src/components/AttributeEditor/demo';
import DemoConfirmDialog from '../src/components/ConfirmDialog/demo'; import DemoConfirmDialog from '../src/components/ConfirmDialog/demo';
import DemoUserProfileNavigator from '../src/components/UserProfileNavigator/demo';
export default class demoApp extends Component { export default class demoApp extends Component {
...@@ -30,6 +31,10 @@ export default class demoApp extends Component { ...@@ -30,6 +31,10 @@ export default class demoApp extends Component {
component: <DemoConfirmDialog/>, component: <DemoConfirmDialog/>,
title: 'ConfirmDialog', title: 'ConfirmDialog',
}, },
{
component: <DemoUserProfileNavigator/>,
title: 'UserProfileNavigator',
},
]; ];
return ( return (
......
...@@ -503,6 +503,14 @@ ...@@ -503,6 +503,14 @@
// Constraint Checking // Constraint Checking
META_RULES_RESULT: 'META_RULES_RESULT', META_RULES_RESULT: 'META_RULES_RESULT',
CONSTRAINT_RESULT: 'CONSTRAINT_RESULT' CONSTRAINT_RESULT: 'CONSTRAINT_RESULT'
},
gmeConfig: {
authentication: {
enable: false
},
client: {
mountedPath: '',
}
} }
}; };
}; };
......
...@@ -3104,14 +3104,12 @@ ...@@ -3104,14 +3104,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -3126,20 +3124,17 @@ ...@@ -3126,20 +3124,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -3256,8 +3251,7 @@ ...@@ -3256,8 +3251,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -3269,7 +3263,6 @@ ...@@ -3269,7 +3263,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -3284,7 +3277,6 @@ ...@@ -3284,7 +3277,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -3292,14 +3284,12 @@ ...@@ -3292,14 +3284,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -3318,7 +3308,6 @@ ...@@ -3318,7 +3308,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -3399,8 +3388,7 @@ ...@@ -3399,8 +3388,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -3412,7 +3400,6 @@ ...@@ -3412,7 +3400,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -3534,7 +3521,6 @@ ...@@ -3534,7 +3521,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
......
...@@ -22,7 +22,8 @@ export default class UserProfileNavigator extends Component { ...@@ -22,7 +22,8 @@ export default class UserProfileNavigator extends Component {
}; };
openMenu = (event) => { openMenu = (event) => {
this.setState({anchorEl: event.currentTarget}); const {enable} = this.props.gmeClient.gmeConfig.authentication;
this.setState({anchorEl: enable ? event.currentTarget : null});
}; };
closeMenu = () => { closeMenu = () => {
...@@ -33,7 +34,7 @@ export default class UserProfileNavigator extends Component { ...@@ -33,7 +34,7 @@ export default class UserProfileNavigator extends Component {
const {gmeClient} = this.props; const {gmeClient} = this.props;
const tempAnchor = window.document.createElement('a'); const tempAnchor = window.document.createElement('a');
tempAnchor.target = '_self'; tempAnchor.target = '_self';
tempAnchor.href = `${gmeClient.mountedPath || ''}/profile/home`; tempAnchor.href = `${gmeClient.gmeConfig.client.mountedPath}/profile/home`;
window.document.body.appendChild(tempAnchor); window.document.body.appendChild(tempAnchor);
tempAnchor.click(); tempAnchor.click();
}; };
...@@ -42,7 +43,7 @@ export default class UserProfileNavigator extends Component { ...@@ -42,7 +43,7 @@ export default class UserProfileNavigator extends Component {
const {gmeClient} = this.props; const {gmeClient} = this.props;
const tempAnchor = window.document.createElement('a'); const tempAnchor = window.document.createElement('a');
tempAnchor.target = '_self'; tempAnchor.target = '_self';
tempAnchor.href = `${gmeClient.mountedPath || ''}/logout`; tempAnchor.href = `${gmeClient.gmeConfig.client.mountedPath}/logout`;
window.document.body.appendChild(tempAnchor); window.document.body.appendChild(tempAnchor);
window.document.cookie = `${gmeClient.gmeConfig.authentication.jwt.cookieId}\ window.document.cookie = `${gmeClient.gmeConfig.authentication.jwt.cookieId}\
=; expires=Thu, 01 Jan 1970 00:00:00 GMT`; =; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
...@@ -53,7 +54,7 @@ export default class UserProfileNavigator extends Component { ...@@ -53,7 +54,7 @@ export default class UserProfileNavigator extends Component {
render() { render() {
const {anchorEl} = this.state; const {anchorEl} = this.state;
const {userInfo, color} = this.props; const {userInfo, color, gmeClient} = this.props;
if (userInfo === null) { if (userInfo === null) {
return null; return null;
...@@ -61,9 +62,18 @@ export default class UserProfileNavigator extends Component { ...@@ -61,9 +62,18 @@ export default class UserProfileNavigator extends Component {
return ( return (
<div> <div>
<Button size="small" onClick={this.openMenu} style={{width: '100%', color}}> <Button size="small"
onClick={this.openMenu}
style={{width: '100%', color}}>
<AccountCircle/> <AccountCircle/>
<span style={{marginLeft: 5, fontSize: 16}}> {userInfo.displayName || userInfo._id}</span> <span
title={userInfo.displayName || userInfo._id}
style={{
marginLeft: 5,
fontSize: 16,
textOverflow: 'ellipsis',
overflowX: 'auto',
}}> {userInfo.displayName || userInfo._id}</span>
</Button> </Button>
<Menu <Menu
id="simple-menu" id="simple-menu"
......
import React, {Component} from 'react';
import UserProfileNavigator from './index'
export default class DemoUserProfileNavigator extends Component {
constructor(props) {
super(props);
this.gmeClient = new window.GME.classes.Client(window.GME.gmeConfig);
this.gmeClient2 = new window.GME.classes.Client(window.GME.gmeConfig);
this.gmeClient2.gmeConfig.authentication.enable = true;
}
render() {
const userInfo = {
_id: 'demo',
};
const userInfo2 = {
_id: 'ALongNameToEnsureItIsCropped',
};
const userInfo3 = {
_id: 'ALongNameShownInLargerWidget',
};
return (
<div style={{width: '20%'}}>
<div style={{width: '50%'}}>
<UserProfileNavigator
gmeClient={this.gmeClient}
userInfo={userInfo}
color={'lightblue'}
/>
</div>
<div style={{width: '50%'}}>
<UserProfileNavigator
gmeClient={this.gmeClient2}
userInfo={userInfo2}
/>
</div>
<div style={{width: '100%'}}>
<UserProfileNavigator
gmeClient={this.gmeClient2}
userInfo={userInfo3}
color={'grey'}
/>
</div>
</div>
)
}
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment