mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 04:57:52 +00:00
Improve
This commit is contained in:
Peter Maquiran
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { InactivityPage } from './inactivity.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: InactivityPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class InactivityPageRoutingModule {}
|
||||
@@ -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 { InactivityPageRoutingModule } from './inactivity-routing.module';
|
||||
|
||||
import { InactivityPage } from './inactivity.page';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
InactivityPageRoutingModule
|
||||
],
|
||||
declarations: [InactivityPage]
|
||||
})
|
||||
export class InactivityPageModule {}
|
||||
@@ -0,0 +1,88 @@
|
||||
<ion-content class="text-white">
|
||||
|
||||
<div class="main-wrapper">
|
||||
<div class="wrapper" *ngIf="!hasSession && !setPin || loginPreference == 'none' && !setPin ">
|
||||
|
||||
<div class="bg-1 d-flex justify-center align-center">
|
||||
<div class="bg-2 d-flex justify-center align-center">
|
||||
<div class="bg-3 d-flex justify-center align-center">
|
||||
<div class="bg-4 d-flex justify-center align-center">
|
||||
<div class="div-logo">
|
||||
<img src='assets/images/fullLogo.png' alt='logo'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="center text-white">Inicie a sessão</h3>
|
||||
<form class="form">
|
||||
<p class="form-label text-white">Email</p>
|
||||
<ion-item class="form-input">
|
||||
<ion-input type="text" [(ngModel)]="username" name="input-username"></ion-input>
|
||||
</ion-item>
|
||||
<p class="form-label text-white">Palavra-passe</p>
|
||||
<ion-item class="form-input">
|
||||
<ion-input (keyup.enter)="Login()" type="password" [(ngModel)]="password" name="input-password" ></ion-input>
|
||||
</ion-item>
|
||||
<div class="d-flex pt-25">
|
||||
<button class="btn-ok btn-login" fill="clear" expand="block" shape="round" (click)="Login()">Iniciar</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="msg-bottom d-flex">
|
||||
<p class="msg-bottom-p">Uma iniciativa do Gabinete do Presidente da República</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content height-100" *ngIf="setPin || hasSession && loginPreference == 'pin' ">
|
||||
<div class=" 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 *ngIf="hasPin" class="title">Digite o PIN</ion-title>
|
||||
<ion-title *ngIf="!hasPin" class="title">Digite o novo PIN</ion-title>
|
||||
|
||||
<div class="d-flex pt-25 align-center justify-center">
|
||||
<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 *ngIf="hasPin" class="voltar d-flex align-center justify-center pt-25 clear" (click)="loginPreference = 'none'">
|
||||
Entrar com senha
|
||||
</div>
|
||||
|
||||
<div id="clear" class="cy-clear voltar d-flex align-center justify-center pt-25 clear" (click)="clearCode()">
|
||||
Limpar
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</ion-content>
|
||||
@@ -0,0 +1,219 @@
|
||||
@import '~src/function.scss';
|
||||
:host, app-login {
|
||||
ion-content {
|
||||
background: linear-gradient(180deg, #42B9FE 0%, #0782C9 100%) !important;
|
||||
}
|
||||
}
|
||||
ion-content{
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.main-wrapper{
|
||||
background: linear-gradient(180deg, #42B9FE 0%, #0782C9 100%) !important;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
.wrapper{
|
||||
width: 400px;
|
||||
height: auto;
|
||||
padding: 0 !important;
|
||||
margin: auto !important;
|
||||
overflow: auto;
|
||||
}
|
||||
.logo{
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-image: url("/assets/background/auth.svg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bg-1{
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
border-radius: 50%;
|
||||
background: #4cb9f825;
|
||||
margin: auto;
|
||||
.bg-2{
|
||||
width: 225px;
|
||||
height: 225px;
|
||||
overflow: auto;
|
||||
border-radius: 50%;
|
||||
background: #61bdf2b4;
|
||||
margin: auto;
|
||||
.bg-3{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
border-radius: 50%;
|
||||
background: #96d3f8be;
|
||||
margin: auto;
|
||||
.bg-4{
|
||||
width: 175px;
|
||||
height: 175px;
|
||||
overflow: auto;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.918);
|
||||
padding: 15px;
|
||||
margin: auto;
|
||||
|
||||
.bg-4 img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.div-logo{
|
||||
width: 200px !important;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 15px;
|
||||
|
||||
}
|
||||
.div-logo img{
|
||||
width: 100%;
|
||||
}
|
||||
.wrapper ion-input{
|
||||
font-size: 16px;
|
||||
}
|
||||
.wrapper ion-button{
|
||||
font-size: medium;
|
||||
margin-top: 16px;
|
||||
}
|
||||
ion-item{
|
||||
--background: transparent;
|
||||
}
|
||||
.form{
|
||||
width: 300px;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
.form-label{
|
||||
margin: 15px 0 5px 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
.form-input{
|
||||
--background: #fff;
|
||||
--color:#000;
|
||||
border-radius: 22.5px;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
.btn-login{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.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;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.title{
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
padding-top: 112px;
|
||||
margin-left: -30px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image: url("/assets/background/auth.svg");
|
||||
background-size: 686px 674px;
|
||||
background-position: center;
|
||||
background-position-y: 110px;
|
||||
background-repeat: no-repeat;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.voltar{
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.msg-bottom{
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.msg-bottom-p{
|
||||
width: 220px;
|
||||
position: absolute;
|
||||
bottom: 0 !important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 746px){
|
||||
.msg-bottom-p {
|
||||
padding-top: 20px;
|
||||
position: unset !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { InactivityPage } from './inactivity.page';
|
||||
|
||||
describe('InactivityPage', () => {
|
||||
let component: InactivityPage;
|
||||
let fixture: ComponentFixture<InactivityPage>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ InactivityPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(InactivityPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,194 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { AuthService } from 'src/app/services/auth.service';
|
||||
import { UserForm } from 'src/app/models/user.model';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { AlertController } from '@ionic/angular';
|
||||
import { NotificationsService } from 'src/app/services/notifications.service';
|
||||
import crypto from 'crypto-js'
|
||||
import { LocalstoreService } from 'src/app/store/localstore.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-inactivity',
|
||||
templateUrl: './inactivity.page.html',
|
||||
styleUrls: ['./inactivity.page.scss'],
|
||||
})
|
||||
export class InactivityPage implements OnInit {
|
||||
|
||||
logstatus: boolean;
|
||||
username: string = environment.defaultuser;
|
||||
password: string = environment.defaultuserpwd;
|
||||
userattempt: UserForm;
|
||||
code = []
|
||||
|
||||
hasPin: boolean
|
||||
loginPreference: string
|
||||
hasSession = false
|
||||
setPin = false
|
||||
|
||||
constructor(
|
||||
private notificatinsservice: NotificationsService,
|
||||
private router: Router,
|
||||
private authService: AuthService,
|
||||
private toastService: ToastService,
|
||||
public alertController: AlertController,
|
||||
private localstoreService: LocalstoreService
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// clear local storage
|
||||
window.localStorage.clear();
|
||||
|
||||
let userData = this.localstoreService.get('UserData', {})
|
||||
|
||||
const loginPreference = userData?.loginPreference
|
||||
const pin = userData?.PIN
|
||||
|
||||
}
|
||||
|
||||
//Function to validade the login inputs
|
||||
validateUsername() {
|
||||
return (
|
||||
this.username.trim().length > 0
|
||||
);
|
||||
}
|
||||
|
||||
validatePassword() {
|
||||
return (
|
||||
this.password.trim().length > 0
|
||||
);
|
||||
}
|
||||
|
||||
async presentAlert(message: string) {
|
||||
const alert = await this.alertController.create({
|
||||
cssClass: 'my-custom-class',
|
||||
header: 'Mensagem do sistema',
|
||||
message: message,
|
||||
buttons: ['OK']
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
/* loginRocketChat() {
|
||||
|
||||
let postData = {
|
||||
"user": this.username,
|
||||
"password": this.password,
|
||||
}
|
||||
|
||||
this.authService.loginChat(postData).subscribe((res: any) => {
|
||||
console.log(res.data);
|
||||
this.storageService.store(AuthConnstants.AUTH, res.data);
|
||||
console.log('Login to Rocket chat OK');
|
||||
}, (error: any) => {
|
||||
console.log('Network error');
|
||||
this.presentAlert('Network error ' + error);
|
||||
});
|
||||
} */
|
||||
|
||||
getToken() {
|
||||
this.notificatinsservice.getAndpostToken(this.username);
|
||||
}
|
||||
|
||||
async Login() {
|
||||
|
||||
if (this.validateUsername()) {
|
||||
if(this.validatePassword()){
|
||||
|
||||
this.userattempt = {
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
domainName: environment.domain,
|
||||
BasicAuthKey: ""
|
||||
}
|
||||
let attempt = await this.authService.login(this.userattempt)
|
||||
|
||||
if (attempt) {
|
||||
this.authService.loginChat(this.userattempt);
|
||||
this.getToken();
|
||||
this.hasSession = true
|
||||
this.hasPin = false
|
||||
this.setPin = true
|
||||
|
||||
if(!this.hasPin || this.hasPin) {
|
||||
} else {
|
||||
this.router.navigate(['/home/events']);
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.toastService.badRequest('Por favor, insira a sua palavra-passe');
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.toastService.badRequest('Por favor, insira o seu nome de utilizador');
|
||||
}
|
||||
}
|
||||
|
||||
setCode(code: string) {
|
||||
|
||||
if(this.code.length < 4) {
|
||||
this.code.push(code)
|
||||
}
|
||||
|
||||
if(this.code.length == 4) {
|
||||
|
||||
const code = this.code.join('')
|
||||
const encrypted = crypto.SHA1(code)
|
||||
|
||||
if(!this.hasPin) {
|
||||
// alert('storePin')
|
||||
this.storePin()
|
||||
} else {
|
||||
// alert('pinLogin')
|
||||
this.pinLogin()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
clearCode() {
|
||||
this.code =[]
|
||||
}
|
||||
|
||||
pinLogin() {
|
||||
|
||||
const code = this.code.join('')
|
||||
const encrypted = crypto.SHA1(code)
|
||||
|
||||
let userData = this.localstoreService.get('UserData', {})
|
||||
const pin = userData?.PIN
|
||||
|
||||
//if( encrypted == pin) {
|
||||
|
||||
if( encrypted == this.localstoreService.get('UserData', false)) {
|
||||
|
||||
//this.toastService.successMessage()
|
||||
this.router.navigate(['/home/events']);
|
||||
} else {
|
||||
this.toastService.badRequest('Pin incorreto')
|
||||
this.code = []
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
storePin() {
|
||||
|
||||
const code = this.code.join('')
|
||||
const encrypted = crypto.SHA1(code).toString()
|
||||
let userData: Object = this.localstoreService.get('UserData', {})
|
||||
|
||||
userData['PIN'] = encrypted
|
||||
userData['loginPreference'] = 'none'
|
||||
|
||||
this.localstoreService.set('UserData', userData)
|
||||
|
||||
this.localstoreService.set('PIN', encrypted)
|
||||
|
||||
this.router.navigate(['/home/events']);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user