Routing , master page, login form and validate in Angular JS 4

Angular JS All file related to stare project=>

1. main.ts  file

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

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { MasterModule} from './app/Modules/master.module'

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

if (environment.production) {

enableProdMode();

}

platformBrowserDynamic().bootstrapModule(MasterModule);

2. master.module.ts  file

import { BrowserModule } from '@angular/platform-browser';

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { CommonModule } from '@angular/common';

import { HttpModule } from '@angular/http';

import { masterrouting } from '../Routing/master.routing';

import { MasterheaderComponent } from '../Components/Header/master.header';

import {MasterComponent} from '../Components/Dashboard/master.component';

import { LoginComponent } from '../Components/Dashboard/login.component';

@NgModule({

declarations: [MasterComponent,LoginComponent,MasterheaderComponent,MasterfooterComponent,HomeComponent,EventComponent,AddforumComponent,EmpdashboardComponent,

EmpheaderComponent,EmpleftComponent],

imports: [BrowserModule,masterrouting,HttpModule,CommonModule,FormsModule,ReactiveFormsModule],

providers: [],

bootstrap: [MasterComponent]

})

export class MasterModule { }

3. master.component.ts file

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

@Component({

selector: 'app-root',

template: '<router-outlet></router-outlet>',

})

export class MasterComponent {

}

4. master.routing.ts

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

import { Routes, RouterModule } from '@angular/router';

/*All Router Component import here*/

import { LoginComponent } from '../Components/Dashboard/login.component';

import { HomeComponent } from '../Components/Dashboard/home.component';

const appRoutes: Routes = [

{

path: '',

component: LoginComponent

},

];

export const masterrouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

5. login.component.ts file

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

import { loginServices} from '../../Services/Dashboard/login.services';

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

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { logininfo } from '../../Services/Dashboard/login.interface';

@Component({

templateUrl: '../../UI/Dashboard/Login.component.html',

styleUrls: ['../../Content/Css/master.css'],

providers: [loginServices,logininfo]

})

export class LoginComponent implements OnInit {

login:boolean=true;

forgot:boolean=false;

active = true;

uservalid = false;

Invaliduser: string;

constructor(public _lservices:loginServices, public _router:Router, public data:logininfo,private fb: FormBuilder){}

ngOnInit(): void {

this.buildForm();

}

LoginForm: FormGroup;

buildForm(): void {

this.LoginForm = this.fb.group({

'EmailAddress': [this.data.EmailAddress, [

Validators.required,

Validators.minLength(4),

Validators.maxLength(24)]

],

'Password': [this.data.Password, Validators.required]

});

this.LoginForm.valueChanges

.subscribe(data => this.onValueChanged(data));

this.onValueChanged(); // (re)set validation messages now

}

onValueChanged(data?: any) {

this.uservalid = false;

if (!this.LoginForm) { return; }

const form = this.LoginForm;

for (const field in this.formErrors) {

// clear previous error message (if any)

this.formErrors[field] = '';

const control = form.get(field);

if (control && control.dirty && !control.valid) {

const messages = this.validationMessages[field];

for (const key in control.errors) {

this.formErrors[field] += messages[key] + ' ';

}

}

}

}

formErrors = {

'EmailAddress': '',

'Password': ''

};

validationMessages = {

'EmailAddress': {

'required': 'Name is required.',

'minlength': 'Name must be at least 4 characters long.',

'maxlength': 'Name cannot be more than 24 characters long.'

},

'Password': {

'required': 'Password is required.'

}

};

emplogin()

{

this._lservices.login(this.data).subscribe(res => this.result(res), res => this.errorlogin(res));

}

result(info: any) {

if (info != null) {

alert(info.EmpId);

localStorage.setItem("ID", info.EmpId);

localStorage.setItem("Name", info.Name);

this._router.navigateByUrl('/dashboard');

}

else {

alert('Invalid User details');

}

}

errorlogin(res: any) {

console.log(res);

};

resetpass()

{

this.login=false;

this.forgot=true;

}

Login()

{

this.forgot=false;

this.login=true;

}

}

6. login.services.ts file

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

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

import 'rxjs/add/operator/map';

import { Observable } from "rxjs/Rx";

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

import { logininfo } from '../../Services/Dashboard/login.interface';

import {userinfo,Actype} from './userinfo';

@Injectable()

export class loginServices{

constructor(private _http: Http, private _router : Router) { }

login(obj:logininfo) {

let _headers = new Headers({ 'Content-Type': 'application/json' });

return this._http.post('http://localhost:53656/api/Login/checklogin', obj, { headers: _headers }).map(res => res.json());

//return this._http.get('http://localhost:53656/api/Login/checklogin?EmailAddress=' + EmailAddress + '&Password=' + Password + '').map(res => res.json());

}

_url:string;

info:string;

constructor(private http: Http){ }

/*Get All Account Type start here*/

getAccounttype() {

return this.http.get('http://localhost:64592/api/Laboratory/GetAccounttype?type=1').map(res=>res.json()); }

/*End*/

/*Insert User information start here*/

adduser(data:userinfo) {

var headers = new Headers();

headers.append('Content-Type','application/json; charset=utf-8');

return this.http.post('http://localhost:64592/api/Laboratory/Savedata',data,{headers: headers}).map(res => res.json()); }

/*End*/

/*User Login start here*/

login(data:logininfo)

{

var headers =new Headers();

headers.append('Content-Type','application/json,charset=utf-8')

return this.http.get('http://localhost:64592/api/Laboratory/Loginuser?email='+data.EmailAddress+'&pass='+data.Password+'').map(res=>res.json());

}

/*End*/

/*Get all User Information start here*/

getuser(){

return this.http.get('http://localhost:64592/api/Laboratory/GetInfo').map(res=>res.json()); }

/*End*/

}

