Angular - SignUp Flux

<!-- <app-header class="nav-header" [backButton]="true" styles="background: white !important;">
</app-header>


<div class="signup-content">
  <mat-vertical-stepper [linear]="true" #stepper>
    <mat-step [stepControl]="accessForm" [editable]='(accountCreated | async)?.id == null'>
      <ng-template matStepLabel>Acesso</ng-template>
      <mat-accordion class="example-headers-align">
        <form [formGroup]="accessForm" id='accssForm' (ngSubmit)="saveAccess()">
          <mat-expansion-panel [expanded]="signupStep === 0" (opened)="signupStep = 0" hideToggle="true">
            <mat-expansion-panel-header>
              <mat-panel-title>
                Conta
              </mat-panel-title>
              <mat-panel-description>
                <mat-icon>account_circle</mat-icon>
              </mat-panel-description>
            </mat-expansion-panel-header>

            <div class="container-input-personal">
              <mat-form-field appearance="outline">
                <mat-label>Apelido da conta</mat-label>
                <input matInput formControlName="name" required minlength="2" maxlength="100">
              </mat-form-field>

              <mat-form-field appearance="outline">
                <mat-label>Email da conta</mat-label>
                <input matInput formControlName="email" type="email" email minlength="5" maxlength="256" required>
              </mat-form-field>

              <mat-form-field appearance="outline" formGroupName="phone">
                <mat-label>Telefone</mat-label>
                <input matInput formControlName="number" mask="(00) 00000-0000" required>
              </mat-form-field>
            </div>
            <mat-action-row>
              <button mat-button color="primary" type="button" (click)="signupStep = signupStep + 1">Próximo</button>
            </mat-action-row>
          </mat-expansion-panel>

          <mat-expansion-panel [expanded]="signupStep === 1" (opened)="signupStep = 1" hideToggle="true">
            <mat-expansion-panel-header>
              <mat-panel-title>
                Acesso
              </mat-panel-title>
              <mat-panel-description>
                <mat-icon>lock</mat-icon>
              </mat-panel-description>
            </mat-expansion-panel-header>

            <div class="container-input" formGroupName="login">
              <mat-form-field appearance="outline">
                <mat-label>Nome completo</mat-label>
                <input matInput formControlName="name" required minlength="2" maxlength="100">
              </mat-form-field>

              <mat-form-field appearance="outline">
                <mat-label>Senha</mat-label>
                <input matInput type="password" autocomplete="off" formControlName="password" required minlength="8"
                  pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$">
                <button type="button" class='tooltip-icon' mat-icon-button matSuffix
                  matTooltip="A senha deve conter pelo menos oito caracteres, pelo menos uma letra maiúscula, uma letra minúscula, um número e um caractere especial"
                  [matTooltipPosition]="position.value" matTooltipClass="example-tooltip-red">
                  <mat-icon>info</mat-icon>
                </button>
              </mat-form-field>

              <mat-form-field appearance="outline">
                <mat-label>Confirmar Senha</mat-label>
                <input matInput type="password" autocomplete="off" formControlName="repassword" required minlength="8"
                  pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$">
                <mat-error
                  *ngIf="accessForm.get('login.repassword').touched && accessForm.get('login.repassword').hasError('notSame')">
                  Senhas não conferem
                </mat-error>
              </mat-form-field>
            </div>
            <mat-action-row>
              <button mat-button color="warn" type="button" (click)="signupStep = signupStep - 1">Voltar</button>
            </mat-action-row>
          </mat-expansion-panel>
        </form>
      </mat-accordion>
      <button class="btn-next" mat-stroked-button color="primary" type='submit' form='accssForm'>
        Pagamento
      </button>
    </mat-step> -->

