2 files changed, 46 insertions, 6 deletions
diff --git a/static/pages/settings/index.css b/static/pages/settings/index.css
index eb718ab..0d6b234 100644
--- a/static/pages/settings/index.css
+++ b/static/pages/settings/index.css
@@ -21,6 +21,7 @@
 }
 
 #image-container {
+	background: #fff;
 	position: relative;
 	border-radius: 100%;
 	width: 100%;
@@ -31,6 +32,7 @@
 }
 
 #image-container img {
+	visibility: hidden;
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -43,6 +45,10 @@
 	user-select: none;
 }
 
+#image-container img[src] {
+	visibility: visible;
+}
+
 #profile-image #edit-container {
 	overflow: unset;
 }
diff --git a/static/pages/settings/index.js b/static/pages/settings/index.js
index c11a3e9..f316e8e 100644
--- a/static/pages/settings/index.js
+++ b/static/pages/settings/index.js
@@ -1,6 +1,8 @@
 import * as sfw from 'sfw';
 const { Div, Img } = sfw.element.native;
 
+import * as api from '../../api/index.js';
+
 import Editable from '../../widgets/editable/index.js';
 
 import icons from '../../icons/index.js';
@@ -8,6 +10,12 @@ import icons from '../../icons/index.js';
 const css = await sfw.css(import.meta.url, './index.css');
 
 export default class SettingsView extends sfw.element.Container {
+	#profile_image
+	#name
+	#birthday
+
+	#profile
+
 	constructor() {
 		super({ css });
 		
@@ -23,23 +31,35 @@ export default class SettingsView extends sfw.element.Container {
 							Div.new({
 								id: 'image-container',
 								children: [
-									Img.new(),
+									this.#profile_image = Img.new(),
 								]
 							}),
 							Div.new({
 								id: 'edit',
-								children: [ icons.edit ]
+								children: [ icons.edit ],
+								onclick: async () => {
+									const uploader = await api.images.upload_to_profile(this.#profile.name);
+									uploader.ondone = async () => {
+										const blob = await fetch(
+											`/api/profile/image/load/${this.#profile.name}`,
+											{cache: 'reload', mode: 'no-cors'}
+										).then(r => r.blob());
+
+										this.#profile_image.src = URL.createObjectURL(blob);
+									};
+									uploader.send()
+								}
 							}),
 						]
 					}),
-					Editable.new({
+					this.#name = Editable.new({
 						title: 'Name',
-						value: 'Nathan Reiner'
+						value: ''
 					}),
-					Editable.new({
+					this.#birthday = Editable.new({
 						title: 'Birthday',
 						type: 'date',
-						value: '2002-08-06',
+						value: '',
 					}),
 					Div.new({
 						id: 'logout',
@@ -57,4 +77,18 @@ export default class SettingsView extends sfw.element.Container {
 			})
 		)
 	}
+
+	set profile(profile) {
+		this.#profile = profile;
+
+		this.#profile_image.src = `/api/profile/image/load/${profile.name}`;
+		this.#profile_image.onerror = () => this.#profile_image.removeAttribute('src');
+
+		this.#name.value = profile.full_name;
+		this.#birthday.value = profile.birthday;
+	}
+
+	get profile() {
+		return this.#profile;
+	}
 }