skouter/components/settings.vue

<template>
<div class="page">
<h2>Settings</h2>

<section class="form inputs">
<h3>Avatar</h3>
<img src="/assets/image/mintberry.jpg" alt="avatar">
<button>Upload</button>
</section>

<section class="form inputs">
<h3>Branch Header</h3>
<span>Letterhead as appears on PDFs.</span>
<img src="/assets/image/mintberry.jpg" alt="avatar">
<button>Upload</button>
</section>

<section class="form inputs special">
<h3>Login</h3>
<label for="">First Name</label>
<input type="text">
<label for="">Last Name</label>
<input type="text">
<label for="">Email</label>
<input type="text">
<label for="">New Password</label>
<input type="text">
<button @click="check">Save</button>
</section>

<Dialog v-if="ready" @close="() => ready = false">
<h3>Confirm your current password.</h3>
<input type="text">
<button>Save</button>
</Dialog>

</div>
</template>

<script>
import Dialog from "./dialog.vue"

function save() {
}

function check() {
	this.ready = true
}

export default {
	components: {
		Dialog
	},
	methods: {
		save, check
	},
	data() {
		return { ready: false }
	}
}
</script>