-
Notifications
You must be signed in to change notification settings - Fork 797
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...
Copyright © Serenity Platform 2017-present. All rights reserved.
Documentation | Serene Template | Live Demo | Premium Support | Issues | Discussions