Add a popup explaining what a homeserver is

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",

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",

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}`)
 		})
 

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 
 

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)

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