Login form feedback

src/js/login.js

@@ -1,4 +1,4 @@
-import {q, ElemJS} from $to_relative "/js/basic.js"
+import {q, ElemJS, ejs} from $to_relative "/js/basic.js"
 
 const password = q("#password")
 const homeserver = q("#homeserver")
@@ -32,6 +32,36 @@ class Username extends ElemJS {
 
 const username = new Username()
 
+class Feedback extends ElemJS {
+	constructor() {
+		super(q("#feedback"))
+		this.loading = false
+		this.loadingIcon = ejs("span").class("loading-icon")
+		this.messageSpan = ejs("span")
+		this.child(this.messageSpan)
+	}
+
+	setLoading(state) {
+		if (this.loading && !state) {
+			this.loadingIcon.remove()
+		} else if (!this.loading && state) {
+			this.childAt(0, this.loadingIcon)
+		}
+		this.loading = state
+	}
+
+	message(content) {
+		if (content) {
+			this.class("form-feedback")
+		} else {
+			this.removeClass("form-feedback")
+		}
+		this.messageSpan.text(content)
+	}
+}
+
+const feedback = new Feedback()
+
 class Form extends ElemJS {
 	constructor() {
 		super(q("#form"))
@@ -55,11 +85,13 @@ class Form extends ElemJS {
 			this.status(`Looking up homeserver... trying ${currentAddress}`)
 			try {
 				// check if we found the actual matrix server
-				const exists = await fetch(`${currentAddress}/_matrix/client/r0`).then(res => res.json())
-				if (exists.errcode === "M_UNRECOGNIZED") {
-					ok = true
-					break
-				}
+				try {
+					const versions = await fetch(`${currentAddress}/_matrix/client/versions`).then(res => res.json())
+					if (Array.isArray(versions.versions)) {
+						ok = true
+						break
+					}
+				} catch (e) {}
 				// find the next matrix server in the chain
 				const root = await fetch(`${currentAddress}/.well-known/matrix/client`).then(res => res.json())
 				let nextAddress = root["m.homeserver"].base_url
@@ -102,12 +134,14 @@ class Form extends ElemJS {
 	}
 
 	status(message) {
-		//TODO: display the message
+		feedback.setLoading(true)
+		feedback.message(message)
 	}
 
 	cancel(message) {
 		this.processing = false
-		//TODO: display the message
+		feedback.setLoading(false)
+		feedback.message(message)
 	}
 }
 

src/js/room-picker.js

@@ -108,10 +108,12 @@ class Room extends ElemJS {
 	getIcon() {
 		const avatar = this.data.state.events.find(e => e.type === "m.room.avatar")
 		if (avatar) {
-			return resolveMxc(avatar.content.url || avatar.content.avatar_url, 32, "crop")
-		} else {
-			return null
+			const url = avatar.content.url || avatar.content.avatar_url
+			if (url) {
+				return resolveMxc(url, 32, "crop")
+			}
 		}
+		return null
 	}
 
 	isDirect() {

src/login.pug

@@ -25,5 +25,8 @@ html
               label(for="homeserver") Homeserver
               input(type="text" name="homeserver" value="matrix.org" placeholder="matrix.org" required)#homeserver
 
+          #feedback
+
           .form-input-container
             input(type="submit" value="Log in")#submit
+

src/sass/login.sass

@@ -34,6 +34,24 @@
   flex-direction: column
   margin: 1em 0
 
+.form-feedback
+  width: 100%
+  margin: -0.5em 0 -0.8em
+
+@keyframes spin
+  0%
+    transform: rotate(0deg)
+  100%
+    transform: rotate(180deg)
+
+.loading-icon
+  display: inline-block
+  background-color: #ccc
+  width: 12px
+  height: 12px
+  margin-right: 6px
+  animation: spin 0.7s infinite
+
 input, button
   font-family: inherit
   font-size: 17px