This commit is contained in:
tiago.kayaya
2021-05-28 08:48:11 +01:00
6 changed files with 160 additions and 13 deletions
@@ -61,7 +61,8 @@ export class ProfileComponent implements OnInit {
componentProps: {
}
});
return await modal.present();
modal.present();
}
+39 -4
View File
@@ -1,26 +1,61 @@
<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">
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>
+46 -6
View File
@@ -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;
}
+72 -1
View File
@@ -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',
@@ -7,9 +10,77 @@ import { Component, OnInit } from '@angular/core';
})
export class PinPage implements OnInit {
constructor() { }
code = []
constructor( private modalController: ModalController,) { }
ngOnInit() {
}
setCode(code: string) {
if(this.code.length < 4) {
this.code.push(code)
} else {
this.clearCode()
}
}
clearCode(){
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)
}
}