From b686696bf78b25d0e35e3d54887d1711ef8aa894 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Thu, 27 May 2021 16:20:40 +0100
Subject: [PATCH 1/5] Improve profile

---
 .../header-no-search-routing.module.ts        | 34 +++++----
 .../header-no-search/header-no-search.page.ts |  2 +-
 .../profile/profile-routing.module.ts         | 17 +++++
 .../profile/profile.component.html            | 70 -------------------
 .../profile/profile.module.ts                 | 20 ++++++
 .../profile/profile.page.html                 | 70 +++++++++++++++++++
 ...ofile.component.scss => profile.page.scss} |  0
 ...component.spec.ts => profile.page.spec.ts} |  8 +--
 .../{profile.component.ts => profile.page.ts} |  9 ++-
 9 files changed, 138 insertions(+), 92 deletions(-)
 create mode 100644 src/app/shared/headers/header-no-search/profile/profile-routing.module.ts
 delete mode 100644 src/app/shared/headers/header-no-search/profile/profile.component.html
 create mode 100644 src/app/shared/headers/header-no-search/profile/profile.module.ts
 create mode 100644 src/app/shared/headers/header-no-search/profile/profile.page.html
 rename src/app/shared/headers/header-no-search/profile/{profile.component.scss => profile.page.scss} (100%)
 rename src/app/shared/headers/header-no-search/profile/{profile.component.spec.ts => profile.page.spec.ts} (71%)
 rename src/app/shared/headers/header-no-search/profile/{profile.component.ts => profile.page.ts} (84%)

diff --git a/src/app/shared/headers/header-no-search/header-no-search-routing.module.ts b/src/app/shared/headers/header-no-search/header-no-search-routing.module.ts
index bff5b2f69..6e1f8a04c 100644
--- a/src/app/shared/headers/header-no-search/header-no-search-routing.module.ts
+++ b/src/app/shared/headers/header-no-search/header-no-search-routing.module.ts
@@ -1,17 +1,21 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { HeaderNoSearchPage } from './header-no-search.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: HeaderNoSearchPage
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { HeaderNoSearchPage } from './header-no-search.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HeaderNoSearchPage
+  },
  {
+    path: 'profile',
+    loadChildren: () => import('./profile/profile.module').then( m => m.ProfilePageModule)
   }
-];
 
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class HeaderNoSearchPageRoutingModule {}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class HeaderNoSearchPageRoutingModule {}
diff --git a/src/app/shared/headers/header-no-search/header-no-search.page.ts b/src/app/shared/headers/header-no-search/header-no-search.page.ts
index f793c1c79..cc42609fe 100644
--- a/src/app/shared/headers/header-no-search/header-no-search.page.ts
+++ b/src/app/shared/headers/header-no-search/header-no-search.page.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { AnimationController, ModalController } from '@ionic/angular';
 import { SearchPage } from 'src/app/pages/search/search.page';
 import { MenuController } from '@ionic/angular';
-import { ProfileComponent } from './profile/profile.component';
+import { ProfileComponent } from './profile/profile.page';
 import { Router } from '@angular/router';
 import { AuthService } from 'src/app/services/auth.service';
 import { User } from 'src/app/models/user.model';
