User Password Expired filter attribute in ASP.NET MVC

A recent set of requirements I’ve been playing with deals with passwords. This one specifically handles password expiration.

Given that I’m working with ASP.NET MVC I know I can rest assured that there’s some great (read awesome) way of implementing a given requirement. This is exactly what happened and I want to show you how to have a clean and beautiful solution to this problem.

So my client’s requirement is the following:

Passwords should expire in 45 days.

I’m currently using the default ASP.NET membership provider. It gives you a database schema ready to manage users and roles. You just have to use ASP.NET Configuration Tool to create Roles and Users, decorate your Controllers/Actions with the Authorize attribute and you’re good to go most of the time. The default membership provider allows a fast project start – no doubt – but as always there’s something that must be done according to the infinitude of possible requirements that change project by project. One of these not contemplated things is a setting in the default provider for handling user’s password expiration. We have to roll our own code to manage this.

My friend Google told me that some folks have already done some work related to this and as always I borrow some of their code and adapt it to my specific case/technology.

First I created a PasswordExpiredAttribute that derives from/extends the AuthorizeAttribute. Here’s its code:

public class PasswordExpiredAttribute : AuthorizeAttribute
{
    private static readonly int PasswordExpiresInDays =
int.Parse(ConfigurationManager.AppSettings["PasswordExpiresInDays"]);

    public override void OnAuthorization(AuthorizationContext filterContext)
    {
        IPrincipal user = filterContext.HttpContext.User;
           
        if(user != null && user.Identity.IsAuthenticated)
        {
            MembershipUser membershipUser = Membership.GetUser();

            TimeSpan ts = DateTime.Today - membershipUser.LastPasswordChangedDate;

            // If true, that means the user's password expired
            // Let's force him to change his password before using the application
if (ts.TotalDays > PasswordExpiresInDays) { filterContext.HttpContext.Response.Redirect( string.Format("~/{0}/{1}?{2}", MVC.Account.Name, MVC.Account.ActionNames.ChangePassword, "reason=expired")); } } base.OnAuthorization(filterContext); } }

As you see, the code goes inside the OnAuthorization overridable method. I get the PasswordExpiresInDays setting from the Web.config <appSettings> section. This gives an easy way to change the requirement in the future without the need of recompiling the whole app.

<appSettings>
    <add key="PasswordExpiresInDays" value="45" />
</appSettings>

The code explains itself but let’s go through it:

1 - If the User is authenticated, let’s get his membership data;
2 - A TimeSpan is useful for getting the difference in days between Today and the last time the user changed his password ( LastPasswordChangedDate )
3 - Check if the TimeSpan.TotalDays is greater than the PasswordExpiresInDays setting we got from the Web.config file. If true the user must change his password and we redirect him to the ChangePassword view.

Note 1: I’m using T4MVC to retrieve the Controller and Action names in the code above. You should take a look at it! Really…

Note 2: See that "reason=expired" in the response redirect URL? I’m using this querystring as a route parameter inside the ChangePassword action method to display a message to the user informing him that he’s being asked to change the password because it has expired.

/// <summary>
/// This allows the logged on user to change his password.
/// </summary>
public virtual ActionResult ChangePassword(string reason)
{
    var viewModel = new ChangePasswordViewModel();

    if (reason != null)
    {
ShowMessage(Infrastructure.Notification.MessageType.Warning, Localization.PasswordExpired, true); } return View(viewModel); }

By the way: I use MvcNotification infrastructure by Martijn Boland to display beautiful messages to the user.

OK, getting back to the main point… now it’s just a matter of applying the PasswordExpiredAttribute filter to every controller of the app but the AccountController. With ASP.NET MVC 3 it’s easy to apply a filter to every controller and action using GlobalFilters. Instead of going controller by controller to add this attribute we can just register it as a global filter in the Global.asax file:

public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
    filters.Add(new HandleErrorAttribute());
filters.Add(new AuthorizeAttribute());
filters.Add(new PasswordExpiredAttribute()); }

