Browse Source

Login Spring Security

master
Sanjith Sivapuram 4 years ago
parent
commit
387d686b03
27 changed files with 534 additions and 88 deletions
  1. 4
      Shopify-Cart/src/main/resources/application.properties
  2. 6
      ShopifyUI/proxy.conf.json
  3. 4
      ShopifyUI/src/app/app-routing.module.ts
  4. 22
      ShopifyUI/src/app/auth/login/login.component.ts
  5. 4
      ShopifyUI/src/app/auth/sign-up/sign-up.component.css
  6. 35
      ShopifyUI/src/app/auth/sign-up/sign-up.component.html
  7. 36
      ShopifyUI/src/app/auth/sign-up/sign-up.component.ts
  8. 18
      ShopifyUI/src/app/components/admin/admin.component.css
  9. 39
      ShopifyUI/src/app/components/admin/admin.component.html
  10. 49
      ShopifyUI/src/app/components/cart/cart.component.html
  11. 17
      ShopifyUI/src/app/components/cart/cart.component.ts
  12. 3
      ShopifyUI/src/app/components/home/home.component.css
  13. 23
      ShopifyUI/src/app/components/home/home.component.html
  14. 17
      ShopifyUI/src/app/components/home/home.component.ts
  15. 49
      ShopifyUI/src/app/components/payments/payments.component.html
  16. 16
      ShopifyUI/src/app/components/payments/payments.component.ts
  17. 37
      ShopifyUI/src/app/components/product-detail/product-detail.component.css
  18. 62
      ShopifyUI/src/app/components/product-detail/product-detail.component.html
  19. 61
      ShopifyUI/src/app/components/product-detail/product-detail.component.ts
  20. 23
      ShopifyUI/src/app/components/products/products.component.html
  21. 18
      ShopifyUI/src/app/components/products/products.component.ts
  22. 14
      ShopifyUI/src/app/model/review.model.ts
  23. 8
      ShopifyUI/src/app/model/reviewDto.model.ts
  24. 4
      ShopifyUI/src/app/service/cart.service.ts
  25. 13
      ShopifyUI/src/app/service/review.service.ts
  26. 31
      ShopifyUI/src/app/service/user.service.ts
  27. 9
      ShopifyUI/src/styles.css

4
Shopify-Cart/src/main/resources/application.properties

@ -1,7 +1,7 @@
server.port=8002
spring.datasource.url=jdbc:mysql://10.3.117.26:3306/Shopify_DB?createDatabaseIfNotExist=true
spring.datasource.username=testuser
spring.datasource.url=jdbc:mysql://10.3.117.23:3306/Shopify_DB?createDatabaseIfNotExist=true
spring.datasource.username=testuser1
spring.datasource.password=PASSWORD123
server.servlet.context-path=/api2

6
ShopifyUI/proxy.conf.json

@ -1,14 +1,14 @@
{
"/api1": {
"target": "http://10.3.117.26:8001",
"target": "http://10.3.117.23:8001",
"secure": false
},
"/api2": {
"target": "http://10.3.117.26:8002",
"target": "http://10.3.117.23:8002",
"secure": false
},
"/api3": {
"target": "http://10.3.117.26:8003",
"target": "http://10.3.117.23:8003",
"secure": false
}
}

4
ShopifyUI/src/app/app-routing.module.ts

