Click here to Skip to main content
15,867,704 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
how to create a login page and validate it ,and on login button click redirect to another page and fetch data from server bind table ?

What I have tried:

login.html


HTML
<!DOCTYPE html>
<html  ng-app="QuickMoveMailApp">
  <head>
    <meta charset="UTF-8">
    <title>Flat UI Login</title>
     <link href="Style.css" rel="stylesheet" />
      <script src="../Script/angular.min.js"></script>
      <script src="../Script/Mail.js"></script>
  </head>

  <body ng-controller="QuickMoveMailLogin">
    <div class="logindiv" ng-form="loginForm">
       
            <h2>Please Login</h2>
           
            <div style="color:red">
                <span style=" padding-left:11%"  ng-show="loginForm.txtUserName.$touched && loginForm.txtUserName.$invalid">
                     <span  ng-show="loginForm.txtUserName.$error.required">Please Enter User Name ! </span>
                </span>
                <br />
               <span style="padding-left:8%"  ng-show="loginForm.txtpassword.$touched && loginForm.txtpassword.$invalid">
                     <span ng-show="loginForm.txtpassword.$error.required">Please Enter Password !</span>
               </span>
            </div>
            <table>
                <tr>
                    <td><label>User Name :</label></td><td><input type="text" name="txtUserName" ng-model="txtUserName" autofocus required /></td>                   
                </tr>
                <tr>
                    <td><label>Password :</label></td><td><input type="password" name="txtpassword" ng-model="txtpassword" required /></td>
                </tr>
                <tr>
                    <td colspan="2"><p><a href="#">Forget Password</a></p></td>
                </tr>
                <tr>
                    <td></td><td><button ng-click="GotoInbox()">Login</button><td>
                </tr>
               
            </table>          
            
    </div>
  </body>
</html>




inbox.html


HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Inbox.css" rel="stylesheet" />
    <script src="../Script/angular.min.js"></script>
</head>
<body ng-app="QuickMoveMail">
    <div ng-controller="QuickMoveMailController" class="divHeader">
        <img src="download.png"  style="width:17.3%;height:99%"/>
        <div class="divSearch">
            <input type="text" class="tftextinput" name="q" size="21" maxlength="120"/><input type="submit" value="search" class="tfbutton"/>
         </div>
    </div>
    <div class="headerMenu"></div>
    <div class="menuDiv">
        <div><button class="composeButton">COMPOSE</button></div>
        <div><a href="#" >Inbox</a></div>
        <div><a href="#">Starred</a></div>
        <div><a href="#">Sent Mail</a></div>
        <div><a href="#">Draft</a></div>
    </div>
    <div>
        <table>
            <tr ng-repeat="EmailClass in EmailClassList">
                <td>{{EmailClass.MessageNumber}}</td>
                <td>{{EmailClass.From}}</td>
                <td>{{EmailClass.Subject}}</td>
                <td>{{EmailClass.DateSent}}</td>
            </tr>
        </table>
    </div>
</body>
</html>



webservice



C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using OpenPop.Pop3;
using OpenPop.Mime;
using Email.Model;
using System.Web.Script.Serialization;

namespace Email
{
   
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
     [System.Web.Script.Services.ScriptService]
    public class EmailWebService : System.Web.Services.WebService
    {

        private const string MAILSERVER = "pop.gmail.com";
        private const int PORT = 995;
        private const bool SSL = true;

        [WebMethod]
        public void GetMail(string userName, string password)
        {
            List<EmailClass> EmailList = new List<EmailClass>();
            Pop3Client pop3Client = new Pop3Client();
           
                Pop3Client popClient = new Pop3Client();
                popClient.Connect(MAILSERVER, PORT, SSL);
                popClient.Authenticate(userName, password);               
                pop3Client = popClient;
           
            int count = pop3Client.GetMessageCount();
            for (int i = 1; i < 11; i++)
            {
                EmailClass email = new EmailClass();
                Message message = pop3Client.GetMessage(i);
                email.MessageNumber = i;
                email.From = Convert.ToString(message.Headers.From);
                email.Subject = message.Headers.Subject;
                email.DateSent = Convert.ToString(message.Headers.DateSent);
                EmailList.Add(email);
            }
            JavaScriptSerializer js = new JavaScriptSerializer();
            Context.Response.Write(js.Serialize(EmailList));

        }
    }
}



style sheet




CSS
body {
  margin: 0;
  padding: 0;
  font-family: Sans-serif;
  background: #c2f442;
  text-align:center;
}
.logindiv {
  height:50%;
  border:2px solid;
  color:#66ff33;
  margin-top:12%;
  width:38%;
  margin-left:30%;
  background-color:#42444e;
}


table tr td {
    padding:5px;
    
}

table {
    width:100%;
    padding-bottom:37px;
    
}


td:nth-child(odd){
    text-align:right;
    font-weight:600;
    color:#f2f2f2;
 }

td:nth-child(even){
text-align:left;

}
input {
    padding-left: 2px;
    width: 72%;
    height: 130%;    
    border-color: red;
    border-width: 2px;
    border-radius: 6px;
    color:#006680;
    font-weight:600;
    padding-left:2%;
}

    input:hover {
        border-color: #ff9900;
        background-color:#ffe6ff;
    }

button {
    width: 34%;
    border-radius: 6px;
    height: 181%;
    font-weight: bolder;
    color: #9900ff;
    background-color: #ffcc00;
}
    button:hover {
        background-color:#ffa366;
        color:#0d1a00;
    }

a {
     color:#66ff33;
     padding-right:79px;
}



inbox.css

CSS
body {
    width:100%;
    padding:0px 0px ;
   
}

.divHeader {
margin-top: -8px;
margin-left: 0px;
width: 100%;
background-color: #c2f0f0;
height: 70px;
}
.tftextinput{
margin: 0;
padding: 8px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
border:1px solid #0076a3; border-right:0px;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
margin-left:-14px;
width:46%;
}
.tfbutton {
margin: 0;
padding: 8px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #0076a3; border-right:0px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top,  #00adee,  #0078a5);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
.tfbutton:hover {
text-decoration: none;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top,  #0095cc,  #00678e);
}

.tfbutton::-moz-focus-inner {
border: 0;
}
.tfclear{
clear:both;
}
.divSearch {
margin-top: -53px;
margin-left: 29%;
}
.menuDiv {
display:block;
float:left;
width:210px;
height:540px;
border: 2px solid black;
}
.menuDiv div {
    padding:5px 31%;
}
a {
text-decoration:none;
color:black;
font-weight:500;
}
.headerMenu {
    margin-left: -9px;
    
    height: 54px;
    width: 100%;
    border: 1px solid #c2f0f0;
}

.composeButton {
    width: 127%;
    height: 29px;
    background-color: #d14836;
    color: white;
    border-radius: 4px;
    font-size: 12px;
}



JavaScript
/// <reference path="angular.min.js" />

var app = angular.module("QuickMoveMailApp", [])
.controller("QuickMoveMailLogin", function ($scope, $stateProvider) {
    $scope.GotoInbox = function () {
        window.location = "../MAIL/Inbox.html";
       
    }
})
Posted
Comments
Konstantin A. Magg 6-Nov-16 6:35am    
Hi @suryakantsahoo,
your question already is some days old. Are you still working on this topic?
I tried to think myself into your question, but the description is a little unprecise to me. Where exactly is the point, where you have problems?

One general remark on user authentication in single page web applications: If authentication is important, it is usually not a good idea, to handle it on the client side.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900