UI User image at login

How to inser an image login, by edson. See issue 1168

To get a result like this:

First, add the image column to Users Table, here is a migration file in case anyone needs...

using FluentMigrator;

namespace Serene.Migrations.DefaultDB
{
    [Migration(20161809152000)]
    public class DefaultDB_20161809_152000_UserImage : AutoReversingMigration
    {
        public override void Up()
        {
            if (!this.Schema.Table("Users").Column("UserImage").Exists())
                Alter.Table("Users")
                    .AddColumn("UserImage").AsString(100).Nullable();
        }
    }
}

Add the field to UserRow.cs etc... Then added/modified some HTML lines (look for the li class="dropdown users") in _Views/Shared/Layout.cshtml to something like:

    <!-- User Account: style can be found in dropdown.less -->
    <li class="dropdown user user-menu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <img src="@(((UserDefinition)Serenity.Authorization.UserDefinition).UserImage)" class="user-image" alt="User Image">
            <span class="hidden-xs">@Serenity.Authorization.Username</span>
        </a>
        <ul class="dropdown-menu">
        <!-- User image -->
            <li class="user-header">
                <img src="@(((UserDefinition)Serenity.Authorization.UserDefinition).UserImage)" class="img-circle" alt="User Image">

                <p>@(((UserDefinition)Serenity.Authorization.UserDefinition).DisplayName)</p>
            </li>
            <!-- Menu Footer-->
            <li class="user-footer">
                <div class="pull-left">
                    <a href="~/Account/ChangePassword" class="btn btn-default btn-flat"><i class="fa fa-lock fa-fw"></i> @Texts.Forms.Membership.ChangePassword.FormTitle</a>
                </div>
                <div class="pull-right">
                    <a href="~/Account/Signout" class="btn btn-default btn-flat"><i class="fa fa-sign-out fa-fw"></i> @LocalText.Get("Navigation.LogoutLink")</a>
                </div>
            </li>
        </ul>
    </li>

Added field UserImage to Administration\User\Authentication\UserDefinition.cs

namespace Serene
{
    using Serenity;
    using System;

    [Serializable]
    public class UserDefinition : IUserDefinition
    {
        public string Id { get { return UserId.ToInvariant(); } }
        public string DisplayName { get; set; }
        public string Email { get; set; }
        public short IsActive { get; set; }
        public int UserId { get; set; }
        public string Username { get; set; }
        public string PasswordHash { get; set; }
        public string PasswordSalt { get; set; }
        public string UserImage { get; set; }
        public string Source { get; set; }
        public DateTime? UpdateDate { get; set; }
        public DateTime? LastDirectoryUpdate { get; set; }
    }
}

Changed method on UserRetrieveService.cs to return the image path or a default image path in case user does not have an image:

    private UserDefinition GetFirst(IDbConnection connection, BaseCriteria criteria)
    {
        var user = connection.TrySingle<Entities.UserRow>(criteria);
        if (user != null) 
        { 
            return new UserDefinition
            {
                UserId = user.UserId.Value,
                Username = user.Username,
                Email = user.Email,
                DisplayName = user.DisplayName,
                IsActive = user.IsActive.Value,
                Source = user.Source,
                PasswordHash = user.PasswordHash,
                PasswordSalt = user.PasswordSalt,
                UserImage = (string.IsNullOrEmpty(user.UserImage) 
                      ? System.Web.VirtualPathUtility.ToAbsolute("~/Content/site/images/avatar5.png") 
                      : System.Web.VirtualPathUtility.ToAbsolute("~/upload/" + user.UserImage)),
                UpdateDate = user.UpdateDate,
                LastDirectoryUpdate = user.LastDirectoryUpdate
            };
        }

        return null;
    }

In Views\Shared\LeftNavigation.cshtml added a few HTML lines on top:

@model Serene.Navigation.NavigationModel
<div class="user-panel">
    <div class="pull-left image">
        <img src="@(((UserDefinition)Serenity.Authorization.UserDefinition).UserImage)" class="img-circle" alt="User Image">
    </div>
    <div class="pull-left info">
        <p>@(((UserDefinition)Serenity.Authorization.UserDefinition).DisplayName)</p>
        <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
    </div>
</div>
<li class="header">MAIN NAVIGATION</li>

@helper renderItem(Serenity.Navigation.NavigationItem item, int depth, int[] path, string category) {

And some jQuery line to reposition the element:

    jQuery(function () {
        $('.user-panel').insertBefore('.sidebar-form');
    });

That's it. Five minutes of coding thanks to Serenity...