@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './auth/login/login.component';
import { SignUpComponent } from './auth/sign-up/sign-up.component';
import { AdminComponent } from './components/admin/admin.component';
import { CartComponent } from './components/cart/cart.component';
import { HomeComponent } from './components/home/home.component';
import { PaymentsComponent } from './components/payments/payments.component';
@ -16,7 +17,8 @@ const routes: Routes = [
{ path: 'cart/:user_id', component: CartComponent},
{ path: 'payment', component: PaymentsComponent},
{ path: 'login', component: LoginComponent},
{ path: 'signup', component: SignUpComponent}
{ path: 'signup', component: SignUpComponent},
{ path: 'admin', component: AdminComponent},
];
@NgModule({

22
ShopifyUI/src/app/auth/login/login.component.ts

@ -33,14 +33,18 @@ export class LoginComponent implements OnInit {
username: this.loginForm.value.username,
password: this.loginForm.value.password
}
// this.userService.loginUser(user).subscribe(data => {
// window.sessionStorage.setItem("username", user.username);
// window.sessionStorage.setItem("authcode", btoa(user.username + ":" + user.password));
// window.sessionStorage.setItem("isLoggedIn", "true");
// this.route.navigateByUrl("/");
// },
// (err: any) => {
// this.msg = "Invalid Credentials"
// })
this.userService.loginUser(user).subscribe(data => {
console.log(data)
this.userService.getUserByName(user.username).subscribe(data1 => {
window.sessionStorage.setItem("username", user.username);
window.sessionStorage.setItem("user_id", String(data1.id));
window.sessionStorage.setItem("authcode", btoa(user.username + ":" + user.password));
window.sessionStorage.setItem("isLoggedIn", "true");
this.route.navigateByUrl("/");
})
},
(err: any) => {
this.msg = "Invalid Credentials"
})
}
}

4
ShopifyUI/src/app/auth/sign-up/sign-up.component.css

@ -3,6 +3,7 @@
border: none;
padding: 16px;
height: 570px;
overflow-y: scroll;
box-shadow: 2px 4px 14px 0px rgba(0, 0, 0, 0.74);
-webkit-box-shadow: 2px 4px 14px 0px rgba(0, 0, 0, 0.74);
-moz-box-shadow: 2px 4px 14px 0px rgba(0, 0, 0, 0.74);
@ -29,5 +30,4 @@
.login_form p {
color: #E74C3C;
}
}

35
ShopifyUI/src/app/auth/sign-up/sign-up.component.html

@ -29,6 +29,41 @@
<p>Invalid Password</p>
</div>
<BR><BR>
<input type="text" placeholder="Enter Mobile Number" formControlName="mobileNumber" />
<div *ngIf="signUpForm.controls['mobileNumber'].invalid && (signUpForm.controls['mobileNumber'].touched || signUpForm.controls['mobileNumber'].dirty)">
<p>Invalid Mobile Number</p>
</div>
<BR><BR>
<input type="email" placeholder="Enter Email Id" formControlName="emailId" />
<div *ngIf="signUpForm.controls['emailId'].invalid && (signUpForm.controls['emailId'].touched || signUpForm.controls['emailId'].dirty)">
<p>Invalid Email</p>
</div>
<BR><BR>
<input type="text" placeholder="Enter Address" formControlName="address" />
<div *ngIf="signUpForm.controls['address'].invalid && (signUpForm.controls['address'].touched || signUpForm.controls['address'].dirty)">
<p>Invalid Address</p>
</div>
<BR><BR>
<input type="text" placeholder="Enter City" formControlName="city" />
<div *ngIf="signUpForm.controls['city'].invalid && (signUpForm.controls['city'].touched || signUpForm.controls['city'].dirty)">
<p>Invalid City</p>
</div>
<BR><BR>
<input type="text" placeholder="Enter State" formControlName="state" />
<div *ngIf="signUpForm.controls['state'].invalid && (signUpForm.controls['state'].touched || signUpForm.controls['state'].dirty)">
<p>Invalid State</p>
</div>
<BR><BR>
<input type="text" placeholder="Enter Country" formControlName="country" />
<div *ngIf="signUpForm.controls['country'].invalid && (signUpForm.controls['country'].touched || signUpForm.controls['country'].dirty)">
<p>Invalid Country</p>
</div>
<BR><BR>
<input type="text" placeholder="Enter Pin Code" formControlName="pinCode" />
<div *ngIf="signUpForm.controls['pinCode'].invalid && (signUpForm.controls['pinCode'].touched || signUpForm.controls['pinCode'].dirty)">
<p>Invalid PinCode</p>
</div>
<BR><BR>
<button [disabled]='!signUpForm.valid'>Sign Up</button>
</form>
</div>

36
ShopifyUI/src/app/auth/sign-up/sign-up.component.ts

