<p>I copied and modified the built-in craft <code>AccountSettingsForm.js</code> and placed it in my own plugin to test and it seems to work great. You will need to adapt it for your own use of course. It is currently triggered on elements that have a class 'btn confirm', and just prints 'Password Confirmed!' on success to the alert window.</p>

<p>Create a button in your plugins CP template file:</p>

<pre><code>&lt;input type="submit" class="btn confirm small submit" value="{{ 'Confirm'|t }}" &gt;
</code></pre>

<p>And include the new js file <code>PasswordConfirmation.js</code>, which is:</p>

<pre><code>(function($) {

PasswordConfirmation = Garnish.Base.extend(
{
    isCurrent: null,

    $lockBtns: null,
    $currentPasswordInput: null,
    $spinner: null,

    modal: null,

    init: function(isCurrent)
    {
        this.isCurrent = isCurrent;
        this.$lockBtns = $('.btn.confirm');
        this.addListener(this.$lockBtns, 'click', 'showCurrentPasswordForm');
    },

    showCurrentPasswordForm: function()
    {
        if (!this.modal)
        {
            var $form = $('&lt;form id="verifypasswordmodal" class="modal fitted"/&gt;').appendTo(Garnish.$bod),
                $body = $('&lt;div class="body"&gt;&lt;p&gt;'+Craft.t(this.isCurrent ? 'Please enter your current password.' : 'Please enter your password.')+'&lt;/p&gt;&lt;/div&gt;').appendTo($form),
                $passwordWrapper = $('&lt;div class="passwordwrapper"/&gt;').appendTo($body),
                $buttons = $('&lt;div class="buttons right"/&gt;').appendTo($body),
                $cancelBtn = $('&lt;div class="btn"&gt;'+Craft.t('Cancel')+'&lt;/div&gt;').appendTo($buttons),
                $submitBtn = $('&lt;input type="submit" class="btn submit" value="'+Craft.t('Continue')+'" /&gt;').appendTo($buttons);

            this.$currentPasswordInput = $('&lt;input type="password" class="text password fullwidth"/&gt;').appendTo($passwordWrapper);
            this.$spinner = $('&lt;div class="spinner hidden"/&gt;').appendTo($buttons);
            this.modal = new Garnish.Modal($form);

            new Craft.PasswordInput(this.$currentPasswordInput, {
                onToggleInput: $.proxy(function($newPasswordInput) {
                    this.$currentPasswordInput = $newPasswordInput;
                }, this)
            });

            this.addListener($cancelBtn, 'click', function() {
                this.modal.hide();
            });

            this.addListener($form, 'submit', 'submitCurrentPassword');
        }
        else
        {
            this.modal.show();
        }

        // Auto-focus the password input
        if (!Garnish.isMobileBrowser(true))
        {
            setTimeout($.proxy(function() {
                this.$currentPasswordInput.focus();
            }, this), 100);
        }
    },

    submitCurrentPassword: function(ev)
    {
        ev.preventDefault();

        var password = this.$currentPasswordInput.val();

        if (password)
        {
            this.$spinner.removeClass('hidden');

            var data = {
                password: password
            };

            Craft.postActionRequest('users/verifyPassword', data, $.proxy(function(response, textStatus)
            {
                this.$spinner.addClass('hidden');

                if (textStatus == 'success')
                {
                    if (response.success)
                    {
                        alert('Password Confirmed!');

                        this.modal.hide();

                    }
                    else
                    {
                        Garnish.shake(this.modal.$container);
                    }
                }

            }, this));
        }
    }

});

new PasswordConfirmation;

})(jQuery)
</code></pre>

<p>The next step would be to make it more generic so that it returns true, or executes a callback method, so that the result function can be customized per-use, and perhaps improve the instantiation so that you can pass it your own jquery selectors.</p>

CC BY-SA 3.0
2014-10-19T21:18:55.673Z
2014-10-19T21:18:55.673Z
Douglas McDonald
<p>While logged into the Control Panel, you can edit your account information. When you try to change your email address or password, Craft asks you to enter your current password (for security reasons).</p>

<p><strong>Is it possible to borrow this password confirmation security feature?</strong></p>

<p>I've built a form which is very powerful and contains sensitive data. I want the user to be triple-sure that they want to submit the form... Forcing users to re-enter their password seems like a good way to minimize accidents.</p>

<p><img src="https://i.sstatic.net/C0NwM.png" alt="enter image description here"></p>

