27/09/2021

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

@@ -1,8 +1,10 @@
-server.port=9999
+server.port=8002
 
-spring.datasource.url=jdbc:mysql://localhost:3306/Shopify_DB?createDatabaseIfNotExist=true
-spring.datasource.username=root
-spring.datasource.password=Password123
+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
 
 spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
 

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

@@ -1,6 +1,6 @@
 server.port=8002
 
-spring.datasource.url=jdbc:mysql://10.3.117.23:3306/Shopify_DB?createDatabaseIfNotExist=true
+spring.datasource.url=jdbc:mysql://10.3.117.22:3306/Shopify_DB?createDatabaseIfNotExist=true
 spring.datasource.username=testuser1
 spring.datasource.password=PASSWORD123
 

ShopifyUI/proxy.conf.json

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

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

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { LoginComponent } from './auth/login/login.component';
+import { AuthGuardService } from './auth/service/auth-guard.service';
 import { SignUpComponent } from './auth/sign-up/sign-up.component';
 import { AdminComponent } from './components/admin/admin.component';
 import { CartComponent } from './components/cart/cart.component';
@@ -8,17 +9,19 @@ import { HomeComponent } from './components/home/home.component';
 import { PaymentsComponent } from './components/payments/payments.component';
 import { ProductDetailComponent } from './components/product-detail/product-detail.component';
 import { ProductsComponent } from './components/products/products.component';
+import { UserprofileComponent } from './components/userprofile/userprofile.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'home', component: HomeComponent },
   { path: 'products', component: ProductsComponent},
   { path: 'products/:product_id', component: ProductDetailComponent},
-  { path: 'cart/:user_id', component: CartComponent},
-  { path: 'payment', component: PaymentsComponent},
+  { path: 'cart/:user_id', component: CartComponent, canActivate:[AuthGuardService] },
+  { path: 'payment', component: PaymentsComponent, canActivate: [AuthGuardService]},
   { path: 'login', component: LoginComponent},
   { path: 'signup', component: SignUpComponent},