@ -19,6 +19,13 @@ export class SignUpComponent implements OnInit {
name: new FormControl(''),
username: new FormControl(''),
password: new FormControl(''),
mobileNumber: new FormControl(''),
emailId: new FormControl(''),
address: new FormControl(''),
city: new FormControl(''),
state: new FormControl(''),
country: new FormControl(''),
pinCode: new FormControl('')
})
}
@ -26,7 +33,14 @@ export class SignUpComponent implements OnInit {
this.signUpForm = new FormGroup({
name: new FormControl('', Validators.required),
username: new FormControl('', Validators.required),
password: new FormControl('', Validators.required)
password: new FormControl('', Validators.required),
mobileNumber: new FormControl('',Validators.required),
emailId: new FormControl('',Validators.required),
address: new FormControl('',Validators.required),
city: new FormControl('',Validators.required),
state: new FormControl('',Validators.required),
country: new FormControl('',Validators.required),
pinCode: new FormControl('',Validators.required)
})
}
@ -35,13 +49,21 @@ export class SignUpComponent implements OnInit {
name: this.signUpForm.value.name,
username: this.signUpForm.value.username,
password: this.signUpForm.value.password,
mobileNumber: this.signUpForm.value.mobileNumber,
emailId: this.signUpForm.value.emailId,
address: this.signUpForm.value.address,
city: this.signUpForm.value.city,
state: this.signUpForm.value.state,
country: this.signUpForm.value.country,
pinCode: this.signUpForm.value.pinCode,
}
// this.userService.postUser(user).subscribe(data => {
// this.route.navigateByUrl("/login?msg=sign-up%20success");
// },
// (err: any) => {
// this.msg = "Could Not Sign In";
// })
this.userService.postUser(user).subscribe(data => {
this.route.navigateByUrl("/login?msg=sign-up%20success");
},
(err: any) => {
this.msg = "Could Not Sign In";
})
}
}

18
ShopifyUI/src/app/components/admin/admin.component.css

@ -0,0 +1,18 @@
.admin-heading {
font-size: 5em;
font-weight: 700;
color: #1B4F72;
}
.card-heading {
/* font-size: 5em; */
font-weight: 500;
background-color: #1B4F72;
padding: 12px 16px;
height: 250px;
border-radius: 20px;
}
.card-heading h3 {
vertical-align: middle;
}

39
ShopifyUI/src/app/components/admin/admin.component.html

@ -1 +1,38 @@
<p>admin works!</p>
<div class="row navbar">
<div class="col-10">
<h2>Shopify</h2>
</div>
<div class="col-1">
<a routerLink="/home">Home</a>
</div>
<div class="col-1">
<a routerLink="/products">Products</a>
</div>
</div>
<br><br><br>
<div class="row">
<div class="col-12 text-center">
<p class="admin-heading">Welcome Admin</p>
</div>
<div>
<br><br><br>
<div class="row text-center m-auto">
<div class="col-4">
<div class="card card-heading">
<br><br>
<h3>View All Orders</h3>
</div>
</div>
<div class="col-4">
<div class="card card-heading">
<br><br>
<h3>View All Products</h3>
</div>
</div>
<div class="col-4">
<div class="card card-heading">
<br><br>
<h3>View User Requests</h3>
</div>
</div>
</div>

49
ShopifyUI/src/app/components/cart/cart.component.html

