Oxite - Mr. Roa

Oxite: Blog Description & Profile Management

Admin — Sun, 10 Jan 2010 09:33:00 GMT

Following my Oxite blog post series, I add some extra functionality to the administration panel of the blog engine as well as some little changes to the blog engine title, shown on the front-end. Also I'll use this oportunity to give a little insight about Oxite's core and internal structure.

Let's vent first...

If you search and read reviews you may notice that Oxite it's not considered to be good at all. Actually is not referred as a Microsoft ASP .NET MVC Framework guidance project, not even a starter kit. Adding to that I'm absolutely sure when I say it's not even close to a "Best Practices & Patterns" repository for ASP .NET MVC Framework enthusiasts.

Instead of wasting time reinventing the wheel, by reviewing the code (again!) or the project as a whole. I'll just summarize what I think of it with a single sentence. Ready? Here it goes. Oxite is an unorthodox, undocumented and untested application made with good intentions. MVC is supposed to enforce the developer to come up with a good application design, but ironically this just makes Oxite a good anti-pattern example providing a high coupled/low cohesive design and incredible complex project structure due to unnecessary abstraction layers. Perhaps it's just because it's not a finished product and it was created in the early stages of a maturing technology. Who knows?!

I'll admit I like the challenge and that's precisely why I chose this as my starting point for my blog engine. I know the guys who created this have a disclaimer, telling me other "mature" choices, BUT I didn't expect to be abbandoned in this creepy box of moving sand! (Look for Orchard in codeplex).

And now... The features

So, if you follow other bloggers you may have noticed that they all have a funky/catchy phrase below the blog title. And if you watch closely, you may notice that the funky/catchy phrase is missing here. You may be thinking, so what? it's no biggie. And you might be right. But in the end, advertisement, which should be considered a science, proves you wrong! These phrases have a name! They are called slogans, and they have claimed to be the most effective means of drawing attention (according to wikipedia). But the most interesting thing is that a slogan implies distinction between products, and that's it! that's what we must always pursue when having a web page among millions and millions... DISTINCTION!

Jumping right into business, achieving this is fairly simple. The Site entity has a property called Description, which is accessible from the Model in the view. This is convenient since we are able to update the description already from the settings tab in the Admin section.

Then locate the header.ascx on your skin folder. Change the title div as follows:

<div id="title">
    <h1><a href="<%=Url.Posts() %>"><%=Model.Site.DisplayName %></a></h1>
    <%=Model.Site.Description %>
</div>

So that's it, nice and simple! Now we have a fancy catch phrase space. Which reminds me, now I need a slogan!

The next thing is something that really annoyed me. While browsing through the issues on oxite's codeplex page, I learned that in order to change the logged user's display name (in this case the admin, since oxite does not support user management yet ;) you had to go to the database and change it manually. I can't stand the greeting message when I log in, every time I read "Welcome, Oxite Administrator!" I get cranky and bored. So let's fix that and put our name there!

First we need to locate the routes dictionary class. It's a class file called OxiteRoutes.cs located on the Oxite project. This is how our new route looks.

AddRoute(
      "UserChangeProfile",
      "Admin/ChangeProfile",
       new { controller = "User", action = "ChangeProfile", validateAntiForgeryToken = true },
       null,
       new { Namespaces = controllerNamespaces });

Cool, so let's take a look to what we did here. We defined a route name: "UserChangeProfile" and mapped an url to it: "Admin/ChangeProfile", according to our routing engine this url must be mapped to an action, which we defined on the object defaults attribute. We said that the action will be: "ChangeProfile" and that it's going to be located on the UserController.cs. The other parameters are tokens and other optional properties.

Oxite also has a Helper class for url generations from the views. It's called UrlHelperExtensions.cs and it's located on the Oxite.Mvc project inside of the Extensions folder. We should add this snippet there.

public static string UserChangeProfile(this UrlHelper urlHelper)
{
          return urlHelper.RouteUrl("UserChangeProfile");
}

So now that we are done with the routing, we need to change the EditUser method on the service that is going to be used by the controller. I just modified the signature of the EditUser method interface to look like this:

