auth btn removed. login/logout --> Profile

This commit is contained in:
Kostiantyn Pashura 2016-10-12 15:33:07 +03:00
parent 71475038ba
commit 436f3b9d9b
11 changed files with 75 additions and 137 deletions

View File

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

View File

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

View File

@ -124,3 +124,29 @@
#followMeCheckBox { #followMeCheckBox {
width: 13px !important; 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 { &__input {
margin: 8px 0; margin-bottom: 8px;
&:last-child {
margin-bottom: inherit;
}
&::selection { &::selection {
background-color: $defaultDarkSelectionColor; background-color: $defaultDarkSelectionColor;

View File

@ -108,7 +108,6 @@
<a class="button" id="toolbar_button_profile" data-container="body" data-placement="right" data-i18n="[content]toolbar.profile" content="Edit your profile"> <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"/> <img id="avatar" src="images/avatar2.png"/>
</a> </a>
<a class="button icon-avatar authentication" id="toolbar_button_authentication" data-i18n="[content]toolbar.authenticate"></a>
<a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover"> <a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover">
<span class="badge-round"> <span class="badge-round">
<span id="numberOfParticipants"></span> <span id="numberOfParticipants"></span>
@ -135,17 +134,6 @@
<a class="button icon-feedback" id="feedbackButton"></a> <a class="button icon-feedback" id="feedbackButton"></a>
<div id="sideToolbarContainer"> <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 id="profile_container" class="sideToolbarContainer__inner">
<div class="title" data-i18n="profile.title"></div> <div class="title" data-i18n="profile.title"></div>
<div class="sideToolbarBlock first"> <div class="sideToolbarBlock first">
@ -156,6 +144,18 @@
<label data-i18n="profile.setEmailLabel"></label> <label data-i18n="profile.setEmailLabel"></label>
<input type="text" id="setEmail" placeholder="Enter e-mail"> <input type="text" id="setEmail" placeholder="Enter e-mail">
</div> </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>
<div id="chat_container" class="sideToolbarContainer__inner"> <div id="chat_container" class="sideToolbarContainer__inner">
<div id="nickname"> <div id="nickname">

View File

@ -17,6 +17,10 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true, GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
APP_NAME: "Jitsi Meet", APP_NAME: "Jitsi Meet",
INVITATION_POWERED_BY: true, 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 // the toolbar buttons line is intentionally left in one line, to be able
// to easily override values or remove them using regex // to easily override values or remove them using regex
MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line

View File

@ -362,8 +362,6 @@ function registerListeners() {
UI.addListener(UIEvents.TOGGLE_FULLSCREEN, UI.toggleFullScreen); 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_CHAT, UI.toggleChat);
UI.addListener(UIEvents.TOGGLE_SETTINGS, function () { UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
@ -724,13 +722,6 @@ UI.isFilmStripVisible = function () {
return FilmStrip.isFilmStripVisible(); return FilmStrip.isFilmStripVisible();
}; };
/**
* Toggles authentication panel.
*/
UI.toggleAuthentication = function () {
UI.toggleSidePanel("authentication_container");
};
/** /**
* Toggles chat panel. * Toggles chat panel.
*/ */
@ -1149,11 +1140,12 @@ UI.notifyFocusLeft = function () {
* @param {string} [login] current login * @param {string} [login] current login
*/ */
UI.updateAuthInfo = function (isAuthEnabled, login) { UI.updateAuthInfo = function (isAuthEnabled, login) {
let showAuth = isAuthEnabled && UIUtil.isAuthenticationEnabled();
let loggedIn = !!login; let loggedIn = !!login;
Toolbar.showAuthenticateButton(isAuthEnabled); Toolbar.showAuthenticateButton(showAuth);
if (isAuthEnabled) { if (showAuth) {
Toolbar.setAuthenticatedIdentity(login); Toolbar.setAuthenticatedIdentity(login);
Toolbar.showLoginButton(!loggedIn); Toolbar.showLoginButton(!loggedIn);

View File

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

View File

@ -6,68 +6,7 @@ import SideContainerToggler from "../side_pannels/SideContainerToggler";
let emitter = null; let emitter = null;
let Toolbar; 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 = { const buttonHandlers = {
"toolbar_button_authentication": function() {
JitsiMeetJS.analytics.sendEvent('toolbar.authentication.toggled');
emitter.emit(UIEvents.TOGGLE_AUTHENTICATION);
},
"toolbar_button_profile": function () { "toolbar_button_profile": function () {
JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled'); JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled');
emitter.emit(UIEvents.TOGGLE_PROFILE); emitter.emit(UIEvents.TOGGLE_PROFILE);
@ -186,11 +125,6 @@ const buttonHandlers = {
}; };
const defaultToolbarButtons = { const defaultToolbarButtons = {
'authentication': {
id: 'toolbar_button_authentication',
tooltipKey: 'toolbar.authenticate',
sideContainerId: 'authentication_container'
},
'microphone': { 'microphone': {
id: 'toolbar_button_mute', id: 'toolbar_button_mute',
tooltipKey: 'toolbar.mute', tooltipKey: 'toolbar.mute',
@ -457,11 +391,9 @@ Toolbar = {
* @param show <tt>true</tt> to show or <tt>false</tt> to hide * @param show <tt>true</tt> to show or <tt>false</tt> to hide
*/ */
showAuthenticateButton (show) { showAuthenticateButton (show) {
if (UIUtil.isButtonEnabled('authentication') && show) { let display = show ? 'block' : 'none';
$('#toolbar_button_authentication').css({display: "inline"});
} else { $('#authenticationContainer').css({display});
$('#toolbar_button_authentication').css({display: "none"});
}
}, },
showEtherpadButton () { showEtherpadButton () {
@ -515,12 +447,14 @@ Toolbar = {
* @param authIdentity identity name to be displayed. * @param authIdentity identity name to be displayed.
*/ */
setAuthenticatedIdentity (authIdentity) { setAuthenticatedIdentity (authIdentity) {
let selector = $('#toolbar_auth_identity');
if (authIdentity) { if (authIdentity) {
let selector = $('#toolbar_auth_identity');
selector.css({display: "list-item"}); selector.css({display: "list-item"});
selector.text(authIdentity); selector.text(authIdentity);
} else { } else {
$('#toolbar_auth_identity').css({display: "none"}); selector.css({display: "none"});
selector.text('');
} }
}, },
@ -529,7 +463,7 @@ Toolbar = {
* @param show <tt>true</tt> to show * @param show <tt>true</tt> to show
*/ */
showLoginButton (show) { showLoginButton (show) {
if (UIUtil.isButtonEnabled('authentication') && show) { if (show) {
$('#toolbar_button_login').css({display: "list-item"}); $('#toolbar_button_login').css({display: "list-item"});
} else { } else {
$('#toolbar_button_login').css({display: "none"}); $('#toolbar_button_login').css({display: "none"});
@ -541,7 +475,7 @@ Toolbar = {
* @param show <tt>true</tt> to show * @param show <tt>true</tt> to show
*/ */
showLogoutButton (show) { showLogoutButton (show) {
if (UIUtil.isButtonEnabled('authentication') && show) { if (show) {
$('#toolbar_button_logout').css({display: "list-item"}); $('#toolbar_button_logout').css({display: "list-item"});
} else { } else {
$('#toolbar_button_logout').css({display: "none"}); $('#toolbar_button_logout').css({display: "none"});

View File

@ -204,6 +204,15 @@ const TOOLTIP_POSITIONS = {
return interfaceConfig.SETTINGS_SECTIONS.indexOf(name) !== -1; 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. * Shows the element given by id.
* *

View File

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