-  { path: 'admin', component: AdminComponent},
+  { path: 'personalDetails/:user_id', component: UserprofileComponent, canActivate:[AuthGuardService] },
+  { path: 'admin', component: AdminComponent, canActivate: [AuthGuardService]},
 ];
 
 @NgModule({

ShopifyUI/src/app/app.component.html

@@ -1 +1,6 @@
 <router-outlet></router-outlet>
+<div class="row footerDiv">
+    <div class="col-12 text-center">
+        <p>E Commerce Application By Sanjith Sivapuram, Prachi Chauhan, Sreenivas Jayanth</p>
+    </div>
+</div>

ShopifyUI/src/app/auth/login/login.component.html

@@ -1,5 +1,6 @@
 <div class="row navbar">
-    <div class="col-10">
+    <div class="col-1"></div>
+    <div class="col-8">
       <h2>Shopify</h2>
     </div>
     <div class="col-1">
@@ -8,6 +9,7 @@
     <div class="col-1">
       <a routerLink="/products">Products</a>
     </div>
+    <div class="col-1"></div>
 </div>
 <BR><BR><BR><BR><BR><BR>
 <div class="row">

ShopifyUI/src/app/auth/service/auth-guard.service.ts

@@ -1,9 +1,20 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from './auth.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthGuardService {
 
-  constructor() { }
+  status: Boolean;
+  constructor(private authService: AuthService, private route: Router) { }
+  
+  canActivate(): Boolean {
+    this.status = this.authService.isAuthenticated();
+    if (this.status == false) {
+      this.route.navigateByUrl("/login");
+    }
+    return true;
+  }
 }

ShopifyUI/src/app/auth/service/auth.service.ts

@@ -6,4 +6,13 @@ import { Injectable } from '@angular/core';
 export class AuthService {
 
   constructor() { }
+
+  isAuthenticated() {
+    let username = window.sessionStorage.getItem('username');
+    let loggedIn = window.sessionStorage.getItem('isLoggedIn');
+    if (loggedIn == 'true') {
+      return true;
+    }
+    return false;
+  }
 }

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

@@ -1,5 +1,6 @@
 <div class="row navbar">
-    <div class="col-10">
+    <div class="col-1"></div>
+    <div class="col-8">
       <h2>Shopify</h2>
     </div>
     <div class="col-1">
@@ -8,6 +9,7 @@
     <div class="col-1">
       <a routerLink="/products">Products</a>
     </div>
+    <div class="col-1"></div>
 </div>
 <BR><BR><BR><BR><BR><BR>
 <div class="row">
@@ -24,11 +26,16 @@
                 <p>Invalid Username</p>
             </div>
             <BR><BR>
-            <input type="password" placeholder="Enter Password" formControlName="password" />
+            <input type="text" placeholder="Enter Password" formControlName="password" />
             <div *ngIf="signUpForm.controls['password'].invalid && (signUpForm.controls['password'].touched || signUpForm.controls['password'].dirty)">
                 <p>Invalid Password</p>
             </div>
             <BR><BR>
+            <input type="text" placeholder="Confirm Password" formControlName="cpassword" />
+            <div *ngIf="signUpForm.controls['cpassword'].invalid && (signUpForm.controls['cpassword'].touched || signUpForm.controls['cpassword'].dirty)">
+                <p>Password Doesnt Match / Not Entered</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>

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

@@ -19,6 +19,7 @@ export class SignUpComponent implements OnInit {
       name: new FormControl(''),
       username: new FormControl(''),
       password: new FormControl(''),
+      cpassword: new FormControl(''),
       mobileNumber: new FormControl(''),
       emailId: new FormControl(''),
       address: new FormControl(''),
@@ -34,6 +35,7 @@ export class SignUpComponent implements OnInit {
       name: new FormControl('', Validators.required),
       username: new FormControl('', Validators.required),
       password: new FormControl('', Validators.required),
+      cpassword: new FormControl('', Validators.required),
       mobileNumber: new FormControl('',Validators.required),
       emailId: new FormControl('',Validators.required),
       address: new FormControl('',Validators.required),
@@ -56,14 +58,15 @@ export class SignUpComponent implements OnInit {
       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";
-    })
+    if (this.signUpForm.value.password == this.signUpForm.value.cpassword) {
+      this.userService.postUser(user).subscribe(data => {
+        this.route.navigateByUrl("/login?msg=sign-up%20success");
+      },
+        (err: any) => {
+          this.msg = "Could Not Sign In";
+      })
+    }
   }
 
 }

ShopifyUI/src/app/components/cart/cart.component.css

@@ -20,7 +20,6 @@
     padding: 12px 14px;
     border-radius: 20px;
     color: white;
-    float: right;
     background-color: #1B4F72
 }
 
@@ -28,11 +27,9 @@
     opacity: 0.5;
 }
 
-.QuantityInput {
-    transform: translate(10px,0);
-}
-.QuantityInput input {
-    height: 45px;
+.QuantityInput h4 {
+    color: #1B4F72;
+    transform: translate(10px,0px);
     text-align: center;
 }
 

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

@@ -1,33 +1,33 @@
 <div class="row navbar text-right">
   <div class="col-1"></div>
-  <div class="col-6">
+  <div class="col-5">
     <h2>Shopify</h2>
   </div>
   <div class="col-1">
-    <a routerLink="/home">Home</a>
+    <a routerLink="/home"><i class="bi bi-house"></i></a>
   </div>
   <div class="col-1">
-    <a routerLink="/products">Products</a>
+    <a routerLink="/products"><i class="bi bi-box-seam"></i></a>
   </div>
   <div class="col-1 active">
-    <a routerLink="/cart/{{uid}}">{{cartNo}}&nbsp;&nbsp;<i class="bi bi-cart3"></i>Cart</a>
+    <a routerLink="/cart/{{uid}}"><i class="bi bi-cart3"></i>&nbsp;&nbsp;{{cartNo}}</a>
   </div>
-  <div class="col-1 loginbtn">
+  <div class="col-3 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>
+          <button class="btn dropBtn" id="dropdownBasic1" ngbDropdownToggle><i class="bi bi-person"></i>Welcome {{username}}</button>
           <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-            <button ngbDropdownItem disabled>Hello {{username}}</button>
+            <button ngbDropdownItem disabled class="usernameBtn">Hello {{username}}</button>
             <hr>
-            <button ngbDropdownItem>Personal details</button>
+            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}">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>
+        <a routerLink="/login">Login To Continue</a>
     </ng-template>
   </div>
   <div class="col-1"></div>
