[FEAT] - Notiflix Confirm component to add an input / content

[Florian Testu]

First of all thanks for your library, it is very clean and easy to use.

Is your feature request related to a problem? Please describe.

I would like to modify the Notiflix Confirm component to add an input, or even modify it to add content, in order to transform it a bit in the style of confirming a password.

Describe the solution you'd like

Give the possibility to add content to the component, either by giving directly html or add parameters giving the possibility to add input with placeHolder and for the answer return a json with for each input the answer something like that.

Additional context

Another implementation that could be nice is the addition of the parameter.
backOverlayClickToClose parameter to the Confirm component it would be cool.

I thank you in advance and await your return.

[Furkan]

Hi @ftestu,

I am not sure that I understand the expectations completely.

So, the Confirm module includes 3 types of confirmation boxes. The Show, Ask, and Prompt.

If Ask and/or Prompt methods are not covering your expectations, at least you can use the Show method, and modify the "message" argument a bit as you wanted. (the "plainText" option should be "false")

An example approach can be like below.

const confirmMessage = `<div classname="js-nx-confirm-content">
    <h1>Sol Lucet Omnibus</h1>
    <input classname="js-nx-confirm-input" type="text" placeholder="Memento te hominem esse" />
    <p>Qui timide rogat docet negare</p>
  </div>`;

Notiflix.Confirm.show(
  'Title',
  confirmMessage,
  'Okay',
  'Cancel',
  () => {
    // Okay button callback
  },
  () => {
    // Cancel button callback
  },
  {
    plainText: false,
    messageMaxLength: confirmMessage.length,
  },
);

---

In addition, I noted "backOverlayClickToClose" option for the future updates. I will update this ticket when it has been added.

Thanks,
Furkan.

[Florian Testu]

Hi thanks for your answer,

Your solution is good you can add what you want in you modal.

Using your example, here is what I wanted to do:

askNewPassword(): Promise<any> {
		const confirmMessage = `
		<div classname="js-nx-confirm-content">
			<input id="newPassword" classname="js-nx-confirm-input" type="password" placeholder="` + this.langService.get('PASSWORD_NEW') + `"/>
			<input id="newPasswordConfirm" classname="js-nx-confirm-input" type="password" placeholder="` + this.langService.get('PASSWORD_CONFIRM') + `"/>
	  	</div>`;
		  let tmp = new Promise((resolve, error) => { 
			Notiflix.Confirm.show(
				this.langService.get('PASSWORD_MUST_CHANGE'),
			confirmMessage,
			'Okay',
			'Cancel',
			() => {
				this.password_new.value = (<HTMLInputElement>document.getElementById("newPassword")).value
				this.password_new.confirm_value = (<HTMLInputElement>document.getElementById("newPasswordConfirm")).value
				this.check_new_password();
				resolve(true);
			},
			() => {
				resolve(false);
			},
			{
			  plainText: false,
			  messageMaxLength: confirmMessage.length,
			},
		  );
		})

		return tmp.then((res) => res).catch((err) => err);
	}

I don't know if there is a better way to do it but this example works only disadvantage is that it does not allow the use of ngModel but with the recovery of the id it works as well.

Small question, does adding a message in this style work on prompt/ask?
Because i try it and doesn't work for me.

Thank you again for your answer.

[Furkan]

Hi @ftestu,

I did not work with Angular before; therefore I can not say which way is the best to not...
In addition, the Prompt and Ask modules have their own built-in inputs, so in this case, the Show method is the only option I guess.

Thanks in advance.
Furkan.