Doing so the PasswordExpiredAttribute will be executed for every controller and action but there’s a problem with the above approach. Since it’s a global filter, it’ll be executed even for the AccountController. Remember: we don’t want it to be executed for the AccontController… How can we exclude a global filter from a single controller or action? To achieve this, there’s an awesome thing we can do: create a ExcludeFilterAttribute and a ExcludeFilterProvider. WOW, ASP.NET MVC has a Filter Provider that gives us even more power when working with filters. Look here for the complete story: Exclude a Filter by Ori Calvo. I’ve uploaded the source code files here: ExcludeFilterAttribute.cs and ExcludeFilterProvider.cs

Now it’s just a matter of decorating the AccountController with the ExcludeFilter attribute like this:

[ExcludeFilter(typeof(PasswordExpiredAttribute))]
public partial class AccountController : BaseController
{
...
}

The ExcludeFilter attribute explicitly tells the ASP.NET MVC runtime to ignore the PasswordExpiredAttribute for the AccountController.

With this in place, once the logged in user tries to access any part of the site and his password is expired, he'll be redirected to the ChangePassword view and won't be allowed access to anywhere else in the site until he changes the password. This is great and the requirement is implemented.

Of course in software there are multiple ways of doing the same thing. If you know of any better option, please share you knowledge in the comments.

Hope it helps.

Bonus
While working on this requirement I posted a question at StackOverflow regarding the use of Web.config settings as magic strings. I’ve found a nice way to let the code a little bit cleaner. So, if you want a nice way to access your Web.config app settings as properties with compile time checking and nice error handling, you can do as described here: T4MVC for Web.config <appSettings>

This is a much better/cleaner code IMO (see the AppSettings class that was automatically generated with the T4 template):

public class PasswordExpiredAttribute : AuthorizeAttribute
{
    public override void OnAuthorization(AuthorizationContext filterContext)
    {
        IPrincipal user = filterContext.HttpContext.User;

        if (user != null && user.Identity.IsAuthenticated)
        {
            MembershipUser membershipUser = Membership.GetUser();

            TimeSpan ts = DateTime.Today - membershipUser.LastPasswordChangedDate;

            // If true, that means the user's password expired
            // Let's force him to change his password before using the system
            if (ts.TotalDays > int.Parse(AppSettings.PasswordExpiresInDays))
            {
                filterContext.HttpContext.Response.Redirect(
                    string.Format("~/{0}/{1}?{2}", MVC.SGAccount.Name, MVC.SGAccount.ActionNames.ChangePassword,
                    "reason=expired"));

            }
        }

        base.OnAuthorization(filterContext);
    }
}

References:
ASP.NET MVC Authentication - Global Authentication and Allow Anonymous by Jon Galloway

ASP.NET MVC Authentication - Customizing Authentication and Authorization The Right Way by Jon Galloway

Exclude a Filter by Ori Calvo

Introducing System.Web.Providers - ASP.NET Universal Providers for Session, Membership, Roles and User Profile on SQL Compact and SQL Azure by Scott Hanselman

Conditional Filters in ASP.NET MVC 3 by Phil Haack

T4MVC by David Ebbo

Resize image on the fly with ASP.NET MVC

I built a piece of code sometime ago and today I decided to optimize it.

My use case is this: a user can upload some photos of his house for example. Image dimensions (height x width) are not restricted. The user can upload any photo as long as its size is less than or equal to 750 KB.

Then, I have a listing page (Index.cshtml) that has a WebGrid. The grid shows realties available for sell, rent, etc. In this grid I want to display just a thumbnail of a given photo (the first one I grab as per code bellow) for each realty. I placed a constraint such that the thumbnail dimensions must be 100x100 pixels. Of course one shouldn’t load the full size version of a photo just to show it on the grid. The grid has 10 rows per page and if the images are on the range of 500 KB, the load put on the user connection to transmit all those photos from the server to the client would be high: 10 x 500 KB ≃ 5 MB. This would be an unresponsive page! No doubt…

Googling a little bit I stumbled upon something I didn’t know yet. It’s called WebImage and comes in System.Web.Helpers just as the WebGrid I discussed earlier. With this little kid on the block, one can have a controller “action” that does something like this:

public void GetPhotoThumbnail(int realtyId)
{
// Loading photos’ info from database for specific Realty...
var photos = DocumentSession.Query<File>().Where(f => f.RealtyId == realtyId); if (photos.Any()) { var photo = photos.First(); new WebImage(photo.Path) .Resize(101, 101, false, true) // Resizing the image to 100x100 px on the fly... .Crop(1, 1) // Cropping it to remove 1px border at top and left sides (bug in WebImage) .Write(); } // Loading a default photo for realties that don't have a Photo new WebImage(HostingEnvironment.MapPath(@"~/Content/images/no-photo100x100.png")).Write(); }
Calling the .Write() method does the magic. As you can see, I’m not saving the thumbnail in the disk, that is, a new image is generated on the fly/dynamically and sent to the user’s browser. Amazing…
In a view using the Razor syntax one would have something like this to display the photo:
<img src="@Url.Action("GetPhotoThumbnail", new { realtyId = item.Id })" width="100" height="100"/>
Another useful variation/overload of the above action method is this one (even more dynamic):
public void GetPhotoThumbnail(int realtyId, int width, int height)
{
    // Loading photos’ info from database for specific Realty...
    var photos = DocumentSession.Query<File>().Where(f => f.RealtyId == realtyId);

    if (photos.Any())
    {
        var photo = photos.First();

        new WebImage(photo.Path)
            .Resize(width, height, false, true) // Resizing the image to 100x100 px on the fly...
            .Crop(1, 1) // Cropping it to remove 1px border at top and left sides (bug in WebImage)
            .Write();
    }

    // Loading a default photo for realties that don't have a Photo
        new WebImage(HostingEnvironment.MapPath(@"~/Content/images/no-photo100x100.png")).Write();
}
Then, in the view one would call the action passing the width and height variables as per requirement:
<img src="@Url.Action("GetPhotoThumbnail", new { realtyId = item.Id, width = 100, height = 100 })" />
There are a handful of available functions in a WebImage. You should really check them out.

You can find more insightful info about the WebImage class reading this post by Gunnar Peipman: ASP.NET MVC 3 Beta: Simple image manipulations using WebImage helper

Note: there really are better ways of handling this kind of situation (adding image caching, etc – see ImageResizer) but for the site I’m working on, the solution I show in this post is sufficient and pretty responsive right now.

Hope it helps.

Hide table column and colorize rows based on value with jQuery

This is a handy piece of code that I used last year in one of my projects. I had scheduled to post it but it was just after I saw this question at StackOverflow that I decided to write about it. So here it is…

Let’s say you want a nice UI experience and to achieve that you wanna colorize/highlight a table row according to a given value present in a column of this row.
This is a simple task when we use jQuery.

I use the WebGrid that comes with ASP.NET MVC to display data on a web page using an HTML <table> element. It’s available in the namespace System.Web.Helpers. The approach described in this post is useful not only with the WebGrid but with any framework/language you use to output HTML code since the manipulation is done on the client side with jQuery.

Take this screen as an example:

HTML table with last column Active to be hidden displaying values Yes and NoFigure 1 - HTML table with last column Active to be hidden displaying values Yes and No

We want hide the last column “Active” and color the row which has a value Yes in this same column.

The above statement can be accomplished with the following code:

(function ($)
{ hideColumnColorRow = function (column)
{ $(
'td:nth-child(' + column + '),th:nth-child( ' + column + ')').hide(); $('tr').find('td:nth-child(' + column + '):contains(Yes)').parent().css('backgroundColor', 'LightGreen'); // Could be an hexadecimal value as #EE3B3B };
})(jQuery);

The hideColumnColorRow function* takes the column number as a parameter. It hides the column <td> and its header <th> using jQuery’s supper useful nth-child selector. Then for each table row <tr> it traverses the row’s columns and looks at the value of each column using :contains selector. If it finds a value = ‘Yes’ it’ll assign a background color to the column’s parent, that in this case is the <tr> (the row) using its CSS backgroundColor property.

So, taking Figure 1 as an example, the above code can be used in an ASP.NET MVC view this way:

<script type="text/javascript">

    $(document).ready(function ()
{
hideColumnColorRow(5); // Hiding the 5th column and colorizing the row for which this column has a value = Yes
});
</script>

* I’ve placed the jQuery/JavaScript function inside a file named custom.js. It resides inside the Scripts folder of the sample app available here. There’s no need to reference this script file in the view page because with the introduction of ASP.NET 4.5 we now have an all new Bundling and Minification Support for CSS and JavaScript files.

When the the app is run, this is the result:

HTML table with column Active hidden and highlighted rows based on its valueFigure 2 - HTML table with column Active hidden and highlighted rows based on its value

This is a really interesting requirement that one can implement in no time thanks to the power of jQuery. jQuery is one of the most fascinating things when we talk about software development. Its creator “John Resig” should be awarded a Computer Science Nobel Prize if that existed. Well it could be the Turing Award.

Anyone should take a look at jQuery and start using it as early as possible. It’s a must have today. I simply love it! Coração vermelho

Source code
I’ve put together a sample ASP.NET MVC 4 (uses NET Framework 4.5) so that you can try this out. You can run the app using the recently launched Visual Studio 11 Beta. You can download the free Visual Studio 11 Express Beta for Web here and the app code here.

Hope it helps.

Installing Brazilian Portuguese dict. in Sublime Text 2

Today I downloaded one more dictionary to use with Sublime Text 2. Sublime Text is a multipurpose text and code editor. So far the best IMHO. I want to spell check my Portuguese texts of course. I followed the instructions described here to grab an additional dictionary.

From that page we have that:

Sublime Text uses Hunspell for its spell checking support. Additional dictionaries can be obtained from the OpenOffice.org Extension List

I then headed to OpenOffice.org to search for a pt-BR dictionary. I found it and then when I downloaded it from http://extensions.services.openoffice.org/en/project/Vero I got a file with a different extension (.oxt) of that used by Sublime Text 2. More on this bellow…

The file name is Vero_pt_BR_V208AOC.oxt.

Using Mac OS I tried to place this file inside this folder

/Users/leniel/Library/Application Support/Sublime Text 2/Packages/User

following the instructions given by Sublime Text 2 doc.

Closed Sublime Text 2 and reopened it. Went to the menu View > Dictionary and the new dictionary wasn’t there.

Well, something is plain wrong here. The already installed dictionaries that come with Sublime Text are present in this folder:

/Users/leniel/Library/Application Support/Sublime Text 2/Packages/Language - English/

Inside the above folder there are two English dictionaries with file extensions: .aff and .dic.

A little bit more thinking and I tried what could do the trick. I renamed the downloaded dictionary file from Vero_pt_BR_V208AOC.oxt to Vero_pt_BR_V208AOC.rar. Opened the compressed file and to my surprise there they were… extracted the files pt_BR.aff and pt_BR.dic. Easy as pie.

It turns out the .oxt file is just a wrapper…

I renamed the folder Language – English to just Languages and placed the files pt_BR.aff and pt_BR.dic in this folder. Closed Sublime Text 2 and reopened it. The new dictionary appeared:

Sublime Text 2 Dictionary menu option listing the pt_BR dictionary just addedFigure 1 - Sublime Text 2 Dictionary menu option listing the pt_BR dictionary just added

Hope it helps.

Export list of used NuGet packages for a given project

This one is as simple as the title says… I just wanted to get a list of all NuGet packages I’m currently using in my ASP.NET MVC 4 project.

If you look at the NuGet Package Manager window that you can access by right clicking a project in Solution Explorer and then selecting Manage NuGet Packages… you’ll see that there’s an Installed packages option on the left vertical menu. This is good and all but the manager doesn’t have an option to export the list of installed packages to a simple .txt file.

NuGet Package Manager listing Installed Packages for the projectFigure 1 - NuGet Package Manager listing Installed Packages for the project

One interesting thing is that NuGet uses a .XML file called packages.config that resides in the root folder of every project to actually fill the above window. Every time you add or delete a NuGet package this file is updated to reflect the changes.

This is the content of my packages.config file:

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="AttributeRouting" version="1.5.4426" />
  <package id="DataAnnotationsExtensions" version="1.0.1" />
  <package id="DataAnnotationsExtensions.MVC3" version="1.0.1" />
  <package id="jQuery" version="1.7.1" />
  <package id="jQuery.Ajax.Unobtrusive" version="1.0" />
  <package id="jQuery.UI.Combined" version="1.8.17" />
  <package id="jQuery.Validation" version="1.8" />
  <package id="jQuery.Validation.Unobtrusive" version="1.0" />
  <package id="jquery-globalize" version="0.1.0" />
  <package id="knockoutjs" version="1.2.9.0" />
  <package id="log4net" version="1.2.10" />
  <package id="Microsoft.Web.Optimization" version="0.1" />
  <package id="microsoft-web-helpers" version="1.15" />
  <package id="Modernizr" version="2.0.6" />
  <package id="MvcSiteMapProvider" version="3.2.1.0" />
  <package id="Newtonsoft.Json" version="4.0.8" />
  <package id="NLog" version="2.0.0.2000" />
  <package id="RavenDB-Embedded" version="1.0.700" />
  <package id="System.Web.Providers" version="1.0.1" />
  <package id="T4MVC" version="2.7.0" />
  <package id="WebActivator" version="1.2.0.0" />
</packages>

This file serves the purpose of this post but it’d be a nice addition to the NuGet manager if it had a button to export the list of installed packages in a better formatted way. Just an idea.

Just let me take the opportunity to say “I Love You NuGet”. You let me explore the plethora of knowledge of fellow developers scattered all over the world in an easy way with the push of a button. I have no better words to describe you! You contribute enormously to the world development. Keep evolving!

Apple’s magic mouse & wireless keyboard battery life

I’ve been collecting data regarding the battery life cycle of my Apple’s magic mouse and wireless keyboard. I thought it’d be good to post this data here so that you dear reader can draw your own conclusions about how long should the battery life last.

Apple Magic Mouse ($ 69 or R$ 229 today)Apple Wireless Keyboard ($ 69 or R$ 229 today)

This is interesting data to look at because I like statistics and it’s good to analyze data. It helps you predict what to expect… Obviously the batteries’ lifespan changes according to how much time you spend using these devices. In my case I tend to use the computer 8 hours/day on average.

Just now I decided to search for a neat app ( Finch for Mac ) so that I can track the time I pass working on the computer. This will for sure give me more accurate data in the near future. For now I’ll have to take this data for granted…

Take a look at the following Google spreadsheet:

As you see the keyboard has a great autonomy and there were periods in which I didn’t work as much as I’d like on the computer because the mouse charges used to last 3 weeks. This denotes periods of inactivity. Now that I’m doing more intensive work the mouse battery lasts only 1.5 weeks. This is half the time previously taken to drain the battery.

For the record: I also own an Apple’s battery charger. Recharging the batteries is an easy task. Once more I’m contributing to the environment.

Apple Battery Charger ($ 29 today)

All these Apple devices are great IMHO as it’s the case with everything made by Apple!

The only “complaint” is that I think the mouse should have a greater autonomy. Maybe this will be the case with more recent technology iterations.

Blogger dynamic views with Undocked Gadgets bar

Blogger recently launched gadgets support for dynamic views. This is really cool and was a missing piece to go with dynamic views.

One of the things that I really didn’t like about the gadget bar is that it’s hidden (docked) in the right side of the window. It’s difficult to see and so I Googled about an undocked version but couldn’t find it.

Blogger docked gadgets sidebar (barely visible) or could we say hidden?Figure 1 - Blogger docked gadgets sidebar (barely visible) or could we say hidden?

Here I show you how to get an undocked version so that your visitors can enjoy the gadgets bar in its full glory. Follow these simple steps:

1 - Select the Template option at draft.blogger.com

2 - Click the Customize button

3 - In the Window that opens select Advanced

4 - Select Add CSS

5 - Copy & paste the following piece of code in the Add custom CSS field

#gadget-dock
{
    right: 0;
}

6 - Click Apply to blog button in the window top right corner

You won’t see the change applied immediately.

Now go and open your blog and you should see an undocked gadgets bar!

Blogger undocked gadgets sidebar (now visible)Figure 2 - Blogger undocked gadgets sidebar (now visible)

I hope blogger gives the option to customize this without the need for CSS code. It’ll be easier for its users and will provide a better experience for blog’s visitors… Alegre

EDIT

To answer Hannah’s question: if you also want to customize the background colors of the gadgets bar, you can apply these styles following the same procedure described above:

.gadget-icons
{
    background-color: red;
}

.gadget-title
{
    background-color: red;
}
.gadget-selected .gadget-icons
{
    background-color: yellow;
}

One thing to remember here is that as the gadgets’ icons are white you must choose a background color that’s not too much whitish.

Play with the colors and enjoy!