void EditUser(User user, bool passwordUpdate, out ValidationStateDictionary validationState);

I added a small modification to the method implementation, so we don't modify the user password when change the user full name. The implementation looks like this:

public void EditUser(User user, bool passwordUpdate, out ValidationStateDictionary validationState)
{
      validationState = new ValidationStateDictionary();
      validationState.Add(typeof(User), validator.Validate(user));

      if (!validationState.IsValid)
      {
          return;
      }

      if (!string.IsNullOrEmpty(user.Password) && passwordUpdate)
      {
          user.PasswordSalt = Guid.NewGuid().ToString("N");
          user.Password = saltAndHash(user.Password, user.PasswordSalt);
      }

      user.HashedEmail = user.Email.ComputeHash();
      repository.Save(user);
}

Ok, so we only need to do two more things and we are done. First we need to add the controller action definition that is going to be called by the routing engine, and second we need to create the view that is going to be rendered by this action.

First let's edit the UserController. Let's add our actions for HTTP verbs Get/Post.

[ActionName("ChangeProfile"), AcceptVerbs(HttpVerbs.Post)]
public virtual object ChangeProfileSave(User currentUser, FormCollection form)
{
            string name = form["displayName"];
            string email = form["email"];
            ValidationStateDictionary validationState;

            if (string.IsNullOrEmpty(name))
            {
                ModelState.AddModelError("displayName", "New Name is not set.");
            }

            if (string.IsNullOrEmpty(email))
            {
                ModelState.AddModelError("email", "New Email is not set.");
            }

            if (ModelState.IsValid)
            {
                currentUser.DisplayName = name;
                currentUser.Email = email;

                userService.EditUser(currentUser, false, out validationState);

                if (!validationState.IsValid)
                {
                    ModelState.AddModelErrors(validationState);
                }
            }

            if (!ModelState.IsValid)
            {
                ModelState.SetModelValue("displayName", new ValueProviderResult(name, name, CultureInfo.CurrentCulture));
                ModelState.SetModelValue("email", new ValueProviderResult(email, email, CultureInfo.CurrentCulture));

                return ChangeProfile(currentUser);
            }
            return Redirect(Url.AppPath(Url.ManageUsers()));
}

Finally, let's add our view code.

<%@ Page Language="C#" AutoEventWireup="true" 
	MasterPageFile="~/Views/Shared/Admin.master" Inherits="System.Web.Mvc.ViewPage>" %>
<%@ Import Namespace="Oxite.Mvc.Extensions" %>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h2 class="title"><%=Model.Localize("ChangeProfile", "Change Profile") %></h2>
    <%=Html.ValidationSummary() %>
    <form action="" method="post">
    <div>
        <%=Html.TextBox("displayName",  m => m.User != null ? m.User.DisplayName : "", 
                            Model.Localize("DisplayName", "Display Name"), new { size = 42, @class = "text" })%>
    </div>
    <div>
         <%=Html.TextBox("email",  m => m.User != null ? m.User.Email : "",
                             Model.Localize("Email", "Email"), new { size = 42, @class = "text" })%>
     </div>
     <div>
         <input type="submit" name="submit" class="submit button"
		    value="<%=Model.Localize("ChangeProfile", "Change Profile") %>" />
         <%=Html.OxiteAntiForgeryToken(m => m.AntiForgeryToken) %>
     </div>
     </form>
 </asp:Content>
 <asp:Content ContentPlaceHolderID="Scripts" runat="server">
     <% Html.RenderScriptTag("site.js"); %>
 </asp:Content>

That's it ladies and gentleman! Now we are able to modify our user's email and display name.

UPDATE!

After making these changes, I noticed that something else had to be done to get a complete solution to the DisplayName fix. After applying the updates above we successfully update the DisplayName to whatever we want, but Admin (which is an username) is still being shown on the comments made by the me, instead of MY NAME. So in order to achieve this we only have to make a mall update to the Comments.ascx file as follows.

Replace the line of the name paragraph inside of the comment div with this one:

Mr. <strong><%=Html.LinkOrDefault((Model.PartialModel.Child.Creator.Name.ToLower() == "admin") ?
    Model.PartialModel.Child.Creator.DisplayName : Model.PartialModel.Child.Creator.Name.CleanText(), 
	Model.PartialModel.Child.Creator.Url.CleanHref())%></strong>

Oxite: Customizing the comments area

Admin — Tue, 27 Oct 2009 05:19:00 GMT

Continuing my Oxite series of blog posts I'll address the comments area. For my taste oxite is missing a couple of things on the comments listing and comments posting department. It doesn't have a way to ensure that the comment being posted is not being generated by a bot. I've already been a victim of this and to be honest I'm not a fan of SPAM, so let's stop that!

Oxite also doesn't have a special style for comments posted by the site admin. In this blog post we are going to address this issues by implementing a css class that helps the reader identify a site administrator comment from a blog comment's list and a captcha validation for the comments input.

For these tasks I'll be using css and reCAPTCHA, which is owned by google and it's widely used among popular sites as Facebook, The New York Times, StackOverflow, TicketMaster, etc. It's worth pointing out that reCaptcha was initially conceived in Carnegie Mellon University, where the term "CAPTCHA" was initially coined. The term contrives from the acronym "Completely Automated Public Turing test to tell Computers and Humans Apart."

So putting the theory to a side, let's start getting things done!

Styling the Admin comments

When the admin posts a comment Oxite automatically adds an "Admin" class to the li element from the comments list. This means that styling the comment won't be very hard since the only thing to do is add a custom style for this class. I chose a beige tone as the background of the Admin comments and added the following to the site stylesheet (site.css)

ul.comments.medium li.Admin
{
    background: #FFFFC0;
}

And tha t's it, from now on my comments will have a beige like background. That was easy wasn't it? Good let's keep moving!

Implementing reCAPTCHA

Moving on to the CAPTCHA part, we have to do a couple things before starting. First register at reCAPTCHA, download the .NET dll and reference it from Oxite.Mvc project. After that the first thing to do is create an Action Filter Attribute. There's already a directory containing existing Filters for Oxite on the Oxite.Mvc project so let's place ours there.

namespace Oxite.Mvc.ActionFilters
{
    public class CaptchaAttribute : ActionFilterAttribute
    {
        private const string ChallengeFieldKey = "recaptcha_challenge_field";
        private const string ResponseFieldKey = "recaptcha_response_field";

        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            //Getting the user parameter from the current context
            var user = (Model.User)filterContext.ActionParameters["currentUser"];
            if (user != null && user.Name == "Admin")
            {
                filterContext.ActionParameters["captchaValid"] = true;
                return;
            }
            var captchaChallengeValue = filterContext.HttpContext.Request.Form[ChallengeFieldKey];
            var captchaResponseValue = filterContext.HttpContext.Request.Form[ResponseFieldKey];

            var captchaValidtor = new Recaptcha.RecaptchaValidator
                                      {
                                          PrivateKey = "YOUR PRIVATE KEY GOES HERE",
                                          RemoteIP = filterContext.HttpContext.Request.UserHostAddress,
                                          Challenge = captchaChallengeValue,
                                          Response = captchaResponseValue
                                      };

            var recaptchaResponse = captchaValidtor.Validate();
            filterContext.ActionParameters["captchaValid"] = recaptchaResponse.IsValid;
            base.OnActionExecuting(filterContext);

        }
    }
}

In order to render the reCAPTCHA widget we are going to add a new helper to the Html helper Extensions class. The helper is going to ease the implementation by encapsulating everything to a method call. Our new extension method should look like this:

#region ReCaptcha
public static string RenderCaptcha(this HtmlHelper helper)
{
      var captchaControl = new Recaptcha.RecaptchaControl
              {
                    ID = "recaptcha",
                    Theme = "clean",
                    PublicKey = "YOUR PUBLIC KEY GOES HERE",
                    PrivateKey = "YOUR PRIVATE KEY GOES HERE"
               };

       var htmlWriter = new HtmlTextWriter(new StringWriter());
       captchaControl.RenderControl(htmlWriter);
        return htmlWriter.InnerWriter.ToString();
}
#endregion

