Complete code for Delete Event Modal used in Open Event Frontend

event-delete-modal.hbs

div class="header">
  {{t 'Are you sure you would like to delete this event?'}}
  <div class="muted small text">
    {{t 'Deleting the event will delete all the data associated with it.'}}
  </div>
</div>
<div class="content">
  <form class="ui form" autocomplete="off" {{action (optional formSubmit) on='submit' preventDefault=true}}>
    <div class="field">
      <div class="label">
        {{t 'Please enter the full name of the event to continue'}}
      </div>
      {{input type='text' name='confirm_name' value=confirmName required=true}}
    </div>
  </form>
</div>
<div class="actions">
  <button type="button" class="ui black button" {{action 'close'}}>
    {{t 'Cancel'}}
  </button>
  <button type="submit" class="ui red button" disabled={{isNameDifferent}} {{action deleteEvent}}>
    {{t 'Delete Event'}}
  </button>
</div>

//Source: https://github.com/fossasia/open-event-frontend/blob/development/app/templates/components/modals/event-delete-modal.hbs

event-delete-modal.js

import Ember from 'ember';
import ModalBase from 'open-event-frontend/components/modals/modal-base';

const { computed } = Ember;

export default ModalBase.extend({
  isSmall         : true,
  confirmName     : '',
  isNameDifferent : computed('confirmName', function() {
    return this.get('confirmName').toLowerCase() !== this.get('eventName').toLowerCase();
  })
});

//Source: https://github.com/fossasia/open-event-frontend/blob/development/app/components/modals/base-modal.js

modal-base.js

import Ember from 'ember';
import UiModal from 'semantic-ui-ember/components/ui-modal';

const { observer, merge, assign, testing } = Ember;

export default UiModal.extend({
  tagName           : 'div',
  classNameBindings : ['isFullScreen:fullscreen', 'isSmall:small', 'isLarge:large'],

  openObserver: observer('isOpen', function() {
    if (this.get('isOpen')) {
      this.$().modal('show');
    } else {
      this.$().modal('hide');
    }
  }),

  close() {
    this.set('isOpen', false);
  },

  open() {
    this.set('isOpen', true);
  },

  actions: {
    close() {
      this.close();
    }
  },

  didRender()  {
    this._super(...arguments);
    try {
      this.$().modal('refresh');
    } catch (ignored) { /* ignored exception */ }
  },


  willInitSemantic(settings) {
    this._super(...arguments);

    const defaultOptions = {
      detachable     : false,
      duration       : testing ? 0 : 200,
      dimmerSettings : {
        dimmerName : `${this.get('elementId')}-modal-dimmer`,
        variation  : 'inverted'
      },
      onHide: () => {
        this.set('isOpen', false);
        if (this.get('onHide')) {
          this.onHide();
        }
      },
      onDeny: () => {
        if (this.get('onDeny')) {
          this.onDeny();
        }
        return true;
      },
      onApprove: () => {
        if (this.get('onApprove')) {
          this.onApprove();
        }
        return true;
      },

      onVisible: () => {
        this.set('isOpen', true);
        this.$().modal('refresh');
        this.$('[data-content]').popup({
          inline: true
        });
        if (this.get('onVisible')) {
          this.onVisible();
        }
      }
    };

    const options = this.get('options') ? merge(defaultOptions, this.get('options')) : defaultOptions;
    assign(settings, options);
  },

  didInitSemantic() {
    if (this.get('isOpen')) {
      this.$().modal('show');
    }
  }
});

//Source: https://github.com/fossasia/open-event-frontend/blob/development/app/components/modals/event-delete-modal.js