7. login.component.HTML file

<style>

body {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 14px;

line-height: 1.42857143;

color: #333;

background-color: #fff;

}

</style>

<div id="wrapwrap">

<master-header> </master-header>

<main>

<div class="oe_website_login_container" style="margin-top: 10%; margin-bottom: 22.5%;">

<form class="oe_login_form" [formGroup]="LoginForm" *ngIf="active" (ngSubmit)="emplogin()">

<div *ngIf="login">

<div class="form-group field-login">

<label for="login" class="control-label">User</label>

<input name="login" id="login" class="form-control" formControlName="EmailAddress" [(ngModel)]="data.EmailAddress" autofocus="autofocus" type="text">

<div *ngIf="formErrors.EmailAddress" class="error"> {{ formErrors.EmailAddress }}</div>

</div>

<div class="form-group field-password">

<label for="password" class="control-label">Password</label>

<input name="Password" id="Password" class="form-control" formControlName="Password" [(ngModel)]="data.Password" type="password">

<div *ngIf="formErrors.EmailAddress" class="error"> {{ formErrors.Password }}</div>

</div>

<div class="clearfix oe_login_buttons">

<a (click)="resetpass()" class="btn btn-link pull-right">Reset Password</a>

<button type="submit" class="btn btn-primary" value="login" [disabled]="!LoginForm.valid">Login</button>

<!--<button type="submit" (click)="emplogin()" class="btn btn-primary">Log in</button>-->

</div>

</div>

<div *ngIf="forgot">

<div class="form-group field-login">

<label for="login" class="control-label">Your Email</label>

<input name="login" id="login" class="form-control" autofocus="autofocus" required="required" type="text">

</div>

<div class="clearfix oe_login_buttons">

<a class="btn btn-link pull-right" (click)="Login()">Back to Login</a>

<button type="submit" class="btn btn-primary pull-left">Reset password</button>

</div>

</div>

</form>

</div>

</main>

</div>

8.master.header.ts

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

@Component({

selector: 'master-header',

templateUrl: '../../UI/Header/master.header.html',

styleUrls: ['../../Content/Css/master.css']

})

export class MasterheaderComponent {

}

9.

<div id="wrapwrap">

<header>

<div class="navbar navbar-default navbar-static-top">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-top-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a href="/" class="navbar-brand logo">

<img src="../assets/Img/logo.png" alt="Logo of Virtual Employee Pvt. Ltd." title="Virtual Employee Pvt. Ltd.">

</a>

</div>

<div class="collapse navbar-collapse navbar-top-collapse">

<ul class="nav navbar-nav navbar-right" id="top_menu">

<li>

<a routerLink="/home" routerLinkActive="active">

<span>Home</span>

</a>

</li>

<li>

<a href="/event">

<span>Events</span>

</a>

</li>

<li class="dropdown ">

<a class="dropdown-toggle" data-toggle="dropdown" href="/addforum">

<span>Forum</span> <span class="caret"></span>

</a>

<ul class="dropdown-menu" role="menu">

<li>

<a href="/home/forum">

<span>View</span>

</a>

</li>

<li>

<a href="/home/forum/addnew">

<span>Add New</span>

</a>

</li>

</ul>

</li>

<li class="divider"></li>

<li>

<a href="/">

<b>Sign in</b>

</a>

</li>

</ul>

</div>

<marquee> <div><span><span style="font-size: 17px;color:red;">TDS Declaration has been started now, you can submit declaration and check your tax in TDS Calculator.</span><span><span style="text-align: justify;"><span style="font-size: 17px; line-height: 26.9841289520264px;color:#35ce35;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Many Many Happy Returns Of The Day To&nbsp;</span><span style="font-size: 17px; line-height: 26.9841289520264px; color:#ff00ee;">Mridu Singh, </span><span style="font-size: 17px; line-height: 26.9841289520264px; color:#003fff;"> Abhijeet Sadashiv Khot, Mithilesh Kumar, </span><span style="font-size: 17px; line-height: 26.9841289520264px;color:#35ce35;">&nbsp;from VIRTUAL EMPLOYEE Family</span></span></span><span><span style="font-size: 17px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Form 16 has been uploaded ! If TDS declaration given then you can find the form inside&nbsp;</span><span style="color: rgb(255, 0, 0); font-family: &quot;Lucida Grande&quot;, Helvetica, Verdana, Arial, sans-serif; font-size: 17px;">declaration by year </span><span style="font-size: 17px;">&nbsp; under TAX in &nbsp;</span><span style="color: rgb(255, 0, 0); font-family: &quot;Lucida Grande&quot;, Helvetica, Verdana, Arial, sans-serif; font-size: 17px;">human resource</span><span style="font-size: 17px;">&nbsp;tab else you can download it from </span><span style="color: rgb(255, 0, 0); font-family: &quot;Lucida Grande&quot;, Helvetica, Verdana, Arial, sans-serif; font-size: 17px;"> tax declaration tab in </span><span style="font-size: 17px;">your dashboard inside </span><span style="color: rgb(255, 0, 0); font-family: &quot;Lucida Grande&quot;, Helvetica, Verdana, Arial, sans-serif; font-size: 17px;">employee tab in human resource tab.</span></span></span></div></marquee>

</div>

</div>

</header>

</div>

.