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');