Now we are ready for the implementation. From here we just need to add our Action Filter Attribute on the Controller method that creates the post comment. The Controller is located on the same project as the Action Filers, Oxite.Mvc. The comments are created on the PostController. There we need to add our Action Filter Attribute to the AddComment method. Also we need to change the method signature by adding a new overload by adding a new variable to contain our reCAPTCHA validation result.

[CaptchaValidator]
[ActionName("Item"), AcceptVerbs(HttpVerbs.Post)]
public virtual object AddComment(Area areaInput, PostBase postBaseInput, Comment commentInput, UserBase userBaseInput, 
                                   UserBase currentUser, bool? remember, bool? subscribe, bool? captchaValid)

Now the success of the CAPTCHA validation is going to be contained on the added boolean value. Notice that the type is marked as nullable, this is because the method is initialized with null values on the OxiteApplication class.

itemActionCriteria.AddMethod(p => p.AddComment(null, null, null, null, null, null, null, null));

Great, so now we have almost everything in place. I used a quick & dirty approach in order to raise the form validation when a the introduced string does not match the one displayed by the reCAPTCHA widget. In case the captchaValid variable is false I just set the comment on the commentInput object to String.Empty. This will set the validationState object IsValid flag to false, which is Oxite's form validation mechanism.

Now the only thing left to do is go to the CommentFromAnonymous.ascx user control. This is what renders the actual comment form on the post. Here we are going to add our Html helper extension method in order to render the reCAPTCHA widget and finally add some validation to the post comment form. I decided to place my widget under the actual comment text area. The call to the extension method looks like this:

<div class="recaptcha">
    <%= Html.RenderCaptcha() %>
</div>

Summary

In this blog post I added an extra, yet important, feature to Oxite: CAPTCHA validation. Once again, I was able to extend the current core with ease and added reCAPTCHA's widget. I'm so glad I did this, since I wont have to deal with spam comments anymore :). Stay tuned for some other Oxite extensions and more praising of the MVC paradigm!

Oxite: Meets TinyMCE

Admin — Wed, 16 Sep 2009 10:11:00 GMT

This is the first of a series of blog posts I'll be doing about Oxite, a simple blog engine written using ASP .NET MVC. Which happens to be the one I'm using to administrate and maintain my blog. On my first post I stated that I intended to modify the blogging engine and complete it my way. I already created a list of features, that I'd like to see in it in order to get things going.

So, according to ME, the first "missing" feature in Oxite, is a wysiwyg. I know it can be integrated with live writer, but c'mon a blog engine shouldn't rely on third party applications, even though integration with those it's a nice feature. A blog engine should provide an easy to use text formatting tool. At least for the body of the blog post, taking care of annoying formatting tasks which involve a lot of html markup. With that said, after this blog post I won't be writing html markup directly into a textarea in order to format my blog posts.

Let's get this thing started then. After a browsing through an extensive list of available TTW ("Through the Web") WYSIWYG Web Editors, I chose to use TinyMCE. It's widely used, it has a lot of plugins, an active community and it seems really easy to implement.

Well, I'm done with the first step. I already chose my formatting tool for my blog posts. Anyways I created a little list of things I MUST be able to do when creating a blog post with it:

