Improve pin

src/app/shared/pin/pin.page.html

@@ -1,26 +1,44 @@
 
 <ion-content>
+  
   <div class="main-content d-flex flex-column align-center justify-center">
+    <div class="div-top-header">
+
+      <div class="div-logo">
+        <img src='assets/images/logo-bg.png' alt='logo'>
+      </div>
+
+    </div>
     <ion-title class="title">Digite o PIN novo</ion-title>
+    <div class="d-flex pt-25">
+      <div class="dot" [class.dot-active]="code.length >= 1"></div>
+      <div class="dot" [class.dot-active]="code.length >= 2"></div>
+      <div class="dot" [class.dot-active]="code.length >= 3"></div>
+      <div class="dot"[class.dot-active]="code.length >= 4"></div>
+    </div>
     <div class="terminal">
 
       <div class="d-flex">
-        <div class="circle">1</div> <div class="circle">2</div> <div class="circle">3</div>
+        <div class="circle" (click)="setCode('1')">1</div> <div class="circle" (click)="setCode('2')">2</div> <div class="circle" (click)="setCode('3')">3</div>
       </div>
 
       <div class="d-flex">
-        <div class="circle">4</div> <div class="circle">5</div> <div class="circle">6</div>
+        <div class="circle" (click)="setCode('4')">4</div> <div class="circle" (click)="setCode('5')">5</div> <div class="circle" (click)="setCode('6')">6</div>
       </div>
 
       <div class="d-flex">
-        <div class="circle">7</div> <div class="circle">8</div> <div class="circle">9</div>
+        <div class="circle" (click)="setCode('7')">7</div> <div class="circle" (click)="setCode('8')">8</div> <div class="circle" (click)="setCode('9')">9</div>
       </div>
 
       <div class="d-flex align-center justify-center">
-        <div class="circle">0</div>
+        <div class="circle" (click)="setCode('0')">0</div>
       </div>
       
     </div>
+
+    <div (click)="clearCode()" class="d-flex align-center justify-center pt-25 clear">
+      Cancelar
+    </div>
   </div>
 
 </ion-content>

src/app/shared/pin/pin.page.scss

@@ -1,3 +1,22 @@
+@import '~src/function.scss';
+
+.div-top-header{
+  margin: 0 em(20px);
+  padding-top: em(15px);
+  border: 0!important;
+}
+
+.div-logo{
+  background: transparent;
+  width: em(140px);
+  justify-content: center;
+  display: flex;
+}
+.div-logo img{
+  width: 100%;
+  margin: 0px auto;
+}
+
 :host{
     text-align: center;
     align-items: center;
@@ -6,23 +25,23 @@
     background-image: url("/assets/background/auth.svg");
     background-size: 686px 674px;
     background-position: center;
-    background-position-y: 0px;
+    background-position-y: 78px;
     background-repeat: no-repeat;
 }
 
 
 .circle{
     color: white;
-    width: 85px;
-    height: 85px;
+    width: 70px;
+    height: 70px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 19pt;
     background: #44b5ea;
     border-radius: 56px;
-    margin-left: 10px;
-    margin-bottom: 10px;
+    margin-left: 30px;
+    margin-bottom: 15px;
 }
 
 .title{
@@ -31,5 +50,26 @@
 
 .terminal {
     padding-top: 112px;
-    margin-left: -9px;
+    margin-left: -30px;
+}
+
+.clear{
+    color: #44b5ea;
+    font-size: 12pt;
+}
+.dot-active{
+    background: #44b5ea;
+}
+
+.dot{
+    width: 25px;
+    height: 25px;
+    margin: 0 10px 0 0;
+    border: 3px solid #44b5ea;
+    box-sizing: border-box;
+    border-radius: 50px;
+    -webkit-border-radius: 50px;
+    -moz-border-radius: 50px;
+    -ms-border-radius: 50px;
+    -o-border-radius: 50px;
 }

src/app/shared/pin/pin.page.ts

@@ -7,9 +7,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PinPage implements OnInit {
 
+  code = []
   constructor() { }
 
   ngOnInit() {
   }
 
+  setCode(code: string) {
+    if(this.code.length < 4) {
+      this.code.push(code)
+    }
+    
+  }
+
+  clearCode(){
+    this.code =[]
+  }
+
 }