@ -1,19 +1,36 @@
<div class="row navbar">
<div class="col-8">
<h2>Shopify</h2>
</div>
<div class="col-1">
<a routerLink="/home">Home</a>
</div>
<div class="col-1">
<a routerLink="/products">Products</a>
</div>
<div class="col-1 active">
<a routerLink="/cart/{{uid}}">{{cartNo}}&nbsp;&nbsp;<i class="bi bi-cart3"></i>Cart</a>
</div>
<div class="col-1 loginbtn">
<a routerLink="/login">Login</a>
</div>
<div class="row navbar text-right">
<div class="col-1"></div>
<div class="col-6">
<h2>Shopify</h2>
</div>
<div class="col-1">
<a routerLink="/home">Home</a>
</div>
<div class="col-1">
<a routerLink="/products">Products</a>
</div>
<div class="col-1 active">
<a routerLink="/cart/{{uid}}">{{cartNo}}&nbsp;&nbsp;<i class="bi bi-cart3"></i>Cart</a>
</div>
<div class="col-1 loginbtn">
<ng-container *ngIf="authcode == null;then loginmsg else logoutmsg"></ng-container>
<ng-template #logoutmsg>
<div ngbDropdown class="d-inline-block">
<button class="btn dropBtn" id="dropdownBasic1" ngbDropdownToggle><i class="bi bi-person"></i></button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem disabled>Hello {{username}}</button>
<hr>
<button ngbDropdownItem>Personal details</button>
<button ngbDropdownItem>Orders</button>
<button ngbDropdownItem (click)="onLogout()">Logout</button>
</div>
</div>
</ng-template>
<ng-template #loginmsg>
<a routerLink="/login">Login</a>
</ng-template>
</div>
<div class="col-1"></div>
</div>
<br><br>
<div class="row">

17
ShopifyUI/src/app/components/cart/cart.component.ts

