User Login Module

We have created login component file on client side using vs code

We have created login component file on client side using vs code
Login.html
<div class="panel-header panel-header-sm">
div>
<div class="main-content">
<div *ngIf="isLoginError" class="red-text center error-message">
<i class="material-icons">errori> Incorrect username or password
div>
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h5 class="title">Loginh5>
div>
<div class="card-body">
<form name="EditClient" role="form" (submit)="saveClient(UserName.value,UserPassword.value)" #f="ngForm" novalidate >
<div class="row">
<div class="col-md-8 pr-1">
<div class="form-group ">
<label>Usernamelabel>
<i class="material-icons prefix">account_circlei>
<input type="text" class="form-control" #UserName ngModel name="UserName" placeholder="Username" required>
div>
div>
div>
<div class="row">
<div class="col-md-8 pr-1">
<div class="form-group">
<label>Passwordlabel>
<i class="material-icons prefix">vpn_keyi>
<input type="password" class="form-control" #UserPassword ngModel name="Password" placeholder="Password" required>
div>
div>
div>
<div class="row">
<div class="input-field col s12">
<button [disabled]="isInProgress" class="btn-large btn-submit" type="submit">Loginbutton>
div>
div>
form>
div>
div>
div>
div>

Now we have Angular Code - Client Side Code

Login.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from 'services/user.service';
import { HttpErrorResponse } from '@angular/common/http';
import { CustomizeService } from 'services/customize.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
// itemResource = new DataTableResource([]);
items = [];
itemCount = 0;
entryMode = false;
validationMessage = '';
showValidation = false;
isInProgress = false;
deleting = false;
itemToEdit = {
"UserID":1,
"UserName":"",
"UserPassword":"",
};
messages: {};
isLoginError : boolean = false;
error: HttpErrorResponse;
constructor(private userService : UserService,private customizeService: CustomizeService,private router : Router) { this.loadMessages();}
ngOnInit() {
}
saveClient(UserName,UserPassword){
this.userService.userAuthentication(UserName,UserPassword).subscribe(data => {
alert(this.messages['msg_login']);
this.router.navigate(['/customers']);
},
(error : HttpErrorResponse)=>{
this.isLoginError = true;
this.error = error;
});
}
loadMessages(){
this.customizeService.getMessages().subscribe(data => {
this.messages = data;
});
}
}

User.service.ts

import { Injectable } from '@angular/core';
import {Router} from '@angular/router';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { environment } from '../environments/environment';
import { Observable, of } from 'rxjs';
import { delay, tap } from 'rxjs/operators';
@Injectable()
export class UserService {
isSessionVaild = true;
constructor(private http: Http, public router: Router) { this.isSessionVaild = true; }
userAuthentication(userName,UserPassword){
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
return this.http.post(environment.apiUrl + 'User/VerifyUser/?UserName='+ userName +'¶m='+ UserPassword, { headers: headers })
.pipe(map(data => data.json()),
catchError((error: any) => {
throw error;
}));
}
}

Server side code using asp.net mvc5

User.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace DomainDb.Models
{
public class User
{
public int UserID { get; set; }
public int UserDetailsID { get; set; }
public int LocationID { get; set; }
public string LocationName { get; set; }
public int ClientID { get; set; }
public string ClientName { get; set; }
public string UserName { get; set; }
public string UserPassword { get; set; }
public string AuthenticationType { get; set; }
public string DefaultStore { get; set; }
public string DefaultSubStore { get; set; }
public int EmployeeID { get; set; }
public int DoctorID { get; set; }
public string DefaultReceiptBook { get; set; }
public int UserRightsID { get; set; }
public int ModuleID { get; set; }
public bool Activate { get; set; }
}
}

IUserRepository.cs

using DomainDb.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace DomainDb.Repository
{
public interface IUserRepository
{
//Getting All User information
List Get();
//Getting particular User information
User Get(int ID);
//Add or Update User information
void Post(User value);
object VerifyUser(string UserName, string param);
//Removing particular User information
void Delete(int ID);
}
}

UserRepository.cs

public object VerifyUser(string UserName, string param)
{
List userList = new List();
query = "select * from mstuserheader where UserName = '" + UserName +"' and UserPassword = '"+ param + "'";
using (MySqlConnection ConnEpion = new MySqlConnection(ConnStr))
{
ConnEpion.Open();
using (MySqlCommand objCmd = new MySqlCommand(query))
{
objCmd.Connection = ConnEpion;
using (IDataReader objReader = objCmd.ExecuteReader())
{
while (objReader.Read())
{
userList.Add(new User()
{
UserID = objReader.GetInt32(objReader.GetOrdinal("UserID")),
UserName = objReader.GetString(objReader.GetOrdinal("UserName")),
UserPassword = objReader.GetString(objReader.GetOrdinal("UserPassword")),
}
);
}
}
}
}
return userList;
}

UserController.cs

public object VerifyUser(string UserName, string param)
{
return _userRepository.VerifyUser(UserName,param);
}

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Munesh Sharma7y ago
https://theinfogrid.com/tech/developers/angular/sign-in-with-google-angular/
0
Ninad Shinde7y ago
We have created login component file on client side using vs code

Login.html

We have created login component file on client side using vs code

Login.html





<div class="panel-header panel-header-sm">

div>

<div class="main-content">

<div *ngIf="isLoginError" class="red-text center error-message">

    <i class="material-icons">errori> Incorrect username or password

div>

