From a5309a81b1f84b5cf81070b7fd6a68a463ca8ae8 Mon Sep 17 00:00:00 2001 From: Bad Date: Fri, 30 Oct 2020 12:45:44 +0100 Subject: [PATCH] Add a popup explaining what a homeserver is --- package-lock.json | 35 +++++++++++++++++++++++++++++++++++ package.json | 3 ++- src/js/login.js | 27 +++++++++++++++++++-------- src/login.pug | 12 +++++++++++- src/sass/login.sass | 24 +++++++++++++++++++++++- src/sass/tippy.sass | 9 +++++++++ 6 files changed, 99 insertions(+), 11 deletions(-) create mode 100644 src/sass/tippy.sass diff --git a/package-lock.json b/package-lock.json index 228e7ee..915fe72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 8f2ead4..9e95612 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/js/login.js b/src/js/login.js index f16b4fa..a7457da 100644 --- a/src/js/login.js +++ b/src/js/login.js @@ -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}`) }) diff --git a/src/login.pug b/src/login.pug index c12d132..e8408eb 100644 --- a/src/login.pug +++ b/src/login.pug @@ -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 diff --git a/src/sass/login.sass b/src/sass/login.sass index 4d17f25..339d278 100644 --- a/src/sass/login.sass +++ b/src/sass/login.sass @@ -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) diff --git a/src/sass/tippy.sass b/src/sass/tippy.sass new file mode 100644 index 0000000..f2643f3 --- /dev/null +++ b/src/sass/tippy.sass @@ -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