@ -11,11 +11,15 @@ export class CartComponent implements OnInit {
cartNo:number = 0;
cartItems:Cart[];
uid:string = "1";
uid:number = 1;
totalPrice:number = 0;
username:any='';
authcode:any='';
constructor(private cartService:CartService) { }
ngOnInit(): void {
this.username = window.sessionStorage.getItem("username");
this.authcode = window.sessionStorage.getItem("authcode")
this.cartService.getCartByUser(this.uid).subscribe(data1 => {
this.cartNo = data1.length;
this.cartItems=data1;
@ -91,4 +95,15 @@ export class CartComponent implements OnInit {
})
}
onLogout() {
if (this.authcode != null) {
this.authcode = null;
this.username = null;
window.sessionStorage.removeItem("username");
window.sessionStorage.removeItem("user_id");
window.sessionStorage.removeItem("authcode");
window.sessionStorage.removeItem("isLoggedIn");
}
}
}

3
ShopifyUI/src/app/components/home/home.component.css

@ -10,9 +10,6 @@
.home-heading {
font-size: 7em;
font-weight: 700;
/* background-repeat: no-repeat;
background-size: contain;
background-position: center; */
}
.product {

23
ShopifyUI/src/app/components/home/home.component.html

@ -1,5 +1,6 @@
<div class="row navbar">
<div class="col-8">
<div class="row navbar text-right">
<div class="col-1"></div>
<div class="col-6">
<h2>Shopify</h2>
</div>
<div class="col-1 active">
@ -12,8 +13,24 @@
<a routerLink="/cart/{{uid}}">{{cartNo}}&nbsp;&nbsp;<i class="bi bi-cart3"></i>Cart</a>
</div>
<div class="col-1 loginbtn">
<a routerLink="/login">Login</a>
<ng-container *ngIf="authcode == null;then loginmsg else logoutmsg"></ng-container>
<ng-template #logoutmsg>
<div ngbDropdown class="d-inline-block">
<button class="btn dropBtn" id="dropdownBasic1" ngbDropdownToggle><i class="bi bi-person"></i></button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem disabled>Hello {{username}}</button>
<hr>
<button ngbDropdownItem>Personal details</button>
<button ngbDropdownItem>Orders</button>
<button ngbDropdownItem (click)="onLogout()">Logout</button>
</div>
</div>
</ng-template>
<ng-template #loginmsg>
<a routerLink="/login">Login</a>
</ng-template>
</div>
<div class="col-1"></div>
</div>
<br>
<div class="row">

17
ShopifyUI/src/app/components/home/home.component.ts

@ -11,12 +11,16 @@ import { ProductService } from 'src/app/service/product.service';
export class HomeComponent implements OnInit {
cartNo:number = 0;
uid:string = "1";
uid:number = 1;
username:any = '';
authcode:any = '';
searchValue: string = '';
products:Product[];
constructor(private cartService: CartService,private productService: ProductService) { }
ngOnInit(): void {
this.username = window.sessionStorage.getItem("username");
this.authcode = window.sessionStorage.getItem("authcode");
this.cartService.getCartByUser(this.uid).subscribe(data1 => {
this.cartNo = data1.length;
})
@ -28,4 +32,15 @@ export class HomeComponent implements OnInit {
onSearchEnter(value: string) {
this.searchValue = value;
}
onLogout() {
if (this.authcode != null) {
this.authcode = null;
this.username = null;
window.sessionStorage.removeItem("username");
window.sessionStorage.removeItem("user_id");
window.sessionStorage.removeItem("authcode");
window.sessionStorage.removeItem("isLoggedIn");
}
}
}

49
ShopifyUI/src/app/components/payments/payments.component.html

@ -1,19 +1,36 @@
<div class="row navbar">
<div class="col-8">
<h2>Shopify</h2>
</div>
<div class="col-1">
<a routerLink="/home">Home</a>
</div>
<div class="col-1">
<a routerLink="/products">Products</a>
</div>
<div class="col-1 active">
<a routerLink="/cart/{{uid}}">{{cartNo}}&nbsp;&nbsp;<i class="bi bi-cart3"></i>Cart</a>
</div>
<div class="col-1 loginbtn">
<a routerLink="/login">Login</a>
</div>
<div class="row navbar text-right">
<div class="col-1"></div>
<div class="col-6">
<h2>Shopify</h2>
</div>
<div class="col-1">
<a routerLink="/home">Home</a>
</div>
<div class="col-1">
<a routerLink="/products">Products</a>
</div>
<div class="col-1">
<a routerLink="/cart/{{uid}}">{{cartNo}}&nbsp;&nbsp;<i class="bi bi-cart3"></i>Cart</a>
</div>
<div class="col-1 loginbtn">
<ng-container *ngIf="authcode == null;then loginmsg else logoutmsg"></ng-container>
<ng-template #logoutmsg>
<div ngbDropdown class="d-inline-block">
<button class="btn dropBtn" id="dropdownBasic1" ngbDropdownToggle><i class="bi bi-person"></i></button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem disabled>Hello {{username}}</button>
<hr>
<button ngbDropdownItem>Personal details</button>
<button ngbDropdownItem>Orders</button>
<button ngbDropdownItem (click)="onLogout()">Logout</button>
</div>
</div>
</ng-template>
<ng-template #loginmsg>
<a routerLink="/login">Login</a>
</ng-template>
</div>
<div class="col-1"></div>
</div>
<br><br>
<div class="row">

16
ShopifyUI/src/app/components/payments/payments.component.ts

@ -9,13 +9,17 @@ import { CartService } from 'src/app/service/cart.service';
})
export class PaymentsComponent implements OnInit {
uid:string = "1";
uid:number = 1;
cartNo: number = 0;
cartItems: Cart[] = [];
totalPrice: number = 0;
username:any = '';
authcode:any = '';
constructor(private cartService: CartService) { }
ngOnInit(): void {
this.username = window.sessionStorage.getItem("username");
this.authcode = window.sessionStorage.getItem("authcode");
this.cartService.getCartByUser(this.uid).subscribe(data1 => {
this.cartNo = data1.length;
this.cartItems=data1;
@ -26,4 +30,14 @@ export class PaymentsComponent implements OnInit {
})
}
onLogout() {
if (this.authcode != null) {
this.authcode = null;
this.username = null;
window.sessionStorage.removeItem("username");
window.sessionStorage.removeItem("user_id");
window.sessionStorage.removeItem("authcode");
window.sessionStorage.removeItem("isLoggedIn");
}
}
}

37
ShopifyUI/src/app/components/product-detail/product-detail.component.css

@ -17,4 +17,41 @@
.username {
font-weight: 700;
}
.reviewInput input {
width: 100%;
padding: 10px;
}
.deleteBtn button {
background-color: transparent;
border: 1px solid #E74C3C;
border-radius: 20px;
color: #E74C3C;
padding: 12px 16px;
transition: 0.2s all linear;
}
.deleteBtn button:hover {
background-color: #E74C3C;
color: white;
}
.review_Form input {
width: 100%;
padding: 12px;
}
.review_Form select {
width: 100%;
padding: 14px;
}
.review_Form button {
background-color: #2E86C1;
color: white;
border: 1px solid transparent;
border-radius: 20px;
padding: 12px 14px;
width: 100%;
}

62
ShopifyUI/src/app/components/product-detail/product-detail.component.html

@ -1,19 +1,36 @@
<div class="row navbar">
<div class="col-8">
<div class="row navbar text-right">
<div class="col-1"></div>
<div class="col-6">
<h2>Shopify</h2>
</div>
<div class="col-1">
<div class="col-1 active">
<a routerLink="/home">Home</a>
</div>
<div class="col-1 active">
<div class="col-1">
<a routerLink="/products">Products</a>
</div>
<div class="col-1">
<a routerLink="/cart/{{uid}}">{{cartNo}}&nbsp;&nbsp;<i class="bi bi-cart3"></i>Cart</a>
</div>
<div class="col-1 loginbtn">
<a routerLink="/login">Login</a>
<ng-container *ngIf="authcode == null;then loginmsg else logoutmsg"></ng-container>
<ng-template #logoutmsg>
<div ngbDropdown class="d-inline-block">
<button class="btn dropBtn" id="dropdownBasic1" ngbDropdownToggle><i class="bi bi-person"></i></button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem disabled>Hello {{username}}</button>
<hr>
<button ngbDropdownItem>Personal details</button>
<button ngbDropdownItem>Orders</button>
<button ngbDropdownItem (click)="onLogout()">Logout</button>
</div>
</div>
</ng-template>
<ng-template #loginmsg>
<a routerLink="/login">Login</a>
</ng-template>
</div>
<div class="col-1"></div>
</div>
<br>
<div class="productBody container">
@ -58,12 +75,15 @@
</div>
<div class="row" *ngFor='let r of reviewDtos'>
<div class="row">
<div class="col-11">
<div class="col-10">
<p class="username">{{r.username}}</p>
</div>
<div class="col-1 text-right">
<p>{{r.rating}} of 5</p>
</div>
<div class="col-1 deleteBtn" *ngIf="r.userId == uid">
<button style="float: right;" (click)='onReviewDelete(r.id)'><i class="bi bi-trash"></i></button>
</div>
</div>
<div class="row">
<div class="col-12">
@ -72,5 +92,35 @@
</div>
<hr>
</div>
<br><br>
<h3>Submit Your Review</h3>
<hr>
<div class="row">
<div class="col-12">
<form [formGroup]='reviewForm' (submit)='onReviewFormSubmit()' class="text-center review_Form">
<div class="row align-items-center">
<div class="col-8 text-center">
<input type='text' placeholder="Enter Your Review" formControlName='reviewText'/>
<div *ngIf="reviewForm.controls['reviewText'].invalid && (reviewForm.controls['reviewText'].touched || reviewForm.controls['reviewText'].dirty)">
Invalid Text
</div>
</div>
<div class="col-2 text-center">
<select value="1" formControlName='rating'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="col-2 text-center">
<button [disabled]='!reviewForm.valid'>Submit</button>
</div>
</div>
</form>
</div>
</div>
<br><br>
</div>

61
ShopifyUI/src/app/components/product-detail/product-detail.component.ts

@ -1,8 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { Cart } from 'src/app/model/cart.model';
import { Product } from 'src/app/model/product.model';
import { ReviewDto } from 'src/app/model/review.model';
import { Review } from 'src/app/model/review.model';
import { ReviewDto } from 'src/app/model/reviewDto.model';
import { CartService } from 'src/app/service/cart.service';
import { ProductService } from 'src/app/service/product.service';
import { ReviewService } from 'src/app/service/review.service';
@ -14,16 +16,31 @@ import { ReviewService } from 'src/app/service/review.service';
})
export class ProductDetailComponent implements OnInit {
pid:any;
uid:string = "1";
uid:any = 1;
product:Product;
currentRating:any = [];
rating:any = [];
quantity:number = 1;
cartNo:number = 0;
reviewDtos: ReviewDto[] = [];
constructor(private actRouter:ActivatedRoute, private productService:ProductService, private cartService:CartService,private reviewService:ReviewService) { }
reviewForm: FormGroup;
username:any='';
authcode:any='';
constructor(private actRouter:ActivatedRoute, private productService:ProductService, private cartService:CartService,private reviewService:ReviewService) {
this.reviewForm = new FormGroup({
reviewText : new FormControl(''),
rating : new FormControl(''),
})
}
ngOnInit(): void {
this.username = window.sessionStorage.getItem("username");
this.authcode = window.sessionStorage.getItem("authcode");
this.uid = window.sessionStorage.getItem("user_id");
this.reviewForm = new FormGroup({
reviewText : new FormControl('', Validators.required),
rating : new FormControl('', Validators.required),
})
this.cartService.getCartByUser(this.uid).subscribe(data1 => {
this.cartNo = data1.length;
})
@ -42,6 +59,7 @@ export class ProductDetailComponent implements OnInit {
})
this.reviewService.getReviewsByProduct(this.pid).subscribe(data => {
this.reviewDtos = data;
console.log(this.reviewDtos)
})
}
@ -63,4 +81,41 @@ export class ProductDetailComponent implements OnInit {
})
}
onReviewFormSubmit() {
let review : Review = {
reviewText: this.reviewForm.value.reviewText,
rating: this.reviewForm.value.rating,
}
this.reviewService.postReview(this.uid,this.pid,review).subscribe(data => {
this.reviewForm = new FormGroup({
reviewText : new FormControl('', Validators.required),
rating : new FormControl('', Validators.required),
})
this.reviewService.getReviewsByProduct(this.pid).subscribe(data => {
this.reviewDtos = data;
console.log(this.reviewDtos)
})
})
}
onReviewDelete(rid:number) {
this.reviewService.deleteReview(rid).subscribe(data => {
this.reviewDtos.forEach((i, index) => {
if (i.id == rid) {
this.reviewDtos.splice(index, 1);
}
})
})
}
onLogout() {
if (this.authcode != null) {
this.authcode = null;
this.username = null;
window.sessionStorage.removeItem("username");
window.sessionStorage.removeItem("user_id");
window.sessionStorage.removeItem("authcode");
window.sessionStorage.removeItem("isLoggedIn");
}
}
}