@@ -61,16 +61,16 @@
           <br>
           <br>
           <div class="row align-items-center">
-            <div class="col-7">
+            <div class="col-7 col-md-9">
             </div>
-            <div class="col-1 QuantityBtn">
-              <button style="float: right;" (click)="decreaseQty(c.cart_id,c.quantity,c.price)"><i class="bi bi-dash"></i></button>
+            <div class="col-1 col-md-1 QuantityBtn">
+              <button (click)="decreaseQty(c.cart_id,c.quantity,c.price)"><i class="bi bi-dash"></i></button>
             </div>
-            <div class="col-3 QuantityInput">
-              <input type="number" value={{c.quantity}}>
+            <div class="col-1 QuantityInput">
+              <h4>{{c.quantity}}</h4>
             </div>
-            <div class="col-1 QuantityBtn">
-              <button style="float: left;" (click)="increaseQty(c.cart_id,c.quantity,c.product.discountedPrice)"><i class="bi bi-plus"></i></button>
+            <div class="col-1 col-md-1 QuantityBtn">
+              <button (click)="increaseQty(c.cart_id,c.quantity,c.product.discountedPrice)"><i class="bi bi-plus"></i></button>
             </div>
           </div>
           <br>

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { Cart } from 'src/app/model/cart.model';
 import { CartService } from 'src/app/service/cart.service';
 
