client/src/app/modal/confirm.component.ts

   1 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
   2 import { HtmlRendererService } from '@app/core'
   3 import { ConfirmService } from '@app/core/confirm/confirm.service'
   4 import { POP_STATE_MODAL_DISMISS } from '@app/helpers'
   5 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
   6 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
   7
   8 @Component({
   9   selector: 'my-confirm',
  10   templateUrl: './confirm.component.html',
  11   styleUrls: [ './confirm.component.scss' ]
  12 })
  13 export class ConfirmComponent implements OnInit {
  14   @ViewChild('confirmModal', { static: true }) confirmModal: ElementRef
  15
  16   title = ''
  17   message = ''
  18   expectedInputValue = ''
  19   inputLabel = ''
  20
  21   inputValue = ''
  22   confirmButtonText = ''
  23
  24   isPasswordInput = false
  25
  26   private openedModal: NgbModalRef
  27
  28   constructor (
  29     private modalService: NgbModal,
  30     private html: HtmlRendererService,
  31     private confirmService: ConfirmService
  32   ) { }
  33
  34   ngOnInit () {
  35     this.confirmService.showConfirm.subscribe(
  36       payload => {
  37         // Reinit fields
  38         this.title = ''
  39         this.message = ''
  40         this.expectedInputValue = ''
  41         this.inputLabel = ''
  42         this.inputValue = ''
  43         this.confirmButtonText = ''
  44         this.isPasswordInput = false
  45
  46         const { type, title, message, confirmButtonText } = payload
  47
  48         this.title = title
  49
  50         if (type === 'confirm-expected-input') {
  51           this.inputLabel = payload.inputLabel
  52           this.expectedInputValue = payload.expectedInputValue
  53         } else if (type === 'confirm-password') {
  54           this.inputLabel = $localize`Confirm your password`
  55           this.isPasswordInput = true
  56         }
  57
  58         this.confirmButtonText = confirmButtonText || $localize`Confirm`
  59
  60         this.html.toSafeHtml(message)
  61           .then(message => {
  62             this.message = message
  63
  64             this.showModal()
  65           })
  66       }
  67     )
  68   }
  69
  70   confirm () {
  71     if (this.openedModal) this.openedModal.close()
  72   }
  73
  74   isConfirmationDisabled () {
  75     // No input validation
  76     if (!this.inputLabel || !this.expectedInputValue) return false
  77
  78     return this.expectedInputValue !== this.inputValue
  79   }
  80
  81   showModal () {
  82     this.inputValue = ''
  83
  84     this.openedModal = this.modalService.open(this.confirmModal, { centered: true })
  85
  86     this.openedModal.result
  87         .then(() => {
  88           this.confirmService.confirmResponse.next({ confirmed: true, value: this.inputValue })
  89         })
  90         .catch((reason: string) => {
  91           // If the reason was that the user used the back button, we don't care about the confirm dialog result
  92           if (!reason || reason !== POP_STATE_MODAL_DISMISS) {
  93             this.confirmService.confirmResponse.next({ confirmed: false, value: this.inputValue })
  94           }
  95         })
  96   }
  97 }