example-code/javascript-vue/js/panel/settings.vue

<template>
<div>
	<h2>Settings</h2>
	<section class="change-name-pane">
		<h4>Name</h4>
		<input :value="user.name" name="name" id="changed_name" type="text">
		<button @click="changeName">Save <loading src="../../images/loading-white.svg" alt=""></loading></button>
		<span></span>
	</section>
	<section class="change-email-pane">
		<h4>Email</h4>
		<input :value="user.email" name="email" type="text" id="changed_email">
		<button @click="changeEmail">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
		<span></span>
	</section>
	<section class="change-password-pane">
		<h4>Change Password</h4>
		<h5>Current Password</h5><input name="current_passowrd" id="current_password" type="password">
		<h5>New Password</h5><input id="new_password" name="password" type="password">
		<h5>Confirm Password</h5><input id="confirm_password" name="confirm_passowrd" type="password">
		<button @click="changePassword">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
		<span></span>
	</section>
</div>
</template>

<script>
import Loading from '../icons/loading.vue'

function changeName() {
	let name = document.getElementById('changed_name').value
	let info = document.querySelector('.change-name-pane span')
	let pane = document.querySelector('.change-name-pane')

	pane.classList.add('loading')
	pane.classList.remove('error')
	fetch("/panel/change-name", {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token},
		body: JSON.stringify({'name': name}),
	}).then(response => {
		if (response.ok) {
			pane.classList.add('completed')
			info.textContent = 'Completed'
		} else {
			pane.classList.add('error')
			info.textContent = 'Error: ' + response.status
		}

		pane.classList.remove('loading')
	})
}

function changeEmail() {
	let email = document.getElementById('changed_email').value
	let info = document.querySelector('.change-email-pane span')
	let pane = document.querySelector('.change-email-pane')

	pane.classList.add('loading')
	pane.classList.remove('error')
	fetch("/panel/change-email", {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token},
		body: JSON.stringify({'email': email}),
	}).then(response => {
		if (response.ok) {
			pane.classList.add('completed')
			info.textContent = 'Verification link sent'
		} else {
			pane.classList.add('error')
			info.textContent = 'Error: ' + response.status
		}

		pane.classList.remove('loading')
	})
}

function changePassword() {
	let info = document.querySelector('.change-password-pane span')
	let pane = document.querySelector('.change-password-pane')

	pane.classList.add('loading')
	pane.classList.remove('error')
	fetch("/panel/change-password", {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token},
		body: JSON.stringify({'current_password':
		document.getElementById('current_password').value,
		'password': document.getElementById('new_password').value,
		'password_confirmation':
		document.getElementById('confirm_password').value}),
	}).then(response => {
		response.json().then(data => {console.log(data)})
		if (response.ok) {
			pane.classList.add('completed')
			info.textContent = 'Completed'
		} else {
			pane.classList.add('error')
			info.textContent = 'Error: ' + response.status
		}

		pane.classList.remove('loading')
	})
}

export default {
	components: {Loading,},
	methods: {
		changePassword, changeName, changeEmail
	},
	props: ['user', 'token']
}
</script>