@@ -11,15 +12,18 @@ export class CartComponent implements OnInit {
 
   cartNo:number = 0;
   cartItems:Cart[];
-  uid:number = 1;
+  uid:any = 0;
   totalPrice:number = 0;
   username:any='';
   authcode:any='';
-  constructor(private cartService:CartService) { }
+  constructor(private cartService:CartService, private route: Router) { }
 
   ngOnInit(): void {
     this.username = window.sessionStorage.getItem("username");
-    this.authcode = window.sessionStorage.getItem("authcode")
+    this.authcode = window.sessionStorage.getItem("authcode");
+    if (this.authcode !== null) {
+      this.uid = window.sessionStorage.getItem("user_id");
+    }
     this.cartService.getCartByUser(this.uid).subscribe(data1 => {
       this.cartNo = data1.length;
       this.cartItems=data1;
@@ -103,6 +107,8 @@ export class CartComponent implements OnInit {
       window.sessionStorage.removeItem("user_id");
       window.sessionStorage.removeItem("authcode");
       window.sessionStorage.removeItem("isLoggedIn");
+      this.cartNo = 0;
+      this.route.navigateByUrl("/home");
     }
   }
 

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

@@ -1,33 +1,33 @@
 <div class="row navbar text-right">
   <div class="col-1"></div>
-  <div class="col-6">
+  <div class="col-5">
     <h2>Shopify</h2>
   </div>
   <div class="col-1 active">
-    <a routerLink="/home">Home</a>
+    <a routerLink="/home"><i class="bi bi-house"></i></a>
   </div>
   <div class="col-1">
-    <a routerLink="/products">Products</a>
+    <a routerLink="/products"><i class="bi bi-box-seam"></i></a>
   </div>
   <div class="col-1">
-    <a routerLink="/cart/{{uid}}">{{cartNo}}&nbsp;&nbsp;<i class="bi bi-cart3"></i>Cart</a>
+    <a routerLink="/cart/{{uid}}"><i class="bi bi-cart3"></i>&nbsp;&nbsp;{{cartNo}}</a>
   </div>
-  <div class="col-1 loginbtn">
+  <div class="col-3 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>
+          <button class="btn dropBtn" id="dropdownBasic1" ngbDropdownToggle><i class="bi bi-person"></i>Welcome {{username}}</button>
           <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-            <button ngbDropdownItem disabled>Hello {{username}}</button>
+            <button ngbDropdownItem disabled class="usernameBtn">Hello {{username}}</button>
             <hr>
-            <button ngbDropdownItem>Personal details</button>
+            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}">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>
+        <a routerLink="/login">Login To Continue</a>
     </ng-template>
   </div>
   <div class="col-1"></div>

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

@@ -11,7 +11,7 @@ import { ProductService } from 'src/app/service/product.service';
 export class HomeComponent implements OnInit {
 
   cartNo:number = 0;
-  uid:number = 1;
+  uid:any = 0;
   username:any = '';
   authcode:any = '';
   searchValue: string = '';
@@ -21,6 +21,9 @@ export class HomeComponent implements OnInit {
   ngOnInit(): void {
     this.username = window.sessionStorage.getItem("username");
     this.authcode = window.sessionStorage.getItem("authcode");
+    if (this.authcode !== null) {
+      this.uid = window.sessionStorage.getItem("user_id");
+    }
     this.cartService.getCartByUser(this.uid).subscribe(data1 => {
       this.cartNo = data1.length;
     })
@@ -41,6 +44,7 @@ export class HomeComponent implements OnInit {
       window.sessionStorage.removeItem("user_id");
       window.sessionStorage.removeItem("authcode");
       window.sessionStorage.removeItem("isLoggedIn");
+      this.cartNo = 0;
     }
   }
 }

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

@@ -1,33 +1,33 @@
 <div class="row navbar text-right">
   <div class="col-1"></div>
-  <div class="col-6">
+  <div class="col-5">
     <h2>Shopify</h2>
   </div>
   <div class="col-1">
-    <a routerLink="/home">Home</a>
+    <a routerLink="/home"><i class="bi bi-house"></i></a>
   </div>
   <div class="col-1">
-    <a routerLink="/products">Products</a>
+    <a routerLink="/products"><i class="bi bi-box-seam"></i></a>
   </div>
   <div class="col-1">
-    <a routerLink="/cart/{{uid}}">{{cartNo}}&nbsp;&nbsp;<i class="bi bi-cart3"></i>Cart</a>
+    <a routerLink="/cart/{{uid}}"><i class="bi bi-cart3"></i>&nbsp;&nbsp;{{cartNo}}</a>
   </div>
-  <div class="col-1 loginbtn">
+  <div class="col-3 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>
+          <button class="btn dropBtn" id="dropdownBasic1" ngbDropdownToggle><i class="bi bi-person"></i>Welcome {{username}}</button>
           <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-            <button ngbDropdownItem disabled>Hello {{username}}</button>
+            <button ngbDropdownItem disabled class="usernameBtn">Hello {{username}}</button>
             <hr>
-            <button ngbDropdownItem>Personal details</button>
+            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}">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>
+        <a routerLink="/login">Login To Continue</a>
     </ng-template>
   </div>
   <div class="col-1"></div>

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

@@ -1,33 +1,33 @@
 <div class="row navbar text-right">
   <div class="col-1"></div>
-  <div class="col-6">
+  <div class="col-5">
     <h2>Shopify</h2>
   </div>
-  <div class="col-1 active">
-    <a routerLink="/home">Home</a>
+  <div class="col-1">
+    <a routerLink="/home"><i class="bi bi-house"></i></a>
   </div>
   <div class="col-1">
-    <a routerLink="/products">Products</a>
+    <a routerLink="/products"><i class="bi bi-box-seam"></i></a>
   </div>
   <div class="col-1">
-    <a routerLink="/cart/{{uid}}">{{cartNo}}&nbsp;&nbsp;<i class="bi bi-cart3"></i>Cart</a>
+    <a routerLink="/cart/{{uid}}"><i class="bi bi-cart3"></i>&nbsp;&nbsp;{{cartNo}}</a>
   </div>
-  <div class="col-1 loginbtn">
+  <div class="col-3 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>
+          <button class="btn dropBtn" id="dropdownBasic1" ngbDropdownToggle><i class="bi bi-person"></i>Welcome {{username}}</button>
           <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-            <button ngbDropdownItem disabled>Hello {{username}}</button>
+            <button ngbDropdownItem disabled class="usernameBtn">Hello {{username}}</button>
             <hr>
-            <button ngbDropdownItem>Personal details</button>
+            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}">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>
+        <a routerLink="/login">Login To Continue</a>
     </ng-template>
   </div>
   <div class="col-1"></div>

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

@@ -16,7 +16,7 @@ import { ReviewService } from 'src/app/service/review.service';
 })
 export class ProductDetailComponent implements OnInit {
   pid:any;
-  uid:any = 1;
+  uid:any = 0;
   product:Product;
   currentRating:any = [];
   rating:any = [];
@@ -36,7 +36,9 @@ export class ProductDetailComponent implements OnInit {
   ngOnInit(): void {
     this.username = window.sessionStorage.getItem("username");
     this.authcode = window.sessionStorage.getItem("authcode");
-    this.uid = window.sessionStorage.getItem("user_id");
+    if (this.authcode !== null) {
+      this.uid = window.sessionStorage.getItem("user_id");
+    }
     this.reviewForm = new FormGroup({
       reviewText : new FormControl('', Validators.required),
       rating : new FormControl('', Validators.required),
@@ -116,6 +118,7 @@ export class ProductDetailComponent implements OnInit {
       window.sessionStorage.removeItem("user_id");
       window.sessionStorage.removeItem("authcode");
       window.sessionStorage.removeItem("isLoggedIn");
+      this.cartNo = 0;
     }
   }
 }

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

@@ -1,33 +1,33 @@
 <div class="row navbar text-right">
   <div class="col-1"></div>
-  <div class="col-6">
+  <div class="col-5">
     <h2>Shopify</h2>
   </div>
   <div class="col-1">
-    <a routerLink="/home">Home</a>
+    <a routerLink="/home"><i class="bi bi-house"></i></a>
   </div>
   <div class="col-1 active">
-    <a routerLink="/products">Products</a>
+    <a routerLink="/products"><i class="bi bi-box-seam"></i></a>
   </div>
   <div class="col-1">
-    <a routerLink="/cart/{{uid}}">{{cartNo}}&nbsp;&nbsp;<i class="bi bi-cart3"></i>Cart</a>
+    <a routerLink="/cart/{{uid}}"><i class="bi bi-cart3"></i>&nbsp;&nbsp;{{cartNo}}</a>
   </div>
-  <div class="col-1 loginbtn">
+  <div class="col-3 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>
+          <button class="btn dropBtn" id="dropdownBasic1" ngbDropdownToggle><i class="bi bi-person"></i>Welcome {{username}}</button>
           <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-            <button ngbDropdownItem disabled>Hello {{username}}</button>
+            <button ngbDropdownItem disabled class="usernameBtn">Hello {{username}}</button>
             <hr>
-            <button ngbDropdownItem>Personal details</button>
+            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}">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>
+        <a routerLink="/login">Login To Continue</a>
     </ng-template>
   </div>
   <div class="col-1"></div>

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

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

ShopifyUI/src/app/components/userprofile/userprofile.component.css

@@ -0,0 +1,33 @@
+.activeBtn {
+    background-color: #1B4F72;
+    color: white;
+}
+
+.container {
+    margin: 0px auto;
+}
+
+.userData h5{
+    color: #1B4F72;
+    border-bottom: 1px solid lightgray;
+}
+
+.userData h6{
+    color: #1B4F72;
+}
+
+.user_Form input {
+    width: 100%;
+    height: 45px;
+    padding: 12px;
+}
+
+  
+.user_Form button {
+    border: none;
+    background-color: #1F618D;
+    color: white;
+    padding: 12px 16px;
+    float: right;
+    width: 20%;
+}

ShopifyUI/src/app/components/userprofile/userprofile.component.html

@@ -1 +1,120 @@
-<p>userprofile works!</p>
+<div class="row navbar text-right">
+  <div class="col-1"></div>
+  <div class="col-5">
+    <h2>Shopify</h2>
+  </div>
+  <div class="col-1">
+    <a routerLink="/home"><i class="bi bi-house"></i></a>
+  </div>
+  <div class="col-1">
+    <a routerLink="/products"><i class="bi bi-box-seam"></i></a>
+  </div>
+  <div class="col-1">
+    <a routerLink="/cart/{{uid}}"><i class="bi bi-cart3"></i>&nbsp;&nbsp;{{cartNo}}</a>
+  </div>
+  <div class="col-3 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>Welcome {{username}}</button>
+          <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+            <button ngbDropdownItem disabled class="usernameBtn">Hello {{username}}</button>
+            <hr>
+            <button ngbDropdownItem routerLink="/personalDetails/{{uid}}" class="activeBtn">Personal details</button>
+            <button ngbDropdownItem>Orders</button>
+            <button ngbDropdownItem (click)="onLogout()">Logout</button>
+          </div>
+        </div>
+    </ng-template>
+    <ng-template #loginmsg>
+        <a routerLink="/login">Login To Continue</a>
+    </ng-template>
+  </div>
+  <div class="col-1"></div>
+</div>
+<br><br><br>
+<div class="row container user_Form">
+  <div class="col-12">
+    <form [formGroup]='userForm' (submit)='onUserFormSubmit()'>
+      <div class="row userData">
+        <div class="col-12">
+          <h5>Personal Information</h5>
+          <br>
+          <h6>Name</h6>
+          <input type="text" placeholder="Enter Name" formControlName="name" />
+          <div *ngIf="userForm.controls['name'].invalid && (userForm.controls['name'].touched || userForm.controls['name'].dirty)">
+              <p>Invalid Name</p>
+          </div>
+          <BR><BR>
+          <h6>Username</h6>
+          <input type="text" placeholder="Enter Username" formControlName="username" />
+          <div *ngIf="userForm.controls['username'].invalid && (userForm.controls['username'].touched || userForm.controls['username'].dirty)">
+              <p>Invalid Username</p>
+          </div>
+          <BR><BR>
+          <h6>Mobile Number</h6>
+          <input type="text" placeholder="Enter Mobile Number" formControlName="mobileNumber" />
+          <div *ngIf="userForm.controls['mobileNumber'].invalid && (userForm.controls['mobileNumber'].touched || userForm.controls['mobileNumber'].dirty)">
+              <p>Invalid Mobile Number</p>
+          </div>
+          <BR><BR>
+          <h6>Email</h6>
+          <input type="email" placeholder="Enter Email Id" formControlName="emailId" />
+          <div *ngIf="userForm.controls['emailId'].invalid && (userForm.controls['emailId'].touched || userForm.controls['emailId'].dirty)">
+            <p>Invalid Email</p>
+          </div>
+        </div>
+      </div>
+      <BR><BR>
+      <div class="row userData">
+        <div class="col-12">
+          <h5>Location Details</h5>
+          <br>
+          <h6>Address</h6>
+          <input type="text" placeholder="Enter Address" formControlName="address" />
+          <div *ngIf="userForm.controls['address'].invalid && (userForm.controls['address'].touched || userForm.controls['address'].dirty)">
+              <p>Invalid Address</p>
+          </div>
+          <BR><BR>
+          <div class="row">
+            <div class="col-6">
+              <h6>City</h6>
+              <input type="text" placeholder="Enter City" formControlName="city" />
+              <div *ngIf="userForm.controls['city'].invalid && (userForm.controls['city'].touched || userForm.controls['city'].dirty)">
+                  <p>Invalid City</p>
+              </div>
+              <BR><BR>
+            </div>
+            <div class="col-6">
+              <h6>State</h6>
+              <input type="text" placeholder="Enter State" formControlName="state" />
+              <div *ngIf="userForm.controls['state'].invalid && (userForm.controls['state'].touched || userForm.controls['state'].dirty)">
+                  <p>Invalid State</p>
+              </div>
+              <BR><BR>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-6">
+              <h6>Country</h6>
+              <input type="text" placeholder="Enter Country" formControlName="country" />
+              <div *ngIf="userForm.controls['country'].invalid && (userForm.controls['country'].touched || userForm.controls['country'].dirty)">
+                  <p>Invalid Country</p>
+              </div>
+            </div>
+            <div class="col-6">
+              <h6>PinCode</h6>
+              <input type="text" placeholder="Enter Pin Code" formControlName="pinCode" />
+              <div *ngIf="userForm.controls['pinCode'].invalid && (userForm.controls['pinCode'].touched || userForm.controls['pinCode'].dirty)">
+                  <p>Invalid PinCode</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <BR><BR>
+      <button [disabled]='!userForm.valid'>Submit</button>
+  </form>
+  <br><br><br>
+  </div>
+</div>

ShopifyUI/src/app/components/userprofile/userprofile.component.ts

@@ -1,4 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { User } from 'src/app/model/user.model';
+import { CartService } from 'src/app/service/cart.service';
+import { UserService } from 'src/app/service/user.service';
 
 @Component({
   selector: 'app-userprofile',
@@ -7,9 +12,77 @@ import { Component, OnInit } from '@angular/core';
 })
 export class UserprofileComponent implements OnInit {
 
-  constructor() { }
+  cartNo:number = 0;
+  uid:any = 0;
+  username:any='';
+  authcode:any='';
+  user : User;
+  userForm: FormGroup;
+
+  constructor(private cartService: CartService,private userService : UserService,private route: Router) { 
+    this.userForm = new FormGroup({
+      name: new FormControl(''),
+      username: new FormControl(''),
+      mobileNumber: new FormControl(''),
+      emailId: new FormControl(''),
+      address: new FormControl(''),
+      city: new FormControl(''),
+      state: new FormControl(''),
+      country: new FormControl(''),
+      pinCode: new FormControl('')
+    })
+  }
 
   ngOnInit(): void {
+    this.username = window.sessionStorage.getItem("username");
+    this.authcode = window.sessionStorage.getItem("authcode");
+    if (this.authcode !== null) {
+      this.uid = window.sessionStorage.getItem("user_id");
+      this.userService.getUserById(this.uid).subscribe(data => {
+        this.user = data;
+        this.userForm = new FormGroup({
+          name: new FormControl(this.user.name, Validators.required),
+          username: new FormControl(this.user.username, Validators.required),
+          mobileNumber: new FormControl(this.user.mobileNumber,Validators.required),
+          emailId: new FormControl(this.user.emailId,Validators.required),
+          address: new FormControl(this.user.address,Validators.required),
+          city: new FormControl(this.user.city,Validators.required),
+          state: new FormControl(this.user.state,Validators.required),
+          country: new FormControl(this.user.country,Validators.required),
+          pinCode: new FormControl(this.user.pinCode,Validators.required)
+        })
+      })
+    }
+    this.cartService.getCartByUser(this.uid).subscribe(data1 => {
+      this.cartNo = data1.length;
+    })
   }
 
+  onUserFormSubmit() {
+    let user: User = {
+      name: this.userForm.value.name,
+      username: this.userForm.value.username,
+      password: this.uid.password,
+      mobileNumber: this.userForm.value.mobileNumber,
+      emailId: this.userForm.value.emailId,
+      address: this.userForm.value.address,
+      city: this.userForm.value.city,
+      state: this.userForm.value.state,
+      country: this.userForm.value.country,
+      pinCode: this.userForm.value.pinCode,
+    }
+  }
+
+  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");
+      this.cartNo = 0;
+      this.route.navigateByUrl("/home");
+    }
+  }
 }

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