<!-- Payment -->
<!-- <mat-step [stepControl]="creditCardForm" [editable]='(accountCreated | async)?.id == null'>
      <ng-template matStepLabel>Pagamento</ng-template>
      <mat-accordion class="example-headers-align">
        <form id='ccForm' #ccForm [formGroup]="creditCardForm" (ngSubmit)="saveSignup(ccForm)">
          <mat-expansion-panel [expanded]="paymentStep === 0" (opened)="paymentStep = 0" hideToggle="true">
            <mat-expansion-panel-header>
              <mat-panel-title>
                Pagamento
              </mat-panel-title>
              <mat-panel-description>
                <mat-icon>credit_card</mat-icon>
              </mat-panel-description>
            </mat-expansion-panel-header>

            <div class="container-input-payment">
              <mat-form-field appearance="outline">
                <mat-label>Titular do cartão</mat-label>
                <input matInput formControlName='full_name' data-iugu="full_name" required autocomplete="off">
              </mat-form-field>

              <div class="container-document">
                <mat-form-field formGroupName="document" id="select-document-type" appearance="outline">
                  <mat-label>Tipo documento</mat-label>
                  <mat-select formControlName="type" (selectionChange)="setDocumentType($event.value)" required>
                    <mat-option *ngFor="let docType of documentType" [value]="docType.value">
                      {{docType.viewValue}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>

                <mat-form-field formGroupName="document" id="select-document-number" appearance="outline">
                  <mat-label>Número</mat-label>
                  <input matInput formControlName="number" [mask]="documentMask" required>
                </mat-form-field>
              </div>

              <mat-form-field appearance="outline">
                <mat-label>Número do cartão</mat-label>
                <input matInput formControlName='number' mask='0000 0000 0000 0000' placeholder='0000 0000 0000 0000'
                  data-iugu="number" required autocomplete="off" #cardNumber>
                <img id='card-brand' *ngIf='getCardBrand(cardNumber.value) != false'
                  [src]="getCardBrand(cardNumber.value)" />
              </mat-form-field>

              <div id="container-cvv-expiration">
                <mat-form-field appearance="outline">
                  <mat-label>CVV</mat-label>
                  <input matInput formControlName='verification_value' mask='000' placeholder='000' maxlength="3"
                    minlength="3" data-iugu="verification_value" required autocomplete="off">
                </mat-form-field>

                <mat-form-field appearance="outline">
                  <mat-label>Data de vencimento</mat-label>
                  <input matInput formControlName='expiration' data-iugu="expiration" maxlength="5" minlength="5"
                    [dropSpecialCharacters]="false" mask='00/00' required autocomplete="off" placeholder="MM/AA">
                </mat-form-field>
              </div>
            </div>
            <mat-action-row>
              <button mat-button color="primary" type="button" (click)="paymentStep = paymentStep + 1">Próximo</button>
            </mat-action-row>
          </mat-expansion-panel>


          <mat-expansion-panel [expanded]="paymentStep === 1" (opened)="paymentStep = 1" hideToggle="true">
            <mat-expansion-panel-header>
              <mat-panel-title>Endereço</mat-panel-title>
              <mat-panel-description>
                <mat-icon>map</mat-icon>
              </mat-panel-description>
            </mat-expansion-panel-header>
            <div class="container-input-address" formGroupName="address">
              <mat-form-field appearance="outline">
                <mat-label>CEP</mat-label>
                <input matInput formControlName='zipCode' mask='00000-000' (ngModelChange)='getCEP(cep.value)'
                  debounce='1000' required #cep>
              </mat-form-field>

              <mat-form-field appearance="outline">
                <mat-label>País</mat-label>
                <input matInput formControlName='country' required minlength="2" maxlength="150">
              </mat-form-field>

              <mat-form-field appearance="outline">
                <mat-label>Cidade</mat-label>
                <input matInput formControlName='city' required minlength="2" maxlength="150">
              </mat-form-field>

              <mat-form-field appearance="outline">
                <mat-label>Bairro</mat-label>
                <input matInput formControlName='district' required minlength="2" maxlength="150">
              </mat-form-field>

              <mat-form-field appearance="outline">
                <mat-label>Estado</mat-label>
                <input matInput formControlName='state' required minlength="2" maxlength="150">
              </mat-form-field>

              <mat-form-field appearance="outline">
                <mat-label>Logradouro</mat-label>
                <input matInput formControlName='streetName' required minlength="2" maxlength="150"
                  [value]='(address$ | async)?.logradouro'>
              </mat-form-field>

              <mat-form-field appearance="outline">
                <mat-label>Número</mat-label>
                <input matInput type="number" formControlName='streetNumber' required minlength="0" maxlength="6"
                  pattern="^[0-9]*$">
              </mat-form-field>

              <mat-form-field appearance="outline">
                <mat-label>Complemento</mat-label>
                <input matInput formControlName='complement' placeholder="Complemento" maxlength="256">
              </mat-form-field>
            </div>
            <mat-action-row>
              <button mat-button color="warn" type="button" (click)="paymentStep = paymentStep - 1">Voltar</button>
            </mat-action-row>
          </mat-expansion-panel>
        </form>
      </mat-accordion>
      <button class="btn-next" mat-stroked-button color="primary" type="submit" form="ccForm">
        Finalização
      </button>
    </mat-step> -->
<!-- /Payment -->

<!-- <mat-step>
      <ng-template matStepLabel matStepperIcon="done">Finalização</ng-template>
      <mat-card class="finish-card" *ngIf='(accountCreated | async)?.id == null'>
        <mat-progress-bar mode="indeterminate" color='accent' *ngIf='loading$ | async'></mat-progress-bar>
        <mat-card-header>
          <mat-card-title>Finalização</mat-card-title>
        </mat-card-header>
        <div class=container-icon>
          <mat-icon>check_circle_outline</mat-icon>
        </div>
        <mat-card-content id='finish-card-content'>
          <h2>Falta pouco!</h2>
          <p>
            Clique em 'Criar conta' para finalizar seu cadastro.
          </p>
          <div id=''>
            <mat-checkbox [(ngModel)]="statusTerms">
              Aceito os <a [href]='termsLink' target="_blank">termos de uso</a> e o <a [href]='agreementLink'
                target="_blank">contrato de
                serviço</a>
            </mat-checkbox>
          </div>
        </mat-card-content>
        <mat-card-actions>
          <div class=container-btn-finish>
            <button id='btn-finish-create-account' mat-flat-button color="primary" (click)="createAccount()"
              [disabled]="(loading$ | async) || !statusTerms">Criar
              conta</button>
            <button id='btn-finish-back' mat-stroked-button color="warn" matStepperPrevious
              [disabled]="(loading$ | async)">Voltar</button>
          </div>
        </mat-card-actions>
      </mat-card>

      <mat-card class="finish-card" *ngIf='(accountCreated | async)?.id != null'>
        <mat-card-header>
          <mat-card-title>Finalização</mat-card-title>
        </mat-card-header>
        <div class=container-icon-created>
          <mat-icon>check_circle_outline</mat-icon>
        </div>
        <mat-card-content id='success-card-content'>
          <h2>Bem vindo! Sua conta foi criada com sucesso.</h2>
          <div id='success-info'>
            <p>
              Um email com um link de confirmação da criação da sua conta foi enviado para você.
              Após confirmá-lo, você já pode usar sua conta.
            </p>
            <p>
              <strong>
                Atenção: Guarde as credenciais de acesso fornecidas no final dessa página.
                Você precisará para realizar login no KIOSK.
              </strong>
            </p>
          </div>
        </mat-card-content>
        <mat-card-actions>
          <div class=container-btn-finish>
            <button mat-stroked-button color="primary" (click)="showAccountDetails()">Ver dados de acesso do
              Kiosk</button>
          </div>
        </mat-card-actions>
      </mat-card>
    </mat-step>
    <ng-template matStepperIcon="edit">
      <mat-icon>done</mat-icon>
    </ng-template>
  </mat-vertical-stepper>
</div> -->