Angular JS All file related to stare project=>
1. main.ts file
2. master.module.ts file
3. master.component.ts file
4. master.routing.ts
5. login.component.ts file
6. login.services.ts file
7. login.component.HTML file
8.master.header.ts
9.
.
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;"> Many Many Happy Returns Of The Day To </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;"> from VIRTUAL EMPLOYEE Family</span></span></span><span><span style="font-size: 17px;"> Form 16 has been uploaded ! If TDS declaration given then you can find the form inside </span><span style="color: rgb(255, 0, 0); font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; font-size: 17px;">declaration by year </span><span style="font-size: 17px;"> under TAX in </span><span style="color: rgb(255, 0, 0); font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; font-size: 17px;">human resource</span><span style="font-size: 17px;"> tab else you can download it from </span><span style="color: rgb(255, 0, 0); font-family: "Lucida Grande", 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: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; font-size: 17px;">employee tab in human resource tab.</span></span></span></div></marquee>
</div>
</div>
</header>
</div>
.
