Add login GUI #9

Manually merged
cadence merged 10 commits from login into princess 2020-10-21 09:07:38 +00:00
4 changed files with 68 additions and 11 deletions
Showing only changes of commit 735ca360c8 - Show all commits

View file

@ -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 password = q("#password")
const homeserver = q("#homeserver") const homeserver = q("#homeserver")
@ -32,6 +32,36 @@ class Username extends ElemJS {
const username = new Username() 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 { class Form extends ElemJS {
constructor() { constructor() {
super(q("#form")) super(q("#form"))
@ -55,11 +85,13 @@ class Form extends ElemJS {
this.status(`Looking up homeserver... trying ${currentAddress}`) this.status(`Looking up homeserver... trying ${currentAddress}`)
try { try {
// check if we found the actual matrix server // check if we found the actual matrix server
const exists = await fetch(`${currentAddress}/_matrix/client/r0`).then(res => res.json()) try {
if (exists.errcode === "M_UNRECOGNIZED") { const versions = await fetch(`${currentAddress}/_matrix/client/versions`).then(res => res.json())
ok = true if (Array.isArray(versions.versions)) {
break ok = true
} break
}
} catch (e) {}
// find the next matrix server in the chain // find the next matrix server in the chain
const root = await fetch(`${currentAddress}/.well-known/matrix/client`).then(res => res.json()) const root = await fetch(`${currentAddress}/.well-known/matrix/client`).then(res => res.json())
let nextAddress = root["m.homeserver"].base_url let nextAddress = root["m.homeserver"].base_url
@ -102,12 +134,14 @@ class Form extends ElemJS {
} }
status(message) { status(message) {
//TODO: display the message feedback.setLoading(true)
feedback.message(message)
} }
cancel(message) { cancel(message) {
this.processing = false this.processing = false
//TODO: display the message feedback.setLoading(false)
feedback.message(message)
} }
} }

View file

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

View file

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

View file

@ -34,6 +34,24 @@
flex-direction: column flex-direction: column
margin: 1em 0 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 input, button
font-family: inherit font-family: inherit
font-size: 17px font-size: 17px