Forms authentication in Lightswitch using MVC Part 3

Rama Sagar
Posted by in LightSwitch category on for Beginner level | Points: 250 | Views : 7181 red flag

Forms authentication is managed by the application itself, and a user must supply a username and a password to access the application

Introduction


In this article we will understand how to use forms authentication in light switch application using MVC..

Before we proceed please have a look at Part 1 and Part 2 as this was the continuation of it.


  • Step 1 Click on properties of  SampleLightSwitchMVC navigate to Access Control and enable Use Forms authentication as shown below.
          

 
    Notice this will cause LightSwitch to create LogIn and LogOut pages as shown below. These pages will redirect to     the LightSwitch application.


  
  • Step 2 Now Lets add Model class.Right click on Models folder and then add class and add the following properties
       Here we have created two classes for  user registration and change password 
 using System.ComponentModel.DataAnnotations;

namespace LightSwitchApplication.Models
{
    public class Users
    {
        public string UserName { get; set; }
        public string Email { get; set; }
        public string Password { get; set; }
        public bool IsLockedOut { get; set; }
        public bool IsOnline { get; set; }
        public bool RememberMe { get; set; }
    }

    public class ChangePassword
    {
        [Display(Name = "Old Password")]
        public string OldPassword { get; set; }
        [Display(Name = "New Password")]
        public string NewPassword { get; set; }
        [Display(Name = "Confirm Password")]
        public string ConfirmPassword { get; set; }
    }
}
          
      
  • Step 3 Now Lets add 3 views create a new folder named Account under views and add the Razor views






       

  Add the following html to the three views
         

ChangePassword.cshtml



@{
    Layout = null;
}
@model LightSwitchApplication.Models.ChangePassword
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Change Password</title>
</head>
<body>
    <h2>Change Password</h2>
    <div>
        @using (Html.BeginForm("ChangePassword", "Account",
            FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary()
            <div class="form-group">
                @Html.LabelFor(model => model.OldPassword,
                new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @Html.PasswordFor(model => model.OldPassword,
                    new { @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.NewPassword,
                new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @Html.PasswordFor(model => model.NewPassword,
                    new { @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.ConfirmPassword,
                new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @Html.PasswordFor(model => model.ConfirmPassword,
                    new { @class = "form-control" })
                </div>
            </div>
            <br />
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit"
                           value="Change password"
                           class="btn btn-default" />
                </div>
            </div>
        }
        <br />
        <div>
            @Html.ActionLink("GoBack", "Index", "Home")
        </div>
    </div>
</body>
</html>


Login.cshtml


@{
    Layout = null;
}
@model LightSwitchApplication.Models.Users
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="HandheldFriendly" content="true" />
        <meta name="viewport" content="width=device-width, initial-scale=1,
          minimum-scale=1, maximum-scale=1, user-scalable=no" />
        <title>Log in</title>
    </head>
    <body>
        <h2>Log In</h2>
        <div class="row">
            <div class="col-md-8">
                <section id="loginForm">
                    @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl },
                FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                    {
                        @Html.AntiForgeryToken()
                        @Html.ValidationSummary(true)
                        <div class="form-group">
                            @Html.LabelFor(model => model.UserName, new { @class = "col-md-2 control-label" })
                            <div class="col-md-10">
                                @Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.UserName)
                            </div>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.Password, new { @class = "col-md-2 control-label" })
                            <div class="col-md-10">
                                @Html.PasswordFor(model => model.Password, new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.Password)
                            </div>
                        </div>
                        <br />
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <div class="checkbox">
                                    @Html.CheckBoxFor(model => model.RememberMe)
                                    @Html.LabelFor(model => model.RememberMe)
                                </div>
                            </div>
                        </div>
                        <br />
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <input type="submit" value="Log in" class="btn btn-default" />
                            </div>
                        </div>
                        <p>
                            @Html.ActionLink("Register", "Register") if you don't have a local account.
                        </p>
                    }
                </section>
            </div>
        </div>
    </body>
</html>

Register.cshtml


@{
    Layout = null;
}
@model LightSwitchApplication.Models.Users
<!DOCTYPE html>
<html>
<head>
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1,
          minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Register</title>
</head>
<body>
    <h2>Register</h2>
    <div>
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
            <div class="control-group">
                @Html.LabelFor(model => model.UserName, new { @class = "control-label" })
                <div class="controls">
                    @Html.EditorFor(model => model.UserName)
                    @Html.ValidationMessageFor(model => model.UserName,
                    null, new { @class = "help-inline" })
                </div>
            </div>
            <div class="control-group">
                @Html.LabelFor(model => model.Password, new { @class = "control-label" })
                <div class="controls">
                    @Html.PasswordFor(model => model.Password)
                    @Html.ValidationMessageFor(model => model.Password,
                    null, new { @class = "help-inline" })
                </div>
            </div>
            <div class="control-group">
                @Html.LabelFor(model => model.Email, new { @class = "control-label" })
                <div class="controls">
                    @Html.EditorFor(model => model.Email)
                    @Html.ValidationMessageFor(model => model.Email,
                    null, new { @class = "help-inline" })
                </div>
            </div>
            <br />
            <div class="form-actions no-color">
                <input type="submit" value="CreateUser" class="btn" />
            </div>
            @Html.ValidationSummary(true)
        }
        <br />
        <div>
            @Html.ActionLink("Back", "Index", "Home")
        </div>
    </div>
</body>
</html>

Conclusion

In this part 3 we have learned how to enable forms authentication and creation of views..In the coming articles we will add the controller to perform login,registration and change password....

Reference

http://msdn.microsoft.com/en-us/library/ff851957.aspx

Page copy protected against web site content infringement by Copyscape

About the Author

Rama Sagar
Full Name: RamaSagar Pulidindi
Member Level: Silver
Member Status: Member,MVP
Member Since: 12/30/2012 1:51:40 AM
Country: India
ramasagar
http://www.ramasagar.com
A Software Profesional working in Microsoft .NET technologies since year 2008, and I work for Dake ACE. I am passionate about .NET technology and love to contribute to the .NET community at Dot Net Funda

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)