Use default formatting tools such as bold text, italic, underline, text alignment and justification, etc.
Have a html view in case I need to teak some of the markup after all.
An option to wrap text between pre or code tags in order to identify code snippets.
Spellchecker, of course! This is one of the most useful features when creating articles/posts. (isn't it?)

Ok, after getting that out of the way. Let's get started shall we?

TinyMCE & Code Snippet Wrapping

In order to get started we need to download TinyMCE, also since one of our requirements is to wrap code snippets between pre/code tags we will need something to make code snippets look prettier. For that matter I'll be using prettify. After downloading both, the script files must be placed inside the Scripts folder of the Oxite theme being used.

Prettify also comes with a stylesheet that defines the color schema of our code snippets, so we should also place that file inside of the Styles folder of the Oxite theme.

For my taste the code snippet text should be big and clear, so I changed the cascading style sheet to render the code snippet fonts a little bit bigger.

Ok, so now we are closer to having a WYSIWYG with support to paste code snippets in Oxite, but first there are a couple more steps we need to do. In order to be a little bit more organized I created a mrroa.com.js file which is going to contain my client side extensions. Here we are going to place the initialization script for tinymce as follows.

tinyMCE.init({
    mode: "exact",
    elements: "post_body",
    theme: "advanced",
    theme_advanced_buttons1: "codetag,code,separator,bold,italic,underline,strikethrough,separator,justifyleft,
    justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,undo,redo,separator,link,unlink",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "bottom",       
    setup: function(ed) {
        //Custom button Code (Code Snippet Wrapper)
        ed.addButton('codetag', {
            title: 'Wrap code tags around selected text',
            image: 'http://mrroa.com/Content/images/code.gif',
            onclick: function() {
                ed.selection.setContent('<pre class="prettify">' 
                     + ed.selection.getContent({ format: 'text' }) + '</pre>');             
             }         
         });     
      } });

Notice that there's a setup property which contains a javascript function. This is the definition of our code wrapping button, that is not included in TinyMCE's palette of buttons. The setup section in the above snippet, tells TinyMCE to wrap around pre tags our text selection. Also notice how I added the default text formatting tools into the theme_advanced_buttons1 collection. The code button represents the html source viewer, so this WYSIWYG almost has all the features described initially.

SpellChecking

For this feature we need to work a little bit more. First of all we need to download and reference the TinyMCE .NET Package. Among many features embedded, this package contains a handler which implements the old google spellchecking API, which still works (I figure that eventually they will update the hanlder to implement the new one).

After referencing the package we need to add the following code to the httpHandlers section of our web.config.

<add verb="GET,HEAD,POST" path="TinyMCE.ashx" type="Moxiecode.TinyMCE.Web.HttpHandler,Moxiecode.TinyMCE" />

Also we need to add a rule to the Oxite Routing class, in order to tell the ASP .NET MVC routing engine that it shouldn't map to a controller the requests made to the hanlder.

routes.Add(new Route("TinyMCE.ashx", new StopRoutingHandler()))

Now we just need to update the script file containing the TinyMCE initialization to implement the spellchecker plugin.

tinyMCE.init({
    mode: "exact",
    elements: "post_body",
    theme: "advanced",
    plugins: "spellchecker",
    theme_advanced_buttons1: "codetag,code,separator,bold,italic,underline,strikethrough,separator,justifyleft,
    justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,undo,redo,separator,link,unlink,separator,
    spellchecker",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "bottom",      
    spellchecker_languages: "+English=en,Spanish=es",
    spellchecker_rpc_url: "/TinyMCE.ashx?module=SpellChecker",
    setup: function(ed) {
        //Custom button Code (Code Snippet Wrapper)
        ed.addButton('codetag', {
            title: 'Wrap code tags around selected text',
            image: 'http://mrroa.com/Content/images/code.gif',
            onclick: function() {
                ed.selection.setContent('<pre class="prettify">' 
                     + ed.selection.getContent({ format: 'text' }) + '</pre>');             
             }         
         });     
      } });

One Final Step

Now we need to reference the scripts and stylesheets on the master pages of the site. In order to achieve this we need to place this snippets in two webusercontrols.

First in HeadCustomAdminContents.ascx

Html.RenderScriptTag("tiny_mce/tiny_mce_src.js");
Html.RenderScriptTag("mrroa.com.js");

And then in HeadCustomContents.ascx

Html.RenderCssFile("prettify.css");
Html.RenderScriptTag("prettify/prettify.js");

The Result

Here's a screenshot of my nice and shiny WYSIWYG with all the features I wanted. I guess you can tell I used it to create this post as well ;)

Summary

In this post, I tried to emphasize on the importance of having text formatting tools like WYSIWYG's in systems used for publishing. Also I tried to show how to implement TinyMCE, which is widely used, and how to extend it for some specific purposes. Furthermore, this series of articles purpose is to demonstrate how the MVC model allows to achieve with ease extensibility, modifiability and testability.