CC BY-SA 3.0
2014-10-19T19:52:32.643Z
I'm not sure, but I do see the javascript function that controls this in `AccountSettingsForm.js` line 12 - `Craft.AccountSettingsForm` `showCurrentPasswordForm`. I don't see why you couldn't replicate this. I would like to use this also.
Douglas McDonald
CC BY-SA 3.0
2014-10-19T20:08:29.713Z
Looking at the js class a little closer it looks like the `init` and `showCurrentPasswordForm` methods are pretty generic and would work as-is, however, `submitCurrentPassword` success clause is tied to the email and password fields specifically and would need to be rewritten. It would be nice to write something generic that could be applied anywhere.
Douglas McDonald
<plugin-development><password><modal>
How can I use the password confirmation modal on other forms?
# How can I use the password confirmation modal on other forms?

(Asked by: username_0 on 2014-10-19)

While logged into the Control Panel, you can edit your account information. When you try to change your email address or password, Craft asks you to enter your current password (for security reasons).

**Is it possible to borrow this password confirmation security feature?**

I've built a form which is very powerful and contains sensitive data. I want the user to be triple-sure that they want to submit the form... Forcing users to re-enter their password seems like a good way to minimize accidents.

![enter image description here](https://i.sstatic.net/C0NwM.png)

**Tags:** plugin-development, password, modal
> **Comments:**
> **username_1**: I'm not sure, but I do see the javascript function that controls this in `AccountSettingsForm.js` line 12 - `Craft.AccountSettingsForm` `showCurrentPasswordForm`. I don't see why you couldn't replicate this. I would like to use this also.  
> **username_1**: Looking at the js class a little closer it looks like the `init` and `showCurrentPasswordForm` methods are pretty generic and would work as-is, however, `submitCurrentPassword` success clause is tied to the email and password fields specifically and would need to be rewritten. It would be nice to write something generic that could be applied anywhere.  

---

## 1 answers

### Answer by username_1 on 2014-10-19. Score: 1

I copied and modified the built-in craft AccountSettingsForm.js and placed it in my own plugin to test and it seems to work great. You will need to adapt it for your own use of course. It is currently triggered on elements that have a class 'btn confirm', and just prints 'Password Confirmed!' on success to the alert window.
Create a button in your plugins CP template file:


And include the new js file PasswordConfirmation.js, which is:
(function($) {

PasswordConfirmation = Garnish.Base.extend(
{
    isCurrent: null,

    $lockBtns: null,
    $currentPasswordInput: null,
    $spinner: null,

    modal: null,

    init: function(isCurrent)
    {
        this.isCurrent = isCurrent;
        this.$lockBtns = $('.btn.confirm');
        this.addListener(this.$lockBtns, 'click', 'showCurrentPasswordForm');
    },

    showCurrentPasswordForm: function()
    {
        if (!this.modal)
        {
            var $form = $('').appendTo(Garnish.$bod),
                $body = $(''+Craft.t(this.isCurrent ? 'Please enter your current password.' : 'Please enter your password.')+'').appendTo($form),
                $passwordWrapper = $('').appendTo($body),
                $buttons = $('').appendTo($body),
                $cancelBtn = $(''+Craft.t('Cancel')+'').appendTo($buttons),
                $submitBtn = $('').appendTo($buttons);

            this.$currentPasswordInput = $('').appendTo($passwordWrapper);
            this.$spinner = $('').appendTo($buttons);
            this.modal = new Garnish.Modal($form);

            new Craft.PasswordInput(this.$currentPasswordInput, {
                onToggleInput: $.proxy(function($newPasswordInput) {
                    this.$currentPasswordInput = $newPasswordInput;
                }, this)
            });

            this.addListener($cancelBtn, 'click', function() {
                this.modal.hide();
            });

            this.addListener($form, 'submit', 'submitCurrentPassword');
        }
        else
        {
            this.modal.show();
        }

        // Auto-focus the password input
        if (!Garnish.isMobileBrowser(true))
        {
            setTimeout($.proxy(function() {
                this.$currentPasswordInput.focus();
            }, this), 100);
        }
    },

    submitCurrentPassword: function(ev)
    {
        ev.preventDefault();

        var password = this.$currentPasswordInput.val();

        if (password)
        {
            this.$spinner.removeClass('hidden');

            var data = {
                password: password
            };

            Craft.postActionRequest('users/verifyPassword', data, $.proxy(function(response, textStatus)
            {
                this.$spinner.addClass('hidden');

                if (textStatus == 'success')
                {
                    if (response.success)
                    {
                        alert('Password Confirmed!');

                        this.modal.hide();

                    }
                    else
                    {
                        Garnish.shake(this.modal.$container);
                    }
                }

            }, this));
        }
    }

});

new PasswordConfirmation;

})(jQuery)

The next step would be to make it more generic so that it returns true, or executes a callback method, so that the result function can be customized per-use, and perhaps improve the instantiation so that you can pass it your own jquery selectors.


---

