Войдите на страницу входа в angular и подтвердите ее
как создать страницу входа в систему и проверить ее, а на кнопке входа нажать перенаправить на другую страницу и извлечь данные из таблицы привязки сервера ?
Что я уже пробовал:
login.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
<!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>
веб-сервис
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));
}
}
}
таблица стилей
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;
}
почтовый.в 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;
}
/// <reference path="angular.min.js" />
var app = angular.module("QuickMoveMailApp", [])
.controller("QuickMoveMailLogin", function ($scope, $stateProvider) {
$scope.GotoInbox = function () {
window.location = "../MAIL/Inbox.html";
}
})
Konstantin A. Magg
Привет @suryakantsahoo,
вашему вопросу уже несколько дней. Вы все еще работаете над этой темой?
Я пытался вдуматься в ваш вопрос, но описание немного неточно для меня. Где именно находится точка, где у вас есть проблемы?
Одно общее замечание об аутентификации пользователей в одностраничных веб-приложениях: если аутентификация важна, то обычно не стоит обрабатывать ее на стороне клиента.