Merge pull request #31 from ssb-ngi-pointer/prettify-members

Prettify members page

web/handlers/admin/allow_list.go

@@ -65,6 +65,10 @@ func (h allowListH) overview(rw http.ResponseWriter, req *http.Request) (interfa
 	if err != nil {
 		return nil, err
 	}
+	// Reverse the slice to provide recent-to-oldest results
+	for i, j := 0, len(lst)-1; i < j; i, j = i+1, j-1 {
+		lst[i], lst[j] = lst[j], lst[i]
+	}
 
 	return map[string]interface{}{
 		csrf.TemplateTag: csrf.TemplateField(req),

web/handlers/admin/allow_list_test.go

@@ -31,7 +31,7 @@ func TestAllowListEmpty(t *testing.T) {
 	assertLocalized(t, html, []localizedElement{
 		{"#welcome", "AdminAllowListWelcome"},
 		{"title", "AdminAllowListTitle"},
-		{"#allowListCount", "ListCountPlural"},
+		{"#allowListCount", "MemberCountPlural"},
 	})
 }
 
@@ -123,10 +123,10 @@ func TestAllowList(t *testing.T) {
 	assertLocalized(t, html, []localizedElement{
 		{"#welcome", "AdminAllowListWelcome"},
 		{"title", "AdminAllowListTitle"},
-		{"#allowListCount", "ListCountPlural"},
+		{"#allowListCount", "MemberCountPlural"},
 	})
 
-	a.EqualValues(html.Find("#theList").Children().Length(), 3)
+	a.EqualValues(html.Find("#theList li").Length(), 3)
 
 	lst = admindb.ListEntries{
 		{ID: 666, PubKey: refs.FeedRef{ID: bytes.Repeat([]byte{1}, 32), Algo: "one"}},
@@ -139,10 +139,10 @@ func TestAllowList(t *testing.T) {
 	assertLocalized(t, html, []localizedElement{
 		{"#welcome", "AdminAllowListWelcome"},
 		{"title", "AdminAllowListTitle"},
-		{"#allowListCount", "ListCountSingular"},
+		{"#allowListCount", "MemberCountSingular"},
 	})
 
-	elems := html.Find("#theList").Children()
+	elems := html.Find("#theList li")
 	a.EqualValues(elems.Length(), 1)
 
 	// check for link to remove confirm link

web/i18n/defaults/active.en.toml

@@ -13,17 +13,25 @@ AuthFallbackTitle = "The place of last resort"
 AuthSignIn = "Sign in"
 AuthSignOut = "Sign out"
 
+GenericConfirm = "Yes"
+GenericGoBack = "Back"
+
 AdminDashboardWelcome = "Welcome to your dashboard"
 AdminDashboardTitle = "Room Admin Dashboard"
 
-AdminAllowListTitle = "List of room members"
-AdminAllowListWelcome = "Here you can see all the members of the room and ways to add new ones or remove exising ones."
-AdminAllowListAdd = "Add member"
-AdminAllowListRemoveConfirmWelcome = "Just to verify that this is the member you want removed"
+AdminAllowListTitle = "Members"
+AdminAllowListWelcome = "Here you can see all the members of the room and ways to add new ones (by their SSB ID) or remove exising ones."
+AdminAllowListAdd = "Add"
+AdminAllowListRemove = "Remove"
+AdminAllowListRemoveConfirmWelcome = "Are you sure you want to remove this member? They will lose their alias, if they have one."
 AdminAllowListRemoveConfirmTitle = "Confirm member removal"
 
 NavAdminDashboard = "Admin Dasboard"
 
+[MemberCount]
+description = "Number of members"
+one = "1 member"
+other =  "{{.Count}} members"
 
 [ListCount]
 description = "generic list"

web/templates/admin/allow-list-remove-confirm.tmpl

@@ -1,14 +1,31 @@
 {{ define "title" }}{{i18n "AdminAllowListRemoveConfirmTitle"}}{{ end }}
 {{ define "content" }}
-<h1 id="welcome">{{i18n "AdminAllowListRemoveConfirmWelcome"}}</h1>
+    <div class="flex flex-col justify-center items-center h-64">
 
-<pre id="verify">{{.Entry.PubKey.Ref}}</pre>
+      <span
+        id="welcome"
+        class="text-center"
+      >{{i18n "AdminAllowListRemoveConfirmWelcome"}}</span>
 
+      <pre
+        id="verify"
+        class="my-4 font-mono truncate max-w-full text-lg text-gray-700"
+      >{{.Entry.PubKey.Ref}}</pre>
 
-<form id="confirm" action="{{urlTo "admin:allow-list:remove"}}" method="POST">
-  {{ .csrfField }}
-  <input type="hidden" name="id" value={{.Entry.ID}}>
-  <input type="submit" value="{{i18n "Confirm"}}">
-</form>
+      <form id="confirm" action="{{urlTo "admin:allow-list:remove"}}" method="POST">
+        {{ .csrfField }}
+        <input type="hidden" name="id" value={{.Entry.ID}}>
+        <div class="grid grid-cols-2 gap-4">
+          <a
+            href="javascript:history.back()"
+            class="px-4 h-8 shadow rounded flex flex-row justify-center items-center bg-white align-middle text-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-opacity-50"
+          >{{i18n "GenericGoBack"}}</a>
 
-{{end}}
+          <button
+            type="submit"
+            class="shadow rounded px-4 h-8 text-gray-100 bg-pink-600 hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-opacity-50"
+          >{{i18n "GenericConfirm"}}</button>
+        </div>
+      </form>
+    </div>
+{{end}}

web/templates/admin/allow-list.tmpl

@@ -1,23 +1,48 @@
 {{ define "title" }}{{i18n "AdminAllowListTitle"}}{{ end }}
 {{ define "content" }}
-<div class="page-header">
-  <h1 id="welcome">{{i18n "AdminAllowListWelcome"}}</h1>
-</div>
-<div class="row">
-    <div class="col-md-12">
-    <p id="allowListCount">{{i18npl "ListCount" .Count}}</p>
-    <ul id="theList">
-    {{range .Entries}}
-      <li>{{.PubKey.Ref}} (<a href="{{urlTo "admin:allow-list:remove:confirm" "id" .ID}}">Remove</a>) </li>
-    {{end}}
-    </ul>
-    </div>
-    
-    <h3>{{i18n "AdminAllowListAdd"}}</h3>
-    <form id="add-entry" action="{{urlTo "admin:allow-list:add"}}" method="POST">
-      {{ .csrfField }}
-      <input type="text" name="pub_key">
-      <input type="submit" value="{{i18n "AdminAllowListAdd"}}">
-    </form>
-</div> <!-- /row -->
-{{end}}
+      <h1
+        class="text-3xl tracking-tight font-black text-black mt-2 mb-4"
+      >{{i18n "AdminAllowListTitle"}}</h1>
+
+      <p id="welcome" class="my-4">{{i18n "AdminAllowListWelcome"}}</p>
+
+      <p
+        id="allowListCount"
+        class="text-lg font-bold my-2"
+      >{{i18npl "MemberCount" .Count}}</p>
+
+      <ul id="theList" class="divide-y pb-4">
+        <form
+          id="add-entry"
+          action="{{urlTo "admin:allow-list:add"}}"
+          method="POST"
+        >
+          {{ .csrfField }}
+          <div class="flex flex-row items-center h-12">
+            <input
+              type="text"
+              name="pub_key"
+              placeholder="@                                            .ed25519"
+              class="font-mono truncate flex-auto tracking-wider h-12 text-black focus:outline-none focus:ring-1 focus:ring-green-500 focus:border-transparent placeholder-gray-300"
+            >
+            <input
+              type="submit"
+              value="{{i18n "AdminAllowListAdd"}}"
+              class="pl-4 w-20 py-2 text-center text-green-500 hover:text-green-600 font-bold bg-transparent cursor-pointer"
+            >
+          </div>
+        </form>
+        {{range .Entries}}
+        <li class="flex flex-row items-center h-12">
+          <span
+            class="font-mono truncate flex-auto text-gray-600 tracking-wider"
+          >{{.PubKey.Ref}}</span>
+
+          <a
+            href="{{urlTo "admin:allow-list:remove:confirm" "id" .ID}}"
+            class="pl-4 w-20 py-2 text-center text-gray-400 hover:text-red-600 font-bold cursor-pointer"
+          >{{i18n "AdminAllowListRemove"}}</a>
+        </li>
+        {{end}}
+      </ul>
+{{end}}

web/templates/auth/fallback_sign_in.tmpl

@@ -1,18 +1,29 @@
 {{ define "title" }}{{i18n "AuthFallbackTitle"}}{{ end }}
 {{ define "content" }}
-<div id="page-header">
-  <h1 id="welcome" class="text-lg">{{i18n "AuthFallbackWelcome"}}</h1>
-</div>
-<div class="">
-  <form method="POST" action={{urlTo "auth:fallback:signin"}} class="flex flex-row items-end">
-    {{ .csrfField }}
-    <div class="w-96 grid grid-cols-2 gap-x-4 gap-y-1 mr-4">
-      <label>Username</label>
-      <label>Password</label>
-      <input class="shadow rounded border border-transparent h-8 p-1 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:border-transparent" type="text" name="user">
-      <input class="shadow rounded border border-transparent h-8 p-1 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:border-transparent" type="password" name="pass">
-    </div>
-    <button type="submit" class="shadow rounded px-4 h-8 text-gray-100 bg-pink-600 hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-opacity-50">Enter</button>
-  </form>
-</div> <!-- /row -->
+      <div id="page-header">
+        <h1 id="welcome" class="text-lg">{{i18n "AuthFallbackWelcome"}}</h1>
+      </div>
+      <div>
+        <form method="POST" action={{urlTo "auth:fallback:signin" }} class="flex flex-row items-end">
+          {{ .csrfField }}
+          <div class="w-96 grid grid-cols-2 gap-x-4 gap-y-1 mr-4">
+            <label>Username</label>
+            <label>Password</label>
+            <input
+              type="text"
+              name="user"
+              class="shadow rounded border border-transparent h-8 p-1 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:border-transparent"
+            >
+            <input
+              type="password"
+              name="pass"
+              class="shadow rounded border border-transparent h-8 p-1 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:border-transparent"
+            >
+          </div>
+          <button
+            type="submit"
+            class="shadow rounded px-4 h-8 text-gray-100 bg-pink-600 hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-opacity-50"
+          >Enter</button>
+        </form>
+      </div>
 {{end}}

web/templates/base.tmpl

@@ -28,7 +28,7 @@
       {{end}}
     </div>
 
-    <div class="bg-gray-50 rounded-2xl p-4 shadow-xl mb-16">
+    <div class="bg-gray-50 rounded-2xl py-4 px-4 sm:px-8 shadow-xl mb-16">
       {{ block "content" . }}{{end}}
     </div>
   </div>