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

toolbar: authentication button changed
This commit is contained in:
yanas 2016-10-20 11:40:35 -05:00 committed by GitHub
commit 0fa5aa48af
10 changed files with 79 additions and 53 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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">

View File

@ -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

View File

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

View File

@ -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',

View File

@ -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) {
if (authIdentity) {
let selector = $('#toolbar_auth_identity');
if (authIdentity) {
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"});

View File

@ -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.
*