diff --git a/src/app/shared/headers/header-no-search/profile/profile-routing.module.ts b/src/app/shared/headers/header-no-search/profile/profile-routing.module.ts
new file mode 100644
index 000000000..3b21e8195
--- /dev/null
+++ b/src/app/shared/headers/header-no-search/profile/profile-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ProfileComponent } from './profile.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProfileComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ProfilePageRoutingModule {}
diff --git a/src/app/shared/headers/header-no-search/profile/profile.component.html b/src/app/shared/headers/header-no-search/profile/profile.component.html
deleted file mode 100644
index 68d4c6269..000000000
--- a/src/app/shared/headers/header-no-search/profile/profile.component.html
+++ /dev/null
@@ -1,70 +0,0 @@
-
-
-<ion-content class=" bg-blue">
-
-    <div class="profile-content">
-
-        
-        <div class="d-flex justify-space-between align-center">
-            <div class="go-back d-flex align-center"  (click)="close()">
-                <ion-icon class="icon" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon> <div>Perfil</div>
-            </div>
-            
-            <div class="d-flex " (click)="close()">
-                <ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
-            </div>
-        </div>
-
-    
-        <div >
-            <div class="d-flex align-center">       
-                <ion-icon  class="profile-pic"  name="add-circle-outline"></ion-icon>
-            </div>
-        </div>
-    
-        <div class="profile-info">
-            <div class="label-text">Dados Perfil</div>
-            <div class="user-role">{{loggeduser.RoleDescription}}</div>
-            <div class="email">{{loggeduser.Email}}</div>
-        </div>
-
-
-        <div class="login-preference">
-            <div class="preference">Preferência Login</div>
-
-            <ion-row>
-                <ion-col class="align-center d-flex">
-                    <ion-checkbox class="checkBox"></ion-checkbox>
-                    Impressão Digital
-                </ion-col>
-                <ion-col class="align-center d-flex">
-                    <ion-checkbox class="checkBox"></ion-checkbox>
-                    PIN 
-                </ion-col>
-            </ion-row>
-
-        </div>
-
-
-    </div>
-
-</ion-content>
-
-
-
-<ion-footer class=" footer-container ion-no-border bg-blue">
-    <div class="d-flex justify-space-between">
-        <ion-buttons slot="start" (click)="close()">
-            <ion-button class="btn-cancel" fill="clear" color="#061b52" >
-              <ion-label>Cancelar</ion-label>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="end" (click)="close()">
-            <ion-button class="btn-ok" fill="clear" color="#fff" >
-              <ion-label>Gravar</ion-label>
-            </ion-button>
-          </ion-buttons>
-    
-    </div>
-
-  </ion-footer>
\ No newline at end of file
diff --git a/src/app/shared/headers/header-no-search/profile/profile.module.ts b/src/app/shared/headers/header-no-search/profile/profile.module.ts
new file mode 100644
index 000000000..fba2e4bfa
--- /dev/null
+++ b/src/app/shared/headers/header-no-search/profile/profile.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 { ProfilePageRoutingModule } from './profile-routing.module';
+
+import { ProfileComponent } from './profile.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ProfilePageRoutingModule
+  ],
+  declarations: [ProfileComponent]
+})
+export class ProfilePageModule {}
diff --git a/src/app/shared/headers/header-no-search/profile/profile.page.html b/src/app/shared/headers/header-no-search/profile/profile.page.html
new file mode 100644
index 000000000..8eda886f9
--- /dev/null
+++ b/src/app/shared/headers/header-no-search/profile/profile.page.html
@@ -0,0 +1,70 @@
+
+
+<ion-content class=" bg-blue">
+
+  <div class="profile-content">
+
+      
+      <div class="d-flex justify-space-between align-center">
+          <div class="go-back d-flex align-center"  (click)="close()">
+              <ion-icon class="icon" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon> <div>Perfil</div>
+          </div>
+          
+          <div class="d-flex " (click)="close()">
+              <ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
+          </div>
+      </div>
+
+  
+      <div >
+          <div class="d-flex align-center">       
+              <ion-icon  class="profile-pic"  name="add-circle-outline"></ion-icon>
+          </div>
+      </div>
+  
+      <div class="profile-info">
+          <div class="label-text">Dados Perfil</div>
+          <div class="user-role">{{loggeduser.RoleDescription}}</div>
+          <div class="email">{{loggeduser.Email}}</div>
+      </div>
+
+
+      <div class="login-preference">
+          <div class="preference">Preferência Login</div>
+
+          <ion-row>
+              <ion-col class="align-center d-flex" (click)="addPrin()">
+                  <ion-checkbox class="checkBox"></ion-checkbox>
+                  Impressão Digital
+              </ion-col>
+              <ion-col class="align-center d-flex">
+                  <ion-checkbox class="checkBox"></ion-checkbox>
+                  PIN 
+              </ion-col>
+          </ion-row>
+
+      </div>
+
+
+  </div>
+
+</ion-content>
+
+
+
+<ion-footer class=" footer-container ion-no-border bg-blue">
+  <div class="d-flex justify-space-between">
+      <ion-buttons slot="start" (click)="close()">
+          <ion-button class="btn-cancel" fill="clear" color="#061b52" >
+            <ion-label>Cancelar</ion-label>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="end" (click)="close()">
+          <ion-button class="btn-ok" fill="clear" color="#fff" >
+            <ion-label>Gravar</ion-label>
+          </ion-button>
+        </ion-buttons>
+  
+  </div>
+
+</ion-footer>
\ No newline at end of file
diff --git a/src/app/shared/headers/header-no-search/profile/profile.component.scss b/src/app/shared/headers/header-no-search/profile/profile.page.scss
similarity index 100%
rename from src/app/shared/headers/header-no-search/profile/profile.component.scss
rename to src/app/shared/headers/header-no-search/profile/profile.page.scss
diff --git a/src/app/shared/headers/header-no-search/profile/profile.component.spec.ts b/src/app/shared/headers/header-no-search/profile/profile.page.spec.ts
similarity index 71%
rename from src/app/shared/headers/header-no-search/profile/profile.component.spec.ts
rename to src/app/shared/headers/header-no-search/profile/profile.page.spec.ts
index d50b2595b..e3f18689f 100644
--- a/src/app/shared/headers/header-no-search/profile/profile.component.spec.ts
+++ b/src/app/shared/headers/header-no-search/profile/profile.page.spec.ts
@@ -1,13 +1,13 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { ProfileComponent } from './profile.component';
+import { ProfileComponent } from './profile.page';
 
