Fetch and upload letterhead from settings view

components/app.vue

@@ -30,6 +30,7 @@ v-else-if="active == 3"
 :user="user"
 :token="token"
 @updateAvatar="updateAvatar"
+@updateLetterhead="updateLetterhead"
 v-else-if="active == 4" />
 <sign-out :user="user" v-else-if="active == 5" />
 </template>
@@ -113,12 +114,16 @@ function getUser() {
         
         this.user.avatar = b
         return getLetterhead(token)
-	}).then (result => {
+	}).then(b => {
-		if (!result || !result.length) return // Exit if token is invalid
+	    const validTypes = ['image/jpeg', 'image/png']
-		this.user = result[0]
+        if (!validTypes.includes(b.type) || b.size <= 1) {
-		if (this.user.letterhead) return
+            fetch("/assets/image/empty-letterhead.jpg").
-		
+            then(r => r.blob()).then( a => this.user.letterhead = a )
-		return getAvatar(token)
+            return
+        }
+        
+        this.user.letterhead = b
 	})
 
 }
@@ -150,7 +155,7 @@ function updateAvatar() {
 
 function updateLetterhead() {
 	const token = getCookie("skouter")
-    getAvatar(token).then(b => this.user.letterhead = b)
+    getLetterhead(token).then(b => this.user.letterhead = b)
 }
 
 function getFees() {
@@ -233,6 +238,8 @@ export default {
 		refreshToken,
 		updateAvatar,
 		getAvatar,
+		updateLetterhead,
+		getLetterhead,
 	},
 	data() {
 		return {

components/settings.vue

@@ -4,7 +4,7 @@
 
 <section class="form inputs">
 <h3>Avatar</h3>
-<canvas class="displayer" width="200" height="200" ref="canvas"></canvas>
+<canvas class="displayer" width="200" height="200" ref="avatar"></canvas>
 <input type="file"
 @change="e => uploadAvatar(e.target.files[0])"
 />
@@ -14,9 +14,12 @@
 
 <section class="form inputs">
 <h3>Letterhead</h3>
-<span>Header as appears on PDFs.</span>
+<canvas class="displayer" width="200" height="200" ref="letterhead"></canvas>
-<img src="/assets/image/mintberry.jpg" alt="avatar">
+<input type="file"
+@change="e => uploadLetterhead(e.target.files[0])"
+/>
 <button>Upload</button>
+<label class="error">{{avatarError}}</label>
 </section>
 
 <section class="form inputs special">
@@ -60,13 +63,14 @@
 import { ref, watch, onMounted } from "vue"
 import Dialog from "./dialog.vue"
 
-let avatar = ref(null)
+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('')
-const canvas = ref(null)
+let letterheadError = ref('')
 const props = defineProps(['user', 'token'])
-const emit = defineEmits(['updateAvatar'])
+const emit = defineEmits(['updateAvatar', 'updateLetterhead'])
 
 function save() {
 }
@@ -77,7 +81,7 @@ function check() {
 
 function uploadAvatar(blob) {
     changeAvatar(blob)?.then(() => {
-        canvas.value.toBlob(b => {
+        avatar.value.toBlob(b => {
             fetch(`/api/user/avatar`,
 		    {method: 'POST',
 		        body: b,
@@ -92,13 +96,34 @@ function uploadAvatar(blob) {
     })
     
     
-    canvas.value.toBlob(b => {
+    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']
     
@@ -109,18 +134,38 @@ function changeAvatar(blob) {
     
     avatarError.value = ''
     
-    avatar.value = blob
     return createImageBitmap(blob,
     {resizeWidth: 200, resizeHeight: 200, resizeQuality: 'medium'}).
     then((img) => {
-        avatar.value = img
+        avatar.value.getContext("2d").drawImage(img, 0, 0, 200, 200)
-        canvas.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) return
+    if (props.user.avatar) {
-    changeAvatar(props.user.avatar)
+       changeAvatar(props.user.avatar) 
+    }
+    
+    if (props.user.letterhead) {
+       changeLetterhead(props.user.letterhead) 
+    }
 }, {immediate: true})
 
 </script>

skouter.go

@@ -1067,7 +1067,7 @@ func setLetterhead(w http.ResponseWriter, db *sql.DB, r *http.Request) {
 	}
 	if !isValidType { http.Error(w, "Invalid file type.", 422); return }
 
-	err = insertAvatar(db, claims.Id, img)
+	err = insertLetterhead(db, claims.Id, img)
 	if err != nil { http.Error(w, "Could not insert.", 500); return }
 }