23
ShopifyUI/src/app/components/products/products.component.html

@ -1,5 +1,6 @@
<div class="row navbar">
<div class="col-8">
<div class="row navbar text-right">
<div class="col-1"></div>
<div class="col-6">
<h2>Shopify</h2>
</div>
<div class="col-1">
@ -12,8 +13,24 @@
<a routerLink="/cart/{{uid}}">{{cartNo}}&nbsp;&nbsp;<i class="bi bi-cart3"></i>Cart</a>
</div>
<div class="col-1 loginbtn">
<a routerLink="/login">Login</a>
<ng-container *ngIf="authcode == null;then loginmsg else logoutmsg"></ng-container>
<ng-template #logoutmsg>
<div ngbDropdown class="d-inline-block">
<button class="btn dropBtn" id="dropdownBasic1" ngbDropdownToggle><i class="bi bi-person"></i></button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem disabled>Hello {{username}}</button>
<hr>
<button ngbDropdownItem>Personal details</button>
<button ngbDropdownItem>Orders</button>
<button ngbDropdownItem (click)="onLogout()">Logout</button>
</div>
</div>
</ng-template>
<ng-template #loginmsg>
<a routerLink="/login">Login</a>
</ng-template>
</div>
<div class="col-1"></div>
</div>
<br>
<div class="row">

