Aug 17

Written by: Michael Washington
8/17/2014 8:18 AM 

App-Stitch recently published an article and a sample application to demonstrate their unique service that allows you to easily create and manage business rules and events in your LightSwitch applications. You can read all about their service here: Sending emails from your LightSwitch application: the app-stitch way.

They also published the source code for the sample application. What this article is about, is taking a look at their sample LightSwitch application, because it contains some features that you may want to use, namely:

• Their JetPack like theme (remember this is for a LightSwitch HTML application, if you use a LightSwitch Desktop (Silverlight) application you can get a JetPack theme here)
• Their Auto register, accept terms of the End User License Agreement (EULA), and login page. Their demo app allows you to simply enter a email address, click to accept the terms of use, and you are logged in and ready to go.

The Theme

To demonstrate re-using the App-Stitch theme, we will start with the application used in the tutorial An End-To-End Visual Studio LightSwitch 2013 HTML5 Application (from the book Creating HTML 5 Websites and Cloud Business Apps Using LightSwitch In Visual Studio 2013).

First we download the App-Stitch application and open it up.

We copy the dark-theme-2.5.0.css and  msls-dark-2.5.0.css files from the App-Stitch demo application to our own.

We then open our default.htm file.

We alter the default.htm file to reference the cascading style sheets. We also alter the body style tag to set the background.

The Create Account / Accept EULA / Login Page

Lets look at what the App-Stitch demo login process looks like when it is implemented in the End-To-End application (keep in mind that you will need to publish the application in order to see most of these features properly):

The first screen asks only for an email address. This is because a LightSwitch application that requires a user to log in, requires them to usually enter a lot of information such as these examples illustrate:

• LightSwitch lsQuickCode: Fast Login For Mobile Applications
• Allow LightSwitch Users To Self-Register and Change Passwords Using MVC

However, for a demo app, the more information you ask for, the more likely the user will decide it is too much work to do and go away. The App-Stitch demo asks for the least amount of information possible.

The next screen requires the user to read and accept the End User License Agreement (EULA) before continuing.

Implementing The Code

We copy the EULA and LogIn files from the App-Stitch demo application to our own.

The App-Stitch demo implements a lot of business logic to create a default realtor account that we don’t need so we alter the Login page to use the following code:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Claims;
using System.Security.Principal;
using System.Web;
using System.Web.Hosting;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.LightSwitch;
namespace LightSwitchApplication
{
    public partial class FindAHome : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Page.IsPostBack)
            {
                var mail = Request.Form["email"].ToLower();
                //Check if user exists?
                var user =  Membership.GetUser(mail);
                if (user == null)
                {//New user => Create one in the membership tables
                    Membership.CreateUser(mail, mail, mail);
                }
                //Log user in server-side
                HttpContext.Current.User = new ClaimsPrincipal(new DummyIdentity() { Name = mail });
                //"Remember user next time".  Cookies are only set AFTER redirect
                FormsAuthentication.SetAuthCookie(mail, true);
                //Run Forrest, RUN!
                Response.Redirect("~/EULA.aspx");
            }
        }
    }
    public class DummyIdentity : IIdentity
    {
        public string AuthenticationType
        {
            get { return "Forms"; }
        }
        public bool IsAuthenticated
        {
            get { return true; }
        }
        public string Name
        {
            get;
            set;
        }
    }
} 

 

You will notice in the code above that it directs the user to the EULA.aspx page. That page has one button on it:

…that takes the user to the application when pressed:

Note we will also need to open the Web.Config (in the Server project) and add the following line:

Also, add a reference (in the Server project) to System.Web.ApplicationServices.

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2013 (or higher) installed to run the code)