<div class="col-md-12">

  <div class="card">

    <div class="card-header">

      <h5 class="title">Loginh5>

    div>

    <div class="card-body">

      <form name="EditClient"  role="form"  (submit)="saveClient(UserName.value,UserPassword.value)" #f="ngForm" novalidate >

        <div class="row">

          <div class="col-md-8 pr-1">

            <div class="form-group ">

              <label>Usernamelabel>

              <i class="material-icons prefix">account_circlei>

              <input type="text" class="form-control" #UserName ngModel name="UserName" placeholder="Username" required>

            div>

          div>

        div>

        <div class="row">

          <div class="col-md-8 pr-1">

            <div class="form-group">

              <label>Passwordlabel>

              <i class="material-icons prefix">vpn_keyi>

              <input type="password" class="form-control" #UserPassword ngModel name="Password" placeholder="Password" required>

            div>

          div>

        div>

        <div class="row">

            <div class="input-field col s12">

              <button [disabled]="isInProgress" class="btn-large btn-submit" type="submit">Loginbutton>

            div>

        div>

      form>

    div>

  div>

div>

div>

Now we have Angular Code - Client Side Code
Login.ts

Login.ts



import { Component, OnInit } from '@angular/core';

import { Router } from '@angular/router';

import { UserService } from 'services/user.service';

import { HttpErrorResponse } from '@angular/common/http';

import { CustomizeService } from 'services/customize.service';



@Component({

  selector: 'app-login',

  templateUrl: './login.component.html',

  styleUrls: ['./login.component.scss']

})

export class LoginComponent implements OnInit {



// itemResource = new DataTableResource([]);

items = [];

itemCount = 0;

entryMode = false;

validationMessage = '';

showValidation = false;

isInProgress = false;

deleting = false;

itemToEdit = {

   "UserID":1,

   "UserName":"",

   "UserPassword":"",



};

messages: {};

isLoginError : boolean = false;

  error: HttpErrorResponse;



constructor(private userService : UserService,private customizeService: CustomizeService,private router : Router) {  this.loadMessages();}



ngOnInit() {

}

saveClient(UserName,UserPassword){

   this.userService.userAuthentication(UserName,UserPassword).subscribe(data => {

     alert(this.messages['msg_login']);

     this.router.navigate(['/customers']);

    },

    (error : HttpErrorResponse)=>{

      this.isLoginError = true;

      this.error = error;

    });



}

loadMessages(){

  this.customizeService.getMessages().subscribe(data => {

    this.messages = data;

  });

}





}

User.service.ts

import { Injectable } from '@angular/core';

import {Router} from '@angular/router';

import { Http, Response, Headers, RequestOptions } from '@angular/http';

import { throwError } from 'rxjs';

import { catchError, map } from 'rxjs/operators';

import { environment } from '../environments/environment';



import { Observable, of } from 'rxjs';

import { delay, tap } from 'rxjs/operators';

@Injectable()

export class UserService {



  isSessionVaild = true;

  constructor(private http: Http, public router: Router) { this.isSessionVaild = true; }



  userAuthentication(userName,UserPassword){

    let headers = new Headers();



    headers.append('Content-Type', 'application/json');

    headers.append('Access-Control-Allow-Origin', '*');

    headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');

    return this.http.post(environment.apiUrl + 'User/VerifyUser/?UserName='+ userName +'¶m='+ UserPassword, { headers: headers })

      .pipe(map(data => data.json()),

      catchError((error: any) => {

        throw error;

      }));

  }

}

Server side code using asp.net mvc5
User.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;



namespace DomainDb.Models

{

    public class User

    {

        public int UserID { get; set; }

        public int UserDetailsID { get; set; }

        public int LocationID { get; set; }

        public string LocationName { get; set; }

        public int ClientID { get; set; }

        public string ClientName { get; set; }

        public string UserName { get; set; }

        public string UserPassword { get; set; }

        public string AuthenticationType { get; set; }

        public string DefaultStore { get; set; }

        public string DefaultSubStore { get; set; }

        public int EmployeeID { get; set; }

        public int DoctorID { get; set; }

        public string DefaultReceiptBook { get; set; }

        public int UserRightsID { get; set; }

        public int ModuleID { get; set; }

        public bool Activate { get; set; }



    }

}

IUserRepository.cs

using DomainDb.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;



namespace DomainDb.Repository

{

    public interface IUserRepository

    {

        //Getting All User information

        List Get();



        //Getting particular User information

        User Get(int ID);



        //Add or Update User information

        void Post(User value);



        object VerifyUser(string UserName, string param);



        //Removing particular User information

        void Delete(int ID);





    }

}

UserRepository.cs

public object VerifyUser(string UserName, string param)

        {

            List userList = new List();

            query = "select * from mstuserheader where UserName = '" + UserName +"' and UserPassword = '"+ param + "'";

            using (MySqlConnection ConnEpion = new MySqlConnection(ConnStr))

            {

                ConnEpion.Open();

                using (MySqlCommand objCmd = new MySqlCommand(query))

                {

                    objCmd.Connection = ConnEpion;

                    using (IDataReader objReader = objCmd.ExecuteReader())

                    {

                        while (objReader.Read())

                        {



                                userList.Add(new User()

                                {

                                    UserID = objReader.GetInt32(objReader.GetOrdinal("UserID")),

                                    UserName = objReader.GetString(objReader.GetOrdinal("UserName")),

                                    UserPassword = objReader.GetString(objReader.GetOrdinal("UserPassword")),



                                }

                                );





                        }

                    }

                }

            }



            return userList;

        }

UserController.cs

public object VerifyUser(string UserName, string param)

     {



         return _userRepository.VerifyUser(UserName,param);

     }
0
Muthu Kumar7y ago
Hi Ninad Shinde,

Here is an reference link for Social Login like, Google, Facebook, Linked in

https://www.npmjs.com/package/angular-6-social-login
https://theinfogrid.com/tech/developers/angular/sign-in-with-google-angular/
https://stackoverflow.com/questions/38846232/how-to-implement-signin-with-google-in-angular-2-using-typescript
0