toolbar: authentication button changed

css/_login_menu.scss

@@ -31,21 +31,8 @@ ul.loginmenu:after {
     left: 18px;
 }
 
-li a.authButton{
-    background-color: #06a5df;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    padding-left: 29px;
-    padding-right: 29px;
-    border-radius: 4px;
-    cursor: pointer;
-}
 
-span.authentication:hover ul.loginmenu, ul.loginmenu:hover {
+.authentication {
-    display:block !important;
-}
-
-span.authentication {
     position: relative;
 }
 
@@ -74,3 +61,24 @@ ul.loginmenu.extendedToolbarPopup:after {
     top: 18px;
     left: -7px;
 }
+
+//extended toolbar: Log In menu
+.auth_container {
+    ul {
+        margin-top: 40px;
+        padding: 0;
+
+        li a.authButton{
+            width: 160px;
+            margin: 10px 20px;
+            background-color: #06a5df;
+            padding-top: 3px;
+            padding-bottom: 3px;
+            padding-left: 29px;
+            padding-right: 29px;
+            border-radius: 4px;
+            cursor: pointer;
+            box-sizing: border-box;
+        }
+    }
+}

css/_side_toolbar_container.scss

@@ -25,7 +25,7 @@
      */
     input, label, select, a,
     .sideToolbarBlock, .input-control, .button-control {
-        display: inline-block;
+        display: block;
         margin-top: 15px;
         margin-left: 10%;
         width: 80%;

index.html

@@ -103,23 +103,12 @@
                 <span id="mainToolbar" class="toolbar"></span>
         </div>
         <div id="subject" class="hide"></div>
+
         <div id="extendedToolbar" class="toolbar">
             <a class="button" id="toolbar_button_profile" data-container="body" data-placement="right" data-i18n="[content]toolbar.profile" content="Edit your profile">
                 <img id="avatar" src="images/avatar2.png"/>
             </a>
-            <span id="authentication" class="authentication" style="display: none">
+            <a class="button icon-avatar authentication" id="toolbar_button_authentication" data-i18n="[content]toolbar.authenticate"></a>
-                <a class="button icon-avatar" id="toolbar_button_authentication" data-i18n="[content]toolbar.authenticate"></a>
-                <ul class="loginmenu extendedToolbarPopup">
-                    <span class="loginmenuPadding"></span>
-                    <li id="toolbar_auth_identity"></li>
-                    <li id="toolbar_button_login">
-                        <a class="authButton" data-i18n="toolbar.login"></a>
-                    </li>
-                    <li id="toolbar_button_logout">
-                        <a class="authButton" data-i18n="toolbar.logout"></a>
-                    </li>
-                </ul>
-            </span>
             <a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover">
                 <span class="badge-round">
                     <span id="numberOfParticipants"></span>
@@ -144,7 +133,19 @@
             <a class="button icon-raised-hand" id="toolbar_button_raisehand" shortcut="raiseHandPopover"></a>
             <a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" shortcut="filmstripPopover"></a>
             <a class="button icon-feedback" id="feedbackButton"></a>
+
             <div id="sideToolbarContainer">
+                <div id="authentication_container" class="auth_container">
+                    <ul>
+                        <li id="toolbar_auth_identity"></li>
+                        <li id="toolbar_button_login">
+                            <a class="authButton" data-i18n="toolbar.login"></a>
+                        </li>
+                        <li id="toolbar_button_logout">
+                            <a class="authButton" data-i18n="toolbar.logout"></a>
+                        </li>
+                    </ul>
+                </div>
                 <div id="profile_container" class="sideToolbarContainer__inner">
                     <div class="title" data-i18n="profile.title"></div>
                     <div class="sideToolbarBlock first">

modules/UI/UI.js

@@ -362,6 +362,8 @@ function registerListeners() {
 
     UI.addListener(UIEvents.TOGGLE_FULLSCREEN, UI.toggleFullScreen);
 
+    UI.addListener(UIEvents.TOGGLE_AUTHENTICATION, UI.toggleAuthentication);
+
     UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
 
     UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
@@ -722,6 +724,13 @@ UI.isFilmStripVisible = function () {
     return FilmStrip.isFilmStripVisible();
 };
 
+/**
+ * Toggles authentication panel.
+ */
+UI.toggleAuthentication = function () {
+    UI.toggleSidePanel("authentication_container");
+};
+
 /**
  * Toggles chat panel.
  */

modules/UI/toolbars/Toolbar.js

@@ -6,7 +6,68 @@ import SideContainerToggler from "../side_pannels/SideContainerToggler";
 let emitter = null;
 let Toolbar;
 
+/**
+ * Opens the invite link dialog.
+ */
+function openLinkDialog () {
+    let inviteAttributes;
+
+    if (roomUrl === null) {
+        inviteAttributes = 'data-i18n="[value]roomUrlDefaultMsg" value="' +
+            APP.translation.translateString("roomUrlDefaultMsg") + '"';
+    } else {
+        inviteAttributes = "value=\"" + encodeURI(roomUrl) + "\"";
+    }
+
+    let inviteLinkId = "inviteLinkRef";
+    let focusInviteLink = function() {
+        $('#' + inviteLinkId)
+            .focus()
+            .select();
+    };
+
+    let title = APP.translation.generateTranslationHTML("dialog.shareLink");
+    APP.UI.messageHandler.openTwoButtonDialog(
+        null, title, null,
+        '<input id="' + inviteLinkId + '" type="text" '
+            + inviteAttributes + ' readonly/>',
+        false, "dialog.copy",
+        function (e, v) {
+            if (v && roomUrl) {
+                JitsiMeetJS.analytics.sendEvent('toolbar.invite.button');
+
+                focusInviteLink();
+
+                document.execCommand('copy');
+            }
+            else {
+                JitsiMeetJS.analytics.sendEvent('toolbar.invite.cancel');
+            }
+        },
+        function (event) {
+            if (!roomUrl) {
+                if (event && event.target) {
+                    $(event.target).find('button[value=true]')
+                        .prop('disabled', true);
+                }
+            }
+            else {
+                focusInviteLink();
+            }
+        },
+        function (e, v, m, f) {
+            if(!v && !m && !f)
+                JitsiMeetJS.analytics.sendEvent('toolbar.invite.close');
+        },
+        'Copy' // Focus Copy button.
+    );
+}
+
 const buttonHandlers = {
+    "toolbar_button_authentication": function() {
+        JitsiMeetJS.analytics.sendEvent('toolbar.authentication.toggled');
+        emitter.emit(UIEvents.TOGGLE_AUTHENTICATION);
+    },
     "toolbar_button_profile": function () {
         JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled');
         emitter.emit(UIEvents.TOGGLE_PROFILE);
@@ -125,6 +186,11 @@ const buttonHandlers = {
 };
 
 const defaultToolbarButtons = {
+    'authentication': {
+        id: 'toolbar_button_authentication',
+        tooltipKey: 'toolbar.authenticate',
+        sideContainerId: 'authentication_container'
+    },
     'microphone': {
         id: 'toolbar_button_mute',
         tooltipKey: 'toolbar.mute',
@@ -392,9 +458,9 @@ Toolbar = {
      */
     showAuthenticateButton (show) {
         if (UIUtil.isButtonEnabled('authentication') && show) {
-            $('#authentication').css({display: "inline"});
+            $('#toolbar_button_authentication').css({display: "inline"});
         } else {
-            $('#authentication').css({display: "none"});
+            $('#toolbar_button_authentication').css({display: "none"});
         }
     },
 

service/UI/UIEvents.js

@@ -44,6 +44,10 @@ export default {
      * Notifies that the profile toolbar button has been clicked.
      */
     TOGGLE_PROFILE: "UI.toggle_profile",
+    /**
+     * Notifies that the authentication toolbar button has been clicked.
+     */
+    TOGGLE_AUTHENTICATION: "UI.toggle_authentication",
     /**
      * Notifies that a command to toggle the film strip has been issued. The
      * event may optionally specify a {Boolean} (primitive) value to assign to