Asked by:
HTML5 Web Portal Logout

General discussion
-
Hi,
I found this thread here I'm not sure if what I missed because it's not working on my side.
choose icon from cheat sheet http://modernicons.io/segoe-mdl2/cheatsheet/
use the code of the icon and add class name with the icon name [icon-logout] in custom.css
This i add in custom.css
.icon-logout:before {content: "\E8F8";}
copy the main.css for the login icon and put in custom.css and change the name of the class to logout instead of login
In my main.css I don't have login icon css, so I just copy below code
/* logout icon css */ .icon-logout { ; font-size: 1.25em; } /* logout div css */ .logout { ; height: 4em; font-size: 1em; width: 4em; } /* when clicked change color */ .top_bar .logout.clicked { background-color: #255F85; } /* when move mouse over this div give pointer shape */ .top_bar .logout:hover { cursor: pointer; } /* css of the span contain the user logout info */ .top_bar .userlogout { background-color: #255F85; width: 20em; height: 4em; ; text-align: center; right: 0em; line-height: 3.67em; }
Now open the file with the global resources (the file with the definition of every description, divided by language) you’ll find in the path c:\inetpub\wwwroot\SelfServicePortal\App_GlobalResources\SelfServiceResources.resx
(change also the one in your language) and add a new tag at the end:
--I continue on next due to characters should only 6000 long
- Changed type newbee_scsm Saturday, March 3, 2018 10:02 AM Looking for solution
Tuesday, September 26, 2017 7:53 AM
All replies
-
I add below code in SelfServiceResources.resx but I did not make this "(change also the one in your language) and add a new tag at the end:" because i did'nt get this
<data name="logout" xml:space="preserve"> <value>log out</value> </data>
add the button to C:\inetpub\wwwroot\SelfServicePortal\Views\Shared\_layout.cshtml [as the _layout is the master page for portal and contain header , footer and slide bar]
I add this in _layout.cshtml after <div class="col email">
<div class="col logout"> <span class="icon-logout" tabindex="3" accesskey="U"></span> <div class="userlogout" style="display: none;">Log Out </div> </div>
add the js functionality for logout button toggling
because it was not mentioned where will I add this so I add in Content/JS/header.js
var userlogoutAction = function () { var topBar = $('.top_bar'); topBar.on('click', '.logout', function (event) { event.stopPropagation(); $(this).toggleClass('clicked'); $(this).find('.userlogout').toggle(); closeLangMenu(topBar); closeAnouncements(topBar); }); } var closeLogout = function ( topBar) { var emailDiv = topBar.find('.logout'); emailDiv.removeClass('clicked'); emailDiv.find('.userlogout').hide(); } /* #put the [[closeLogout(topBar);]] in all places after [[closeUsername(topBar);]] #put the [[userInfoAction(topBar);]] in all places after [[userlogoutAction(topBar);]] */
Add logout functionality to the button [we need to remove the basic authentication credential using java script]
for internet explorer Microsoft created functionality for removing basic authentication credential from browser
document.execCommand('ClearAuthenticationCache', 'false');
as per chrome and firefox there is no functionality for that so after searching there is method by inserting wrong username and password to remove the cached credentials [still under test]
I also add this code in Content/JS/header.js
jQuery(document).ready(function ($) { var DefaultLanguage = '@Session["Culture"]'; $.each($('#Culture option'), function () { if ($(this).attr('value').includes(DefaultLanguage)) $(this).attr({ 'selected': 'selected' }); }); //to load inside the page logout(); }); var logout = function () { var topBar = $('.top_bar'); topBar.on('click', '.userlogout', function (event) { //iexplorer method to remove the basic authentication cache document.execCommand('ClearAuthenticationCache', 'false'); window.location.reload(true) return false; }); }
The output is but the size of logout of icon is small and its not workingTuesday, September 26, 2017 7:54 AM