@@ -35,4 +35,9 @@ export class UserService {
     let user_getName_api = this.path + "/user/name/" + username;
     return this.httpClient.get<User>(user_getName_api);
   }
+
+  public getUserById(uid:number): Observable<User> {
+    let user_getId_api = this.path + "/user/" + uid;
+    return this.httpClient.get<User>(user_getId_api);
+  }
 }

ShopifyUI/src/styles.css

@@ -5,10 +5,14 @@ body {
   margin: 0px;
   padding: 0px;
   overflow-x: hidden !important;
+  scroll-behavior: smooth !important;
+}
+
+.usernameBtn {
+  color: #1B4F72 !important;
 }
 
 .navbar {
-  padding-left: 45px;
   background-color: #1B4F72 !important;
 }
 
@@ -21,6 +25,7 @@ body {
   margin: 0px;
   text-decoration: none;
   color: white;
+  font-size: 20px;
   border-bottom: transparent;
   vertical-align: middle;
   transition: 0.2s all linear;
@@ -33,7 +38,7 @@ body {
 
 .dropBtn {
   color: white;
-  font-size: 25px;
+  font-size: 20px;
 }
 
 .dropBtn:hover {
@@ -84,3 +89,9 @@ body {
   padding: 12px;
   border-radius: 20px;
 }
+
+.footerDiv {
+  background-color: #1B4F72;
+  color: white;
+  padding-top: 10px;
+}