Merge pull request #992 from kkrisstoff/task/make-extended-toolbar-dynamically-created

toolbar: authentication button changed

conference.js

@@ -1086,7 +1086,6 @@ export default {
             }
         );
 
-
         room.on(ConferenceEvents.USER_JOINED, (id, user) => {
             if (user.isHidden())
                 return;

css/_login_menu.scss

@@ -31,24 +31,6 @@ 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 {
-    display:block !important;
-}
-
-span.authentication {
-    position: relative;
-}
-
 a.disabled {
     color: gray !important;
     pointer-events: none;
@@ -73,4 +55,4 @@ ul.loginmenu.extendedToolbarPopup:after {
     position: absolute;
     top: 18px;
     left: -7px;
-}
+}

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%;
@@ -124,3 +124,29 @@
 #followMeCheckBox {
     width: 13px !important;
 }
+
+/**
+ * Profile
+ */
+.auth_container {
+    ul {
+        padding: 0;
+
+        li {
+            list-style-type: none;
+
+            a.authButton{
+                width: 160px;
+                margin: 10px 20px;
+                padding: 3px 29px;
+                box-sizing: border-box;
+                background-color: #06a5df;
+                border-radius: 4px;
+                cursor: pointer;
+                color: $defaultColor;
+                text-decoration: none;
+                text-align: center;
+            }
+        }
+    }
+}

css/input-control/_input-control.scss

@@ -20,7 +20,11 @@
     }
 
     &__input {
-        margin: 8px 0;
+        margin-bottom: 8px;
+
+        &:last-child {
+            margin-bottom: inherit;
+        }
 
         &::selection {
             background-color: $defaultDarkSelectionColor;

index.html

@@ -103,23 +103,11 @@
                 <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" 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,6 +132,7 @@
             <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="profile_container" class="sideToolbarContainer__inner">
                     <div class="title" data-i18n="profile.title"></div>
@@ -155,6 +144,18 @@
                         <label data-i18n="profile.setEmailLabel"></label>
                         <input type="text" id="setEmail" placeholder="Enter e-mail">
                     </div>
+                    <div class="sideToolbarBlock auth_container" id="authenticationContainer">
+                        <p data-i18n="toolbar.authenticate"></p>
+                        <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>
                 <div id="chat_container" class="sideToolbarContainer__inner">
                     <div id="nickname">

interface_config.js

@@ -17,6 +17,10 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
     GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
     APP_NAME: "Jitsi Meet",
     INVITATION_POWERED_BY: true,
+    /**
+     * If we should show authentication block in profile
+     */
+    AUTHENTICATION_ENABLE: true,
     // the toolbar buttons line is intentionally left in one line, to be able
     // to easily override values or remove them using regex
     MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line

modules/UI/UI.js

@@ -1141,11 +1141,12 @@ UI.notifyFocusLeft = function () {
  * @param {string} [login] current login
  */
 UI.updateAuthInfo = function (isAuthEnabled, login) {
+    let showAuth = isAuthEnabled && UIUtil.isAuthenticationEnabled();
     let loggedIn = !!login;
 
-    Toolbar.showAuthenticateButton(isAuthEnabled);
+    Toolbar.showAuthenticateButton(showAuth);
 
-    if (isAuthEnabled) {
+    if (showAuth) {
         Toolbar.setAuthenticatedIdentity(login);
 
         Toolbar.showLoginButton(!loggedIn);

modules/UI/authentication/LoginDialog.js

@@ -8,16 +8,15 @@ function getPasswordInputHtml() {
     let placeholder = config.hosts.authdomain
         ? "user identity"
         : "user@domain.net";
-    let passRequiredMsg = APP.translation.translateString(
-        "dialog.passwordRequired"
-    );
+
     return `
-        <h2 data-i18n="dialog.passwordRequired">${passRequiredMsg}</h2>
-        <input name="username" type="text" placeholder=${placeholder} autofocus>
+        <input name="username" type="text" 
+               class="input-control__input"
+               placeholder=${placeholder} autofocus>
         <input name="password" type="password"
+               class="input-control__input"
                data-i18n="[placeholder]dialog.userPassword"
-               placeholder="user password">
-        `;
+               placeholder="user password">`;
 }
 
 /**
@@ -80,6 +79,7 @@ function LoginDialog(successCallback, cancelCallback) {
 
     const states = {
         login: {
+            title: APP.translation.translateString('dialog.passwordRequired'),
             html: getPasswordInputHtml(),
             buttons: loginButtons,
             focus: ':input:first',

modules/UI/toolbars/Toolbar.js

@@ -391,11 +391,9 @@ Toolbar = {
      * @param show <tt>true</tt> to show or <tt>false</tt> to hide
      */
     showAuthenticateButton (show) {
-        if (UIUtil.isButtonEnabled('authentication') && show) {
-            $('#authentication').css({display: "inline"});
-        } else {
-            $('#authentication').css({display: "none"});
-        }
+        let display = show ? 'block' : 'none';
+
+        $('#authenticationContainer').css({display});
     },
 
     showEtherpadButton () {
@@ -449,12 +447,14 @@ Toolbar = {
      * @param authIdentity identity name to be displayed.
      */
     setAuthenticatedIdentity (authIdentity) {
+        let selector = $('#toolbar_auth_identity');
+
         if (authIdentity) {
-            let selector = $('#toolbar_auth_identity');
             selector.css({display: "list-item"});
             selector.text(authIdentity);
         } else {
-            $('#toolbar_auth_identity').css({display: "none"});
+            selector.css({display: "none"});
+            selector.text('');
         }
     },
 
@@ -463,7 +463,7 @@ Toolbar = {
      * @param show <tt>true</tt> to show
      */
     showLoginButton (show) {
-        if (UIUtil.isButtonEnabled('authentication') && show) {
+        if (show) {
             $('#toolbar_button_login').css({display: "list-item"});
         } else {
             $('#toolbar_button_login').css({display: "none"});
@@ -475,7 +475,7 @@ Toolbar = {
      * @param show <tt>true</tt> to show
      */
     showLogoutButton (show) {
-        if (UIUtil.isButtonEnabled('authentication') && show) {
+        if (show) {
             $('#toolbar_button_logout').css({display: "list-item"});
         } else {
             $('#toolbar_button_logout').css({display: "none"});

modules/UI/util/UIUtil.js

@@ -204,6 +204,15 @@ const TOOLTIP_POSITIONS = {
         return interfaceConfig.SETTINGS_SECTIONS.indexOf(name) !== -1;
     },
 
+    /**
+     * Indicates if Authentication Section should be shown
+     *
+     * @returns {boolean}
+     */
+    isAuthenticationEnabled: function() {
+        return interfaceConfig.AUTHENTICATION_ENABLE;
+    },
+
     /**
      * Shows the element given by id.
      *