Improve pin

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

@@ -37,8 +37,25 @@
     </div>
 
     <div (click)="clearCode()" class="d-flex align-center justify-center pt-25 clear">
-      Cancelar
+      Limpar
     </div>
   </div>
 
 </ion-content>
+
+
+<ion-footer class=" footer-container ion-no-border">
+  <div class="d-flex justify-space-between">
+    <ion-buttons slot="start" >
+      <ion-button (click)="close()" class="btn-cancel" fill="clear" color="#061b52" >
+        <ion-label>Cancelar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end" >
+      <ion-button (click)="save()" class="btn-ok" fill="clear" color="#fff" >
+        <ion-label>Gravar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </div>
+
+</ion-footer>

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

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { BadRequestComponent } from '../popover/bad-request/bad-request.component';
+import { SuccessMessageComponent } from '../popover/success-message/success-message.component';
 
 @Component({
   selector: 'app-pin',
@@ -8,7 +11,7 @@ import { Component, OnInit } from '@angular/core';
 export class PinPage implements OnInit {
 
   code = []
-  constructor() { }
+  constructor( private modalController: ModalController,) { }
 
   ngOnInit() {
   }
@@ -16,6 +19,8 @@ export class PinPage implements OnInit {
   setCode(code: string) {
     if(this.code.length < 4) {
       this.code.push(code)
+    } else {
+      this.clearCode()
     }
     
   }
@@ -24,4 +29,58 @@ export class PinPage implements OnInit {
     this.code =[]
   }
 
+  close() {
+    /* console.log(this.isEventEdited); */
+    alert('close modal')
+    this.modalController.dismiss();
+  }
+
+   async save() {
+    if(this.code.length == 4) {
+      
+      this.successMessage()
+      localStorage.setItem('PIN', this.code.join(''))
+    } else {
+      this.badRequest()
+    }
+
+  }
+
+  async successMessage(message?: string) {
+    
+    const modal = await this.modalController.create({
+      component: SuccessMessageComponent,
+       componentProps: {
+        message: message || 'Processo efetuado' ,
+      },
+      cssClass: 'modal modal-desktop'
+    });
+
+    modal.present()
+    
+    setTimeout(()=>{
+
+      this.close()
+      modal.dismiss()
+    },3000)
+    
+  }
+
+  async badRequest(message?: string) {
+    const modal = await this.modalController.create({
+      component: BadRequestComponent,
+       componentProps: {
+        message: message || 'Processo não efetuado' ,
+      },
+      cssClass: 'modal modal-desktop'
+    });
+
+    modal.present()
+    
+    setTimeout(()=>{
+      modal.dismiss()
+    },3000)
+  }
+
+
 }