18
ShopifyUI/src/app/components/products/products.component.ts

@ -17,7 +17,9 @@ export class ProductsComponent implements OnInit {
products: Product[] = [];
searchForm: FormGroup;
prodName:string;
uid:string = "1";
uid:number = 1;
username:any='';
authcode:any='';
constructor(private productService: ProductService,private cartService: CartService) {
this.searchForm = new FormGroup({
prodName: new FormControl('')
@ -25,6 +27,8 @@ export class ProductsComponent implements OnInit {
}
ngOnInit(): void {
this.username = window.sessionStorage.getItem("username");
this.authcode = window.sessionStorage.getItem("authcode");
console.log("In Product Component");
this.searchForm = new FormGroup({
prodName: new FormControl('', Validators.required)
@ -57,4 +61,16 @@ export class ProductsComponent implements OnInit {
})
})
}
onLogout() {
if (this.authcode != null) {
this.authcode = null;
this.username = null;
window.sessionStorage.removeItem("username");
window.sessionStorage.removeItem("user_id");
window.sessionStorage.removeItem("authcode");
window.sessionStorage.removeItem("isLoggedIn");
}
}
}

14
ShopifyUI/src/app/model/review.model.ts

@ -1,6 +1,10 @@
export class ReviewDto {
reviewText:string;
rating:number;
username:string;
product_name:string;
import { Product } from "./product.model";
import { User } from "./user.model";
export class Review {
id?:number;
reviewText:string = '';
rating:number = 0;
user?: User
product?: Product;
}

8
ShopifyUI/src/app/model/reviewDto.model.ts

@ -0,0 +1,8 @@
export class ReviewDto {
id?: number;
reviewText:string;
rating:number;
userId?:number;
username:string;
productName:string;
}

4
ShopifyUI/src/app/service/cart.service.ts

@ -12,12 +12,12 @@ export class CartService {
constructor(private httpClent:HttpClient) { }
public postCart(cart:Cart,uid:string,pid:number): Observable<Cart> {
public postCart(cart:Cart,uid:number,pid:number): Observable<Cart> {
let cart_post_api = this.path + "/cart/" + uid + "/" + pid;
return this.httpClent.post<Cart>(cart_post_api,cart);
}
public getCartByUser(uid:string): Observable<Cart[]> {
public getCartByUser(uid:number): Observable<Cart[]> {
let cart_get_api = this.path + "/cart/" + uid;
return this.httpClent.get<Cart[]>(cart_get_api);
}

13
ShopifyUI/src/app/service/review.service.ts

@ -1,7 +1,8 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { ReviewDto } from '../model/review.model';
import { Review } from '../model/review.model';
import { ReviewDto } from '../model/reviewDto.model';
@Injectable({
providedIn: 'root'
@ -12,8 +13,18 @@ export class ReviewService {
constructor(private httpClient:HttpClient) { }
public postReview(uid:number,pid:number,review:Review): Observable<Review> {
let review_post_api = this.path + "/review/" + pid + "/" + uid;
return this.httpClient.post<Review>(review_post_api,review);
}
public getReviewsByProduct(pid:string): Observable<ReviewDto[]> {
let review_get_api = this.path + "/review/product?pid=" + pid;
return this.httpClient.get<ReviewDto[]>(review_get_api);
}
public deleteReview(rid:number) {
let review_delete_api = this.path + "/review/" + rid;
return this.httpClient.delete(review_delete_api);
}
}

31
ShopifyUI/src/app/service/user.service.ts

@ -1,9 +1,38 @@
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { User } from '../model/user.model';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor() { }
path:string = "http://localhost:59279/api1";
constructor(private httpClient:HttpClient) { }
public postUser(user:User): Observable<User> {
let user_post_api = this.path + '/sign-up';
let authcode = btoa(user.username + ":" + user.password)
user.username = authcode;
user.password = "";
return this.httpClient.post<User>(user_post_api,user);
}
public loginUser(user: User) {
let httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Basic ' + btoa(user.username + ":" + user.password)
})
}
let user_login_api = this.path + "/login"
return this.httpClient.get(user_login_api, httpOptions);
}
public getUserByName(username:string): Observable<User> {
let user_getName_api = this.path + "/user/name/" + username;
return this.httpClient.get<User>(user_getName_api);
}
}

9
ShopifyUI/src/styles.css

@ -31,6 +31,15 @@ body {
color: white;
}
.dropBtn {
color: white;
font-size: 25px;
}
.dropBtn:hover {
color: white;
}
.active a {
border-bottom: 1px solid white;
}

Loading…
Cancel
Save