task pages

src/app/app-routing.module.ts

@@ -182,6 +182,10 @@ const routes: Routes = [
     path: 'jobactive',
     loadChildren: () => import('./pages/jobactive/jobactive.module').then(m => m.JobactivePageModule)
   },
+  {
+    path: 'resetpass',
+    loadChildren: () => import('./pages/resetpass/resetpass.module').then(m => m.ResetpassPageModule)
+  },
 
 ];
 @NgModule({

src/app/pages/jobactive/jobactive.page.html

@@ -1,9 +1,258 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>jobactive</ion-title>
-  </ion-toolbar>
-</ion-header>
 
 <ion-content>
+  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/market.jpg)'">
+    <div class="ion-padding">
+      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
+    </div>
+  </div>
 
+  <div class="ion-padding">
+    <div class="boxed_contents">
+      <div class="flex">
+        <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>
+      </div>
+      <div class="flex">
+        <ion-label class="bold_text">{{jobData.title}}</ion-label>
+      </div>
+
+      <div class="row">
+        <ion-label class="bg_text">{{jobData.offer_code}}</ion-label>
+        <div class="rate">
+          <!--        <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
+          <ion-label class="review"> Due date: {{jobData.delivery_date}} </ion-label>
+        </div>
+      </div>
+
+      <ion-label class="color_text">Price: {{jobData.price*0.01}} {{jobData.currency}}</ion-label>
+
+      <div class="items">
+        <div class="stud">
+          <ion-icon slot="start" name="time" color="primary"></ion-icon>
+          <ion-label>Timeline: {{jobData.timeline_days}} days</ion-label>
+        </div>
+        <!--      <div class="stud">-->
+        <!--        <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
+        <!--        <ion-label>Certificate</ion-label>-->
+        <!--      </div>-->
+      </div>
+
+<!--      <ion-card>-->
+<!--        <ion-card-header>-->
+<!--          <ion-card-subtitle>Task Actions</ion-card-subtitle>-->
+<!--        </ion-card-header>-->
+<!--        <ion-card-content>-->
+<!--          This task is already past the due date. You can extend the timeline or cancel the job.-->
+<!--        </ion-card-content>-->
+
+<!--        <ion-button fill="clear">Extend Due Date</ion-button>-->
+<!--        <ion-button color="danger" fill="clear">Cancel Task</ion-button>-->
+<!--      </ion-card>-->
+
+      <!--      <ion-grid>-->
+      <!--        <ion-row>-->
+      <!--          <ion-col>-->
+      <!--            <ion-card color="secondary">-->
+      <!--              <ion-card-header>-->
+      <!--                <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
+      <!--              </ion-card-header>-->
+
+      <!--              <ion-card-content>-->
+      <!--                <ion-button color="secondary" expand="block" fill="outline"  >Extend Due Date</ion-button>-->
+      <!--              </ion-card-content>-->
+      <!--            </ion-card>-->
+      <!--          </ion-col>-->
+      <!--          <ion-col>-->
+      <!--            <ion-card color="danger">-->
+      <!--              <ion-card-header>-->
+      <!--                <ion-card-subtitle>-->
+      <!--                  Card Subtitle-->
+      <!--                </ion-card-subtitle>-->
+      <!--              </ion-card-header>-->
+
+      <!--              <ion-card-content>-->
+      <!--                <ion-button color="secondary" expand="block" fill="outline">Cancel Task</ion-button>-->
+      <!--              </ion-card-content>-->
+      <!--            </ion-card>-->
+      <!--          </ion-col>-->
+      <!--        </ion-row>-->
+      <!--      </ion-grid>-->
+
+      <ion-segment [(ngModel)]="tabs">
+        <ion-segment-button value="activities">
+          <ion-label>Activities</ion-label>
+        </ion-segment-button>
+        <!--        <ion-segment-button value="lesson">-->
+        <!--          <ion-label>Show Interest</ion-label>-->
+        <!--        </ion-segment-button>-->
+        <ion-segment-button value="message">
+          <ion-label>Send Message</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+
+      <!--      <div *ngIf="tabs =='about'" class="about">-->
+      <!--        <ion-label class="head_text">{{jobData.offer_code}}</ion-label>-->
+
+      <!--        &lt;!&ndash;      <div class="mentor" (click)="onMentor()">&ndash;&gt;-->
+      <!--        <div class="mentor">-->
+      <!--          <div class="left">-->
+      <!--            <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
+      <!--            <div style="margin-left: 10px;">-->
+      <!--              <ion-label class="bold">Expires</ion-label>-->
+      <!--              <ion-label class="grey">{{jobData.expire}}</ion-label>-->
+      <!--            </div>-->
+      <!--          </div>-->
+      <!--          &lt;!&ndash;        <ion-icon name="chatbubble-ellipses-outline" color="primary"></ion-icon>&ndash;&gt;-->
+      <!--        </div>-->
+
+      <!--        <ion-label class="head_text">Description</ion-label>-->
+      <!--        <ion-label class="description">{{jobData.job_description}}-->
+      <!--        </ion-label>-->
+
+      <!--        <ion-label class="head_text">Delivery Details</ion-label>-->
+      <!--        <ion-label class="description">{{jobData.description}}-->
+      <!--        </ion-label>-->
+      <!--      </div>-->
+
+      <div *ngIf="tabs =='activities'" class="lesson">
+        <!--      <div class="flex">-->
+        <!--        <ion-label class="bold">Most Popular Courses</ion-label>-->
+        <!--        <ion-label class="color">See all</ion-label>-->
+        <!--      </div>-->
+
+
+        <!--      <div class="sec">-->
+        <!--        <ion-label class="grey">Section 3 - Let's Practice</ion-label>-->
+        <!--        <ion-label class="color">75 min</ion-label>-->
+        <!--      </div>-->
+
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle>Load messages</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+
+            ...
+          </ion-card-content>
+
+
+        </ion-card>
+
+
+
+        <!--      <div class="video">-->
+        <!--        <div class="left">-->
+        <!--          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
+
+        <!--          <div class="text">-->
+        <!--            <ion-label class="bold_text">Why Using Figma ?</ion-label>-->
+        <!--            <ion-label class="grey_text">10 mins</ion-label>-->
+        <!--          </div>-->
+        <!--        </div>-->
+        <!--        <div class="right">-->
+        <!--          <ion-icon name="lock-closed-outline"></ion-icon>-->
+        <!--        </div>-->
+        <!--      </div>-->
+
+      </div>
+
+      <div *ngIf="tabs =='message'" class="lesson">
+
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle>Send Message to task owner</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            <ion-textarea label="Your Message to Job Owner" placeholder="Type something here"  [(ngModel)]='yourmessage' ></ion-textarea>
+          </ion-card-content>
+
+          <ion-button color="secondary" expand="block" (click)="sendJobmarketMessage()">Send Message</ion-button>
+          <ion-label class="description">{{interest_msg_status}}
+          </ion-label>
+        </ion-card>
+
+
+        <!--      <div class="video">-->
+
+        <!--          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
+
+
+
+
+
+
+
+        <!--      <div class="story-item">-->
+        <!--        <div class="menu">-->
+        <!--          <div class="text">-->
+        <!--            <div class="select show">-->
+        <!--              <ion-icon slot="start" name="star" color="light" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num white">All</ion-label>-->
+        <!--            </div>-->
+        <!--            <div class="select">-->
+        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num">1</ion-label>-->
+        <!--            </div>-->
+        <!--            <div class="select">-->
+        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num">2</ion-label>-->
+        <!--            </div>-->
+        <!--            <div class="select">-->
+        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num">3</ion-label>-->
+        <!--            </div>-->
+        <!--            <div class="select">-->
+        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num">4</ion-label>-->
+        <!--            </div>-->
+        <!--            <div class="select">-->
+        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num">5</ion-label>-->
+        <!--            </div>-->
+        <!--          </div>-->
+        <!--        </div>-->
+        <!--      </div>-->
+
+        <!--      <div class="reviw_list" *ngFor="let item of [1,2,3,4,5]">-->
+        <!--        <div class="profile">-->
+        <!--          <div class="left">-->
+        <!--            <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/p2.jpg)'"></div>-->
+        <!--            <div style="margin-left: 10px;">-->
+        <!--              <ion-label class="bold">Jonathon Williams</ion-label>-->
+        <!--            </div>-->
+        <!--          </div>-->
+        <!--          <div class="right">-->
+        <!--            <div class="select">-->
+        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num">5</ion-label>-->
+        <!--            </div>-->
+        <!--            <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
+        <!--          </div>-->
+        <!--        </div>-->
+        <!--        <ion-label>The course is very good. the experience of the menter is very clear and easy to understand-->
+        <!--        </ion-label>-->
+
+        <!--        <div class="like">-->
+        <!--          <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>-->
+        <!--          <ion-label class="count">330</ion-label>-->
+        <!--          <ion-label class="time">2 Days ago</ion-label>-->
+        <!--        </div>-->
+        <!--      </div>-->
+      </div>
+    </div>
+
+
+
+  </div>
 </ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <div class="button" (click)="onBack()">
