add profile settings to backend and add image loader

3 files changed, 15 insertions, 10 deletions

diff --git a/static/pages/image-viewer/index.css b/static/pages/image-viewer/index.css
index a1a9b76..4b1eb9b 100644
--- a/static/pages/image-viewer/index.css
+++ b/static/pages/image-viewer/index.css
@@ -8,7 +8,7 @@
 	padding: 10px;
 }
 
-#container img {
+#container sfw-image {
 	margin: auto;
 	max-width: 700px;
 	width: 100%;
diff --git a/static/pages/image-viewer/index.js b/static/pages/image-viewer/index.js
index d28b3e1..0cf8598 100644
--- a/static/pages/image-viewer/index.js
+++ b/static/pages/image-viewer/index.js
@@ -1,6 +1,8 @@
 import * as sfw from 'sfw';
 const { Div, Img } = sfw.element.native;
 
+import Image from '../../widgets/image/index.js';
+
 const css = await sfw.css(import.meta.url, './index.css')
 
 export default class ImageViewer extends sfw.element.Container {
@@ -9,19 +11,16 @@ export default class ImageViewer extends sfw.element.Container {
 	constructor() {
 		super({ css });
 
+		this.onnewer = () => {}
+		this.onolder = () => {}
+
 		this.body.append(
 			this.#container = Div.new({ id: 'container' })
 		);
 	}
 
-	add(url) {
-		let image;
-		this.#container.append(
-			image = Img.new({
-				className: 'hidden',
-				src: url,
-				onload: () => image.classList.remove('hidden')
-			}));
+	add(id) {
+		this.#container.append(Image.new({ id }))
 	}
 
 	clear() {
diff --git a/static/pages/settings/index.js b/static/pages/settings/index.js
index f316e8e..cc985a5 100644
--- a/static/pages/settings/index.js
+++ b/static/pages/settings/index.js
@@ -54,12 +54,14 @@ export default class SettingsView extends sfw.element.Container {
 					}),
 					this.#name = Editable.new({
 						title: 'Name',
-						value: ''
+						value: '',
+						onupdate: () => this.#update(),
 					}),
 					this.#birthday = Editable.new({
 						title: 'Birthday',
 						type: 'date',
 						value: '',
+						onupdate: () => this.#update(),
 					}),
 					Div.new({
 						id: 'logout',
@@ -78,6 +80,10 @@ export default class SettingsView extends sfw.element.Container {
 		)
 	}
 
+	#update() {
+		api.profile.set(this.#name.value, this.#birthday.value);
+	}
+
 	set profile(profile) {
 		this.#profile = profile;