doneit-web/src/app/pages/login/login.page.html

<ion-content class="text-white">
  <div class="wrapper"  *ngIf="pin ==false">
    <div class="div-logo">
      <img src='assets/images/logo-no-bg.png' alt='logo'>
    </div>
    <h3 class="center text-white">Inicie a sessão</h3>
    <form class="form">
      <p class="form-label text-white">Nome de utilizador</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 type="password" [(ngModel)]="password" name="input-password" ></ion-input>
      </ion-item>        
      <ion-button class="btn-ok-login" fill="clear" expand="block" shape="round" (click)="Login()">Iniciar</ion-button>
    </form>
  </div>

  <div class="main-content  height-100" *ngIf="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="!setPint" class="title">Digite o PIN</ion-title>
      <ion-title *ngIf="setPint" 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="!setPint" class="voltar d-flex align-center justify-center pt-25 clear" (click)="pin=!pin">
        Entrar com senha
      </div>

      <div  *ngIf="setPint" class="voltar d-flex align-center justify-center pt-25 clear" (click)="pin=!pin">
        Limpar
      </div>

    </div>
  </div>

</ion-content>