Serenity: User image at login

[rolembergfilho]

Hey guys

Did someone developed the image user in dashboard page, like #1163 did?

If yes, could you share your code with us?

[volkanceylan]

It's another platform based on AdminLTE. I didn't but i think AdminLTE had that user image but i removed. You need to add a image field to user row and show it there. See original AdminLTE code.

[brunobola]

I really like the interface #1163 did, volkan can we expect this in a theme update since the AdminLTE theme is always evolving and serenity is based on it ?

Thanks.

[edson]

Hi, there.

Just take a look at the AdminLTE template and change those lines accordly in View: _Layout,cshtml
Do as @volkanceylan said, add an image field to user row.

What I did was adding the image field do ScriptUserDefinition.cs, UserDefinition.cs and UserRetrieveService.cs to return the image path (actually, my image is database saved, so I converted it to base64string) and change the image at jquery code, clientside.

Something like this:

 var thumbnailPhoto = Q.getRemoteData('UserData').ThumbnailPhoto; 
            if (thumbnailPhoto) {
                $("#UserImageThumbnail").attr("src", thumbnailPhoto);

            }

Maybe there is some other way to put the path src in some Serene interface so we could load it right away when user enters it... Or Something like hardcoded in Razor c# at img src="@((UserDefinition)Serenity.Authorization.UserDefinition).ThumbnailPhoto" . Don´t know if it works, but I needed it at script side.

Anyway, this is a simple task... don't think it should be as part of serenity as users and roles should be customizable to the developer and project needs...

Regards

[rolembergfilho]

@edson could you share your implementation with us?

maybe a gist.

[edson]

Ok. I will create a New project with the default database by the weekend to address this...

[edson]

Hey, @rolembergfilho . Sorry... Almost forgot.

So here we go:

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 AdministrationUser\AuthenticationUserDefinition.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...
Let me know if it worked or if it has something missing.

Regards

[Estrusco]

Great. Thank you! If you let me, I add it to the Wiki

[edson]

Sure @Estrusco . If you think the code is ok.. cause I am more of an asp classic/PHP and systems guy... :-)

Regards

[rolembergfilho]

@edson Amazing boy!

thanks a lot!!!

every day I'm discovering myself that I have a lot to learn in Serenity ! As you, I'm more old asp.net forms and business guy =)

[edson]

welcome, @rolembergfilho

Yeah! Serenity is great and I am learning a lot too! And as I see in your profile, you're brazilian too... :-)

Grande abraço!

[rolembergfilho]

Ótimo!

Me mande e-mail pra gente conve4sar mais rolemberg.[email protected]
Em 19/09/2016 11:58, "Edson Chen" [email protected] escreveu:

welcome, @rolembergfilho https://github.com/rolembergfilho

Yeah! Serenity is great and I am learning a lot too! And as I see in your
profile, you're brazilian too... :-)

Grande abraço!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/volkanceylan/Serenity/issues/1168#issuecomment-248017767,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ASnnf3lQdxEVEADkmy3P4LdP5iI6o6Kpks5qrqMJgaJpZM4J4Y9P
.

[Estrusco]

@edson
OK man there is a Wiki ;)

https://github.com/volkanceylan/Serenity/wiki/User-image-at-login

[volkanceylan]

Add this to user row and top right navigation in 2.4.10.2. Thanks to @edson and other contributors. I didn't do changes in left navigation, not to reduce space there, but anyone who needs that could follow the wiki entry.

[edson]

Finally I contributed to something in Serenity. :-) And learning a cleaner approach with the best @volkanceylan . Thank you very much for this awesome framework.

[volkanceylan]

Thank you too, closing this for now.

[wirble]

@edson I was just wondering if the users are able to upload their own picture? I looked at the demo and it appears only the admin can do it? thanks for sharing...

[edson]

Hi @wirble . In this sample no... As you know, for better security you wouldn't want them to access users table directly. Probably you would want some profile, person table or some indirectly way of updating user image column... But I don't have an example yet to share... If you do, please share. ;-)

Best Regards

[jmkamran]

Thanks Dear. God Bless You..