Add a popup explaining what a homeserver is
This commit is contained in:
parent
03ea22f7a8
commit
a5309a81b1
6 changed files with 99 additions and 11 deletions
35
package-lock.json
generated
35
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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}`)
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
9
src/sass/tippy.sass
Normal 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
|
||||
Loading…
Reference in a new issue