-describe('ProfileComponent', () => {
+describe('ProfilePage', () => {
   let component: ProfileComponent;
   let fixture: ComponentFixture<ProfileComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ProfileComponent ],
       imports: [IonicModule.forRoot()]
diff --git a/src/app/shared/headers/header-no-search/profile/profile.component.ts b/src/app/shared/headers/header-no-search/profile/profile.page.ts
similarity index 84%
rename from src/app/shared/headers/header-no-search/profile/profile.component.ts
rename to src/app/shared/headers/header-no-search/profile/profile.page.ts
index f9a966148..c1474e6e5 100644
--- a/src/app/shared/headers/header-no-search/profile/profile.component.ts
+++ b/src/app/shared/headers/header-no-search/profile/profile.page.ts
@@ -5,8 +5,8 @@ import { AuthService } from 'src/app/services/auth.service';
 
 @Component({
   selector: 'app-profile',
-  templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss'],
+  templateUrl: './profile.page.html',
+  styleUrls: ['./profile.page.scss'],
 })
 export class ProfileComponent implements OnInit {
 
@@ -25,4 +25,9 @@ export class ProfileComponent implements OnInit {
     this.modalController.dismiss();
   }
 
+  addPrin(){
+    alert('Pin')
+  }
+
+
 }

From ad07ed054027ce8578dfcce6d38022bbac98c770 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Thu, 27 May 2021 16:21:04 +0100
Subject: [PATCH 2/5] Improve profile

---
 src/app/app-routing.module.ts                 |  4 ++++
 src/app/shared/chat/messages/messages.page.ts |  2 +-
 .../despachos/despachos.page.ts               |  2 +-
 src/app/shared/header/header.page.ts          |  2 +-
 src/app/shared/pin/pin-routing.module.ts      | 17 +++++++++++++
 src/app/shared/pin/pin.module.ts              | 20 ++++++++++++++++
 src/app/shared/pin/pin.page.html              |  9 +++++++
 src/app/shared/pin/pin.page.scss              |  0
 src/app/shared/pin/pin.page.spec.ts           | 24 +++++++++++++++++++
 src/app/shared/pin/pin.page.ts                | 15 ++++++++++++
 10 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 src/app/shared/pin/pin-routing.module.ts
 create mode 100644 src/app/shared/pin/pin.module.ts
 create mode 100644 src/app/shared/pin/pin.page.html
 create mode 100644 src/app/shared/pin/pin.page.scss
 create mode 100644 src/app/shared/pin/pin.page.spec.ts
 create mode 100644 src/app/shared/pin/pin.page.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 48f48bcb9..5bf13e9e9 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -108,6 +108,10 @@ const routes: Routes = [
     path: 'deploma-options',
     loadChildren: () => import('./shared/popover/deploma-options/deploma-options.module').then( m => m.DeplomaOptionsPageModule)
   },
+  {
+    path: 'pin',
+    loadChildren: () => import('./shared/pin/pin.module').then( m => m.PinPageModule)
+  },
 
  /*  {
     path: 'chat',
diff --git a/src/app/shared/chat/messages/messages.page.ts b/src/app/shared/chat/messages/messages.page.ts
index 67e8530d6..67eb8769e 100644
--- a/src/app/shared/chat/messages/messages.page.ts
+++ b/src/app/shared/chat/messages/messages.page.ts
@@ -6,7 +6,7 @@ import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
 import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
 import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
-import { ProfileComponent } from '../../headers/header-no-search/profile/profile.component';
+import { ProfileComponent } from '../../headers/header-no-search/profile/profile.page';
 import { ContactsPage } from '../new-group/contacts/contacts.page';
 
 @Component({
diff --git a/src/app/shared/gabinete-digital/despachos/despachos.page.ts b/src/app/shared/gabinete-digital/despachos/despachos.page.ts
index d3b0b042b..585791bc0 100644
--- a/src/app/shared/gabinete-digital/despachos/despachos.page.ts
+++ b/src/app/shared/gabinete-digital/despachos/despachos.page.ts
@@ -258,7 +258,7 @@ export class DespachosPage implements OnInit {
 
     const doc = this.taskList[ this.dicIndex];
 
-    console.log(doc, this.dicIndex, this.taskList)
+    // console.log(doc, this.dicIndex, this.taskList)
     
     const modal = await this.modalController.create({
       component: DiscartExpedientModalPage,
diff --git a/src/app/shared/header/header.page.ts b/src/app/shared/header/header.page.ts
index e2cd2967c..d3eab0f65 100644
--- a/src/app/shared/header/header.page.ts
+++ b/src/app/shared/header/header.page.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { AnimationController, ModalController } from '@ionic/angular';
 import { SearchPage } from 'src/app/pages/search/search.page';
 import { Router } from '@angular/router';
-import { ProfileComponent } from '../headers/header-no-search/profile/profile.component';
+import { ProfileComponent } from '../headers/header-no-search/profile/profile.page';
 import { AuthService } from 'src/app/services/auth.service';
 import { User } from 'src/app/models/user.model';
 
diff --git a/src/app/shared/pin/pin-routing.module.ts b/src/app/shared/pin/pin-routing.module.ts
new file mode 100644
index 000000000..cbdcf08ab
--- /dev/null
+++ b/src/app/shared/pin/pin-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PinPage } from './pin.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PinPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PinPageRoutingModule {}
diff --git a/src/app/shared/pin/pin.module.ts b/src/app/shared/pin/pin.module.ts
new file mode 100644
index 000000000..f6465fe53
--- /dev/null
+++ b/src/app/shared/pin/pin.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 { PinPageRoutingModule } from './pin-routing.module';
+
+import { PinPage } from './pin.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PinPageRoutingModule
+  ],
+  declarations: [PinPage]
+})
+export class PinPageModule {}
diff --git a/src/app/shared/pin/pin.page.html b/src/app/shared/pin/pin.page.html
new file mode 100644
index 000000000..2e60e0e14
--- /dev/null
+++ b/src/app/shared/pin/pin.page.html
@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>pin</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>
diff --git a/src/app/shared/pin/pin.page.scss b/src/app/shared/pin/pin.page.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/pin/pin.page.spec.ts b/src/app/shared/pin/pin.page.spec.ts
new file mode 100644
index 000000000..d050c34c0
--- /dev/null
+++ b/src/app/shared/pin/pin.page.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PinPage } from './pin.page';
+
+describe('PinPage', () => {
+  let component: PinPage;
+  let fixture: ComponentFixture<PinPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PinPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PinPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/pin/pin.page.ts b/src/app/shared/pin/pin.page.ts
new file mode 100644
index 000000000..c77d7cf8c
--- /dev/null
+++ b/src/app/shared/pin/pin.page.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-pin',
+  templateUrl: './pin.page.html',
+  styleUrls: ['./pin.page.scss'],
+})
+export class PinPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

From 0405cc603c5d1904db3559974579998314c8fa28 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Thu, 27 May 2021 16:49:09 +0100
Subject: [PATCH 3/5] Add pin page

---
 .../profile/profile.page.html                 | 76 +++++++++----------
 .../header-no-search/profile/profile.page.ts  | 45 +++++++++--
 src/app/shared/pin/pin.page.html              | 27 +++++--
 src/app/shared/pin/pin.page.scss              | 30 ++++++++
 4 files changed, 129 insertions(+), 49 deletions(-)

diff --git a/src/app/shared/headers/header-no-search/profile/profile.page.html b/src/app/shared/headers/header-no-search/profile/profile.page.html
index 8eda886f9..50682e210 100644
--- a/src/app/shared/headers/header-no-search/profile/profile.page.html
+++ b/src/app/shared/headers/header-no-search/profile/profile.page.html
@@ -3,48 +3,46 @@
 <ion-content class=" bg-blue">
 
   <div class="profile-content">
-
+    
+    <div class="d-flex justify-space-between align-center">
+      <div class="go-back d-flex align-center"  (click)="close()">
+          <ion-icon class="icon" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon> <div>Perfil</div>
+      </div>
       
-      <div class="d-flex justify-space-between align-center">
-          <div class="go-back d-flex align-center"  (click)="close()">
-              <ion-icon class="icon" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon> <div>Perfil</div>
+      <div class="d-flex " (click)="close()">
+          <ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
+      </div>
+    </div>
+
+    <div >
+      <div class="d-flex align-center">       
+        <ion-icon  class="profile-pic"  name="add-circle-outline"></ion-icon>
+      </div>
+    </div>
+
+    <div class="profile-info">
+      <div class="label-text">Dados Perfil</div>
+      <div class="user-role">{{loggeduser.RoleDescription}}</div>
+      <div class="email">{{loggeduser.Email}}</div>
+    </div>
+
+    <div class="login-preference">
+      <div class="preference">Preferência Login</div>
+
+      <ion-row>
+        <ion-col class="align-center d-flex">
+          <div  (click)="addPin()">
+            <ion-checkbox class="checkBox"></ion-checkbox>
+            Impressão Digital
           </div>
-          
-          <div class="d-flex " (click)="close()">
-              <ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
-          </div>
-      </div>
-
-  
-      <div >
-          <div class="d-flex align-center">       
-              <ion-icon  class="profile-pic"  name="add-circle-outline"></ion-icon>
-          </div>
-      </div>
-  
-      <div class="profile-info">
-          <div class="label-text">Dados Perfil</div>
-          <div class="user-role">{{loggeduser.RoleDescription}}</div>
-          <div class="email">{{loggeduser.Email}}</div>
-      </div>
-
-
-      <div class="login-preference">
-          <div class="preference">Preferência Login</div>
-
-          <ion-row>
-              <ion-col class="align-center d-flex" (click)="addPrin()">
-                  <ion-checkbox class="checkBox"></ion-checkbox>
-                  Impressão Digital
-              </ion-col>
-              <ion-col class="align-center d-flex">
-                  <ion-checkbox class="checkBox"></ion-checkbox>
-                  PIN 
-              </ion-col>
-          </ion-row>
-
-      </div>
+        </ion-col>
+        <ion-col class="align-center d-flex">
+          <ion-checkbox class="checkBox"></ion-checkbox>
+          PIN 
+        </ion-col>
+      </ion-row>
 
+    </div>
 
   </div>
 
diff --git a/src/app/shared/headers/header-no-search/profile/profile.page.ts b/src/app/shared/headers/header-no-search/profile/profile.page.ts
index c1474e6e5..912823371 100644
--- a/src/app/shared/headers/header-no-search/profile/profile.page.ts
+++ b/src/app/shared/headers/header-no-search/profile/profile.page.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { AnimationController, ModalController } from '@ionic/angular';
 import { User } from 'src/app/models/user.model';
 import { AuthService } from 'src/app/services/auth.service';
+import { PinPage } from 'src/app/shared/pin/pin.page';
 
 @Component({
   selector: 'app-profile',
@@ -13,7 +14,9 @@ export class ProfileComponent implements OnInit {
   loggeduser: User;
 
   constructor(private modalController:ModalController,
-    private authService: AuthService) { 
+    private authService: AuthService,
+    private animationController: AnimationController) { 
+
     this.loggeduser = authService.ValidatedUser;
 
     console.log(this.loggeduser.RoleDescription)
@@ -21,12 +24,44 @@ export class ProfileComponent implements OnInit {
 
   ngOnInit() {}
 
-  close(){
+  close() {
     this.modalController.dismiss();
   }
 
-  addPrin(){
-    alert('Pin')
+  async addPin() {
+    const enterAnimation = (baseEl: any) => {
+      const backdropAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '1', right: '-100%' },
+          { offset: 1, opacity: '1', right: '0px' }
+        ]);
+
+      return this.animationController.create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+ 
+
+    const modal = await this.modalController.create({
+      enterAnimation,
+      leaveAnimation,
+      component: PinPage,
+      cssClass: 'model profile-modal',
+      componentProps: {
+      }
+    });
+    return await modal.present();
   }
 
 
diff --git a/src/app/shared/pin/pin.page.html b/src/app/shared/pin/pin.page.html
index 2e60e0e14..370972f55 100644
--- a/src/app/shared/pin/pin.page.html
+++ b/src/app/shared/pin/pin.page.html
@@ -1,9 +1,26 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>pin</ion-title>
-  </ion-toolbar>
-</ion-header>
 
 <ion-content>
+  <div class="main-content d-flex flex-column align-center justify-center">
+    <ion-title class="title">Digite o PIN novo</ion-title>
+    <div class="terminal">
+
+      <div class="d-flex">
+        <div class="circle">1</div> <div class="circle">2</div> <div class="circle">3</div>
+      </div>
+
+      <div class="d-flex">
+        <div class="circle">4</div> <div class="circle">5</div> <div class="circle">6</div>
+      </div>
+
+      <div class="d-flex">
+        <div class="circle">7</div> <div class="circle">8</div> <div class="circle">9</div>
+      </div>
+
+      <div class="d-flex align-center justify-center">
+        <div class="circle">0</div>
+      </div>
+      
+    </div>
+  </div>
 
 </ion-content>
diff --git a/src/app/shared/pin/pin.page.scss b/src/app/shared/pin/pin.page.scss
index e69de29bb..3ad8530e8 100644
--- a/src/app/shared/pin/pin.page.scss
+++ b/src/app/shared/pin/pin.page.scss
@@ -0,0 +1,30 @@
+:host{
+    text-align: center;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    background-image: url("/assets/background/auth.svg");
+    background-size: 686px 674px;
+    background-position: center;
+    background-position-y: 0px;
+    background-repeat: no-repeat;
+}
+
+
+.circle{
+    color: black;
+    width: 95px;
+    height: 97px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 19pt;
+}
+
+.title{
+    padding-top: 32px;
+}
+
+.terminal {
+    padding-top: 112px;
+}
\ No newline at end of file

From 03e6d08db4178ade26a481bfaba9f1cb69759576 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Thu, 27 May 2021 16:49:32 +0100
Subject: [PATCH 4/5] Improve

---
 src/assets/background/auth.svg | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 src/assets/background/auth.svg

diff --git a/src/assets/background/auth.svg b/src/assets/background/auth.svg
new file mode 100644
index 000000000..c20251421
--- /dev/null
+++ b/src/assets/background/auth.svg
@@ -0,0 +1,6 @@
+<svg width="614" height="614" viewBox="0 0 614 614" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="614" height="614" rx="307" fill="#FCFEFF"/>
+<ellipse cx="304" cy="307.5" rx="275" ry="264.5" fill="#F8FCFF"/>
+<ellipse cx="301.074" cy="308.748" rx="237.804" ry="231.645" fill="#F0F9FF"/>
+<path d="M507.951 310.827C507.951 423.832 415.891 515.44 302.328 515.44C188.766 515.44 96.7052 423.832 96.7052 310.827C96.7052 197.822 188.766 106.214 302.328 106.214C415.891 106.214 507.951 197.822 507.951 310.827Z" fill="#E1F4FF"/>
+</svg>

From dc71371491bd3d99ad9a9a0d862b4f02b4df5d04 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <peter.maquiran@equilibrium.local>
Date: Thu, 27 May 2021 16:53:12 +0100
Subject: [PATCH 5/5] Improve

---
 src/app/shared/pin/pin.page.scss | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/pin/pin.page.scss b/src/app/shared/pin/pin.page.scss
index 3ad8530e8..998b5fe9a 100644
--- a/src/app/shared/pin/pin.page.scss
+++ b/src/app/shared/pin/pin.page.scss
@@ -12,13 +12,17 @@
 
 
 .circle{
-    color: black;
-    width: 95px;
-    height: 97px;
+    color: white;
+    width: 85px;
+    height: 85px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 19pt;
+    background: #44b5ea;
+    border-radius: 56px;
+    margin-left: 10px;
+    margin-bottom: 10px;
 }
 
 .title{
@@ -27,4 +31,5 @@
 
 .terminal {
     padding-top: 112px;
+    margin-left: -9px;
 }
\ No newline at end of file