diff --git a/src/app/modals/profile/profile.page.html b/src/app/modals/profile/profile.page.html index 428d7d1f5..df059333e 100644 --- a/src/app/modals/profile/profile.page.html +++ b/src/app/modals/profile/profile.page.html @@ -1,9 +1,82 @@ - - - profile - - + - +
+ +
+
+
Perfil
+
+ + +
+ +
+
+ +
+
+ +
+
Dados Perfil
+
{{loggeduser.RoleDescription}}
+ +
+ + + +
+ + + Terminar sessão + + +
+ +
+ + Alterar PIN + +
+
+ + diff --git a/src/app/modals/profile/profile.page.scss b/src/app/modals/profile/profile.page.scss index e69de29bb..65d3675e1 100644 --- a/src/app/modals/profile/profile.page.scss +++ b/src/app/modals/profile/profile.page.scss @@ -0,0 +1,64 @@ +.profile-content{ + padding: 20px 20px; +} + +.icon{ + font-size: 35px; +} + +.go-back{ + font-family: Roboto; + font-size: 25px; + .icon{ + margin-right: 7px; + } +} + +.profile-pic{ + width: 200px; + height: 200px; + border-radius: 20px; + margin: 0px auto; +} + +.profile-info{ + .label-text{ + font-size: 15px; + font-weight: bold; + color: white; + margin-bottom: 10px; + } + + .user-role{ + background-color: white; + border-radius: 5px; + padding: 12px; + font-family: Roboto; + font-size: 13px; + color: black; + text-align: center; + } + + .email { + margin-top: 15px; + } + +} + +.login-preference{ + margin-top: 44px; + + .preference{ + font-family: Roboto; + font-size: 15px; + margin-bottom: 20px; + font-weight: bold; + } + .checkBox{ + margin-right: 10px; + } +} + +.buttonSize { + width: 100% !important; +} diff --git a/src/app/modals/profile/profile.page.ts b/src/app/modals/profile/profile.page.ts index e24f8f60a..d77d04348 100644 --- a/src/app/modals/profile/profile.page.ts +++ b/src/app/modals/profile/profile.page.ts @@ -1,4 +1,11 @@ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { AnimationController, ModalController } from '@ionic/angular'; +import { User } from 'src/app/models/user.model'; +import { AuthService } from 'src/app/services/auth.service'; +import { FingerprintPage } from 'src/app/shared/fingerprint/fingerprint.page'; +import { PinPage } from 'src/app/shared/pin/pin.page'; +import { LocalstoreService } from 'src/app/store/localstore.service'; @Component({ selector: 'app-profile', @@ -7,9 +14,147 @@ import { Component, OnInit } from '@angular/core'; }) export class ProfilePage implements OnInit { - constructor() { } + loggeduser: User; + userLoginPreference = '' + + constructor(private modalController:ModalController, + private authService: AuthService, + private animationController: AnimationController, + private router: Router, + private localstoreService: LocalstoreService + ) { + + this.loggeduser = authService.ValidatedUser; + + console.log(this.loggeduser.RoleDescription) + + this.checkState() + } + + ngOnInit() {} + + close() { + this.modalController.dismiss(); + } + + 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: { + } + }); + + modal.present(); + } + + + async addFingerprint() { + 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: FingerprintPage, + cssClass: 'model profile-modal', + componentProps: { + } + }); + + modal.present(); + } + + logout() { + // clear local storage + window.localStorage.clear(); + + setTimeout(()=>{ + window.location.pathname = '/' + location.reload(); + }, 1000) + + + } + + LoginPreferenceMethod(type: string) { + + let userData = this.localstoreService.get('UserData', {}) + + if (userData.hasOwnProperty('loginPreference')) { + if (userData.loginPreference != type) { + if (type) { + userData.loginPreference = type + } + } else { + userData.loginPreference = 'none' + } + + } else { + userData.loginPreference = 'none' + } + + + this.localstoreService.set('UserData', userData) + } + + checkState() { + + let userData = this.localstoreService.get('UserData', {}) + + if (userData.hasOwnProperty('loginPreference')) { + this.userLoginPreference = userData.loginPreference + } else { + this.userLoginPreference = '' + } - ngOnInit() { } }