Notes

login.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

constructor(private userService:UserService) { }
ngOnInit() {
}
userName="";
password="";
returndata:any=false;
loginUser()
{
this.userService.loginUser(this.userName,this.password).subscribe(
data=>this.returndata=data,
error=>console.log(error)
);
console.log(this.returndata);
}
}
------------
login.html
<h3>USER LOGIN</h3>
<div>
<label for="username" >Username:</label>
<input type="text" id="username" name="userName" [(ngModel)]="userName">
</div>

<div>
<label for="pass">Password (8 characters minimum):</label>
<input type="password" id="pass" name="password" minlength="8" required [(ngModel)]="password">
</div>

<input type="submit" value="Sign in" (click)="loginUser()"><br><br>
<a routerLink="/signup" routerLinkActive="router-link-active">New here? Register... </a>
--------------------
signup.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
import { User } from '../User.model';

@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
questions=['your home town is','your favorite car is','your father name is'];
constructor(private userService:UserService){}
user:User={
"fullName":"",
"userName":"",
"gender":"",
"designation":"",
"profileImagePath":"",
"PhoneNumber":0,
"emailId":"",
"securityQuestion":"",
"answer":"",
"password":"",
"articleCount":0
};
saveUser()
{
this.userService.saveUser(this.user).subscribe(
data=> console.log(data),
error=>console.log(error)
);
console.log(this.user.PhoneNumber)
}

ngOnInit() {
}

}
------------------------
signup.html
<div>
<label for="fullname">FullName:</label>
<input type="text" id="fullname" name="fullName" [(ngModel)]="user.fullName">
</div>
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="userName" [(ngModel)]="user.userName">
</div>
<form>
please select your gender:
<input type="radio" name="gender" [(ngModel)]="user.gender" value="male">Male
<input type="radio" name="gender" [(ngModel)]="user.gender" value="female">Female
<input type="radio" name="gender" [(ngModel)]="user.gender" value="other">other
</form><br>
enter your designation
<input type="text" name="designation" [(ngModel)]="user.designation">
<br>
upload your photo
<input type="text" name="profileImagePath" [(ngModel)]="user.profileImagePath">
<br>
enter your contact number
<input type="number" name="PhoneNumber" [(ngModel)]="user.PhoneNumber">
<br>
<div>
<label for="email">Email ID:</label>
<input type="email" id="email" name="emailId" [(ngModel)]="user.emailId">
</div>
<select [(ngModel)]="user.securityQuestion">
<option *ngFor="let question of questions" [ngValue]="question">{{question}}</option>
</select>
enter your answer
<input type="text" name="answer" [(ngModel)]="user.answer">


<div>
<label for="pass">Password (8 characters minimum):</label>
<input type="password" id="pass" name="password" minlength="8" required [(ngModel)]="user.password">
</div>
<div>
<label for="pass1">Confirm Password (8 characters minimum):</label>
<input type="password" id="pass1" name="password"
minlength="8" required>
</div>
<input type="number" name="articleCount" [(ngModel)]="user.articleCount"><br><br>
<input type="submit" value="Register" (click)="saveUser()">

<a routerLink="/home" routerLinkActive="router-link-active">GOTO HOME </a>
--------------
user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from './User.model';
import { Admin } from './Admin.model';

@Injectable({
providedIn: 'root'
})
export class UserService {

constructor(private http:HttpClient) { }
saveUser(user:User)
{
return this.http.post<any>('http://localhost:1001/user',user);
}
getUser(userName:string)
{
return this.http.get<User>(`http://localhost:1001/user/${userName}`);
}
loginUser(userName:string,password:string)
{
return this.http.get<User>(`http://localhost:1001/userLogin/${userName}/${password}`);
}
loginAdmin(userName:string,password:string)
{
return this.http.get<Admin>(`http://localhost:1001/adminLogin/${userName}/${password}`);
}
}

------------------
admin.model.ts

export interface Admin
{
fullName:string;
userName:string;
password:string;
emailId:string;
totalArticleCount:number;
}