Add a popup explaining what a homeserver is
continuous-integration/drone/pr Build is failing Details
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Bad 2020-10-30 12:45:44 +01:00
parent 03ea22f7a8
commit a5309a81b1
6 changed files with 99 additions and 11 deletions

35
package-lock.json generated
View File

@ -1095,6 +1095,11 @@
"to-fast-properties": "^2.0.0"
}
},
"@popperjs/core": {
"version": "2.5.3",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.3.tgz",
"integrity": "sha512-RFwCobxsvZ6j7twS7dHIZQZituMIDJJNHS/qY6iuthVebxS3zhRY+jaC2roEKiAYaVuTcGmX6Luc6YBcf6zJVg=="
},
"@types/color-name": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@ -2092,8 +2097,30 @@
"integrity": "sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==",
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.18.0-next.0",
"has-symbols": "^1.0.1",
"object-keys": "^1.1.1"
},
"dependencies": {
"es-abstract": {
"version": "1.18.0-next.1",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
"integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
"requires": {
"es-to-primitive": "^1.2.1",
"function-bind": "^1.1.1",
"has": "^1.0.3",
"has-symbols": "^1.0.1",
"is-callable": "^1.2.2",
"is-negative-zero": "^2.0.0",
"is-regex": "^1.1.1",
"object-inspect": "^1.8.0",
"object-keys": "^1.1.1",
"object.assign": "^4.1.1",
"string.prototype.trimend": "^1.0.1",
"string.prototype.trimstart": "^1.0.1"
}
}
}
}
}
@ -3643,6 +3670,14 @@
"process": "~0.11.0"
}
},
"tippy.js": {
"version": "6.2.7",
"resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.2.7.tgz",
"integrity": "sha512-k+kWF9AJz5xLQHBi3K/XlmJiyu+p9gsCyc5qZhxxGaJWIW8SMjw1R+C7saUnP33IM8gUhDA2xX//ejRSwqR0tA==",
"requires": {
"@popperjs/core": "^2.4.4"
}
},
"to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",

View File

@ -12,7 +12,8 @@
"author": "",
"license": "AGPL-3.0-only",
"dependencies": {
"browserify": "^17.0.0"
"browserify": "^17.0.0",
"tippy.js": "^6.2.7"
},
"devDependencies": {
"@babel/core": "^7.11.1",

View File

@ -1,3 +1,4 @@
const tippy = require("tippy.js");
const {q, ElemJS, ejs} = require("./basic.js")
const {S_RE_DOMAIN, S_RE_IPV6, S_RE_IPV4} = require("./re.js")
@ -52,6 +53,16 @@ class Username extends ElemJS {
class Homeserver extends ElemJS {
constructor() {
super(q("#homeserver"));
this.tippy = tippy.default(q("#homeserver-question"), {
content: q("#homeserver-popup-template").innerHTML,
allowHTML: true,
interactive: true,
interactiveBorder: 10,
trigger: "mouseenter",
theme: "carbon",
arrow: tippy.roundArrow,
})
}
suggest(value) {
@ -85,7 +96,7 @@ class Feedback extends ElemJS {
this.removeClass("form-feedback")
this.removeClass("form-error")
if (content) this.class("form-feedback")
if(isError) this.class("form-error")
if (isError) this.class("form-error")
this.messageSpan.text(content)
}
@ -112,7 +123,7 @@ class Form extends ElemJS {
let domain
try {
domain = await this.findHomeserver(this.homeserver.getServer())
} catch(e) {
} catch (e) {
return this.cancel(e.message)
}
@ -149,16 +160,16 @@ class Form extends ElemJS {
//Protects from servers sending us on a redirect loop
maxDepth--
if (maxDepth <= 0) throw new Error(`Failed to look up homeserver, maximum search depth reached`)
//Normalise the address
if (!address.match(/^https?:\/\//)) {
console.warn(`${address} doesn't specify the protocol, assuming https`)
address = "https://" + address
}
address = address.replace(/\/*$/, "")
this.status(`Looking up homeserver... trying ${address}`)
// Check if we found the actual matrix server
try {
const versionsReq = await fetch(`${address}/_matrix/client/versions`)
@ -166,11 +177,11 @@ class Form extends ElemJS {
const versions = await versionsReq.json()
if (Array.isArray(versions.versions)) return address
}
} catch(e) {}
} catch (e) {}
// Find the next matrix server in the chain
const root = await fetch(`${address}/.well-known/matrix/client`).then(res => res.json()).catch(e => {
console.error(e)
console.error(e)
throw new Error(`Failed to look up server ${address}`)
})

View File

@ -22,11 +22,21 @@ html
input(name="password" autocomplete="current-password" type="password" required)#password
.form-input-container
label(for="homeserver") Homeserver
.homeserver-label
label(for="homeserver") Homeserver
span#homeserver-question (What's this?)
input(type="text" name="homeserver" placeholder="matrix.org")#homeserver
#feedback
.form-input-container
input(type="submit" value="Log in")#submit
template#homeserver-popup-template
.homeserver-popup
p
| Homeserver is the place where your account lives.
| It's usually the website where you registered.
p
| Need help finding a homeserver?
a(href='#') Click here

View File

@ -1,5 +1,6 @@
@use "./base"
@use "./colors.sass" as c
@use "./colors" as c
@use "./tippy"
.main
justify-content: center
@ -41,6 +42,27 @@
.form-error
color: red
#homeserver-question
font-size: 0.6em
padding-left: 0.2em
.homeserver-label
display: flex
justify-content: space-between
align-items: flex-end
.homeserver-popup
p
margin: 0.2em
a
&, &:hover, &:active
color: white
text-decoration: none
&:hover
color: #f00 //Placeholder
@keyframes spin
0%
transform: rotate(0deg)

9
src/sass/tippy.sass Normal file
View File

@ -0,0 +1,9 @@
@use "../../node_modules/tippy.js/dist/tippy.css"
@use "../../node_modules/tippy.js/dist/svg-arrow.css"
@use "./colors.sass" as c
.tippy-box[data-theme~="carbon"]
background-color: c.$milder
border: 2px solid c.$divider
.tippy-svg-arrow
fill: c.$milder