FingerPrint fixe

src/app/shared/fingerprint/fingerprint-routing.module.ts

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

src/app/shared/fingerprint/fingerprint.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 { FingerprintPageRoutingModule } from './fingerprint-routing.module';
+
+import { FingerprintPage } from './fingerprint.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FingerprintPageRoutingModule
+  ],
+  declarations: [FingerprintPage]
+})
+export class FingerprintPageModule {}

src/app/shared/fingerprint/fingerprint.page.html

@@ -0,0 +1,60 @@
+
+<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" (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" (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" (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" (click)="setCode('0')">0</div>
+      </div>
+      
+    </div>
+
+    <div (click)="clearCode()" class="d-flex align-center justify-center pt-25 clear">
+      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/fingerprint/fingerprint.page.scss

@@ -0,0 +1,75 @@
+@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;
+    display: flex;
+    justify-content: center;
+    background-image: url("/assets/background/auth.svg");
+    background-size: 686px 674px;
+    background-position: center;
+    background-position-y: 78px;
+    background-repeat: no-repeat;
+}
+
+
+.circle{
+    color: white;
+    width: 70px;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 19pt;
+    background: #44b5ea;
+    border-radius: 56px;
+    margin-left: 30px;
+    margin-bottom: 15px;
+}
+
+.title{
+    padding-top: 32px;
+}
+
+.terminal {
+    padding-top: 112px;
+    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/fingerprint/fingerprint.page.spec.ts

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

src/app/shared/fingerprint/fingerprint.page.ts

@@ -0,0 +1,102 @@
+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';
+import { FingerprintAIO } from '@ionic-native/fingerprint-aio';
+
+@Component({
+  selector: 'app-fingerprint',
+  templateUrl: './fingerprint.page.html',
+  styleUrls: ['./fingerprint.page.scss'],
+})
+export class FingerprintPage implements OnInit {
+
+  constructor( private modalController: ModalController,
+    private faio: FingerprintAIO) { 
+  }
+
+  ngOnInit() {
+  }
+
+  login() {
+    this.faio.show({
+      clientId: 'Fingerprint-Demo',
+      clientSecret: 'password', //Only necessary for Android
+      disableBackup:true,  //Only for Android(optional)
+      localizedFallbackTitle: 'Use Pin', //Only for iOS
+      localizedReason: 'Please authenticate' //Only for iOS
+    })
+    .then((FingerPrintHash: any) => {
+      console.log(FingerPrintHash)
+
+      const storedFinderPrint =  localStorage.getItem('FingerPrintHash')
+      if(FingerPrintHash == storedFinderPrint) {
+
+      }
+    })
+    .catch((error: any) => {
+      console.log(error)
+    });
+  }
+
+  close() {
+    /* console.log(this.isEventEdited); */
+    this.modalController.dismiss();
+  }
+
+   async save() {
+
+    this.faio.show({
+      clientId: 'Fingerprint-Demo',
+      clientSecret: 'password', //Only necessary for Android
+      disableBackup:true,  //Only for Android(optional)
+      localizedFallbackTitle: 'Use Pin', //Only for iOS
+      localizedReason: 'Please authenticate' //Only for iOS
+    })
+    .then((FingerPrintHash: any) => {
+      this.successMessage()
+      localStorage.setItem('FingerPrintHash', FingerPrintHash)
+    })
+    .catch((error: any) => {
+      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)
+  }
+
+}