skouter/components/settings.vue

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

<section class="form inputs">
<h3>Avatar</h3>
<canvas class="displayer" width="200" height="200" ref="avatar"></canvas>
<input type="file"
@change="e => changeAvatar(e.target.files[0])"
/>
<button @click="uploadAvatar">Upload</button>
<label class="error">{{avatarError}}</label>
</section>

<section class="form inputs letterhead">
<h3>Letterhead</h3>
<canvas class="displayer" height="200" ref="letterhead"></canvas>
<input type="file"
@change="e => changeLetterhead(e.target.files[0])"
/>
<button @click="uploadLetterhead">Upload</button>
<label class="error">{{avatarError}}</label>
</section>

<section class="form inputs special">
<h3>Profile</h3>
<label for="">First Name</label>
<input type="text">
<label for="">Last Name</label>
<input type="text">
<label for="">NMLS ID</label>
<input type="text">
<label for="">Branch ID</label>
<input type="text">

<select id="" name="" >
	<option value="usa">USA</option>
	<option value="canada">Canada</option>
</select>

<button @click="check">Save</button>
</section>

<section class="form inputs special">
<h3>Login</h3>
<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 to save changes.</h3>
<input type="text">
<button>Confirm</button>
</Dialog>

</div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue"
import Dialog from "./dialog.vue"

let avatar = ref(null) // the canvas element
let letterhead = ref(null) // the canvas element
let ready = ref(false)
let avatarChanged = ref(false)
let avatarError = ref('')
let letterheadError = ref('')
const props = defineProps(['user', 'token'])
const emit = defineEmits(['updateAvatar', 'updateLetterhead'])

function save() {
}

function check() {
	ready.value = true
}

function uploadAvatar() {
    avatar.value.toBlob(b => {
        fetch(`/api/user/avatar`,
	    {method: 'POST',
	        body: b,
    		headers: {
        	"Accept": "application/json",
        	"Authorization": `Bearer ${props.token}`,
    		},
        }).then(resp => {
            if (resp.ok) {emit('updateAvatar')}
        })
    })
}

function uploadLetterhead() {
    letterhead.value.toBlob(b => {
        fetch(`/api/user/letterhead`,
	    {method: 'POST',
	        body: b,
    		headers: {
        	"Accept": "application/json",
        	"Authorization": `Bearer ${props.token}`,
    		},
        }).then(resp => {
            if (resp.ok) {emit('updateLetterhead')}
        })
    })
}


function changeAvatar(blob) {
    const validTypes = ['image/jpeg', 'image/png']
    
    if (!validTypes.includes(blob.type)) {
        avatarError.value = 'Image must be JPEG of PNG format'
        return
    }
    
    avatarError.value = ''
    
    createImageBitmap(blob,
    {resizeWidth: 200, resizeHeight: 200, resizeQuality: 'medium'}).
    then((img) => {
        avatar.value.getContext("2d").drawImage(img, 0, 0, 200, 200)
    })
}

function changeLetterhead(blob) {
    const validTypes = ['image/jpeg', 'image/png']
    
    if (!validTypes.includes(blob.type)) {
        letterheadError.value = 'Image must be JPEG of PNG format'
        return
    }
    
    letterheadError.value = ''
    
    return createImageBitmap(blob,
    {resizeWidth: 400, resizeHeight: 200, resizeQuality: 'medium'}).
    then((img) => {
        letterhead.value.getContext("2d").drawImage(img, 0, 0, 400, 200)
    })
}

watch(props.user, (u) => {
    if (props.user.avatar) {
       changeAvatar(props.user.avatar) 
    }
    
    if (props.user.letterhead) {
       changeLetterhead(props.user.letterhead) 
    }
}, {immediate: true})

</script>