peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-19 21:06:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add pin page

Browse Source
This commit is contained in:
Peter Maquiran
2021-05-27 16:49:09 +01:00
parent f227239023
commit 0405cc603c
4 changed files with 129 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/headers/header-no-search/profile/profile.page.html
+37 -39
View File
@@ -3,48 +3,46 @@
<ion-content class=" bg-blue">
<div class="profile-content">
<div class="d-flex justify-space-between align-center">
<div class="go-back d-flex align-center" (click)="close()">
<ion-icon class="icon" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon> <div>Perfil</div>
</div>
<div class="d-flex justify-space-between align-center">
<div class="go-back d-flex align-center" (click)="close()">
<ion-icon class="icon" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon> <div>Perfil</div>
<div class="d-flex " (click)="close()">
<ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
</div>
</div>
<div >
<div class="d-flex align-center">
<ion-icon class="profile-pic" name="add-circle-outline"></ion-icon>
</div>
</div>
<div class="profile-info">
<div class="label-text">Dados Perfil</div>
<div class="user-role">{{loggeduser.RoleDescription}}</div>
<div class="email">{{loggeduser.Email}}</div>
</div>
<div class="login-preference">
<div class="preference">Preferência Login</div>
<ion-row>
<ion-col class="align-center d-flex">
<div (click)="addPin()">
<ion-checkbox class="checkBox"></ion-checkbox>
Impressão Digital
</div>
<div class="d-flex " (click)="close()">
<ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
</div>
</div>
<div >
<div class="d-flex align-center">
<ion-icon class="profile-pic" name="add-circle-outline"></ion-icon>
</div>
</div>
<div class="profile-info">
<div class="label-text">Dados Perfil</div>
<div class="user-role">{{loggeduser.RoleDescription}}</div>
<div class="email">{{loggeduser.Email}}</div>
</div>
<div class="login-preference">
<div class="preference">Preferência Login</div>
<ion-row>
<ion-col class="align-center d-flex" (click)="addPrin()">
<ion-checkbox class="checkBox"></ion-checkbox>
Impressão Digital
</ion-col>
<ion-col class="align-center d-flex">
<ion-checkbox class="checkBox"></ion-checkbox>
PIN
</ion-col>
</ion-row>
</div>
</ion-col>
<ion-col class="align-center d-flex">
<ion-checkbox class="checkBox"></ion-checkbox>
PIN
</ion-col>
</ion-row>
</div>
</div>
src/app/shared/headers/header-no-search/profile/profile.page.ts
+40 -5
View File
@@ -1,7 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { AnimationController, ModalController } from '@ionic/angular';
import { User } from 'src/app/models/user.model';
import { AuthService } from 'src/app/services/auth.service';
import { PinPage } from 'src/app/shared/pin/pin.page';
@Component({
selector: 'app-profile',
@@ -13,7 +14,9 @@ export class ProfileComponent implements OnInit {
loggeduser: User;
constructor(private modalController:ModalController,
private authService: AuthService) {
private authService: AuthService,
private animationController: AnimationController) {
this.loggeduser = authService.ValidatedUser;
console.log(this.loggeduser.RoleDescription)
@@ -21,12 +24,44 @@ export class ProfileComponent implements OnInit {
ngOnInit() {}
close(){
close() {
this.modalController.dismiss();
}
addPrin(){
alert('Pin')
async addPin() {
const enterAnimation = (baseEl: any) => {
const backdropAnimation = this.animationController.create()
.addElement(baseEl.querySelector('ion-backdrop')!)
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
const wrapperAnimation = this.animationController.create()
.addElement(baseEl.querySelector('.modal-wrapper')!)
.keyframes([
{ offset: 0, opacity: '1', right: '-100%' },
{ offset: 1, opacity: '1', right: '0px' }
]);
return this.animationController.create()
.addElement(baseEl)
.easing('ease-out')
.duration(500)
.addAnimation([backdropAnimation, wrapperAnimation]);
}
const leaveAnimation = (baseEl: any) => {
return enterAnimation(baseEl).direction('reverse');
}
const modal = await this.modalController.create({
enterAnimation,
leaveAnimation,
component: PinPage,
cssClass: 'model profile-modal',
componentProps: {
}
});
return await modal.present();
}
src/app/shared/pin/pin.page.html
+22 -5
View File
@@ -1,9 +1,26 @@
<ion-header>
<ion-toolbar>
<ion-title>pin</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="main-content d-flex flex-column align-center justify-center">
<ion-title class="title">Digite o PIN novo</ion-title>
<div class="terminal">
<div class="d-flex">
<div class="circle">1</div> <div class="circle">2</div> <div class="circle">3</div>
</div>
<div class="d-flex">
<div class="circle">4</div> <div class="circle">5</div> <div class="circle">6</div>
</div>
<div class="d-flex">
<div class="circle">7</div> <div class="circle">8</div> <div class="circle">9</div>
</div>
<div class="d-flex align-center justify-center">
<div class="circle">0</div>
</div>
</div>
</div>
</ion-content>
src/app/shared/pin/pin.page.scss
+30
View File
@@ -0,0 +1,30 @@
: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: 0px;
background-repeat: no-repeat;
}
.circle{
color: black;
width: 95px;
height: 97px;
display: flex;
align-items: center;
justify-content: center;
font-size: 19pt;
}
.title{
padding-top: 32px;
}
.terminal {
padding-top: 112px;
}