locked
HTML5 Web Portal Logout RRS feed

  • 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 working

    Tuesday, September 26, 2017 7:54 AM