Change email address on front end

Question

Some similar posts on here already but I'm still struggling. My code looks fine as far as I can tell? Page just reloads with no changes to the email (other fields change fine). I'm missing something right?

<form method="post" accept-charset="UTF-8" enctype="multipart/form-data" class="js-validate">
{{ getCsrfInput() }}
<input type="hidden" name="action" value="users/saveUser">
<input type="hidden" name="redirect" value="{{ craft.request.url ~ '/saved' }}">
<input type="hidden" name="userId" value="{{ currentUser.id }}">
<input type="hidden" name="password" value="{{ currentUser.password }}">

<h1>{{ "My Profile"|translate }}</h1>
<ol>
    <li>
        <label for="firstName" class="hidden">{{ "First Name"|translate }}<sup>*</sup></label>
        <input type="text" name="firstName" id="firstName" placeholder="{{ "First Name"|translate }}" value="{{ currentUser.firstName }}" required>
    </li>
    <li>
        <label for="lastName" class="hidden">{{ "Last Name"|translate }}<sup>*</sup></label>
        <input type="text" name="lastName" id="lastName" placeholder="{{ "Last Name"|translate }}" value="{{ currentUser.lastName }}" required>
    </li>
    <li>
        {% if currentUser.unverifiedEmail %}
            <div class="well">
                <h5>{{ "Email verification pending"|translate }}</h5>
                <p>{{ "We sent a verification email to"|translate }} <a href="{{ currentUser.unverifiedEmail }}">{{ currentUser.unverifiedEmail }}</a>. {{ "Until this email is verified, we’ll continue to use your previous email"|translate }} (<a href="{{ currentUser.email }}">{{ currentUser.email }}</a>).</p>
            </div>
        {% else %}
            <label for="email" class="hidden">Email<sup>*</sup></label>
            <input type="email" name="email" id="email" placeholder="{{ "Email"|translate }}" value="{{ currentUser.email }}" required>
        {% endif %}
    </li>
    <li>
        <label for="userTownCity" class="hidden">{{ "Town/City"|translate }}</label>
        <input type="text" name="fields[userTownCity]" id="userTownCity" placeholder="{{ "Town/City"|translate }}" value="{{ currentUser.userTownCity }}">
    </li>
    <li>
        <label for="userPhoneNumber" class="hidden">{{ "Phone Number"|translate }}</label>
        <input type="text" name="fields[userPhoneNumber]" id="userPhoneNumber" placeholder="{{ "Phone Number"|translate }}" value="{{ currentUser.userPhoneNumber }}">
    </li>
</ol>
<input type="submit" value="Save Changes" class="button button--fw">

Answer 1

Thanks to billythekid's suggestion, adding a password field creates an elevated session, and solves my problem.

<input type="password" name="password" placeholder="Password" required>

Actually I don't think it's that intrusive, and it's a good security step that should generally be encouraged when making any profile edits.