+      <ion-label class="text">Return</ion-label>
+    </div>
+  </ion-toolbar>
+</ion-footer>
+
+

src/app/pages/jobactive/jobactive.page.scss

@@ -2,7 +2,7 @@
 ion-content {
   .back_image {
     width: 100%;
-    height: 230px;
+    height: 130px;
 
     .back {
       font-size: 25px;

src/app/pages/jobactive/jobactive.page.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import {NavController} from "@ionic/angular";
+import {Router} from "@angular/router";
+import {SessionDataProviderService} from "../../store/session-data-provider.service";
+import {WrenchService} from "../../services/wrench.service";
 
 @Component({
   selector: 'app-jobactive',
@@ -7,9 +11,30 @@ import { Component, OnInit } from '@angular/core';
 })
 export class JobactivePage implements OnInit {
 
-  constructor() { }
+  jobData: any;
+  tabs = 'activities';
+
+  constructor(
+      private navctr: NavController,
+      private router: Router,
+      public sessionDataProviderService: SessionDataProviderService,
+      private wrenchService: WrenchService
+  ) {
+
+    this.jobData  =  this.router.getCurrentNavigation().extras.state;
+    console.log("XXXXX 1",   this.router.getCurrentNavigation().extras);
+    console.log("XXXXX 2",   this.router.getCurrentNavigation().extras.state);
+    //console.log("XXXXX 3",   this.router.getCurrentNavigation().extras.state.ID);
+  }
+
 
   ngOnInit() {
   }
 
+  onBack() {
+    this.navctr.back();
+  }
+
+
+
 }

src/app/pages/jobpastdue/jobpastdue.page.scss

@@ -2,7 +2,7 @@
 ion-content {
   .back_image {
     width: 100%;
-    height: 230px;
+    height: 130px;
 
     .back {
       font-size: 25px;

src/app/pages/jobreview/jobreview.page.html

@@ -1,9 +1,258 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>jobreview</ion-title>
-  </ion-toolbar>
-</ion-header>
 
 <ion-content>
+  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/market.jpg)'">
+    <div class="ion-padding">
+      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
+    </div>
+  </div>
 
+  <div class="ion-padding">
+    <div class="boxed_contents">
+      <div class="flex">
+        <ion-label class="bold_text_green">In Review</ion-label>
+        <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>
+      </div>
+      <div class="flex">
+        <ion-label class="bold_text">{{jobData.title}}</ion-label>
+      </div>
+
+      <div class="row">
+        <ion-label class="bg_text">{{jobData.offer_code}}</ion-label>
+        <div class="rate">
+          <!--        <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
+          <ion-label class="review"> Due date: {{jobData.delivery_date}} </ion-label>
+        </div>
+      </div>
+
+      <ion-label class="color_text">Price: {{jobData.price*0.01}} {{jobData.currency}}</ion-label>
+
+      <div class="items">
+        <div class="stud">
+          <ion-icon slot="start" name="time" color="primary"></ion-icon>
+          <ion-label>Timeline: {{jobData.timeline_days}} days</ion-label>
+        </div>
+        <!--      <div class="stud">-->
+        <!--        <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
+        <!--        <ion-label>Certificate</ion-label>-->
+        <!--      </div>-->
+      </div>
+
+      <ion-card>
+        <ion-card-header>
+          <ion-card-subtitle>Task Actions</ion-card-subtitle>
+        </ion-card-header>
+        <ion-card-content>
+          This job is in review, you can accept or reject completion.
+        </ion-card-content>
+        <ion-button color="danger" fill="clear">Reject Completion</ion-button>
+        <ion-button fill="clear">Accept Completion</ion-button>
+
+      </ion-card>
+
+      <!--      <ion-grid>-->
+      <!--        <ion-row>-->
+      <!--          <ion-col>-->
+      <!--            <ion-card color="secondary">-->
+      <!--              <ion-card-header>-->
+      <!--                <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
+      <!--              </ion-card-header>-->
+
+      <!--              <ion-card-content>-->
+      <!--                <ion-button color="secondary" expand="block" fill="outline"  >Extend Due Date</ion-button>-->
+      <!--              </ion-card-content>-->
+      <!--            </ion-card>-->
+      <!--          </ion-col>-->
+      <!--          <ion-col>-->
+      <!--            <ion-card color="danger">-->
+      <!--              <ion-card-header>-->
+      <!--                <ion-card-subtitle>-->
+      <!--                  Card Subtitle-->
+      <!--                </ion-card-subtitle>-->
+      <!--              </ion-card-header>-->
+
+      <!--              <ion-card-content>-->
+      <!--                <ion-button color="secondary" expand="block" fill="outline">Cancel Task</ion-button>-->
+      <!--              </ion-card-content>-->
+      <!--            </ion-card>-->
+      <!--          </ion-col>-->
+      <!--        </ion-row>-->
+      <!--      </ion-grid>-->
+
+      <ion-segment [(ngModel)]="tabs">
+        <ion-segment-button value="activities">
+          <ion-label>Activities</ion-label>
+        </ion-segment-button>
+        <!--        <ion-segment-button value="lesson">-->
+        <!--          <ion-label>Show Interest</ion-label>-->
+        <!--        </ion-segment-button>-->
+        <ion-segment-button value="message">
+          <ion-label>Send Message</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+
+      <!--      <div *ngIf="tabs =='about'" class="about">-->
+      <!--        <ion-label class="head_text">{{jobData.offer_code}}</ion-label>-->
+
+      <!--        &lt;!&ndash;      <div class="mentor" (click)="onMentor()">&ndash;&gt;-->
+      <!--        <div class="mentor">-->
+      <!--          <div class="left">-->
+      <!--            <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
+      <!--            <div style="margin-left: 10px;">-->
+      <!--              <ion-label class="bold">Expires</ion-label>-->
+      <!--              <ion-label class="grey">{{jobData.expire}}</ion-label>-->
+      <!--            </div>-->
+      <!--          </div>-->
+      <!--          &lt;!&ndash;        <ion-icon name="chatbubble-ellipses-outline" color="primary"></ion-icon>&ndash;&gt;-->
+      <!--        </div>-->
+
+      <!--        <ion-label class="head_text">Description</ion-label>-->
+      <!--        <ion-label class="description">{{jobData.job_description}}-->
+      <!--        </ion-label>-->
+
+      <!--        <ion-label class="head_text">Delivery Details</ion-label>-->
+      <!--        <ion-label class="description">{{jobData.description}}-->
+      <!--        </ion-label>-->
+      <!--      </div>-->
+
+      <div *ngIf="tabs =='activities'" class="lesson">
+        <!--      <div class="flex">-->
+        <!--        <ion-label class="bold">Most Popular Courses</ion-label>-->
+        <!--        <ion-label class="color">See all</ion-label>-->
+        <!--      </div>-->
+
+
+        <!--      <div class="sec">-->
+        <!--        <ion-label class="grey">Section 3 - Let's Practice</ion-label>-->
+        <!--        <ion-label class="color">75 min</ion-label>-->
+        <!--      </div>-->
+
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle>Load messages</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+
+            ...
+          </ion-card-content>
+
+
+        </ion-card>
+
+
+
+        <!--      <div class="video">-->
+        <!--        <div class="left">-->
+        <!--          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
+
+        <!--          <div class="text">-->
+        <!--            <ion-label class="bold_text">Why Using Figma ?</ion-label>-->
+        <!--            <ion-label class="grey_text">10 mins</ion-label>-->
+        <!--          </div>-->
+        <!--        </div>-->
+        <!--        <div class="right">-->
+        <!--          <ion-icon name="lock-closed-outline"></ion-icon>-->
+        <!--        </div>-->
+        <!--      </div>-->
+
+      </div>
+
+      <div *ngIf="tabs =='message'" class="lesson">
+
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle>Send Message to task owner</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            <ion-textarea label="Your Message to Job Owner" placeholder="Type something here"  [(ngModel)]='yourmessage' ></ion-textarea>
+          </ion-card-content>
+
+          <ion-button color="secondary" expand="block" (click)="sendJobmarketMessage()">Send Message</ion-button>
+          <ion-label class="description">{{interest_msg_status}}
+          </ion-label>
+        </ion-card>
+
+
+        <!--      <div class="video">-->
+
+        <!--          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
+
+
+
+
+
+
+
+        <!--      <div class="story-item">-->
+        <!--        <div class="menu">-->
+        <!--          <div class="text">-->
+        <!--            <div class="select show">-->
+        <!--              <ion-icon slot="start" name="star" color="light" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num white">All</ion-label>-->
+        <!--            </div>-->
+        <!--            <div class="select">-->
+        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num">1</ion-label>-->
+        <!--            </div>-->
+        <!--            <div class="select">-->
+        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num">2</ion-label>-->
+        <!--            </div>-->
+        <!--            <div class="select">-->
+        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num">3</ion-label>-->
+        <!--            </div>-->
+        <!--            <div class="select">-->
+        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num">4</ion-label>-->
+        <!--            </div>-->
+        <!--            <div class="select">-->
+        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num">5</ion-label>-->
+        <!--            </div>-->
+        <!--          </div>-->
+        <!--        </div>-->
+        <!--      </div>-->
+
+        <!--      <div class="reviw_list" *ngFor="let item of [1,2,3,4,5]">-->
+        <!--        <div class="profile">-->
+        <!--          <div class="left">-->
+        <!--            <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/p2.jpg)'"></div>-->
+        <!--            <div style="margin-left: 10px;">-->
+        <!--              <ion-label class="bold">Jonathon Williams</ion-label>-->
+        <!--            </div>-->
+        <!--          </div>-->
+        <!--          <div class="right">-->
+        <!--            <div class="select">-->
+        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
+        <!--              <ion-label class="rate_num">5</ion-label>-->
+        <!--            </div>-->
+        <!--            <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
+        <!--          </div>-->
+        <!--        </div>-->
+        <!--        <ion-label>The course is very good. the experience of the menter is very clear and easy to understand-->
+        <!--        </ion-label>-->
+
+        <!--        <div class="like">-->
+        <!--          <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>-->
+        <!--          <ion-label class="count">330</ion-label>-->
+        <!--          <ion-label class="time">2 Days ago</ion-label>-->
+        <!--        </div>-->
+        <!--      </div>-->
+      </div>
+    </div>
+
+
+
+  </div>
 </ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <div class="button" (click)="onBack()">
+      <ion-label class="text">Return</ion-label>
+    </div>
+  </ion-toolbar>
+</ion-footer>
+

src/app/pages/jobreview/jobreview.page.scss

@@ -2,7 +2,7 @@
 ion-content {
   .back_image {
     width: 100%;
-    height: 230px;
+    height: 130px;
 
     .back {
       font-size: 25px;

src/app/pages/jobreview/jobreview.page.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import {NavController} from "@ionic/angular";
+import {Router} from "@angular/router";
+import {SessionDataProviderService} from "../../store/session-data-provider.service";
+import {WrenchService} from "../../services/wrench.service";
 
 @Component({
   selector: 'app-jobreview',
@@ -6,10 +10,29 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./jobreview.page.scss'],
 })
 export class JobreviewPage implements OnInit {
+  jobData: any;
+  tabs = 'activities';
+
+  constructor(
+      private navctr: NavController,
+      private router: Router,
+      public sessionDataProviderService: SessionDataProviderService,
+      private wrenchService: WrenchService
+  ) {
+
+    this.jobData  =  this.router.getCurrentNavigation().extras.state;
+    console.log("XXXXX 1",   this.router.getCurrentNavigation().extras);
+    console.log("XXXXX 2",   this.router.getCurrentNavigation().extras.state);
+    //console.log("XXXXX 3",   this.router.getCurrentNavigation().extras.state.ID);
+  }
 
-  constructor() { }
 
   ngOnInit() {
   }
 
+  onBack() {
+    this.navctr.back();
+  }
+
+
 }

src/app/pages/resetpass/resetpass-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ResetpassPage } from './resetpass.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ResetpassPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ResetpassPageRoutingModule {}

src/app/pages/resetpass/resetpass.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ResetpassPageRoutingModule } from './resetpass-routing.module';
+
+import { ResetpassPage } from './resetpass.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ResetpassPageRoutingModule
+  ],
+  declarations: [ResetpassPage]
+})
+export class ResetpassPageModule {}

src/app/pages/resetpass/resetpass.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>resetpass</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/pages/resetpass/resetpass.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ResetpassPage } from './resetpass.page';
+
+describe('ResetpassPage', () => {
+  let component: ResetpassPage;
+  let fixture: ComponentFixture<ResetpassPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ResetpassPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ResetpassPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/resetpass/resetpass.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-resetpass',
+  templateUrl: './resetpass.page.html',
+  styleUrls: ['./resetpass.page.scss'],
+})
+export class ResetpassPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/security/security.page.html

@@ -30,7 +30,7 @@
 <!--    <ion-icon name="chevron-forward-outline"></ion-icon>-->
 <!--  </div>-->
 
-  <ion-button expand="full" class="add_button" shape="round">
+  <ion-button expand="full" class="add_button" shape="round" (click)="onResetPass()">
     Change Password
   </ion-button>
 

src/app/pages/security/security.page.ts

@@ -61,6 +61,10 @@ export class SecurityPage implements OnInit {
     this.router.navigate(['login']);
   }
 
+  onResetPass(){
+    //
+    this.router.navigate(['resetpass']);
+  }
   async requestDelete() {
     const alert = await this.alertController.create({
       header: "Account Delete",

src/global.scss

@@ -119,4 +119,9 @@ ion-modal.custom_modal_bottom {
   font-size: 20px;
   font-family: 'bold';
   color:red;
+}
+.bold_text_green{
+  font-size: 20px;
+  font-family: 'bold';
+  color:green;
 }