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

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

  <div class="main-wrapper">

    <div class="main-content d-flex flex-column  width"   >
      
      <div class="div-top-header">

        <div class="div-logo">
          <img style="max-width: 90px;" *ngIf="ThemeService.currentTheme == 'default' " src='assets/images/logo-bg-removebg-preview.png' alt='logo'>
          <img style="max-width: 80px;" *ngIf="ThemeService.currentTheme == 'gov' " src='assets/images/theme/gov/governoangola_A.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.hide]="code.length == 4"  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.hide]="code.length == 4" 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.hide]="code.length == 4" 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.hide]="code.length == 4" class="d-flex align-center justify-center">
            <div class="circle" (click)="setCode('0')">0</div>
          </div>


          <div class="voltar cursor-pointer d-flex align-center justify-center pt-25 clear" (click)="enterWithPasswordButton()" >
            Entrar com senha
          </div>
  
          <div id="clear" class="cy-clear voltar cursor-pointer d-flex align-center justify-center pt-25 clear" (click)="clearCode()">
            Limpar
          </div>

        </div>

      </div>

    </div>

  </div>


</ion-content>