Show avatar when logged in and support logging out

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(
 						{

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 ? (
+					<div
+						className='button logout'
+						data-tip='Logout'
+						data-type='dark'
+						onClick={onLogout}
+					>
+						<img src={me.picture || 'resources/images/avatar-empty.jpeg'} />
+					</div>
+				) : (
 					<div
 						className='button login off'
 						data-tip='Login'
 						data-type='dark'
-						onClick={() => onLogin()}
-					/>
-					:null
-				}
-	
-				<div
-					className={classnames('button', 'leave-meeting')}
-					data-tip='Leave meeting'
-					data-type='dark'
-					onClick={() => onLeaveMeeting()}
+						onClick={onLogin}
 					/>
+				))}
 			</div>
 		);
 	}
@@ -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(

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 };

app/lib/redux/requestActions.js

@@ -142,6 +142,13 @@ export const userLogin = () =>
 	};
 };
 
+export const userLogout = () =>
+{
+	return {
+		type: 'USER_LOGOUT'
+	};
+};
+
 export const raiseHand = () =>
 {
 	return {

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

app/lib/redux/stateActions.js

@@ -444,3 +444,8 @@ export const setPeerPicture = (peerName, picture) =>
 		type    : 'SET_PEER_PICTURE',
 		payload : { peerName, picture }
 	});
+
+export const loggedIn = () =>
+	({
+		type: 'LOGGED_IN',
+	});

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