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

<ion-content class="text-white">

  <div class="main-wrapper">


    <div class="wrapper"  *ngIf="SessionStore.user.LoginPreference == 'Password' && SessionStore.hasPin || SessionStore.user.LoginPreference == null  && SessionStore.hasPin ">

      <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 d-flex flex-column  height-100 width"  *ngIf="!SessionStore.hasPin || SessionStore.hasPin && SessionStore.user.LoginPreference == 'Pin' " >
      
      <div class="div-top-header">

        <div class="div-logo">
          <img src='assets/images/logo-bg-removebg-preview.png' alt='logo'>
        </div>

      </div>

      <div class=" align-center justify-center d-flex flex-column width-100">
        <div *ngIf="SessionStore.hasPin" class="title">Digite o PIN</div>
        <div *ngIf="!SessionStore.hasPin" class="title">Digite o novo PIN</div>


        <div class="terminal">
          <div class="d-flex pt-25 align-center justify-center pin-4">
            <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="d-flex align-center justify-center">
            <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 align-center justify-center">
            <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 align-center justify-center">
            <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 *ngIf="SessionStore.hasPin" class="voltar d-flex align-center justify-center pt-25 clear" >
            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>

  </div>


</ion-content>