Merge pull request #164 from ssb-ngi-pointer/style-alias

Style alias page

web/assets/alias-uri.js

@@ -0,0 +1,31 @@
+let hasFocus = true;
+window.addEventListener('blur', () => {
+  hasFocus = false;
+});
+window.addEventListener('focus', () => {
+  hasFocus = true;
+});
+
+const waitingElem = document.getElementById('waiting');
+const failureElem = document.getElementById('failure');
+const anchorElem = document.getElementById('alias-uri');
+
+// Autoredirect to the ssb uri ASAP
+setTimeout(() => {
+  const ssbUri = anchorElem.href;
+  window.location.replace(ssbUri);
+}, 100);
+
+// Redirect to ssb uri or show failure state
+anchorElem.onclick = function handleURI(ev) {
+  ev.preventDefault();
+  const ssbUri = anchorElem.href;
+  waitingElem.classList.remove('hidden');
+  setTimeout(function () {
+    if (hasFocus) {
+      waitingElem.classList.add('hidden');
+      failureElem.classList.remove('hidden');
+    }
+  }, 5000);
+  window.location.replace(ssbUri);
+};

web/handlers/aliases.go

@@ -161,7 +161,7 @@ func (html aliasHTMLResponder) SendConfirmation(alias roomdb.Alias) {
 		RawQuery: queryParams.Encode(),
 	}
 
-	err := html.renderer.Render(html.rw, html.req, "aliases-resolved.html", http.StatusOK, struct {
+	err := html.renderer.Render(html.rw, html.req, "alias.tmpl", http.StatusOK, struct {
 		Alias roomdb.Alias
 
 		SSBURI template.URL

web/handlers/aliases_test.go

@@ -5,6 +5,7 @@ import (
 	"encoding/base64"
 	"encoding/json"
 	"net/http"
+	"net/url"
 	"testing"
 
 	"github.com/stretchr/testify/assert"
@@ -47,6 +48,24 @@ func TestAliasResolve(t *testing.T) {
 
 	a.Equal(testAlias.Name, html.Find("title").Text())
 
+	// ssb-uri in href
+	aliasHref, ok := html.Find("#alias-uri").Attr("href")
+	a.True(ok)
+	aliasURI, err := url.Parse(aliasHref)
+	r.NoError(err)
+
+	a.Equal("ssb", aliasURI.Scheme)
+	a.Equal("experimental", aliasURI.Opaque)
+
+	params := aliasURI.Query()
+	a.Equal("consume-alias", params.Get("action"))
+	a.Equal(testAlias.Name, params.Get("alias"))
+	a.Equal(testAlias.Feed.Ref(), params.Get("userId"))
+	sigData, err := base64.StdEncoding.DecodeString(params.Get("signature"))
+	r.NoError(err)
+	a.Equal(testAlias.Signature, sigData)
+	a.Equal(ts.NetworkInfo.RoomID.Ref(), params.Get("roomId"))
+
 	// now as JSON
 	jsonURL, err := routes.Get(router.CompleteAliasResolve).URL("alias", testAlias.Name)
 	r.NoError(err)
@@ -62,9 +81,9 @@ func TestAliasResolve(t *testing.T) {
 	err = json.NewDecoder(resp.Body).Decode(&ar)
 	r.NoError(err)
 	a.Equal(testAlias.Name, ar.Alias)
-	sigData, err := base64.StdEncoding.DecodeString(ar.Signature)
+	sigData2, err := base64.StdEncoding.DecodeString(ar.Signature)
 	r.NoError(err)
-	a.Equal(testAlias.Signature, sigData)
+	a.Equal(testAlias.Signature, sigData2)
 	a.Equal(testAlias.Feed.Ref(), ar.UserID, "wrong user feed on response")
 	a.Equal(ts.NetworkInfo.RoomID.Ref(), ar.RoomID, "wrong room feed on response")
 }

web/handlers/http.go

@@ -35,7 +35,7 @@ import (
 var HTMLTemplates = []string{
 	"landing/index.tmpl",
 	"landing/about.tmpl",
-	"aliases-resolved.html",
+	"alias.tmpl",
 
 	"invite/consumed.tmpl",
 	"invite/facade.tmpl",

web/i18n/defaults/active.en.toml

@@ -161,6 +161,12 @@ InviteInsertWelcome = "You can claim your invite by inserting your SSB ID below.
 InviteConsumedTitle = "Invite accepted!"
 InviteConsumedWelcome = "You are now a member of this room. If you need a multiserver address to connect to the room, you can copy-paste the one below:"
 
+# alias resolution
+##################
+
+AliasResolutionInstruct = "To connect with them, press the button below which will open a compatible SSB app, if it's installed."
+AliasResolutionConnect = "Connect with"
+
 # ssb uri links
 ###############
 

web/templates/alias.tmpl

@@ -0,0 +1,28 @@
+{{ define "title" }}{{.Alias.Name}}{{ end }}
+{{ define "content" }}
+<div class="flex flex-col justify-center items-center self-center max-w-lg">
+  <p id="welcome" class="text-center mt-8 italic"><strong>{{.Alias.Name}}</strong> is a member of this SSB room server.</p>
+  <p class="text-center mt-3">{{i18n "AliasResolutionInstruct"}}</p>
+
+  <a
+    id="alias-uri"
+    href="{{.SSBURI}}"
+    class="mt-8 self-center px-4 h-8 shadow rounded flex flex-row justify-center items-center text-gray-100 bg-purple-500 hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50"
+    >{{i18n "AliasResolutionConnect"}} {{.Alias.Name}}</a>
+
+  <p id="waiting" class="hidden mt-8 animate-pulse text-green-500">{{i18n "SSBURIOpening"}}</p>
+
+  <div id="failure" class="hidden mt-8">
+    <p class="text-center font-bold">{{i18n "SSBURIFailureWelcome"}}</p>
+    <div class="flex flex-col justify-center items-center mt-8">
+      <a
+        href="https://manyver.se"
+        class="shadow rounded flex flex-row justify-center items-center px-4 h-8 text-gray-100 bg-purple-500 hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50"
+        >{{i18n "SSBURIFailureInstallManyverse"}}</a>
+    </div>
+  </div>
+
+  <div class="mb-10"></div>
+  <script src="/assets/alias-uri.js"></script>
+</div>
+{{end}}

web/templates/aliases-resolved.html

@@ -1,9 +0,0 @@
-{{ define "title" }}{{.Alias.Name}}{{ end }}
-{{ define "content" }}
-<div>
-  <h1>{{.Alias.Name}}</h1>
-
-  <pre>{{.SSBURI}}</pre>
-  <a href="{{.SSBURI}}">Consume</a>
-</div>
-{{end}}