Signed-In Part 4 – Authentication and Branding (Andy Kung)

Signed-In Part 4 – Authentication and Branding (Andy Kung)

Rate This
  • Comments 9

Welcome to the 4th installment of the Signed-In app walkthrough! Here are the previous posts:

We have implemented all the functionalities of our Signed-In app. But, after all, this is an app for the alumni association. We can’t call it complete until we brand it with some school colors, right?

Enable Authentication

First, let me show you how to enable authentication. We’d only like organizers to have access to the app.

Double click Properties node in Solution Explorer.

clip_image001

Select Access Control tab and pick Use Forms authentication. Check Granted for debug.

clip_image003

Press F5 to run the application. You will now see a Log out button on the home screen.

clip_image004

Since we’re in debug mode, you (as a developer) is always logged in. To see the login page. Type LogIn.aspx (under localhost) in the URL.

clip_image006

We will customize this page later in the walkthrough. Close the browser and return to Visual Studio.

Use the Dark Theme

Let’s talk a little bit about theme. By default, LightSwitch uses the Light Theme that you currently see. There is also a Dark Theme you can choose.

In Solution Explorer, select Signed-In node and open the Toggle View dropdown menu. You will see Logical View and File View.

clip_image007

You are currently in Logical View, which structures your assets in a simple and logical manner and hides other things that you don’t use as often such as image, JavaScript, and CSS files. To access theme files (which are essentially a set of CSS), we need to switch to File View. So let’s select File View.

Expand the HTMLClient node. You will see a default.htm, which is the starting point of your app. There is also a Scripts folder for JavaScript files and a Contents folder for images and CSS files.

clip_image008

Double click on default.htm. Find the line that says:

    <linkrel="stylesheet"type="text/css"href="Content/light-theme.css"/> 

    <linkrel="stylesheet"type="text/css"href="Content/msls-light.css"/> 

Replace light with dark:

    <linkrel="stylesheet"type="text/css"href="Content/dark-theme.css"/> 

    <linkrel="stylesheet"type="text/css"href="Content/msls-dark.css"/> 

Basically you are referencing a different set of CSS files that came with the LightSwitch project under the Content folder.

Press F5 and run the application. Your app now uses the Dark Theme!

clip_image010

This is quite nice. But let’s see how we can customize it with our school colors. Close the browser and return to Visual Studio.

Customize Theme

LightSwitch leverages jQuery Mobile, which is a popular touch-optimized web framework. jQuery Mobile has a great theme tool called ThemeRoller. You can import an existing theme and customize it, or you can create a brand new theme from scratch. Let’s customize our Dark Theme with some colors.

Double click on dark-theme.css (under Content folder). Select all (CTRL + A) and copy (CTRL + C) the CSS content from the code editor.

clip_image011

From your web browser, go to http://jquerymobile.com/themeroller/.

clip_image013

Click Import button on top.

Paste (CTRL + V) the CSS content into the dialog and click Import.

clip_image015

LightSwitch’s Dark Theme now shows up in ThemeRoller.

clip_image017

You can drag and drop the colors to customize your theme. Mine looks like this.

clip_image019

When you’re done. Click Download button on top. Name it my-theme and click Download Zip.

clip_image021

Save the zip file to your computer and extract the files. In Solution Explorer, right click on Content folder. Select Add, then Existing Item.

clip_image022

Navigate to my-theme.css you extracted from the zip and click Add.

clip_image023

The new theme now appears in the Content folder.

clip_image024

All we need to do now is indicating which theme we’d like to use. Double click default.htm. Replace dark-theme with my-theme.

clip_image025

Press F5 and run the application. We have successfully customized our theme.

clip_image027

Change Logo

Now, we need a fancy logo. In Solution Explorer, you will find user-logo.png and user-splash-screen.png under Content/Images. These are basically the default logo and splash screen image you current see in the app.

clip_image028

Replace them with images of your own (make sure they have the same name). The new images will show up when you run the application.

clip_image030

Customize Login Page

Go to the login page again by typing in Login.aspx in the URL. You will find it is still using the Light Theme.

clip_image032

Why is that? Well, it is actually not using the jQuery Mobile theme at all. In fact, the LogIn.aspx is an independent artifact. It doesn not exist under HTMLClient, but under Server.

clip_image033

When authentication is enabled, everything under the HTMLClient is now protected by default, including theme files. So think of the login page as a separate thing, a redirect page if you will.

If you open LogIn.aspx in Visual Studio, you will find the CSS code relating to colors are all part of the file.

clip_image035

To customize it, we will manually update these color codes. You can copy and paste the color codes from ThemeRoller and paste them here. For example, I used #3e81af as background in ThemeRoller. I will update the background CSS in LogIn.aspx with that color code.

clip_image036

clip_image037

Do the same for other elements on the login page (textbox, checkbox, button, etc). You can also add other HTML, CSS, JavaScript code here if you like. It’s yours to play with.

This is what I did for mine:

clip_image039

What’s Next?

That’s it! We have successfully created a cross-platform mobile app from scratch with only a couple lines of code!

Next, in the final part of the series, I will show you some other tips and tricks to improve our Signed-In 2.0.

-andy (Program Manager, LightSwitch Team)

Go to next article --> Signed-In Part 5 – Search Screen and Dynamic UI

Leave a Comment
  • Please add 6 and 3 and type the answer here:
  • Post
  • Thank you once again.  

  • Its really cool.

    Can we change the login page design in Silverlight client (Web)?

  • Hi Andy,

    How can I bypass the Authentication in Light switch HTML. As I need authentication for Silver Light Client  for Administration and No Authentication for HTML Client for public viewers? Is there any way we can pass these credentials by default and this way I can also protect my OData endpoints and data visibility.

    Thank you

    Dwarapudi

  • Thanks for the educational posts.

    When can we expect the final part?

  • @the.dav -- the final part is here: blogs.msdn.com/.../signed-in-part-5-search-screen-and-dynamic-ui-andy-kung.aspx

  • Is there a way to integrate lightswitch with the Simple Membership Provider?

  • "Remember me next time" does not work. Any ideas on this issue?

  • Hi

    Is it possible to add footer to each screen?

  • Hi

    I am trying theme Roller the same way you instructed here

    the problem is when I rum my program drop down fields don't show the drop down icon.

    also for save button i just have a circle, no disk icon inside.

    any idea how i can fix this?

Page 1 of 1 (9 items)