Issue:
I am currently working on developing a web application that includes a password change functionality without the use of form submission.
The process I have in mind is as follows:
- Show a Bootstrap modal pop-up
- User enters new password
- Upon clicking 'Ok' in the modal, a fetch request will be triggered to update the database
- Once the API confirms, somehow trigger the password manager dialogue in browsers like Firefox or Chrome
To clarify: The browser password manager dialogue is the popup that appears when submitting a login form.
View an example of the popup here
(source: )
For reference, my technology stack consists of:
- Vue.js (without additional plugins except VueX)
- Bootstrap (including all JS files)
<h1>Traditional Form Submission: (Functional)</h1>
<form action="/login" method="post">
<input type="text" name="username" id="">
<input type="password" name="password" id="">
<button type="submit">Submit</button>
</form>
<h1>My Approach (Simplified):</h1>
<p>Please enter your new password</p>
<input type="text" v-model="password">
<!-- Modal -->
<div class="modal">
<p>Kindly provide your old password for verification</p>
<input type="text" v-model="old">
<button @click="updatePassword">Update</button>
</div>
//Vue function
function updatePassword(){
// Calling the fetch API to update the password
callAPI( '/api/update_password', { old:this.old, password:this.password } )
}
I have explored using a hidden form directed towards a non-functional endpoint that gets submitted via JavaScript.
Reasons against this approach:- Feels like a workaround solution
- Prevents unnecessary network requests
- Creating and removing DOM elements purely for JavaScript purposes may not be considered best practice
- Wondering if there's an existing API solution that I might be overlooking
Thank you in anticipation!
- Stevetec