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>