diff --git a/app/lib/RoomClient.js b/app/lib/RoomClient.js index 42c9265..bed1425 100644 --- a/app/lib/RoomClient.js +++ b/app/lib/RoomClient.js @@ -134,6 +134,11 @@ export default class RoomClient this._loginWindow = window.open(url, 'loginWindow'); } + logout() + { + window.location = '/logout'; + } + closeLoginWindow() { this._loginWindow.close(); @@ -1081,6 +1086,7 @@ export default class RoomClient this.changeProfilePicture(request.data.picture); this._dispatch(stateActions.setPicture(request.data.picture)); + this._dispatch(stateActions.loggedIn()); this._dispatch(requestActions.notify( { diff --git a/app/lib/components/Sidebar.jsx b/app/lib/components/Sidebar.jsx index 40598c6..616b823 100644 --- a/app/lib/components/Sidebar.jsx +++ b/app/lib/components/Sidebar.jsx @@ -51,7 +51,7 @@ class Sidebar extends Component { const { toolbarsVisible, me, screenProducer, onLogin, onShareScreen, - onUnShareScreen, onNeedExtension, onLeaveMeeting + onUnShareScreen, onNeedExtension, onLeaveMeeting, onLogout } = this.props; let screenState; @@ -127,22 +127,23 @@ class Sidebar extends Component }} /> - {me.loginEnabled ? + {me.loginEnabled && (me.loggedIn ? ( +
+ +
+ ) : (
onLogin()} + onClick={onLogin} /> - :null - } - -
onLeaveMeeting()} - /> + ))}
); } @@ -172,7 +173,8 @@ const mapDispatchToProps = { onShareScreen : requestActions.enableScreenSharing, onUnShareScreen : requestActions.disableScreenSharing, onNeedExtension : requestActions.installExtension, - onLogin : requestActions.userLogin + onLogin : requestActions.userLogin, + onLogout : requestActions.userLogout }; export default connect( diff --git a/app/lib/redux/reducers/me.js b/app/lib/redux/reducers/me.js index f3efaa2..973083a 100644 --- a/app/lib/redux/reducers/me.js +++ b/app/lib/redux/reducers/me.js @@ -23,7 +23,8 @@ const initialState = restartIceInProgress : false, picture : null, selectedWebcam : null, - selectedAudioDevice : null + selectedAudioDevice : null, + loggedIn : false }; const me = (state = initialState, action) => @@ -50,6 +51,12 @@ const me = (state = initialState, action) => }; } + case 'LOGGED_IN': + return { ...state, loggedIn: true }; + + case 'USER_LOGOUT': + return { ...state, loggedIn: false }; + case 'CHANGE_WEBCAM': { return { ...state, selectedWebcam: action.payload.deviceId }; diff --git a/app/lib/redux/requestActions.js b/app/lib/redux/requestActions.js index 6d54490..b27ea1c 100644 --- a/app/lib/redux/requestActions.js +++ b/app/lib/redux/requestActions.js @@ -142,6 +142,13 @@ export const userLogin = () => }; }; +export const userLogout = () => +{ + return { + type: 'USER_LOGOUT' + }; +}; + export const raiseHand = () => { return { diff --git a/app/lib/redux/roomClientMiddleware.js b/app/lib/redux/roomClientMiddleware.js index 61aa34b..8a55ed7 100644 --- a/app/lib/redux/roomClientMiddleware.js +++ b/app/lib/redux/roomClientMiddleware.js @@ -181,6 +181,13 @@ export default ({ dispatch, getState }) => (next) => break; } + case 'USER_LOGOUT': + { + client.logout(); + + break; + } + case 'LOWER_HAND': { client.sendRaiseHandState(false); diff --git a/app/lib/redux/stateActions.js b/app/lib/redux/stateActions.js index ecc7945..65bd437 100644 --- a/app/lib/redux/stateActions.js +++ b/app/lib/redux/stateActions.js @@ -443,4 +443,9 @@ export const setPeerPicture = (peerName, picture) => ({ type : 'SET_PEER_PICTURE', payload : { peerName, picture } + }); + +export const loggedIn = () => + ({ + type: 'LOGGED_IN', }); \ No newline at end of file diff --git a/app/stylus/components/Sidebar.styl b/app/stylus/components/Sidebar.styl index 12a2eb3..04b9b97 100644 --- a/app/stylus/components/Sidebar.styl +++ b/app/stylus/components/Sidebar.styl @@ -29,6 +29,9 @@ transition-property: opacity, background-color; transition-duration: 0.15s; border-radius: 100%; + display: flex; + align-items: center; + justify-content: center; +desktop() { height: 36px; @@ -55,6 +58,12 @@ } } + &.logout > img { + height: 65%; + max-width: 65%; + border-radius: 50%; + } + &.settings { &.off { background-image: url('/resources/images/icon_settings_white.svg');