skouter/components/settings.vue

<template>
<div class="page">
<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 => uploadAvatar(e.target.files[0])"
/>
<button>Upload</button>
<label class="error">{{avatarError}}</label>
</section>

<section class="form inputs">
<h3>Letterhead</h3>
<canvas class="displayer" width="200" height="200" ref="letterhead"></canvas>
<input type="file"
@change="e => uploadLetterhead(e.target.files[0])"
/>
<button>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(blob) {
    changeAvatar(blob)?.then(() => {
        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')}
	        })
        })
    })
    
    
    avatar.value.toBlob(b => {
       // uploadAvatar(b)
    })
}

function uploadLetterhead(blob) {
    changeLetterhead(blob)?.then(() => {
        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')}
	        })
        })
    })
    
    
    letterhead.value.toBlob(b => {
       // uploadAvatar(b)
    })
}


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 = ''
    
    return 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: 200, resizeHeight: 200, resizeQuality: 'medium'}).
    then((img) => {
        letterhead.value.getContext("2d").drawImage(img, 0, 0, 200, 200)
    })
}

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

</script>